From 1de7cd2badbb23537eeb855d84594db26b9c1722 Mon Sep 17 00:00:00 2001
From: Chelsey Riewer <criewer@trellis.co>
Date: Thu, 8 Aug 2024 07:41:39 -0400
Subject: [PATCH] SHOPBASE-16 Add styles

---
 snippets/header-mega-menu.liquid | 177 +++++++++++++++++--------------
 1 file changed, 99 insertions(+), 78 deletions(-)

diff --git a/snippets/header-mega-menu.liquid b/snippets/header-mega-menu.liquid
index 379e1cab65..78199f01e4 100644
--- a/snippets/header-mega-menu.liquid
+++ b/snippets/header-mega-menu.liquid
@@ -31,87 +31,108 @@
                 class="mega-menu__content color-{{ section.settings.menu_color_scheme }} gradient motion-reduce global-settings-popup"
                 tabindex="-1"
               >
-                <ul
-                  class="mega-menu__list page-width{% if link.levels == 1 %} mega-menu__list--condensed{% endif %}"
-                  role="list"
-                >
-                  {%- for childlink in link.links -%}
-                    <li>
-                      <a
-                        id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
-                        href="{{ childlink.url }}"
-                        class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"
-                        {% if childlink.current %}
-                          aria-current="page"
-                        {% endif %}
-                      >
-                        {{ childlink.title | escape }}
-                      </a>
-                      {%- if childlink.links != blank -%}
-                        <ul class="list-unstyled" role="list">
-                          {%- for grandchildlink in childlink.links -%}
-                            <li>
-                              <a
-                                id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
-                                href="{{ grandchildlink.url }}"
-                                class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
-                                {% if grandchildlink.current %}
-                                  aria-current="page"
-                                {% endif %}
-                              >
-                                {{ grandchildlink.title | escape }}
-                              </a>
-                            </li>
-                            {%- if grandchildlink.links != blank -%}
-                              <ul class="list-unstyled" role="list">
-                                {%- for greatgrandchildlink in grandchildlink.links -%}
-                                  <li>
-                                    <a
-                                      id="HeaderMenu-{{ link.handle }}-{{ grandchildlink.handle }}-{{ greatgrandchildlink.handle }}"
-                                      href="{{ greatgrandchildlink.url }}"
-                                      class="mega-menu__link link{% if greatgrandchildlink.current %} mega-menu__link--active{% endif %}"
-                                      {% if greatgrandchildlink.current %}
-                                        aria-current="page"
-                                      {% endif %}
-                                    >
-                                      {{ greatgrandchildlink.title | escape }}
-                                    </a>
-                                  </li>
-                                  {%- if greatgrandchildlink.links != blank -%}
-                                    <ul class="list-unstyled" role="list">
-                                      {%- for greatgreatgrandchildlink in greatgrandchildlink.links -%}
-                                        <li>
-                                          <a
-                                            id="HeaderMenu-{{ link.handle }}-{{ greatgrandchildlink.handle }}-{{ greatgreatgrandchildlink.handle }}"
-                                            href="{{ greatgreatgrandchildlink.url }}"
-                                            class="mega-menu__link link{% if greatgreatgrandchildlink.current %} mega-menu__link--active{% endif %}"
-                                            {% if greatgreatgrandchildlink.current %}
-                                              aria-current="page"
-                                            {% endif %}
-                                          >
-                                            {{ greatgreatgrandchildlink.title | escape }}
-                                          </a>
-                                        </li>
-                                      {%- endfor -%}
-                                    </ul>
-                                    {%- endif -%}
-                                {%- endfor -%}
-                              </ul>
+                <div class="page-width twcss-flex">
+                  <ul
+                    class="mega-menu__list twcss-flex-1 {% if link.levels == 1 %} mega-menu__list--condensed{% endif %}"
+                    role="list"
+                  >
+                    {%- for childlink in link.links -%}
+                      <li>
+                        <a
+                          id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
+                          href="{{ childlink.url }}"
+                          class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"
+                          {% if childlink.current %}
+                            aria-current="page"
+                          {% endif %}
+                        >
+                          {{ childlink.title | escape }}
+                        </a>
+                        {%- if childlink.links != blank -%}
+                          <ul class="list-unstyled" role="list">
+                            {%- for grandchildlink in childlink.links -%}
+                              <li>
+                                <a
+                                  id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
+                                  href="{{ grandchildlink.url }}"
+                                  class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
+                                  {% if grandchildlink.current %}
+                                    aria-current="page"
+                                  {% endif %}
+                                >
+                                  {{ grandchildlink.title | escape }}
+                                </a>
+                              </li>
+                              {%- if grandchildlink.links != blank -%}
+                                <ul class="list-unstyled" role="list">
+                                  {%- for greatgrandchildlink in grandchildlink.links -%}
+                                    <li>
+                                      <a
+                                        id="HeaderMenu-{{ link.handle }}-{{ grandchildlink.handle }}-{{ greatgrandchildlink.handle }}"
+                                        href="{{ greatgrandchildlink.url }}"
+                                        class="mega-menu__link link{% if greatgrandchildlink.current %} mega-menu__link--active{% endif %}"
+                                        {% if greatgrandchildlink.current %}
+                                          aria-current="page"
+                                        {% endif %}
+                                      >
+                                        {{ greatgrandchildlink.title | escape }}
+                                      </a>
+                                    </li>
+                                    {%- if greatgrandchildlink.links != blank -%}
+                                      <ul class="list-unstyled" role="list">
+                                        {%- for greatgreatgrandchildlink in greatgrandchildlink.links -%}
+                                          <li>
+                                            <a
+                                              id="HeaderMenu-{{ link.handle }}-{{ greatgrandchildlink.handle }}-{{ greatgreatgrandchildlink.handle }}"
+                                              href="{{ greatgreatgrandchildlink.url }}"
+                                              class="mega-menu__link link{% if greatgreatgrandchildlink.current %} mega-menu__link--active{% endif %}"
+                                              {% if greatgreatgrandchildlink.current %}
+                                                aria-current="page"
+                                              {% endif %}
+                                            >
+                                              {{ greatgreatgrandchildlink.title | escape }}
+                                            </a>
+                                          </li>
+                                        {%- endfor -%}
+                                      </ul>
+                                      {%- endif -%}
+                                  {%- endfor -%}
+                                </ul>
+                              {%- endif -%}
+                            {%- endfor -%}
+                          </ul>
+                        {%- endif -%}
+                      </li>
+                    {%- endfor -%}
+                  </ul>
+                  {%- for block in blocks -%}
+                    {% case block.type %}
+                      {%- when 'promotional' -%}
+                        {%- if block.settings.promotional_index == parent_index -%}
+                          <div class="twcss-w-full twcss-max-w-64 twcss-flex twcss-flex-col twcss-gap-4">
+                            {%- if block.settings.promotional_headline -%}
+                              <img class="twcss-aspect-square" src="{{ block.settings.promotional_image | image_url }}" alt="{{ block.settings.promotional_image.alt | escape }}">
+                            {%- endif -%}
+                            {%- if block.settings.promotional_headline -%}
+                              <div class="twcss-text-large">
+                                {{ block.settings.promotional_headline }}
+                              </div>
                             {%- endif -%}
-                          {%- endfor -%}
-                        </ul>
-                      {%- endif -%}
-                      {%- for block in blocks -%}
-                        {% case block.type %}
-                          {%- when 'promotional' -%}
-                            {%- if block.settings.promotional_index == parent_index -%}
-                              {{ block.settings.promotional_headline }}
+                            {%- if block.settings.promotional_description -%}
+                              <p class="twcss-text-base">
+                                {{ block.settings.promotional_description }}
+                              </p>
+                            {%- endif -%}
+                            {%- if block.settings.promotional_button_text and block.settings.promotional_button_url -%}
+                              <a href="{{ block.settings.promotional_button_url }}" class="button button--secondary twcss-text-base">
+                                {{ block.settings.promotional_button_text }}
+                              </a>
                             {%- endif -%}
-                        {% endcase %}
-                      {%- endfor -%}
-                    </li>
+                          </div>
+                        {%- endif -%}
+                    {% endcase %}
                   {%- endfor -%}
-                </ul>
+                </div>
               </div>
             </details>
           </header-menu>