refactor(skeleton): migrate arch

chore: active pipeline

packages/ods/react/tests/_app/src/components.ts

@@ -10,6 +10,7 @@ const componentNames = [
   'spinner',
   'text',
   'icon',
+  'skeleton',
   //--generator-anchor--
 ];
 

packages/ods/react/tests/_app/src/components/ods-skeleton.tsx

@@ -0,0 +1,10 @@
+import React from 'react-dom/client';
+import { OdsSkeleton } from 'ods-components-react';
+
+const Skeleton = () => {
+  return (
+    <OdsSkeleton />
+  );
+};
+
+export default Skeleton;

packages/ods/react/tests/e2e/ods-skeleton.e2e.ts

@@ -0,0 +1,23 @@
+import type { Page } from 'puppeteer';
+import { goToComponentPage, setupBrowser } from '../setup';
+
+describe('ods-skeleton react', () => {
+  const setup = setupBrowser();
+  let page: Page;
+
+  beforeAll(async () => {
+    page = setup().page;
+  });
+
+  beforeEach(async () => {
+    await goToComponentPage(page, 'ods-skeleton');
+  });
+
+  it('render the component correctly', async () => {
+    const elem = await page.$('ods-skeleton');
+    const boundingBox = await elem?.boundingBox();
+
+    expect(boundingBox?.height).toBeGreaterThan(0);
+    expect(boundingBox?.width).toBeGreaterThan(0);
+  });
+});

packages/ods/src/components/index.ts

@@ -9,3 +9,4 @@
 export * from './spinner/src';
 export * from './text/src';
 export * from './icon/src';
+export * from './skeleton/src';

packages/ods/src/components/skeleton/documentation/migration.from.17.x.mdx

@@ -0,0 +1,27 @@
+## Attributes changes
+
+`inline` <img src="https://img.shields.io/badge/removed-FF0000" />
+`ramdomized` <img src="https://img.shields.io/badge/removed-FF0000" />
+`size` <img src="https://img.shields.io/badge/removed-FF0000" />
+
+Have been removed.
+
+You can use the css to obtain the same rendering.
+
+## Migration examples
+
+
+Size or inline skeleton:
+```html
+<ods-skeleton size="md"></ods-skeleton>
+
+<ods-skeleton inline></ods-skeleton>
+<!-- is now -->
+<ods-skeleton class="my-skeleton"></ods-skeleton>
+
+<style>
+  .my-skeleton::part(text) {
+    width: 250px;
+  }
+</style>
+```

packages/ods/src/components/skeleton/documentation/specifications/spec.md

@@ -0,0 +1,8 @@
+## Table of Contents
+
+
+
+
+
+
+

packages/ods/src/components/skeleton/documentation/specifications/specifications-skeleton.mdx

@@ -0,0 +1,4 @@
+import { Markdown } from '@storybook/addon-docs';
+import Specs from './spec.md';
+
+<Markdown>{ Specs }</Markdown>

packages/ods/src/components/skeleton/documentation/usage-guidelines/usage.mdx

@@ -0,0 +1,28 @@
+import { Canvas } from '@storybook/addon-docs';
+
+## Usage
+
+### Default
+
+<Canvas sourceState="none">
+  <ods-skeleton></ods-skeleton>
+</Canvas>
+
+```html
+<ods-skeleton></ods-skeleton>
+```
+
+### Custom CSS
+
+You can add your own style on the text element using the part `skeleton`.
+
+```html
+<ods-skeleton class="my-skeleton">
+</ods-skeleton>
+<style>
+  .my-skeleton::part(skeleton) {
+    height: 2em;
+    width: 10em;
+  }
+</style>
+```

packages/ods/src/components/skeleton/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@ovhcloud/ods-component-skeleton",
+  "version": "17.1.0",
+  "private": true,
+  "description": "ODS Skeleton component",
+  "main": "dist/index.cjs.js",
+  "collection": "dist/collection/collection-manifest.json",
+  "scripts": {
+    "clean": "rimraf .stencil coverage dist docs-api www",
+    "doc": "typedoc --pretty --plugin ../../../scripts/typedoc-plugin-decorator.js && node ../../../scripts/generate-typedoc-md.js",
+    "lint:scss": "stylelint 'src/components/**/*.scss'",
+    "lint:ts": "eslint 'src/**/*.{js,ts,tsx}'",
+    "start": "stencil build --dev --watch --serve",
+    "test:e2e": "stencil test --e2e --config stencil.config.ts",
+    "test:e2e:ci": "tsc --noEmit && stencil test --e2e --ci --config stencil.config.ts",
+    "test:spec": "stencil test --spec --config stencil.config.ts --coverage",
+    "test:spec:ci": "tsc --noEmit && stencil test --config stencil.config.ts  --spec --ci --coverage"
+  }
+}

