✨ feat(table): tableau v2 [DS-3742]

module/animate/_index.scss

@@ -1 +1,2 @@
+@forward 'mixin/rotate';
 @forward 'mixin/caret';

module/animate/mixin/_caret.scss

@@ -1,11 +1,5 @@
-@mixin caret() {
-  &::after {
-    transition: transform 0.3s;
-  }
+@use 'rotate';
 
-  &[aria-expanded='true'] {
-    &::after {
-      transform: rotate(-180deg);
-    }
-  }
+@mixin caret() {
+  @include rotate.rotate('&[aria-expanded="true"]', '-180', 'after');
 }

module/animate/mixin/_rotate.scss

@@ -0,0 +1,11 @@
+@mixin rotate($activeSelector, $deg: -180, $pseudo: before, $duration: 0.3) {
+  &::#{$pseudo} {
+    transition: transform #{$duration}s;
+  }
+
+  #{$activeSelector} {
+    &::#{$pseudo} {
+      transform: rotate(#{$deg}deg);
+    }
+  }
+}

module/color/variable/_decisions.scss

@@ -108,6 +108,9 @@ $values: (
       primary: main,
       accent: main
     ),
+    contrast: (
+      neutral: soft
+    ),
     active: (
       primary: strong
     ),

src/analytics/example/component/table/index.ejs

@@ -1,6 +1,6 @@
-<% 
+<%
   const sample = getSample(include);
-  let data = { caption: 'Caption du tableau (accessibilité)', col: 6, row: 3};
+  let data = { caption: 'Titre du tableau (caption)', col: 6, row: 3};
 %>
 
 

src/component/button/style/_legacy.scss

@@ -4,6 +4,7 @@
 ////
 
 @use 'module/legacy';
+@use 'module/animate';
 
 @include legacy.is(ie11) {
   #{ns(btn)} {
@@ -68,6 +69,16 @@
     @include icon-legacy(team-line, sm);
   }
 
+  #{ns(btn--sort)} {
+    @include icon-legacy(sort-asc-desc-line, sm);
+    @include animate.rotate('&[aria-sorting='desc']');
+
+    &[aria-sorting='asc'],
+    &[aria-sorting='desc'] {
+      @include icon-legacy(sort-asc-line, sm);
+    }
+  }
+
   #{ns-group(btns)} {
     @include disable-list-style-legacy(true);
 

src/component/button/style/_module.scss

@@ -12,3 +12,4 @@
 @import 'module/account';
 @import 'module/team';
 @import 'module/briefcase';
+@import 'module/sort';

src/component/button/style/_scheme.scss

@@ -20,6 +20,7 @@
 
     // Grey outline variant
     &--tertiary,
+    &--sort,
     &--account {
       @include btn-kind-scheme(3, $legacy);
     }

src/component/button/style/module/_sort.scss

@@ -0,0 +1,16 @@
+////
+/// Button Module - Expand
+/// @group button
+////
+
+@use 'module/animate';
+
+#{ns(btn--sort)} {
+  @include nest-btn(sm, only, sort-asc-desc-line, null, false);
+  @include animate.rotate('&[aria-sorting='desc']');
+
+  &[aria-sorting='asc'],
+  &[aria-sorting='desc'] {
+    @include nest-btn(sm, only, sort-asc-line, null, false);
+  }
+}

src/component/checkbox/.package.yml

@@ -6,3 +6,5 @@ wrapper: col-8
 style:
   - core
   - form
+script:
+  - core

src/component/checkbox/api.js

@@ -0,0 +1,2 @@
+import api from '../api.js';
+export default api;

src/component/checkbox/index.js

@@ -0,0 +1,12 @@
+import api from './api.js';
+import { CheckboxSelector } from './script/checkbox/checkbox-selector';
+import { CheckboxEmission } from './script/checkbox/checkbox-emission.js';
+import { CheckboxInput } from './script/checkbox/checkbox-input.js';
+
+api.checkbox = {
+  CheckboxSelector: CheckboxSelector,
+  CheckboxEmission: CheckboxEmission,
+  CheckboxInput: CheckboxInput
+};
+
+export default api;

