@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/sections/cart.liquid

@@ -0,0 +1,65 @@
+{% comment %}
+  This section is used in the cart template to render /cart page with an
+  overview of the items in customer's cart.
+
+  https://shopify.dev/docs/storefronts/themes/architecture/templates/cart
+{% endcomment %}
+
+<h1>{{ 'cart.title' | t }}</h1>
+
+{%- comment -%}
+  Free-shipping threshold as Baseline Progress (spec: components/progress/spec.md). The threshold is in the store's
+  currency, and Liquid has no exchange rate, so the bar shows only when the cart is in that currency.
+{%- endcomment -%}
+{%- liquid
+  assign threshold = section.settings.free_shipping_threshold | times: 100
+  if threshold > 0 and cart.item_count > 0 and cart.currency.iso_code == shop.currency
+    if cart.total_price >= threshold
+      assign shipping_label = 'cart.free_shipping_unlocked' | t
+      assign shipping_value = threshold
+    else
+      assign shipping_remaining = threshold | minus: cart.total_price | money
+      assign shipping_label = 'cart.free_shipping_remaining' | t: amount: shipping_remaining
+      assign shipping_value = cart.total_price
+    endif
+  endif
+-%}
+{%- if shipping_label != blank -%}
+  {% render 'progress', value: shipping_value, max: threshold, label: shipping_label, id: 'bl-cart-free-shipping' %}
+{%- endif -%}
+
+<form action="{{ routes.cart_url }}" method="post">
+  <table>
+    {% for item in cart.items %}
+      <tr>
+        <td>
+          {% render 'image', image: item.image, url: item.url %}
+        </td>
+        <td>
+          <p>{{ item.product.title }}</p>
+          {{ 'cart.remove' | t | link_to: item.url_to_remove }}
+        </td>
+        <td>
+          {% render 'input', type: 'text', name: 'updates[]', value: item.quantity, attrs: 'inputmode="numeric" pattern="[0-9]*" aria-label="Quantity"', class: 'bl-input--quantity' %}
+          <input type="submit" value="{{ 'cart.update' | t }}">
+        </td>
+      </tr>
+    {% endfor %}
+  </table>
+
+  <input type="submit" name="checkout" value="{{ 'cart.checkout' | t }}">
+</form>
+
+{% schema %}
+{
+  "name": "t:general.cart",
+  "settings": [
+    {
+      "type": "number",
+      "id": "free_shipping_threshold",
+      "label": "t:labels.free_shipping_threshold",
+      "info": "t:labels.free_shipping_threshold_info"
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify/sections/collection.liquid

@@ -0,0 +1,54 @@
+{% comment %}
+  This section is used in the collection template to render collection page
+  listing all products within a collection.
+
+  https://shopify.dev/docs/storefronts/themes/architecture/templates/collection
+{% endcomment %}
+
+{% render 'breadcrumb', class: 'bl-breadcrumb--page' %}
+<h1>{{ collection.title }}</h1>
+
+<div class="collection-products">
+  {% paginate collection.products by 20 %}
+    {% for product in collection.products %}
+      <div class="collection-product">
+        {% if product.featured_image %}
+          {% render 'image',
+            class: 'collection-product__image',
+            image: product.featured_image,
+            url: product.url,
+            width: 400,
+            height: 400,
+            crop: 'center'
+          %}
+        {% endif %}
+        <div class="collection-product__content">
+          {%- comment -%} Badge: stock and price are Liquid facts, so the badge is too (components/badge/spec.md) {%- endcomment -%}
+          {%- if product.available == false -%}
+            {% render 'badge', label: 'Sold out', variant: 'secondary', size: 'sm' %}
+          {%- elsif product.compare_at_price > product.price -%}
+            {% render 'badge', label: 'Sale', variant: 'destructive', size: 'sm' %}
+          {%- endif -%}
+          <p>{{ product.title | escape | link_to: product.url }}</p>
+          <p>{{ product.price | money }}</p>
+        </div>
+      </div>
+    {% endfor %}
+
+    {% render 'pagination', paginate: paginate %}
+  {% endpaginate %}
+</div>
+
+{% stylesheet %}
+  .collection-products {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+  }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:general.collection",
+  "settings": []
+}
+{% endschema %}

package/templates/shopify/sections/collections.liquid

@@ -0,0 +1,83 @@
+{% comment %}
+  This section is used in the list-collections template to render a list of
+  collections.
+
+  https://shopify.dev/docs/storefronts/themes/architecture/templates/collection
+{% endcomment %}
+
+<h1>{{ 'collections.title' | t }}</h1>
+
+<div
+  class="collections {{ section.settings.grid_item_width }}"
+  style="--grid-gap: {{ section.settings.grid_gap }}px"
+>
+  {% for collection in collections %}
+    <a class="collection-card" href="{{ collection.url }}">
+      {% if collection.featured_image %}
+        {% render 'image',
+          class: 'collection-card__image',
+          image: collection.featured_image,
+          width: 600,
+          height: 600,
+          crop: 'center'
+        %}
+      {% endif %}
+
+      <div class="collection-card__content">
+        <p>{{ collection.title }}</p>
+
+        {% if collection.description %}
+          <p>{{ collection.description | strip_html | truncatewords: 15 }}</p>
+        {% endif %}
+      </div>
+    </a>
+  {% endfor %}
+</div>
+
+{% stylesheet %}
+  .collections {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr));
+    gap: var(--grid-gap);
+  }
+  .collections--compact {
+    --collection-card-size: 160px;
+  }
+  .collections--full {
+    --collection-card-size: 280px;
+  }
+  .collection-card {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:general.collections_grid",
+  "settings": [
+    {
+      "type": "select",
+      "id": "grid_item_width",
+      "label": "t:labels.grid_item_width",
+      "options": [
+        { "value": "collections--compact", "label": "t:options.size.small" },
+        { "value": "collections--full", "label": "t:options.size.large" }
+      ],
+      "default": "collections--full"
+    },
+    {
+      "type": "range",
+      "id": "grid_gap",
+      "label": "t:labels.grid_gap",
+      "min": 0,
+      "max": 50,
+      "step": 5,
+      "unit": "px",
+      "default": 10
+    }
+  ],
+  "presets": [{ "name": "t:general.collections_grid" }]
+}
+{% endschema %}

