@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/sections/baseline-header.liquid

@@ -0,0 +1,236 @@
+{% comment %}
+  Baseline header (spec: components/header/spec.md): Figma's two layouts, chosen with the Layout setting. Inline: an
+  optional announcement on the muted surface, then logo, navigation and actions on one row. Stacked: logo and actions,
+  then the navigation on its own row. Below md the navigation is the Sidebar's menu in a Sheet. Search opens a Dialog
+  with predictive search (assets/predictive-search.js); Account links to the customer account; Cart is a drawer or the
+  cart page by the theme setting Cart > Cart type. Not sticky. Built on the tokens, replacing Skeleton's header.
+{% endcomment %}
+{%- liquid
+  assign layout = section.settings.layout
+  assign cart_type = settings.cart_type | default: 'page'
+  assign cart_label = 'Cart'
+  assign cart_count = ''
+  if cart.item_count > 0
+    assign cart_label = 'Cart, ' | append: cart.item_count | append: ' items'
+    capture cart_count
+      render 'badge', label: cart.item_count, size: 'sm', class: 'bl-button__count'
+    endcapture
+  endif
+  assign show_account = false
+  if section.settings.show_account and shop.customer_accounts_enabled
+    assign show_account = true
+  endif
+-%}
+
+{%- capture logo -%}
+  <a href="{{ routes.root_url }}" class="bl-header__logo">
+    {%- if section.settings.logo -%}
+      {{ section.settings.logo | image_url: width: 400 | image_tag: alt: shop.name, height: section.settings.logo_height, style: 'height: var(--bl-header-logo-height); width: auto' }}
+    {%- else -%}
+      <span class="heading-md">{{ shop.name }}</span>
+    {%- endif -%}
+  </a>
+{%- endcapture -%}
+
+{%- capture menu_button -%}
+  {%- if section.settings.menu != blank -%}
+    <span class="bl-header__menu-button">
+      {% render 'button', label: 'Menu', variant: 'ghost', icon: 'menu', icon_only: true, attrs: 'command="show-modal" commandfor="header-menu"' %}
+    </span>
+  {%- endif -%}
+{%- endcapture -%}
+
+{%- capture actions -%}
+  {%- if layout == 'inline' and section.settings.cta_label != blank -%}
+    {% render 'button', label: section.settings.cta_label, href: section.settings.cta_link, icon: section.settings.cta_icon %}
+  {%- endif -%}
+  <span class="bl-header__icons">
+    {%- if section.settings.show_search -%}
+      {% render 'button', label: 'Search', variant: 'ghost', icon: 'search', icon_only: true, attrs: 'command="show-modal" commandfor="header-search"' %}
+    {%- endif -%}
+    {%- if show_account -%}
+      {% render 'button', label: 'Account', href: routes.account_url, variant: 'ghost', icon: 'user', icon_only: true %}
+    {%- endif -%}
+    {%- if section.settings.show_cart -%}
+      {%- if cart_type == 'drawer' -%}
+        {% render 'button', label: cart_label, variant: 'ghost', icon: 'cart', icon_only: true, badge: cart_count, attrs: 'command="show-modal" commandfor="header-cart"' %}
+      {%- else -%}
+        {% render 'button', label: cart_label, href: routes.cart_url, variant: 'ghost', icon: 'cart', icon_only: true, badge: cart_count %}
+      {%- endif -%}
+    {%- endif -%}
+  </span>
+{%- endcapture -%}
+
+{%- capture nav -%}
+  {%- if section.settings.menu != blank -%}
+    {% render 'navigation-menu', menu: section.settings.menu, id: 'header-nav' %}
+  {%- endif -%}
+{%- endcapture -%}
+
+<div class="bl-header full-width color-{{ section.settings.color_scheme.id }}" data-layout="{{ layout }}">
+  {%- if layout == 'inline' and section.settings.announcement != blank -%}
+    <div class="bl-header__announcement">
+      {%- capture announcement -%}
+        <p>
+          {{ section.settings.announcement }}
+          {%- if section.settings.announcement_link != blank and section.settings.announcement_link_label != blank %}
+            <a href="{{ section.settings.announcement_link }}">{{ section.settings.announcement_link_label }}</a>
+          {%- endif -%}
+        </p>
+      {%- endcapture -%}
+      {% render 'container', content: announcement, width: 'wide' %}
+    </div>
+  {%- endif -%}
+
+  <div class="bl-header__bar">
+    {%- capture row -%}
+      <div class="bl-header__row">
+        {{ menu_button }}
+        {{ logo }}
+        {%- if layout == 'inline' -%}<div class="bl-header__nav">{{ nav }}</div>{%- endif -%}
+        <div class="bl-header__actions">{{ actions }}</div>
+      </div>
+    {%- endcapture -%}
+    {% render 'container', content: row, width: 'wide' %}
+  </div>
+
+  {%- if layout == 'stacked' and nav != blank -%}
+    <div class="bl-header__navrow">{% render 'container', content: nav, width: 'wide' %}</div>
+  {%- endif -%}
+
+  {%- if section.settings.menu != blank -%}
+    {%- capture mobile_menu -%}{% render 'sidebar-menu', menu: section.settings.menu %}{%- endcapture -%}
+    {% render 'sheet', id: 'header-menu', side: 'left', title: shop.name, content: mobile_menu, class: 'bl-sidebar-sheet' %}
+  {%- endif -%}
+
+  {%- if section.settings.show_search -%}
+    {%- capture search_form -%}
+      <form action="{{ routes.search_url }}" method="get" role="search" class="bl-header__search" data-predictive-search>
+        <div class="bl-header__search-row">
+          {% render 'input', type: 'search', name: 'q', placeholder: 'Search…', autocomplete: 'off', attrs: 'aria-label="Search" aria-controls="header-search-results"' %}
+          {% render 'button', label: 'Search', type: 'submit' %}
+        </div>
+        <div id="header-search-results" class="bl-header__results" aria-live="polite" data-predictive-search-results></div>
+      </form>
+    {%- endcapture -%}
+    {% render 'dialog', id: 'header-search', title: 'Search', content: search_form %}
+    <script src="{{ 'predictive-search.js' | asset_url }}" defer></script>
+  {%- endif -%}
+
+  {%- if section.settings.show_cart and cart_type == 'drawer' -%}
+    {%- capture cart_body -%}
+      {%- if cart.item_count > 0 -%}
+        <ul class="bl-cart__lines">
+          {%- for item in cart.items -%}
+            <li class="bl-cart__line">
+              {%- if item.image -%}{{ item.image | image_url: width: 160 | image_tag: class: 'bl-cart__image', alt: item.product.title }}{%- endif -%}
+              <div class="bl-cart__detail">
+                <a href="{{ item.url }}" class="bl-cart__title">{{ item.product.title }}</a>
+                {%- unless item.product.has_only_default_variant -%}<span class="bl-cart__muted">{{ item.variant.title }}</span>{%- endunless -%}
+                <span class="bl-cart__muted">{{ item.quantity }} × {{ item.final_price | money }}</span>
+              </div>
+              <span class="bl-cart__price">{{ item.final_line_price | money }}</span>
+            </li>
+          {%- endfor -%}
+        </ul>
+      {%- else -%}
+        <p class="bl-cart__empty">Your cart is empty.</p>
+      {%- endif -%}
+    {%- endcapture -%}
+    {%- capture cart_footer -%}
+      {%- if cart.item_count > 0 -%}
+        <p class="bl-cart__subtotal"><span>Subtotal</span><span>{{ cart.total_price | money }}</span></p>
+        <form action="{{ routes.cart_url }}" method="post" class="bl-cart__checkout">
+          {% render 'button', label: 'Check out', type: 'submit', attrs: 'name="checkout"' %}
+        </form>
+        {% render 'button', label: 'View cart', href: routes.cart_url, variant: 'outline' %}
+      {%- else -%}
+        {% render 'button', label: 'Continue shopping', href: routes.all_products_collection_url, variant: 'outline' %}
+      {%- endif -%}
+    {%- endcapture -%}
+    {% render 'sheet', id: 'header-cart', side: 'right', title: 'Cart', content: cart_body, footer: cart_footer %}
+  {%- endif -%}
+</div>
+
+{% stylesheet %}
+  /* Mirrors registry/src/blocks/header-inline and header-stacked (md = 48rem). Colours from the section's scheme. */
+  .bl-header {
+    --bl-header-logo-height: 2.75rem;
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+  .bl-header__announcement {
+    padding-block: 0.5rem;
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+    font-size: var(--bl-text-sm);
+    line-height: var(--bl-text-sm--line-height);
+    text-align: center;
+  }
+  .bl-header__announcement p { margin: 0; }
+  .bl-header__announcement a { color: var(--foreground); font-weight: 600; text-decoration: none; }
+  .bl-header__announcement a:hover { text-decoration: underline; text-underline-offset: 4px; }
+  .bl-header__bar { padding-block: 1rem; border-bottom: 1px solid var(--border); }
+  .bl-header__row { display: flex; align-items: center; gap: 1rem; }
+  /* a long shop name truncates rather than pushing the actions off a phone screen */
+  .bl-header__logo { display: flex; min-width: 0; align-items: center; color: inherit; text-decoration: none; }
+  .bl-header__logo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .bl-header__logo > img { flex-shrink: 0; }
+  .bl-header__nav { display: none; }
+  .bl-header__actions { display: flex; align-items: center; gap: 1rem; margin-inline-start: auto; }
+  .bl-header__icons { display: flex; align-items: center; gap: 0.25rem; }
+  .bl-header__navrow { display: none; padding-block: 0.5rem; border-bottom: 1px solid var(--border); }
+  @media (min-width: 48rem) {
+    .bl-header__menu-button { display: none; }
+    .bl-header__nav { display: flex; flex: 1 1 auto; justify-content: center; }
+    .bl-header__navrow { display: block; }
+  }
+  .bl-header__search { display: flex; flex-direction: column; gap: 1rem; }
+  .bl-header__search-row { display: flex; gap: 0.5rem; }
+  .bl-header__search-row > :first-child { flex: 1; }
+  .bl-header__results:empty { display: none; }
+  .bl-header__results ul { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
+  .bl-header__results a {
+    display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: var(--bl-control-radius, 0.5rem);
+    color: inherit; text-decoration: none;
+  }
+  .bl-header__results a:hover, .bl-header__results a:focus-visible { background-color: var(--accent); color: var(--accent-foreground); }
+  .bl-header__results img { width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: 0.25rem; }
+  .bl-header__results small { color: var(--muted-foreground); }
+  .bl-cart__lines { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0 var(--bl-sheet-padding); list-style: none; }
+  .bl-cart__line { display: flex; align-items: flex-start; gap: 0.75rem; }
+  .bl-cart__image { width: 4rem; height: 4rem; object-fit: cover; border-radius: 0.375rem; }
+  .bl-cart__detail { display: flex; flex: 1; flex-direction: column; gap: 0.125rem; font-size: var(--bl-text-sm); }
+  .bl-cart__title { color: inherit; font-weight: 500; text-decoration: none; }
+  .bl-cart__muted { color: var(--muted-foreground); }
+  .bl-cart__price { font-size: var(--bl-text-sm); font-weight: 500; }
+  .bl-cart__empty { margin: 0; padding: 0 var(--bl-sheet-padding); color: var(--muted-foreground); }
+  .bl-cart__subtotal { display: flex; justify-content: space-between; margin: 0; font-weight: 600; }
+  .bl-cart__checkout { display: contents; }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:baseline.header.name",
+  "tag": "header",
+  "class": "bl-header-section",
+  "settings": [
+    { "type": "select", "id": "layout", "label": "t:baseline.header.layout", "options": [{ "value": "inline", "label": "t:baseline.header.layout_inline" }, { "value": "stacked", "label": "t:baseline.header.layout_stacked" }], "default": "inline" },
+    { "type": "color_scheme", "id": "color_scheme", "label": "t:baseline.color_scheme", "default": "scheme-1" },
+    { "type": "image_picker", "id": "logo", "label": "t:baseline.header.logo" },
+    { "type": "range", "id": "logo_height", "label": "t:baseline.header.logo_height", "min": 24, "max": 80, "step": 4, "unit": "px", "default": 44 },
+    { "type": "link_list", "id": "menu", "label": "t:labels.menu", "default": "main-menu" },
+    { "type": "header", "content": "t:baseline.header.announcement" },
+    { "type": "text", "id": "announcement", "label": "t:baseline.header.announcement_text", "info": "t:baseline.header.inline_only" },
+    { "type": "text", "id": "announcement_link_label", "label": "t:baseline.header.announcement_link_label" },
+    { "type": "url", "id": "announcement_link", "label": "t:baseline.header.announcement_link" },
+    { "type": "header", "content": "t:baseline.header.actions" },
+    { "type": "text", "id": "cta_label", "label": "t:baseline.header.cta_label", "info": "t:baseline.header.inline_only" },
+    { "type": "url", "id": "cta_link", "label": "t:baseline.header.cta_link" },
+    { "type": "select", "id": "cta_icon", "label": "t:baseline.header.cta_icon", "options": [{ "value": "", "label": "t:baseline.header.no_icon" }, { "value": "phone", "label": "phone" }, { "value": "arrow-right", "label": "arrow-right" }, { "value": "mail", "label": "mail" }], "default": "" },
+    { "type": "checkbox", "id": "show_search", "label": "t:baseline.header.show_search", "default": true },
+    { "type": "checkbox", "id": "show_account", "label": "t:baseline.header.show_account", "default": true },
+    { "type": "checkbox", "id": "show_cart", "label": "t:baseline.header.show_cart", "info": "t:baseline.header.cart_info", "default": true }
+  ]
+}
+{% endschema %}