feat(component.tabs): Add new component tabs (#13)

Signed-off-by: Alex Boungnaseng <alex.boungnaseng.ext@corp.ovh.com> Co-authored-by: schevreu <stevering@bkm.me>
ovh · Apr 20, 2023 · e73b220 · e73b220
1 parent 66925d3
commit e73b220
Show file tree

Hide file tree

Showing 576 changed files with 3,311 additions and 4,208 deletions.
diff --git a/package.json b/package.json
@@ -106,6 +106,7 @@
     "registry": ""
   },
   "resolutions": {
-    "ua-parser-js": "0.7.18"
+    "ua-parser-js": "0.7.18",
+    "@types/react": "^16.14.0"
   }
 }
diff --git a/packages/design/components/tabs/design-tabs.mdx b/packages/design/components/tabs/design-tabs.mdx
@@ -0,0 +1,78 @@
+## Preview
+
+<osds-tabs style={{ pointerEvents: 'none' }}>
+  <osds-tab-bar slot="top">
+    <osds-tab-bar-item panel="one">One</osds-tab-bar-item>
+    <osds-tab-bar-item panel="two">Two</osds-tab-bar-item>
+    <osds-tab-bar-item panel="three">Three</osds-tab-bar-item>
+  </osds-tab-bar>
+  <osds-tab-panel name="one">Oles ipsum dolor sit amet, discere vero causae sed tempus</osds-tab-panel>
+  <osds-tab-panel name="two">Oles ipsum dolor sit amet, sql dicat aperiri port performance</osds-tab-panel>
+  <osds-tab-panel name="three">Oles ipsum dolor sit amet, habitasse ei neque pericula perpetua</osds-tab-panel>
+</osds-tabs>
+
+## Description
+
+Tabs are an easy way to organize content by grouping similar information on the same page.
+This allows content to be viewed without having to navigate away from that page.
+They can also tend to be used to filter content via some common denominator.
+
+## Zoning
+
+The component is organized with a main content and a tab bar:
+
+<osds-tabs style={{ pointerEvents: 'none' }}>
+  <osds-tab-bar slot="top">
+  Bar
+  </osds-tab-bar>
+  Content
+</osds-tabs>
+
+You have to place some items inside the tab bar:
+
+<osds-tabs style={{ pointerEvents: 'none' }}>
+  <osds-tab-bar slot="top">
+    <osds-tab-bar-item panel="one">Item One</osds-tab-bar-item>
+    <osds-tab-bar-item panel="two">Item Two</osds-tab-bar-item>
+    <osds-tab-bar-item panel="three">Item Three</osds-tab-bar-item>
+  </osds-tab-bar>
+  Content
+</osds-tabs>
+
+Then your content represents your panel contents.
+
+<osds-tabs style={{ pointerEvents: 'none' }}>
+  <osds-tab-bar slot="top">
+    <osds-tab-bar-item panel="one">Item One</osds-tab-bar-item>
+    <osds-tab-bar-item panel="two">Item Two</osds-tab-bar-item>
+    <osds-tab-bar-item panel="three">Item Three</osds-tab-bar-item>
+  </osds-tab-bar>
+  <osds-tab-panel name="one">Panel content one</osds-tab-panel>
+</osds-tabs>
+
+Tabs are often used in the top part of a web page, as it can act as a navigation focus.
+They are left-centered by default.
+
+## Sizes
+
+There is only one size for now: `md`.
+
+## Contrasted
+
+For dark backgrounds, tabs have a contrasted version to be displayed.
+When the `tabs` changed to contrasted, it changes all items to a `contrasted` mode.
+
+## Disabled
+
+You can disable some items :
+
+<osds-tabs style={{ pointerEvents: 'none' }}>
+  <osds-tab-bar slot="top">
+    <osds-tab-bar-item panel="one">One</osds-tab-bar-item>
+    <osds-tab-bar-item panel="two" disabled>Two (disabled)</osds-tab-bar-item>
+    <osds-tab-bar-item panel="three">Three</osds-tab-bar-item>
+  </osds-tab-bar>
+  <osds-tab-panel name="one">Oles ipsum dolor sit amet, discere vero causae sed tempus</osds-tab-panel>
+  <osds-tab-panel name="two">Oles ipsum dolor sit amet, sql dicat aperiri port performance</osds-tab-panel>
+  <osds-tab-panel name="three">Oles ipsum dolor sit amet, habitasse ei neque pericula perpetua</osds-tab-panel>
+</osds-tabs>
diff --git a/packages/libraries/core/package.json b/packages/libraries/core/package.json
@@ -15,8 +15,8 @@
     "watch": "tsc -w -p tsconfig.esm.json",
     "doc": "typedoc --plugin none src/* && typedoc --plugin typedoc-plugin-markdown --hideBreadcrumbs true --hideInPageTOC true && typedoc --json ./typedoc/typedoc.json --pretty && tsc src/utils/typedoc/typedoc-json-to-md.ts && node scripts/generate-typedoc-md.js",
     "generate:licence": "npx generate-license-file --input package.json --output THIRD-PARTY-LICENCES --overwrite",