src/component/checkbox/main.js

@@ -0,0 +1,5 @@
+import api from './index.js';
+
+api.internals.register(api.checkbox.CheckboxSelector.INPUT, api.checkbox.CheckboxInput);
+
+export default api;

src/component/checkbox/script/checkbox/checkbox-emission.js

@@ -0,0 +1,8 @@
+import api from '../../api.js';
+
+const CheckboxEmission = {
+  CHANGE: api.internals.ns.emission('checkbox', 'change'),
+  RETRIEVE: api.internals.ns.emission('checkbox', 'retrieve')
+};
+
+export { CheckboxEmission };

src/component/checkbox/script/checkbox/checkbox-input.js

@@ -0,0 +1,29 @@
+import api from '../../api.js';
+import { CheckboxEmission } from './checkbox-emission.js';
+
+class CheckboxInput extends api.core.Instance {
+  static get instanceClassName () {
+    return 'CheckboxInput';
+  }
+
+  constructor () {
+    super();
+    this._handlingChange = this.handleChange.bind(this);
+  }
+
+  init () {
+    this.node.addEventListener('change', this._handlingChange);
+    this.addDescent(CheckboxEmission.RETRIEVE, this._handlingChange);
+    this.handleChange();
+  }
+
+  get isChecked () {
+    return this.node.checked;
+  }
+
+  handleChange () {
+    this.ascend(CheckboxEmission.CHANGE, this.node);
+  }
+}
+
+export { CheckboxInput };

src/component/checkbox/script/checkbox/checkbox-selector.js

@@ -0,0 +1,5 @@
+import api from '../../api.js';
+
+export const CheckboxSelector = {
+  INPUT: `${api.internals.ns.selector('checkbox-group')} input[type="checkbox"]`
+};

src/component/main.js

@@ -2,6 +2,7 @@ import api from './api.js';
 import './accordion/main.js';
 import './button/main.js';
 import './card/main.js';
+import './checkbox/main.js';
 import './segmented/main.js';
 import './breadcrumb/main.js';
 import './tooltip/main.js';
@@ -11,11 +12,11 @@ import './modal/main.js';
 import './password/main.js';
 import './navigation/main.js';
 import './tab/main.js';
-import './table/main.js';
 import './tag/main.js';
 import './transcription/main.js';
 import './tile/main.js';
 import './range/main.js';
 import './header/main.js';
 import './display/main.js';
+import './table/main.js';
 export default api;

src/component/segmented/template/ejs/segmented.ejs

@@ -42,7 +42,7 @@ switch (segmented.size) {
       <span class="<%= prefix %>-hint-text"><%= segmented.hint %></span>
     <% } %>
   </legend>
-  <div class="<%= prefix %>-segmented__elements">  
+  <div class="<%= prefix %>-segmented__elements">
     <% for (const element of segmented.elements) { %>
       <%- include('./segmented-element', {element: element}); %>
     <% } %>

src/component/table/.package.yml

@@ -7,3 +7,19 @@ style:
   - core
 script:
   - core
+  - checkbox
+  - tooltip
+example:
+  style:
+    - alert
+    - badge
+    - button
+    - checkbox
+    - input
+    - link
+    - pagination
+    - select
+    - segmented
+    - tag
+    - toggle
+    - tooltip

src/component/table/deprecated/example/index.ejs

