Jamey Greenwood
5f3efebdfc
Move announcement_bar from ThemeLive.PreviewPages to a new shared SimpleshopThemeWeb.ShopComponents module. This establishes the pattern for Phase 9 storefront integration where components need to work in both the admin theme preview and public storefront pages. Changes: - Create lib/simpleshop_theme_web/components/shop_components.ex - Add optional message attribute (defaults to "Free delivery over £40") - Import ShopComponents in html_helpers for global availability - Import ShopComponents in PreviewPages for embedded template access - Update all 7 preview templates to use short-form <.announcement_bar> - Remove original announcement_bar/1 from PreviewPages (now unused) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
42 lines
1.3 KiB
Elixir
42 lines
1.3 KiB
Elixir
defmodule SimpleshopThemeWeb.ShopComponents do
|
|
@moduledoc """
|
|
Provides shop/storefront UI components.
|
|
|
|
These components are shared between the theme preview system and
|
|
the public storefront pages. They render using CSS custom properties
|
|
defined by the theme settings.
|
|
"""
|
|
use Phoenix.Component
|
|
|
|
@doc """
|
|
Renders the announcement bar.
|
|
|
|
The bar displays promotional messaging at the top of the page.
|
|
It uses CSS custom properties for theming.
|
|
|
|
## Attributes
|
|
|
|
* `theme_settings` - Required. The theme settings map.
|
|
* `message` - Optional. The announcement message to display.
|
|
Defaults to "Free delivery on orders over £40".
|
|
|
|
## Examples
|
|
|
|
<.announcement_bar theme_settings={@theme_settings} />
|
|
<.announcement_bar theme_settings={@theme_settings} message="20% off this weekend!" />
|
|
"""
|
|
attr :theme_settings, :map, required: true
|
|
attr :message, :string, default: "Free delivery on orders over £40"
|
|
|
|
def announcement_bar(assigns) do
|
|
~H"""
|
|
<div
|
|
class="announcement-bar"
|
|
style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); text-align: center; padding: 0.5rem 1rem; font-size: var(--t-text-small);"
|
|
>
|
|
<p style="margin: 0;">{@message}</p>
|
|
</div>
|
|
"""
|
|
end
|
|
end
|