-    "test:spec": "jest",
-    "test:spec:ci": "jest --ci --detectOpenHandles"
+    "test:spec": "jest --coverage",
+    "test:spec:ci": "jest --ci  --coverage --detectOpenHandles"
   },
   "peerDependencies": {
     "@ovhcloud/ods-theming": ">=2"

diff --git a/packages/libraries/core/scripts/generate-typedoc-md.js b/packages/libraries/core/scripts/generate-typedoc-md.js
@@ -36,6 +36,10 @@ const components = [
   'OdsRange',
   'OdsSelect',
   'OdsSkeleton',
+  'OdsTabs',
+  'OdsTabBar',
+  'OdsTabBarItem',
+  'OdsTabPanel',
   'OdsText',
   'OdsTextarea',
   'OdsTile',

diff --git a/packages/libraries/core/src/components/public-api.ts b/packages/libraries/core/src/components/public-api.ts
@@ -28,7 +28,9 @@ export * from './radio-group/public-api';
 export * from './radio-button/public-api';
 export * from './range/public-api';
 export * from './skeleton/public-api';
+export * from './tabs/public-api';
 export * from './select/public-api';
+
 export * from './text/public-api';
 export * from './textarea/public-api';
 export * from './tile/public-api';

diff --git a/packages/libraries/core/src/components/tabs/ods-panel-value.ts b/packages/libraries/core/src/components/tabs/ods-panel-value.ts
@@ -0,0 +1 @@
+export type OdsPanelValue = string;
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-bar-item/ods-tab-bar-item-attributes.ts b/packages/libraries/core/src/components/tabs/ods-tab-bar-item/ods-tab-bar-item-attributes.ts
@@ -0,0 +1,20 @@
+import { OdsComponentAttributes } from '../../ods-component-attributes';
+
+export interface OdsTabBarItemAttributes extends OdsComponentAttributes {
+  /**
+   * is this tab item is selected or not
+   */
+  active: boolean;
+  /**
+   * is in contrasted mode or not
+   */
+  contrasted: boolean;
+  /**
+   * The tab is disabled or not
+   */
+  disabled: boolean;
+  /**
+   * The panel of the corresponding Tab
+   */
+  panel: string;
+}
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-bar-item/ods-tab-bar-item-behavior.ts b/packages/libraries/core/src/components/tabs/ods-tab-bar-item/ods-tab-bar-item-behavior.ts
@@ -0,0 +1,32 @@
+export interface OdsTabBarItemBehavior {
+  /**
+   * reference to the host element.
+   */
+  el: HTMLElement;
+
+  /**
+   * select item in order to make the corresponding panel displayed after
+   */
+  select(): void;
+
+  /**
+   * will find the contrasted attribute of the tabs (parent main component)
+   * and set here the contrast automatically
+   */
+  beforeInit(): void;
+
+  /** get the tab index of the item */
+  getTabIndex(): number | string;
+
+  /**
+   * handle the click on item.
+   * it will trigger the selection by calling select
+   */
+  handleClick(): void;
+
+  /**
+   * handle the keyboard selection
+   * @param event - keyboard event
+   */
+  handlePanelKeyEvent(event: KeyboardEvent): void;
+}
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-bar-item/ods-tab-bar-item-controller.ts b/packages/libraries/core/src/components/tabs/ods-tab-bar-item/ods-tab-bar-item-controller.ts
@@ -0,0 +1,38 @@
+import { OdsComponentController } from '../../ods-component-controller';
+import { OdsTabBarItem } from './ods-tab-bar-item';
+
+/**
+ * common controller logic for text component used by the different implementations.
+ * it contains all the glue between framework implementation and the third party service.
+ */
+export class OdsTabBarItemController extends OdsComponentController<OdsTabBarItem> {
+  constructor(component: OdsTabBarItem) {
+    super(component);
+  }
+
+  /**
+   *
+   * @param event
+  */
+  handlePanelKeyEvent(event: KeyboardEvent) {
+    if (!this.component.disabled) {
+      if (event.keyCode === 13 || event.keyCode === 32) {
+        this.component.select();
+        //event.defaultPrevented();
+        event.preventDefault();
+      }
+    }
+  }
+
+  getTabIndex(currentTabindex: number | string) {
+    if(this.component.disabled) {
+      return -1;
+    }
+
+    if (currentTabindex) {
+      return currentTabindex;
+    }
+
+    return 0;
+  }
+}
diff --git a/...ibraries/core/src/components/tabs/ods-tab-bar-item/ods-tab-bar-item-default-attributes.ts b/...ibraries/core/src/components/tabs/ods-tab-bar-item/ods-tab-bar-item-default-attributes.ts
@@ -0,0 +1,14 @@
+import { OdsTabBarItemAttributes } from './ods-tab-bar-item-attributes';
+
+/**
+ * Default attribute values of OdsTabs panel component
+ * (these are values for `OdsTabBarDefaultAttributes`)
+ */
+export const OdsTabBarItemDefaultAttributesDoc = {
+  panel: '',
+  active: false,
+  disabled: false,
+  contrasted: false
+} as const;
+
+export const odsTabBarItemDefaultAttributes = OdsTabBarItemDefaultAttributesDoc as OdsTabBarItemAttributes;
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-bar-item/ods-tab-bar-item-events.ts b/packages/libraries/core/src/components/tabs/ods-tab-bar-item/ods-tab-bar-item-events.ts
@@ -0,0 +1,6 @@
+import { OdsComponentEvents } from '../../ods-component-events';
+import { OdsTabItemSelectEventDetail } from '../ods-tab-item-select-event-detail';
+
+export interface OdsTabBarItemEvents extends OdsComponentEvents {
+  odsTabItemSelectEvent: OdsTabItemSelectEventDetail;
+}
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-bar-item/ods-tab-bar-item-methods.ts b/packages/libraries/core/src/components/tabs/ods-tab-bar-item/ods-tab-bar-item-methods.ts
@@ -0,0 +1,4 @@
+import { OdsComponentMethods } from '../../ods-component-methods';
+
+export interface OdsTabBarItemMethods extends OdsComponentMethods {
+}
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-bar-item/ods-tab-bar-item.tsx b/packages/libraries/core/src/components/tabs/ods-tab-bar-item/ods-tab-bar-item.tsx
@@ -0,0 +1,17 @@
+import { OdsComponentGenericMethods } from '../../ods-component-generic-methods';
+import { OdsComponentGenericEvents } from '../../ods-component-generic-events';
+import { OdsComponent } from '../../ods-component';
+import { OdsTabBarItemMethods } from './ods-tab-bar-item-methods';
+import { OdsTabBarItemEvents } from './ods-tab-bar-item-events';
+import { OdsTabBarItemController } from './ods-tab-bar-item-controller';
+import { OdsTabBarItemAttributes } from './ods-tab-bar-item-attributes';
+import { OdsTabBarItemBehavior } from './ods-tab-bar-item-behavior';
+
+/**
+ * interface description ofe all implementation of `ods-tab-bar-item`.
+ * each implementation must have defined events, methods, attributes
+ * and one controller for the common behavior logic
+ */
+export type OdsTabBarItem<ComponentMethods extends OdsComponentGenericMethods<OdsTabBarItemMethods> = OdsComponentGenericMethods<OdsTabBarItemMethods>,
+  ComponentEvents extends OdsComponentGenericEvents<OdsTabBarItemEvents> = OdsComponentGenericEvents<OdsTabBarItemEvents>> =
+  OdsComponent<ComponentMethods, ComponentEvents, OdsTabBarItemAttributes, OdsTabBarItemController, OdsTabBarItemBehavior>;
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-bar-item/public-api.ts b/packages/libraries/core/src/components/tabs/ods-tab-bar-item/public-api.ts
@@ -0,0 +1,7 @@
+export * from './ods-tab-bar-item'
+export * from './ods-tab-bar-item-attributes';
+export * from './ods-tab-bar-item-behavior';
+export * from './ods-tab-bar-item-controller';
+export * from './ods-tab-bar-item-default-attributes';
+export * from './ods-tab-bar-item-events';
+export * from './ods-tab-bar-item-methods';
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-bar/ods-tab-bar-attributes.ts b/packages/libraries/core/src/components/tabs/ods-tab-bar/ods-tab-bar-attributes.ts
@@ -0,0 +1,6 @@
+import { OdsComponentAttributes } from '../../ods-component-attributes';
+import { OdsTabsSize, } from '../ods-tabs/ods-tabs-size';
+
+export interface OdsTabBarAttributes extends OdsComponentAttributes {
+  size?: OdsTabsSize
+}
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-bar/ods-tab-bar-behavior.ts b/packages/libraries/core/src/components/tabs/ods-tab-bar/ods-tab-bar-behavior.ts
@@ -0,0 +1,6 @@
+export interface OdsTabBarBehavior {
+  /**
+   * reference to the host element.
+   */
+  el: HTMLElement;
+}
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-bar/ods-tab-bar-controller.ts b/packages/libraries/core/src/components/tabs/ods-tab-bar/ods-tab-bar-controller.ts
@@ -0,0 +1,12 @@
+import { OdsComponentController } from '../../ods-component-controller';
+import { OdsTabBar } from './ods-tab-bar';
+
+/**
+ * common controller logic for text component used by the different implementations.
+ * it contains all the glue between framework implementation and the third party service.
+ */
+export class OdsTabBarController extends OdsComponentController<OdsTabBar> {
+  constructor(component: OdsTabBar) {
+    super(component);
+  }
+}
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-bar/ods-tab-bar-default-attributes.ts b/packages/libraries/core/src/components/tabs/ods-tab-bar/ods-tab-bar-default-attributes.ts
@@ -0,0 +1,13 @@
+import { OdsTabBarAttributes } from './ods-tab-bar-attributes';
+import { OdsTabsSize, } from '../ods-tabs/ods-tabs-size';
+
+/**
+ * Default attribute values of OdsTabs panel component
+ * (these are values for `OdsTabBarDefaultAttributes`)
+ * @enum
+ */
+export const OdsTabBarDefaultAttributesDoc = {
+  size: OdsTabsSize.md,
+} as const;
+
+export const odsTabBarDefaultAttributes = OdsTabBarDefaultAttributesDoc as OdsTabBarAttributes;
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-bar/ods-tab-bar-events.ts b/packages/libraries/core/src/components/tabs/ods-tab-bar/ods-tab-bar-events.ts
@@ -0,0 +1,4 @@
+import { OdsComponentEvents } from '../../ods-component-events';
+
+export interface OdsTabBarEvents extends OdsComponentEvents {
+}
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-bar/ods-tab-bar-methods.ts b/packages/libraries/core/src/components/tabs/ods-tab-bar/ods-tab-bar-methods.ts
@@ -0,0 +1,4 @@
+import { OdsComponentMethods } from '../../ods-component-methods';
+
+export interface OdsTabBarMethods extends OdsComponentMethods {
+}
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-bar/ods-tab-bar.tsx b/packages/libraries/core/src/components/tabs/ods-tab-bar/ods-tab-bar.tsx
@@ -0,0 +1,17 @@
+import { OdsComponentGenericMethods } from '../../ods-component-generic-methods';
+import { OdsComponentGenericEvents } from '../../ods-component-generic-events';
+import { OdsComponent } from '../../ods-component';
+import { OdsTabBarMethods } from './ods-tab-bar-methods';
+import { OdsTabBarEvents } from './ods-tab-bar-events';
+import { OdsTabBarController } from './ods-tab-bar-controller';
+import { OdsTabBarAttributes } from './ods-tab-bar-attributes';
+import { OdsTabBarBehavior } from './ods-tab-bar-behavior';
+
+/**
+ * interface description ofe all implementation of `ods-tabs`.
+ * each implementation must have defined events, methods, attributes
+ * and one controller for the common behavior logic
+ */
+export type OdsTabBar<ComponentMethods extends OdsComponentGenericMethods<OdsTabBarMethods> = OdsComponentGenericMethods<OdsTabBarMethods>,
+  ComponentEvents extends OdsComponentGenericEvents<OdsTabBarEvents> = OdsComponentGenericEvents<OdsTabBarEvents>> =
+  OdsComponent<ComponentMethods, ComponentEvents, OdsTabBarAttributes, OdsTabBarController, OdsTabBarBehavior>;
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-bar/public-api.ts b/packages/libraries/core/src/components/tabs/ods-tab-bar/public-api.ts
@@ -0,0 +1,7 @@
+export * from './ods-tab-bar'
+export * from './ods-tab-bar-attributes';
+export * from './ods-tab-bar-behavior';
+export * from './ods-tab-bar-controller';
+export * from './ods-tab-bar-default-attributes';
+export * from './ods-tab-bar-events';
+export * from './ods-tab-bar-methods';
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-item-select-event-detail.ts b/packages/libraries/core/src/components/tabs/ods-tab-item-select-event-detail.ts
@@ -0,0 +1,7 @@
+import { OdsPanelValue } from './ods-panel-value';
+import { OdsTabBarItem } from './ods-tab-bar-item/ods-tab-bar-item';
+
+export interface OdsTabItemSelectEventDetail {
+  panel: OdsPanelValue,
+  tabItem: OdsTabBarItem
+}
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-panel/ods-tab-panel-attributes.ts b/packages/libraries/core/src/components/tabs/ods-tab-panel/ods-tab-panel-attributes.ts
@@ -0,0 +1,12 @@
+import { OdsComponentAttributes } from '../../ods-component-attributes';
+
+export interface OdsTabPanelAttributes extends OdsComponentAttributes {
+  /**
+   *  is the panel is active or nor
+   */
+  active: boolean;
+  /**
+   * identifier name of the panel
+   */
+  name: string;
+}
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-panel/ods-tab-panel-behavior.ts b/packages/libraries/core/src/components/tabs/ods-tab-panel/ods-tab-panel-behavior.ts
@@ -0,0 +1,6 @@
+export interface OdsTabPanelBehavior {
+  /**
+   * reference to the host element.
+   */
+  el: HTMLElement;
+}
diff --git a/packages/libraries/core/src/components/tabs/ods-tab-panel/ods-tab-panel-controller.ts b/packages/libraries/core/src/components/tabs/ods-tab-panel/ods-tab-panel-controller.ts
@@ -0,0 +1,12 @@
+import { OdsComponentController } from '../../ods-component-controller';
+import { OdsTabPanel } from './ods-tab-panel';
+
+/**
+ * common controller logic for text component used by the different implementations.
+ * it contains all the glue between framework implementation and the third party service.
+ */
+export class OdsTabPanelController extends OdsComponentController<OdsTabPanel> {
+  constructor(component: OdsTabPanel) {
+    super(component);
+  }
+}
diff --git a/...ages/libraries/core/src/components/tabs/ods-tab-panel/ods-tab-panel-default-attributes.ts b/...ages/libraries/core/src/components/tabs/ods-tab-panel/ods-tab-panel-default-attributes.ts
@@ -0,0 +1,12 @@
+import { OdsTabPanelAttributes } from './ods-tab-panel-attributes';
+
+/**
+ * Default attribute values of OdsTabs panel component
+ * (these are values for `odsTabPanelDefaultAttributes`)
+ */
+export const odsTabPanelDefaultAttributesDoc = {
+  name: '',
+  active: false,
+} as const;
+
+export const odsTabPanelDefaultAttributes = odsTabPanelDefaultAttributesDoc as OdsTabPanelAttributes;