@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/blocks/contact-form.liquid

@@ -0,0 +1,69 @@
+{% doc %}
+  Baseline contact form (spec: components/sections/spec.md; Figma Contact/Centered): Shopify's contact form drawn with
+  the Baseline Field, Input, Textarea and Checkbox snippets. First and last name, company, email, phone, message and a
+  consent box; Shopify emails the submission to the store. The submit Button sits 28px below the fields (spacing/7).
+
+  @example
+  {% content_for 'block', type: 'contact-form', id: 'form' %}
+{% enddoc %}
+{%- liquid
+  assign fid = 'contact-' | append: block.id
+  assign id_first = fid | append: '-first'
+  assign id_last = fid | append: '-last'
+  assign id_company = fid | append: '-company'
+  assign id_email = fid | append: '-email'
+  assign id_phone = fid | append: '-phone'
+  assign id_message = fid | append: '-message'
+  assign id_consent = fid | append: '-consent'
+-%}
+<div class="bl-contact-form" {{ block.shopify_attributes }}>
+  {%- form 'contact', id: fid -%}
+    {%- if form.posted_successfully? -%}
+      <p class="bl-contact-form__status" role="status">{{ block.settings.success }}</p>
+    {%- endif -%}
+    {%- if form.errors -%}
+      <div class="bl-contact-form__errors" role="alert">{{ form.errors | default_errors }}</div>
+    {%- endif -%}
+    <div class="bl-contact-form__fields">
+      {%- capture c -%}{% render 'input', name: 'contact[first_name]', id: id_first, autocomplete: 'given-name', required: true %}{%- endcapture -%}
+      {% render 'field', control: c, label: 'First name', id: id_first %}
+      {%- capture c -%}{% render 'input', name: 'contact[last_name]', id: id_last, autocomplete: 'family-name', required: true %}{%- endcapture -%}
+      {% render 'field', control: c, label: 'Last name', id: id_last %}
+      {%- capture c -%}{% render 'input', name: 'contact[company]', id: id_company, autocomplete: 'organization' %}{%- endcapture -%}
+      {% render 'field', control: c, label: 'Company', id: id_company %}
+      {%- capture c -%}{% render 'input', type: 'email', name: 'contact[email]', id: id_email, autocomplete: 'email', required: true %}{%- endcapture -%}
+      {% render 'field', control: c, label: 'Email', id: id_email %}
+      {%- capture c -%}{% render 'input', type: 'tel', name: 'contact[phone]', id: id_phone, autocomplete: 'tel' %}{%- endcapture -%}
+      {% render 'field', control: c, label: 'Phone number', id: id_phone %}
+      {%- capture c -%}{% render 'textarea', name: 'contact[body]', id: id_message, rows: 4, required: true %}{%- endcapture -%}
+      {% render 'field', control: c, label: 'Message', id: id_message %}
+      {%- capture c -%}{% render 'checkbox', name: 'contact[consent]', id: id_consent, value: 'yes', required: true %}{%- endcapture -%}
+      {%- capture consent_description -%}Review our <a href="{{ block.settings.privacy_link | default: routes.root_url }}">privacy policy</a> and <a href="{{ block.settings.terms_link | default: routes.root_url }}">terms and conditions</a>.{%- endcapture -%}
+      {% render 'field', control: c, label: 'I agree to the privacy policy and terms and conditions.', id: id_consent, description: consent_description, orientation: 'horizontal' %}
+    </div>
+    <div class="bl-contact-form__submit">
+      {% render 'button', label: block.settings.submit_label, type: 'submit' %}
+    </div>
+  {%- endform -%}
+</div>
+
+{% stylesheet %}
+  .bl-contact-form__fields { display: flex; flex-direction: column; gap: var(--bl-field-group-gap, 1.75rem); }
+  .bl-contact-form__submit { margin-top: 1.75rem; }
+  .bl-contact-form__status { margin: 0 0 1rem; color: var(--foreground); font-weight: 500; }
+  .bl-contact-form__errors { margin: 0 0 1rem; color: var(--destructive); }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:baseline.contact_form.name",
+  "tag": null,
+  "settings": [
+    { "type": "text", "id": "submit_label", "label": "t:baseline.contact_form.submit_label", "default": "Submit" },
+    { "type": "text", "id": "success", "label": "t:baseline.contact_form.success", "default": "Thanks for getting in touch. We’ll reply within one business day." },
+    { "type": "url", "id": "privacy_link", "label": "t:baseline.contact_form.privacy_link" },
+    { "type": "url", "id": "terms_link", "label": "t:baseline.contact_form.terms_link" }
+  ],
+  "presets": [{ "name": "t:baseline.contact_form.name" }]
+}
+{% endschema %}

package/templates/shopify/blocks/container.liquid

