feat(popover): add new component popover

packages/libraries/core/src/components/popover/popover-content/ods-popover-content-attributes.ts

@@ -0,0 +1,7 @@
+import { OdsComponentAttributes } from '../../ods-component-attributes';
+
+export interface OdsPopoverContentAttributes extends OdsComponentAttributes {
+  /**
+   * Popover attribute description
+   */
+}

packages/libraries/core/src/components/popover/popover-content/ods-popover-content-controller.ts

@@ -0,0 +1,21 @@
+import { OdsPopoverContent } from './ods-popover-content';
+import { OdsComponentController } from '../../ods-component-controller';
+
+/**
+ * common controller logic for cmpnt component used by the different implementations.
+ * it contains all the glue between framework implementation and the third party service.
+ */
+export class OdsPopoverContentController extends OdsComponentController<OdsPopoverContent> {
+  // private readonly logger = new OdsLogger('OdsPopoverContentController');
+
+  constructor(component: OdsPopoverContent) {
+    super(component);
+  }
+
+  /**
+   * Attributes validation documentation
+   */
+  validateAttributes(): void {
+      return;
+  }
+}

packages/libraries/core/src/components/popover/popover-content/ods-popover-content-default-attributes.ts

@@ -0,0 +1,7 @@
+import { OdsPopoverContentAttributes } from './ods-popover-content-attributes';
+
+export const odsPopoverContentDefaultAttributesDoc  = {
+    // default attributes
+} as const;
+
+export const odsPopoverContentDefaultAttributes = odsPopoverContentDefaultAttributesDoc as OdsPopoverContentAttributes;

packages/libraries/core/src/components/popover/popover-content/ods-popover-content-events.ts

@@ -0,0 +1,5 @@
+import { OdsComponentEvents } from '../../ods-component-events';
+
+export interface OdsPopoverContentEvents extends OdsComponentEvents {
+    // Events
+}

packages/libraries/core/src/components/popover/popover-content/ods-popover-content-methods.ts

@@ -0,0 +1,5 @@
+import { OdsComponentMethods } from '../../ods-component-methods';
+
+export interface OdsPopoverContentMethods extends OdsComponentMethods {
+    // Methods
+}

packages/libraries/core/src/components/popover/popover-content/ods-popover-content.ts

@@ -0,0 +1,16 @@
+import { OdsPopoverContentAttributes } from './ods-popover-content-attributes';
+import { OdsPopoverContentController } from './ods-popover-content-controller';
+import { OdsPopoverContentEvents } from './ods-popover-content-events';
+import { OdsPopoverContentMethods } from './ods-popover-content-methods';
+import { OdsComponent } from '../../ods-component';
+import { OdsComponentGenericEvents } from '../../ods-component-generic-events';
+import { OdsComponentGenericMethods } from '../../ods-component-generic-methods';
+
+/**
+ * interface description of all implementation of `ods-popover-content`.
+ * each implementation must have defined events, methods, attributes
+ * and one controller for the common behavior logic
+ */
+export type OdsPopoverContent<ComponentMethods extends OdsComponentGenericMethods<OdsPopoverContentMethods> = OdsComponentGenericMethods<OdsPopoverContentMethods>,
+  ComponentEvents extends OdsComponentGenericEvents<OdsPopoverContentEvents> = OdsComponentGenericEvents<OdsPopoverContentEvents>> =
+  OdsComponent<ComponentMethods, ComponentEvents, OdsPopoverContentAttributes, OdsPopoverContentController>;

packages/libraries/core/src/components/popover/popover-content/public-api.ts

@@ -0,0 +1,6 @@
+export * from './ods-popover-content';
+export * from './ods-popover-content-attributes';
+export * from './ods-popover-content-controller';
+export * from './ods-popover-content-default-attributes';
+export * from './ods-popover-content-events';
+export * from './ods-popover-content-methods';

packages/libraries/core/src/components/popover/popover/ods-popover-attributes.ts

@@ -0,0 +1,7 @@
+import { OdsComponentAttributes } from '../../ods-component-attributes';
+
+export interface OdsPopoverAttributes extends OdsComponentAttributes {
+  /**
+   * Popover attribute description
+   */
+}

packages/libraries/core/src/components/popover/popover/ods-popover-controller.spec.ts

