Merge tweaks

TrellisCommerce · Mar 20, 2024 · 3d6e62b · 3d6e62b
1 parent 7d6757a
commit 3d6e62b
Show file tree

Hide file tree

Showing 23 changed files with 632 additions and 587 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -2,12 +2,12 @@ name: CI
 on: [push]
 jobs:
   tailwindcss-update:
-    name: Generate TailwindCSS
+    name: Generate Tailwind CSS
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-      - name: Generate TailwindCSS
+      - name: Generate Tailwind CSS
         uses: ZoeyVid/tailwindcss-update@main
         with:
           input: assets/app-tailwind.css

diff --git a/config/settings_schema.json b/config/settings_schema.json
@@ -1581,62 +1581,62 @@
     ]
   },
   {
-    "name": "TailwindCSS",
+    "name": "Tailwind CSS",
     "settings": [
       {
         "type": "text",
         "id": "twcss_product_card_container",
-        "label": "TailwindCSS for Product Card Container"
+        "label": "Tailwind CSS for Product Card Container"
       },
       {
         "type": "text",
         "id": "twcss_product_card_image",
-        "label": "TailwindCSS for Product Card Image"
+        "label": "Tailwind CSS for Product Card Image"
       },
       {
         "type": "text",
         "id": "twcss_product_card_heading",
-        "label": "TailwindCSS for Product Card Heading"
+        "label": "Tailwind CSS for Product Card Heading"
       },
       {
         "type": "text",
         "id": "twcss_product_card_price",
-        "label": "TailwindCSS for Product Card Price"
+        "label": "Tailwind CSS for Product Card Price"
       },
       {
         "type": "text",
         "id": "twcss_product_card_price_sale",
-        "label": "TailwindCSS for Product Card Sale Price"
+        "label": "Tailwind CSS for Product Card Sale Price"
       },
       {
         "type": "text",
         "id": "twcss_product_card_caption",
-        "label": "TailwindCSS for Product Card Caption"
+        "label": "Tailwind CSS for Product Card Caption"
       },
       {
         "type": "text",
         "id": "twcss_product_card_badge",
-        "label": "TailwindCSS for Product Card Badge"
+        "label": "Tailwind CSS for Product Card Badge"
       },
       {
         "type": "text",
         "id": "twcss_collection_card_container",
-        "label": "TailwindCSS for Collection Card Container"
+        "label": "Tailwind CSS for Collection Card Container"
       },
       {
         "type": "text",
         "id": "twcss_collection_card_image",
-        "label": "TailwindCSS for Collection Card Image"
+        "label": "Tailwind CSS for Collection Card Image"
       },
       {
         "type": "text",
         "id": "twcss_collection_card_heading",
-        "label": "TailwindCSS for Collection Card Heading"
+        "label": "Tailwind CSS for Collection Card Heading"
       },
       {
         "type": "text",
         "id": "twcss_collection_card_caption",
-        "label": "TailwindCSS for Collection Card Caption"
+        "label": "Tailwind CSS for Collection Card Caption"
       }
     ]
   }

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -454,11 +454,11 @@
       },
       "tailwind": {
         "heading": "Tailwind CSS",
-        "text": "TailwindCSS for Text",
+        "text": "Tailwind CSS for Text",
         "container": "TalwindCSS for Container",
-        "button": "TailwindCSS for Button",
-        "svg": "TailwindCSS for SVG",
-        "input": "TailwindCSS for Input"
+        "button": "Tailwind CSS for Button",
+        "svg": "Tailwind CSS for SVG",
+        "input": "Tailwind CSS for Input"
       },
       "spacing": "Spacing",
       "colors": {

diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid
@@ -19,29 +19,29 @@
 {% endif %}
 
 <div
-  class="utility-bar color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator and section.blocks.size > 0 %} utility-bar--bottom-border{% elsif section.settings.show_line_separator and section.settings.show_social and social_icons%} utility-bar--bottom-border-social-only{% endif %}{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header-localization{% endif %}"
+  class='{{ section.settings.twcss_container }} utility-bar color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator and section.blocks.size > 0 %} utility-bar--bottom-border{% elsif section.settings.show_line_separator and section.settings.show_social and social_icons%} utility-bar--bottom-border-social-only{% endif %}{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header-localization{% endif %}'
   {{ block.shopify_attributes }}
 >
-  <div class="page-width utility-bar__grid{% if announcement_bar and language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--3-col{% elsif language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--2-col{% endif %}">
+  <div class='page-width utility-bar__grid{% if announcement_bar and language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--3-col{% elsif language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--2-col{% endif %}'>
     {%- if section.settings.show_social and social_icons -%}
       {%- render 'social-icons' -%}
     {%- endif -%}
     {%- if section.blocks.size == 1 -%}
       <div
-        class="announcement-bar{% if section.settings.show_social %} announcement-bar--one-announcement{% endif %} {{ section.settings.twcss_container }}"
-        role="region"
-        aria-label="{{ 'sections.header.announcement' | t }}"
+        class='announcement-bar{% if section.settings.show_social %} announcement-bar--one-announcement{% endif %}'
+        role='region'
+        aria-label='{{ 'sections.header.announcement' | t }}'
         {{ block.shopify_attributes }}
       >
         {%- if section.blocks.first.settings.text != blank -%}
           {%- if section.blocks.first.settings.link != blank -%}
             <a
-              href="{{ section.blocks.first.settings.link }}"
-              class="announcement-bar__link link link--text focus-inset animate-arrow"
+              href='{{ section.blocks.first.settings.link }}'
+              class='announcement-bar__link link link--text focus-inset animate-arrow'
             >
           {%- endif -%}
-          <p class="announcement-bar__message h5">
-            <span class="{{ section.settings.twcss_text }}">{{ section.blocks.first.settings.text | escape }}</span>
+          <p class='announcement-bar__message h5'>
+            <span class='{{ section.settings.twcss_text }}'>{{ section.blocks.first.settings.text | escape }}</span>
             {%- if section.blocks.first.settings.link != blank -%}
               {% render 'icon-arrow' %}
             {%- endif -%}
@@ -53,54 +53,54 @@
       </div>
     {%- elsif section.blocks.size > 1 -%}
       <slideshow-component
-        class="announcement-bar"
-        role="region"
-        aria-roledescription="{{ 'sections.announcements.carousel' | t }}"
-        aria-label="{{ 'sections.announcements.announcement_bar' | t }}"
+        class='announcement-bar'
+        role='region'
+        aria-roledescription='{{ 'sections.announcements.carousel' | t }}'
+        aria-label='{{ 'sections.announcements.announcement_bar' | t }}'
       >
-        <div class="announcement-bar-slider slider-buttons">
+        <div class='announcement-bar-slider slider-buttons'>
           <button
-            type="button"
-            class="slider-button slider-button--prev"
-            name="previous"
-            aria-label="{{ 'sections.announcements.previous_announcement' | t }}"
-            aria-controls="Slider-{{ section.id }}"
+            type='button'
+            class='slider-button slider-button--prev'
+            name='previous'
+            aria-label='{{ 'sections.announcements.previous_announcement' | t }}'
+            aria-controls='Slider-{{ section.id }}'
           >
             {% render 'icon-caret' %}
           </button>
           <div
-            class="grid grid--1-col slider slider--everywhere"
-            id="Slider-{{ section.id }}"
-            aria-live="polite"
-            aria-atomic="true"
-            data-autoplay="{{ section.settings.auto_rotate }}"
-            data-speed="{{ section.settings.change_slides_speed }}"
+            class='grid grid--1-col slider slider--everywhere'
+            id='Slider-{{ section.id }}'
+            aria-live='polite'
+            aria-atomic='true'
+            data-autoplay='{{ section.settings.auto_rotate }}'
+            data-speed='{{ section.settings.change_slides_speed }}'
           >
             {%- for block in section.blocks -%}
               <div
-                class="slideshow__slide slider__slide grid__item grid--1-col"
-                id="Slide-{{ section.id }}-{{ forloop.index }}"
+                class='slideshow__slide slider__slide grid__item grid--1-col'
+                id='Slide-{{ section.id }}-{{ forloop.index }}'
                 {{ block.shopify_attributes }}
-                role="group"
-                aria-roledescription="{{ 'sections.announcements.announcement' | t }}"
-                aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
-                tabindex="-1"
+                role='group'
+                aria-roledescription='{{ 'sections.announcements.announcement' | t }}'
+                aria-label='{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}'
+                tabindex='-1'
               >
                 <div
-                  class="announcement-bar__announcement"
-                  role="region"
-                  aria-label="{{ 'sections.header.announcement' | t }}"
+                  class='announcement-bar__announcement'
+                  role='region'
+                  aria-label='{{ 'sections.header.announcement' | t }}'
                   {{ block.shopify_attributes }}
                 >
                   {%- if block.settings.text != blank -%}
                     {%- if block.settings.link != blank -%}
                       <a
-                        href="{{ block.settings.link }}"
-                        class="announcement-bar__link link link--text focus-inset animate-arrow"
+                        href='{{ block.settings.link }}'
+                        class='announcement-bar__link link link--text focus-inset animate-arrow'
                       >
                     {%- endif -%}
-                    <p class="announcement-bar__message h5">
-                      <span>{{ block.settings.text | escape }}</span>
+                    <p class='announcement-bar__message h5'>
+                      <span class='{{ section.settings.twcss_text }}'>{{ block.settings.text | escape }}</span>
                       {%- if block.settings.link != blank -%}
                         {% render 'icon-arrow' %}
                       {%- endif -%}
@@ -114,18 +114,18 @@
             {%- endfor -%}
           </div>
           <button
-            type="button"
-            class="slider-button slider-button--next"
-            name="next"
-            aria-label="{{ 'sections.announcements.next_announcement' | t }}"
-            aria-controls="Slider-{{ section.id }}"
+            type='button'
+            class='slider-button slider-button--next'
+            name='next'
+            aria-label='{{ 'sections.announcements.next_announcement' | t }}'
+            aria-controls='Slider-{{ section.id }}'
           >
             {% render 'icon-caret' %}
           </button>
         </div>
       </slideshow-component>
       {%- if request.design_mode -%}
-        <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
+        <script src='{{ 'theme-editor.js' | asset_url }}' defer='defer'></script>
         <style>
           /* theme editor power preview fix */
           .announcement-bar-slider .slider__slide[aria-hidden='true'] {
@@ -134,22 +134,22 @@
         </style>
       {%- endif -%}
     {%- endif -%}
-    <div class="localization-wrapper">
+    <div class='localization-wrapper'>
       {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
-        <noscript class="small-hide medium-hide">
+        <noscript class='small-hide medium-hide'>
           {%- form 'localization', id: 'AnnouncementCountryMobileFormNoScript', class: 'localization-form' -%}
-            <div class="localization-form__select">
-              <h2 class="visually-hidden" id="AnnouncementCountryMobileLabelNoScript">
+            <div class='localization-form__select'>
+              <h2 class='visually-hidden' id='AnnouncementCountryMobileLabelNoScript'>
                 {{ 'localization.country_label' | t }}
               </h2>
               <select
-                class="localization-selector link"
-                name="country_code"
-                aria-labelledby="AnnouncementCountryMobileLabelNoScript"
+                class='localization-selector link'
+                name='country_code'
+                aria-labelledby='AnnouncementCountryMobileLabelNoScript'
               >
                 {%- for country in localization.available_countries -%}
                   <option
-                    value="{{ country.iso_code }}"
+                    value='{{ country.iso_code }}'
                     {%- if country.iso_code == localization.country.iso_code %}
                       selected
                     {% endif %}
@@ -161,36 +161,36 @@
               </select>
               {% render 'icon-caret' %}
             </div>
-            <button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
+            <button class='button button--tertiary'>{{ 'localization.update_country' | t }}</button>
           {%- endform -%}
         </noscript>
 
-        <localization-form class="small-hide medium-hide no-js-hidden">
+        <localization-form class='small-hide medium-hide no-js-hidden'>
           {%- form 'localization', id: 'AnnouncementCountryForm', class: 'localization-form' -%}
             <div>
-              <h2 class="visually-hidden" id="AnnouncementCountryLabel">{{ 'localization.country_label' | t }}</h2>
+              <h2 class='visually-hidden' id='AnnouncementCountryLabel'>{{ 'localization.country_label' | t }}</h2>
               {%- render 'country-localization', localPosition: 'AnnouncementCountry' -%}
             </div>
           {%- endform -%}
         </localization-form>
       {% endif %}
 
       {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
-        <noscript class="small-hide medium-hide">
+        <noscript class='small-hide medium-hide'>
           {%- form 'localization', id: 'AnnouncementLanguageMobileFormNoScript', class: 'localization-form' -%}
-            <div class="localization-form__select">
-              <h2 class="visually-hidden" id="AnnouncementLanguageMobileLabelNoScript">
+            <div class='localization-form__select'>
+              <h2 class='visually-hidden' id='AnnouncementLanguageMobileLabelNoScript'>
                 {{ 'localization.language_label' | t }}
               </h2>
               <select
-                class="localization-selector link"
-                name="locale_code"
-                aria-labelledby="AnnouncementLanguageMobileLabelNoScript"
+                class='localization-selector link'
+                name='locale_code'
+                aria-labelledby='AnnouncementLanguageMobileLabelNoScript'
               >
                 {%- for language in localization.available_languages -%}
                   <option
-                    value="{{ language.iso_code }}"
-                    lang="{{ language.iso_code }}"
+                    value='{{ language.iso_code }}'
+                    lang='{{ language.iso_code }}'
                     {%- if language.iso_code == localization.language.iso_code %}
                       selected
                     {% endif %}
@@ -201,14 +201,14 @@
               </select>
               {% render 'icon-caret' %}
             </div>
-            <button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
+            <button class='button button--tertiary'>{{ 'localization.update_language' | t }}</button>
           {%- endform -%}
         </noscript>
 
-        <localization-form class="small-hide medium-hide no-js-hidden">
+        <localization-form class='small-hide medium-hide no-js-hidden'>
           {%- form 'localization', id: 'AnnouncementLanguageForm', class: 'localization-form' -%}
             <div>
-              <h2 class="visually-hidden" id="AnnouncementLanguageLabel">{{ 'localization.language_label' | t }}</h2>
+              <h2 class='visually-hidden' id='AnnouncementLanguageLabel'>{{ 'localization.language_label' | t }}</h2>
               {%- render 'language-localization', localPosition: 'AnnouncementLanguage' -%}
             </div>
           {%- endform -%}
@@ -270,20 +270,6 @@
       "label": "t:sections.announcement-bar.settings.change_slides_speed.label",
       "default": 5
     },
-    {
-      "type": "header",
-      "content": "TailwindCSS"
-    },
-    {
-      "type": "text",
-      "id": "twcss_container",
-      "label": "TailwindCSS for Container"
-    },
-    {
-      "type": "text",
-      "id": "twcss_text",
-      "label": "TailwindCSS for Text"
-    },
     {
       "type": "header",
       "content": "t:sections.announcement-bar.settings.header__3.content",
@@ -305,6 +291,20 @@
       "id": "enable_language_selector",
       "default": false,
       "label": "t:sections.announcement-bar.settings.enable_language_selector.label"
+    },
+    {
+      "type": "header",
+      "content": "Tailwind CSS"
+    },
+    {
+      "type": "text",
+      "id": "twcss_container",
+      "label": "Tailwind CSS for Container"
+    },
+    {
+      "type": "text",
+      "id": "twcss_text",
+      "label": "Tailwind CSS for Text"
     }
   ],
   "blocks": [