Skip to content

Commit f20ae7b

Browse files
skhamvonskhamvon
committed
feat(popover): add new component popover
1 parent 648252d commit f20ae7b

File tree

90 files changed

+1531
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+1531
-1
lines changed

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { OdsComponentAttributes } from '../../ods-component-attributes';
2+
3+
export interface OdsPopoverContentAttributes extends OdsComponentAttributes {
4+
/**
5+
* Popover attribute description
6+
*/
7+
}

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

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { OdsPopoverContent } from './ods-popover-content';
2+
import { OdsComponentController } from '../../ods-component-controller';
3+
4+
/**
5+
* common controller logic for cmpnt component used by the different implementations.
6+
* it contains all the glue between framework implementation and the third party service.
7+
*/
8+
export class OdsPopoverContentController extends OdsComponentController<OdsPopoverContent> {
9+
// private readonly logger = new OdsLogger('OdsPopoverContentController');
10+
11+
constructor(component: OdsPopoverContent) {
12+
super(component);
13+
}
14+
15+
/**
16+
* Attributes validation documentation
17+
*/
18+
validateAttributes(): void {
19+
return;
20+
}
21+
}

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { OdsPopoverContentAttributes } from './ods-popover-content-attributes';
2+
3+
export const odsPopoverContentDefaultAttributesDoc = {
4+
// default attributes
5+
} as const;
6+
7+
export const odsPopoverContentDefaultAttributes = odsPopoverContentDefaultAttributesDoc as OdsPopoverContentAttributes;

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { OdsComponentEvents } from '../../ods-component-events';
2+
3+
export interface OdsPopoverContentEvents extends OdsComponentEvents {
4+
// Events
5+
}

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { OdsComponentMethods } from '../../ods-component-methods';
2+
3+
export interface OdsPopoverContentMethods extends OdsComponentMethods {
4+
// Methods
5+
}

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

Whitespace-only changes.

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

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { OdsPopoverContentAttributes } from './ods-popover-content-attributes';
2+
import { OdsPopoverContentController } from './ods-popover-content-controller';
3+
import { OdsPopoverContentEvents } from './ods-popover-content-events';
4+
import { OdsPopoverContentMethods } from './ods-popover-content-methods';
5+
import { OdsComponent } from '../../ods-component';
6+
import { OdsComponentGenericEvents } from '../../ods-component-generic-events';
7+
import { OdsComponentGenericMethods } from '../../ods-component-generic-methods';
8+
9+
/**
10+
* interface description of all implementation of `ods-popover-content`.
11+
* each implementation must have defined events, methods, attributes
12+
* and one controller for the common behavior logic
13+
*/
14+
export type OdsPopoverContent<ComponentMethods extends OdsComponentGenericMethods<OdsPopoverContentMethods> = OdsComponentGenericMethods<OdsPopoverContentMethods>,
15+
ComponentEvents extends OdsComponentGenericEvents<OdsPopoverContentEvents> = OdsComponentGenericEvents<OdsPopoverContentEvents>> =
16+
OdsComponent<ComponentMethods, ComponentEvents, OdsPopoverContentAttributes, OdsPopoverContentController>;

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export * from './ods-popover-content';
2+
export * from './ods-popover-content-attributes';
3+
export * from './ods-popover-content-controller';
4+
export * from './ods-popover-content-default-attributes';
5+
export * from './ods-popover-content-events';
6+
export * from './ods-popover-content-methods';

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { OdsComponentAttributes } from '../../ods-component-attributes';
2+
3+
export interface OdsPopoverAttributes extends OdsComponentAttributes {
4+
/**
5+
* Popover attribute description
6+
*/
7+
}

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

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { OdsPopover } from './ods-popover';
2+
import { OdsComponentController } from '../../ods-component-controller';
3+
import { OdsLogger } from '../../../logger/ods-logger';
4+
5+
/**
6+
* common controller logic for cmpnt component used by the different implementations.
7+
* it contains all the glue between framework implementation and the third party service.
8+
*/
9+
export class OdsPopoverController extends OdsComponentController<OdsPopover> {
10+
private readonly logger = new OdsLogger('OdsPopoverController');
11+
12+
constructor(component: OdsPopover) {
13+
super(component);
14+
}
15+
16+
/**
17+
* Attributes validation documentation
18+
*/
19+
validateAttributes(): void {
20+
return;
21+
}
22+
23+
handleTriggerClick(): void {
24+
this.logger.log('Click on trigger');
25+
26+
if (!this.component.surface) {
27+
return;
28+
}
29+
this.component.surface.opened = !this.component.surface.opened;
30+
}
31+
32+
handleTriggerKey(event: KeyboardEvent): void {
33+
if((event.target as HTMLElement).tagName !== "OSDS-LINK" && (event.key === " " || event.key === "Enter")) {
34+
this.logger.log('Key on trigger');
35+
36+
if (!this.component.surface) {
37+
return;
38+
}
39+
this.component.surface.opened = !this.component.surface.opened;
40+
}
41+
42+
if((event.target as HTMLElement).tagName !== "OSDS-LINK" && event.key === "Escape") {
43+
this.logger.log('EscapeKey on trigger');
44+
if(this.component.surface) {
45+
this.component.surface.opened = false;
46+
}
47+
}
48+
}
49+
50+
handleSurfaceKey(event: KeyboardEvent): void {
51+
if (event.key === "Escape") {
52+
this.logger.log('EscapeKey in surface');
53+
if(this.component.surface) {
54+
this.component.surface.opened = false;
55+
}
56+
}
57+
}
58+
59+
checkForClickOutside(event: any): void {
60+
if (this.component.el.contains(event.target) || this.component.surface === undefined || !this.component.surface.opened) {
61+
return;
62+
} else {
63+
this.logger.log('Click outside component while he is opened');
64+
this.component.surface.close();
65+
}
66+
}
67+
68+
syncReferences(): void {
69+
if (this.component.surface && this.component.anchor) {
70+
this.component.surface.setAnchorElement(this.component.anchor);
71+
this.component.surface.setAnchorMargin( {
72+
top: 0,
73+
right: 0,
74+
bottom: 0,
75+
left: 0
76+
});
77+
}
78+
}
79+
}

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { OdsPopoverAttributes } from './ods-popover-attributes';
2+
3+
export const odsPopoverDefaultAttributesDoc = {
4+
// default attributes
5+
} as const;
6+
7+
export const odsPopoverDefaultAttributes = odsPopoverDefaultAttributesDoc as OdsPopoverAttributes;

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { OdsComponentEvents } from '../../ods-component-events';
2+
3+
export interface OdsPopoverEvents extends OdsComponentEvents {
4+
// Events
5+
}

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { OdsComponentMethods } from '../../ods-component-methods';
2+
3+
export interface OdsPopoverMethods extends OdsComponentMethods {
4+
// Methods
5+
}

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