@@ -0,0 +1,48 @@
+import {
+  OdsClearLoggerSpy,
+  OdsInitializeLoggerSpy,
+  OdsLoggerSpyReferences
+} from '@ovhcloud/ods-testing/src';
+
+import { Ods } from '../../../configure/ods';
+import { OdsLogger } from '../../../logger/ods-logger';
+import { HTMLStencilElement } from '@stencil/core/internal';
+import { OdsPopover } from './ods-popover';
+import { OdsPopoverController } from './ods-popover-controller';
+import { OdsPopoverMock } from './ods-popover-mock';
+
+
+describe('spec:ods-popover-controller', () => {
+  let controller: OdsPopoverController;
+  let component: OdsPopover;
+  let loggerSpyReferences: OdsLoggerSpyReferences;
+
+  Ods.instance().logging(false);
+  const logger = new OdsLogger('spec:ods-popover-controller');
+
+  function setup(attributes: Partial<OdsPopover> = {}) {
+    component = { ...component, ...attributes };
+    controller = new OdsPopoverController(component);
+  }
+
+  beforeEach(() => {
+    component = new OdsPopoverMock();
+    component.el = document.createElement('osds-popover') as HTMLStencilElement;
+
+    const loggerMocked = new OdsLogger('myLoggerMocked');
+    loggerSpyReferences = OdsInitializeLoggerSpy({
+      loggerMocked: loggerMocked as never,
+      spiedClass: OdsPopoverController
+    });
+  });
+
+  afterEach(() => {
+    OdsClearLoggerSpy(loggerSpyReferences);
+    jest.clearAllMocks();
+  });
+
+  it('should initialize', () => {
+    setup();
+    expect(controller).toBeTruthy();
+  });
+});

packages/libraries/core/src/components/popover/popover/ods-popover-controller.ts

@@ -0,0 +1,79 @@
+import { OdsPopover } from './ods-popover';
+import { OdsComponentController } from '../../ods-component-controller';
+import { OdsLogger } from '../../../logger/ods-logger';
+
+/**
+ * common controller logic for cmpnt component used by the different implementations.
+ * it contains all the glue between framework implementation and the third party service.
+ */
+export class OdsPopoverController extends OdsComponentController<OdsPopover> {
+  private readonly logger = new OdsLogger('OdsPopoverController');
+
+  constructor(component: OdsPopover) {
+    super(component);
+  }
+
+  /**
+   * Attributes validation documentation
+   */
+  validateAttributes(): void {
+      return;
+  }
+
+  handleTriggerClick(): void {
+    this.logger.log('Click on trigger');
+
+    if (!this.component.surface) {
+      return;
+    }
+    this.component.surface.opened = !this.component.surface.opened;
+  }
+
+  handleTriggerKey(event: KeyboardEvent): void {
+    if((event.target as HTMLElement).tagName !== "OSDS-LINK" && (event.key === " " || event.key === "Enter")) {
+      this.logger.log('Key on trigger');
+
+      if (!this.component.surface) {
+        return;
+      }
+      this.component.surface.opened = !this.component.surface.opened;
+    }
+
+    if((event.target as HTMLElement).tagName !== "OSDS-LINK" && event.key === "Escape") {
+      this.logger.log('EscapeKey on trigger');
+      if(this.component.surface) {
+        this.component.surface.opened = false;
+      }
+    }
+  }
+
+  handleSurfaceKey(event: KeyboardEvent): void {
+    if (event.key === "Escape") {
+      this.logger.log('EscapeKey in surface');
+      if(this.component.surface) {
+        this.component.surface.opened = false;
+      }
+    }
+  }
+
+  checkForClickOutside(event: any): void {
+    if (this.component.el.contains(event.target) || this.component.surface === undefined || !this.component.surface.opened) {
+      return;
+    } else {
+      this.logger.log('Click outside component while he is opened');
+      this.component.surface.close();
+    }
+  }
+
+  syncReferences(): void {
+    if (this.component.surface && this.component.anchor) {
+      this.component.surface.setAnchorElement(this.component.anchor);
+      this.component.surface.setAnchorMargin( {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      });
+    }
+  }
+}

packages/libraries/core/src/components/popover/popover/ods-popover-default-attributes.ts

