feat: add tabs demo with accordion and carousel

boltdesignsystem · Sep 30, 2019 · c49eed6 · c49eed6
1 parent b40fc96
commit c49eed6
Showing 1 changed file with 77 additions and 8 deletions.
diff --git a/docs-site/src/pages/pattern-lab/_patterns/02-components/tabs/30-tabs-content.twig b/docs-site/src/pages/pattern-lab/_patterns/02-components/tabs/30-tabs-content.twig
@@ -83,13 +83,75 @@
   } only %}
 {% endset %}
 
-{% set tab_content %}
+{% set accordion_content %}
+  {% include "@bolt-components-accordion/accordion.twig" with {
+    items: [
+      {
+        trigger: "Accordion item 1",
+        content: "This is the accordion content.",
+      },
+      {
+        trigger: "Accordion item 2",
+        content: "This is the accordion content.",
+      },
+      {
+        trigger: "Accordion item 3",
+        content: "This is the accordion content.",
+      }
+    ]
+  } only %}
+{% endset %}
+
+{% set placeholder_content %}
   {% include "@bolt-components-placeholder/placeholder.twig" with {
       text: "Tab panel",
       size: "large",
     } only %}
 {% endset %}
 
+{% set slide_1 %}
+  {% include "@bolt-components-placeholder/placeholder.twig" with {
+    text: "Slide 1",
+    size: "xlarge",
+  } only %}
+{% endset %}
+{% set slide_2 %}
+  {% include "@bolt-components-placeholder/placeholder.twig" with {
+    text: "Slide 2",
+    size: "xlarge",
+  } only %}
+{% endset %}
+{% set slide_3 %}
+  {% include "@bolt-components-placeholder/placeholder.twig" with {
+    text: "Slide 3",
+    size: "xlarge",
+  } only %}
+{% endset %}
+{% set slide_4 %}
+  {% include "@bolt-components-placeholder/placeholder.twig" with {
+    text: "Slide 4",
+    size: "xlarge",
+  } only %}
+{% endset %}
+{% set slide_5 %}
+  {% include "@bolt-components-placeholder/placeholder.twig" with {
+    text: "Slide 5",
+    size: "xlarge",
+  } only %}
+{% endset %}
+
+{% set carousel_content %}
+  {% include "@bolt-components-carousel/carousel.twig" with {
+    slides: [
+      slide_1,
+      slide_2,
+      slide_3,
+      slide_4,
+      slide_5,
+    ]
+  } only %}
+{% endset %}
+
 <div class="u-bolt-margin-bottom-small">
   {% grid "o-bolt-grid--flex o-bolt-grid--middle o-bolt-grid--center" %}
     {% cell "u-bolt-width-12/12 u-bolt-width-9/12@small" %}
@@ -107,6 +169,14 @@
             label: "A teaser",
             content: teaser_content
           },
+          {
+            label: "An accordion",
+            content: accordion_content,
+          },
+          {
+            label: "A carousel",
+            content: carousel_content,
+          },
         ]
       } only %}
     {% endcell %}
@@ -120,31 +190,30 @@
         panels: [
           {
             label: "Tab label 1",
-            content: tab_content
+            content: placeholder_content
           },
           {
             label: "Tab label 2",
-            content: tab_content
+            content: placeholder_content
           },
           {
             label: "A very long tab label",
-            content: tab_content
+            content: placeholder_content
           },
           {
             label: "Tab label 4",
-            content: tab_content
+            content: placeholder_content
           },
           {
             label: "Tab label 5",
-            content: tab_content
+            content: placeholder_content
           },
           {
             label: "Tab label 6",
-            content: tab_content
+            content: placeholder_content
           },
         ]
       } only %}
     {% endcell %}
   {% endgrid %}
 </div>
-