Whitespace-only changes.

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

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { OdsPopoverAttributes } from './ods-popover-attributes';
2+
import { OdsPopoverController } from './ods-popover-controller';
3+
import { OdsPopoverEvents } from './ods-popover-events';
4+
import { OdsPopoverMethods } from './ods-popover-methods';
5+
import { OdsComponent } from '../../ods-component';
6+
import { OdsComponentGenericEvents } from '../../ods-component-generic-events';
7+
import { OdsComponentGenericMethods } from '../../ods-component-generic-methods';
8+
import { OcdkSurface } from '@ovhcloud/ods-cdk';
9+
import { HTMLStencilElement } from '@stencil/core/internal';
10+
11+
/**
12+
* interface description of all implementation of `ods-popover`.
13+
* each implementation must have defined events, methods, attributes
14+
* and one controller for the common behavior logic
15+
*/
16+
17+
export interface OdsPopoverBehavior {
18+
el: HTMLStencilElement;
19+
title: HTMLElement | null;
20+
anchor: HTMLDivElement;
21+
surface: OcdkSurface | undefined;
22+
23+
handleTriggerClick(): void;
24+
handleTriggerKey(event: KeyboardEvent): void;
25+
handleSurfaceKey(event: KeyboardEvent): void;
26+
checkForClickOutside(event:any): void;
27+
syncReferences(): void;
28+
}
29+
30+
export type OdsPopover<ComponentMethods extends OdsComponentGenericMethods<OdsPopoverMethods> = OdsComponentGenericMethods<OdsPopoverMethods>,
31+
ComponentEvents extends OdsComponentGenericEvents<OdsPopoverEvents> = OdsComponentGenericEvents<OdsPopoverEvents>> =
32+
OdsComponent<ComponentMethods, ComponentEvents, OdsPopoverAttributes, OdsPopoverController, OdsPopoverBehavior>;

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export * from './ods-popover';
2+
export * from './ods-popover-attributes';
3+
export * from './ods-popover-controller';
4+
export * from './ods-popover-default-attributes';
5+
export * from './ods-popover-events';
6+
export * from './ods-popover-methods';

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

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './popover/public-api';
2+
export * from './popover-content/public-api';

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

+1
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,4 @@ export * from './ods-component-generic-methods';
4646
export * from './ods-component-methods';
4747
export * from './ods-focus-change-event-detail';
4848
export * from './ods-string-attributes';
49+
export * from './popover/public-api';

