From 6e9d9490da0910e05f29874e12b01fb58653a936 Mon Sep 17 00:00:00 2001
From: DGPA684 <gaetan.paucot.external@axa.be>
Date: Fri, 8 Sep 2017 11:51:38 +0200
Subject: [PATCH] Added doc for tab panels

---
 docs/components/tab-panel/index.hbs           | 32 +++++++++++++++++++
 .../tab-panel/snippets/tab-panel-default.hbs  | 24 ++++++++++++++
 .../snippets/tab-panel-fullwidth.hbs          | 24 ++++++++++++++
 3 files changed, 80 insertions(+)
 create mode 100644 docs/components/tab-panel/index.hbs
 create mode 100644 docs/components/tab-panel/snippets/tab-panel-default.hbs
 create mode 100644 docs/components/tab-panel/snippets/tab-panel-fullwidth.hbs

diff --git a/docs/components/tab-panel/index.hbs b/docs/components/tab-panel/index.hbs
new file mode 100644
index 00000000..e8aafa1e
--- /dev/null
+++ b/docs/components/tab-panel/index.hbs
@@ -0,0 +1,32 @@
+---
+title: Tab Panel
+description: Description of how to deal with tab panel in your app.
+nav: side/components/tab-panel
+order: 1
+toc:
+  - title: Default Tab Panel
+    slug: tab-panel-default
+  - title: Full-width Tab Panel
+    slug: tab-panel-fullwidth
+---
+
+{{#> page}}
+  {{#*inline "content"}}
+    <h1 class="h2">{{title}}</h1>
+    <p class="lead">
+      Tab panels can be used to segment the screens, to make a step-by-step wizard, ...
+    </p>
+
+    {{> table-of-contents data=toc}}
+    
+    <h2 class="h3" id="tab-panel-default">Default Tab panel</h2>
+
+    {{> example path="/components/tab-panel/demos/tab-panel-default.html"}}
+    {{#code-snippet "html"}}{{#get snippets "/components/tab-panel/snippets/tab-panel-default"}}{{{.}}}{{/get}}{{/code-snippet}}
+
+    <h2 class="h3" id="tab-panel-fullwidth">Full-width Tab panel</h2>
+
+    {{> example path="/components/tab-panel/demos/tab-panel-fullwidth.html"}}
+    {{#code-snippet "html"}}{{#get snippets "/components/tab-panel/snippets/tab-panel-fullwidth"}}{{{.}}}{{/get}}{{/code-snippet}}
+  {{/inline}}
+{{/page}}
diff --git a/docs/components/tab-panel/snippets/tab-panel-default.hbs b/docs/components/tab-panel/snippets/tab-panel-default.hbs
new file mode 100644
index 00000000..58dac6c4
--- /dev/null
+++ b/docs/components/tab-panel/snippets/tab-panel-default.hbs
@@ -0,0 +1,24 @@
+---
+title: Tab Panel - Default
+layout: demo.hbs
+---
+<div class="tab-panel">
+  <div class="tab-panel__header">
+    <div class="tab-panel__header__tabs">
+      <div class="tab-panel__header__tab">Tab A</div>
+      <div class="tab-panel__header__tab is-active">Tab B</div>
+      <div class="tab-panel__header__tab">Tab C</div>
+      <div class="tab-panel__header__tab">Tab D</div>
+      <div class="tab-panel__header__tab">Tab E</div>
+      <div class="tab-panel__header__tab">Tab F</div>
+    </div>
+  </div>
+  <div class="tab-panel__content">
+    <div class="tab-panel__content__tab">Content A</div>
+    <div class="tab-panel__content__tab is-active">Content B</div>
+    <div class="tab-panel__content__tab">Content C</div>
+    <div class="tab-panel__content__tab">Content D</div>
+    <div class="tab-panel__content__tab">Content E</div>
+    <div class="tab-panel__content__tab">Content F</div>
+  </div>
+</div>
diff --git a/docs/components/tab-panel/snippets/tab-panel-fullwidth.hbs b/docs/components/tab-panel/snippets/tab-panel-fullwidth.hbs
new file mode 100644
index 00000000..226be439
--- /dev/null
+++ b/docs/components/tab-panel/snippets/tab-panel-fullwidth.hbs
@@ -0,0 +1,24 @@
+---
+title: Tab Panel - Full Width
+layout: demo.hbs
+---
+<div class="tab-panel">
+  <div class="tab-panel__header">
+    <div class="tab-panel__header__tabs">
+      <div class="tab-panel__header__tab">Tab A</div>
+      <div class="tab-panel__header__tab is-active">Tab B</div>
+      <div class="tab-panel__header__tab">Tab C</div>
+      <div class="tab-panel__header__tab">Tab D</div>
+      <div class="tab-panel__header__tab">Tab E</div>
+      <div class="tab-panel__header__tab">Tab F</div>
+    </div>
+  </div>
+  <div class="tab-panel__content tab-panel__content__tab__fullwidth-content">
+    <div class="tab-panel__content__tab">Content A</div>
+    <div class="tab-panel__content__tab is-active">Content B</div>
+    <div class="tab-panel__content__tab">Content C</div>
+    <div class="tab-panel__content__tab">Content D</div>
+    <div class="tab-panel__content__tab">Content E</div>
+    <div class="tab-panel__content__tab">Content F</div>
+  </div>
+</div>