Merge pull request #19 from TrellisCommerce/feature/TECH-721-new

Feature/tech 721 new
TrellisCommerce · Mar 19, 2024 · 987a1ca · 987a1ca
2 parents 8689e0f + 7aaddfc
commit 987a1ca
Show file tree

Hide file tree

Showing 15 changed files with 388 additions and 74 deletions.
diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -411,6 +411,14 @@
         "padding_top": "Top padding",
         "padding_bottom": "Bottom padding"
       },
+      "tailwind": {
+        "heading": "Tailwind CSS",
+        "text": "TailwindCSS for Text",
+        "container": "TalwindCSS for Container",
+        "button": "TailwindCSS for Button",
+        "svg": "TailwindCSS for SVG",
+        "input": "TailwindCSS for Input"
+      },
       "spacing": "Spacing",
       "colors": {
         "accent_1": {

diff --git a/sections/collapsible-content.liquid b/sections/collapsible-content.liquid
@@ -15,16 +15,16 @@
   }
 {%- endstyle -%}
 
-<div class="color-{{ section.settings.color_scheme }} gradient">
+<div class="color-{{ section.settings.color_scheme }} gradient {{ section.settings.tailwind_container_classes }}">
   <div class="collapsible-content collapsible-{{ section.settings.layout }}-layout isolate{% if section.settings.layout == 'section' %} page-width{% elsif section.settings.layout == 'none' %} content-container content-container--full-width{% endif %}">
     <div class="collapsible-content__wrapper section-{{ section.id }}-padding{% if section.settings.layout == 'section' %} content-container color-{{ section.settings.container_color_scheme }} gradient{% endif %}">
       <div class="{% if section.settings.image == blank %}collapsible-content-wrapper-narrow{% else %}page-width{% endif %}">
         <div class="collapsible-content__header" style="text-align: {{ section.settings.heading_alignment }};">
           {%- if section.settings.caption != blank -%}
-            <p class="caption-with-letter-spacing">{{ section.settings.caption | escape }}</p>
+            <p class="caption-with-letter-spacing {{ section.settings.tailwind_text_classes }}">{{ section.settings.caption | escape }}</p>
           {% endif %}
           {%- if section.settings.heading != blank -%}
-            <h2 class="collapsible-content__heading inline-richtext {{ section.settings.heading_size }}">
+            <h2 class="collapsible-content__heading inline-richtext {{ section.settings.heading_size }} {{ section.settings.tailwind_text_classes }}">
               {{ section.settings.heading }}
             </h2>
           {%- else -%}
@@ -65,14 +65,14 @@
                   {% endif %}
                 >
                   <summary id="Summary-{{ block.id }}-{{ section.id }}">
-                    {% render 'icon-accordion', icon: block.settings.icon %}
-                    <h3 class="accordion__title inline-richtext h4">
+                    {% render 'icon-accordion', icon: block.settings.icon, iconClasses: section.settings.tailwind_svg_classes %}
+                    <h3 class="accordion__title inline-richtext h4 {{ section.settings.tailwind_text_classes }}">
                       {{ block.settings.heading | default: block.settings.page.title }}
                     </h3>
-                    {% render 'icon-caret' %}
+                    {% render 'icon-caret', iconClasses: section.settings.tailwind_svg_classes %}
                   </summary>
                   <div
-                    class="accordion__content rte"
+                    class="accordion__content rte {{ section.settings.tailwind_text_classes }}"
                     id="CollapsibleAccordion-{{ block.id }}-{{ section.id }}"
                     role="region"
                     aria-labelledby="Summary-{{ block.id }}-{{ section.id }}"
@@ -302,6 +302,25 @@
       "unit": "px",
       "label": "t:sections.all.padding.padding_bottom",
       "default": 36
+    },
+    {
+      "type": "header",
+      "content": "t:sections.all.tailwind.heading"
+    },
+    {
+      "type": "text",
+      "id": "tailwind_container_classes",
+      "label": "t:sections.all.tailwind.container"
+    },
+    {
+      "type": "text",
+      "id": "tailwind_text_classes",
+      "label": "t:sections.all.tailwind.text"
+    },
+    {
+      "type": "text",
+      "id": "tailwind_svg_classes",
+      "label": "t:sections.all.tailwind.svg"
     }
   ],
   "blocks": [

diff --git a/sections/collection-list.liquid b/sections/collection-list.liquid
@@ -24,13 +24,13 @@
   endif
 -%}
 
-<div class='color-{{ section.settings.color_scheme }} gradient'>
+<div class='color-{{ section.settings.color_scheme }} gradient {{ section.settings.tailwind_container_classes }}'>
   <div class='collection-list-wrapper page-width isolate{% if show_mobile_slider %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %} section-{{ section.id }}-padding'>
     {%- unless section.settings.title == blank -%}
       <div class='title-wrapper-with-link{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin'>
         <h2
           id='SectionHeading-{{ section.id }}'
