From 156dbb1ee34fc46260a606f4d59b7e015ef69f69 Mon Sep 17 00:00:00 2001
From: Alexandre Esteves <alexandre.esteves.ae@gmail.com>
Date: Tue, 19 Mar 2024 09:45:48 +0100
Subject: [PATCH] refactor(skeleton): migrate arch

chore: active pipeline
---
 .../ods/react/tests/_app/src/components.ts    |  1 +
 .../_app/src/components/ods-skeleton.tsx      | 10 +++++
 .../ods/react/tests/e2e/ods-skeleton.e2e.ts   | 23 +++++++++++
 packages/ods/src/components/index.ts          |  1 +
 .../documentation/migration.from.17.x.mdx     | 27 +++++++++++++
 .../documentation/specifications/spec.md      |  8 ++++
 .../specifications-skeleton.mdx               |  4 ++
 .../documentation/usage-guidelines/usage.mdx  | 28 +++++++++++++
 .../ods/src/components/skeleton/package.json  | 19 +++++++++
 .../components/ods-skeleton/ods-skeleton.scss |  7 ++++
 .../components/ods-skeleton/ods-skeleton.tsx  | 17 ++++++++
 .../src/components/skeleton/src/globals.ts    |  7 ++++
 .../src/components/skeleton/src/index.html    | 28 +++++++++++++
 .../ods/src/components/skeleton/src/index.ts  |  1 +
 .../src/components/skeleton/stencil.config.ts |  7 ++++
 .../tests/rendering/ods-skeleton.e2e.ts       | 40 +++++++++++++++++++
 .../ods/src/components/skeleton/tsconfig.json |  7 ++++
 .../ods/src/components/skeleton/typedoc.json  | 10 +++++
 packages/ods/src/style/_skeleton.scss         | 18 +++++++++
 packages/ods/src/style/index.scss             |  1 +
 packages/ods/vue/tests/_app/src/components.ts |  1 +
 .../_app/src/components/ods-skeleton.vue      | 15 +++++++
 .../ods/vue/tests/e2e/ods-skeleton.e2e.ts     | 23 +++++++++++
 .../skeleton/1_specifications.stories.mdx     | 20 ++++++++++
 .../components/skeleton/2_usage.stories.mdx   |  9 +++++
 .../3_migration_.from.17.x.stories.mdx        |  9 +++++
 .../components/skeleton/4_demo.stories.ts     | 28 +++++++++++++
 packages/themes/src/default/index.scss        |  2 +
 .../ods-{{>component-name}}.e2e.ts.hbs        |  7 +++-
 yarn.lock                                     |  9 +++++
 30 files changed, 386 insertions(+), 1 deletion(-)
 create mode 100644 packages/ods/react/tests/_app/src/components/ods-skeleton.tsx
 create mode 100644 packages/ods/react/tests/e2e/ods-skeleton.e2e.ts
 create mode 100644 packages/ods/src/components/skeleton/documentation/migration.from.17.x.mdx
 create mode 100644 packages/ods/src/components/skeleton/documentation/specifications/spec.md
 create mode 100644 packages/ods/src/components/skeleton/documentation/specifications/specifications-skeleton.mdx
 create mode 100644 packages/ods/src/components/skeleton/documentation/usage-guidelines/usage.mdx
 create mode 100644 packages/ods/src/components/skeleton/package.json
 create mode 100644 packages/ods/src/components/skeleton/src/components/ods-skeleton/ods-skeleton.scss
 create mode 100644 packages/ods/src/components/skeleton/src/components/ods-skeleton/ods-skeleton.tsx
 create mode 100644 packages/ods/src/components/skeleton/src/globals.ts
 create mode 100644 packages/ods/src/components/skeleton/src/index.html
 create mode 100644 packages/ods/src/components/skeleton/src/index.ts
 create mode 100644 packages/ods/src/components/skeleton/stencil.config.ts
 create mode 100644 packages/ods/src/components/skeleton/tests/rendering/ods-skeleton.e2e.ts
 create mode 100644 packages/ods/src/components/skeleton/tsconfig.json
 create mode 100644 packages/ods/src/components/skeleton/typedoc.json
 create mode 100644 packages/ods/src/style/_skeleton.scss
 create mode 100644 packages/ods/vue/tests/_app/src/components/ods-skeleton.vue
 create mode 100644 packages/ods/vue/tests/e2e/ods-skeleton.e2e.ts
 create mode 100644 packages/storybook/stories/components/skeleton/1_specifications.stories.mdx
 create mode 100644 packages/storybook/stories/components/skeleton/2_usage.stories.mdx
 create mode 100644 packages/storybook/stories/components/skeleton/3_migration_.from.17.x.stories.mdx
 create mode 100644 packages/storybook/stories/components/skeleton/4_demo.stories.ts

