diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 58bdaaf..0ee000e 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -17,6 +17,8 @@ module.exports = { 'color', 'nowrap', 'center', + 'etc', + 'flexbox', ], }, ], diff --git a/.storybook/preview.ts b/.storybook/preview.ts index f49769a..32e752a 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -9,6 +9,7 @@ import '../styles/themes.css'; import '../styles/docs/docs.css'; import './styles.css'; // Storybook style overrides +import '../docs/components/Cell'; import '../docs/components/Spacing'; import '../docs/components/TokenTable'; @@ -21,11 +22,13 @@ const preview: Preview = { storySort: { order: [ 'Docs', + ['Get Started', 'Theming', 'Why no Sass?', 'Support'], 'Showroom', - 'Composition', - 'Canvas', + 'Foundations', 'Content', - 'Controls', + 'Control', + 'Canvas', + 'Composition', 'Recipes', ], }, diff --git a/README.md b/README.md index 4bd044b..05d02e6 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,42 @@ # Diamond UI -[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=etchteam_diamond-ui&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=etchteam_diamond-ui) -[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=etchteam_diamond-ui&metric=code_smells)](https://sonarcloud.io/summary/new_code?id=etchteam_diamond-ui) -[![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=etchteam_diamond-ui&metric=sqale_index)](https://sonarcloud.io/summary/new_code?id=etchteam_diamond-ui) +Diamond UI is a collection of design tokens, CSS, web components and [CSS web components](https://etch.co/blog/css-web-components) that can be used to scaffold out web projects. + +The components are built using the methodology from the [Diamond UI docs](https://diamond/etch.co). They are extremely light weight, using very little JavaScript or external dependencies. The components and CSS should be installable in any project or framework. + +## Install + +Install the package from npm. + +```shell +npm i @etchteam/diamond-ui --save +``` + +Include the base CSS, either in JS or SCSS/CSS or HTML + +```scss +@import '~@etchteam/diamond-ui/diamond-ui.css'; +``` + +Components can be imported by importing the file, which will also give type completion. + +```js +import '@etchteam/diamond-ui/composition/Grid/Grid'; +``` + +And then used in HTML (or React, Vue, Angular, etc) + +```html + + + Grid content + + +``` + +## Configure + +Diamond comes with smart defaults for tokens, but these can all be overwritten by creating your own +set of CSS tokens applied to `:root`. All the tokens are listed in the [token docs](https://diamond.etch.co/components?path=/docs/foundations-tokens-border--docs) + +Diamond supports custom theming, but in the interests of needing to override the least amount of base config, no production-ready themes are available out of the box. Full docs on creating themes which can be applied to components are available in the [theme docs](https://diamond.etch.co/components?path=/docs/docs-theming--docs). diff --git a/components/canvas/Card/Card.stories.ts b/components/canvas/Card/Card.stories.ts index 956121d..dc6fdf4 100644 --- a/components/canvas/Card/Card.stories.ts +++ b/components/canvas/Card/Card.stories.ts @@ -31,6 +31,14 @@ export default { ], }, }, + parameters: { + docs: { + description: { + component: + 'The card component is a simple wrapper with a single slot and optional props for styling the card itself.', + }, + }, + }, }; export const Card: StoryObj = { diff --git a/components/composition/Enter/Enter.stories.ts b/components/composition/Enter/Enter.stories.ts index bb93818..38249aa 100644 --- a/components/composition/Enter/Enter.stories.ts +++ b/components/composition/Enter/Enter.stories.ts @@ -13,6 +13,14 @@ export default { options: ['fade', 'fade-in-up', 'boing'], }, }, + parameters: { + docs: { + description: { + component: + 'The enter component can be wrapped around content to animate it into view.', + }, + }, + }, }; export const Enter: StoryObj = { diff --git a/components/composition/FormGroup/FormGroup.stories.ts b/components/composition/FormGroup/FormGroup.stories.ts index 5bf96f9..07ce7ce 100644 --- a/components/composition/FormGroup/FormGroup.stories.ts +++ b/components/composition/FormGroup/FormGroup.stories.ts @@ -16,6 +16,14 @@ export default { options: ['horizontal', 'vertical'], }, }, + parameters: { + docs: { + description: { + component: + 'The form group component is a wrapper for grouping form elements with a label and optional help text.', + }, + }, + }, }; export const FormGroup: StoryObj = { @@ -74,7 +82,7 @@ export const FormGroupValidationError: StoryObj = { render: (args) => html` - Error message + Error message diff --git a/components/composition/Grid/Grid.stories.ts b/components/composition/Grid/Grid.stories.ts index 324eba3..f91c5bc 100644 --- a/components/composition/Grid/Grid.stories.ts +++ b/components/composition/Grid/Grid.stories.ts @@ -4,6 +4,11 @@ import { html } from 'lit'; import './Grid'; import './GridItem'; +const description = ` +The grid and grid item components are used to create a grid layout by exposing +the most commonly used flexbox properties as attributes. +`; + export default { component: 'diamond-grid', argTypes: { @@ -45,6 +50,13 @@ export default { options: ['xs', 'sm', 'md', 'lg', 'xl'], }, }, + parameters: { + docs: { + description: { + component: description, + }, + }, + }, }; export const Grid: StoryObj = { @@ -67,11 +79,7 @@ export const Grid: StoryObj = { ${[...Array(12).keys()].map( (i) => html` -
- ${i + 1} -
+ ${i + 1} `, )} @@ -87,3 +95,124 @@ Grid.args = { gap: 'md', inline: false, }; + +export const StretchOneSide = () => ` + + + Grow + + + Fixed + + + + + + Fixed + + + Grow + + +`; + +export const PushApart = () => ` + + + Left + + + Right + + +`; + +export const Centered = () => ` + + + Centered + + + Centered + + + Centered + + +`; + +export const ResponsiveColumns = () => ` + + + Cell + + + Cell + + + Cell + + + Cell + + +`; + +const responsiveColumnsDescription = ` +Changes from 1-4 columns through mobile-desktop +`; + +ResponsiveColumns.parameters = { + docs: { + description: { + story: responsiveColumnsDescription, + }, + }, +}; + +export const MobileCTA = () => ` + + + + + + + + + + + + + + +`; + +const mobileCTADescription = ` +This grid uses direction and justify to put the buttons in the right +order on mobile and desktop, with primary top on mobile and right on desktop. +`; + +MobileCTA.parameters = { + docs: { + description: { + story: mobileCTADescription, + }, + }, +}; + +export const VerticalCenterContent = () => ` + + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas + ut justo in velit euismod ultricies id sit amet diam. Vivamus convallis + molestie urna. +

