feat(table): initial commit

ovh · Mar 4, 2024 · c400d37 · c400d37
1 parent 265c704
commit c400d37
Show file tree

Hide file tree

Showing 35 changed files with 1,402 additions and 1 deletion.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -60,6 +60,8 @@ import { ODS_SPINNER_SIZE } from "./spinner/src/components/osds-spinner/constant
 import { ODS_SWITCH_VARIANT } from "./switch/src/components/osds-switch/constants/switch-variant";
 import { ODS_SWITCH_SIZE } from "./switch/src/components/osds-switch/constants/switch-size";
 import { OdsSwitchChangedEventDetail } from "./switch/src/components/osds-switch/interfaces/events";
+import { ODS_TABLE_SIZE } from './table/src/components/osds-table/constants/table-size';
+import { ODS_TABLE_VARIANT } from './table/src/components/osds-table/constants/table-variant';
 import { ODS_TABS_SIZE } from "./tabs/src/components/osds-tabs/constants/tabs-size";
 import { OdsTabItemSelectEventDetail } from "./tabs/src/components/osds-tab-bar-item/interfaces/events";
 import { OdsTabsChangeEventDetail } from "./tabs/src/components/osds-tabs/interfaces/events";
@@ -4428,6 +4430,21 @@ declare namespace LocalJSX {
          */
         "size"?: ODS_TABS_SIZE;
     }