diff --git a/packages/ods/react/tests/_app/src/components.ts b/packages/ods/react/tests/_app/src/components.ts
index 47466ff9ec..2ffc468ff5 100644
--- a/packages/ods/react/tests/_app/src/components.ts
+++ b/packages/ods/react/tests/_app/src/components.ts
@@ -10,6 +10,7 @@ const componentNames = [
   'spinner',
   'text',
   'icon',
+  'skeleton',
   //--generator-anchor--
 ];
 
diff --git a/packages/ods/react/tests/_app/src/components/ods-skeleton.tsx b/packages/ods/react/tests/_app/src/components/ods-skeleton.tsx
new file mode 100644
index 0000000000..5dc8d7adcb
--- /dev/null
+++ b/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;
diff --git a/packages/ods/react/tests/e2e/ods-skeleton.e2e.ts b/packages/ods/react/tests/e2e/ods-skeleton.e2e.ts
new file mode 100644
index 0000000000..a3de68bc53
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/packages/ods/src/components/index.ts b/packages/ods/src/components/index.ts
index f60fe55832..8956224a54 100644
--- a/packages/ods/src/components/index.ts
+++ b/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';
diff --git a/packages/ods/src/components/skeleton/documentation/migration.from.17.x.mdx b/packages/ods/src/components/skeleton/documentation/migration.from.17.x.mdx
new file mode 100644
index 0000000000..a969edfa9d
--- /dev/null
+++ b/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>
+```
diff --git a/packages/ods/src/components/skeleton/documentation/specifications/spec.md b/packages/ods/src/components/skeleton/documentation/specifications/spec.md
new file mode 100644
index 0000000000..01f23e30f7
--- /dev/null
+++ b/packages/ods/src/components/skeleton/documentation/specifications/spec.md
@@ -0,0 +1,8 @@
+## Table of Contents
+
+
+
+
+
+
+
diff --git a/packages/ods/src/components/skeleton/documentation/specifications/specifications-skeleton.mdx b/packages/ods/src/components/skeleton/documentation/specifications/specifications-skeleton.mdx
new file mode 100644
index 0000000000..9803808307
--- /dev/null
+++ b/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>
diff --git a/packages/ods/src/components/skeleton/documentation/usage-guidelines/usage.mdx b/packages/ods/src/components/skeleton/documentation/usage-guidelines/usage.mdx
new file mode 100644
index 0000000000..7ed5da52e4
--- /dev/null
+++ b/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>
+```
diff --git a/packages/ods/src/components/skeleton/package.json b/packages/ods/src/components/skeleton/package.json
new file mode 100644
index 0000000000..db5c7dc4df
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/packages/ods/src/components/skeleton/src/components/ods-skeleton/ods-skeleton.scss b/packages/ods/src/components/skeleton/src/components/ods-skeleton/ods-skeleton.scss
new file mode 100644
index 0000000000..0695203a7c
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/packages/ods/src/components/skeleton/src/components/ods-skeleton/ods-skeleton.tsx b/packages/ods/src/components/skeleton/src/components/ods-skeleton/ods-skeleton.tsx
new file mode 100644
index 0000000000..65c58c6216
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/packages/ods/src/components/skeleton/src/globals.ts b/packages/ods/src/components/skeleton/src/globals.ts
new file mode 100644
index 0000000000..b2b834f9ae
--- /dev/null
+++ b/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';
+ */
diff --git a/packages/ods/src/components/skeleton/src/index.html b/packages/ods/src/components/skeleton/src/index.html
new file mode 100644
index 0000000000..4595b4557e
--- /dev/null
+++ b/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>
diff --git a/packages/ods/src/components/skeleton/src/index.ts b/packages/ods/src/components/skeleton/src/index.ts
new file mode 100644
index 0000000000..68b76e36ab
--- /dev/null
+++ b/packages/ods/src/components/skeleton/src/index.ts
@@ -0,0 +1 @@
+export { OdsSkeleton } from './components/ods-skeleton/ods-skeleton';
diff --git a/packages/ods/src/components/skeleton/stencil.config.ts b/packages/ods/src/components/skeleton/stencil.config.ts
new file mode 100644
index 0000000000..41e79ee236
--- /dev/null
+++ b/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',
+});
diff --git a/packages/ods/src/components/skeleton/tests/rendering/ods-skeleton.e2e.ts b/packages/ods/src/components/skeleton/tests/rendering/ods-skeleton.e2e.ts
new file mode 100644
index 0000000000..e8e7191eac
--- /dev/null
+++ b/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);
+    });
+  });
+});
diff --git a/packages/ods/src/components/skeleton/tsconfig.json b/packages/ods/src/components/skeleton/tsconfig.json
new file mode 100644
index 0000000000..e242da5e2f
--- /dev/null
+++ b/packages/ods/src/components/skeleton/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": [
+    "src",
+    "tests"
+  ]
+}
diff --git a/packages/ods/src/components/skeleton/typedoc.json b/packages/ods/src/components/skeleton/typedoc.json
new file mode 100644
index 0000000000..74d6700e67
--- /dev/null
+++ b/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"
+}
diff --git a/packages/ods/src/style/_skeleton.scss b/packages/ods/src/style/_skeleton.scss
new file mode 100644
index 0000000000..f3590bf390
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/packages/ods/src/style/index.scss b/packages/ods/src/style/index.scss
index b4cc8bfeab..107eb42c9e 100644
--- a/packages/ods/src/style/index.scss
+++ b/packages/ods/src/style/index.scss
@@ -1 +1,2 @@
 @forward 'text';
