diff --git a/.storybook/preview.ts b/.storybook/preview.ts index b243497..141ed49 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -17,10 +17,12 @@ const preview: Preview = { storySort: { order: [ 'Docs', + 'Showroom', 'Composition', 'Canvas', 'Content', 'Controls', + 'Recipes', ], }, }, diff --git a/components/composition/FormGroup/FormGroup.css b/components/composition/FormGroup/FormGroup.css index 38838f7..52332ba 100644 --- a/components/composition/FormGroup/FormGroup.css +++ b/components/composition/FormGroup/FormGroup.css @@ -1,8 +1,9 @@ diamond-form-group { + align-items: baseline; display: grid; gap: var(--diamond-spacing-sm); - label { + label:not(diamond-radio-checkbox label) { /* Negate the extra label height to account for the form group gap */ margin-block: calc( (var(--diamond-label-height) / var(--diamond-font-line-height) / 4) * -1 diff --git a/components/content/List/List.css b/components/content/List/List.css index a4e76b5..2c29f02 100644 --- a/components/content/List/List.css +++ b/components/content/List/List.css @@ -1,5 +1,6 @@ diamond-list { --diamond-list-spacing: 0; + display: block; li, dl > div { diff --git a/components/control/Button/Button.css b/components/control/Button/Button.css index e898030..d08c261 100644 --- a/components/control/Button/Button.css +++ b/components/control/Button/Button.css @@ -12,6 +12,7 @@ diamond-button { --_padding-block: var(--diamond-button-padding-block); --_padding-inline: var(--diamond-button-padding-inline); --_line-height: var(--diamond-button-line-height); + --diamond-icon-baseline-adjust: 0.1em; display: inline-block; /* Structural button styles */ diff --git a/components/control/Input/Input.css b/components/control/Input/Input.css index dd5d9a3..23d6790 100644 --- a/components/control/Input/Input.css +++ b/components/control/Input/Input.css @@ -1,7 +1,9 @@ diamond-input { --_background: var(--diamond-input-background); --_border-color: var(--diamond-input-border-color); + --diamond-icon-baseline-adjust: 0.1em; + align-items: center; background: var(--_background); border: var(--diamond-input-border-width) solid var(--_border-color); border-radius: var(--diamond-input-border-radius); diff --git a/components/control/RadioCheckbox/RadioCheckbox.css b/components/control/RadioCheckbox/RadioCheckbox.css index 65fba87..5ad648a 100644 --- a/components/control/RadioCheckbox/RadioCheckbox.css +++ b/components/control/RadioCheckbox/RadioCheckbox.css @@ -3,10 +3,11 @@ diamond-radio-checkbox { --_border-color: var(--diamond-input-border-color); --_border-radius: var(--diamond-input-checkbox-border-radius); --_inner-border-radius: 0; - --_indicator-padding: 0; + --_indicator-padding: var(--diamond-input-radio-checkbox-padding); --_indicator-width: calc(var(--diamond-font-line-height) * 1em); --_indicator-inner-width: 100%; + align-items: center; color: inherit; cursor: pointer; display: flex; @@ -14,6 +15,7 @@ diamond-radio-checkbox { font-weight: inherit; gap: var(--diamond-spacing-sm); line-height: inherit; + min-height: var(--diamond-spacing-thumb); &:hover, &:focus-within { @@ -60,9 +62,10 @@ diamond-radio-checkbox { &::part(fallback-icon) { display: block; height: auto; + margin: calc(var(--_indicator-padding) * -1); opacity: 0; position: relative; - transform: scale(0.9); + transform: scale(1.45); transition: transform var(--diamond-transition), opacity var(--diamond-transition); @@ -108,11 +111,10 @@ diamond-radio-checkbox { &:has(input[type='radio']) { --_border-radius: 50%; --_inner-border-radius: 50%; - --_indicator-padding: var(--diamond-input-radio-checkbox-padding); --_indicator-inner-width: calc(100% - (var(--_indicator-padding) * 2)); &::part(fallback-icon) { - display: none; + visibility: hidden; /* Display none messes up alignment in horizontal forms */ } } @@ -128,7 +130,7 @@ diamond-radio-checkbox { img, &::part(fallback-icon) { opacity: 1; - transform: scale(1); + transform: scale(1.6); transition-delay: calc(var(--diamond-transition-duration) / 2); } } diff --git a/docs/showroom/Form.ts b/docs/showroom/Form.ts new file mode 100644 index 0000000..f98ba2a --- /dev/null +++ b/docs/showroom/Form.ts @@ -0,0 +1,463 @@ +import { StoryObj } from '@storybook/web-components'; +import { html } from 'lit'; + +import '../../components/composition/App/App'; +import '../../components/composition/Enter/Enter'; +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

+

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

+ + + +
+ + + +

+ Card title +

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

+ Card title +

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

+ Card title +

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

+ Card title +

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

Section title

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

+ Card title +

+ + ${infoButton} + +
+ + + + +
+ + + + + + + + + + +
+ + `, +}; diff --git a/docs/showroom/Sales.ts b/docs/showroom/Sales.ts new file mode 100644 index 0000000..9640646 --- /dev/null +++ b/docs/showroom/Sales.ts @@ -0,0 +1,716 @@ +import { StoryObj } from '@storybook/web-components'; +import { html } from 'lit'; + +import '../../components/composition/Enter/Enter'; +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. + Morbi ut sapien eget nisl interdum porta vitae eu libero. + Curabitur laoreet iaculis orci, id hendrerit odio + consectetur eu. +

+ + + + + + + + + ${[0, 1, 2, 3].map( + (i) => html` + + + 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` +
  • + Integer rutrum bibendum vulputate. Etiam nec + sagittis quam, eu vehicula felis. Sed vel iaculis + velit. +
    • + `, + )} +
+ + + + + + + + + + + + + + + + + + +

Section title

+

+ Proin dapibus, quam nec ullamcorper suscipit, mauris ipsum + rhoncus magna, molestie sollicitudin massa nibh vel + tortor. +

+

+ Nullam vitae ex eget turpis mattis laoreet sed id arcu. + 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

+ + ${[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 +     +     +     +
    • + `, + )} +
+ + + + + +
+ + + + `, +}; diff --git a/docs/showroom/Showroom.stories.ts b/docs/showroom/Showroom.stories.ts new file mode 100644 index 0000000..4a4c69c --- /dev/null +++ b/docs/showroom/Showroom.stories.ts @@ -0,0 +1,9 @@ +export { Sales } from './Sales'; +export { Form } from './Form'; + +export default { + title: 'Showroom/Templates', + parameters: { + layout: 'fullscreen', + }, +}; diff --git a/styles/tokens/spacing.css b/styles/tokens/spacing.css index 93dbe7d..f190c06 100644 --- a/styles/tokens/spacing.css +++ b/styles/tokens/spacing.css @@ -1,5 +1,5 @@ :root { - --diamond-spacing-thumb: 2.75rem; + --diamond-spacing-thumb: 2.625rem; --diamond-spacing: 1rem; --diamond-spacing-xs: calc(var(--diamond-spacing) / 4);