persistent offcanvas if third-party integration only (#846)

JudicialCouncilOfCalifornia · Sep 20, 2023 · d367035 · d367035
1 parent 6a2b7eb
commit d367035
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 76 deletions.
diff --git a/source/_patterns/03-organisms/offcanvas/offcanvas.twig b/source/_patterns/03-organisms/offcanvas/offcanvas.twig
@@ -1,58 +1,62 @@
 {# TODO: Possibly refactor later as a "drawer" component since diverging from offcanvas intent ... https://getbootstrap.com/docs/5.0/components/offcanvas/ #}
 
 <div class="jcc-offcanvas" id="{{ offcanvas.id }}" data-offcanvas="container" visible="visible">
-  <dialog class="jcc-offcanvas__dialog" role="dialog" data-offcanvas="dialog" tabindex="-1">
-    <div class="jcc-offcanvas__dialog-header">
-      <div class="jcc-offcanvas__dialog-close">
+  {% if offcanvas.dialog %}
+    <dialog class="jcc-offcanvas__dialog" role="dialog" data-offcanvas="dialog" tabindex="-1">
+      <div class="jcc-offcanvas__dialog-header">
+        <div class="jcc-offcanvas__dialog-close">
+          {% include '@atoms/button/button.twig' with {
+            button: {
+              id: offcanvas.dialog.button_close.id|default('offcanvas_close'),
+              style: 'unstyled',
+              aria_label: offcanvas.dialog.button_close.aria_label|default('Close this dialog window'),
+              other_attributes: 'tabindex=-1 data-offcanvas=trigger-close',
+              icon: {
+                name: 'close',
+                set: 'fa',
+              },
+              url: '#',
+            }
+          } %}
+        </div>
+
+        {% include '@molecules/hero/hero.twig' with {
+          hero: {
+            layout: offcanvas.dialog.hero.layout|default('full-main'),
+            background: offcanvas.dialog.hero.background|default('alt'),
+            main: {
+              icon: offcanvas.dialog.hero.main.icon,
+              title: offcanvas.dialog.hero.main.title,
+              title_tag: 'h2',
+              lead: offcanvas.dialog.hero.main.lead,
+              actions: offcanvas.dialog.hero.main.actions,
+            }
+          }
+        } %}
+      </div>
+
+      {% if offcanvas.dialog.embed %}
+      <div class="jcc-offcanvas__dialog-body">
+        {{ offcanvas.dialog.embed }}
+      </div>
+      {% endif %}
+    </dialog>
+  {% endif %}
+
+  <div class="jcc-offcanvas__trigger-container">
+    {% if offcanvas.button %}
+      <div class="block{{ offcanvas.button.id ? ' ' ~ offcanvas.button.id ~ '__trigger' }}">
         {% include '@atoms/button/button.twig' with {
           button: {
-            id: offcanvas.button_close.id|default('offcanvas_close'),
-            style: 'unstyled',
-            aria_label: offcanvas.button_close.aria_label|default('Close this dialog window'),
-            other_attributes: 'tabindex=-1 data-offcanvas=trigger-close',
-            icon: {
-              name: 'close',
-              set: 'fa',
-            },
+            id: offcanvas.button.id|default('offcanvas_open'),
+            text: offcanvas.button.text,
+            other_attributes: 'data-offcanvas=trigger',
+            icon: offcanvas.button.icon,
+            icon_layout: offcanvas.button.icon_layout|default('top'),
             url: '#',
           }
         } %}
       </div>
-
-      {% include '@molecules/hero/hero.twig' with {
-        hero: {
-          layout: offcanvas.hero.layout|default('full-main'),
-          background: offcanvas.hero.background|default('alt'),
-          main: {
-            icon: offcanvas.hero.main.icon,
-            title: offcanvas.hero.main.title,
-            title_tag: 'h2',
-            lead: offcanvas.hero.main.lead,
-            actions: offcanvas.hero.main.actions,
-          }
-        }
-      } %}
-    </div>
-
-    {% if offcanvas.embed %}
-    <div class="jcc-offcanvas__dialog-body">
-      {{ offcanvas.embed }}
-    </div>
     {% endif %}
-  </dialog>
-
-  <div class="jcc-offcanvas__trigger-container">
-    <div class="block{{ offcanvas.button.id ? ' ' ~ offcanvas.button.id ~ '__trigger' }}">
-      {% include '@atoms/button/button.twig' with {
-        button: {
-          id: offcanvas.button.id|default('offcanvas_open'),
-          text: offcanvas.button.text,
-          other_attributes: 'data-offcanvas=trigger',
-          icon: offcanvas.button.icon,
-          icon_layout: offcanvas.button.icon_layout|default('top'),
-          url: '#',
-        }
-      } %}
-    </div>
   </div>
 </div>
diff --git a/source/_patterns/03-organisms/offcanvas/offcanvas.yml b/source/_patterns/03-organisms/offcanvas/offcanvas.yml
@@ -1,20 +1,21 @@
 offcanvas:
   id: "feedback-id"
-  button_close:
-    id: "feedback_close"
-  hero:
-    main:
-      icon:
-        name: "like-dislike"
-        set: "fig"
-        width: 55
-        height: 45
-      title: "Was this helpful?"
-      lead: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-      actions:
-        - text: "Yes"
-        - text: "No"
-  embed: "<label class='usa-label' for='input-type-text'>Any Additional Feedback?</label><input class='usa-input' id='input-type-text' name='input-type-text' type='text'><label class='usa-label' for='input-type-text'>Email (optional)</label><input class='usa-input' id='input-type-text' name='input-type-text' type='text'><button class='jcc-button--primary margin-top-4' aria_label='Click me to execute action'>Submit</button>"
+  dialog:
+    button_close:
+      id: "feedback_close"
+    hero:
+      main:
+        icon:
+          name: "like-dislike"
+          set: "fig"
+          width: 55
+          height: 45
+        title: "Was this helpful?"
+        lead: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        actions:
+          - text: "Yes"
+          - text: "No"
+    embed: "<label class='usa-label' for='input-type-text'>Any Additional Feedback?</label><input class='usa-input' id='input-type-text' name='input-type-text' type='text'><label class='usa-label' for='input-type-text'>Email (optional)</label><input class='usa-input' id='input-type-text' name='input-type-text' type='text'><button class='jcc-button--primary margin-top-4' aria_label='Click me to execute action'>Submit</button>"
   button:
     id: "feedback_open"
     text: "Was this helpful?"

diff --git a/source/_patterns/04-templates/drawer/drawer-example.twig b/source/_patterns/04-templates/drawer/drawer-example.twig
@@ -12,9 +12,11 @@
   {% include '@organisms/offcanvas/offcanvas.twig' with {
     offcanvas: {
       id: drawer_example.offcanvas.id,
-      button_close: drawer_example.offcanvas.button_close,
-      hero: drawer_example.offcanvas.hero,
-      embed: chat,
+      dialog: {
+        button_close: drawer_example.dialog.offcanvas.button_close,
+        hero: drawer_example.offcanvas.dialog.hero,
+        embed: chat,
+      },
       button: drawer_example.offcanvas.button,
     }
   } %}

diff --git a/source/_patterns/04-templates/drawer/drawer-example.yml b/source/_patterns/04-templates/drawer/drawer-example.yml
@@ -73,19 +73,20 @@ drawer_example:
           url: "#"
   offcanvas:
     id: "chat_modal_id"
-    button_close:
-      id: "chat_close"
-    hero:
-      main:
-        icon:
-          name: "chat"
-          set: "fig"
-          width: 35
-          height: 50
+    dialog:
+      button_close:
+        id: "chat_close"
+      hero:
+        main:
+          icon:
+            name: "chat"
+            set: "fig"
+            width: 35
+            height: 50
+            title: "Chat Now"
           title: "Chat Now"
-        title: "Chat Now"
-        lead: "Duis autem vel eum iure reprehenderit qui in volup tate velit esse quam."
-        actions: false
+          lead: "Duis autem vel eum iure reprehenderit qui in volup tate velit esse quam."
+          actions: false
     button:
       id: "chat_open"
       text: "Chat Now"