+@forward 'skeleton';
diff --git a/packages/ods/vue/tests/_app/src/components.ts b/packages/ods/vue/tests/_app/src/components.ts
index 47466ff9ec..2ffc468ff5 100644
--- a/packages/ods/vue/tests/_app/src/components.ts
+++ b/packages/ods/vue/tests/_app/src/components.ts
@@ -10,6 +10,7 @@ const componentNames = [
   'spinner',
   'text',
   'icon',
+  'skeleton',
   //--generator-anchor--
 ];
 
diff --git a/packages/ods/vue/tests/_app/src/components/ods-skeleton.vue b/packages/ods/vue/tests/_app/src/components/ods-skeleton.vue
new file mode 100644
index 0000000000..e07e32a4f0
--- /dev/null
+++ b/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>
diff --git a/packages/ods/vue/tests/e2e/ods-skeleton.e2e.ts b/packages/ods/vue/tests/e2e/ods-skeleton.e2e.ts
new file mode 100644
index 0000000000..4dc7ba2bc8
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/packages/storybook/stories/components/skeleton/1_specifications.stories.mdx b/packages/storybook/stories/components/skeleton/1_specifications.stories.mdx
new file mode 100644
index 0000000000..0042660049
--- /dev/null
+++ b/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 />
diff --git a/packages/storybook/stories/components/skeleton/2_usage.stories.mdx b/packages/storybook/stories/components/skeleton/2_usage.stories.mdx
new file mode 100644
index 0000000000..bd9defd664
--- /dev/null
+++ b/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 />
diff --git a/packages/storybook/stories/components/skeleton/3_migration_.from.17.x.stories.mdx b/packages/storybook/stories/components/skeleton/3_migration_.from.17.x.stories.mdx
new file mode 100644
index 0000000000..bcb7537547
--- /dev/null
+++ b/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 />
diff --git a/packages/storybook/stories/components/skeleton/4_demo.stories.ts b/packages/storybook/stories/components/skeleton/4_demo.stories.ts
new file mode 100644
index 0000000000..de87c2bb77
--- /dev/null
+++ b/packages/storybook/stories/components/skeleton/4_demo.stories.ts
@@ -0,0 +1,28 @@
+import { defineCustomElement } from '@ovhcloud/ods-components/dist/components/ods-skeleton';
+import { html } from 'lit-html';
+
+defineCustomElement();
+
+export default {
+  title: 'ODS Components/Content/Skeleton/Demo',
+  render: (arg) => html`
+    <ods-skeleton class="my-skeleton">
+    </ods-skeleton>
+    <style>
+      .my-skeleton::part(skeleton) {
+        ${arg.customCss}
+      }
+    </style>
+  `,
+  argTypes: {
+    customCss: {
+      control: 'text',
+      description: 'Set a custom style properties. Example: "height: 50px; width: 500px;"',
+    }
+  },
+  args: {},
+};
+
+export const Default = {
+  args: {},
+};
diff --git a/packages/themes/src/default/index.scss b/packages/themes/src/default/index.scss
index e94084f1ef..22fd3cbf4e 100644
--- a/packages/themes/src/default/index.scss
+++ b/packages/themes/src/default/index.scss
@@ -27,6 +27,8 @@ $ods-color-primary-900: #000d1f;
 /* stylelint-enable color-hex-length */
 
 :root {
+  --ods-color-neutral-050: #{$ods-color-neutral-050};
+  --ods-color-neutral-100: #{$ods-color-neutral-100};
   --ods-color-neutral-500: #{$ods-color-neutral-500};
   --ods-color-primary-000: #{$ods-color-primary-000};
   --ods-color-primary-500: #{$ods-color-primary-500};
diff --git a/scripts/component-generator/templates/component/tests/rendering/ods-{{>component-name}}.e2e.ts.hbs b/scripts/component-generator/templates/component/tests/rendering/ods-{{>component-name}}.e2e.ts.hbs
index 174ef5e329..2a5cf9eebe 100644
--- a/scripts/component-generator/templates/component/tests/rendering/ods-{{>component-name}}.e2e.ts.hbs
+++ b/scripts/component-generator/templates/component/tests/rendering/ods-{{>component-name}}.e2e.ts.hbs
@@ -5,12 +5,17 @@ describe('ods-{{> component-name }} rendering', () => {
   let el: E2EElement;
   let page: E2EPage;
 
-  async function setup(content: string): Promise<void> {
+  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-{{> component-name }}');
   }
 
diff --git a/yarn.lock b/yarn.lock
index d323112019..8743ec8f2e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3907,7 +3907,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+<<<<<<< HEAD
 >>>>>>> 43e3f1fa9 (feat(icon): implement component)
+=======
+"@ovhcloud/ods-component-skeleton@workspace:packages/ods/src/components/skeleton":
+  version: 0.0.0-use.local
+  resolution: "@ovhcloud/ods-component-skeleton@workspace:packages/ods/src/components/skeleton"
+  languageName: unknown
+  linkType: soft
+
+>>>>>>> 874715e73 (refactor(skeleton): migrate arch)
 "@ovhcloud/ods-component-spinner@workspace:packages/ods/src/components/spinner":
   version: 0.0.0-use.local
   resolution: "@ovhcloud/ods-component-spinner@workspace:packages/ods/src/components/spinner"