packages/ods/src/components/skeleton/src/components/ods-skeleton/ods-skeleton.scss

@@ -0,0 +1,7 @@
+@import '../../../../../style/skeleton';
+
+.ods-skeleton {
+  &__loader {
+    @include ods-skeleton;
+  }
+}

packages/ods/src/components/skeleton/src/components/ods-skeleton/ods-skeleton.tsx

@@ -0,0 +1,17 @@
+import { Component, type FunctionalComponent, Host, h } from '@stencil/core';
+
+@Component({
+  shadow: true,
+  styleUrl: 'ods-skeleton.scss',
+  tag: 'ods-skeleton',
+})
+export class OdsSkeleton {
+  render(): FunctionalComponent {
+    return (
+      <Host class="ods-skeleton">
+        <div class="ods-skeleton__loader" part="skeleton">
+        </div>
+      </Host>
+    );
+  }
+}

packages/ods/src/components/skeleton/src/globals.ts

@@ -0,0 +1,7 @@
+/**
+ * Import here all the external ODS component that you need to run the current component
+ * when running dev server (yarn start) or e2e tests
+ *
+ * ex:
+ *   import '../../text/src';
+ */

packages/ods/src/components/skeleton/src/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html dir='ltr' lang='en'>
+<head>
+  <meta charset='utf-8' />
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0' />
+  <title>Dev ods-skeleton</title>
+
+  <script type='module' src='/build/ods-skeleton.esm.js'></script>
+  <script nomodule src='/build/ods-skeleton.js'></script>
+  <link rel="stylesheet" href="/build/ods-skeleton.css">
+</head>
+
+<body>
+  <p>Default</p>
+  <ods-skeleton>
+  </ods-skeleton>
+
+  <p>Custom Css</p>
+  <ods-skeleton class="my-skeleton">
+  </ods-skeleton>
+  <style>
+    .my-skeleton::part(skeleton) {
+      height: 2em;
+      width: 10em;
+    }
+  </style>
+</body>
+</html>

packages/ods/src/components/skeleton/src/index.ts

@@ -0,0 +1 @@
+export { OdsSkeleton } from './components/ods-skeleton/ods-skeleton';

packages/ods/src/components/skeleton/stencil.config.ts

@@ -0,0 +1,7 @@
+import { getStencilConfig } from '../../config/stencil';
+
+export const config = getStencilConfig({
+  args: process.argv.slice(2),
+  componentCorePackage: '@ovhcloud/ods-component-skeleton',
+  namespace: 'ods-skeleton',
+});

packages/ods/src/components/skeleton/tests/rendering/ods-skeleton.e2e.ts

@@ -0,0 +1,40 @@
+import type { E2EElement, E2EPage } from '@stencil/core/testing';
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('ods-skeleton rendering', () => {
+  let el: E2EElement;
+  let page: E2EPage;
+  let part: E2EElement;
+
+  async function setup(content: string, customStyle?: string): Promise<void> {
+    page = await newE2EPage();
+
+    await page.setContent(content);
+    await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
+
+    if (customStyle) {
+      await page.addStyleTag({ content: customStyle });
+    }
+
+    el = await page.find('ods-skeleton');
+    part = await page.find('ods-skeleton >>> [part="skeleton"]');
+  }
+
+  it('should render the web component', async() => {
+    await setup('<ods-skeleton></ods-skeleton>');
+    const partStyle = await part.getComputedStyle();
+    expect(el.shadowRoot).not.toBeNull();
+    expect(partStyle.getPropertyValue('height')).toBeDefined();
+    expect(partStyle.getPropertyValue('width')).toBeDefined();
+  });
+
+  describe('part', () => {
+    it('should render with custom style applied', async() => {
+      const customHeight = 200;
+
+      await setup('<ods-skeleton>some text</ods-skeleton>', `ods-skeleton::part(skeleton) { height: ${customHeight}px }`);
+      const partStyle = await part.getComputedStyle();
+      expect(parseInt(partStyle.getPropertyValue('height'), 10)).toBe(customHeight);
+    });
+  });
+});