-          class='collection-list-title inline-richtext {{ section.settings.heading_size }}'
+          class='collection-list-title inline-richtext {{ section.settings.heading_size }} {{ section.settings.tailwind_text_classes }}'
         >
           {{ section.settings.title }}
         </h2>
@@ -40,7 +40,7 @@
             href='{{ routes.collections_url }}'
             id='ViewAll-{{ section.id }}'
             class='link underlined-link large-up-hide'
-            aria-labelledby='ViewAll-{{ section.id }} SectionHeading-{{ section.id }}'
+            aria-labelledby='ViewAll-{{ section.id }} SectionHeading-{{ section.id }} {{ section.settings.tailwind_text_classes }}'
           >
             {{- 'sections.collection_list.view_all' | t -}}
           </a>
@@ -112,7 +112,7 @@
           href='{{ routes.collections_url }}'
           class='button'
           id='ViewAllButton-{{ section.id }}'
-          aria-labelledby='ViewAllButton-{{ section.id }} SectionHeading-{{ section.id }}'
+          aria-labelledby='ViewAllButton-{{ section.id }} SectionHeading-{{ section.id }} {{ section.settings.tailwind_text_classes }}'
         >
           {{- 'sections.collection_list.view_all' | t -}}
         </a>
@@ -271,6 +271,20 @@
       "unit": "px",
       "label": "t:sections.all.padding.padding_bottom",
       "default": 36
+    },
+    {
+      "type": "header",
+      "content": "t:sections.all.tailwind.heading"
+    },
+    {
+      "type": "text",
+      "id": "tailwind_container_classes",
+      "label": "t:sections.all.tailwind.container"
+    },
+    {
+      "type": "text",
+      "id": "tailwind_text_classes",
+      "label": "t:sections.all.tailwind.text"
     }
   ],
   "blocks": [

diff --git a/sections/contact-form.liquid b/sections/contact-form.liquid
@@ -14,24 +14,24 @@
   }
 {%- endstyle -%}
 
-<div class="color-{{ section.settings.color_scheme }} gradient">
+<div class="color-{{ section.settings.color_scheme }} gradient {{ section.settings.tailwind_container_classes }} {{ section.settings.tailwind_text_classes }}">
   <div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
     {%- if section.settings.heading != blank -%}
-      <h2 class="title title-wrapper--no-top-margin inline-richtext {{ section.settings.heading_size }}">
+      <h2 class="title title-wrapper--no-top-margin inline-richtext {{ section.settings.heading_size }} {{ section.settings.tailwind_text_classes }}">
         {{ section.settings.heading }}
       </h2>
     {%- else -%}
       <h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2>
     {%- endif -%}
     {%- form 'contact', id: 'ContactForm', class: 'isolate' -%}
       {%- if form.posted_successfully? -%}
-        <h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>
+        <h2 class="form-status form-status-list form__message {{ section.settings.tailwind_text_classes }}" tabindex="-1" autofocus>
           {% render 'icon-success' %}
           {{ 'templates.contact.form.post_success' | t }}
         </h2>
       {%- elsif form.errors -%}
         <div class="form__message">
-          <h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>
+          <h2 class="form-status caption-large text-body {{ section.settings.tailwind_text_classes }}" role="alert" tabindex="-1" autofocus>
             {% render 'icon-error' %}
             {{ 'templates.contact.form.error_heading' | t }}
           </h2>
@@ -46,7 +46,7 @@
         </ul>
       {%- endif -%}
       <div class="contact__fields">
-        <div class="field">
+        <div class="field {{ section.settings.tailwind_input_classes }}">
           <input
             class="field__input"
             autocomplete="name"
@@ -56,9 +56,9 @@
             value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
             placeholder="{{ 'templates.contact.form.name' | t }}"
           >
-          <label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</label>
+          <label class="field__label {{ section.settings.tailwind_text_classes }}" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</label>
         </div>
-        <div class="field field--with-error">
+        <div class="field field--with-error {{ section.settings.tailwind_input_classes }}">
           <input
             autocomplete="email"
             type="email"
@@ -75,7 +75,7 @@
             {% endif %}
             placeholder="{{ 'templates.contact.form.email' | t }}"
           >
-          <label class="field__label" for="ContactForm-email">
+          <label class="field__label {{ section.settings.tailwind_text_classes }}" for="ContactForm-email">
             {{- 'templates.contact.form.email' | t }}
             <span aria-hidden="true">*</span></label
           >
@@ -91,7 +91,7 @@
           {%- endif -%}
         </div>
       </div>
-      <div class="field">
+      <div class="field {{ section.settings.tailwind_input_classes }}">
         <input
           type="tel"
           id="ContactForm-phone"
