diff --git a/packages/storybook/.storybook/manager.tsx b/packages/storybook/.storybook/manager.tsx index a53a5c877..9d4adcf25 100644 --- a/packages/storybook/.storybook/manager.tsx +++ b/packages/storybook/.storybook/manager.tsx @@ -13,7 +13,7 @@ addons.setConfig({ sidebar: { filters: { patterns: (item) => { - return !item.tags.includes('isHidden'); + return !item.tags?.includes('isHidden'); } } }, diff --git a/packages/storybook/.storybook/preview.ts b/packages/storybook/.storybook/preview.tsx similarity index 94% rename from packages/storybook/.storybook/preview.ts rename to packages/storybook/.storybook/preview.tsx index aac6aa200..59c40e4e6 100644 --- a/packages/storybook/.storybook/preview.ts +++ b/packages/storybook/.storybook/preview.tsx @@ -1,4 +1,7 @@ -import type { Preview } from '@storybook/web-components'; +import { DocsContainer } from '@storybook/addon-docs'; +import { Unstyled } from '@storybook/blocks'; +import { type Preview } from '@storybook/web-components'; +import React from 'react'; import '@ovhcloud/ods-themes/default'; import { defineCustomElement as defineAccordion } from '@ovhcloud/ods-components/dist/components/ods-accordion'; import { defineCustomElement as defineBadge } from '@ovhcloud/ods-components/dist/components/ods-badge'; @@ -93,6 +96,15 @@ const preview: Preview = { ], parameters: { docs: { + container: ({ children, context }: any) => { + return ( + + + { children } + + + ); + }, toc: { contentsSelector: '.sbdocs-content', headingSelector: 'h2, h3', diff --git a/packages/storybook/assets/css/preview.css b/packages/storybook/assets/css/preview.css index 3fd371b30..a41cf6852 100644 --- a/packages/storybook/assets/css/preview.css +++ b/packages/storybook/assets/css/preview.css @@ -1,64 +1,27 @@ -#storybook-docs > .sbdocs-wrapper { - padding: 1.5rem 3rem 3rem 3rem; -} - -/*************************************** - * TYPOGRAPHY - ***************************************/ - -html body *:not(pre):not(code), -html body .sbdocs-content *:not(pre):not(code) { +/* Global typography */ +body { font-family: var(--ods-font-family-default); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-overflow-scrolling: touch; + line-height: 24px; + color: #2e3438; } -pre, -code { - font-family: var(--ods-font-family-code) !important; +/* Code preview typography */ +pre * { + font-family: var(--ods-font-family-code); + font-size: 13px; + line-height: 19px; + color: #fff; } -.sbdocs-content > h1, -.sbdocs-content > div:not(.sb-unstyled) > h1, -.sbdocs-content > h2, -.sbdocs-content > div:not(.sb-unstyled) > h2, -.sbdocs-content > h3, -.sbdocs-content > div:not(.sb-unstyled) > h3, -.sbdocs-content > h4, -.sbdocs-content > div:not(.sb-unstyled) > h4, -.sbdocs-content > h5, -.sbdocs-content > div:not(.sb-unstyled) > h5, -.sbdocs-content > h6, -.sbdocs-content > div:not(.sb-unstyled) > h6 { - color: var(--ods-color-primary-800); +img { + max-width: 100%; } -.sbdocs-content :where(span:not(.sb-anchor, .sb-unstyled, .sb-unstyled span)) { - font-size: 1rem !important; -} - -.sbdocs-content :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) { - font-size: 1rem !important; -} - -.documentation-overview { - display: grid; - grid-template-columns: 1.5fr 1fr; - column-gap: 2rem; -} - -.documentation-overview__table { - align-self: flex-start; - text-align: left; -} - -.documentation-do-table, -.documentation-dont-table { - width: 100%; -} - -.documentation-do-table tr { - background-color: var(--ods-color-success-050) !important; -} - -.documentation-dont-table tr { - background-color: var(--ods-color-critical-050) !important; +/* Doc pages content */ +#storybook-docs > .sbdocs-wrapper { + padding: 1.5rem 3rem 3rem 3rem; } diff --git a/packages/storybook/assets/css/storybook.css b/packages/storybook/assets/css/storybook.css index 69c4798c7..0ed6bdc1d 100644 --- a/packages/storybook/assets/css/storybook.css +++ b/packages/storybook/assets/css/storybook.css @@ -1,3 +1,6 @@ +/* Hide toolbar for non demo stories */ +/* :nth-child(4) is the "Addons" pane at the bottom of individual Stories view */ +/* see https://github.com/storybookjs/storybook/discussions/20620 */ [id='root'] > div:not(:has(> :nth-child(4))) [data-test-id='sb-preview-toolbar'] { display: none; } @@ -6,15 +9,18 @@ body { letter-spacing: 0.03rem; } -a[title*="Design System"] { +a[title="OVHcloud Design System"] { + display: flex; + justify-content: center; margin: auto; - max-width: 75%; } +/* Hide the cog button with Storybook options */ button[title="Shortcuts"] { display: none; } +/* Double class to increase the weight to overwrite storybook internal css */ .sidebar-subheading.sidebar-subheading { font-size: 1em; font-weight: bold; @@ -28,7 +34,7 @@ button[title="Shortcuts"] { grid-template-columns: 1fr max-content; } -/* select the brand image */ +/* Enforce the brand image to take the whole space */ .sidebar-header > div:first-of-type { grid-column: span 2; } diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 0275f3a96..9c3f85f80 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -19,6 +19,7 @@ "@storybook/addon-essentials": "8.0.4", "@storybook/addon-links": "8.0.4", "@storybook/blocks": "8.0.4", + "@storybook/components": "8.0.4", "@storybook/test": "8.0.4", "@storybook/web-components": "8.0.4", "@storybook/web-components-vite": "8.0.4", diff --git a/packages/storybook/src/components/banner/Banner.tsx b/packages/storybook/src/components/banner/Banner.tsx new file mode 100644 index 000000000..bca9f5d5f --- /dev/null +++ b/packages/storybook/src/components/banner/Banner.tsx @@ -0,0 +1,34 @@ +import { useOf } from '@storybook/blocks'; +import { type ModuleExports } from '@storybook/types'; +import React from 'react'; +import styles from './banner.module.css'; + +const Banner = ({ of, label, section }: { of: ModuleExports, label?: string, section?: string }) => { + let title = label; + let subtitle = section; + + if (of) { + const resolvedOf = useOf(of || 'story', ['meta']); + const metaTitle = resolvedOf.preparedMeta.title; + const metaTitles = metaTitle.split('/'); + + title = label || metaTitles[metaTitles.length - 1]; + subtitle = section || metaTitles.slice(0, -1).join(' / '); + } + + return ( +
+ + { subtitle } + + +

+ { title } +

+
+ ); +} + +export { + Banner, +}; diff --git a/packages/storybook/src/components/banner/banner.module.css b/packages/storybook/src/components/banner/banner.module.css new file mode 100644 index 000000000..bcdc29de5 --- /dev/null +++ b/packages/storybook/src/components/banner/banner.module.css @@ -0,0 +1,9 @@ +.banner { + position: relative; + margin-top: -1.5rem; + border-radius: 0 0 1rem 1rem; + background-color: var(--ods-color-primary-500); + padding: 1.25rem; + min-height: 5rem; + color: var(--ods-color-primary-000); +} diff --git a/packages/storybook/src/components/bestPractices/BestPractices.tsx b/packages/storybook/src/components/bestPractices/BestPractices.tsx new file mode 100644 index 000000000..aa3868d2f --- /dev/null +++ b/packages/storybook/src/components/bestPractices/BestPractices.tsx @@ -0,0 +1,62 @@ +import { Table } from '@storybook/components'; +import React, { type ReactNode } from 'react'; +import styles from './bestPractices.module.css'; + +type Props = { + donts: ReactNode[], + dos: ReactNode[], +} + +const BestPractices = ({ donts, dos }: Props) => { + return ( +
+ + + + + + + + + { + dos.map((item, idx) => ( + + + + )) + } + +
+ ✅ Do +
+ { item } +
+ + + + + + + + + + { + donts.map((item, idx) => ( + + + + )) + } + +
+ ❌ Don't +
+ { item } +
+
+ ); +}; + +export { + BestPractices, +}; diff --git a/packages/storybook/src/components/bestPractices/bestPractices.module.css b/packages/storybook/src/components/bestPractices/bestPractices.module.css new file mode 100644 index 000000000..c8f56307e --- /dev/null +++ b/packages/storybook/src/components/bestPractices/bestPractices.module.css @@ -0,0 +1,12 @@ +.best-practices__do-table, +.best-practices__dont-table { + width: 100%; +} + +.best-practices__do-table__cell { + background-color: var(--ods-color-success-050); +} + +.best-practices__dont-table__cell { + background-color: var(--ods-color-critical-050); +} diff --git a/packages/storybook/src/components/heading/Heading.tsx b/packages/storybook/src/components/heading/Heading.tsx new file mode 100644 index 000000000..baed72249 --- /dev/null +++ b/packages/storybook/src/components/heading/Heading.tsx @@ -0,0 +1,34 @@ +import { ODS_DIVIDER_SPACING } from '@ovhcloud/ods-components'; +import { OdsDivider } from '@ovhcloud/ods-components/react'; +import { HeaderMdx } from '@storybook/blocks'; +import React from 'react'; +import styles from './heading.module.css'; + +type Props = { + label: string, + level: number, +} + +const Heading = ({ label, level }: Props) => { + const tagID = label.toLowerCase().replace(/[^a-z0-9]/gi, '-'); + + return ( + <> + {/* @ts-ignore to fix when extra time */} + + { label } + + + { + level < 3 && + + } + + ); +}; + +export { + Heading, +}; diff --git a/packages/storybook/src/components/heading/heading.module.css b/packages/storybook/src/components/heading/heading.module.css new file mode 100644 index 000000000..a0c03cb49 --- /dev/null +++ b/packages/storybook/src/components/heading/heading.module.css @@ -0,0 +1,9 @@ +.heading-1, +.heading-2, +.heading-3, +.heading-4, +.heading-5, +.heading-6 { + margin-bottom: 0; + color: var(--ods-color-primary-800); +} diff --git a/packages/storybook/src/components/homepage/Homepage.tsx b/packages/storybook/src/components/homepage/Homepage.tsx new file mode 100644 index 000000000..4ecd1289e --- /dev/null +++ b/packages/storybook/src/components/homepage/Homepage.tsx @@ -0,0 +1,42 @@ +import { ODS_ICON_NAME, ODS_TEXT_PRESET } from '@ovhcloud/ods-components'; +import { OdsLink, OdsText } from '@ovhcloud/ods-components/react'; +import React from 'react'; +import { StorybookLink } from '../storybookLink/StorybookLink'; +import styles from './homepage.module.css'; + +const Homepage = () => { + return ( +
+
+ OVHcloud logo + + + A collection of assets, guidelines and UI components for building consistent user experiences across OVHcloud products. + + +
+ + + + + +
+
+
+ ); +}; + +export { + Homepage, +}; diff --git a/packages/storybook/src/components/homepage/homepage.module.css b/packages/storybook/src/components/homepage/homepage.module.css new file mode 100644 index 000000000..b209ae497 --- /dev/null +++ b/packages/storybook/src/components/homepage/homepage.module.css @@ -0,0 +1,24 @@ +.homepage { + position: absolute; + inset: 0; + background: url('ods_bg.png') no-repeat center center fixed; + background-size: cover; +} + +.homepage__content { + display: flex; + flex-flow: column; + row-gap: 2rem; + box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #fff, 0 0 60px #fff, 0 0 70px #fff, 0 0 80px #fff, 0 0 90px #fff, 0 0 100px #fff; + border-radius: 0 0 20em 0; + padding: 4rem; + max-width: 45rem; + background-color: #fff; +} + +.homepage__content__links { + display: flex; + flex-flow: column; + row-gap: 2rem; + font-size: 1.4rem; +} diff --git a/packages/storybook/src/components/identityCard/IdentityCard.tsx b/packages/storybook/src/components/identityCard/IdentityCard.tsx new file mode 100644 index 000000000..8e84ef998 --- /dev/null +++ b/packages/storybook/src/components/identityCard/IdentityCard.tsx @@ -0,0 +1,221 @@ +import { ODS_ICON_NAME } from '@ovhcloud/ods-components'; +import { OdsLink } from '@ovhcloud/ods-components/react'; +import { Table } from '@storybook/components'; +import React, { Fragment, type ReactNode } from 'react'; +import { ATOMIC_TYPE } from '../../constants/atomicDesign'; +import { StorybookLink } from '../storybookLink/StorybookLink'; +import styles from './identityCard.module.css'; + +// TODO replace IdentityCard by IdentityCard2 and rename + +type Props = { + aliases: string[], + atomicType: ATOMIC_TYPE, + className?: string; + figmaLink: string, + githubUrl: string, + name: string, + relatedComponents: { name: string, subtitle?: string }[], +} + +function getAtomicTypeDocUrl(type: ATOMIC_TYPE): string { + switch (type) { + case ATOMIC_TYPE.atom: + return 'https://atomicdesign.bradfrost.com/chapter-2/#atoms'; + case ATOMIC_TYPE.molecule: + return 'https://atomicdesign.bradfrost.com/chapter-2/#molecules'; + case ATOMIC_TYPE.organism: + return 'https://atomicdesign.bradfrost.com/chapter-2/#organisms'; + case ATOMIC_TYPE.quark: + return 'https://bradfrost.com/blog/post/extending-atomic-design'; + default: + return ''; + } +} + +const IdentityCard = ({ aliases, atomicType, className, figmaLink, githubUrl, name, relatedComponents }: Props) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Name + + { name } +
+ Also known as + + { aliases.length > 0 ? aliases.join(', ') : '-' } +
+ Atomic type + + +
+ Related component(s) + + { + relatedComponents.length > 0 ? + relatedComponents.map((relatedComponent, idx) => ( + + + + { idx < (relatedComponents.length - 1) && , } + + )) : '-' + } +
+ Links + + + + +
+ ); +}; + +type Prop2 = { + aliases: string[], + atomicType: ATOMIC_TYPE, + children: ReactNode, + figmaLink: string, + githubUrl: string, + name: string, + relatedComponents: { name: string, subtitle?: string }[], +} + +const IdentityCard2 = ({ aliases, atomicType, children, figmaLink, githubUrl, name, relatedComponents }: Prop2) => { + return ( +
+

+ { children } +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Name + + { name } +
+ Also known as + + { aliases.length > 0 ? aliases.join(', ') : '-' } +
+ Atomic type + + +
+ Related component(s) + + { + relatedComponents.length > 0 ? + relatedComponents.map((relatedComponent, idx) => ( + + + + { idx < (relatedComponents.length - 1) && , } + + )) : '-' + } +
+ Links + + + + +
+
+ ); +}; + +export { + IdentityCard, + IdentityCard2, +}; diff --git a/packages/storybook/src/components/identityCard/identityCard.module.css b/packages/storybook/src/components/identityCard/identityCard.module.css new file mode 100644 index 000000000..04cd10980 --- /dev/null +++ b/packages/storybook/src/components/identityCard/identityCard.module.css @@ -0,0 +1,18 @@ +.identity-card__atomic-link { + text-transform: capitalize; +} + +.identity-card__app-link { + display: block; +} + +.identity-card2 { + display: grid; + grid-template-columns: 1.5fr 1fr; + column-gap: 2rem; +} + +.identity-card2__table { + align-self: flex-start; + text-align: left; +} diff --git a/packages/storybook/src/components/storybookLink/StorybookLink.tsx b/packages/storybook/src/components/storybookLink/StorybookLink.tsx new file mode 100644 index 000000000..e9a93b3ad --- /dev/null +++ b/packages/storybook/src/components/storybookLink/StorybookLink.tsx @@ -0,0 +1,28 @@ +import { ODS_ICON_NAME } from '@ovhcloud/ods-components'; +import { OdsLink } from '@ovhcloud/ods-components/react'; +import { navigate } from '@storybook/addon-links'; +import React from 'react'; + +type Props = { + icon?: ODS_ICON_NAME, + kind?: string, + label: string, + story?: string, + title?: string, +} + +const StorybookLink = ({ icon, kind, label, story, title }: Props) => { + return ( + { + e.preventDefault(); + navigate(title ? { title } : { kind, story }); + }} /> + ); +}; + +export { + StorybookLink, +}; diff --git a/packages/storybook/src/components/tokenMigrationTable/TokenMigrationTable.tsx b/packages/storybook/src/components/tokenMigrationTable/TokenMigrationTable.tsx new file mode 100644 index 000000000..863cd31ae --- /dev/null +++ b/packages/storybook/src/components/tokenMigrationTable/TokenMigrationTable.tsx @@ -0,0 +1,72 @@ +import { ODS_BADGE_COLOR } from '@ovhcloud/ods-components'; +import { OdsBadge } from '@ovhcloud/ods-components/react'; +import { CodeOrSourceMdx, Markdown } from '@storybook/blocks'; +import { Table } from '@storybook/components'; +import React from 'react'; + +type ItemStatus = 'removed' | 'updated'; + +type Props = { + items: { + formerName: string, + replacement: string, + status: ItemStatus, + }[], +} + +function getBadgeProp(status: ItemStatus): { color: ODS_BADGE_COLOR, label: string } { + if (status === 'removed') { + return { + color: ODS_BADGE_COLOR.critical, + label: 'Removed', + } + } + + return { + color: ODS_BADGE_COLOR.information, + label: 'Updated', + } +} + +const TokenMigrationTable = ({ items }: Props) => { + return ( + + + + + + + + + + + { + items.map((item, idx) => ( + + + + + + + + )) + } + +
Former token namesStatusNew token name
+ + { item.formerName } + + + + + + {`${item.replacement}`} + +
+ ); +}; + +export { + TokenMigrationTable, +}; diff --git a/packages/storybook/src/constants/atomicDesign.ts b/packages/storybook/src/constants/atomicDesign.ts new file mode 100644 index 000000000..01ad81187 --- /dev/null +++ b/packages/storybook/src/constants/atomicDesign.ts @@ -0,0 +1,10 @@ +enum ATOMIC_TYPE { + atom = 'atom', + molecule = 'molecule', + organism = 'organism', + quark = 'Quark', +} + +export { + ATOMIC_TYPE, +}; diff --git a/packages/storybook/src/constants/controls.ts b/packages/storybook/src/constants/controls.ts new file mode 100644 index 000000000..bb69cefb7 --- /dev/null +++ b/packages/storybook/src/constants/controls.ts @@ -0,0 +1,10 @@ +enum CONTROL_CATEGORY { + accessibility = 'Accessibility', + design = 'Design', + general = 'General', + slot = 'Slot', +} + +export { + CONTROL_CATEGORY, +}; diff --git a/packages/storybook/stories/control.ts b/packages/storybook/src/helpers/controls.ts similarity index 81% rename from packages/storybook/stories/control.ts rename to packages/storybook/src/helpers/controls.ts index 9ca434b23..f37d42c52 100644 --- a/packages/storybook/stories/control.ts +++ b/packages/storybook/src/helpers/controls.ts @@ -1,9 +1,4 @@ -enum CONTROL_CATEGORY { - accessibility = 'Accessibility', - design = 'Design', - general = 'General', - slot = 'Slot', -} +import { CONTROL_CATEGORY } from '../constants/controls'; const orderedControlCategories = [ CONTROL_CATEGORY.design, @@ -29,6 +24,5 @@ function orderControls(control: Record) { } export { - CONTROL_CATEGORY, orderControls, }; diff --git a/packages/storybook/stories/hook.ts b/packages/storybook/src/hooks/withResetRoot.ts similarity index 95% rename from packages/storybook/stories/hook.ts rename to packages/storybook/src/hooks/withResetRoot.ts index de375462d..07f2139b9 100644 --- a/packages/storybook/stories/hook.ts +++ b/packages/storybook/src/hooks/withResetRoot.ts @@ -9,7 +9,7 @@ const withResetRoot = (storyFn: any) => { resetRoot(); return storyFn(); }; + export { - resetRoot, withResetRoot, }; diff --git a/packages/storybook/stories/banner.tsx b/packages/storybook/stories/banner.tsx deleted file mode 100644 index d16c8c97c..000000000 --- a/packages/storybook/stories/banner.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { useOf } from '@storybook/blocks'; -import { type ModuleExports } from '@storybook/types'; -import React from 'react'; - -export const Banner = ({ of, label, section }: { of: ModuleExports, label?: string, section?: string }) => { - let title = label; - let subtitle = section; - - if (of) { - const resolvedOf = useOf(of || 'story', ['meta']); - const metaTitle = resolvedOf.preparedMeta.title; - const metaTitles = metaTitle.split('/'); - - title = label || metaTitles[metaTitles.length - 1]; - subtitle = section || metaTitles.slice(0, -1).join(' / '); - } - - return ( -
- {subtitle} -

{title}

-
- ); -} diff --git a/packages/storybook/stories/components/accordion/accordion.stories.ts b/packages/storybook/stories/components/accordion/accordion.stories.ts index f6aee22b5..24e96c4a3 100644 --- a/packages/storybook/stories/components/accordion/accordion.stories.ts +++ b/packages/storybook/stories/components/accordion/accordion.stories.ts @@ -1,7 +1,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Accordion', diff --git a/packages/storybook/stories/components/accordion/documentation.mdx b/packages/storybook/stories/components/accordion/documentation.mdx index 166c40663..27a60ca18 100644 --- a/packages/storybook/stories/components/accordion/documentation.mdx +++ b/packages/storybook/stories/components/accordion/documentation.mdx @@ -1,7 +1,11 @@ -import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Canvas, Meta } from '@storybook/blocks'; import * as AccordionStories from './accordion.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { Banner } from '../../../src/components/banner/Banner'; +import { BestPractices } from '../../../src/components/bestPractices/BestPractices'; +import { Heading } from '../../../src/components/heading/Heading'; +import { IdentityCard2 } from '../../../src/components/identityCard/IdentityCard'; +import { StorybookLink } from '../../../src/components/storybookLink/StorybookLink'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; @@ -11,38 +15,34 @@ _An **Accordion** is a vertical header that reveals or hides an associated secti -## Overview + -
-
- The **Accordion** component **delivers large amounts of content in a small space through progressive disclosure**. + + The **Accordion** component **delivers large amounts of content in a small space through progressive disclosure**. - The header part gives the user a high-level overview of the content allowing them to decide which sections to - read. + The header part gives the user a high-level overview of the content allowing them to decide which sections to + read. - **Accordions** can make **information processing and discovering more effective**. However, it does hide content - from the users, and it’s important to account for a user not noticing or reading all the included content. If a user - is likely to read all the content then then the usage of an **Accordion** would not be recommended as it adds an extra - interaction to access the content; instead use a full scrolling page with normal headers. -
+ **Accordions** can make **information processing and discovering more effective**. However, it does hide content + from the users, and it’s important to account for a user not noticing or reading all the included content. If a user + is likely to read all the content then then the usage of an **Accordion** would not be recommended as it adds an extra + interaction to access the content; instead use a full scrolling page with normal headers. + - -
- -## Anatomy + ![Component anatomy](components/accordion/anatomy.png "Component anatomy") - 1. **Header**: contains the section title and acts as a control for revealing the panel or not (always visible). - 2. **Icon**: A "down/up" chevron [**Icon**](?path=/docs/ods-components-icon--documentation) is used to indicate the “expand/collapse” action, though the entire header area is clickable (always visible). - 3. **Panel**: the section of content associated with an **Accordion** header. -## Usage +1. **Header**: contains the section title and acts as a control for revealing the panel or not (always visible). +2. **Icon**: A "down/up" chevron is used to indicate the “expand/collapse” action, though the entire header area is clickable (always visible). +3. **Panel**: the section of content associated with an **Accordion** header. + + Use any number of elements to visually display them as a group. Several collapsible panels can co-exist in a same interface. @@ -52,34 +52,27 @@ Use this component for : * Shortening pages and reducing scrolling when content is not crucial to read in full * When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel -### Dos & Don'ts - - - { ` -| ✅ Do | -|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| - Header [**Text**](?path=/docs/ods-components-text--documentation) describes the content contained in the panel. Use a clear and concise [**Text**](?path=/docs/ods-components-text--documentation), and be explicit about the action that will happen if the option is selected | -| - Use sentence-style capitalization in header [**Text**](?path=/docs/ods-components-text--documentation) (only the first word in a phrase and any proper nouns capitalized), no more than three words, and no punctuation | -| - Use Accordion instead of [**Tab**](?path=/docs/ods-components-tabs--documentation) if users need to see multiple sections at once | -` } - - - - { ` -| ❌ Don't | -|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| - Expose a lot of content in the Header section (i.e. more than 2 lines) | -| - Use **Accordions** with essential content for users | -| - Use [**Icon**](?path=/docs/ods-components-icon--documentation) in header text | -| - Expose a lot of content in the Panel section (i.e. more than the viewport height) | -| - Empty the Panel section, as the **Accordion** become useless | -| - Disable **Accordions**, as it can be confusing for users | -| - Trigger expanding/collapsing on hover action | -| - Avoid nested **Accordions**, like collapsible content within collapsible content | -` } - - -## Placement + + +- Use in header text, + '- Expose a lot of content in the Panel section (i.e. more than the viewport height)', + '- Empty the Panel section, as the Accordion become useless', + '- Disable Accordions, as it can be confusing for users', + '- Trigger expanding/collapsing on hover action', + '- Avoid nested Accordions, like collapsible content within collapsible content' + ]} + dos={[ + - Header describes the content contained in the panel. Use a clear and concise , and be explicit about the action that will happen if the option is selected, + - Use sentence-style capitalization in header (only the first word in a phrase and any proper nouns capitalized), no more than three words, and no punctuation, + - Use Accordion instead of if users need to see multiple sections at once, + ]} +/> + + The **Accordion** component is adjusted to the parent's width. It can vary based on the content, layout, and page design. @@ -87,7 +80,7 @@ By default, the **Accordion** content is left-aligned in its container, as the h It can be placed within main page content or inside a side container (as panels, or tiles). -## Behavior + **Accordion** has two states : **collapsed** and **expanded**. @@ -106,14 +99,14 @@ The **Icon** helps the user to know if the **Accordion** is collapsed or expande Same behavior and styling applies to both Desktop and Mobile modes. -## Variation + N/A -## Accessibility + -The header part can be navigated through tabulation, with the same behavior as a [**Button**](?path=/docs/ods-components-button--documentation). +The header part can be navigated through tabulation, with the same behavior as a . -When focusing the header part, pressing `Enter` or `Space` keys will trigger its expansion or its collapsion. +When focusing the header part, pressing `Enter` or `Space` keys will trigger its expansion or its collapse. For screen readers, the user can know easily that the **Accordion** is opened or not, and therefore the inner content is readable or not. diff --git a/packages/storybook/stories/components/accordion/migration.from.17.x.mdx b/packages/storybook/stories/components/accordion/migration.from.17.x.mdx index 21605efa2..ff290086c 100644 --- a/packages/storybook/stories/components/accordion/migration.from.17.x.mdx +++ b/packages/storybook/stories/components/accordion/migration.from.17.x.mdx @@ -1,44 +1,45 @@ +import { OdsBadge } from '@ovhcloud/ods-components/react'; import { Meta } from '@storybook/blocks'; import * as AccordionStories from './accordion.stories'; +import { Heading } from '../../../src/components/heading/Heading'; -# Accordion - migrate from v17 to v18 ----- + -## Attributes changes + -`color` +`color` Has been removed. This design feature has been removed in order to match the new styling of the component. -`contrasted` +`contrasted` Has been removed. This design feature has been removed in order to match the new styling of the component. -`disabled ` +`disabled ` Has been updated. You can use the new `isDisabled` attribute to obtain the same behavior. -`opened ` +`opened ` Has been updated. You can use the new `isOpen` attribute to obtain the same behavior. -`size ` +`size ` Has been removed. This design feature has been removed in order to match the new styling of the component. -## Migration examples + Without Color: ```html diff --git a/packages/storybook/stories/components/accordion/technical-information.mdx b/packages/storybook/stories/components/accordion/technical-information.mdx index ffbd4356c..4ef046985 100644 --- a/packages/storybook/stories/components/accordion/technical-information.mdx +++ b/packages/storybook/stories/components/accordion/technical-information.mdx @@ -1,34 +1,39 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsAccordion from '@ovhcloud/ods-components/src/components/accordion/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; +import { Heading } from '../../../src/components/heading/Heading'; import * as AccordionStories from './accordion.stories'; - + -## Overview + - + + +[//]: # (TODO generate spec.json instead of spec.md and use a React component here instead) { SpecificationsAccordion } -## Style customization + You can add your own style on the accordion element using the parts `accordion`, `summary` and `content`. Custom CSS: - + + + + + -## Examples + -### Default + - + -### Open - + -### Disabled - + diff --git a/packages/storybook/stories/components/badge/badge.stories.ts b/packages/storybook/stories/components/badge/badge.stories.ts index bf32d3919..5f00fc0d5 100644 --- a/packages/storybook/stories/components/badge/badge.stories.ts +++ b/packages/storybook/stories/components/badge/badge.stories.ts @@ -1,7 +1,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; -import { ODS_ICON_NAMES, ODS_BADGE_COLOR, ODS_BADGE_COLORS, ODS_BADGE_SHAPE, ODS_BADGE_SHAPES, ODS_BADGE_SIZE, ODS_BADGE_SIZES } from '@ovhcloud/ods-components'; +import { ODS_ICON_NAMES, ODS_BADGE_COLOR, ODS_BADGE_COLORS, ODS_BADGE_SIZE, ODS_BADGE_SIZES } from '@ovhcloud/ods-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Badge', diff --git a/packages/storybook/stories/components/badge/documentation.mdx b/packages/storybook/stories/components/badge/documentation.mdx index 75a38c164..9c8df57b4 100644 --- a/packages/storybook/stories/components/badge/documentation.mdx +++ b/packages/storybook/stories/components/badge/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as BadgeStories from './badge.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/badge/technical-information.mdx b/packages/storybook/stories/components/badge/technical-information.mdx index c37fed8ce..d82e4665a 100644 --- a/packages/storybook/stories/components/badge/technical-information.mdx +++ b/packages/storybook/stories/components/badge/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsBadge from '@ovhcloud/ods-components/src/components/badge/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as BadgeStories from './badge.stories'; diff --git a/packages/storybook/stories/components/breadcrumb/breadcrumb.stories.ts b/packages/storybook/stories/components/breadcrumb/breadcrumb.stories.ts index 681511d89..2dc34b2a0 100644 --- a/packages/storybook/stories/components/breadcrumb/breadcrumb.stories.ts +++ b/packages/storybook/stories/components/breadcrumb/breadcrumb.stories.ts @@ -1,7 +1,8 @@ import { type Meta, type StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Breadcrumb', diff --git a/packages/storybook/stories/components/breadcrumb/documentation.mdx b/packages/storybook/stories/components/breadcrumb/documentation.mdx index f3300f603..76ea185aa 100644 --- a/packages/storybook/stories/components/breadcrumb/documentation.mdx +++ b/packages/storybook/stories/components/breadcrumb/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as BreadcrumbStories from './breadcrumb.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/breadcrumb/technical-information.mdx b/packages/storybook/stories/components/breadcrumb/technical-information.mdx index 7bd5dad73..16eccf1f9 100644 --- a/packages/storybook/stories/components/breadcrumb/technical-information.mdx +++ b/packages/storybook/stories/components/breadcrumb/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsBreadcrumb from '@ovhcloud/ods-components/src/components/breadcrumb/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as BreadcrumbStories from './breadcrumb.stories'; diff --git a/packages/storybook/stories/components/button/button.stories.ts b/packages/storybook/stories/components/button/button.stories.ts index 11866b29a..1b51292bc 100644 --- a/packages/storybook/stories/components/button/button.stories.ts +++ b/packages/storybook/stories/components/button/button.stories.ts @@ -10,7 +10,8 @@ import { ODS_ICON_NAMES, } from '@ovhcloud/ods-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Button', diff --git a/packages/storybook/stories/components/button/documentation.mdx b/packages/storybook/stories/components/button/documentation.mdx index 0bc90b50c..79e564ea3 100644 --- a/packages/storybook/stories/components/button/documentation.mdx +++ b/packages/storybook/stories/components/button/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as ButtonStories from './button.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/button/technical-information.mdx b/packages/storybook/stories/components/button/technical-information.mdx index 382169a9a..e67f1f315 100644 --- a/packages/storybook/stories/components/button/technical-information.mdx +++ b/packages/storybook/stories/components/button/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; import SpecificationsButton from '@ovhcloud/ods-components/src/components/button/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as ButtonStories from './button.stories'; diff --git a/packages/storybook/stories/components/card/card.stories.ts b/packages/storybook/stories/components/card/card.stories.ts index f2932c191..e57cdeb47 100644 --- a/packages/storybook/stories/components/card/card.stories.ts +++ b/packages/storybook/stories/components/card/card.stories.ts @@ -2,7 +2,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { ODS_CARD_COLOR, ODS_CARD_COLORS } from '@ovhcloud/ods-components'; import { html } from 'lit-html'; import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Card', diff --git a/packages/storybook/stories/components/card/documentation.mdx b/packages/storybook/stories/components/card/documentation.mdx index 972dd9dce..540d73e78 100644 --- a/packages/storybook/stories/components/card/documentation.mdx +++ b/packages/storybook/stories/components/card/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as CardStories from './card.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/card/technical-information.mdx b/packages/storybook/stories/components/card/technical-information.mdx index cb542b313..5e55bfae7 100644 --- a/packages/storybook/stories/components/card/technical-information.mdx +++ b/packages/storybook/stories/components/card/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsCard from '@ovhcloud/ods-components/src/components/card/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as CardStories from './card.stories'; diff --git a/packages/storybook/stories/components/checkbox/checkbox.stories.ts b/packages/storybook/stories/components/checkbox/checkbox.stories.ts index 27478a089..dbdb382fe 100644 --- a/packages/storybook/stories/components/checkbox/checkbox.stories.ts +++ b/packages/storybook/stories/components/checkbox/checkbox.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Form elements/Checkbox', diff --git a/packages/storybook/stories/components/checkbox/documentation.mdx b/packages/storybook/stories/components/checkbox/documentation.mdx index 382a2184c..46662178d 100644 --- a/packages/storybook/stories/components/checkbox/documentation.mdx +++ b/packages/storybook/stories/components/checkbox/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as CheckboxStories from './checkbox.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/checkbox/technical-information.mdx b/packages/storybook/stories/components/checkbox/technical-information.mdx index ccfd0ec01..760ef8520 100644 --- a/packages/storybook/stories/components/checkbox/technical-information.mdx +++ b/packages/storybook/stories/components/checkbox/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsCheckbox from '@ovhcloud/ods-components/src/components/checkbox/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as CheckboxStories from './checkbox.stories'; import { Checkbox as FormFieldCheckbox } from '../form-field/form-field.stories'; diff --git a/packages/storybook/stories/components/clipboard/clipboard.stories.ts b/packages/storybook/stories/components/clipboard/clipboard.stories.ts index 0b8b03802..96ea326fc 100644 --- a/packages/storybook/stories/components/clipboard/clipboard.stories.ts +++ b/packages/storybook/stories/components/clipboard/clipboard.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Clipboard', diff --git a/packages/storybook/stories/components/clipboard/documentation.mdx b/packages/storybook/stories/components/clipboard/documentation.mdx index 5349c58df..f1b438f72 100644 --- a/packages/storybook/stories/components/clipboard/documentation.mdx +++ b/packages/storybook/stories/components/clipboard/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as ClipboardStories from './clipboard.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/clipboard/technical-information.mdx b/packages/storybook/stories/components/clipboard/technical-information.mdx index 7db1a8a49..2d430ad78 100644 --- a/packages/storybook/stories/components/clipboard/technical-information.mdx +++ b/packages/storybook/stories/components/clipboard/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsClipboard from '@ovhcloud/ods-components/src/components/clipboard/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as ClipboardStories from './clipboard.stories'; diff --git a/packages/storybook/stories/components/code/code.stories.ts b/packages/storybook/stories/components/code/code.stories.ts index 10afd62d5..ae4fb2f9a 100644 --- a/packages/storybook/stories/components/code/code.stories.ts +++ b/packages/storybook/stories/components/code/code.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Code', diff --git a/packages/storybook/stories/components/code/documentation.mdx b/packages/storybook/stories/components/code/documentation.mdx index ffbab8124..b29dd6882 100644 --- a/packages/storybook/stories/components/code/documentation.mdx +++ b/packages/storybook/stories/components/code/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as CodeStories from './code.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/code/technical-information.mdx b/packages/storybook/stories/components/code/technical-information.mdx index f23f440fb..2224c53b4 100644 --- a/packages/storybook/stories/components/code/technical-information.mdx +++ b/packages/storybook/stories/components/code/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; import SpecificationsCode from '@ovhcloud/ods-components/src/components/code/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as CodeStories from './code.stories'; diff --git a/packages/storybook/stories/components/datepicker/datepicker.stories.ts b/packages/storybook/stories/components/datepicker/datepicker.stories.ts index 5cd9e018d..09fb00304 100644 --- a/packages/storybook/stories/components/datepicker/datepicker.stories.ts +++ b/packages/storybook/stories/components/datepicker/datepicker.stories.ts @@ -1,7 +1,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { ODS_DATEPICKER_LOCALE, ODS_DATEPICKER_LOCALES } from '@ovhcloud/ods-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Form elements/Datepicker', diff --git a/packages/storybook/stories/components/datepicker/documentation.mdx b/packages/storybook/stories/components/datepicker/documentation.mdx index a89aba3d5..af6026606 100644 --- a/packages/storybook/stories/components/datepicker/documentation.mdx +++ b/packages/storybook/stories/components/datepicker/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as DatepickerStories from './datepicker.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/datepicker/technical-information.mdx b/packages/storybook/stories/components/datepicker/technical-information.mdx index 134db34a9..431d6e606 100644 --- a/packages/storybook/stories/components/datepicker/technical-information.mdx +++ b/packages/storybook/stories/components/datepicker/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsDatepicker from '@ovhcloud/ods-components/src/components/datepicker/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as DatepickerStories from './datepicker.stories'; import { Datepicker as FormFieldDatepicker } from '../form-field/form-field.stories'; diff --git a/packages/storybook/stories/components/divider/divider.stories.ts b/packages/storybook/stories/components/divider/divider.stories.ts index af0bfa987..76c86bf40 100644 --- a/packages/storybook/stories/components/divider/divider.stories.ts +++ b/packages/storybook/stories/components/divider/divider.stories.ts @@ -1,8 +1,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { ODS_DIVIDER_COLOR, ODS_DIVIDER_COLORS, ODS_DIVIDER_SPACING, ODS_DIVIDER_SPACINGS } from '@ovhcloud/ods-components'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; import { html } from 'lit-html'; - +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Divider', diff --git a/packages/storybook/stories/components/divider/documentation.mdx b/packages/storybook/stories/components/divider/documentation.mdx index 651b8a96f..57be84ce4 100644 --- a/packages/storybook/stories/components/divider/documentation.mdx +++ b/packages/storybook/stories/components/divider/documentation.mdx @@ -1,7 +1,8 @@ import { Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as DividerStories from './divider.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/divider/technical-information.mdx b/packages/storybook/stories/components/divider/technical-information.mdx index 586fcecff..b5b724835 100644 --- a/packages/storybook/stories/components/divider/technical-information.mdx +++ b/packages/storybook/stories/components/divider/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; import SpecificationsDivider from '@ovhcloud/ods-components/src/components/divider/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as DividerStories from './divider.stories'; diff --git a/packages/storybook/stories/components/file-upload/documentation.mdx b/packages/storybook/stories/components/file-upload/documentation.mdx index 4341adaf4..2fde32dad 100644 --- a/packages/storybook/stories/components/file-upload/documentation.mdx +++ b/packages/storybook/stories/components/file-upload/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as FileUploadStories from './file-upload.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/file-upload/file-upload.stories.ts b/packages/storybook/stories/components/file-upload/file-upload.stories.ts index 2ba70aac8..f8f48443c 100644 --- a/packages/storybook/stories/components/file-upload/file-upload.stories.ts +++ b/packages/storybook/stories/components/file-upload/file-upload.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Form elements/File Upload', diff --git a/packages/storybook/stories/components/file-upload/technical-information.mdx b/packages/storybook/stories/components/file-upload/technical-information.mdx index f9c6843c8..396a7155b 100644 --- a/packages/storybook/stories/components/file-upload/technical-information.mdx +++ b/packages/storybook/stories/components/file-upload/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsFileUpload from '@ovhcloud/ods-components/src/components/file-upload/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as FileUploadStories from './file-upload.stories'; diff --git a/packages/storybook/stories/components/form-field/documentation.mdx b/packages/storybook/stories/components/form-field/documentation.mdx index c3f6d4f9a..4abfe1df9 100644 --- a/packages/storybook/stories/components/form-field/documentation.mdx +++ b/packages/storybook/stories/components/form-field/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as FormFieldStories from './form-field.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/form-field/form-field.stories.ts b/packages/storybook/stories/components/form-field/form-field.stories.ts index 7dc637fa1..48034e1c2 100644 --- a/packages/storybook/stories/components/form-field/form-field.stories.ts +++ b/packages/storybook/stories/components/form-field/form-field.stories.ts @@ -1,7 +1,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Form elements/Form Field', diff --git a/packages/storybook/stories/components/form-field/technical-information.mdx b/packages/storybook/stories/components/form-field/technical-information.mdx index 217a15e42..bd90fb95d 100644 --- a/packages/storybook/stories/components/form-field/technical-information.mdx +++ b/packages/storybook/stories/components/form-field/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsFormField from '@ovhcloud/ods-components/src/components/form-field/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as FormFieldStories from './form-field.stories'; diff --git a/packages/storybook/stories/components/icon/documentation.mdx b/packages/storybook/stories/components/icon/documentation.mdx index 535eba86a..dd7cb31e9 100644 --- a/packages/storybook/stories/components/icon/documentation.mdx +++ b/packages/storybook/stories/components/icon/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as IconStories from './icon.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/icon/icon.stories.ts b/packages/storybook/stories/components/icon/icon.stories.ts index 0d47a3865..780867808 100644 --- a/packages/storybook/stories/components/icon/icon.stories.ts +++ b/packages/storybook/stories/components/icon/icon.stories.ts @@ -1,7 +1,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { ODS_ICON_NAME, ODS_ICON_NAMES } from '@ovhcloud/ods-components'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; import { html } from 'lit-html'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; type IconNameKey = keyof typeof ODS_ICON_NAME; diff --git a/packages/storybook/stories/components/icon/technical-information.mdx b/packages/storybook/stories/components/icon/technical-information.mdx index 0816d8f39..804b79fa0 100644 --- a/packages/storybook/stories/components/icon/technical-information.mdx +++ b/packages/storybook/stories/components/icon/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsIcon from '@ovhcloud/ods-components/src/components/icon/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as IconStories from './icon.stories'; diff --git a/packages/storybook/stories/components/input/documentation.mdx b/packages/storybook/stories/components/input/documentation.mdx index f4ae61dd8..ab407942c 100644 --- a/packages/storybook/stories/components/input/documentation.mdx +++ b/packages/storybook/stories/components/input/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as InputStories from './input.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/input/input.stories.ts b/packages/storybook/stories/components/input/input.stories.ts index eae323371..9f57891d7 100644 --- a/packages/storybook/stories/components/input/input.stories.ts +++ b/packages/storybook/stories/components/input/input.stories.ts @@ -2,7 +2,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { ODS_INPUT_TYPE, ODS_INPUT_TYPES } from '@ovhcloud/ods-components'; import { ifDefined } from 'lit/directives/if-defined.js'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Form elements/Input', diff --git a/packages/storybook/stories/components/input/technical-information.mdx b/packages/storybook/stories/components/input/technical-information.mdx index 62fffd082..841156b48 100644 --- a/packages/storybook/stories/components/input/technical-information.mdx +++ b/packages/storybook/stories/components/input/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsInput from '@ovhcloud/ods-components/src/components/input/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as InputStories from './input.stories'; import { Input as FormFieldInput } from '../form-field/form-field.stories'; diff --git a/packages/storybook/stories/components/link/documentation.mdx b/packages/storybook/stories/components/link/documentation.mdx index 6f547a871..3004af2d5 100644 --- a/packages/storybook/stories/components/link/documentation.mdx +++ b/packages/storybook/stories/components/link/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as LinkStories from './link.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/link/link.stories.ts b/packages/storybook/stories/components/link/link.stories.ts index 5d75d4e9a..ce3e9cbe7 100644 --- a/packages/storybook/stories/components/link/link.stories.ts +++ b/packages/storybook/stories/components/link/link.stories.ts @@ -1,7 +1,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; import { ODS_ICON_NAMES, ODS_LINK_COLOR, ODS_LINK_COLORS } from '@ovhcloud/ods-components'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Link', diff --git a/packages/storybook/stories/components/link/technical-information.mdx b/packages/storybook/stories/components/link/technical-information.mdx index c72cb6798..60f6657da 100644 --- a/packages/storybook/stories/components/link/technical-information.mdx +++ b/packages/storybook/stories/components/link/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsLink from '@ovhcloud/ods-components/src/components/link/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as LinkStories from './link.stories'; diff --git a/packages/storybook/stories/components/medium/documentation.mdx b/packages/storybook/stories/components/medium/documentation.mdx index 4ed842605..b43c7a554 100644 --- a/packages/storybook/stories/components/medium/documentation.mdx +++ b/packages/storybook/stories/components/medium/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as MediumStories from './medium.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/medium/medium.stories.ts b/packages/storybook/stories/components/medium/medium.stories.ts index 0b1dd11ed..92db3ba0a 100644 --- a/packages/storybook/stories/components/medium/medium.stories.ts +++ b/packages/storybook/stories/components/medium/medium.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Medium', diff --git a/packages/storybook/stories/components/medium/technical-information.mdx b/packages/storybook/stories/components/medium/technical-information.mdx index 41b52e7cd..c69d38915 100644 --- a/packages/storybook/stories/components/medium/technical-information.mdx +++ b/packages/storybook/stories/components/medium/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsMedium from '@ovhcloud/ods-components/src/components/medium/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as MediumStories from './medium.stories'; diff --git a/packages/storybook/stories/components/message/documentation.mdx b/packages/storybook/stories/components/message/documentation.mdx index 784512145..13bb1844b 100644 --- a/packages/storybook/stories/components/message/documentation.mdx +++ b/packages/storybook/stories/components/message/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as MessageStories from './message.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/message/message.stories.ts b/packages/storybook/stories/components/message/message.stories.ts index e94baaa41..d10d907ce 100644 --- a/packages/storybook/stories/components/message/message.stories.ts +++ b/packages/storybook/stories/components/message/message.stories.ts @@ -7,7 +7,8 @@ import { } from '@ovhcloud/ods-components'; import { html } from 'lit-html'; import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Message', diff --git a/packages/storybook/stories/components/message/technical-information.mdx b/packages/storybook/stories/components/message/technical-information.mdx index 34b12fad7..495df9226 100644 --- a/packages/storybook/stories/components/message/technical-information.mdx +++ b/packages/storybook/stories/components/message/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsMessage from '@ovhcloud/ods-components/src/components/message/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as MessageStories from './message.stories'; diff --git a/packages/storybook/stories/components/modal/documentation.mdx b/packages/storybook/stories/components/modal/documentation.mdx index d38111d0e..26697ef62 100644 --- a/packages/storybook/stories/components/modal/documentation.mdx +++ b/packages/storybook/stories/components/modal/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as ModalStories from './modal.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/modal/modal.stories.ts b/packages/storybook/stories/components/modal/modal.stories.ts index 1d0ee0410..5f3e12eb5 100644 --- a/packages/storybook/stories/components/modal/modal.stories.ts +++ b/packages/storybook/stories/components/modal/modal.stories.ts @@ -3,8 +3,9 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { ODS_MODAL_COLOR, ODS_MODAL_COLORS } from '@ovhcloud/ods-components'; import { html } from 'lit-html'; import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; -import { withResetRoot } from '../../hook'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; +import { withResetRoot } from '../../../src/hooks/withResetRoot'; const meta: Meta = { title: 'ODS Components/Modal', diff --git a/packages/storybook/stories/components/modal/technical-information.mdx b/packages/storybook/stories/components/modal/technical-information.mdx index 547c2513f..47527f317 100644 --- a/packages/storybook/stories/components/modal/technical-information.mdx +++ b/packages/storybook/stories/components/modal/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsModal from '@ovhcloud/ods-components/src/components/modal/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as ModalStories from './modal.stories'; diff --git a/packages/storybook/stories/components/pagination/documentation.mdx b/packages/storybook/stories/components/pagination/documentation.mdx index 626e9defd..25abb40a7 100644 --- a/packages/storybook/stories/components/pagination/documentation.mdx +++ b/packages/storybook/stories/components/pagination/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as PaginationStories from './pagination.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/pagination/pagination.stories.ts b/packages/storybook/stories/components/pagination/pagination.stories.ts index 327610375..7f06cf0cb 100644 --- a/packages/storybook/stories/components/pagination/pagination.stories.ts +++ b/packages/storybook/stories/components/pagination/pagination.stories.ts @@ -1,7 +1,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; -import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; import { ODS_PAGINATION_PER_PAGE, ODS_PAGINATION_PER_PAGE_OPTIONS } from '@ovhcloud/ods-components'; +import { html } from 'lit-html'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Pagination', diff --git a/packages/storybook/stories/components/pagination/technical-information.mdx b/packages/storybook/stories/components/pagination/technical-information.mdx index 4cd187b73..d85ecdb5f 100644 --- a/packages/storybook/stories/components/pagination/technical-information.mdx +++ b/packages/storybook/stories/components/pagination/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsPagination from '@ovhcloud/ods-components/src/components/pagination/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as PaginationStories from './pagination.stories'; diff --git a/packages/storybook/stories/components/password/documentation.mdx b/packages/storybook/stories/components/password/documentation.mdx index 48de936da..64e7ad127 100644 --- a/packages/storybook/stories/components/password/documentation.mdx +++ b/packages/storybook/stories/components/password/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as PasswordStories from './password.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/password/password.stories.ts b/packages/storybook/stories/components/password/password.stories.ts index a5eac61a4..d6a657c42 100644 --- a/packages/storybook/stories/components/password/password.stories.ts +++ b/packages/storybook/stories/components/password/password.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Form elements/Password', diff --git a/packages/storybook/stories/components/password/technical-information.mdx b/packages/storybook/stories/components/password/technical-information.mdx index 2cda3780c..aa52a0d97 100644 --- a/packages/storybook/stories/components/password/technical-information.mdx +++ b/packages/storybook/stories/components/password/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsPassword from '@ovhcloud/ods-components/src/components/password/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as PasswordStories from './password.stories'; import { Password as FormFieldPassword } from '../form-field/form-field.stories'; diff --git a/packages/storybook/stories/components/phone-number/documentation.mdx b/packages/storybook/stories/components/phone-number/documentation.mdx index 1434813c9..10dabdd0f 100644 --- a/packages/storybook/stories/components/phone-number/documentation.mdx +++ b/packages/storybook/stories/components/phone-number/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as PhoneNumberStories from './phone-number.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/phone-number/phone-number.stories.ts b/packages/storybook/stories/components/phone-number/phone-number.stories.ts index ce05b2418..7d5a36449 100644 --- a/packages/storybook/stories/components/phone-number/phone-number.stories.ts +++ b/packages/storybook/stories/components/phone-number/phone-number.stories.ts @@ -1,7 +1,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { ODS_PHONE_NUMBER_COUNTRY_ISO_CODES, ODS_PHONE_NUMBER_LOCALES } from '@ovhcloud/ods-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Form elements/Phone Number', diff --git a/packages/storybook/stories/components/phone-number/technical-information.mdx b/packages/storybook/stories/components/phone-number/technical-information.mdx index b6d07dbbd..5e4876867 100644 --- a/packages/storybook/stories/components/phone-number/technical-information.mdx +++ b/packages/storybook/stories/components/phone-number/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsPhoneNumber from '@ovhcloud/ods-components/src/components/phone-number/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as PhoneNumberStories from './phone-number.stories'; import { PhoneNumber as FormFieldPhoneNumber } from '../form-field/form-field.stories'; diff --git a/packages/storybook/stories/components/popover/documentation.mdx b/packages/storybook/stories/components/popover/documentation.mdx index 8179affdd..96a8017fc 100644 --- a/packages/storybook/stories/components/popover/documentation.mdx +++ b/packages/storybook/stories/components/popover/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as PopoverStories from './popover.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/popover/popover.stories.ts b/packages/storybook/stories/components/popover/popover.stories.ts index ab004cb46..53dde92c7 100644 --- a/packages/storybook/stories/components/popover/popover.stories.ts +++ b/packages/storybook/stories/components/popover/popover.stories.ts @@ -2,7 +2,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { ODS_POPOVER_POSITION, ODS_POPOVER_POSITIONS } from '@ovhcloud/ods-components'; import { html } from 'lit-html'; import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Popover', diff --git a/packages/storybook/stories/components/popover/technical-information.mdx b/packages/storybook/stories/components/popover/technical-information.mdx index f135e5900..a7947f829 100644 --- a/packages/storybook/stories/components/popover/technical-information.mdx +++ b/packages/storybook/stories/components/popover/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsPopover from '@ovhcloud/ods-components/src/components/popover/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as PopoverStories from './popover.stories'; diff --git a/packages/storybook/stories/components/progress-bar/documentation.mdx b/packages/storybook/stories/components/progress-bar/documentation.mdx index 5ccb38e72..ba864a09a 100644 --- a/packages/storybook/stories/components/progress-bar/documentation.mdx +++ b/packages/storybook/stories/components/progress-bar/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as ProgressBarStories from './progress-bar.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/progress-bar/progress-bar.stories.ts b/packages/storybook/stories/components/progress-bar/progress-bar.stories.ts index 06526e23e..16e5b1b7c 100644 --- a/packages/storybook/stories/components/progress-bar/progress-bar.stories.ts +++ b/packages/storybook/stories/components/progress-bar/progress-bar.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Progress Bar', diff --git a/packages/storybook/stories/components/progress-bar/technical-information.mdx b/packages/storybook/stories/components/progress-bar/technical-information.mdx index e96dc1148..7dde9e804 100644 --- a/packages/storybook/stories/components/progress-bar/technical-information.mdx +++ b/packages/storybook/stories/components/progress-bar/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsProgressBar from '@ovhcloud/ods-components/src/components/progress-bar/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as ProgressBarStories from './progress-bar.stories'; diff --git a/packages/storybook/stories/components/quantity/documentation.mdx b/packages/storybook/stories/components/quantity/documentation.mdx index f75070727..9d242d315 100644 --- a/packages/storybook/stories/components/quantity/documentation.mdx +++ b/packages/storybook/stories/components/quantity/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as QuantityStories from './quantity.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/quantity/migration.from.17.x.mdx b/packages/storybook/stories/components/quantity/migration.from.17.x.mdx index fcc7039be..fb0edf412 100644 --- a/packages/storybook/stories/components/quantity/migration.from.17.x.mdx +++ b/packages/storybook/stories/components/quantity/migration.from.17.x.mdx @@ -1,6 +1,5 @@ import { Meta } from '@storybook/blocks'; import * as QuantityStories from './quantity.stories'; -import { linkTo } from '@storybook/addon-links'; diff --git a/packages/storybook/stories/components/quantity/quantity.stories.ts b/packages/storybook/stories/components/quantity/quantity.stories.ts index aeed2351e..ec8beae7d 100644 --- a/packages/storybook/stories/components/quantity/quantity.stories.ts +++ b/packages/storybook/stories/components/quantity/quantity.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Form elements/Quantity', diff --git a/packages/storybook/stories/components/quantity/technical-information.mdx b/packages/storybook/stories/components/quantity/technical-information.mdx index 9132dfb84..998638603 100644 --- a/packages/storybook/stories/components/quantity/technical-information.mdx +++ b/packages/storybook/stories/components/quantity/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsQuantity from '@ovhcloud/ods-components/src/components/quantity/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as QuantityStories from './quantity.stories'; import { Quantity as FormFieldQuantity } from '../form-field/form-field.stories'; diff --git a/packages/storybook/stories/components/radio/documentation.mdx b/packages/storybook/stories/components/radio/documentation.mdx index 0dc19610b..84eae90c4 100644 --- a/packages/storybook/stories/components/radio/documentation.mdx +++ b/packages/storybook/stories/components/radio/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as RadioStories from './radio.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/radio/radio.stories.ts b/packages/storybook/stories/components/radio/radio.stories.ts index fd39aee72..db20a39c4 100644 --- a/packages/storybook/stories/components/radio/radio.stories.ts +++ b/packages/storybook/stories/components/radio/radio.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { component: 'ods-radio', diff --git a/packages/storybook/stories/components/radio/technical-information.mdx b/packages/storybook/stories/components/radio/technical-information.mdx index 0e3b5e6ba..5b02024fa 100644 --- a/packages/storybook/stories/components/radio/technical-information.mdx +++ b/packages/storybook/stories/components/radio/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsRadio from '@ovhcloud/ods-components/src/components/radio/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as RadioStories from './radio.stories'; import { Radio as FormFieldRadio } from '../form-field/form-field.stories'; diff --git a/packages/storybook/stories/components/range/documentation.mdx b/packages/storybook/stories/components/range/documentation.mdx index e5012e16c..987cb664e 100644 --- a/packages/storybook/stories/components/range/documentation.mdx +++ b/packages/storybook/stories/components/range/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as RangeStories from './range.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/range/range.stories.ts b/packages/storybook/stories/components/range/range.stories.ts index fa464574d..2186226e8 100644 --- a/packages/storybook/stories/components/range/range.stories.ts +++ b/packages/storybook/stories/components/range/range.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { component: 'ods-range', diff --git a/packages/storybook/stories/components/range/technical-information.mdx b/packages/storybook/stories/components/range/technical-information.mdx index 101d2fca9..609baeee2 100644 --- a/packages/storybook/stories/components/range/technical-information.mdx +++ b/packages/storybook/stories/components/range/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsRange from '@ovhcloud/ods-components/src/components/range/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as RangeStories from './range.stories'; import { Range as FormFieldRange } from '../form-field/form-field.stories'; diff --git a/packages/storybook/stories/components/select/documentation.mdx b/packages/storybook/stories/components/select/documentation.mdx index 2df344f89..bef01ef27 100644 --- a/packages/storybook/stories/components/select/documentation.mdx +++ b/packages/storybook/stories/components/select/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as SelectStories from './select.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/select/select.stories.ts b/packages/storybook/stories/components/select/select.stories.ts index fde74d944..db000f83e 100644 --- a/packages/storybook/stories/components/select/select.stories.ts +++ b/packages/storybook/stories/components/select/select.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Form elements/Select', diff --git a/packages/storybook/stories/components/select/technical-information.mdx b/packages/storybook/stories/components/select/technical-information.mdx index 1e9ad6f1c..bc253eca1 100644 --- a/packages/storybook/stories/components/select/technical-information.mdx +++ b/packages/storybook/stories/components/select/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsSelect from '@ovhcloud/ods-components/src/components/select/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as SelectStories from './select.stories'; import { Select as FormFieldSelect } from '../form-field/form-field.stories'; diff --git a/packages/storybook/stories/components/skeleton/documentation.mdx b/packages/storybook/stories/components/skeleton/documentation.mdx index d0be8e2ee..0f2287611 100644 --- a/packages/storybook/stories/components/skeleton/documentation.mdx +++ b/packages/storybook/stories/components/skeleton/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as SkeletonStories from './skeleton.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/skeleton/skeleton.stories.ts b/packages/storybook/stories/components/skeleton/skeleton.stories.ts index 655abc38f..29d8d4f0b 100644 --- a/packages/storybook/stories/components/skeleton/skeleton.stories.ts +++ b/packages/storybook/stories/components/skeleton/skeleton.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Skeleton', diff --git a/packages/storybook/stories/components/skeleton/technical-information.mdx b/packages/storybook/stories/components/skeleton/technical-information.mdx index 03d2bea3f..c08b2a581 100644 --- a/packages/storybook/stories/components/skeleton/technical-information.mdx +++ b/packages/storybook/stories/components/skeleton/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsSkeleton from '@ovhcloud/ods-components/src/components/skeleton/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as SkeletonStories from './skeleton.stories'; diff --git a/packages/storybook/stories/components/spinner/documentation.mdx b/packages/storybook/stories/components/spinner/documentation.mdx index 2c4a5db95..43c0d1479 100644 --- a/packages/storybook/stories/components/spinner/documentation.mdx +++ b/packages/storybook/stories/components/spinner/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as SpinnerStories from './spinner.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/spinner/spinner.stories.ts b/packages/storybook/stories/components/spinner/spinner.stories.ts index fd39c9021..7410050bc 100644 --- a/packages/storybook/stories/components/spinner/spinner.stories.ts +++ b/packages/storybook/stories/components/spinner/spinner.stories.ts @@ -1,7 +1,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { ODS_SPINNER_COLOR, ODS_SPINNER_COLORS, ODS_SPINNER_SIZE, ODS_SPINNER_SIZES } from '@ovhcloud/ods-components'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; import { html } from 'lit-html'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Spinner', diff --git a/packages/storybook/stories/components/spinner/technical-information.mdx b/packages/storybook/stories/components/spinner/technical-information.mdx index 126176969..f251e4056 100644 --- a/packages/storybook/stories/components/spinner/technical-information.mdx +++ b/packages/storybook/stories/components/spinner/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsSpinner from '@ovhcloud/ods-components/src/components/spinner/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as SpinnerStories from './spinner.stories'; diff --git a/packages/storybook/stories/components/switch/documentation.mdx b/packages/storybook/stories/components/switch/documentation.mdx index a93365dbb..4d9eaa243 100644 --- a/packages/storybook/stories/components/switch/documentation.mdx +++ b/packages/storybook/stories/components/switch/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as SwitchStories from './switch.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/switch/switch.stories.ts b/packages/storybook/stories/components/switch/switch.stories.ts index 89d82e0dd..a3e6af5e6 100644 --- a/packages/storybook/stories/components/switch/switch.stories.ts +++ b/packages/storybook/stories/components/switch/switch.stories.ts @@ -1,8 +1,9 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { ODS_SWITCH_SIZE, ODS_SWITCH_SIZES } from '@ovhcloud/ods-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { component: 'ods-switch', diff --git a/packages/storybook/stories/components/switch/technical-information.mdx b/packages/storybook/stories/components/switch/technical-information.mdx index 42acc3ba2..a44e52172 100644 --- a/packages/storybook/stories/components/switch/technical-information.mdx +++ b/packages/storybook/stories/components/switch/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsSwitch from '@ovhcloud/ods-components/src/components/switch/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as SwitchStories from './switch.stories'; import { Switch as FormFieldSwitch } from '../form-field/form-field.stories'; diff --git a/packages/storybook/stories/components/table/documentation.mdx b/packages/storybook/stories/components/table/documentation.mdx index d8bc64a03..99a214231 100644 --- a/packages/storybook/stories/components/table/documentation.mdx +++ b/packages/storybook/stories/components/table/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as TableStories from './table.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/table/table.stories.ts b/packages/storybook/stories/components/table/table.stories.ts index 72651c6ee..9a708630b 100644 --- a/packages/storybook/stories/components/table/table.stories.ts +++ b/packages/storybook/stories/components/table/table.stories.ts @@ -2,7 +2,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { ODS_TABLE_SIZE, ODS_TABLE_SIZES, ODS_TABLE_VARIANT, ODS_TABLE_VARIANTS } from '@ovhcloud/ods-components'; import { html } from 'lit-html'; import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Table', diff --git a/packages/storybook/stories/components/table/technical-information.mdx b/packages/storybook/stories/components/table/technical-information.mdx index 7f9413b41..cbd929c36 100644 --- a/packages/storybook/stories/components/table/technical-information.mdx +++ b/packages/storybook/stories/components/table/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsTable from '@ovhcloud/ods-components/src/components/table/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as TableStories from './table.stories'; diff --git a/packages/storybook/stories/components/tabs/documentation.mdx b/packages/storybook/stories/components/tabs/documentation.mdx index d2aee0e72..b8d7607fe 100644 --- a/packages/storybook/stories/components/tabs/documentation.mdx +++ b/packages/storybook/stories/components/tabs/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as TabsStories from './tabs.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/tabs/tabs.stories.ts b/packages/storybook/stories/components/tabs/tabs.stories.ts index 1efc4e620..9f0b62e56 100644 --- a/packages/storybook/stories/components/tabs/tabs.stories.ts +++ b/packages/storybook/stories/components/tabs/tabs.stories.ts @@ -1,7 +1,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Tabs', diff --git a/packages/storybook/stories/components/tabs/technical-information.mdx b/packages/storybook/stories/components/tabs/technical-information.mdx index 28a63c3ad..549fb854c 100644 --- a/packages/storybook/stories/components/tabs/technical-information.mdx +++ b/packages/storybook/stories/components/tabs/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsTabs from '@ovhcloud/ods-components/src/components/tabs/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as TabsStories from './tabs.stories'; diff --git a/packages/storybook/stories/components/tag/documentation.mdx b/packages/storybook/stories/components/tag/documentation.mdx index 0d2f62ff1..736ceffef 100644 --- a/packages/storybook/stories/components/tag/documentation.mdx +++ b/packages/storybook/stories/components/tag/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as TagStories from './tag.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/tag/tag.stories.ts b/packages/storybook/stories/components/tag/tag.stories.ts index 8a093a119..301a61f97 100644 --- a/packages/storybook/stories/components/tag/tag.stories.ts +++ b/packages/storybook/stories/components/tag/tag.stories.ts @@ -1,7 +1,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { ODS_ICON_NAMES, ODS_TAG_COLOR, ODS_TAG_COLORS, ODS_TAG_SIZE, ODS_TAG_SIZES } from '@ovhcloud/ods-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Tag', diff --git a/packages/storybook/stories/components/tag/technical-information.mdx b/packages/storybook/stories/components/tag/technical-information.mdx index d4f6cbf59..7ed2cd9cf 100644 --- a/packages/storybook/stories/components/tag/technical-information.mdx +++ b/packages/storybook/stories/components/tag/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsTag from '@ovhcloud/ods-components/src/components/tag/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as TagStories from './tag.stories'; diff --git a/packages/storybook/stories/components/text/documentation.mdx b/packages/storybook/stories/components/text/documentation.mdx index f03621e89..535c18373 100644 --- a/packages/storybook/stories/components/text/documentation.mdx +++ b/packages/storybook/stories/components/text/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as TextStories from './text.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/text/technical-information.mdx b/packages/storybook/stories/components/text/technical-information.mdx index 7ce9c8fab..6bfce3274 100644 --- a/packages/storybook/stories/components/text/technical-information.mdx +++ b/packages/storybook/stories/components/text/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsText from '@ovhcloud/ods-components/src/components/text/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as TextStories from './text.stories'; diff --git a/packages/storybook/stories/components/text/text.stories.ts b/packages/storybook/stories/components/text/text.stories.ts index b5df93ffc..b864caf7e 100644 --- a/packages/storybook/stories/components/text/text.stories.ts +++ b/packages/storybook/stories/components/text/text.stories.ts @@ -2,7 +2,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { ODS_TEXT_PRESETS } from '@ovhcloud/ods-components'; import { html } from 'lit-html'; import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Text', diff --git a/packages/storybook/stories/components/textarea/documentation.mdx b/packages/storybook/stories/components/textarea/documentation.mdx index 30a3e2f5c..272759b5b 100644 --- a/packages/storybook/stories/components/textarea/documentation.mdx +++ b/packages/storybook/stories/components/textarea/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as TextareaStories from './textarea.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/textarea/technical-information.mdx b/packages/storybook/stories/components/textarea/technical-information.mdx index 865ffcb47..8a77ed516 100644 --- a/packages/storybook/stories/components/textarea/technical-information.mdx +++ b/packages/storybook/stories/components/textarea/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsTextarea from '@ovhcloud/ods-components/src/components/textarea/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as TextareaStories from './textarea.stories'; import { Textarea as FormFieldTextarea } from '../form-field/form-field.stories'; diff --git a/packages/storybook/stories/components/textarea/textarea.stories.ts b/packages/storybook/stories/components/textarea/textarea.stories.ts index 66fba38e0..292e70af6 100644 --- a/packages/storybook/stories/components/textarea/textarea.stories.ts +++ b/packages/storybook/stories/components/textarea/textarea.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Form elements/Textarea', diff --git a/packages/storybook/stories/components/timepicker/documentation.mdx b/packages/storybook/stories/components/timepicker/documentation.mdx index c98e77748..ecb9deb1a 100644 --- a/packages/storybook/stories/components/timepicker/documentation.mdx +++ b/packages/storybook/stories/components/timepicker/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as TimepickerStories from './timepicker.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/timepicker/technical-information.mdx b/packages/storybook/stories/components/timepicker/technical-information.mdx index 33c293d5b..e2f62e2fe 100644 --- a/packages/storybook/stories/components/timepicker/technical-information.mdx +++ b/packages/storybook/stories/components/timepicker/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsTimepicker from '@ovhcloud/ods-components/src/components/timepicker/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as TimepickerStories from './timepicker.stories'; import { Timepicker as FormFieldTimepicker } from '../form-field/form-field.stories'; diff --git a/packages/storybook/stories/components/timepicker/timepicker.stories.ts b/packages/storybook/stories/components/timepicker/timepicker.stories.ts index 7ad2ab315..42b6e0252 100644 --- a/packages/storybook/stories/components/timepicker/timepicker.stories.ts +++ b/packages/storybook/stories/components/timepicker/timepicker.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { component: 'ods-timepicker', diff --git a/packages/storybook/stories/components/toggle/documentation.mdx b/packages/storybook/stories/components/toggle/documentation.mdx index 6d3e493c1..0d1eec099 100644 --- a/packages/storybook/stories/components/toggle/documentation.mdx +++ b/packages/storybook/stories/components/toggle/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as ToggleStories from './toggle.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/toggle/technical-information.mdx b/packages/storybook/stories/components/toggle/technical-information.mdx index 51680f916..b30b8e45f 100644 --- a/packages/storybook/stories/components/toggle/technical-information.mdx +++ b/packages/storybook/stories/components/toggle/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsToggle from '@ovhcloud/ods-components/src/components/toggle/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as ToggleStories from './toggle.stories'; import { Toggle as FormFieldToggle } from '../form-field/form-field.stories'; diff --git a/packages/storybook/stories/components/toggle/toggle.stories.ts b/packages/storybook/stories/components/toggle/toggle.stories.ts index a100784cb..80ae8c6ff 100644 --- a/packages/storybook/stories/components/toggle/toggle.stories.ts +++ b/packages/storybook/stories/components/toggle/toggle.stories.ts @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Form elements/Toggle', diff --git a/packages/storybook/stories/components/tooltip/documentation.mdx b/packages/storybook/stories/components/tooltip/documentation.mdx index 1783de45e..ba8bafc35 100644 --- a/packages/storybook/stories/components/tooltip/documentation.mdx +++ b/packages/storybook/stories/components/tooltip/documentation.mdx @@ -1,7 +1,8 @@ import { Canvas, Markdown, Meta } from '@storybook/blocks'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as TooltipStories from './tooltip.stories'; -import { ATOMIC_TYPE, IdentityCard } from '../../identity-card'; +import { IdentityCard } from '../../../src/components/identityCard/IdentityCard'; +import { ATOMIC_TYPE } from '../../../src/constants/atomicDesign'; diff --git a/packages/storybook/stories/components/tooltip/technical-information.mdx b/packages/storybook/stories/components/tooltip/technical-information.mdx index 46d5f2217..f257249c7 100644 --- a/packages/storybook/stories/components/tooltip/technical-information.mdx +++ b/packages/storybook/stories/components/tooltip/technical-information.mdx @@ -1,6 +1,6 @@ import { Canvas, Meta, Markdown } from '@storybook/blocks'; import SpecificationsTooltip from '@ovhcloud/ods-components/src/components/tooltip/documentation/spec.md?raw'; -import { Banner } from '../../banner'; +import { Banner } from '../../../src/components/banner/Banner'; import * as TooltipStories from './tooltip.stories'; diff --git a/packages/storybook/stories/components/tooltip/tooltip.stories.ts b/packages/storybook/stories/components/tooltip/tooltip.stories.ts index 93d09af60..a35230b30 100644 --- a/packages/storybook/stories/components/tooltip/tooltip.stories.ts +++ b/packages/storybook/stories/components/tooltip/tooltip.stories.ts @@ -2,7 +2,8 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { ODS_TOOLTIP_POSITION, ODS_TOOLTIP_POSITIONS } from '@ovhcloud/ods-components'; import { html } from 'lit-html'; import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'; -import { CONTROL_CATEGORY, orderControls } from '../../control'; +import { CONTROL_CATEGORY } from '../../../src/constants/controls'; +import { orderControls } from '../../../src/helpers/controls'; const meta: Meta = { title: 'ODS Components/Tooltip', diff --git a/packages/storybook/stories/identity-card.tsx b/packages/storybook/stories/identity-card.tsx deleted file mode 100644 index 23507b585..000000000 --- a/packages/storybook/stories/identity-card.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import { ODS_ICON_NAME } from '@ovhcloud/ods-components'; -import { OdsLink } from '@ovhcloud/ods-components/react'; -import { navigate } from '@storybook/addon-links'; -import React, { Fragment } from 'react'; - -enum ATOMIC_TYPE { - atom = 'atom', - molecule = 'molecule', - organism = 'organism', - quark = 'Quark', -} - -type Props = { - aliases: string[], - atomicType: ATOMIC_TYPE, - className?: string; - figmaLink: string, - githubUrl: string, - name: string, - relatedComponents: { name: string, subtitle?: string }[], -} - -function getAtomicTypeDocUrl(type: ATOMIC_TYPE): string { - switch (type) { - case ATOMIC_TYPE.atom: - return 'https://atomicdesign.bradfrost.com/chapter-2/#atoms'; - case ATOMIC_TYPE.molecule: - return 'https://atomicdesign.bradfrost.com/chapter-2/#molecules'; - case ATOMIC_TYPE.organism: - return 'https://atomicdesign.bradfrost.com/chapter-2/#organisms'; - case ATOMIC_TYPE.quark: - return 'https://bradfrost.com/blog/post/extending-atomic-design'; - default: - return ''; - } -} - -const IdentityCard = ({ aliases, atomicType, className, figmaLink, githubUrl, name, relatedComponents }: Props) => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Name - - { name } -
- Also known as - - { aliases.length > 0 ? aliases.join(', ') : '-' } -
- Atomic type - - -
- Related component(s) - - { - relatedComponents.length > 0 ? - relatedComponents.map((relatedComponent, idx) => ( - - { - e.preventDefault(); - navigate({ kind: `ODS Components/${!!relatedComponent.subtitle ? `${relatedComponent.subtitle}/` : ''}${relatedComponent.name}`, story: 'Documentation' }); - }} /> - - { idx < (relatedComponents.length - 1) && , } - - )) : '-' - } -
- Links - - - - -
- ); -}; - -export { - ATOMIC_TYPE, - IdentityCard, -}; diff --git a/packages/storybook/stories/ovhcloud-design-system/design-and-style/apply-ods-style.mdx b/packages/storybook/stories/ovhcloud-design-system/design-and-style/apply-ods-style.mdx index d0037f88f..f08cf7bbf 100644 --- a/packages/storybook/stories/ovhcloud-design-system/design-and-style/apply-ods-style.mdx +++ b/packages/storybook/stories/ovhcloud-design-system/design-and-style/apply-ods-style.mdx @@ -1,10 +1,12 @@ -import { Meta } from '@storybook/blocks'; +import { OdsLink } from '@ovhcloud/ods-components/react'; +import { Meta, Source } from '@storybook/blocks'; +import { StorybookLink } from '../../../src/components/storybookLink/StorybookLink'; # Apply ODS Style -After installing ODS (following the [get started](?path=/docs/ovhcloud-design-system-get-started--docs) documentation), +After installing ODS (following the documentation), you'll be able to use every components with the correct style. For the non-component related style, you need to update your app accordingly. @@ -15,21 +17,25 @@ ODS components does not enforce any font by default (minus a few exception like To use one of the ODS fonts in your app, add the expected variables to the top of your app: -```css + ## Use the ODS design tokens -All ODS components are using common design tokens, that are accessible through [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). +All ODS components are using common design tokens, that are accessible through . -If you want to use any of those on your own components, you can refer to the exhaustive list on the [Figma dedicated page](https://www.figma.com/design/tIKzHa5KvHHyosgIgyBswB/Design-Tokens?m=auto&node-id=0-1&t=s57Qt3pa7WuFWKEh-1). +If you want to use any of those on your own components, you can refer to the exhaustive list on the . -```css + diff --git a/packages/storybook/stories/ovhcloud-design-system/design-and-style/migration.from.17.x.mdx b/packages/storybook/stories/ovhcloud-design-system/design-and-style/migration.from.17.x.mdx index 65dfa07f1..d3ddec9aa 100644 --- a/packages/storybook/stories/ovhcloud-design-system/design-and-style/migration.from.17.x.mdx +++ b/packages/storybook/stories/ovhcloud-design-system/design-and-style/migration.from.17.x.mdx @@ -1,133 +1,120 @@ -import { Meta, Markdown } from '@storybook/blocks'; +import { OdsBadge } from '@ovhcloud/ods-components/react'; +import { Meta } from '@storybook/blocks'; +import { Heading } from '../../../src/components/heading/Heading'; +import { TokenMigrationTable } from '../../../src/components/tokenMigrationTable/TokenMigrationTable'; -# Style - migrate from v17 to v18 ----- - -## Component tokens -* All **component-specific tokens** (ex: **`--ods-size-button-*`**, **`--ods-toggle-*`**) have been removed, their values are now directly applied on components. - -## Color tokens -* All **primitive color tokens** (ex: **`--ods-color-blue-500`**) have been removed, now colors can only be accessible using alias tokens (see corresponding table below). -* All **contrasted primitive color tokens** (ex: **`--ods-color-blue-500-contrasted`**) have been removed, until new designs and specifications gets validated for having contrasted states on components. -* All **`--ods-color-*-list`** tokens have been removed, as no usage for them in integration. - -### Palettes - - {` -| Former token names | Status | New token name | -|------------------------ | ---------------------------------------------------------------- | ----------------------------------------------------------------------- | -| ${"\`--ods-color-blue-*\`"} | | Use **${"\`--ods-color-primary-*\`"}** or **${"\`--ods-color-information-*\`"}** | -| ${"\`--ods-color-blue-075\`"} | | Use **${"\`--ods-color-primary-050\`"}** as replacing color | -| ${"\`--ods-color-gray-*\`"} | | Use **${"\`--ods-color-neutral-*\`"}** | -| ${"\`--ods-color-gray-blue-*\`"} | | Use **${"\`--ods-color-text`"}** token for all hues | -| ${"\`--ods-color-red-*\`"} | | Use **${"\`--ods-color-critical-*\`"}** | -| ${"\`--ods-color-orange-*\`"} | | Use **${"\`--ods-color-warning-*\`"}** | -| ${"\`--ods-color-green-*\`"} | | Use **${"\`--ods-color-success-*\`"}** | -| ${"\`--ods-color-pink-*\`"} | | Use **${"\`--ods-color-promotion`"}** token for all hues | -`} - - -### Contrasted palettes + + + + +* All **component-specific tokens** (ex: **`--ods-size-button-*`**, **`--ods-toggle-*`**) have been removed, their values are now directly applied on components. + + + +* All **primitive color tokens** (ex: **`--ods-color-blue-500`**) have been removed, now colors can only be accessible using alias tokens (see corresponding table below). +* All **contrasted primitive color tokens** (ex: **`--ods-color-blue-500-contrasted`**) have been removed, until new designs and specifications gets validated for having contrasted states on components. +* All **`--ods-color-*-list`** tokens have been removed, as no usage for them in integration. + + + + + + + All **contrasted primitive color tokens** have been removed, until new designs and specifications gets validated for having contrasted states on components. - - {` -| Former token names | Status | New token name | -|------------------------ | ---------------------------------------------------------------- | ----------------------------------------------------------------------- | -| ${"\`--ods-color-gray-<000,050,100,200,300,400>-contrasted\`"} | | Use **${"\`black\`"}** | -| ${"\`--ods-color-gray-<500,600,700,800,900,1000>-contrasted\`"} | | Use **${"\`--ods-color-neutral-000\`"}** | -| ${"\`--ods-color-blue-<000,050,075,100,200,300,400>-contrasted\`"} | | Use **${"\`--ods-color-primary-500\`"}** or **${"\`--ods-color-information-500\`"}** | -| ${"\`--ods-color-blue-<500,600,700,800,900,1000>-contrasted\`"} | | Use **${"\`--ods-color-primary-000\`"}** or **${"\`--ods-color-information-000\`"}** | -| ${"\`--ods-color-gray-blue-*-contrasted\`"} | | Use **${"\`--ods-color-neutral-000\`"}** | -| ${"\`--ods-color-red-<000,050,100,200,300,400>-contrasted\`"} | | Use **${"\`--ods-color-critical-500\`"}** | -| ${"\`--ods-color-red-<500,600,700,800,900,1000>-contrasted\`"} | | Use **${"\`--ods-color-critical-000\`"}** | -| ${"\`--ods-color-orange-<000,050,100,200,300,400>-contrasted\`"} | | Use **${"\`--ods-color-warning-500\`"}** | -| ${"\`--ods-color-orange-<500,600,700,800,900,1000>-contrasted\`"} | | Use **${"\`--ods-color-warning-000\`"}** | -| ${"\`--ods-color-green-<000,050,100,200,300,400>-contrasted\`"} | | Use **${"\`--ods-color-success-500\`"}** | -| ${"\`--ods-color-green-<500,600,700,800,900,1000>-contrasted\`"} | | Use **${"\`--ods-color-success-000\`"}** | -| ${"\`--ods-color-pink-<000,050,100,200,300,400>-contrasted\`"} | | Use **${"\`--ods-color-promotion\`"}** | -| ${"\`--ods-color-pink-<500,600,700,800,900,1000>-contrasted\`"} | | Use **${"\`--ods-color-neutral-000\`"}** | -`} - - -### Intents - - {` -| Former token names | Status | New token name | -|------------------------ | ---------------------------------------------------------------- | ----------------------------------------------------------------------- | -| ${"\`--ods-color-default-*\`"} | | Use **${"\`--ods-color-neutral-*\`"}** | -| ${"\`--ods-color-primary-075\`"} | | Use **${"\`--ods-color-primary-050\`"}** as replacing color | -| ${"\`--ods-color-text-*\`"} | | Use **${"\`--ods-color-text`"}** token for all hues | -| ${"\`--ods-color-error-*\`"} | | Use **${"\`--ods-color-critical-*\`"}** | -| ${"\`--ods-color-accent-*\`"}
${"\`--ods-color-promotion-*\`"} | | Use **${"\`--ods-color-promotion`"}** token for all hues | -| ${"\`--ods-color-info-*\`"} | | Use **${"\`--ods-color-information-*\`"}** | -`} - - -### Contrasted intents - - {` -| Former token names | Status | New token name | -|------------------------ | ---------------------------------------------------------------- | ----------------------------------------------------------------------- | -| ${"\`--ods-color-default-<000,050,100,200,300,400>-contrasted\`"} | | Use **${"\`black\`"}** | -| ${"\`--ods-color-default-<500,600,700,800,900,1000>-contrasted\`"} | | Use **${"\`--ods-color-neutral-000\`"}** | -| ${"\`--ods-color-primary-<000,050,075,100,200,300,400>-contrasted\`"} | | Use **${"\`--ods-color-primary-500\`"}** | -| ${"\`--ods-color-primary-<500,600,700,800,900,1000>-contrasted\`"} | | Use **${"\`--ods-color-primary-000\`"}** | -| ${"\`--ods-color-text-*-contrasted\`"} | | Use **${"\`--ods-color-neutral-000\`"}** | -| ${"\`--ods-color-error-<000,050,100,200,300,400>-contrasted\`"} | | Use **${"\`--ods-color-critical-500\`"}** | -| ${"\`--ods-color-error-<500,600,700,800,900,1000>-contrasted\`"} | | Use **${"\`--ods-color-critical-000\`"}** | -| ${"\`--ods-color-warning-<000,050,100,200,300,400>-contrasted\`"} | | Use **${"\`--ods-color-warning-500\`"}** | -| ${"\`--ods-color-warning-<500,600,700,800,900,1000>-contrasted\`"} | | Use **${"\`--ods-color-warning-000\`"}** | -| ${"\`--ods-color-success-<000,050,100,200,300,400>-contrasted\`"} | | Use **${"\`--ods-color-success-500\`"}** | -| ${"\`--ods-color-success-<500,600,700,800,900,1000>-contrasted\`"} | | Use **${"\`--ods-color-success-000\`"}** | -| ${"\`--ods-color-accent-<000,050,100,200,300,400>-contrasted\`"}
${"\`--ods-color-promotion-<000,050,100,200,300,400>-contrasted\`"} | | Use **${"\`--ods-color-promotion\`"}** | -| ${"\`--ods-color-accent-<500,600,700,800,900,1000>-contrasted\`"}
${"\`--ods-color-promotion-<500,600,700,800,900,1000>-contrasted\`"} | | Use **${"\`--ods-color-neutral-000\`"}** | -| ${"\`--ods-color-info-<000,050,100,200,300,400>-contrasted\`"} | | Use **${"\`--ods-color-information-500\`"}** | -| ${"\`--ods-color-info-<500,600,700,800,900,1000>-contrasted\`"} | | Use **${"\`--ods-color-information-000\`"}** | -`} - - -## Size tokens -* All **global size tokens** (ex: **`--ods-size-*`**) have been removed due to no direct use, they are now up to your particular usage. -* Global **sizing ratio** (ex: **`--ods-size-ratio`**) which was applied to every spacing concept has been removed due to no use. -* All **spacing concept tokens** (ex: **`--ods-size-stack-*`**) has been removed due to no use. - -### Border radius - - - {` -| Former token names | Status | New token name | -|------------------------ | ---------------------------------------------------------------- | ----------------------------------------------------------------------- | -| ${"\`--ods-size-border-radius-01\`"} | | Use **${"\`--ods-border-radius-sm\`"}** | -| ${"\`--ods-size-border-radius-02\`"} | | Use **${"\`--ods-border-radius-md\`"}** | -| ${"\`--ods-size-border-radius-03\`"} | | Use **${"\`--ods-border-radius-lg\`"}** | -`} - - -### Breakpoints - - - {` -| Former token names | Status | New token name | -|------------------------ | ---------------------------------------------------------------- | ----------------------------------------------------------------------- | -| ${"\`--ods-breakpoint-xs\`"} | | Use **${"\`$ods-breakpoint-mobile\`"}** Sass variable instead | -| ${"\`--ods-breakpoint-sm\`"} | | Use **${"\`$ods-breakpoint-tablet\`"}** Sass variable instead | -| ${"\`--ods-breakpoint-md\`"} | | Use **${"\`$ods-breakpoint-desktop\`"}** Sass variable instead | -| ${"\`--ods-breakpoint-lg\`"} | | Use **${"\`$ods-breakpoint-large-screen\`"}** Sass variable instead | -| ${"\`--ods-breakpoint-xl\`"} | | Use **${"\`$ods-breakpoint-widescreen\`"}** Sass variable instead | -`} - - -## Typography tokens -* All **typography tokens** (ex: **`--ods-typography-*`**) have been removed, including font sizes, line heights, font weights, letter spacings due to too much typography restriction. -* Global **font sizing ratio** (**`--ods-typo-size-ratio`**) which was applied to every spacing concept has been removed due to no use. - -### Font family - - {` -| Former token names | Status | New token name | -|------------------------ | ---------------------------------------------------------------- | ----------------------------------------------------------------------- | -| ${"\`--ods-font-family\`"} | | Use **${"\`--ods-font-family-default\`"}** | -`} - + +-contrasted', replacement: 'Use **`black`** ', status: 'removed' }, + { formerName: '--ods-color-gray-<500,600,700,800,900,1000>-contrasted', replacement: 'Use **`--ods-color-neutral-000`**', status: 'removed' }, + { formerName: '--ods-color-blue-<000,050,075,100,200,300,400>-contrasted', replacement: 'Use **`--ods-color-primary-500`** or **`--ods-color-information-500`**', status: 'removed' }, + { formerName: '--ods-color-blue-<500,600,700,800,900,1000>-contrasted', replacement: 'Use **`--ods-color-primary-000`** or **`--ods-color-information-000`**', status: 'removed' }, + { formerName: '--ods-color-gray-blue-*-contrasted', replacement: 'Use **`--ods-color-neutral-000`**', status: 'removed' }, + { formerName: '--ods-color-red-<000,050,100,200,300,400>-contrasted', replacement: 'Use **`--ods-color-critical-500`**', status: 'removed' }, + { formerName: '--ods-color-red-<500,600,700,800,900,1000>-contrasted', replacement: 'Use **`--ods-color-critical-000`**', status: 'removed' }, + { formerName: '--ods-color-orange-<000,050,100,200,300,400>-contrasted', replacement: 'Use **`--ods-color-warning-500`**', status: 'removed' }, + { formerName: '--ods-color-orange-<500,600,700,800,900,1000>-contrasted', replacement: 'Use **`--ods-color-warning-000`**', status: 'removed' }, + { formerName: '--ods-color-green-<000,050,100,200,300,400>-contrasted', replacement: 'Use **`--ods-color-success-500`**', status: 'removed' }, + { formerName: '--ods-color-green-<500,600,700,800,900,1000>-contrasted', replacement: 'Use **`--ods-color-success-000`**', status: 'removed' }, + { formerName: '--ods-color-pink-<000,050,100,200,300,400>-contrasted', replacement: 'Use **`--ods-color-promotion`**', status: 'removed' }, + { formerName: '--ods-color-pink-<500,600,700,800,900,1000>-contrasted', replacement: 'Use **`--ods-color-neutral-000`**', status: 'removed' }, +]} /> + + + + + + + +-contrasted', replacement: 'Use **`black`**', status: 'removed' }, + { formerName: '--ods-color-default-<500,600,700,800,900,1000>-contrasted', replacement: 'Use **`--ods-color-neutral-000`**', status: 'removed' }, + { formerName: '--ods-color-primary-<000,050,075,100,200,300,400>-contrasted', replacement: 'Use **`--ods-color-primary-500`**', status: 'removed' }, + { formerName: '--ods-color-primary-<500,600,700,800,900,1000>-contrasted', replacement: 'Use **`--ods-color-primary-000`**', status: 'removed' }, + { formerName: '--ods-color-text-*-contrasted', replacement: 'Use **`--ods-color-neutral-000`**', status: 'removed' }, + { formerName: '--ods-color-error-<000,050,100,200,300,400>-contrasted', replacement: 'Use **`--ods-color-critical-500`**', status: 'removed' }, + { formerName: '--ods-color-error-<500,600,700,800,900,1000>-contrasted', replacement: 'Use **`--ods-color-critical-000`**', status: 'removed' }, + { formerName: '--ods-color-warning-<000,050,100,200,300,400>-contrasted', replacement: 'Use **`--ods-color-warning-500`**', status: 'removed' }, + { formerName: '--ods-color-warning-<500,600,700,800,900,1000>-contrasted', replacement: 'Use **`--ods-color-warning-000`**', status: 'removed' }, + { formerName: '--ods-color-success-<000,050,100,200,300,400>-contrasted', replacement: 'Use **`--ods-color-success-500`**', status: 'removed' }, + { formerName: '--ods-color-success-<500,600,700,800,900,1000>-contrasted', replacement: 'Use **`--ods-color-success-000`**', status: 'removed' }, + { formerName: '--ods-color-accent-<000,050,100,200,300,400>-contrasted', replacement: 'Use **`--ods-color-promotion`**', status: 'removed' }, + { formerName: '--ods-color-promotion-<000,050,100,200,300,400>-contrasted', replacement: 'Use **`--ods-color-promotion`**', status: 'removed' }, + { formerName: '--ods-color-accent-<500,600,700,800,900,1000>-contrasted', replacement: 'Use **`--ods-color-neutral-000`**', status: 'removed' }, + { formerName: '--ods-color-promotion-<500,600,700,800,900,1000>-contrasted', replacement: 'Use **`--ods-color-neutral-000`**', status: 'removed' }, + { formerName: '--ods-color-info-<000,050,100,200,300,400>-contrasted', replacement: 'Use **`--ods-color-information-500`**', status: 'removed' }, + { formerName: '--ods-color-info-<500,600,700,800,900,1000>-contrasted', replacement: 'Use **`--ods-color-information-000`**', status: 'removed' }, +]} /> + + + +* All **global size tokens** (ex: **`--ods-size-*`**) have been removed due to no direct use, they are now up to your particular usage. +* Global **sizing ratio** (ex: **`--ods-size-ratio`**) which was applied to every spacing concept has been removed due to no use. +* All **spacing concept tokens** (ex: **`--ods-size-stack-*`**) has been removed due to no use. + + + + + + + + + + + +* All **typography tokens** (ex: **`--ods-typography-*`**) have been removed, including font sizes, line heights, font weights, letter spacings due to too much typography restriction. +* Global **font sizing ratio** (**`--ods-typo-size-ratio`**) which was applied to every spacing concept has been removed due to no use. + + + + diff --git a/packages/storybook/stories/ovhcloud-design-system/design-and-style/style-customization.mdx b/packages/storybook/stories/ovhcloud-design-system/design-and-style/style-customization.mdx index 64f8f90f9..39f2c747a 100644 --- a/packages/storybook/stories/ovhcloud-design-system/design-and-style/style-customization.mdx +++ b/packages/storybook/stories/ovhcloud-design-system/design-and-style/style-customization.mdx @@ -1,21 +1,23 @@ -import { Meta } from '@storybook/blocks'; +import { OdsLink } from '@ovhcloud/ods-components/react'; +import { Meta, Source } from '@storybook/blocks'; +import { Heading } from '../../../src/components/heading/Heading'; -# Style Customization + Although ODS components comes with the expected designs, it is sometime useful to customize the rendering of a component to fit your context. Here we'll describe different ways to customize an ODS component. -## Apply style directly on the web-component + The web-component host behave like any other element in your DOM, so you can apply a class directly to it. For example, if you want to display a vertical list of `ods-link`, you can override the inline default display: -```html + @@ -28,17 +30,19 @@ For example, if you want to display a vertical list of `ods-link`, you can overr display: block; } -``` +`} + dark="true" + language="html" /> -## Apply style to its shadow DOM element + If updating the host element is not enough, you may customize directly some specific part of the component internal DOM. -If a component exposes some part, you can apply your own style using the [part](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) selector. +If a component exposes some part, you can apply your own style using the selector. For example, if you want to create a badge with a specific color that is not provided: -```html + @@ -47,35 +51,39 @@ For example, if you want to create a badge with a specific color that is not pro background-color: #ff00ff; } -``` +`} + dark="true" + language="html" /> To know precisely which parts are available for a specific component, please refer to its `Technical information` page. -## Reuse existing ODS style + In some case where you cannot use an ODS component, you may want one of your own component to look like an ODS component (for example, when using an external library that doesn't allow custom templating). -We did expose a bunch of [Sass](https://sass-lang.com) mixins that allows you to easily apply the ODS style to your own elements. +We did expose a bunch of mixins that allows you to easily apply the ODS style to your own elements. For example, if you need to make an anchor tag looks like an `ods-link`: -```scss + -```html -... -``` +...` } + dark="true" + language="html" /> -## CSS variables + -All ODS components are using common design tokens, that are accessible through [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). +All ODS components are using common design tokens, that are accessible through . We do advise to reuse those variables on your own style, this way your application will automatically be updated on current theme changes or when new themes will be released. @@ -84,7 +92,7 @@ You can find the whole list on the `:root` of your application page. Example of CSS variables: -```html + Welcome page @@ -94,4 +102,6 @@ Example of CSS variables: color: var(--ods-color-primary-500); } -``` +`} + dark="true" + language="html" /> diff --git a/packages/storybook/stories/ovhcloud-design-system/faq.mdx b/packages/storybook/stories/ovhcloud-design-system/faq.mdx index d024b5afb..94972188b 100644 --- a/packages/storybook/stories/ovhcloud-design-system/faq.mdx +++ b/packages/storybook/stories/ovhcloud-design-system/faq.mdx @@ -1,48 +1,53 @@ -import { Meta } from '@storybook/blocks'; +import { OdsLink } from '@ovhcloud/ods-components/react'; +import { Meta, Source } from '@storybook/blocks'; +import { Heading } from '../../src/components/heading/Heading'; +import { StorybookLink } from '../../src/components/storybookLink/StorybookLink'; -# Frequently Asked Questions + *Welcome to the F.A.Q. section of the OVHcloud Design System (ODS).* *Here, we aim to address common questions and provide helpful guidance for developers.* -## I can't find a component I need + ODS provides base components that you can build on top of and implement in various contexts. If you need a new component, we recommend working with the design team to request and design the component to ensure it aligns with the ODS guidelines. -## How do I customize the style of my component? + To customize the style of your component, you can refer individually to the technical information of the component you wish to customize. -*Example here with the [Accordion component](?path=/docs/ods-components-accordion--technical-information#style-customization).* +*Example here with the [](?path=/docs/ods-components-accordion--technical-information#style-customization).* It provides detailed instructions on how to apply custom styles effectively. -## [React] How can I test events with `react-testing-library`? + Custom events such as the ones from ODS can be tested in React with `fireEvent`. For example, to test the `odsChange` event on `ods-input`: -```javascript + { const handleChange = jest.fn(); - const { getByTestId } = render(); + const { getByTestId } = render(); fireEvent.change(getByTestId('ods-input'), { target: { value: 'new value' } }); expect(handleChange).toHaveBeenCalled(); }); -``` +`} + dark="true" + language="tsx" /> -## Can I use another CSS framework on top of ODS? + ODS components are primarily native web components, allowing you to apply styling from different CSS frameworks. @@ -50,18 +55,18 @@ Note that some imperative CSS frameworks like Bootstrap may override ODS styling Ensure compatibility by testing the integration in your project. -## How can I import ESModule / CommonJS packages? + -For detailed instructions on importing ESModule or CommonJS packages, please refer to our [Get Started](?path=/docs/ovhcloud-design-system-get-started--docs) documentation. +For detailed instructions on importing ESModule or CommonJS packages, please refer to our documentation. -## How can I import ODS CSS-only styling? + -To import ODS CSS-only styling, please refer to our [Get Started](?path=/docs/ovhcloud-design-system-get-started--docs) documentation. +To import ODS CSS-only styling, please refer to our documentation. -## [ODS >= v17.1.0 | Safari < v16.2] My form elements are not displayed? + If you are using a form component such as *OdsInput* on ODS version `>= 17.1.0`, you might encounter an issue with your component not being displayed on older versions of Safari (`< 16.2`). This is primarily due to older versions of Safari not supporting `AttachInternals` which are essential for our components to connect form elements with forms. -We would therefore recommend using versions of Safari superior to `16.4`. \ No newline at end of file +We would therefore recommend using versions of Safari superior to `16.4`. diff --git a/packages/storybook/stories/ovhcloud-design-system/get-started.mdx b/packages/storybook/stories/ovhcloud-design-system/get-started.mdx index 8cf38de5c..d693e4051 100644 --- a/packages/storybook/stories/ovhcloud-design-system/get-started.mdx +++ b/packages/storybook/stories/ovhcloud-design-system/get-started.mdx @@ -1,57 +1,63 @@ -import { Meta } from '@storybook/blocks'; +import { OdsLink } from '@ovhcloud/ods-components/react'; +import { Meta, Source } from '@storybook/blocks'; +import { Heading } from '../../src/components/heading/Heading'; -# Get Started + OVHcloud Design System is a set of reusable UI components to create a consistent user experience across OVHcloud pages and products, acting as a single source of truth. We provide agnostic Web components and their React, Vue wrapped versions. -All OVHcloud Design System packages are available on [**NPM**](https://www.npmjs.com/). +All OVHcloud Design System packages are available on . -## Installation + Include **ODS** in your projects like any other npm/yarn module: -```bash -npm install @ovhcloud/ods-components @ovhcloud/ods-themes -``` + or -```bash -yarn add @ovhcloud/ods-components @ovhcloud/ods-themes -``` + -## Usage + -### Web components (JavaScript) + There are two different ways of using ODS web component, using lazy-loading or bundle. -#### Lazy-loading + To use lazy-loading, just include in your project the loader script, it will take care of loading each component resources on-demand. -```typescript + -#### Bundle + If you prefer to use each component directly, you can import them separately. This is recommended when working on projects bundled (using webpack, rollup, ...) as it is more optimized for tree-shaking. -```typescript + -### React components + To use a React version of an ODS component, you need to import it from the `react` sub directory. -```typescript + { @@ -60,57 +66,63 @@ const App = () => { ); }; -``` +`} + dark="true" + language="tsx" /> Components are compatible with React v16.8+. -### Vue components + To use a Vue version of an ODS component, you need to import it from the `vue` sub directory. -```typescript + -``` +`} + dark="true" + language="tsx" /> Components are compatible with Vue 3. -## Import components constants + All enums, interfaces, events are available directly from the `ods-components` lib -```typescript + -## Import theme + You need to import a theme to display all the components correctly. It defines all the colors, typographies, etc... via ES import: -```javascript -import '@ovhcloud/ods-themes/default'; -``` + via Sass import: -```scss -@import '@ovhcloud/ods-themes/default'; -``` + diff --git a/packages/storybook/stories/ovhcloud-design-system/home.mdx b/packages/storybook/stories/ovhcloud-design-system/home.mdx index 979dc15fa..96205d903 100644 --- a/packages/storybook/stories/ovhcloud-design-system/home.mdx +++ b/packages/storybook/stories/ovhcloud-design-system/home.mdx @@ -1,89 +1,6 @@ import { Meta } from '@storybook/blocks'; -import '../components/link/link.stories'; -import '../components/text/text.stories'; +import { Homepage } from '../../src/components/homepage/Homepage'; -
-
- - - - - A collection of assets, guidelines and UI components for building consistent user experiences across OVHcloud products. - - - - - - - - - - - - - -
-
+ diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json index e8f441b06..41c01a590 100644 --- a/packages/storybook/tsconfig.json +++ b/packages/storybook/tsconfig.json @@ -23,7 +23,8 @@ "noFallthroughCasesInSwitch": true }, "include": [ - ".storybook", + ".storybook/*", + "src", "stories" ] } diff --git a/yarn.lock b/yarn.lock index 176a2c9d0..fbf881b54 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4349,6 +4349,7 @@ __metadata: "@storybook/addon-essentials": 8.0.4 "@storybook/addon-links": 8.0.4 "@storybook/blocks": 8.0.4 + "@storybook/components": 8.0.4 "@storybook/test": 8.0.4 "@storybook/web-components": 8.0.4 "@storybook/web-components-vite": 8.0.4