-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(arch): move && simplify component skeleton
- Loading branch information
Showing
79 changed files
with
412 additions
and
543 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
71 changes: 71 additions & 0 deletions
71
packages-new/components/skeleton/documentation/specifications/spec.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| * [**Interfaces**](#interfaces) | ||
| * [**Types**](#types) | ||
| * [**Classes**](#classes) | ||
| * [**Type alias**](#type-alias) | ||
| * [**Variables**](#variables) | ||
|
|
||
| ## Interfaces | ||
|
|
||
| ### OdsSkeletonAttributes | ||
| |name | Type | Required | Default | Description| | ||
| |---|---|:---:|---|---| | ||
| |**`flex`** | _boolean_ | | | Wether or not skeleton size fill its parent| | ||
| |**`randomized`** | _boolean_ | | | Wether or not skeleton size is randomized| | ||
| |**`size`** | `OdsSkeletonSize` | | | Skeleton size| | ||
|
|
||
| ### OdsSkeletonBehavior | ||
| |name | Type | Required | Default | Description| | ||
| |---|---|:---:|---|---| | ||
| |**`hostElement`** | `Host` | ✴️ | | reference to the host element of the component| | ||
| |**`afterInit`** | _void_ | ✴️ | | method executed after initialization of component(`componentDidLoad` with stenciljs for instance).this method has to call OdsSkeletonController.afterInit| | ||
|
|
||
| ## Types | ||
|
|
||
| ### OdsSkeletonSize | ||
| | | | ||
| |:---:| | ||
| | `lg` | | ||
| | `md` | | ||
| | `sm` | | ||
| | `xl` | | ||
| | `xs` | | ||
|
|
||
| ## Classes | ||
|
|
||
| ### OdsSkeletonController | ||
| _common controller logic for skeleton component used by the different implementations._ | ||
| _it contains all the glue between framework implementation and the third party service._ | ||
|
|
||
| #### Methods | ||
| > **afterInit**() => _unknown_ | ||
|
|
||
|
|
||
| ## Type alias | ||
|
|
||
| ### OdsSkeleton | ||
|
|
||
| interface description of all implementations of `ods-skeleton`. | ||
| each implementation must have defined events, methods, attributes | ||
| and one controller for the common behavior logic | ||
|
|
||
| > - `OdsComponentGenericMethods` | ||
| > - `OdsComponentGenericEvents` | ||
| ### OdsSkeletonAttributes | ||
|
|
||
| > _Based on `OdsComponentAttributes`_ | ||
| ### OdsSkeletonEvents | ||
|
|
||
| > _Based on `OdsComponentEvents`_ | ||
| ### OdsSkeletonMethods | ||
|
|
||
| > _Based on `OdsComponentMethods`_ | ||
| ## Variables | ||
|
|
||
| ### odsSkeletonDefaultAttributes | ||
| `OdsSkeletonAttributes` |
File renamed without changes.
File renamed without changes.
15 changes: 15 additions & 0 deletions
15
...ew/components/skeleton/documentation/specifications/specifications-skeleton.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import {Description} from '@storybook/addon-docs'; | ||
| import Specs from './spec.md'; | ||
| import SpecsSkeletonContents from './specifications-skeleton-contents.mdx'; | ||
| import SpecsSkeletonTests from './specifications-skeleton-tests.mdx'; | ||
|
|
||
| ## Description | ||
| The skeleton component can be displayed in different sizes or its width can be randomized. | ||
|
|
||
| <Description>{Specs}</Description> | ||
|
|
||
| ## Contents | ||
| <SpecsSkeletonContents /> | ||
|
|
||
| ## Tests | ||
| <SpecsSkeletonTests /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
12 changes: 12 additions & 0 deletions
12
...ages-new/components/skeleton/src/components/osds-skeleton/constants/default-attributes.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import type { OdsSkeletonAttribute } from '../interfaces/attributes'; | ||
| import { ODS_SKELETON_SIZE } from './skeleton-size'; | ||
|
|
||
| const DEFAULT_ATTRIBUTE: OdsSkeletonAttribute = Object.freeze({ | ||
| inline: false, | ||
| randomized: false, | ||
| size: ODS_SKELETON_SIZE.md, | ||
| }); | ||
|
|
||
| export { | ||
| DEFAULT_ATTRIBUTE, | ||
| }; |
14 changes: 14 additions & 0 deletions
14
packages-new/components/skeleton/src/components/osds-skeleton/constants/skeleton-size.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| enum ODS_SKELETON_SIZE { | ||
| xs = 'xs', | ||
| sm = 'sm', | ||
| md = 'md', | ||
| lg = 'lg', | ||
| xl = 'xl', | ||
| } | ||
|
|
||
| const ODS_SKELETON_SIZES = Object.freeze(Object.values(ODS_SKELETON_SIZE)); | ||
|
|
||
| export { | ||
| ODS_SKELETON_SIZE, | ||
| ODS_SKELETON_SIZES, | ||
| }; |
18 changes: 18 additions & 0 deletions
18
packages-new/components/skeleton/src/components/osds-skeleton/interfaces/attributes.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { ODS_SKELETON_SIZE } from '../constants/skeleton-size'; | ||
|
|
||
| interface OdsSkeletonAttribute { | ||
| /** inline or not: see component principles */ | ||
| inline?: boolean; | ||
| /** | ||
| * Wether or not skeleton size is randomized | ||
| */ | ||
| randomized?: boolean | ||
| /** | ||
| * Skeleton size | ||
| */ | ||
| size?: ODS_SKELETON_SIZE | ||
| } | ||
|
|
||
| export { | ||
| OdsSkeletonAttribute, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
packages-new/components/skeleton/src/components/osds-skeleton/osds-skeleton.e2e.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import type { E2EElement, E2EPage } from '@stencil/core/testing'; | ||
| import type { OdsSkeletonAttribute } from './interfaces/attributes'; | ||
| import { newE2EPage } from '@stencil/core/testing'; | ||
| import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing'; | ||
| import { DEFAULT_ATTRIBUTE } from './constants/default-attributes'; | ||
|
|
||
| describe('e2e:osds-skeleton', () => { | ||
| let page: E2EPage; | ||
| let el: E2EElement; | ||
| let skeletonElement: E2EElement; | ||
|
|
||
| async function setup({ attributes }: { attributes: Partial<OdsSkeletonAttribute> }) { | ||
| const stringAttributes = odsComponentAttributes2StringAttributes<OdsSkeletonAttribute>(attributes, DEFAULT_ATTRIBUTE); | ||
|
|
||
| page = await newE2EPage(); | ||
| await page.setContent(`<osds-skeleton ${odsStringAttributes2Str(stringAttributes)}></osds-skeleton>`); | ||
| await page.evaluate(() => document.body.style.setProperty('margin', '0px')); | ||
|
|
||
| el = await page.find('osds-skeleton'); | ||
|
|
||
| skeletonElement = await page.find('osds-skeleton >>> div'); | ||
| } | ||
|
|
||
| it('should render', async () => { | ||
| await setup({ attributes: {} }); | ||
| expect(el).not.toBeNull(); | ||
| expect(skeletonElement).not.toBeNull(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.