+ + + Placeholder image + + + +`; diff --git a/components/composition/InputButtonGroup/InputButtonGroup.stories.ts b/components/composition/InputButtonGroup/InputButtonGroup.stories.ts index f06decf..e6402a9 100644 --- a/components/composition/InputButtonGroup/InputButtonGroup.stories.ts +++ b/components/composition/InputButtonGroup/InputButtonGroup.stories.ts @@ -6,8 +6,7 @@ export default { parameters: { docs: { description: { - component: - 'This composition allows for an input control to be paired with a button, handling scaling and alignment of both elements.', + component: 'Groups an input and button together as one unit.', }, }, }, diff --git a/components/content/HelpText/HelpText.stories.ts b/components/content/HelpText/HelpText.stories.ts index b12eeb5..1bea1d7 100644 --- a/components/content/HelpText/HelpText.stories.ts +++ b/components/content/HelpText/HelpText.stories.ts @@ -10,7 +10,7 @@ export default { docs: { description: { component: - 'A piece of text to provide additional information or context for form inputs, including form validation messages.', + 'A piece of text to provide additional information or context for form inputs, including [form validation messages](?path=/docs/composition-formgroup--docs).', }, }, }, diff --git a/components/content/Img/Img.stories.ts b/components/content/Img/Img.stories.ts index c4a36a9..8e7ca02 100644 --- a/components/content/Img/Img.stories.ts +++ b/components/content/Img/Img.stories.ts @@ -3,6 +3,11 @@ import { html } from 'lit'; import './Img'; +const description = ` +The image component wraps an img tag to provide some common image controls, +such as making it responsive or fitting a specific aspect ratio. +`; + export default { component: 'diamond-img', argTypes: { @@ -13,6 +18,13 @@ export default { options: ['fill', 'cover', 'contain'], }, }, + parameters: { + docs: { + description: { + component: description, + }, + }, + }, }; export const Img: StoryObj = { diff --git a/components/content/List/List.stories.ts b/components/content/List/List.stories.ts index 56727b4..2b16c56 100644 --- a/components/content/List/List.stories.ts +++ b/components/content/List/List.stories.ts @@ -4,6 +4,10 @@ import { html } from 'lit'; import '../Icon/Icon'; import './List'; +const description = ` +The list component adds a bit more power to HTML lists, such as spacing control and icon support. +`; + export default { component: 'diamond-list', argTypes: { @@ -30,6 +34,13 @@ export default { ], }, }, + parameters: { + docs: { + description: { + component: description, + }, + }, + }, }; export const List: StoryObj = { diff --git a/components/content/LoadingButton/LoadingButton.stories.ts b/components/content/LoadingButton/LoadingButton.stories.ts index 709a4a6..f7a60d1 100644 --- a/components/content/LoadingButton/LoadingButton.stories.ts +++ b/components/content/LoadingButton/LoadingButton.stories.ts @@ -5,6 +5,14 @@ import './LoadingButton'; export default { component: 'diamond-loading-button', + parameters: { + docs: { + description: { + component: + 'Used as a loading placeholder before the content is available. For a full demo, see the [loading recipe](?path=/docs/recipes-loading-skeleton--docs).', + }, + }, + }, }; export const LoadingButton: StoryObj = { diff --git a/components/content/LoadingImg/LoadingImg.stories.ts b/components/content/LoadingImg/LoadingImg.stories.ts index 8db5dc5..6b36d27 100644 --- a/components/content/LoadingImg/LoadingImg.stories.ts +++ b/components/content/LoadingImg/LoadingImg.stories.ts @@ -5,6 +5,14 @@ import './LoadingImg'; export default { component: 'diamond-loading-img', + parameters: { + docs: { + description: { + component: + 'Used as a loading placeholder before the content is available. For a full demo, see the [loading recipe](?path=/docs/recipes-loading-skeleton--docs).', + }, + }, + }, }; export const LoadingImg: StoryObj = { diff --git a/components/content/LoadingText/LoadingText.stories.ts b/components/content/LoadingText/LoadingText.stories.ts index cff77ca..889481b 100644 --- a/components/content/LoadingText/LoadingText.stories.ts +++ b/components/content/LoadingText/LoadingText.stories.ts @@ -5,6 +5,14 @@ import './LoadingText'; export default { component: 'diamond-loading-text', + parameters: { + docs: { + description: { + component: + 'Used as a loading placeholder before the content is available. For a full demo, see the [loading recipe](?path=/docs/recipes-loading-skeleton--docs).', + }, + }, + }, }; export const LoadingText: StoryObj = { diff --git a/components/content/Text/Text.stories.ts b/components/content/Text/Text.stories.ts index a953542..99cfe2a 100644 --- a/components/content/Text/Text.stories.ts +++ b/components/content/Text/Text.stories.ts @@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/web-components'; import { html } from 'lit'; const description = - 'Diamond text is a set of utility classes that can be added to any component or element to alter the text style.'; + 'A set of utility classes that can be added to any component or element to alter the text style.'; export default { component: 'diamond-text', diff --git a/components/control/RadioCheckbox/RadioCheckbox.stories.ts b/components/control/RadioCheckbox/RadioCheckbox.stories.ts index 5d9159e..bf8db99 100644 --- a/components/control/RadioCheckbox/RadioCheckbox.stories.ts +++ b/components/control/RadioCheckbox/RadioCheckbox.stories.ts @@ -30,7 +30,7 @@ export const Radio: StoryObj = { class="diamond-spacing-bottom-sm" > @@ -59,7 +59,7 @@ export const Checkbox: StoryObj = { class="diamond-spacing-bottom-sm" > @@ -89,38 +89,38 @@ export const CustomIcon: StoryObj = { class="diamond-spacing-bottom-sm" > - + - +