From 0a122de4c6e89ca4bec93b8d12d2b6879e41dc0a Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Fri, 8 May 2020 16:49:00 -0400 Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20migrate=20remaining?= =?UTF-8?q?=20stories=20to=20storybook=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addons/rose/stories/colors.stories.mdx | 2 + addons/rose/stories/sizing.stories.mdx | 93 +++++ addons/rose/stories/style-guide.stories.js | 442 --------------------- addons/rose/stories/typography.stories.mdx | 2 + 4 files changed, 97 insertions(+), 442 deletions(-) create mode 100644 addons/rose/stories/sizing.stories.mdx delete mode 100644 addons/rose/stories/style-guide.stories.js diff --git a/addons/rose/stories/colors.stories.mdx b/addons/rose/stories/colors.stories.mdx index 1026c131e..e7b7a3c28 100644 --- a/addons/rose/stories/colors.stories.mdx +++ b/addons/rose/stories/colors.stories.mdx @@ -1,5 +1,7 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { hbs } from 'ember-cli-htmlbars'; +import { action } from '@storybook/addon-actions'; +import { text, boolean, select } from '@storybook/addon-knobs'; diff --git a/addons/rose/stories/sizing.stories.mdx b/addons/rose/stories/sizing.stories.mdx new file mode 100644 index 000000000..641eadd37 --- /dev/null +++ b/addons/rose/stories/sizing.stories.mdx @@ -0,0 +1,93 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; +import { action } from '@storybook/addon-actions'; +import { text, boolean, select } from '@storybook/addon-knobs'; + + + +# Sizing + +Use sizing function for things like margins, +padding, and borders. Sizes are returned in rem units rather than +pixels, but have been calibrated with pixel equivalents in mind. + +To use the rems sizing function, first import the sizing module, +then use it in your code wherever you normally specify a size. For example... + +```scss +@import "variables/sizing"; +border: sizing.rems(xxxxs) solid; +``` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePX Equiv.SCSS
xxl48sizing.rems(xxl)
xl36sizing.rems(xl)
l24sizing.rems(l)
m16sizing.rems(m)
s12sizing.rems(s)
xs8sizing.rems(xs)
off-xs5sizing.rems(off-xs)
xxs4sizing.rems(xxs)
xxxs2sizing.rems(xxxs)
xxxxs1sizing.rems(xxxxs)
diff --git a/addons/rose/stories/style-guide.stories.js b/addons/rose/stories/style-guide.stories.js deleted file mode 100644 index 8400d9f10..000000000 --- a/addons/rose/stories/style-guide.stories.js +++ /dev/null @@ -1,442 +0,0 @@ -import { hbs } from 'ember-cli-htmlbars'; - -export default { - title: 'Style Guide', -}; - -export const Colors = () => ({ - template: hbs` - - -
-

Colors

-

- Find the color you need and copy the CSS custom property variable into - your stylesheet. - Use only these variables when specifying colors. This ensures - consistency and dark mode compatibility. -

-
- -
-
-

Relative Poles

-

- These colors depend on light or dark mode. Use these most often - when specifying primary foreground and backround colors. -

-
    -
  • -
    -
    - var(--subtle) -
    -
    • - -
  • -
    -
    - var(--stark) -
    -
    • -
-
-
-

Absolute Colors

-

- Colors sometimes don't change in dark mode. Use these - values sparingly. -

-
    -
  • -
    -
    - var(--white) -
    -
    • - -
  • -
    -
    - var(--black) -
    -
    • -
-
-
- -
-

Theme Colors

-

Info

- -
-
-
-

Alert

-
    - {{#each colors.alert as |color|}} -
  • -
    -
    - var(--{{color}}) -
    -
    • - {{/each}} -
-
-
-

Warning

-
    - {{#each colors.warning as |color|}} -
  • -
    -
    - var(--{{color}}) -
    -
    • - {{/each}} -
-
-
-
-
-

Failure

-
    - {{#each colors.failure as |color|}} -
  • -
    -
    - var(--{{color}}) -
    -
    • - {{/each}} -
-
-
-

Success

-
    - {{#each colors.success as |color|}} -
  • -
    -
    - var(--{{color}}) -
    -
    • - {{/each}} -
-
-
-
-

UI Border

- -

UI Gray

- -
- `, - context: { - colors: { - relative: ['subtle', 'stark'], - absolute: ['white', 'black'], - info: [ - 'info-subtler-3', - 'info-subtler-2', - 'info-subtler-1', - 'info', - 'info-starker-1', - 'info-starker-2', - ], - alert: ['alert-subtler-2', 'alert-subtler-1', 'alert', 'alert-starker-1'], - warning: [ - 'warning-subtler-2', - 'warning-subtler-1', - 'warning', - 'warning-starker-1', - ], - failure: [ - 'failure-subtler-2', - 'failure-subtler-1', - 'failure', - 'failure-starker-1', - ], - success: [ - 'success-subtler-2', - 'success-subtler-1', - 'success', - 'success-starker-1', - ], - 'ui-border': ['ui-border-subtler-1', 'ui-border'], - 'ui-gray': [ - 'ui-gray-subtler-6', - 'ui-gray-subtler-5', - 'ui-gray-subtler-4', - 'ui-gray-subtler-3', - 'ui-gray-subtler-2', - 'ui-gray-subtler-1', - 'ui-gray', - 'ui-gray-starker-1', - 'ui-gray-starker-2', - 'ui-gray-starker-3', - 'ui-gray-starker-4', - ], - }, - }, -}); - -export const Sizing = () => ({ - template: hbs` - -
-

Sizing

-

- Use sizing function for things like margins, - padding, and borders. Sizes are returned in rem units rather than - pixels, but have been calibrated with pixel equivalents in mind. -

-

- To use the rems sizing function, first import the sizing module, - then use it in your code wherever you normally specify a size: -

-
-@import "variables/sizing";
-border: sizing.rems(xxxxs) solid;
- - - - - - - - - - {{#each sizes as |size|}} - - - - - - {{/each}} - -
NamePX Equiv.SCSS
- {{size.code}} - {{size.pixels}} - sizing.rems({{size.code}}) -
-
- `, - context: { - sizes: [ - { code: 'xxl', pixels: 48 }, - { code: 'xl', pixels: 36 }, - { code: 'l', pixels: 24 }, - { code: 'm', pixels: 16, isBase: true }, - { code: 's', pixels: 12 }, - { code: 'xs', pixels: 8 }, - { code: 'off-xs', pixels: 5 }, - { code: 'xxs', pixels: 4 }, - { code: 'xxxs', pixels: 2 }, - { code: 'xxxxs', pixels: 1 }, - ], - }, -}); - -export const Typography = () => ({ - template: hbs` - -
-

Typography

-

- Paragraphs and headings are preconfigured for typography and margin. -

-

- To specify custom typography, use the SCSS variables and 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. -

-
-@import "utilities/type";
-.my-component {
-  @include type.type(m, bold);
-}
- - - - - - - - - - - {{#each sizes as |size|}} - - - - - - - {{/each}} - -
NameFont SizeSCSSNote
- {{size.code}} - {{size.pixels}} - @include type.type({{size.code}}); - - {{size.note}} -
-
- `, - context: { - sizes: [ - { code: 'xl', pixels: 28 }, - { code: 'l', pixels: 20 }, - { code: 'm', pixels: 16 }, - { code: 's', pixels: 14 }, - { code: 'xs', pixels: 12 }, - { - code: 'h1', - pixels: 28, - note: 'Same as xl, but different line height.', - }, - { code: 'h2', pixels: 20, note: 'Same as l, but different line height.' }, - { code: 'h3', pixels: 16, note: 'Same as m, but different line height.' }, - { code: 'button', pixels: 13 }, - ], - }, -}); diff --git a/addons/rose/stories/typography.stories.mdx b/addons/rose/stories/typography.stories.mdx index fca83ec15..e75bf2869 100644 --- a/addons/rose/stories/typography.stories.mdx +++ b/addons/rose/stories/typography.stories.mdx @@ -1,5 +1,7 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { hbs } from 'ember-cli-htmlbars'; +import { action } from '@storybook/addon-actions'; +import { text, boolean, select } from '@storybook/addon-knobs';