docs: add more story docs (#43)

* add link & link-to stories * add loader story * add modal story * add radio story * add radio toggle story * add switch story * add select story
denali-design · Sep 30, 2020 · 4eebe67 · 4eebe67
1 parent 4a7d058
commit 4eebe67
Show file tree

Hide file tree

Showing 28 changed files with 397 additions and 212 deletions.
diff --git a/addon/components/denali-link-enums.js b/addon/components/denali-link-enums.js
@@ -0,0 +1,7 @@
+/**
+ * Copyright 2020, Verizon Media
+ * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
+ */
+
+export const STATES = ['default', 'active', 'disabled'];
+export const SIZES = ['default', 'small'];
diff --git a/addon/components/denali-link.js b/addon/components/denali-link.js
@@ -5,13 +5,11 @@
 import Component from '@glimmer/component';
 import { arg } from 'ember-arg-types';
 import { boolean, oneOf, string } from 'prop-types';
-
-const states = ['active', 'disabled'];
-const sizes = ['small'];
+import { SIZES, STATES } from './denali-link-enums';
 
 export default class DenaliLinkComponent extends Component {
-  @arg(oneOf(states)) state;
-  @arg(oneOf(sizes)) size;
+  @arg(oneOf(STATES)) state;
+  @arg(oneOf(SIZES)) size;
   @arg(boolean) isSecondary;
   @arg(boolean) isSub;
   @arg(string) iconFront;

diff --git a/tests/dummy/app/routes/denali-loader.js → addon/components/denali-loader-enums.js b/tests/dummy/app/routes/denali-loader.js → addon/components/denali-loader-enums.js
@@ -2,6 +2,5 @@
  * Copyright 2020, Verizon Media
  * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
  */
-import Route from '@ember/routing/route';
 
-export default class DenaliLoaderRoute extends Route {}
+export const SIZES = ['default', 'extrasmall', 'small', 'medium', 'large'];
diff --git a/addon/components/denali-loader.hbs b/addon/components/denali-loader.hbs
@@ -1,2 +1,2 @@
 {{! Copyright 2020, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }}
-<div class="loader {{this.sizeClass}} {{this.isInverseClass}}"></div>
+<div class="loader {{this.sizeClass}} {{this.isInverseClass}}" ...attributes></div>
diff --git a/addon/components/denali-loader.js b/addon/components/denali-loader.js
@@ -5,11 +5,10 @@
 import Component from '@glimmer/component';
 import { arg } from 'ember-arg-types';
 import { boolean, oneOf } from 'prop-types';
-
-const sizes = ['extrasmall', 'small', 'medium', 'large'];
+import { SIZES } from './denali-loader-enums';
 
 export default class DenaliLoaderComponent extends Component {
-  @arg(oneOf(sizes))
+  @arg(oneOf(SIZES))
   size;
 
   @arg(boolean)

diff --git a/stories/link-to.stories.js b/stories/link-to.stories.js
@@ -0,0 +1,36 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { withKnobs, text } from '@storybook/addon-knobs';
+import { argument, content, attribute } from './knob-categories';
+export default {
+  title: 'DenaliLinkTo',
+  component: 'DenaliLinkTo',
+  decorators: [withKnobs],
+};
+
+export const Default = () => ({
+  template: hbs`
+    <DenaliLinkTo @route="index">
+      Denali Link To
+    </DenaliLinkTo>
+  `,
+});
+
+export const Playground = () => ({
+  template: hbs`
+    <DenaliLinkTo
+      @route="/"
+      @iconFront={{iconFront}}
+      @iconBack={{iconBack}}
+      class={{class}}
+    >
+      {{content}}
+    </DenaliLinkTo>
+  `,
+  context: {
+    route: text('route', 'index', argument),
+    iconFront: text('iconFront', 'home', argument),
+    iconBack: text('iconBack', '', argument),
+    content: text('content', 'Link To Home', content),
+    class: text('class', '', attribute),
+  },
+});
diff --git a/stories/link.stories.js b/stories/link.stories.js
@@ -0,0 +1,45 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';
+import { argument, content, attribute } from './knob-categories';
+import { SIZES, STATES } from '../addon/components/denali-link-enums';
+
+export default {
+  title: 'DenaliLink',
+  component: 'DenaliLink',
+  decorators: [withKnobs],
+};
+
+export const Default = () => ({
+  template: hbs`
+    <DenaliLink href="https://denali.design">
+      Denali Link
+    </DenaliLink>
+  `,
+});
+
+export const Playground = () => ({
+  template: hbs`
+    <DenaliLink
+      @iconFront={{iconFront}}
+      @iconBack={{iconBack}}
+      @state={{state}}
+      @size={{size}}
+      @isSecondary={{isSecondary}}
+      href={{href}}
+      class={{class}}
+    >
+      {{content}}
+    </DenaliLink>
+  `,
+  context: {
+    route: text('route', 'index', argument),
+    iconFront: text('iconFront', 'denali', argument),
+    iconBack: text('iconBack', '', argument),
+    size: select('size', SIZES, SIZES[0], argument),
+    state: select('state', STATES, STATES[0], argument),
+    isSecondary: boolean('isSecondary', false, argument),
+    href: text('href', 'https://denali.design', attribute),
+    class: text('class', '', attribute),
+    content: text('content', 'Denali Design', content),
+  },
+});
diff --git a/stories/loader.stories.js b/stories/loader.stories.js
@@ -0,0 +1,31 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';
+import { argument, attribute } from './knob-categories';
+import { SIZES } from '../addon/components/denali-loader-enums';
+
+export default {
+  title: 'DenaliLoader',
+  component: 'DenaliLoader',
+  decorators: [withKnobs],
+};
+
+export const Default = () => ({
+  template: hbs`
+    <DenaliLoader />
+  `,
+});
+
+export const Playground = () => ({
+  template: hbs`
+    <DenaliLoader
+      @isInverse={{isInverse}}
+      @size={{size}}
+      class={{class}}
+    />
+  `,
+  context: {
+    size: select('size', SIZES, SIZES[0], argument),
+    isInverse: boolean('isInverse', false, argument),
+    class: text('class', '', attribute),
+  },
+});
diff --git a/stories/modal.stories.js b/stories/modal.stories.js
@@ -0,0 +1,51 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+import { argument, attribute, content } from './knob-categories';
+
+export default {
+  title: 'DenaliModal',
+  component: 'DenaliModal',
+  decorators: [withKnobs],
+};
+
+export const Default = () => ({
+  template: hbs`
+    <DenaliModal @isOpen={{true}} as |Modal|>
+      <Modal.Header>{{headerContent}}</Modal.Header>
+      <Modal.Content>{{bodyContent}}</Modal.Content>
+      <Modal.Footer>{{footerContent}}</Modal.Footer>
+    </DenaliModal>
+  `,
+  context: {
+    headerContent: 'Modal Header',
+    bodyContent:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.',
+    footerContent: 'Modal Footer',
+  },
+});
+
+export const Playground = () => ({
+  template: hbs`
+    <DenaliModal
+      @isOpen={{isOpen}}
+      @isFullScreen={{isFullScreen}}
+      @onClose={{onClose}}
+      class={{class}}
+      as |Modal|
+    >
+      <Modal.Header>{{headerContent}}</Modal.Header>
+      <Modal.Content>{{bodyContent}}</Modal.Content>
+      <Modal.Footer>{{footerContent}}</Modal.Footer>
+    </DenaliModal>
+  `,
+  context: {
+    isOpen: boolean('isOpen', true, argument),
+    isFullScreen: boolean('isFullScreen', false, argument),
+    headerContent: text('headerContent', 'Modal Header', content),
+    bodyContent: text('bodyContent', 'Modal Body', content),
+    footerContent: text('footerContent', 'Modal Footer', content),
+    class: text('class', '', attribute),
+    onClose: action('onClose'),
+  },
+});
diff --git a/stories/radio-toggle.stories.js b/stories/radio-toggle.stories.js
@@ -0,0 +1,64 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, array, boolean, text } from '@storybook/addon-knobs';
+import { argument, attribute, example } from './knob-categories';
+
+export default {
+  title: 'DenaliRadioToggle',
+  component: 'DenaliRadioToggle',
+  decorators: [withKnobs],
+};
+
+export const Default = () => ({
+  template: hbs`
+    <DenaliRadioToggle
+      @onChanged={{queue onChange (fn (mut selectedItem))}}
+      as |Radio|
+    >
+      {{#each items as |item|}}
+        <Radio.Option
+          @value={{item}}
+          @checked={{eq item selectedItem}}
+        >
+          {{item}}
+        </Radio.Option>
+      {{/each}}
+    </DenaliRadioToggle>
+  `,
+  context: {
+    items: ['Denali', 'Radio'],
+    selectedItem: 'Denali',
+    onChange: action('onChange'),
+  },
+});
+
+export const Playground = () => ({
+  template: hbs`
+    <DenaliRadioToggle
+      @onChanged={{queue onChange (fn (mut selectedItem))}}
+      @isInverse={{isInverse}}
+      @isSmall={{isSmall}}
+      class={{class}}
+      as |Radio|
+    >
+      {{#each items as |item|}}
+        <Radio.Option
+          @value={{item}}
+          @checked={{eq item selectedItem}}
+          @disabled={{eq item disabledItem}}
+        >
+          {{item}}
+        </Radio.Option>
+      {{/each}}
+    </DenaliRadioToggle>
+  `,
+  context: {
+    isInverse: boolean('isInverse', false, argument),
+    isSmall: boolean('isSmall', false, argument),
+    items: array('items', ['Ember', 'Denali', 'Radio'], ',', example),
+    selectedItem: text('selectedItem', 'Denali', example),
+    disabledItem: text('disabledItem', 'Radio', example),
+    onChange: action('onChange'),
+    class: text('class', '', attribute),
+  },
+});
diff --git a/stories/radio.stories.js b/stories/radio.stories.js
@@ -0,0 +1,60 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, text, array } from '@storybook/addon-knobs';
+import { attribute, example } from './knob-categories';
+
+export default {
+  title: 'DenaliRadio',
+  component: 'DenaliRadio',
+  decorators: [withKnobs],
+};
+
+export const Default = () => ({
+  template: hbs`
+    <DenaliRadio
+      @onChanged={{queue onChange (fn (mut selectedItem))}}
+      as |Radio|
+    >
+      {{#each items as |item|}}
+        <Radio.Option
+          @value={{item}}
+          @checked={{eq item selectedItem}}
+        >
+          {{item}}
+        </Radio.Option>
+      {{/each}}
+    </DenaliRadio>
+  `,
+  context: {
+    items: ['Denali', 'Radio'],
+    selectedItem: 'Denali',
+    onChange: action('onChange'),
+  },
+});
+
+export const Playground = () => ({
+  template: hbs`
+    <DenaliRadio
+      @onChanged={{queue onChange (fn (mut selectedItem))}}
+      as |Radio|
+    >
+      {{#each items as |item|}}
+        <Radio.Option
+          @value={{item}}
+          @checked={{eq item selectedItem}}
+          @disabled={{eq item disabledItem}}
+          class={{class}}
+        >
+          {{item}}
+        </Radio.Option>
+      {{/each}}
+    </DenaliRadio>
+  `,
+  context: {
+    class: text('class', '', attribute),
+    items: array('items', ['Ember', 'Denali', 'Radio'], ',', example),
+    selectedItem: text('selectedItem', 'Denali', example),
+    disabledItem: text('disabledItem', 'Radio', example),
+    onChange: action('onChange'),
+  },
+});
diff --git a/stories/select.stories.js b/stories/select.stories.js
@@ -0,0 +1,52 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, array, boolean, text } from '@storybook/addon-knobs';
+import { argument, attribute, example } from './knob-categories';
+
+export default {
+  title: 'DenaliSelect',
+  component: 'DenaliSelect',
+  decorators: [withKnobs],
+};
+
+export const Default = () => ({
+  template: hbs`
+    <DenaliSelect
+      @options={{items}}
+      @selectedOption={{selectedItem}}
+      @onChange={{queue onChange (fn (mut selectedItem))}}
+      as |item|>
+      {{item}}
+    </DenaliSelect>
+  `,
+  context: {
+    items: ['Denali', 'Select'],
+    selectedItem: 'Denali',
+    onChange: action('onChange'),
+  },
+});
+
+export const Playground = () => ({
+  template: hbs`
+    <DenaliSelect
+      @options={{items}}
+      @selectedOption={{selectedItem}}
+      @disabledOptions={{disabledItems}}
+      @isSmall={{isSmall}}
+      @isInverse={{isInverse}}
+      @onChange={{queue onChange (fn (mut selectedItem))}}
+      class={{class}}
+      as |item|>
+      {{item}}
+    </DenaliSelect>
+  `,
+  context: {
+    isSmall: boolean('isSmall', false, argument),
+    isInverse: boolean('isInverse', false, argument),
+    class: text('class', '', attribute),
+    items: array('items', ['Ember', 'Denali', 'Select'], ',', example),
+    selectedItem: text('selectedItem', 'Denali', example),
+    disabledItems: array('disabledItems', ['Select'], ',', example),
+    onChange: action('onChange'),
+  },
+});