Merge pull request #91 from laruiss/feat/dsfr-table

Feat/dsfr table

Author: laruiss

src/App.vue

@@ -11,6 +11,7 @@ const close = () => {
   )
 }
 
+// eslint-disable-next-line no-unused-vars
 const actions = [
   {
     label: 'Valider',
@@ -28,7 +29,6 @@ const actions = [
     onClick: () => { isModalOpen.value = false },
   },
 ]
-
 </script>
 
 <template>

src/assets/variables-dsfr.css

@@ -94,6 +94,11 @@
 
   --block-color-hover: rgba(224, 224, 224, 0.5);
   --block-color-active: rgba(194, 194, 194, 0.5);
+
+  --bg-success: #00894122;
+  --bg-error: #e1060022;
+  --bg-warning: #f902;
+  --bg-info: #0762c822;
 }
 
 :host, :root {
@@ -193,4 +198,9 @@
 
   --color-hover: rgba(71, 71, 255, 0.5);
   --color-active: rgba(0, 0, 243, 0.5);
+
+  --bg-success: #00eb5e33;
+  --bg-error: #f333;
+  --bg-warning: #f903;
+  --bg-info: #2b8bf733;
 }

src/components/DsfrTable/DsfrTable.spec.js

@@ -0,0 +1,75 @@
+import { render } from '@testing-library/vue'
+
+import DsfrTable from './DsfrTable.vue'
+import DsfrTag from '../DsfrTag/DsfrTag.vue'
+
+describe('DsfrTable', () => {
+  it('should render simple table', () => {
+    // Given
+    const title = 'Utilisateurs'
+    const headers = ['Nom', 'Prénom', 'Email', 'Téléphone', 'Portable', 'Statut']
+    const rows = [
+      [
+        'EGAUD',
+        'Pierre-Louis',
+        '[email protected]',
+        '01 02 03 04 05',
+        '06 01 02 03 04',
+        {
+          component: 'DsfrTag',
+          label: 'Erreur',
+          class: 'error',
+        },
+      ],
+      [
+        'DEBROIZE',
+        'Clément',
+        '[email protected]',
+        '01 02 03 04 05',
+        '06 01 02 03 04',
+        {
+          component: 'DsfrTag',
+          label: 'Succès',
+          class: 'success',
+        },
+      ],
+      [
+        'ORMIERES',
+        'Stan',
+        '[email protected]',
+        '01 02 03 04 05',
+        '06 01 02 03 04',
+        {
+          component: 'DsfrTag',
+          label: 'Info',
+          class: 'info',
+        },
+      ],
+    ]
+
+    // When
+    const { container } = render(DsfrTable, {
+      global: {
+        components: {
+          DsfrTag,
+        },
+      },
+      props: {
+        title,
+        headers,
+        rows,
+      },
+    })
+
+    const trs = container.querySelectorAll('tr')
+    const successEl = container.querySelectorAll('.success')
+    const errorEl = container.querySelectorAll('.error')
+    const infoEl = container.querySelectorAll('.info')
+
+    // Then
+    expect(trs).toHaveLength(4)
+    expect(successEl).toHaveLength(1)
+    expect(errorEl).toHaveLength(1)
+    expect(infoEl).toHaveLength(1)
+  })
+})

src/components/DsfrTable/DsfrTable.stories.js

