fix(table): fix build and doc

ovh · Mar 4, 2024 · 700c313 · 700c313
1 parent c400d37
commit 700c313
Show file tree

Hide file tree

Showing 15 changed files with 145 additions and 110 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -60,8 +60,6 @@ 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";
@@ -1687,6 +1685,16 @@ export namespace Components {
          */
         "name": string;
     }
+    interface OsdsTable {
+        /**
+          * Table size
+         */
+        "size"?: string;
+        /**
+          * Table variant
+         */
+        "variant"?: string;
+    }
     /**
      * Main tabs component
      */
@@ -2689,6 +2697,12 @@ declare global {
         prototype: HTMLOsdsTabPanelElement;
         new (): HTMLOsdsTabPanelElement;
     };
+    interface HTMLOsdsTableElement extends Components.OsdsTable, HTMLStencilElement {
+    }
+    var HTMLOsdsTableElement: {
+        prototype: HTMLOsdsTableElement;
+        new (): HTMLOsdsTableElement;
+    };
     interface HTMLOsdsTabsElementEventMap {
         "odsTabsChanged": OdsTabsChangeEventDetail;
     }
@@ -2816,6 +2830,7 @@ declare global {
         "osds-tab-bar": HTMLOsdsTabBarElement;
         "osds-tab-bar-item": HTMLOsdsTabBarItemElement;
         "osds-tab-panel": HTMLOsdsTabPanelElement;
+        "osds-table": HTMLOsdsTableElement;
         "osds-tabs": HTMLOsdsTabsElement;
         "osds-text": HTMLOsdsTextElement;
         "osds-textarea": HTMLOsdsTextareaElement;
@@ -4405,6 +4420,16 @@ declare namespace LocalJSX {
          */
         "name"?: string;
     }
+    interface OsdsTable {
+        /**
+          * Table size
+         */
+        "size"?: string;
+        /**
+          * Table variant
+         */
+        "variant"?: string;
+    }
     /**
      * Main tabs component
      */
@@ -4430,21 +4455,6 @@ 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
@@ -4717,6 +4727,7 @@ declare namespace LocalJSX {
         "osds-tab-bar": OsdsTabBar;
         "osds-tab-bar-item": OsdsTabBarItem;
         "osds-tab-panel": OsdsTabPanel;
+        "osds-table": OsdsTable;
         "osds-tabs": OsdsTabs;
         "osds-text": OsdsText;
         "osds-textarea": OsdsTextarea;
@@ -4811,6 +4822,7 @@ declare module "@stencil/core" {
              * Panel with content that has to be displayed when active
              */
             "osds-tab-panel": LocalJSX.OsdsTabPanel & JSXBase.HTMLAttributes<HTMLOsdsTabPanelElement>;
+            "osds-table": LocalJSX.OsdsTable & JSXBase.HTMLAttributes<HTMLOsdsTableElement>;
             /**
              * Main tabs component
              */

diff --git a/packages/components/src/password/documentation/specifications/spec.md b/packages/components/src/password/documentation/specifications/spec.md
@@ -30,4 +30,4 @@
 |---|---|:---:|---|---|
 |**`odsBlur`** | `EventEmitter<void>` | ✴️ |  | Event triggered on textarea blur|
 |**`odsFocus`** | `EventEmitter<void>` | ✴️ |  | Event triggered on textarea focus|
-|**`odsValueChange`** | `EventEmitter<OdsInputValueChangeEvent>` | ✴️ |  | The textarea value changed|
+|**`odsValueChange`** | `EventEmitter<OdsInputValueChangeEventDetail>` | ✴️ |  | The textarea value changed|
diff --git a/packages/components/src/search-bar/documentation/specifications/spec.md b/packages/components/src/search-bar/documentation/specifications/spec.md
@@ -18,7 +18,7 @@
 |**`odsBlur`** | `EventEmitter<void>` | ✴️ |  | Event triggered on textarea blur|
 |**`odsFocus`** | `EventEmitter<void>` | ✴️ |  | Event triggered on textarea focus|
 |**`odsSearchSubmit`** | `EventEmitter<reflection>` | ✴️ |  | Send event with the input value when click on button search ou with keyboard navigation|
-|**`odsValueChange`** | `EventEmitter<OdsInputValueChangeEvent>` | ✴️ |  | The textarea value changed|
+|**`odsValueChange`** | `EventEmitter<OdsInputValueChangeEventDetail>` | ✴️ |  | The textarea value changed|
 
 ### OdsSearchbarOption
 |Name | Type | Required | Default | Description|

diff --git a/packages/components/src/table/documentation/specifications/spec.md b/packages/components/src/table/documentation/specifications/spec.md
@@ -1,9 +1,24 @@
 * [**Interfaces**](#interfaces)
+* [**Types**](#types)
 
 ## Interfaces
 
 ### OdsTableAttribute
 |Name | Type | Required | Default | Description|
 |---|---|:---:|---|---|
 |**`size`** | _string_ |  |  | Table size|
-|**`variant`** | _string_ |  |  | Table variant|
+|**`variant`** | _string_ |  |  | Table variant|
+
+## Types
+
+### ODS_TABLE_SIZE
+|  |
+|:---:|
+| `lg` |
+| `md` |
+| `sm` |
+
+### ODS_TABLE_VARIANT
+|  |
+|:---:|
+| `striped` |
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
@@ -1,9 +1,9 @@
 import { Canvas } from '@storybook/addon-docs';
 
-Available sizes are `sm, `md` and `lg`.
+Available sizes are `sm`, `md` and `lg`.
 
 <Canvas withSource="none">
-  <div style={{ height: '800px' }}>
+  <div>
     <osds-table size='sm'>
       <table>
         <caption>

diff --git a/...omponents/src/table/documentation/usage-guidelines/properties/usage.variant.mdx b/...omponents/src/table/documentation/usage-guidelines/properties/usage.variant.mdx
@@ -1,7 +1,7 @@
 import { Canvas } from '@storybook/addon-docs';
 
 <Canvas withSource="none">
-  <div style={{ height: '800px' }}>
+  <div>
     <osds-table variant='striped'>
       <table>
         <caption>

diff --git a/packages/components/src/table/documentation/usage-guidelines/usage.mdx b/packages/components/src/table/documentation/usage-guidelines/usage.mdx
@@ -10,7 +10,7 @@ import VariantProperty from './properties/usage.variant.mdx';
 ### Default
 
 <Canvas withSource="none">
-  <div style={{ height: '200px' }}>
+  <div>
     <osds-table>
       <table>
         <caption>
@@ -52,30 +52,30 @@ import VariantProperty from './properties/usage.variant.mdx';
 
 ```html
 <osds-table>
-    <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>
-      </tbody>
-    </table>
+  <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>
+    </tbody>
+  </table>
 </osds-table>
 ```
 
@@ -96,20 +96,9 @@ Tabulation can be used to navigate through focusable elements added to rows.
 
 More on [WAI ARIA documentation from W3C for tables](https://www.w3.org/WAI/tutorials/tables/)
 
-# Recommendations
+*Large content on small spaces*
 
-## Content alignment
-We recommend to align column content depending on the usage:
-
-**Left alignment**
-All cells whose content is alphabetical (e.g. Text, Link, Chip...) or alphanumeric (e.g. date).
-
-**Right alignment**
-Only numeric content (e.g. number, quantity, price, id, size...) and its unit when necessary (e.g. €, GB...)
-
-## Large content on small spaces
-
-Keep the Table headers visible while scrolling by setting <th> elements to a sticky position.
+Keep the Table headers visible while scrolling by setting `<th>` elements to a sticky position.
 
 ```scss
 table {

diff --git a/packages/components/src/table/src/components/osds-table/core/controller.spec.ts b/packages/components/src/table/src/components/osds-table/core/controller.spec.ts
@@ -1,6 +1,4 @@
-import type { OdsLoggerSpyReferences } from '@ovhcloud/ods-common-testing';
-import { Ods, OdsLogger } from '@ovhcloud/ods-common-core';
-import { OdsClearLoggerSpy, OdsInitializeLoggerSpy } from '@ovhcloud/ods-common-testing';
+import { Ods } from '@ovhcloud/ods-common-core';
 import { OdsTableController } from './controller';
 import { ODS_TABLE_SIZES } from '../constants/table-size';
 import { ODS_TABLE_VARIANTS } from '../constants/table-variant';
@@ -18,7 +16,6 @@ class OdsTableMock extends OsdsTable {
 describe('spec:ods-table-controller', () => {
   let controller: OdsTableController;
   let component: OsdsTable;
-  let loggerSpyReferences: OdsLoggerSpyReferences;
 
   Ods.instance().logging(false);
 
@@ -28,16 +25,11 @@ describe('spec:ods-table-controller', () => {
   }
 
   beforeEach(() => {
-    const loggerMocked = new OdsLogger('myLoggerMocked');
-    loggerSpyReferences = OdsInitializeLoggerSpy({
-      loggerMocked: loggerMocked as never,
-      spiedClass: OdsTableController,
-    });
+    jest.spyOn(console, 'warn');
   });
 
   afterEach(() => {
     jest.clearAllMocks();
-    OdsClearLoggerSpy(loggerSpyReferences);
   });
 
   it('should initialize', () => {
@@ -50,37 +42,39 @@ describe('spec:ods-table-controller', () => {
       it('should be set at component creation', () => {
         setup();
         controller.validateSize();
-        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalled();
+        expect(console.warn).toHaveBeenCalledTimes(1);
       });
 
       it('should throw a console.warn when size is not set', () => {
         setup();
         controller.validateSize('');
 
         const expected = 'The size attribute must be set';
-        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(expected);
+        expect(console.warn).toHaveBeenCalledWith(expected);
       });
 
       it('should throw a console.warn when size is wrongly set', () => {
         setup();
         controller.validateSize('xs');
-        const expected = `The size attribute must be one the following: ${Object.values(ODS_TABLE_SIZES).join(',')}`;
-        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(expected);
+        const expected = `The size attribute must be one the following: ${Object.values(ODS_TABLE_SIZES).join(', ')}.`;
+        expect(console.warn).toHaveBeenCalledTimes(1);
+        expect(console.warn).toHaveBeenCalledWith(expected);
       });
     });
 
     describe('methods:validateVariant', () => {
       it('should be unset at component creation', () => {
         setup();
         controller.validateVariant();
-        expect(loggerSpyReferences.methodSpies.warn).not.toHaveBeenCalled();
+        expect(console.warn).not.toHaveBeenCalled();
       });
 
       it('should throw a console.warn when variant is wrongly set', () => {
         setup();
         controller.validateVariant('contrasted');
-        const expected = `The variant attribute must be one the following: ${Object.values(ODS_TABLE_VARIANTS).join(',')}`;
-        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(expected);
+        const expected = `The variant attribute must be one the following: ${Object.values(ODS_TABLE_VARIANTS).join(', ')}.`;
+        expect(console.warn).toHaveBeenCalledTimes(1);
+        expect(console.warn).toHaveBeenCalledWith(expected);
       });
     });
   });

diff --git a/packages/components/src/table/src/components/osds-table/core/controller.ts b/packages/components/src/table/src/components/osds-table/core/controller.ts
@@ -1,16 +1,14 @@
 import type { ODS_TABLE_SIZE } from '../constants/table-size';
 import type { ODS_TABLE_VARIANT } from '../constants/table-variant';
 import type { OsdsTable } from '../osds-table';
-import { OdsLogger } from '@ovhcloud/ods-common-core';
 import { ODS_TABLE_SIZES } from '../constants/table-size';
 import { ODS_TABLE_VARIANTS } from '../constants/table-variant';
 
 /**
- * common controller logic for chip component used by the different implementations.
+ * common controller logic for table component used by the different implementations.
  * it contains all the glue between framework implementation and the third party service.
  */
 class OdsTableController {
-  private readonly logger = new OdsLogger('OsdsTableController');
   protected component: OsdsTable;
 
   constructor(component: OsdsTable) {
@@ -23,10 +21,10 @@ class OdsTableController {
    */
   validateSize(size?: string): void {
     if (!size || size.length === 0) {
-      this.logger.warn('The size attribute must be set');
+      console.warn('The size attribute must be set');
     }
     if (size && !ODS_TABLE_SIZES.includes(size as ODS_TABLE_SIZE)) {
-      this.logger.warn(`The size attribute must be one the following: ${Object.values(ODS_TABLE_SIZES).join(',')}`);
+      console.warn(`The size attribute must be one the following: ${Object.values(ODS_TABLE_SIZES).join(', ')}.`);
     }
   }
 
@@ -36,7 +34,7 @@ class OdsTableController {
    */
   validateVariant(variant?: string): void {
     if (variant && !ODS_TABLE_VARIANTS.includes(variant as ODS_TABLE_VARIANT)) {
-      this.logger.warn(`The variant attribute must be one the following: ${Object.values(ODS_TABLE_VARIANTS).join(',')}`);
+      console.warn(`The variant attribute must be one the following: ${Object.values(ODS_TABLE_VARIANTS).join(', ')}.`);
     }
   }
 }

diff --git a/packages/components/src/table/src/components/osds-table/osds-table.e2e.screenshot.ts b/packages/components/src/table/src/components/osds-table/osds-table.e2e.screenshot.ts
@@ -21,16 +21,16 @@ describe('e2e:osds-table', () => {
 
     it('should take screenshots of all attributes variations', async() => {
       variations.push(`
-        <osds-table size='sm''></osds-table>
+        <osds-table size='sm'></osds-table>
       `);
       variations.push(`
-        <osds-table size='md''></osds-table>
+        <osds-table size='md'></osds-table>
       `);
       variations.push(`
-        <osds-table size='lg''></osds-table>
+        <osds-table size='lg'></osds-table>
       `);
       variations.push(`
-        <osds-table size='striped''></osds-table>
+        <osds-table size='striped'></osds-table>
       `);
 
       await setup(variations.join(''));