diff --git a/addons/rose/.storybook/main.js b/addons/rose/.storybook/main.js index 3d146546d..a1cce427b 100644 --- a/addons/rose/.storybook/main.js +++ b/addons/rose/.storybook/main.js @@ -1,5 +1,8 @@ module.exports = { - stories: ['../addon/components/**/*.stories.(js|mdx)'], + stories: [ + '../addon/components/**/*.stories.(js|mdx)', + '../stories/**/*.stories.mdx', + ], addons: [ '@storybook/addon-knobs', '@storybook/addon-actions', diff --git a/addons/rose/app/styles/app.scss b/addons/rose/app/styles/app.scss index 72d055984..41dd470b1 100644 --- a/addons/rose/app/styles/app.scss +++ b/addons/rose/app/styles/app.scss @@ -1 +1,35 @@ @import 'rose'; + +.swatches { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + padding: 0 !important; +} +.swatch { + width: 9rem; + //border: 1px solid var(--ui-gray-subtler-4); + border-radius: 4px; + margin: 0 0.5rem 0.5rem 0 !important; + box-shadow: 0px 3px 6px rgba(var(--stark-components), var(--opacity-3)); + + code { + display: block !important; + font-size: 0.65rem !important; + max-width: 100% !important; + padding: 0 !important; + border: 0 !important; + overflow-x: scroll !important; + color: var(--ui-gray) !important; + background: none !important; + } +} +.swatch-chip { + height: 5rem; + border: 0.5rem solid var(--subtle); + border-radius: 4px; +} +.swatch-detail { + border-top: 1px solid var(--ui-gray-subtler-4); + padding: 0.5rem; +} diff --git a/addons/rose/stories/button.stories.js b/addons/rose/stories/button.stories.js deleted file mode 100644 index 9527fe7ae..000000000 --- a/addons/rose/stories/button.stories.js +++ /dev/null @@ -1,68 +0,0 @@ -import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; - -export default { - title: 'Button', -}; - -const icons = { - none: null, - 'alert-circle-fill': 'alert-circle-fill', - 'chevron-right': 'chevron-right', - 'copy-action': 'copy-action', - 'lock-closed': 'lock-closed', -}; - -export const Normal = () => ({ - template: hbs` - - {{text}} - - `, - context: { - text: text('text', 'Button'), - submit: boolean('submit', false), - disabled: boolean('disabled', false), - style: select( - 'style', - { - primary: 'primary', - secondary: 'secondary', - warning: 'warning', - ghost: 'ghost', - 'inline-link-action': 'inline-link-action', - }, - 'primary' - ), - iconLeft: select('iconLeft', icons, 'copy-action'), - iconRight: select('iconRight', icons, 'chevron-right'), - onClick: action('clicked'), - }, -}); - -export const IconOnly = () => ({ - template: hbs` -

Icon-only buttons visually hide their text, revealing just an icon. - It's still important to include meaningful text in the body of the - button for accessibility purposes.

- - - {{text}} - - `, - context: { - text: text('text', 'Button'), - iconOnly: select('iconOnly', icons, 'lock-closed'), - }, -}); diff --git a/addons/rose/stories/colors.stories.mdx b/addons/rose/stories/colors.stories.mdx new file mode 100644 index 000000000..1026c131e --- /dev/null +++ b/addons/rose/stories/colors.stories.mdx @@ -0,0 +1,339 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; + + + +# Colors + +Colors are available using CSS custom properties. Find the color swatch you +need and copy the CSS custom property variable into your stylesheet. +Use only these properties when specifying colors instead of absolute SCSS color +variables. This ensures consistency and dark mode compatibility. + +**Tip**: Try it out in dark mode. Set your system to dark mode to see these +swatches in a different light. + +For example... +```css +.my-component { + color: var(--stark); + background-color: var(--subtle); +} +``` + +## Relative Poles + +These colors depend on light or dark mode. Use these most often +when specifying primary foreground and background colors. + + + +## Absolute Poles + +Some colors don't change in dark vs light mode. Use these values sparingly. + + + +## Theme Colors + +### Info + + + +### Alert + + + +### Warning + + + +### Failure + + + +### Success + + + +### Action + + + +### UI Border + + + +### UI Border + + diff --git a/addons/rose/stories/form/checkbox.stories.js b/addons/rose/stories/form/checkbox.stories.js deleted file mode 100644 index 28256a057..000000000 --- a/addons/rose/stories/form/checkbox.stories.js +++ /dev/null @@ -1,27 +0,0 @@ -import { hbs } from 'ember-cli-htmlbars'; -import { text, boolean } from '@storybook/addon-knobs'; - -export default { - title: 'Form/Checkbox', -}; - -export const Normal = () => ({ - template: hbs` - - `, - context: { - label: text('text', 'Checkbox 🛎'), - id: text('id', 'checkbox-1'), - name: text('name', 'checkbox-1'), - checked: boolean('checked', false), - error: boolean('error', false), - disabled: boolean('disabled', false), - }, -}); diff --git a/addons/rose/stories/form/input.stories.js b/addons/rose/stories/form/input.stories.js deleted file mode 100644 index f025d2901..000000000 --- a/addons/rose/stories/form/input.stories.js +++ /dev/null @@ -1,38 +0,0 @@ -import { hbs } from 'ember-cli-htmlbars'; -import { text, boolean, select } from '@storybook/addon-knobs'; - -export default { - title: 'Form/Input', -}; - -export const Normal = () => ({ - template: hbs` - - `, - context: { - type: select( - 'type', - { - text: 'text', - email: 'email', - number: 'number', - password: 'password', - }, - 'text' - ), - value: text('value', 'Value'), - label: text('label', 'Label'), - helperText: text('helperText', 'Helper text'), - disabled: boolean('disabled', false), - 'read-only': boolean('readonly', false), - error: boolean('error', false), - }, -}); diff --git a/addons/rose/stories/form/select.stories.js b/addons/rose/stories/form/select.stories.js deleted file mode 100644 index 9f20c384c..000000000 --- a/addons/rose/stories/form/select.stories.js +++ /dev/null @@ -1,45 +0,0 @@ -import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; - -export default { - title: 'Form/Select', -}; - -export const Normal = () => ({ - template: hbs` - - Choose an option - Value 1 - Value 2 - Value 3 - - `, - context: { - value: select( - 'value', - { - null: null, - 'value-1': 'value-1', - 'value-2': 'value-2', - 'value-3': 'value-3', - }, - null - ), - id: text('id', 'field-id'), - label: text('label', 'Label'), - helperText: text('helperText', 'Helper text'), - disabled: boolean('disabled', false), - error: boolean('error', false), - onChange: action('changed'), - }, -}); diff --git a/addons/rose/stories/form/textarea.stories.js b/addons/rose/stories/form/textarea.stories.js deleted file mode 100644 index 12fdcec50..000000000 --- a/addons/rose/stories/form/textarea.stories.js +++ /dev/null @@ -1,27 +0,0 @@ -import { hbs } from 'ember-cli-htmlbars'; -import { text, boolean } from '@storybook/addon-knobs'; - -export default { - title: 'Form/Textarea', -}; - -export const Normal = () => ({ - template: hbs` - - `, - context: { - value: text('value', 'Value'), - label: text('label', 'Label'), - helperText: text('helperText', 'Helper text'), - disabled: boolean('disabled', false), - 'read-only': boolean('readonly', false), - error: boolean('error', false), - }, -}); diff --git a/addons/rose/stories/icon.stories.js b/addons/rose/stories/icon.stories.js deleted file mode 100644 index f26371859..000000000 --- a/addons/rose/stories/icon.stories.js +++ /dev/null @@ -1,39 +0,0 @@ -import { hbs } from 'ember-cli-htmlbars'; -import { select } from '@storybook/addon-knobs'; - -export default { - title: 'Icon', -}; - -export const Normal = () => ({ - template: hbs` - - -
- -

For a full list of available icons, review the dist folder - of the @hashicorp/structure-icons package.

- `, - context: { - name: select( - 'name', - { - 'check-circle-outline': 'check-circle-outline', - 'copy-action': 'copy-action', - 'unfold-more': 'unfold-more', - 'unfold-less': 'unfold-less', - }, - 'check-circle-outline' - ), - - size: select( - 'size', - { - 'large (24px / default)': 'large', - 'medium (16px)': 'medium', - 'small (12px)': 'small', - }, - 'large' - ), - }, -}); diff --git a/addons/rose/stories/typography.stories.mdx b/addons/rose/stories/typography.stories.mdx new file mode 100644 index 000000000..fca83ec15 --- /dev/null +++ b/addons/rose/stories/typography.stories.mdx @@ -0,0 +1,147 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; + + + +# Typography + +To specify custom typography, use the SCSS mixin. +The type mixin accepts two parameters: a font size name +(required) and an optional font weight name (normal, semibold, bold). +This mixin sets both font size and line height, and optionally weight. + +For example... + +```scss +@import "utilities/type"; +.my-component { + @include type.type(m, bold); +} +``` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameFont SizeSCSSNote
+xl +28 +@include type.type(xl); +
+l +20 +@include type.type(l); + + +
+m +16 +@include type.type(m); + + +
+s +14 +@include type.type(s); + + +
+xs +12 +@include type.type(xs); + + +
+h1 +28 +@include type.type(h1); + +Same as xl, but different line height. +
+h2 +20 +@include type.type(h2); + +Same as l, but different line height. +
+h3 +16 +@include type.type(h3); + +Same as m, but different line height. +
+button +13 +@include type.type(button); + + +