package/templates/shopify/sections/custom-section.liquid

@@ -0,0 +1,60 @@
+<div class="custom-section full-width">
+  {% if section.settings.background_image %}
+    <div class="custom-section__background">
+      {{ section.settings.background_image | image_url: width: 2000 | image_tag }}
+    </div>
+  {% endif %}
+
+  <div class="custom-section__content">
+    {% content_for 'blocks' %}
+  </div>
+</div>
+
+{% stylesheet %}
+  .custom-section {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+  }
+  .custom-section__background {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    overflow: hidden;
+  }
+  .custom-section__background img {
+    position: absolute;
+    width: 100%;
+    height: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .custom-section__content {
+    display: grid;
+    grid-template-columns: var(--content-grid);
+  }
+  .custom-section__content > * {
+    grid-column: 2;
+  }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:general.custom_section",
+  "blocks": [{ "type": "@theme" }],
+  "settings": [
+    {
+      "type": "image_picker",
+      "id": "background_image",
+      "label": "t:labels.background"
+    }
+  ],
+  "presets": [
+    {
+      "name": "t:general.custom_section"
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify/sections/footer-group.json

@@ -0,0 +1,25 @@
+/*
+ * ------------------------------------------------------------
+ * IMPORTANT: The contents of this file are auto-generated.
+ *
+ * This file may be updated by the Shopify admin theme editor
+ * or related systems. Please exercise caution as any changes
+ * made to this file may be overwritten.
+ * ------------------------------------------------------------
+ */
+{
+  "type": "footer",
+  "name": "t:general.footer",
+  "sections": {
+    "footer": {
+      "type": "footer",
+      "settings": {
+        "menu": "",
+        "show_payment_icons": true
+      }
+    }
+  },
+  "order": [
+    "footer"
+  ]
+}

package/templates/shopify/sections/footer.liquid

@@ -0,0 +1,57 @@
+<footer>
+  <div class="footer__copyright">
+    &copy;
+    {{ 'now' | date: '%Y' }}
+    {{ shop.name | link_to: routes.root_url }}, {{ powered_by_link }}
+  </div>
+
+  <div class="footer__links">
+    {% for link in section.settings.menu.links %}
+      {{ link.title | link_to: link.url }}
+    {% endfor %}
+  </div>
+
+  <div class="footer__payment">
+    {% if section.settings.show_payment_icons %}
+      {% for type in shop.enabled_payment_types %}
+        {{ type | payment_type_svg_tag }}
+      {% endfor %}
+    {% endif %}
+  </div>
+</footer>
+
+{% stylesheet %}
+  footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 2rem;
+  }
+  footer a {
+    text-decoration: none;
+    color: var(--color-foreground);
+  }
+  footer .footer__links,
+  footer .footer__payment {
+    display: flex;
+    gap: 1rem;
+  }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:general.footer",
+  "settings": [
+    {
+      "type": "link_list",
+      "id": "menu",
+      "label": "t:labels.menu"
+    },
+    {
+      "type": "checkbox",
+      "id": "show_payment_icons",
+      "label": "t:labels.show_payment_icons",
+      "default": true
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify/sections/header-group.json

@@ -0,0 +1,22 @@
+/*
+ * ------------------------------------------------------------
+ * IMPORTANT: The contents of this file are auto-generated.
+ *
+ * This file may be updated by the Shopify admin theme editor
+ * or related systems. Please exercise caution as any changes
+ * made to this file may be overwritten.
+ * ------------------------------------------------------------
+ */
+{
+  "type": "header",
+  "name": "t:general.header",
+  "sections": {
+    "header": {
+      "type": "baseline-header",
+      "settings": {}
+    }
+  },
+  "order": [
+    "header"
+  ],
+}

package/templates/shopify/sections/page.liquid

@@ -0,0 +1,18 @@
+{% comment %}
+  This section is used in the page template to render store pages like About us
+  or Contact us.
+
+  https://shopify.dev/docs/storefronts/themes/architecture/templates/page
+{% endcomment %}
+
+{% render 'breadcrumb', class: 'bl-breadcrumb--page' %}
+<h1>{{ page.title }}</h1>
+
+<div class="typeset">{{ page.content }}</div>
+
+{% schema %}
+{
+  "name": "t:general.page",
+  "settings": []
+}
+{% endschema %}

package/templates/shopify/sections/password.liquid

@@ -0,0 +1,36 @@
+{% comment %}
+  This section is used in the password template to render landing page shown
+  when password protection is applied to a store.
+
+  https://shopify.dev/docs/storefronts/themes/architecture/templates/password
+{% endcomment %}
+
+<h1>{{ 'password.title' | t }}</h1>
+
+{% if shop.password_message %}
+  <p>{{ shop.password_message }}</p>
+{% endif %}
+
+{% form 'storefront_password' %}
+  {%- if form.errors -%}
+    {%- capture password_errors -%}{{ form.errors | default_errors }}{%- endcapture -%}
+    {% render 'alert', variant: 'destructive', icon: 'error', description: password_errors, urgent: true %}
+  {%- endif -%}
+
+  <label for="password-input">
+    {{ 'password.password' | t }}
+  </label>
+
+  {% render 'input', type: 'password', name: 'password', id: 'password-input', autocomplete: 'current-password' %}
+
+  <button type="submit">
+    {{ 'password.enter' | t }}
+  </button>
+{% endform %}
+
+{% schema %}
+{
+  "name": "t:general.password",
+  "settings": []
+}
+{% endschema %}

package/templates/shopify/sections/product.liquid

@@ -0,0 +1,60 @@
+{% comment %}
+  This section is used in the product template to render product page with
+  media, content, and add-to-cart form.
+
+  https://shopify.dev/docs/storefronts/themes/architecture/templates/product
+{% endcomment %}
+
+{% render 'breadcrumb', class: 'bl-breadcrumb--page' %}
+
+<div class="product-images">
+  {% for image in product.images %}
+    {% render 'image', class: 'product-image', image: image %}
+  {% endfor %}
+</div>
+
+<div class="product-info">
+  <h1>{{ product.title }}</h1>
+  <p>{{ product.price | money }}</p>
+  <div class="typeset">{{ product.description }}</div>
+</div>
+
+<div class="product-form">
+  {% form 'product', product %}
+    {% assign current_variant = product.selected_or_first_available_variant %}
+
+    {%- capture variant_options -%}
+      {% for variant in product.variants %}
+        <option
+          value="{{ variant.id }}"
+          {% if variant == current_variant %}
+            selected="selected"
+          {% endif %}
+        >
+          {{ variant.title }} - {{ variant.price | money }}
+        </option>
+      {% endfor %}
+    {%- endcapture -%}
+    {% render 'native-select', name: 'id', options: variant_options %}
+
+    {% render 'input', type: 'text', name: 'quantity', value: '1', attrs: 'min="1" inputmode="numeric" pattern="[0-9]*" aria-label="Quantity"', class: 'bl-input--quantity' %}
+
+    {%- comment -%} Baseline button via snippet; disabled is a Liquid fact (stock), not a merchant setting {%- endcomment -%}
+    {%- if current_variant.available -%}
+      {% render 'button', label: 'Add to cart', type: 'submit', variant: 'default', size: 'lg', attrs: 'name="add"' %}
+    {%- else -%}
+      {% render 'button', label: 'Sold out', type: 'submit', variant: 'default', size: 'lg', disabled: true, attrs: 'name="add"' %}
+    {%- endif -%}
+    {{ form | payment_button }}
+  {% endform %}
+</div>
+
+{% schema %}
+{
+  "name": "t:general.product",
+  "settings": [],
+  "disabled_on": {
+    "groups": ["header", "footer"]
+  }
+}
+{% endschema %}

package/templates/shopify/sections/search.liquid

@@ -0,0 +1,73 @@
+{% comment %}
+  This section is used in the search template to render search results for
+  products, articles, and pages.
+
+  https://shopify.dev/docs/storefronts/themes/architecture/templates/search
+{% endcomment %}
+
+{% render 'breadcrumb', class: 'bl-breadcrumb--page' %}
+<h1>{{ 'search.title' | t }}</h1>
+
+<form action="{{ routes.search_url }}" method="get" role="search">
+  {%- assign search_placeholder = 'search.placeholder' | t -%}
+  {%- capture search_control -%}
+    {% render 'input', type: 'search', name: 'q', value: search.terms, placeholder: search_placeholder %}
+  {%- endcapture -%}
+  {%- comment -%} a filter cannot be passed as a `render` argument; assign first {%- endcomment -%}
+  {%- assign search_submit_label = 'search.submit' | t -%}
+  {%- capture search_submit -%}
+    {% render 'button', label: search_submit_label, variant: 'secondary', size: 'xs', type: 'submit' %}
+  {%- endcapture -%}
+  {% render 'input-group', control: search_control, end: search_submit %}
+</form>
+
+{% if search.performed %}
+  {% if search.results_count == 0 %}
+    <p>{{ 'search.no_results_html' | t: terms: search.terms }}</p>
+  {% else %}
+    <p>{{ 'search.results_for_html' | t: terms: search.terms, count: search.results_count }}</p>
+
+    <div class="search-results">
+      {% paginate search.results by 20 %}
+        {% # Search result items may be an article, a page, or a product. %}
+        {% for result in search.results %}
+          <div class="search-result">
+            {% assign featured_image = result.featured_image | default: result.image %}
+            {% if featured_image %}
+              {% render 'image', class: 'search-result__image', image: featured_image, url: result.url, width: 400 %}
+            {% endif %}
+            <div class="search-result__content">
+              <p>
+                {{ result.title | link_to: result.url }}
+                {% if result.price %}
+                  {{ result.price | money_with_currency }}
+                {% endif %}
+              </p>
+            </div>
+          </div>
+        {% endfor %}
+
+        {{ paginate | default_pagination }}
+      {% endpaginate %}
+    </div>
+  {% endif %}
+{% endif %}
+
+{% stylesheet %}
+  .search-results {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+  .search-results .prev,
+  .search-results .page,
+  .search-results .next {
+    grid-column: 1 / -1;
+  }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:general.search",
+  "settings": []
+}
+{% endschema %}

package/templates/shopify/snippets/accordion-item.figma.ts

@@ -0,0 +1,34 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=391-58
+// source=platforms/shopify/theme/snippets/accordion-item.liquid
+// component=accordion-item (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): Figma's Accordion is one accordion-item render. Title is
+// `title`, Open is `open`, and the Children slot's text (drawn only when open) is the `content`. The items of one
+// accordion share a `name` for one-at-a-time, upstream's default. Look is the project's look (ADR-0031), so it maps to
+// nothing here.
+// State (default | hover) is a CSS state and maps to nothing.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const title = instance.getString("Title");
+const open = instance.getEnum("Open", { false: false, true: true }) === true;
+
+function slot(name: string, node: any = instance): any {
+  for (const child of node?.children ?? []) {
+    if (child.name === name && child.type !== "INSTANCE" && child.type !== "TEXT") return child;
+    const hit = child.type === "INSTANCE" ? undefined : slot(name, child);
+    if (hit) return hit;
+  }
+  return undefined;
+}
+const text = (slot("Children")?.children ?? [])
+  .filter((c: any) => c.type === "TEXT")
+  .map((c: any) => `<p>${c.textContent}</p>`)
+  .join("");
+// a Liquid string literal has no escapes, so a value holding a single quote is double-quoted
+const literal = (s: string) => (s.includes("'") ? `"${s}"` : `'${s}'`);
+
+export default {
+  example: figma.code`{% render 'accordion-item', title: ${literal(title)}, content: ${literal(text || "<p>…</p>")}, name: 'accordion'${open ? ", open: true" : ""} %}`,
+  id: "shopify-accordion-item",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/accordion-item.liquid

@@ -0,0 +1,36 @@
+{% doc %}
+  One Baseline Accordion item (spec: components/accordion/spec.md): a native <details> with the title as a heading inside
+  its <summary>, the system chevrons (down when closed, up when open) and the content. Items sharing a `name` close each
+  other, with no JavaScript. Render items into the `accordion` snippet, which styles them.
+
+  @param {string} title - the item's heading
+  @param {string} content - the content; HTML is allowed
+  @param {string} [name] - shared by the items of one accordion for one-at-a-time; leave out for independent items
+  @param {boolean} [open] - open at first
+  @param {string} [heading] - the title's element: h2, h3 (default), h4, h5 or h6
+  @param {string} [attrs] - extra attributes on the <details> (block.shopify_attributes)
+
+  @example
+  {%- capture items -%}
+    {% render 'accordion-item', title: 'Shipping', content: shipping_html, name: 'faq', open: true %}
+    {% render 'accordion-item', title: 'Returns', content: returns_html, name: 'faq' %}
+  {%- endcapture -%}
+  {% render 'accordion', items: items %}
+{% enddoc %}
+
+{%- liquid
+  assign tag = heading | default: 'h3'
+  case tag
+    when 'h2', 'h3', 'h4', 'h5', 'h6'
+    else
+      assign tag = 'h3'
+  endcase
+-%}
+<details class="bl-accordion__item" data-slot="accordion-item"{% if name != blank %} name="{{ name | escape }}"{% endif %}{% if open %} open{% endif %} {{ attrs }}>
+  <summary class="bl-accordion__trigger" data-slot="accordion-trigger">
+    <{{ tag }} class="bl-accordion__title" data-slot="accordion-title">{{ title | escape }}</{{ tag }}>
+    {%- render 'icon', name: 'chevron-down', class: 'bl-accordion__icon bl-accordion__icon--closed' -%}
+    {%- render 'icon', name: 'chevron-up', class: 'bl-accordion__icon bl-accordion__icon--open' -%}
+  </summary>
+  <div class="bl-accordion__content" data-slot="accordion-content">{{ content }}</div>
+</details>

package/templates/shopify/snippets/accordion.figma.ts

@@ -0,0 +1,37 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1472-1750
+// source=platforms/shopify/theme/snippets/accordion.liquid
+// component=accordion (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): Figma's Accordion Group is the accordion snippet around
+// accordion-item renders; its Accordions slot holds Accordion instances, which render their own templates. A
+// merchant-built accordion is the Accordion theme block (blocks/accordion.liquid). Look is the project's look
+// (ADR-0031): the theme installs one and makes it the snippet's default, so it maps to nothing here.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+function slot(name: string, node: any = instance): any {
+  for (const child of node?.children ?? []) {
+    if (child.name === name && child.type !== "INSTANCE" && child.type !== "TEXT") return child;
+    const hit = child.type === "INSTANCE" ? undefined : slot(name, child);
+    if (hit) return hit;
+  }
+  return undefined;
+}
+const items = (slot("Accordions")?.children ?? [])
+  .filter((c: any) => c.type === "INSTANCE")
+  .map((c: any) => {
+    try {
+      return c.executeTemplate().example;
+    } catch {
+      return undefined;
+    }
+  })
+  .filter(Boolean);
+
+export default {
+  example: figma.code`{%- capture accordion_items -%}
+  ${items}
+{%- endcapture -%}
+{% render 'accordion', items: accordion_items %}`,
+  id: "shopify-accordion",
+  metadata: { nestable: true },
+};