@@ -0,0 +1,27 @@
+<%
+const sample = getSample(include);
+let data = { caption: 'Titre du tableau (caption)', col: 6, row: 3};
+let dataBordered = { caption: 'Titre du tableau (caption)', bordered: true, col: 6, row: 3};
+let dataNoScroll = { caption: 'Titre du tableau (caption) non scrollable', noScroll: true, col: 6};
+let dataLayoutFixed = { caption: 'Titre du tableau (caption) fixé', layout: "fixed", col: 3};
+let dataNoCaption = { caption: 'Titre du tableau (caption) caché', noCaption: true, col: 6};
+let dataCaptionBottom = { caption: 'Titre du tableau (caption) en bas', captionBottom: true, col: 6};
+
+// @TODO: revoir les grilles avec layout
+%>
+
+<%- sample('Tableau par défaut', './sample/table-default', {table:data}, true) %>
+
+<%- sample('Tableau avec bordure', './sample/table-default', {table:dataBordered}, true) %>
+
+<%- sample('Tableau non scrollable', './sample/table-default', {table:dataNoScroll}, true) %>
+
+<%- sample('Tableau colonnes fixées (layout-fixed)', './sample/table-default', {table:dataLayoutFixed}, true) %>
+
+<%- sample('Tableau avec titre invisible', './sample/table-default', {table:dataNoCaption}, true) %>
+
+<%- sample('Tableau avec titre en bas', './sample/table-default', {table:dataCaptionBottom}, true) %>
+
+<%- sample('Tableau accentué', './sample/table-default', {table: {...data, accent:'green-emeraude'}}, true) %>
+
+<%- sample('Tableau accentué avec bordure', './sample/table-default', {table:{...dataBordered, accent:'green-emeraude'}}, true) %>

src/component/table/deprecated/example/sample/table-default.ejs

@@ -0,0 +1,25 @@
+<%
+const table = locals.table || {};
+const col = table.col || 2;
+const row = table.row || 2;
+let data = {
+  caption: table.caption || undefined,
+  bordered: table.bordered || false,
+  noScroll: table.noScroll || false,
+  noCaption: table.noCaption || false,
+  captionBottom: table.captionBottom || false,
+  accent: table.accent || undefined,
+  layout: table.layout
+}
+
+data.data = new Array(row);
+for(let r = 0; r < row; r++) {
+  data.data[r] = new Array(col);
+  for(let c = 0; c < col; c++) {
+    if(r === 0) data.data[0][c] =  'th' + c;
+    else data.data[r][c] = lorem(null , 25);
+  }
+}
+%>
+
+<%- include('../../template/ejs/table', {table: data}); %>

src/component/table/deprecated/style/_legacy.scss

@@ -0,0 +1,92 @@
+////
+/// Table Legacy - deprecated
+/// @group table - deprecated
+////
+
+@use 'module/legacy';
+@use 'module/color';
+
+@include legacy.is(ie11) {
+  #{ns(table)} {
+    & > table {
+      background-image: none;
+
+      thead {
+        background-image: none;
+
+        tr {
+          &:first-child {
+            th {
+              @include color.border(contrast grey, (legacy: true, important: false, side: 'top'));
+            }
+          }
+
+          &:last-child {
+            th {
+              @include color.border(plain grey, (legacy: true, important: false, side: 'bottom'));
+            }
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          background-image: none;
+
+          &:last-child {
+            th,
+            td {
+              @include color.border(contrast grey, (legacy: true, important: false, side: 'bottom'));
+            }
+          }
+        }
+      }
+
+      th,
+      td {
+        &:first-child {
+          @include color.border(contrast grey, (legacy: true, important: false, side: 'left'));
+        }
+
+        &:last-child {
+          @include color.border(contrast grey, (legacy: true, important: false, side: 'right'));
+        }
+      }
+    }
+
+    @include color.accentuate {
+      & > table {
+        background-image: none;
+
+        thead {
+          background-image: none;
+        }
+
+        tbody {
+          tr {
+            background-image: none;
+          }
+        }
+      }
+
+      &#{ns(table--bordered)} {
+        & > table {
+          tbody {
+            tr {
+              background-image: none;
+            }
+          }
+        }
+      }
+    }
+
+    &--bordered {
+      & > table {
+        th,
+        td {
+          @include color.border(contrast grey, (legacy: true, important: false, side: 'bottom'));
+        }
+      }
+    }
+  }
+}

src/component/table/deprecated/style/_module.scss

@@ -0,0 +1,8 @@
+////
+/// Table Module - deprecated
+/// @group Table - deprecated
+////
+
+@import 'module/default';
+@import 'module/variants';
+@import 'module/shadow';