@@ -0,0 +1,96 @@
+import DsfrTable from './DsfrTable.vue'
+import DsfrTag from '../DsfrTag/DsfrTag.vue'
+
+import { app } from '@storybook/vue3'
+
+app.component('DsfrTag', DsfrTag)
+
+export default {
+  components: DsfrTable,
+  title: 'Éléments/Table',
+  argTypes: {
+    title: { control: 'text' },
+    dark: {
+      control: 'boolean',
+      description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre* (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
+    },
+    headers: {
+      control: 'object',
+      description: 'Permet de voir la ligne des titres des colonnes du tableau',
+    },
+    rows: {
+      control: 'object',
+      description: 'Permet de voir les lignes du tableau, on peut afficher un composant ou un texte simple',
+    },
+  },
+}
+
+const title = 'Utilisateurs'
+const headers = ['Nom', 'Prénom', 'Email', 'Téléphone', 'Portable', 'Statut']
+const rows = [
+  [
+    'EGAUD',
+    'Pierre-Louis',
+    '[email protected]',
+    '01 02 03 04 05',
+    '06 01 02 03 04',
+    {
+      component: 'DsfrTag',
+      label: 'Erreur',
+      class: 'error',
+    },
+  ],
+  [
+    'DEBROIZE',
+    'Clément',
+    '[email protected]',
+    '01 02 03 04 05',
+    '06 01 02 03 04',
+    {
+      component: 'DsfrTag',
+      label: 'Succès',
+      class: 'success',
+    },
+  ],
+  [
+    'ORMIERES',
+    'Stan',
+    '[email protected]',
+    '01 02 03 04 05',
+    '06 01 02 03 04',
+    {
+      component: 'DsfrTag',
+      label: 'Info',
+      class: 'info',
+    },
+  ],
+]
+
+export const TableauSimple = (args) => ({
+  components: {
+    DsfrTable,
+  },
+
+  data () {
+    return {
+      ...args,
+    }
+  },
+
+  template: `
+    <div :data-rf-theme="dark ? 'dark' : ''" style="background-color: var(--w); padding: 1rem;">
+      <DsfrTable
+        :title="title"
+        :headers="headers"
+        :rows="rows"
+      />
+    </div>
+  `,
+
+})
+TableauSimple.args = {
+  dark: false,
+  title: title,
+  headers: headers,
+  rows: rows,
+}

src/components/DsfrTable/DsfrTable.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="fr-table">
+    <table class="simple-table">
+      <caption class="caption">
+        {{ title }}
+      </caption>
+      <thead>
+        <tr
+          class="header"
+        >
+          <th
+            v-for="header in headers"
+            :key="header"
+          >
+            {{ header }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(row, i) in rows"
+          :key="i"
+          class="body-row"
+        >
+          <DsfrTableCell
+            v-for="(field, j) in row"
+            :key="`${i}-${j}`"
+            :field="field"
+          />
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+import DsfrTableCell from './DsfrTableCell.vue'
+
+export default defineComponent({
+  name: 'DsfrTable',
+
+  components: {
+    DsfrTableCell,
+  },
+
+  props: {
+    title: {
+      type: String,
+      default: undefined,
+    },
+    headers: {
+      type: Array,
+      default: () => [],
+    },
+    rows: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+})
+</script>
+
+<style src="./table.css" />
+
+<style scoped>
+.fr-table td {
+  color: var(--g800);
+}
+</style>

src/components/DsfrTable/DsfrTableCell.vue

@@ -0,0 +1,67 @@
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'DsfrTableCell',
+
+  props: {
+    field: {
+      type: [String, Object],
+      default: undefined,
+    },
+  },
+
+  computed: {
+    isObject () {
+      return typeof this.field === 'object'
+    },
+    isComponent () {
+      return this.isObject ? this.field.component : false
+    },
+    classField () {
+      return {
+        label: typeof this.field === 'object',
+        [this.field.color]: true,
+      }
+    },
+  },
+})
+</script>
+
+<template>
+  <td>
+    <component
+      :is="isComponent"
+      v-if="isComponent"
+      v-bind="field"
+    />
+    <span v-else>
+      {{ field }}
+    </span>
+  </td>
+</template>
+
+<style scoped>
+.label {
+  display: inline-block;
+  width: 7rem;
+  text-align: center;
+  border-radius: 2rem;
+}
+.success {
+  color: var(--success);
+  background-color: var(--bg-success);
+}
+.error {
+  color: var(--error);
+  background-color: var(--bg-error);
+}
+.warning {
+  color: var(--warning);
+  background-color: var(--bg-warning);
+}
+.info {
+  color: var(--info);
+  background-color: var(--bg-info);
+}
+</style>