Skip to content

Commit

Permalink
🌸🛠️🧹 Marketplace: Tidy up Marketplace#show (#1336)
Browse files Browse the repository at this point in the history
* 🌸🛠️🧹 `Marketplace`: Tidy up `Marketplace#show`

- #1326
- #1187

- 🛠️ `Components`: Makes sure Tailwind notices `Furniture`'s `Component` files

- 🧹 `Components` I'm not sure if this is the right path or not but it decouples our
  `ButtonComponent` from the `button.scss` file, and makes it a bit
  easier to override the defaults for how we present buttons.

- 🌸 Gets rid of the extra
  `Marketplace::Cart::Delivery::EditButtonComponent` that hangs out
  underneath the cart

- 🌸 Tailors the `Marketplace::Cart::Delivery::EditButtonComponent`
  better for smaller screens.

* 🧹`Components`: Consolidate `margin` and `padding` as `spacing`

Again, not sure this is a great idea but I wanted some way to partially
overload the default classes a component uses.
  • Loading branch information
zspencer authored Apr 10, 2023
1 parent e2216fb commit e8dcb3d
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 17 deletions.
4 changes: 2 additions & 2 deletions app/components/button_component.html.erb
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<%- if @disabled %>
<span class="no-underline bg-transparent hover:bg-primary-100 text-gray-700 button #{classes}"><%= @label %></span>
<span class="<%= classes %>"><%= @label %></span>
<%- else %>
<%= link_to @label,
@href,
title: @title,
method: @method,
data: data,
class: "no-underline bg-transparent hover:bg-primary-100 text-gray-700 button #{classes}" %>
class: classes %>
<%- end %>
18 changes: 15 additions & 3 deletions app/components/button_component.rb
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
# frozen_string_literal: true

class ButtonComponent < ViewComponent::Base
attr_accessor :spacing, :shape, :typography, :color, :animation

def initialize(
label:,
title:,
href:,
method: :put,
confirm: nil,
disabled: false,
classes: nil,
animation: "transition ease-in-out duration-150",
color: "bg-transparent bg-transparent hover:bg-primary-100 text-gray-700",
spacing: "my-1 py-2 px-4",
typography: "no-underline text-center font-bold",
shape: "rounded",
turbo_stream: false
)
@label = label
Expand All @@ -17,11 +23,17 @@ def initialize(
@method = method
@confirm = confirm
@disabled = disabled
@classes = classes
self.animation = animation
self.color = color
self.spacing = spacing
self.shape = shape
self.typography = typography
@turbo_stream = turbo_stream
end

attr_accessor :classes
def classes
[animation, color, spacing, shape, typography].compact.join(" ")
end

private

Expand Down
11 changes: 6 additions & 5 deletions app/furniture/marketplace/cart/deliveries/_delivery.html.erb
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<div id="<%=dom_id(delivery) %>">
<div class="flex flex-wrap items-center justify-between text-sm">
<span>Delivering to: <%= render(delivery.delivery_area) if delivery.delivery_area.present? %></span>
<div id="<%=dom_id(delivery) %>" class="flex flex-wrap items-center justify-between text-sm mt-1 sm:mt-2">
<span>
<span class="font-bold">Delivering to:</span>
<%= render(delivery.delivery_area) if delivery.delivery_area.present? %>
</span>

<%= render Marketplace::Cart::Delivery::EditButtonComponent.new(delivery) %>
</div>
<%= render Marketplace::Cart::Delivery::EditButtonComponent.new(delivery) %>
</div>
14 changes: 10 additions & 4 deletions app/furniture/marketplace/cart/delivery/edit_button_component.rb
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,17 @@ class Cart
class Delivery
class EditButtonComponent < ButtonComponent
attr_accessor :delivery
def initialize(delivery,
classes: "w-full sm:w-auto font-light text-xs m-0 bg-primary-200 underline",
label: t("marketplace.cart.deliveries.edit.link_to"))
def initialize(delivery, label: t("marketplace.cart.deliveries.edit.link_to"),
shape: "w-full sm:w-auto rounded",
spacing: "mb-1 mt-1 sm:mt-0 py-2 px-4",
typography: "no-underline font-normal text-sm text-center",
color: "bg-primary-100 hover:bg-primary-200 focus:bg-primary-200",
**kwargs)
self.delivery = delivery
super(method: :get, href: delivery.location(:edit), label: label, turbo_stream: true, title: nil, classes: classes)
super(href: delivery.location(:edit), label: label, title: nil,
method: :get, turbo_stream: true,
spacing: spacing, typography: typography, color: color,
shape: shape, **kwargs)
end
end
end
Expand Down
5 changes: 2 additions & 3 deletions app/furniture/marketplace/carts/_cart.html.erb
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div id="<%= dom_id(cart) %>">
<div class="-mx-4 mt-4 overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:-mx-6 md:mx-0 md:rounded-lg">
<div class="mt-2 overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
<table class="min-w-full divide-y divide-gray-300 table-fixed">
<thead class="bg-gray-50">
<tr>
Expand All @@ -24,13 +24,12 @@
</table>
</div>

<p class="text-right py-2 text-sm">
<p class="text-right px-2 sm:px-4 py-2 text-sm">
<%- if cart.marketplace.delivery_window.present? %>
Orders placed by <%= cart.marketplace.order_by %>
are delivered on <%= cart.marketplace.delivery_window %>
<%- elsif cart.delivery_window.present? %>
Place orders <%= cart.marketplace.order_by %> to ensure an on-time delivery for <%= render(cart.delivery_window) %>
<%= render Marketplace::Cart::Delivery::EditButtonComponent.new(cart.delivery) %>
<%- end %>
</p>
</div>

0 comments on commit e8dcb3d

Please sign in to comment.