From b7e4701d382eeccbd710bcf11bffdf76f28bb87f Mon Sep 17 00:00:00 2001 From: Gavyn McKenzie Date: Fri, 7 Nov 2025 16:14:03 +0000 Subject: [PATCH 1/8] feat!: abbreviate diamond to dmd --- .eslintrc.cjs | 3 + .storybook/preview.ts | 30 +- .storybook/styles.css | 8 +- README.md | 8 +- components/canvas/Card/Card.css | 38 +- components/canvas/Card/Card.stories.ts | 46 +- components/canvas/Card/Card.ts | 4 +- components/canvas/Section/Section.css | 22 +- components/canvas/Section/Section.stories.ts | 62 +- components/canvas/Section/Section.ts | 4 +- components/composition/App/App.css | 2 +- components/composition/App/App.stories.ts | 30 +- components/composition/App/App.ts | 6 +- .../composition/Collapse/Collapse.stories.ts | 12 +- components/composition/Collapse/Collapse.ts | 24 +- components/composition/Dialog/Dialog.css | 20 +- .../composition/Dialog/Dialog.stories.ts | 14 +- components/composition/Enter/Enter.css | 12 +- components/composition/Enter/Enter.stories.ts | 10 +- components/composition/Enter/Enter.ts | 10 +- .../composition/FormGroup/FormGroup.css | 8 +- .../FormGroup/FormGroup.stories.ts | 46 +- components/composition/FormGroup/FormGroup.ts | 4 +- components/composition/Grid/Grid.css | 18 +- components/composition/Grid/Grid.stories.ts | 124 ++-- components/composition/Grid/Grid.ts | 4 +- components/composition/Grid/GridItem.css | 238 ++++---- .../composition/Grid/GridItem.stories.ts | 10 +- components/composition/Grid/GridItem.ts | 4 +- components/composition/Hidden/Hidden.css | 36 +- .../composition/Hidden/Hidden.stories.ts | 8 +- .../InputButtonGroup/InputButtonGroup.css | 7 +- .../InputButtonGroup.stories.ts | 38 +- .../InputButtonGroup/InputButtonGroup.ts | 4 +- components/composition/Spacing/Spacing.css | 68 +-- .../composition/Spacing/Spacing.stories.ts | 10 +- components/composition/Wrap/Wrap.css | 30 +- components/composition/Wrap/Wrap.stories.ts | 6 +- components/composition/Wrap/Wrap.ts | 4 +- components/content/HelpText/HelpText.css | 10 +- .../content/HelpText/HelpText.stories.ts | 20 +- components/content/HelpText/HelpText.ts | 4 +- components/content/Icon/Icon.css | 24 +- components/content/Icon/Icon.stories.ts | 80 +-- components/content/Icon/Icon.ts | 6 +- components/content/Img/Img.css | 20 +- components/content/Img/Img.stories.ts | 6 +- components/content/Img/Img.ts | 12 +- components/content/List/List.css | 28 +- components/content/List/List.stories.ts | 30 +- components/content/List/List.ts | 4 +- .../LoadingButton/LoadingButton.stories.ts | 8 +- .../content/LoadingButton/LoadingButton.ts | 4 +- .../content/LoadingImg/LoadingImg.stories.ts | 10 +- components/content/LoadingImg/LoadingImg.ts | 16 +- .../LoadingText/LoadingText.stories.ts | 6 +- components/content/LoadingText/LoadingText.ts | 4 +- components/content/Text/Text.css | 122 ++-- components/content/Text/Text.stories.ts | 20 +- components/control/Button/Button.css | 128 ++-- components/control/Button/Button.stories.ts | 218 +++---- components/control/Button/Button.ts | 4 +- components/control/Input/Input.css | 52 +- components/control/Input/Input.stories.ts | 62 +- components/control/Input/Input.ts | 4 +- components/control/Label/Label.css | 8 +- components/control/Label/Label.stories.ts | 12 +- components/control/Link/Link.css | 12 +- components/control/Link/Link.stories.ts | 10 +- components/control/Link/Link.ts | 4 +- .../control/RadioCheckbox/RadioCheckbox.css | 54 +- .../RadioCheckbox/RadioCheckbox.stories.ts | 44 +- .../control/RadioCheckbox/RadioCheckbox.ts | 6 +- docs/Theming.mdx | 4 +- docs/components/Spacing.ts | 18 +- docs/foundations/Typography.stories.ts | 2 +- docs/foundations/tokens/Border.mdx | 2 +- docs/foundations/tokens/Button.mdx | 4 +- docs/foundations/tokens/Color.mdx | 2 +- docs/foundations/tokens/Font.mdx | 2 +- docs/foundations/tokens/Input.mdx | 4 +- docs/foundations/tokens/Label.mdx | 2 +- docs/foundations/tokens/Radius.mdx | 2 +- docs/foundations/tokens/Shadow.mdx | 2 +- docs/foundations/tokens/Spacing.mdx | 46 +- docs/foundations/tokens/Theme.mdx | 2 +- docs/foundations/tokens/Transition.mdx | 22 +- docs/foundations/tokens/Wrap.mdx | 2 +- docs/recipes/LoadingSkeleton.stories.ts | 118 ++-- docs/recipes/Theming.stories.ts | 28 +- docs/showroom/Form.ts | 364 +++++------ docs/showroom/Sales.ts | 578 +++++++++--------- example/index.html | 16 +- example/package.json | 2 +- lib/pulse.ts | 15 +- styles/base/interactive.css | 2 +- styles/base/scaffolding.css | 6 +- styles/base/screen-reader.css | 2 +- styles/base/typography.css | 36 +- styles/docs/transition.css | 29 +- styles/themes.css | 164 +++-- styles/tokens/border.css | 8 +- styles/tokens/button.css | 104 ++-- styles/tokens/color.css | 32 +- styles/tokens/font.css | 54 +- styles/tokens/icon.css | 4 +- styles/tokens/input.css | 40 +- styles/tokens/label.css | 16 +- styles/tokens/radius.css | 8 +- styles/tokens/spacing.css | 20 +- styles/tokens/theme.css | 20 +- styles/tokens/transition.css | 35 +- styles/tokens/wrap.css | 16 +- 113 files changed, 1940 insertions(+), 1977 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 0ee000e..d3bfd62 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -19,6 +19,9 @@ module.exports = { 'center', 'etc', 'flexbox', + 'StoryObj', + 'dmd', + 'obj', ], }, ], diff --git a/.storybook/preview.ts b/.storybook/preview.ts index fab1704..3905979 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -122,21 +122,21 @@ const preview: Preview = { }, designTokenTables: { collections: { - 'diamond-radius': 'radius', - 'diamond-color': 'color', - 'diamond-spacing': 'spacing', - 'diamond-button-gap': 'spacing', - 'diamond-font-line-height': 'line-height', - 'diamond-font-size': 'font-size', - 'diamond-font-weight': 'font-weight', - 'diamond-theme': 'color', - 'diamond-button-primary': 'color', - 'diamond-button-secondary': 'color', - 'diamond-button-text': 'color', - 'diamond-font-family': 'font-family', - 'diamond-input-radio-checkbox-padding': 'spacing', - 'diamond-input-padding': 'spacing', - 'diamond-shadow': 'shadow', + 'dmd-radius': 'radius', + 'dmd-color': 'color', + 'dmd-spacing': 'spacing', + 'dmd-button-gap': 'spacing', + 'dmd-font-line-height': 'line-height', + 'dmd-font-size': 'font-size', + 'dmd-font-weight': 'font-weight', + 'dmd-theme': 'color', + 'dmd-button-primary': 'color', + 'dmd-button-secondary': 'color', + 'dmd-button-text': 'color', + 'dmd-font-family': 'font-family', + 'dmd-input-radio-checkbox-padding': 'spacing', + 'dmd-input-padding': 'spacing', + 'dmd-shadow': 'shadow', }, tokens: [ borderTokens, diff --git a/.storybook/styles.css b/.storybook/styles.css index 771dc71..1645578 100644 --- a/.storybook/styles.css +++ b/.storybook/styles.css @@ -3,10 +3,10 @@ } docs-placeholder { - background: var(--diamond-color-grey-50); - border: dotted 1px var(--diamond-theme-border-color); - border-radius: var(--diamond-radius-sm); + background: var(--dmd-color-grey-50); + border: dotted 1px var(--dmd-theme-border-color); + border-radius: var(--dmd-radius-sm); display: block; - padding: var(--diamond-spacing-lg); + padding: var(--dmd-spacing-lg); text-align: left; } diff --git a/README.md b/README.md index 05d02e6..7310e9a 100644 --- a/README.md +++ b/README.md @@ -27,11 +27,11 @@ import '@etchteam/diamond-ui/composition/Grid/Grid'; And then used in HTML (or React, Vue, Angular, etc) ```html - - + + Grid content - - + + ``` ## Configure diff --git a/components/canvas/Card/Card.css b/components/canvas/Card/Card.css index f51e51d..e69c24a 100644 --- a/components/canvas/Card/Card.css +++ b/components/canvas/Card/Card.css @@ -1,50 +1,50 @@ -diamond-card { - background: var(--diamond-theme-background); +dmd-card { + background: var(--dmd-theme-background); border: 0 none; - color: var(--diamond-theme-color); + color: var(--dmd-theme-color); display: block; - padding: var(--diamond-spacing); - transition: border-color var(--diamond-transition); + padding: var(--dmd-spacing); + transition: border-color var(--dmd-transition); &[shadow] { - box-shadow: var(--diamond-shadow); + box-shadow: var(--dmd-shadow); } &[muted] { - background: var(--diamond-theme-background-muted); + background: var(--dmd-theme-background-muted); } &[radius] { - border-radius: var(--diamond-radius); + border-radius: var(--dmd-radius); overflow: hidden; } &[padding='xs'] { - padding: var(--diamond-spacing-xs); + padding: var(--dmd-spacing-xs); } &[padding='sm'] { - padding: var(--diamond-spacing-sm); + padding: var(--dmd-spacing-sm); } &[padding='lg'] { - padding: var(--diamond-spacing-lg); + padding: var(--dmd-spacing-lg); } &[padding='xl'] { - padding: var(--diamond-spacing-xl); + padding: var(--dmd-spacing-xl); } &[padding='fluid-sm'] { - padding: var(--diamond-spacing-fluid-sm); + padding: var(--dmd-spacing-fluid-sm); } &[padding='fluid'] { - padding: var(--diamond-spacing-fluid); + padding: var(--dmd-spacing-fluid); } &[padding='fluid-lg'] { - padding: var(--diamond-spacing-fluid-lg); + padding: var(--dmd-spacing-fluid-lg); } &[padding='none'] { @@ -52,12 +52,12 @@ diamond-card { } &[border] { - border: 1px solid var(--diamond-theme-border-color); + border: 1px solid var(--dmd-theme-border-color); } @media (hover: hover) { &[border][href]:hover { - border-color: var(--diamond-theme-border-color-hover); + border-color: var(--dmd-theme-border-color-hover); } } } @@ -66,8 +66,8 @@ button, a { &:hover, &:focus-visible { - diamond-card { - border-color: var(--diamond-theme-border-color-hover); + dmd-card { + border-color: var(--dmd-theme-border-color-hover); } } } diff --git a/components/canvas/Card/Card.stories.ts b/components/canvas/Card/Card.stories.ts index dc6fdf4..b05aeec 100644 --- a/components/canvas/Card/Card.stories.ts +++ b/components/canvas/Card/Card.stories.ts @@ -6,7 +6,7 @@ import '../../composition/Grid/GridItem'; import './Card'; export default { - component: 'diamond-card', + component: 'dmd-card', argTypes: { theme: { control: { @@ -43,13 +43,13 @@ export default { export const Card: StoryObj = { render: ({ border, shadow, muted, radius, padding, theme }) => html` -

Placeholder content

@@ -58,7 +58,7 @@ export const Card: StoryObj = { wrapper with optional props for styling the card itself.

- + `, }; @@ -73,30 +73,30 @@ Card.args = { export const Interactive: StoryObj = { render: () => html` - - + + - +

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- + - - + + - - + + `, }; @@ -111,27 +111,27 @@ Interactive.parameters = { export const ImageCard: StoryObj = { render: () => html` - - - + + + Placeholder - +

Card title

-

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- + - - - + + + `, }; diff --git a/components/canvas/Card/Card.ts b/components/canvas/Card/Card.ts index b0e6b58..7b9a729 100644 --- a/components/canvas/Card/Card.ts +++ b/components/canvas/Card/Card.ts @@ -19,14 +19,14 @@ export interface CardAttributes { declare global { interface HTMLElementTagNameMap { - 'diamond-card': CardAttributes; + 'dmd-card': CardAttributes; } } declare module 'react' { namespace JSX { interface IntrinsicElements { - 'diamond-card': JSXCustomElement; + 'dmd-card': JSXCustomElement; } } } diff --git a/components/canvas/Section/Section.css b/components/canvas/Section/Section.css index 251c0d9..77779f9 100644 --- a/components/canvas/Section/Section.css +++ b/components/canvas/Section/Section.css @@ -1,35 +1,35 @@ -diamond-section { - background: var(--diamond-theme-background); - color: var(--diamond-theme-color); +dmd-section { + background: var(--dmd-theme-background); + color: var(--dmd-theme-color); display: block; - padding-block: var(--diamond-spacing); + padding-block: var(--dmd-spacing); &[padding='xs'] { - padding-block: var(--diamond-spacing-xs); + padding-block: var(--dmd-spacing-xs); } &[padding='sm'] { - padding-block: var(--diamond-spacing-sm); + padding-block: var(--dmd-spacing-sm); } &[padding='lg'] { - padding-block: var(--diamond-spacing-lg); + padding-block: var(--dmd-spacing-lg); } &[padding='xl'] { - padding-block: var(--diamond-spacing-xl); + padding-block: var(--dmd-spacing-xl); } &[padding='fluid-sm'] { - padding-block: var(--diamond-spacing-fluid-sm); + padding-block: var(--dmd-spacing-fluid-sm); } &[padding='fluid'] { - padding-block: var(--diamond-spacing-fluid); + padding-block: var(--dmd-spacing-fluid); } &[padding='fluid-lg'] { - padding-block: var(--diamond-spacing-fluid-lg); + padding-block: var(--dmd-spacing-fluid-lg); } &[padding='none'] { diff --git a/components/canvas/Section/Section.stories.ts b/components/canvas/Section/Section.stories.ts index 17a1bfa..ddfc9fb 100644 --- a/components/canvas/Section/Section.stories.ts +++ b/components/canvas/Section/Section.stories.ts @@ -18,7 +18,7 @@ text colour based on the current theme as well as vertical spacing. `; export default { - component: 'diamond-section', + component: 'dmd-section', parameters: { layout: 'fullscreen', docs: { @@ -55,30 +55,30 @@ export default { export const Section: StoryObj = { render: ({ padding, theme }) => html` - - + +

Section title

-

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

- - - + + + - - - - + + + + - - - - - + + + + + `, }; @@ -92,30 +92,30 @@ export const Theming = { return html` ${['light', 'medium', 'dark'].map( (theme) => html` - - + +

Section title

-

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

- - - + + + - - - - + + + + - - - - - + + + + + `, )} `; diff --git a/components/canvas/Section/Section.ts b/components/canvas/Section/Section.ts index a58557c..9e1a213 100644 --- a/components/canvas/Section/Section.ts +++ b/components/canvas/Section/Section.ts @@ -15,14 +15,14 @@ export interface SectionAttributes { declare global { interface HTMLElementTagNameMap { - 'diamond-section': SectionAttributes; + 'dmd-section': SectionAttributes; } } declare module 'react' { namespace JSX { interface IntrinsicElements { - 'diamond-section': JSXCustomElement; + 'dmd-section': JSXCustomElement; } } } diff --git a/components/composition/App/App.css b/components/composition/App/App.css index ef6e7b1..127b13c 100644 --- a/components/composition/App/App.css +++ b/components/composition/App/App.css @@ -1,4 +1,4 @@ -diamond-app { +dmd-app { display: grid; grid-template-areas: 'header' 'main' 'footer'; grid-template-columns: 100%; diff --git a/components/composition/App/App.stories.ts b/components/composition/App/App.stories.ts index 1d74372..6c6c179 100644 --- a/components/composition/App/App.stories.ts +++ b/components/composition/App/App.stories.ts @@ -4,7 +4,7 @@ import { html } from 'lit'; import './App'; export default { - component: 'diamond-app', + component: 'dmd-app', parameters: { layout: 'fullscreen', docs: { @@ -26,22 +26,22 @@ export default { export const App: StoryObj = { render: (args) => html` - - - + + +
Header
- - - - + + + +
Main
- - - - + + + +
Footer
- - - + + + `, }; diff --git a/components/composition/App/App.ts b/components/composition/App/App.ts index e201e1b..2de440e 100644 --- a/components/composition/App/App.ts +++ b/components/composition/App/App.ts @@ -7,7 +7,7 @@ export interface AppAttributes { header?: 'sticky'; } -@customElement('diamond-app') +@customElement('dmd-app') export class App extends LitElement { @property({ reflect: true }) header?: 'sticky'; @@ -28,14 +28,14 @@ export class App extends LitElement { declare global { interface HTMLElementTagNameMap { - 'diamond-app': AppAttributes; + 'dmd-app': AppAttributes; } } declare module 'react' { namespace JSX { interface IntrinsicElements { - 'diamond-app': JSXCustomElement; + 'dmd-app': JSXCustomElement; } } } diff --git a/components/composition/Collapse/Collapse.stories.ts b/components/composition/Collapse/Collapse.stories.ts index 9610904..73fcc34 100644 --- a/components/composition/Collapse/Collapse.stories.ts +++ b/components/composition/Collapse/Collapse.stories.ts @@ -11,7 +11,7 @@ The button to control the collapse must include aria-controls and aria-expanded `; export default { - component: 'diamond-collapse', + component: 'dmd-collapse', parameters: { docs: { description: { @@ -23,7 +23,7 @@ export default { export const Collapse: StoryObj = { render: () => html` - + - - + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit leo sodales sem sollicitudin maximus. @@ -47,14 +47,14 @@ export const Collapse: StoryObj = { Nulla id enim vehicula, varius leo et, sagittis libero. Nam vel dolor fringilla, viverra massa ut, pharetra enim. Praesent non varius nisl.

- + - - +

- Fake loading title + Fake loading title

- + Lorem ipsum dolor consequit sit amet epsilon - +

- - + +
- + ${[1, 2, 3, 4].map( (i) => html` - - - - + + - - -

- - Card title - + > + +

+ Card title

-

- +

+ Lorem ipsum dolor consequit sit amet epsilon evitcus smartrum. - +

- - - Button text - - - - - + + Button text + + + + `, )} - +
- - + + `, }; diff --git a/docs/recipes/Theming.stories.ts b/docs/recipes/Theming.stories.ts index 6f50734..c8d6e70 100644 --- a/docs/recipes/Theming.stories.ts +++ b/docs/recipes/Theming.stories.ts @@ -19,34 +19,34 @@ export default { export const Theming: StoryObj = { render: () => html` - - - + + +

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- - - - + + + +

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- - - - + + + +

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- - - + + + `, }; diff --git a/docs/showroom/Form.ts b/docs/showroom/Form.ts index f98ba2a..7f172f6 100644 --- a/docs/showroom/Form.ts +++ b/docs/showroom/Form.ts @@ -7,7 +7,7 @@ import '../../components/content/Icon/Icon'; import '../../components/control/RadioCheckbox/RadioCheckbox'; const infoIcon = html` - + - + `; const chevronDownIcon = html` - + - + `; const envelopeIcon = html` - + - + `; const infoButton = html` - + - + `; const checkIcon = html` - + - + `; export const Form: StoryObj = { render: () => html` - +
- - + + Logo - - + +
- - - + + - + Placeholder - - -

Big title, clever words

+ + +

Big title, clever words

Pellentesque posuere enim ex, vel rutrum ligula semper et. Donec vel nulla nibh.

- - + + -
- - + + - +

Card title

- - ${infoButton} - -
- - + + ${infoButton} + +
+ + ${checkIcon} Nulla ante eu consequat. - - - + + + - - - - + + + + - - + - +

Card title

- - ${infoButton} - -
+ + ${infoButton} + +
- - - + + - - ${infoIcon} - - + + ${infoIcon} + + ${chevronDownIcon} - - + + - - - + + - - ${infoIcon} - + + ${infoIcon} +
- + - - + + - +
- + - - + ${envelopeIcon} - - Help text - + + Help text + -
- + - - + + - +
- + -
- - - +
+ + + - - - - + + + + - - + - +

Card title

- - ${infoButton} - -
- - - + + ${infoButton} + +
+ + + - - - - + + + + - - - - + + + + - - + - +

Card title

- - ${infoButton} - + + ${infoButton} + -
+
- - + +

Section title

- - - + + + - - - + + + - - + ${chevronDownIcon} - - + + -
- + - - + + - +
- + -
- + - - + + - +
- + -
- - - +
+ + + - - - - + + + + - - - - + + + + - - + - +

Card title

- - ${infoButton} - -
- + + ${infoButton} + +
+ - - + +
- - - + + + - - - - - + + + + +
- + `, }; diff --git a/docs/showroom/Sales.ts b/docs/showroom/Sales.ts index 9640646..38b3319 100644 --- a/docs/showroom/Sales.ts +++ b/docs/showroom/Sales.ts @@ -6,33 +6,33 @@ import '../../components/composition/App/App'; export const Sales: StoryObj = { render: () => html` - +
- - + + Logo - - + +
- - - - - + + + + + Eyebrow text

Big title, clever words

- - +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -40,23 +40,23 @@ export const Sales: StoryObj = { Curabitur laoreet iaculis orci, id hendrerit odio consectetur eu.

- - - + + - - + + - + ${[0, 1, 2, 3].map( (i) => html` - - + @@ -66,179 +66,179 @@ export const Sales: StoryObj = { height="64" alt="Award" /> - - + + `, )} - - - - - - - - - - + + + + + + + + +

Section title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut sapien eget nisl interdum porta vitae eu libero.

- - + + - ${[0, 1, 2, 3].map( (i) => html` - - - - + USP - +

USP title

Phasellus sodales quam fermentum enim lobortis, non pellentesque est malesuada.

- - - + + + `, )} - + - - - - + + + - - - - - - - - - - - + + + + + + + + + +

Section title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut sapien eget nisl interdum porta vitae eu libero.

- - + + - ${[0, 1, 2].map( (i) => html` - - + - - + USP - +

USP title

-

+

Phasellus sodales quam fermentum enim lobortis, non pellentesque est malesuada.

- - + - + Link text - - - - + + + + `, )} - - - - - - - - - + + + + + + + + + Placeholder - - - - + + + +

Section title

- +
    ${[0, 1, 2].map( () => html` @@ -250,28 +250,28 @@ export const Sales: StoryObj = { `, )}
- - - - + + + - - - - - - - - - - - - - + + + + + + + + + + + + +

Section title

Proin dapibus, quam nec ullamcorper suscipit, mauris ipsum @@ -283,169 +283,169 @@ export const Sales: StoryObj = { Cras dapibus vestibulum dapibus.

Vestibulum dapibus — Molestie - - - - - - - - - - - - + + + + + + + + + + + +

Section title

Etiam nec sagittis quam, eu vehicula felis. Sed vel iaculis velit. Suspendisse id congue orci. Integer rutrum bibendum vulputate.

- - + + ${[0, 1, 2, 3].map( (i) => html` - - + - + Placeholder - - - + + + `, )} - - - - - - - - + + + + + + +

Section title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut sapien eget nisl interdum porta vitae eu libero.

- - + + - ${[0, 1, 2, 3].map( (i) => html` - - + - - - - + + + + ${[0, 1, 2, 3, 4].map( () => html` - + Placeholder - + `, )} - - - + + + Placeholder - - + +

Card title

-

+

Integer fermentum sed libero ac accumsan. Nullam et erat id erat ornare vestibulum et ac leo. Integer eu eros rhoncus, volutpat turpis nec, dignissim nisi. Suspendisse vel efficitur libero, eget finibus dui.

- - + + Placeholder - - + + Cras dapibus - - - - - + + + + + `, )} - + - - - - + + + - - - - - - - - - - - + + + + + + + + + + - -

Section title

- + +

Section title

+ ${[0, 1, 2].map( () => html` - - + + - - + + `, )} - - + + - + ${[0, 1, 2, 3, 4, 5].map( (i) => html` - - + - + Placeholder - - - + + + `, )} - - - - - - - - + + + + + + +

Section title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut sapien eget nisl interdum porta vitae eu libero.

- - + + - - - - + + + Placeholder - + Eyebrow text -

+

Suspendisse nibh turpis, posuere ac ultrices non

Integer fermentum sed libero ac accumsan.

- Suspendisse — Vel efficitur - - - - + + + +
    ${[0, 1, 2].map( (i) => html`
  • - - - - + + + Placeholder - - - + + + Eyebrow text -

    +

    Suspendisse nibh turpis, posuere ac ultrices non

    - Suspendisse — Vel efficitur -     -     -     + + +
    • `, )}
- - - - - + + + + +