@@ -0,0 +1,7 @@
+import { OdsPopoverAttributes } from './ods-popover-attributes';
+
+export const odsPopoverDefaultAttributesDoc  = {
+    // default attributes
+} as const;
+
+export const odsPopoverDefaultAttributes = odsPopoverDefaultAttributesDoc as OdsPopoverAttributes;

packages/libraries/core/src/components/popover/popover/ods-popover-events.ts

@@ -0,0 +1,5 @@
+import { OdsComponentEvents } from '../../ods-component-events';
+
+export interface OdsPopoverEvents extends OdsComponentEvents {
+    // Events
+}

packages/libraries/core/src/components/popover/popover/ods-popover-methods.ts

@@ -0,0 +1,5 @@
+import { OdsComponentMethods } from '../../ods-component-methods';
+
+export interface OdsPopoverMethods extends OdsComponentMethods {
+    // Methods
+}

packages/libraries/core/src/components/popover/popover/ods-popover-mock.ts

@@ -0,0 +1,25 @@
+import { OdsPopover } from "./ods-popover";
+import { OdsPopoverController } from "./ods-popover-controller";
+import { OdsPopoverEvents } from "./ods-popover-events";
+import { OdsPopoverMethods } from "./ods-popover-methods";
+import { OcdkSurface } from '@ovhcloud/ods-cdk';
+import { HTMLStencilElement } from '@stencil/core/internal';
+
+/**
+ * Mocked generic implementation that represents an `OdsPopover`.
+ * it allows to test the controller with a stub implementation.
+ */
+export class OdsPopoverMock implements OdsPopover<OdsPopoverMethods, OdsPopoverEvents> {
+  controller: OdsPopoverController = jest.fn() as unknown as OdsPopoverController;
+  el!: HTMLStencilElement;
+
+  title: HTMLElement | null = null;
+  anchor!: HTMLDivElement;
+  surface: OcdkSurface | undefined = undefined;
+
+  handleTriggerClick = jest.fn();
+  handleTriggerKey = jest.fn();
+  handleSurfaceKey = jest.fn();
+  checkForClickOutside = jest.fn();
+  syncReferences = jest.fn();
+}

packages/libraries/core/src/components/popover/popover/ods-popover.ts

@@ -0,0 +1,32 @@
+import { OdsPopoverAttributes } from './ods-popover-attributes';
+import { OdsPopoverController } from './ods-popover-controller';
+import { OdsPopoverEvents } from './ods-popover-events';
+import { OdsPopoverMethods } from './ods-popover-methods';
+import { OdsComponent } from '../../ods-component';
+import { OdsComponentGenericEvents } from '../../ods-component-generic-events';
+import { OdsComponentGenericMethods } from '../../ods-component-generic-methods';
+import { OcdkSurface } from '@ovhcloud/ods-cdk';
+import { HTMLStencilElement } from '@stencil/core/internal';
+
+/**
+ * interface description of all implementation of `ods-popover`.
+ * each implementation must have defined events, methods, attributes
+ * and one controller for the common behavior logic
+ */
+
+export interface OdsPopoverBehavior {
+  el: HTMLStencilElement;
+  title: HTMLElement | null;
+  anchor: HTMLDivElement;
+  surface: OcdkSurface | undefined;
+
+  handleTriggerClick(): void;
+  handleTriggerKey(event: KeyboardEvent): void;
+  handleSurfaceKey(event: KeyboardEvent): void;
+  checkForClickOutside(event:any): void;
+  syncReferences(): void;
+}
+
+export type OdsPopover<ComponentMethods extends OdsComponentGenericMethods<OdsPopoverMethods> = OdsComponentGenericMethods<OdsPopoverMethods>,
+  ComponentEvents extends OdsComponentGenericEvents<OdsPopoverEvents> = OdsComponentGenericEvents<OdsPopoverEvents>> =
+  OdsComponent<ComponentMethods, ComponentEvents, OdsPopoverAttributes, OdsPopoverController, OdsPopoverBehavior>;

packages/libraries/core/src/components/popover/popover/public-api.ts

@@ -0,0 +1,6 @@
+export * from './ods-popover';
+export * from './ods-popover-attributes';
+export * from './ods-popover-controller';
+export * from './ods-popover-default-attributes';
+export * from './ods-popover-events';
+export * from './ods-popover-methods';

packages/libraries/core/src/components/popover/public-api.ts

@@ -0,0 +1,2 @@
+export * from './popover/public-api';
+export * from './popover-content/public-api';

