Ajustement état onglet. Ajout variante onglets verticaux (#122)

Signed-off-by: Alexis Boulerice <[email protected]>

CHANGELOG.md

@@ -6,11 +6,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [5.5.0] - unreleased
 
-## Added
+### Added
 - Components - Tuiles: Ajout d'une classe card-link-icon pour gerer le link label pour tuile horizontale document et tuile en vedette.
 
-## Changed
+### Changed
 - Styles - Typographie: Remplacement de Open Sans par la nouvelle police Montreal.
+- Components - Onglet: Modifications état onglet. Ajout variante onglets verticaux.
 
 ## Fixed
 - Components - Toasts: Ajustement fonction fermeture et styles boutons.

source/_patterns/02-components/onglet/01-tabs.json

@@ -0,0 +1,40 @@
+{
+  "orientation": "horizontal",
+  "orientationClass": false,
+  "navTabs": {
+    "navItem": [
+      {
+        "icon": false,
+        "id": "nav-item-1",
+        "class": "active show",
+        "title": "Nav item #1",
+        "tabContentId": "tabContent1",
+        "selected": "true"
+      },
+      {
+        "icon": false,
+        "id": "nav-item-2",
+        "class": false,
+        "title": "Nav item #2",
+        "tabContentId": "tabContent2",
+        "selected": "false"
+      },
+      {
+        "icon": false,
+        "id": "nav-item-3",
+        "class": false,
+        "title": "Longer label for nav item #3",
+        "tabContentId": "tabContent3",
+        "selected": "false"
+      },
+      {
+        "icon": false,
+        "id": "nav-item-4",
+        "class": "disabled",
+        "title": "Nav item #4",
+        "tabContentId": "tabContent4",
+        "isDisabled": "true"
+      }
+    ]
+  }
+}

source/_patterns/02-components/tabs/02-tabs.md → source/_patterns/02-components/onglet/01-tabs.md

@@ -1,5 +1,5 @@
 ---
-title: Tabs
+title: Onglets
 ---
 
 ## Utilisation
@@ -8,6 +8,6 @@ Utiliser un maximum de 4 onglets.
 
 ## Tailles
 
-Les Tabs par default sont de taille médiums. Ils sont disponibles également en version small et large avec les classes suivantes; <code>.nav-tabs-sm</code> ou bien <code>.nav-tabs-lg</code>.
+Les Tabs par default sont de taille médiums. Ils sont disponibles également en version large avec la classea suivante: <code>.nav-tabs-lg</code>.
 
 [Voir plus de détails sur les tabs Bootstrap](https://getbootstrap.com/docs/4.3/components/navs/#tabs)

source/_patterns/02-components/tabs/03-tabs.mustache → source/_patterns/02-components/onglet/01-tabs.mustache

@@ -7,8 +7,3 @@
 <div class="pl-mb-4">
 {{> components-tab-item }}
 </div>
-
-<h4 class="pl-pattern-subtitle">Small</h4>
-<div class="pl-mb-4">
-{{> components-tab-item(navTabsClass: "nav-tabs-sm") }}
-</div>

source/_patterns/02-components/onglet/02-tabs-icon.md

@@ -0,0 +1,13 @@
+---
+title: Onglets avec icone
+---
+
+## Utilisation
+
+Utiliser un maximum de 4 onglets.
+
+## Tailles
+
+Les Tabs par default sont de taille médiums. Ils sont disponibles également en version large avec la classea suivante: <code>.nav-tabs-lg</code>.
+
+[Voir plus de détails sur les tabs Bootstrap](https://getbootstrap.com/docs/4.3/components/navs/#tabs)

source/_patterns/02-components/onglet/02-tabs~icon.json

@@ -0,0 +1,39 @@
+{
+  "orientation": "horizontal",
+  "navTabs": {
+    "navItem": [
+      {
+        "icon-name": "icon-delivery",
+        "id": "nav-item-ic-1",
+        "class": "active show",
+        "title": "Nav item #1",
+        "tabContentId": "tabContent1",
+        "selected": "true"
+      },
+      {
+        "icon-name": "icon-cone",
+        "id": "nav-item-ic-2",
+        "class": false,
+        "title": "Nav item #2",
+        "tabContentId": "tabContent2",
+        "selected": "false"
+      },
+      {
+        "icon-name": "icon-cone",
+        "id": "nav-item-ic-3",
+        "class": false,
+        "title": "Longer label for nav item #3",
+        "tabContentId": "tabContent3",
+        "selected": "false"
+      },
+      {
+        "icon-name": "icon-cone",
+        "id": "nav-item-ic-4",
+        "class": "disabled",
+        "title": "Nav item #4",
+        "tabContentId": "tabContent4",
+        "isDisabled": "true"
+      }
+    ]
+  }
+}

source/_patterns/02-components/onglet/05-tabs-vertical.json

@@ -0,0 +1,40 @@
+{
+  "orientation": "vertical",
+  "orientationClass": "nav-vertical",
+  "navTabs": {
+    "navItem": [
+      {
+        "icon": false,
+        "id": "nav-item-vert-1",
+        "class": "active show",
+        "title": "Nav item #1",
+        "tabContentId": "tabContent1",
+        "selected": "true"
+      },
+      {
+        "icon": false,
+        "id": "nav-item-vert-2",
+        "class": false,
+        "title": "Nav item #2",
+        "tabContentId": "tabContent2",
+        "selected": "false"
+      },
+      {
+        "icon": false,
+        "id": "nav-item-vert-3",
+        "class": false,
+        "title": "Longer label for nav item #3",
+        "tabContentId": "tabContent3",
+        "selected": "false"
+      },
+      {
+        "icon": false,
+        "id": "nav-item-vert-4",
+        "class": "disabled",
+        "title": "Nav item #4",
+        "tabContentId": "tabContent4",
+        "isDisabled": true
+      }
+    ]
+  }
+}

source/_patterns/02-components/onglet/05-tabs-vertical.md

@@ -0,0 +1,13 @@
+---
+title: Onglets horizontaux
+---
+
+## Utilisation
+
+Utiliser un maximum de 4 onglets.
+
+## Tailles
+
+Les Tabs par default sont de taille médiums. Ils sont disponibles également en version large avec la classea suivante: <code>.nav-tabs-lg</code>.
+
+[Voir plus de détails sur les tabs Bootstrap](https://getbootstrap.com/docs/4.3/components/navs/#tabs)

source/_patterns/02-components/onglet/05-tabs-vertical.mustache

@@ -0,0 +1,9 @@
+<h4 class="pl-pattern-subtitle">Large</h4>
+<div class="pl-mb-4">
+{{> components-tab-item(navTabsClass: "nav-tabs-lg") }}
+</div>
+
+<h4 class="pl-pattern-subtitle">Medium</h4>
+<div class="pl-mb-4">
+{{> components-tab-item }}
+</div>

source/_patterns/02-components/onglet/06-tabs-vertical-icon.md

@@ -0,0 +1,13 @@
+---
+title: Onglets verticaux avec icone
+---
+
+## Utilisation
+
+Utiliser un maximum de 4 onglets.
+
+## Tailles
+
+Les Tabs par default sont de taille médiums. Ils sont disponibles également en version large avec la classea suivante: <code>.nav-tabs-lg</code>.
+
+[Voir plus de détails sur les tabs Bootstrap](https://getbootstrap.com/docs/4.3/components/navs/#tabs)

source/_patterns/02-components/onglet/06-tabs-vertical~icon.json

@@ -0,0 +1,40 @@
+{
+  "orientation": "vertical",
+  "orientationClass": "nav-vertical",
+  "navTabs": {
+    "navItem": [
+      {
+        "icon-name": "icon-delivery",
+        "id": "nav-item-ic-vert-1",
+        "class": "active show",
+        "title": "Nav item #1",
+        "tabContentId": "tabContent1",
+        "selected": "true"
+      },
+      {
+        "icon-name": "icon-cone",
+        "id": "nav-item-ic-vert-2",
+        "class": false,
+        "title": "Nav item #2",
+        "tabContentId": "tabContent2",
+        "selected": "false"
+      },
+      {
+        "icon-name": "icon-cone",
+        "id": "nav-item-ic-vert-3",
+        "class": false,
+        "title": "Longer label for nav item #3",
+        "tabContentId": "tabContent3",
+        "selected": "false"
+      },
+      {
+        "icon-name": "icon-cone",
+        "id": "nav-item-ic-vert-4",
+        "class": "disabled",
+        "title": "Nav item #4",
+        "tabContentId": "tabContent4",
+        "isDisabled": true
+      }
+    ]
+  }
+}

source/_patterns/02-components/onglet/_tab-item.mustache

@@ -0,0 +1,15 @@
+<nav class="nav-tabs {{navTabsClass}}" aria-label="Nav label" orientation="{{orientation}}">
+  {{# inContainer}}
+  <div class="container">
+  {{/ inContainer}}
+    <ul class="nav {{orientationClass}}" role="tablist">
+      {{# navTabs.navItem }}
+      <li class="nav-item {{liClass}}">
+        <button type="button" class="nav-link {{class}}" role="tab" id={{id}} data-toggle="tab" aria-controls={{tabContentId}} {{#isDisabled}}tabindex="-1" aria-disabled="true"{{/ isDisabled}}{{#selected}} aria-selected="{{selected}}"{{/ selected}}>{{# icon-name}}{{> styles-icon-item }}{{/ icon-name}}{{ title }}</button>
+      </li>
+      {{/ navTabs.navItem }}
+    </ul>
+  {{# inContainer}}
+  </div>
+  {{/ inContainer}}
+</nav>