@@ -0,0 +1,29 @@
+{% doc %}
+  Baseline Container theme block (spec: components/container/spec.md): a further width inside a Section (the section's
+  own width setting is its first Container).
+
+  @example
+  {% content_for 'block', type: 'container', id: 'container' %}
+{% enddoc %}
+{%- capture container_blocks -%}{% content_for 'blocks' %}{%- endcapture -%}
+{% render 'container',
+  content: container_blocks,
+  width: block.settings.width,
+  padding_x: block.settings.padding_x,
+  gap: block.settings.gap,
+  attrs: block.shopify_attributes
+%}
+
+{% schema %}
+{
+  "name": "t:baseline.container.name",
+  "tag": null,
+  "blocks": [{ "type": "@theme" }],
+  "settings": [
+    { "type": "select", "id": "width", "label": "t:baseline.container.width", "options": [{ "value": "content", "label": "t:baseline.container.content" }, { "value": "wide", "label": "t:baseline.container.wide" }, { "value": "full", "label": "t:baseline.container.full" }], "default": "content" },
+    { "type": "select", "id": "padding_x", "label": "t:baseline.container.padding_x", "options": [{"value":"none","label":"None"},{"value":"xs","label":"XS"},{"value":"sm","label":"SM"},{"value":"md","label":"MD"},{"value":"lg","label":"LG"},{"value":"xl","label":"XL"},{"value":"2xl","label":"2XL"}], "default": "none" },
+    { "type": "select", "id": "gap", "label": "t:baseline.container.gap", "options": [{"value":"none","label":"None"},{"value":"xs","label":"XS"},{"value":"sm","label":"SM"},{"value":"md","label":"MD"},{"value":"lg","label":"LG"},{"value":"xl","label":"XL"},{"value":"2xl","label":"2XL"}], "default": "sm" }
+  ],
+  "presets": [{ "name": "t:baseline.container.name" }]
+}
+{% endschema %}

package/templates/shopify/blocks/dialog.liquid