packages/libraries/core/src/components/public-api.ts

@@ -46,3 +46,4 @@ export * from './ods-component-generic-methods';
 export * from './ods-component-methods';
 export * from './ods-focus-change-event-detail';
 export * from './ods-string-attributes';
+export * from './popover/public-api';

packages/libraries/core/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "declaration": true,
     "paths": {
-      "@ovhcloud/ods-theming": ["./packages/libraries/theming/src/index"]
+      "@ovhcloud/ods-theming": ["./packages/libraries/theming/src/index"],
+      "@ovhcloud/ods-cdk": ["./packages/libraries/cdk/src/index"]
     }
   },
   "include": [

packages/libraries/testing/src/components/popover/popover-content/ods-popover-content-base-attributes.ts

@@ -0,0 +1,8 @@
+import { OdsPopoverContentAttributes } from '../../../../../core/src/index';
+
+/**
+ * Base attributes value
+ */
+export const odsPopoverContentBaseAttributes: OdsPopoverContentAttributes = {
+
+};

packages/libraries/testing/src/components/popover/popover-content/public-api.ts

@@ -0,0 +1 @@
+export * from './ods-popover-content-base-attributes';

packages/libraries/testing/src/components/popover/popover/ods-popover-base-attributes.ts

@@ -0,0 +1,8 @@
+import { OdsPopoverAttributes } from '../../../../../core/src/index';
+
+/**
+ * Base attributes value
+ */
+export const odsPopoverBaseAttributes: OdsPopoverAttributes = {
+
+};

packages/libraries/testing/src/components/popover/popover/public-api.ts

@@ -0,0 +1 @@
+export * from './ods-popover-base-attributes';

packages/libraries/testing/src/components/popover/public-api.ts

@@ -0,0 +1,2 @@
+export * from './popover/public-api';
+export * from './popover-content/public-api';

packages/libraries/testing/src/components/public-api.ts

@@ -23,3 +23,4 @@ export * from './text/public-api';
 export * from './textarea/public-api';
 export * from './tile/public-api';
 export * from './toggle/public-api';
+export * from './popover/public-api';

packages/libraries/testing/src/jest/ods-get-jest-config.ts

@@ -43,6 +43,7 @@ export function OdsGetJestConfig({
     moduleNameMapper: {
       ...(!e2e ? {
         '^@ovhcloud/ods-core$': `${basePath}/packages/libraries/core/src/index`,
+        '^@ovhcloud/ods-cdk$': `${basePath}/packages/libraries/cdk/src/index`,
         '^@ovhcloud/ods-testing$': `${basePath}/packages/libraries/testing/src/index`,
         '^@ovhcloud/ods-theming$': `${basePath}/packages/libraries/theming/src/index`,
         '^@ovhcloud/ods-stencil/libraries/stencil-core$': `${basePath}/packages/stencil/libraries/stencil-core/src/index`,

packages/libraries/theming/size/ods-size-definitions.scss

@@ -41,3 +41,4 @@ $ods-size-definitions: (
 @function ods-get-size-definitions() {
   @return $ods-size-definitions;
 }
+@import './ods-theming-size.popover.scss';@import './ods-theming-size.popover.scss';

packages/libraries/theming/size/ods-theming-size.popover.scss

@@ -0,0 +1,14 @@
+
+/// @access private
+//@function ods-get--size-properties($size-name) {
+//  @return (
+//
+//  )
+//}
+
+/// @access private
+//@function ods-get--component-size-definition() {
+//  @return (
+//    md: ods-get--size-properties(md)
+//  );
+//}

packages/specifications/components/popover/specifications-popover-contents.mdx

@@ -0,0 +1,3 @@
+| Name    | default | Description |
+|---------|---------|-------------|
+| -       | ''      |             |

packages/specifications/components/popover/specifications-popover-events.mdx

@@ -0,0 +1 @@
+_none_

packages/specifications/components/popover/specifications-popover-methods.mdx

@@ -0,0 +1 @@
+_none_

packages/specifications/components/popover/specifications-popover-properties.mdx

@@ -0,0 +1,3 @@
+| Name | Type | default | Description |
+|------|------|---------|-------------|
+|      |      |         |             |

packages/specifications/components/popover/specifications-popover-tests.mdx

@@ -0,0 +1 @@
+_none_