packages/ods/src/components/skeleton/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": [
+    "src",
+    "tests"
+  ]
+}

packages/ods/src/components/skeleton/typedoc.json

@@ -0,0 +1,10 @@
+{
+  "entryPoints": ["src/index.ts"],
+  "excludeInternal": true,
+  "excludePrivate": true,
+  "excludeProtected": true,
+  "hideGenerator": true,
+  "json": "dist/docs-api/typedoc.json",
+  "out": "dist/docs-api/",
+  "tsconfig":"tsconfig.json"
+}

packages/ods/src/style/_skeleton.scss

@@ -0,0 +1,18 @@
+@mixin ods-skeleton() {
+  display: block;
+  border-radius: .5rem;
+  background-color : var(--ods-color-neutral-050);
+  background-image: linear-gradient(-90deg, var(--ods-color-neutral-050), var(--ods-color-neutral-100) 46%, var(--ods-color-neutral-100) 61%, var(--ods-color-neutral-050));
+  background-position: -200% 0;
+  background-repeat: repeat-y;
+  background-size: 50% 12.5rem;
+  height: .5rem;
+  min-height: 10px;
+  animation: skeleton linear 2s infinite;
+
+  @keyframes skeleton {
+    to {
+      background-position: 200% 0;
+    }
+  }
+}

packages/ods/src/style/index.scss

@@ -1 +1,2 @@
 @forward 'text';
+@forward 'skeleton';

packages/ods/vue/tests/_app/src/components.ts

@@ -10,6 +10,7 @@ const componentNames = [
   'spinner',
   'text',
   'icon',
+  'skeleton',
   //--generator-anchor--
 ];
 

packages/ods/vue/tests/_app/src/components/ods-skeleton.vue

@@ -0,0 +1,15 @@
+<template>
+  <OdsSkeleton />
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { OdsSkeleton } from '@ovhcloud/ods-components/vue';
+
+  export default defineComponent({
+    name: 'Skeleton',
+    components: {
+      OdsSkeleton,
+    },
+  });
+</script>

packages/ods/vue/tests/e2e/ods-skeleton.e2e.ts

@@ -0,0 +1,23 @@
+import type { Page } from 'puppeteer';
+import { goToComponentPage, setupBrowser } from '../setup';
+
+describe('ods-skeleton vue', () => {
+  const setup = setupBrowser();
+  let page: Page;
+
+  beforeAll(async () => {
+    page = setup().page;
+  });
+
+  beforeEach(async () => {
+    await goToComponentPage(page, 'ods-skeleton');
+  });
+
+  it('render the component correctly', async () => {
+    const elem = await page.$('ods-skeleton');
+    const boundingBox = await elem?.boundingBox();
+
+    expect(boundingBox?.height).toBeGreaterThan(0);
+    expect(boundingBox?.width).toBeGreaterThan(0);
+  });
+});

packages/storybook/stories/components/skeleton/1_specifications.stories.mdx

@@ -0,0 +1,20 @@
+import { Meta } from '@storybook/addon-docs';
+import SpecificationsSkeleton from '@ovhcloud/ods-components/src/components/skeleton/documentation/specifications/specifications-skeleton.mdx';
+
+<Meta title="ODS Components/Content/Skeleton/Specifications" />
+
+# Skeleton - Design Specifications
+----
+
+Skeleton TODO add small description:
+<div>
+  <a href="#"
+     target="_blank">
+    ZEROHEIGHT - SKELETON DESIGN GUIDELINES &nbsp;
+  </a>
+</div>
+
+# Skeleton - Technical Specification
+----
+
+<SpecificationsSkeleton />

packages/storybook/stories/components/skeleton/2_usage.stories.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/addon-docs';
+import Usage from '@ovhcloud/ods-components/src/components/skeleton/documentation/usage-guidelines/usage.mdx';
+
+<Meta title="ODS Components/Content/Skeleton/Usage Guidelines" />
+
+# Skeleton - Usage Guidelines
+----
+
+<Usage />

packages/storybook/stories/components/skeleton/3_migration_.from.17.x.stories.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/addon-docs';
+import Migration from '@ovhcloud/ods-components/src/components/skeleton/documentation/migration.from.17.x.mdx';
+
+<Meta title="ODS Components/Content/Skeleton/Migration From 17.x" />
+
+# Skeleton - migrate from v17 to v18
+----
+
+<Migration />