@@ -0,0 +1,77 @@
+{% doc %}
+  Baseline Dialog theme block (spec: components/dialog/spec.md): a wrapper around the `dialog` snippet. The trigger,
+  title and description are settings; nested theme blocks are the body, each one a grid item, and a nested Dialog
+  footer block (placed last) becomes the footer. Opens with no JavaScript (a native <dialog> and invoker commands).
+
+  @example
+  {% content_for 'block', type: 'dialog', id: 'dialog' %}
+{% enddoc %}
+
+{%- capture dialog_blocks -%}{% content_for 'blocks' %}{%- endcapture -%}
+{% render 'dialog',
+  id: block.id,
+  trigger: block.settings.trigger_label,
+  trigger_variant: block.settings.trigger_variant,
+  trigger_size: block.settings.trigger_size,
+  title: block.settings.title,
+  description: block.settings.description,
+  hide_close: block.settings.hide_close,
+  blocks: dialog_blocks,
+  attrs: block.shopify_attributes
+%}
+
+{% schema %}
+{
+  "name": "t:baseline.dialog.name",
+  "tag": null,
+  "blocks": [{ "type": "@theme" }, { "type": "_dialog-footer" }],
+  "settings": [
+    { "type": "text", "id": "trigger_label", "label": "t:baseline.dialog.trigger_label", "default": "Open" },
+    {
+      "type": "select",
+      "id": "trigger_variant",
+      "label": "t:baseline.button.variant",
+      "default": "outline",
+      "options": [
+        { "value": "default", "label": "t:baseline.variant.default" },
+        { "value": "secondary", "label": "t:baseline.variant.secondary" },
+        { "value": "outline", "label": "t:baseline.variant.outline" },
+        { "value": "ghost", "label": "t:baseline.variant.ghost" },
+        { "value": "link", "label": "t:baseline.variant.link" },
+        { "value": "destructive", "label": "t:baseline.variant.destructive" }
+      ]
+    },
+    {
+      "type": "select",
+      "id": "trigger_size",
+      "label": "t:baseline.button.size",
+      "default": "md",
+      "options": [
+        { "value": "xs", "label": "XS" },
+        { "value": "sm", "label": "SM" },
+        { "value": "md", "label": "MD" },
+        { "value": "lg", "label": "LG" }
+      ]
+    },
+    { "type": "text", "id": "title", "label": "t:baseline.dialog.title", "default": "Dialog title" },
+    { "type": "text", "id": "description", "label": "t:baseline.dialog.description" },
+    { "type": "checkbox", "id": "hide_close", "label": "t:baseline.dialog.hide_close", "default": false }
+  ],
+  "presets": [
+    {
+      "name": "t:baseline.dialog.name",
+      "settings": { "title": "Dialog title", "description": "A short supporting description." },
+      "blocks": {
+        "text": { "type": "text", "settings": { "text": "Dialog content.", "text_style": "text--normal" } },
+        "footer": {
+          "type": "_dialog-footer",
+          "settings": { "close_label": "Cancel" },
+          "blocks": { "button": { "type": "button", "settings": { "label": "Continue" } } },
+          "block_order": ["button"]
+        }
+      },
+      "block_order": ["text", "footer"]
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify/blocks/group.liquid

@@ -0,0 +1,105 @@
+{% doc %}
+  Renders a group of blocks with configurable layout direction, gap and
+  alignment.
+
+  All settings apply to only one dimension to reduce configuration complexity.
+
+  This component is a wrapper concerned only with rendering its children in
+  the specified layout direction with appropriate padding and alignment.
+
+  @example
+  {% content_for 'block', type: 'group', id: 'group' %}
+{% enddoc %}
+
+<div
+  class="group {{ block.settings.layout_direction }}"
+  style="
+    --padding: {{ block.settings.padding }}px;
+    --alignment: {{ block.settings.alignment }};
+  "
+  {{ block.shopify_attributes }}
+>
+  {% content_for 'blocks' %}
+</div>
+
+{% stylesheet %}
+  .group {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .group--horizontal {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 var(--padding);
+  }
+
+  .group--vertical {
+    flex-direction: column;
+    align-items: var(--alignment);
+    padding: var(--padding) 0;
+  }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:general.group",
+  "blocks": [{ "type": "@theme" }],
+  "settings": [
+    {
+      "type": "select",
+      "id": "layout_direction",
+      "label": "t:labels.layout_direction",
+      "default": "group--vertical",
+      "options": [
+        { "value": "group--horizontal", "label": "t:options.direction.horizontal" },
+        { "value": "group--vertical", "label": "t:options.direction.vertical" }
+      ]
+    },
+    {
+      "visible_if": "{{ block.settings.layout_direction == 'group--vertical' }}",
+      "type": "select",
+      "id": "alignment",
+      "label": "t:labels.alignment",
+      "default": "flex-start",
+      "options": [
+        { "value": "flex-start", "label": "t:options.alignment.left" },
+        { "value": "center", "label": "t:options.alignment.center" },
+        { "value": "flex-end", "label": "t:options.alignment.right" }
+      ]
+    },
+    {
+      "type": "range",
+      "id": "padding",
+      "label": "t:labels.padding",
+      "default": 0,
+      "min": 0,
+      "max": 200,
+      "step": 2,
+      "unit": "px"
+    }
+  ],
+  "presets": [
+    {
+      "name": "t:general.column",
+      "category": "t:general.layout",
+      "settings": {
+        "layout_direction": "group--vertical",
+        "alignment": "flex-start",
+        "padding": 0
+      }
+    },
+    {
+      "name": "t:general.row",
+      "category": "t:general.layout",
+      "settings": {
+        "layout_direction": "group--horizontal",
+        "padding": 0
+      }
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify/blocks/heading.liquid

@@ -0,0 +1,57 @@
+{% doc %}
+  Baseline heading theme block: a designed headline in one of the content-ramp text styles (ADR-0014; Figma's display/*
+  and heading/*), on any element so level and size stay independent. The classes come from snippets/text-styles.liquid
+  (generated from the Figma styles).
+
+  @example
+  {% content_for 'block', type: 'heading', id: 'heading' %}
+{% enddoc %}
+<{{ block.settings.tag }}
+  class="bl-heading {{ block.settings.style }}"
+  style="--bl-heading-align: {{ block.settings.alignment }}"
+  {{ block.shopify_attributes }}
+>
+  {{- block.settings.text -}}
+</{{ block.settings.tag }}>
+
+{% stylesheet %}
+  .bl-heading {
+    margin: 0;
+    text-align: var(--bl-heading-align, start);
+    text-wrap: balance;
+  }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:baseline.heading.name",
+  "tag": null,
+  "settings": [
+    { "type": "inline_richtext", "id": "text", "label": "t:baseline.heading.text", "default": "Build a website your team can run" },
+    {
+      "type": "select", "id": "style", "label": "t:baseline.heading.style",
+      "options": [
+        { "value": "display-lg", "label": "Display LG" },
+        { "value": "display-md", "label": "Display MD" },
+        { "value": "display-sm", "label": "Display SM" },
+        { "value": "heading-xl", "label": "Heading XL" },
+        { "value": "heading-lg", "label": "Heading LG" },
+        { "value": "heading-md", "label": "Heading MD" },
+        { "value": "heading-sm", "label": "Heading SM" }
+      ],
+      "default": "heading-xl"
+    },
+    {
+      "type": "select", "id": "tag", "label": "t:baseline.heading.tag", "info": "t:baseline.heading.tag_info",
+      "options": [
+        { "value": "h1", "label": "h1" }, { "value": "h2", "label": "h2" }, { "value": "h3", "label": "h3" },
+        { "value": "h4", "label": "h4" }, { "value": "h5", "label": "h5" }, { "value": "h6", "label": "h6" },
+        { "value": "p", "label": "p" }
+      ],
+      "default": "h2"
+    },
+    { "type": "text_alignment", "id": "alignment", "label": "t:labels.alignment", "default": "left" }
+  ],
+  "presets": [{ "name": "t:baseline.heading.name" }]
+}
+{% endschema %}