+    /**
+     * Main table component
+     */
+    interface OsdsTable {
+        /**
+          * Table size
+          * @see OdsTableAttributes.size
+         */
+        "size"?: ODS_TABLE_SIZE;
+        /**
+          * Table variant
+          * @see OdsTableAttributes.variant
+         */
+        "variant"?: ODS_TABLE_VARIANT;
+    }
     interface OsdsText {
         /**
           * If text handles break spaces or not

diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -38,6 +38,7 @@ export * from './skeleton/src';
 export * from './spinner/src';
 export * from './switch/src';
 export * from './tabs/src';
+export * from './table/src';
 export * from './text/src';
 export * from './textarea/src';
 export * from './tile/src';

diff --git a/packages/components/src/table/.gitignore b/packages/components/src/table/.gitignore
@@ -0,0 +1,35 @@
+#--- Project related ---#
+.stencil/
+coverage/
+dist/
+docs-api/
+screenshot/
+www/
+src/components.d.ts
+
+# Local Stencil command generates external ods component build at the root of the project
+# Excluding them is a temporary solution to avoid pushing generated files
+# But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences
+# of the same component and thus you have to delete all those generated dir manually
+*/src/
+
+#--- Misc ---#
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
diff --git a/packages/components/src/table/CHANGELOG.md b/packages/components/src/table/CHANGELOG.md
@@ -0,0 +1,13 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+[Latest version](https://ovh.github.io/design-system/latest/?path=/docs/design-system-changelog--page)
+
+[Latest version](https://ovh.github.io/design-system/latest/?path=/docs/design-system-changelog--page)
+
+
+### Features
+
+* **table:** init component
diff --git a/packages/components/src/table/documentation/specifications/spec.md b/packages/components/src/table/documentation/specifications/spec.md
@@ -0,0 +1,9 @@
+* [**Interfaces**](#interfaces)
+
+## Interfaces
+
+### OdsTableAttribute
+|Name | Type | Required | Default | Description|
+|---|---|:---:|---|---|
+|**`size`** | _string_ |  |  | Table size|
+|**`variant`** | _string_ |  |  | Table variant|
diff --git a/...ages/components/src/table/documentation/specifications/specifications-table.mdx b/...ages/components/src/table/documentation/specifications/specifications-table.mdx
@@ -0,0 +1,4 @@
+import {Description} from '@storybook/addon-docs';
+import Specs from './spec.md';
+
+<Description>{Specs}</Description>
diff --git a/...s/components/src/table/documentation/usage-guidelines/properties/usage.size.mdx b/...s/components/src/table/documentation/usage-guidelines/properties/usage.size.mdx
@@ -0,0 +1,83 @@
+import { Canvas } from '@storybook/addon-docs';
+
+Available sizes are `sm, `md` and `lg`.
+
+<Canvas withSource="none">
+  <div style={{ height: '800px' }}>
+    <osds-table size='sm'>
+      <table>
+        <caption>
+          Front-end web developer course 2021
+        </caption>
+        <thead>
+        <tr>
+          <th scope="col">Person</th>
+          <th scope="col">Most interest in</th>
+          <th scope="col">Age</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <th scope="row">Chris</th>
+          <td>HTML tables</td>
+          <td>22</td>
+        </tr>
+        <tr>
+          <th scope="row">Dennis</th>
+          <td>Web accessibility</td>
+          <td>45</td>
+        </tr>
+        <tr>
+          <th scope="row">Sarah</th>
+          <td>JavaScript frameworks</td>
+          <td>29</td>
+        </tr>
+        <tr>
+          <th scope="row">Karen</th>
+          <td>Web performance</td>
+          <td>36</td>
+        </tr>
+        </tbody>
+      </table>
+    </osds-table>
+  </div>
+</Canvas >
+
+```html
+<osds-table size='sm'>
+  <table>
+    <caption>
+      Front-end web developer course 2021
+    </caption>
+    <thead>
+    <tr>
+      <th scope="col">Person</th>
+      <th scope="col">Most interest in</th>
+      <th scope="col">Age</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <th scope="row">Chris</th>
+      <td>HTML tables</td>
+      <td>22</td>
+    </tr>
+    <tr>
+      <th scope="row">Dennis</th>
+      <td>Web accessibility</td>
+      <td>45</td>
+    </tr>
+    <tr>
+      <th scope="row">Sarah</th>
+      <td>JavaScript frameworks</td>
+      <td>29</td>
+    </tr>
+    <tr>
+      <th scope="row">Karen</th>
+      <td>Web performance</td>
+      <td>36</td>
+    </tr>
+    </tbody>
+  </table>
+</osds-table>
+```
diff --git a/...omponents/src/table/documentation/usage-guidelines/properties/usage.variant.mdx b/...omponents/src/table/documentation/usage-guidelines/properties/usage.variant.mdx
@@ -0,0 +1,80 @@
+import { Canvas } from '@storybook/addon-docs';
+
+<Canvas withSource="none">
+  <div style={{ height: '800px' }}>
+    <osds-table variant='striped'>
+      <table>
+        <caption>
+          Front-end web developer course 2021
+        </caption>
+        <thead>
+        <tr>
+          <th scope="col">Person</th>
+          <th scope="col">Most interest in</th>
+          <th scope="col">Age</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <th scope="row">Chris</th>
+          <td>HTML tables</td>
+          <td>22</td>
+        </tr>
+        <tr>
+          <th scope="row">Dennis</th>
+          <td>Web accessibility</td>
+          <td>45</td>
+        </tr>
+        <tr>
+          <th scope="row">Sarah</th>
+          <td>JavaScript frameworks</td>
+          <td>29</td>
+        </tr>
+        <tr>
+          <th scope="row">Karen</th>
+          <td>Web performance</td>
+          <td>36</td>
+        </tr>
+        </tbody>
+      </table></osds-table>
+  </div>
+</Canvas>
+
+```html
+<osds-table variant='striped'>
+  <table>
+    <caption>
+      Front-end web developer course 2021
+    </caption>
+    <thead>
+    <tr>
+      <th scope="col">Person</th>
+      <th scope="col">Most interest in</th>
+      <th scope="col">Age</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <th scope="row">Chris</th>
+      <td>HTML tables</td>
+      <td>22</td>
+    </tr>
+    <tr>
+      <th scope="row">Dennis</th>
+      <td>Web accessibility</td>
+      <td>45</td>
+    </tr>
+    <tr>
+      <th scope="row">Sarah</th>
+      <td>JavaScript frameworks</td>
+      <td>29</td>
+    </tr>
+    <tr>
+      <th scope="row">Karen</th>
+      <td>Web performance</td>
+      <td>36</td>
+    </tr>
+    </tbody>
+  </table>
+</osds-table>
+```