‎packages/libraries/core/tsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"compilerOptions": {
44
"declaration": true,
55
"paths": {
6-
"@ovhcloud/ods-theming": ["./packages/libraries/theming/src/index"]
6+
"@ovhcloud/ods-theming": ["./packages/libraries/theming/src/index"],
7+
"@ovhcloud/ods-cdk": ["./packages/libraries/cdk/src/index"]
78
}
89
},
910
"include": [

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

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { OdsPopoverContentAttributes } from '../../../../../core/src/index';
2+
3+
/**
4+
* Base attributes value
5+
*/
6+
export const odsPopoverContentBaseAttributes: OdsPopoverContentAttributes = {
7+
8+
};

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './ods-popover-content-base-attributes';

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

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { OdsPopoverAttributes } from '../../../../../core/src/index';
2+
3+
/**
4+
* Base attributes value
5+
*/
6+
export const odsPopoverBaseAttributes: OdsPopoverAttributes = {
7+
8+
};

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './ods-popover-base-attributes';

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

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './popover/public-api';
2+
export * from './popover-content/public-api';

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

+1
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,4 @@ export * from './text/public-api';
2323
export * from './textarea/public-api';
2424
export * from './tile/public-api';
2525
export * from './toggle/public-api';
26+
export * from './popover/public-api';

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

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export function OdsGetJestConfig({
4343
moduleNameMapper: {
4444
...(!e2e ? {
4545
'^@ovhcloud/ods-core$': `${basePath}/packages/libraries/core/src/index`,
46+
'^@ovhcloud/ods-cdk': `${basePath}/packages/libraries/cdk/src/index`,
4647
'^@ovhcloud/ods-testing$': `${basePath}/packages/libraries/testing/src/index`,
4748
'^@ovhcloud/ods-theming$': `${basePath}/packages/libraries/theming/src/index`,
4849
'^@ovhcloud/ods-stencil/libraries/stencil-core$': `${basePath}/packages/stencil/libraries/stencil-core/src/index`,

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

+1
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,4 @@ $ods-size-definitions: (
4141
@function ods-get-size-definitions() {
4242
@return $ods-size-definitions;
4343
}
44+
@import './ods-theming-size.popover.scss';@import './ods-theming-size.popover.scss';

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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
/// @access private
3+
//@function ods-get--size-properties($size-name) {
4+
// @return (
5+
//
6+
// )
7+
//}
8+
9+
/// @access private
10+
//@function ods-get--component-size-definition() {
11+
// @return (
12+
// md: ods-get--size-properties(md)
13+
// );
14+
//}

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
| Name | default | Description |
2+
|---------|---------|-------------|
3+
| - | '' | |

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
_none_

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
_none_

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
| Name | Type | default | Description |
2+
|------|------|---------|-------------|
3+
| | | | |

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
_none_

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {Description} from '@storybook/addon-docs';
2+
3+
[//]: # (import Specs from '@ovhcloud/ods-core/src/components/popover/docs/spec.md';)
4+
import SpecsPopoverContents from './specifications-popover-contents.mdx';
5+
import SpecsPopoverTests from './specifications-popover-tests.mdx';
6+
7+
[//]: # (<Description>{Specs}</Description>)
8+
9+
## Contents
10+
<SpecsPopoverContents />
11+
12+
## Tests
13+
<SpecsPopoverTests />

‎packages/stencil/components/popover/.gitignore

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
dist/
2+
custom-elements/
3+
custom-elements-bundle/
4+
www/
5+
loader/
6+
docs-api
7+
src/components.d.ts
8+
9+
*~
10+
*.sw[mnpcod]
11+
*.log
12+
*.lock
13+
*.tmp
14+
*.tmp.*
15+
log.txt
16+
*.sublime-project
17+
*.sublime-workspace
18+
19+
.stencil/
20+
screenshot/
21+
.idea/
22+
.vscode/
23+
.sass-cache/
24+
.versions/
25+
node_modules/
26+
$RECYCLE.BIN/
27+
28+
.DS_Store
29+
Thumbs.db
30+
UserInterfaceState.xcuserstate
31+
.env
32+
33+
src/**/readme.md

‎packages/stencil/components/popover/.npmignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
!dist/
2+
!loader/
3+
!docs-api/
4+
src/

‎packages/stencil/components/popover/CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Change Log
2+
3+
All notable changes to this project will be documented in this file.
4+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

‎packages/stencil/components/popover/THIRD-PARTY-LICENCES

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
This file was generated with the generate-license-file npm package!
2+
https://www.npmjs.com/package/generate-license-file
3+
4+
This file was generated with the generate-license-file npm package!
5+
https://www.npmjs.com/package/generate-license-file

0 commit comments

Comments
 (0)