@@ -102,9 +102,9 @@
           value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}"
           placeholder="{{ 'templates.contact.form.phone' | t }}"
         >
-        <label class="field__label" for="ContactForm-phone">{{ 'templates.contact.form.phone' | t }}</label>
+        <label class="field__label {{ section.settings.tailwind_text_classes }}" for="ContactForm-phone">{{ 'templates.contact.form.phone' | t }}</label>
       </div>
-      <div class="field">
+      <div class="field {{ section.settings.tailwind_input_classes }}">
         <textarea
           rows="10"
           id="ContactForm-body"
@@ -114,12 +114,12 @@
         >
           {{- form.body -}}
         </textarea>
-        <label class="form__label field__label" for="ContactForm-body">
+        <label class="form__label field__label {{ section.settings.tailwind_text_classes }}" for="ContactForm-body">
           {{- 'templates.contact.form.comment' | t -}}
         </label>
       </div>
       <div class="contact__button">
-        <button type="submit" class="button">
+        <button type="submit" class="button {{ section.settings.tailwind_button_classes }}">
           {{ 'templates.contact.form.send' | t }}
         </button>
       </div>
@@ -213,6 +213,30 @@
       "unit": "px",
       "label": "t:sections.all.padding.padding_bottom",
       "default": 36
+    },
+    {
+      "type": "header",
+      "content": "t:sections.all.tailwind.heading"
+    },
+    {
+      "type": "text",
+      "id": "tailwind_container_classes",
+      "label": "t:sections.all.tailwind.container"
+    },
+    {
+      "type": "text",
+      "id": "tailwind_text_classes",
+      "label": "t:sections.all.tailwind.text"
+    },    
+    {
+      "type": "text",
+      "id": "tailwind_input_classes",
+      "label": "t:sections.all.tailwind.input"
+    },
+    {
+      "type": "text",
+      "id": "tailwind_button_classes",
+      "label": "t:sections.all.tailwind.button"
     }
   ],
   "presets": [

diff --git a/sections/featured-blog.liquid b/sections/featured-blog.liquid
@@ -24,11 +24,11 @@
     assign posts_displayed = section.settings.post_limit
   endif
 -%}
-<div class="blog color-{{ section.settings.color_scheme }} gradient{% if section.settings.heading == blank %} no-heading{% endif %}">
+<div class="blog color-{{ section.settings.color_scheme }} gradient{% if section.settings.heading == blank %} no-heading{% endif %} {{ section.settings.tailwind_container_classes }}">
   <div class="page-width-desktop isolate{% if posts_displayed < 3 %} page-width-tablet{% endif %} section-{{ section.id }}-padding">
     {%- unless section.settings.heading == blank -%}
       <div class="title-wrapper-with-link{% if posts_displayed > 2 %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
-        <h2 id="SectionHeading-{{ section.id }}" class="blog__title inline-richtext {{ section.settings.heading_size }}">
+        <h2 id="SectionHeading-{{ section.id }}" class="blog__title inline-richtext {{ section.settings.heading_size }} {{ section.settings.tailwind_text_classes }}">
           {{ section.settings.heading }}
         </h2>
 
@@ -102,7 +102,7 @@
           <a
             href="{{ section.settings.blog.url }}"
             id="ViewAll-{{ section.id }}"
-            class="blog__button button"
+            class="blog__button button {{ section.settings.tailwind_button_classes }}"
             aria-labelledby="ViewAll-{{ section.id }} SectionHeading-{{ section.id }}"
           >
             {{ 'sections.featured_blog.view_all' | t }}
@@ -115,10 +115,10 @@
           {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
         </div>
         <div class="blog-placeholder__content">
-          <h2>
+          <h2 class="{{ section.settings.tailwind_text_classes }}">
             {{ 'sections.featured_blog.onboarding_title' | t }}
           </h2>
-          <p class="rte-width">
+          <p class="rte-width {{ section.settings.tailwind_text_classes }}">
             {{ 'sections.featured_blog.onboarding_content' | t }}
           </p>
         </div>
@@ -261,6 +261,25 @@
       "unit": "px",
       "label": "t:sections.all.padding.padding_bottom",
       "default": 36
+    },
+    {
+      "type": "header",
+      "content": "t:sections.all.tailwind.heading"
+    },
+    {
+      "type": "text",
+      "id": "tailwind_container_classes",
+      "label": "t:sections.all.tailwind.container"
+    },
+    {
+      "type": "text",
+      "id": "tailwind_button_classes",
+      "label": "t:sections.all.tailwind.button"
+    },
+    {
+      "type": "text",
+      "id": "tailwind_text_classes",
+      "label": "t:sections.all.tailwind.text"
     }
   ],
   "presets": [