chore(devenv): add more Vue stories (#101)

Refs #88.

src/components/checkbox/checkbox-story-vue.ts

@@ -0,0 +1,34 @@
+import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+import createVueBindingsFromProps from '../../../.storybook/vue/create-vue-bindings-from-props';
+import './checkbox';
+
+const createProps = () => ({
+  checked: boolean('Checked (checked)', false),
+  disabled: boolean('Disabled (disabled)', false),
+  hideLabel: boolean('Hide label (hide-label)', false),
+  indeterminate: boolean('Indeterminate state (indeterminate)', false),
+  labelText: text('Label text (label-text)', 'Checkbox'),
+  name: text('Name (name)', ''),
+  value: text('Value (value)', ''),
+  onInput: action('onInput'),
+});
+
+storiesOf('Checkbox', module)
+  .addDecorator(withKnobs)
+  .add('Default', () => ({
+    template: `
+      <bx-checkbox
+        :checked="checked"
+        :disabled="disabled"
+        :hide-label="hideLabel"
+        :indeterminate="indeterminate"
+        :label-text="labelText"
+        :name="name"
+        :value="value"
+        @input="onInput"
+      ></bx-checkbox>
+    `,
+    ...createVueBindingsFromProps(createProps()),
+  }));

src/components/combo-box/combo-box-story-vue.ts

@@ -0,0 +1,60 @@
+import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+import createVueBindingsFromProps from '../../../.storybook/vue/create-vue-bindings-from-props';
+import './combo-box';
+import './combo-box-item';
+
+const createProps = () => ({
+  open: boolean('Open (open)', false),
+  disabled: boolean('Disabled (disabled)', false),
+  helperText: text('Helper text (helper-text)', ''),
+  labelText: text('Label text (label-text)', ''),
+  light: boolean('Light variant (light)', false),
+  value: text('The value of the selected item (value)', ''),
+  triggerContent: text('The default content of the trigger button (trigger-content)', 'Select an item'),
+  disableSelection: boolean(
+    'Disable user-initiated selection change (Call event.preventDefault() in bx-combo-box-beingselected event)',
+    false
+  ),
+});
+
+storiesOf('Combo box', module)
+  .addDecorator(withKnobs)
+  .add('Default', () => ({
+    template: `
+      <bx-combo-box
+        :open="open"
+        :disabled="disabled"
+        :light="light"
+        :helper-text="helperText"
+        :label-text="labelText"
+        :value="value"
+        :trigger-content="triggerContent"
+        @bx-combo-box-beingselected="onBeforeSelect"
+        @bx-combo-box-selected="onSelect"
+      >
+        <bx-combo-box-item value="all">Option 1</bx-combo-box-item>
+        <bx-combo-box-item value="cloudFoundry">Option 2</bx-combo-box-item>
+        <bx-combo-box-item value="staging">Option 3</bx-combo-box-item>
+        <bx-combo-box-item value="dea">Option 4</bx-combo-box-item>
+        <bx-combo-box-item value="router">Option 5</bx-combo-box-item>
+      </bx-combo-box>
+    `,
+    ...createVueBindingsFromProps(
+      (({ disableSelection, ...rest }) => {
+        const beforeSelectedAction = action('bx-dropdown-beingselected');
+        const onBeforeSelect = (event: CustomEvent) => {
+          beforeSelectedAction(event);
+          if (disableSelection) {
+            event.preventDefault();
+          }
+        };
+        return {
+          ...rest,
+          onBeforeSelect,
+          onSelect: action('bx-dropdown-selected'),
+        };
+      })(createProps())
+    ),
+  }));

src/components/loading/loading-story-vue.ts

@@ -0,0 +1,24 @@
+import { storiesOf } from '@storybook/vue';
+import { withKnobs, boolean, select } from '@storybook/addon-knobs';
+import createVueBindingsFromProps from '../../../.storybook/vue/create-vue-bindings-from-props';
+import { LOADING_TYPE } from './loading';
+
+const types = {
+  [`Regular (${LOADING_TYPE.REGULAR})`]: LOADING_TYPE.REGULAR,
+  [`Small (${LOADING_TYPE.SMALL})`]: LOADING_TYPE.SMALL,
+  [`With overlay (${LOADING_TYPE.OVERLAY})`]: LOADING_TYPE.OVERLAY,
+};
+
+const createProps = () => ({
+  inactive: boolean('Inactive (inactive)', false),
+  type: select('The spinner type (type)', types, LOADING_TYPE.REGULAR),
+});
+
+storiesOf('Loading', module)
+  .addDecorator(withKnobs)
+  .add('Default', () => ({
+    template: `
+      <bx-loading :inactive="inactive" :type="type"></bx-loading>
+    `,
+    ...createVueBindingsFromProps(createProps()),
+  }));

src/components/modal/modal-story-vue.ts

@@ -0,0 +1,57 @@
+import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import createVueBindingsFromProps from '../../../.storybook/vue/create-vue-bindings-from-props';
+import '../button/button';
+import './modal';
+import './modal-header';
+import './modal-close-button';
+import './modal-heading';
+import './modal-label';
+import './modal-body';
+import './modal-footer';
+
+const createProps = () => ({
+  open: boolean('Open (open)', true),
+  danger: boolean('Danger mode (danger)', false),
+  disableClose: boolean('Disable user-initiated close action (Call event.preventDefault() in bx-modal-beingclosed event)', false),
+});
+
+storiesOf('Modal', module)
+  .addDecorator(withKnobs)
+  .add('Default', () => ({
+    template: `
+      <bx-modal
+        :danger="danger"
+        :open="open"
+        @bx-modal-beingclosed="handleBeforeClose"
+        @bx-modal-closed="handleClose"
+      >
+        <bx-modal-header>
+          <bx-modal-close-button></bx-modal-close-button>
+          <bx-modal-label>Label (Optional)</bx-modal-label>
+          <bx-modal-heading>Modal Title</bx-modal-heading>
+        </bx-modal-header>
+        <bx-modal-body><p>Modal text description</p></bx-modal-body>
+        <bx-modal-footer>
+          <bx-btn kind="secondary" data-modal-close>Cancel</bx-btn>
+          <bx-btn kind="primary">Save</bx-btn>
+        </bx-modal-footer>
+      </bx-modal>
+    `,
+    ...createVueBindingsFromProps(
+      (({ disableClose, ...rest }) => {
+        const beforeSelectedAction = action('bx-modal-beingclosed');
+        return {
+          ...rest,
+          handleBeforeClose: (event: CustomEvent) => {
+            beforeSelectedAction(event);
+            if (disableClose) {
+              event.preventDefault();
+            }
+          },
+          handleClose: action('bx-modal-closed'),
+        };
+      })(createProps())
+    ),
+  }));

src/components/multi-select/multi-select-story-vue.ts

@@ -0,0 +1,73 @@
+import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
+import createVueBindingsFromProps from '../../../.storybook/vue/create-vue-bindings-from-props';
+import { DROPDOWN_TYPE } from '../dropdown/dropdown';
+import './multi-select';
+import './multi-select-item';
+
+const types = {
+  [`Regular (${DROPDOWN_TYPE.REGULAR})`]: DROPDOWN_TYPE.REGULAR,
+  [`Inline (${DROPDOWN_TYPE.INLINE})`]: DROPDOWN_TYPE.INLINE,
+};
+
+const createProps = () => ({
+  clearSelectionLabel: text('a11y label for the icon to clear selection (clear-selection-label)', ''),
+  disabled: boolean('Disabled (disabled)', false),
+  helperText: text('Helper text (helper-text)', 'This is not helper text'),
+  labelText: text('Label text (label-text)', 'Multiselect title'),
+  light: boolean('Light variant (light)', false),
+  open: boolean('Open (open)', false),
+  toggleLabelClosed: text('a11y label for the UI indicating the closed state (toggle-label-closed)', ''),
+  toggleLabelOpen: text('a11y label for the UI indicating the closed state (toggle-label-open)', ''),
+  triggerContent: text('The default content of the trigger button (trigger-content)', 'Select items'),
+  type: select('UI type (type)', types, DROPDOWN_TYPE.REGULAR),
+  validityMessage: text('The validity message (validity-message)', ''),
+  disableSelection: boolean(
+    'Disable user-initiated selection change (Call event.preventDefault() in bx-multi-select-beingselected event)',
+    false
+  ),
+});
+
+storiesOf('Multi select', module)
+  .addDecorator(withKnobs)
+  .add('Default', () => ({
+    template: `
+      <bx-multi-select
+        :disabled="disabled"
+        :light="light"
+        :open="open"
+        :clear-selection-label="clearSelectionLabel"
+        :helper-text="helperText"
+        :label-text="labelText"
+        :toggle-label-closed="toggleLabelClosed"
+        :toggle-label-open="toggleLabelOpen"
+        :trigger-content="triggerContent"
+        :type="type"
+        :validity-message="validityMessage"
+        @bx-multi-select-beingselected="handleBeforeSelected"
+        @bx-multi-select-selected="handleSelected"
+      >
+        <bx-multi-select-item value="all">Option 1</bx-multi-select-item>
+        <bx-multi-select-item value="cloudFoundry">Option 2</bx-multi-select-item>
+        <bx-multi-select-item value="staging">Option 3</bx-multi-select-item>
+        <bx-multi-select-item value="dea">Option 4</bx-multi-select-item>
+        <bx-multi-select-item value="router">Option 5</bx-multi-select-item>
+      </bx-multi-select>
+    `,
+    ...createVueBindingsFromProps(
+      (({ disableSelection, ...rest }) => {
+        const beforeSelectedAction = action('bx-multi-select-beingselected');
+        return {
+          ...rest,
+          handleBeforeSelected: (event: CustomEvent) => {
+            beforeSelectedAction(event);
+            if (disableSelection) {
+              event.preventDefault();
+            }
+          },
+          handleSelected: action('bx-multi-select-selected'),
+        };
+      })(createProps())
+    ),
+  }));

src/components/notification/notification-story-vue.ts

@@ -0,0 +1,100 @@
+import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
+import createVueBindingsFromProps from '../../../.storybook/vue/create-vue-bindings-from-props';
+import { NOTIFICATION_KIND } from './inline-notification';
+import './toast-notification';
+
+const kinds = {
+  [`Success (${NOTIFICATION_KIND.SUCCESS})`]: NOTIFICATION_KIND.SUCCESS,
+  [`Info (${NOTIFICATION_KIND.INFO})`]: NOTIFICATION_KIND.INFO,
+  [`Warning (${NOTIFICATION_KIND.WARNING})`]: NOTIFICATION_KIND.WARNING,
+  [`Error (${NOTIFICATION_KIND.ERROR})`]: NOTIFICATION_KIND.ERROR,
+};
+
+const createInlineProps = () => ({
+  kind: select('The notification kind (kind)', kinds, NOTIFICATION_KIND.INFO),
+  title: text('Title (title)', 'Notification title'),
+  subtitle: text('Subtitle (subtitle)', 'Subtitle text goes here.'),
+  hideCloseButton: boolean('Hide the close button (hide-close-button)', false),
+  closeButtonLabel: text('a11y label for the close button (close-button-label)', ''),
+  iconLabel: text('a11y label for the icon (icon-label)', ''),
+  open: boolean('Open (open)', true),
+  disableClose: boolean(
+    'Disable user-initiated close action (Call event.preventDefault() in bx-notification-beingclosed event)',
+    false
+  ),
+});
+
+const createToastProps = () => ({
+  ...createInlineProps(),
+  caption: text('Caption (caption)', 'Time stamp [00:00:00]'),
+});
+
+storiesOf('Notifications', module)
+  .addDecorator(withKnobs)
+  .add('Inline', () => ({
+    template: `
+      <bx-inline-notification
+        style="min-width: 30rem; margin-bottom: .5rem"
+        :kind="kind"
+        :title="title"
+        :subtitle="subtitle"
+        :hide-close-button="hideCloseButton"
+        :close-button-label="closeButtonLabel"
+        :icon-label="iconLabel"
+        :open="open"
+        @bx-notification-beingclosed="handleBeforeClose"
+        @bx-notification-closed="handleClose"
+      >
+      </bx-inline-notification>
+    `,
+    ...createVueBindingsFromProps(
+      (({ disableClose, ...rest }) => {
+        const beforeSelectedAction = action('bx-notification-beingclosed');
+        return {
+          ...rest,
+          handleBeforeClose: (event: CustomEvent) => {
+            beforeSelectedAction(event);
+            if (disableClose) {
+              event.preventDefault();
+            }
+          },
+          handleClose: action('bx-notification-closed'),
+        };
+      })(createInlineProps())
+    ),
+  }))
+  .add('Toast', () => ({
+    template: `
+      <bx-toast-notification
+        style="min-width: 30rem; margin-bottom: .5rem"
+        :kind="kind"
+        :title="title"
+        :subtitle="subtitle"
+        :caption="caption"
+        :hide-close-button="hideCloseButton"
+        :close-button-label="closeButtonLabel"
+        :icon-label="iconLabel"
+        :open="open"
+        @bx-notification-beingclosed="handleBeforeClose"
+        @bx-notification-closed="handleClose"
+      >
+      </bx-toast-notification>
+    `,
+    ...createVueBindingsFromProps(
+      (({ disableClose, ...rest }) => {
+        const beforeSelectedAction = action('bx-notification-beingclosed');
+        return {
+          ...rest,
+          handleBeforeClose: (event: CustomEvent) => {
+            beforeSelectedAction(event);
+            if (disableClose) {
+              event.preventDefault();
+            }
+          },
+          handleClose: action('bx-notification-closed'),
+        };
+      })(createToastProps())
+    ),
+  }));

src/components/overflow-menu/overflow-menu-story-vue.ts

@@ -0,0 +1,35 @@
+import { storiesOf } from '@storybook/vue';
+import { withKnobs, boolean, select } from '@storybook/addon-knobs';
+import createVueBindingsFromProps from '../../../.storybook/vue/create-vue-bindings-from-props';
+import { FLOATING_MENU_DIRECTION } from '../floating-menu/floating-menu';
+import './overflow-menu';
+import './overflow-menu-body';
+import './overflow-menu-item';
+
+const directions = {
+  [`Bottom (${FLOATING_MENU_DIRECTION.BOTTOM})`]: FLOATING_MENU_DIRECTION.BOTTOM,
+  [`Top (${FLOATING_MENU_DIRECTION.TOP})`]: FLOATING_MENU_DIRECTION.TOP,
+};
+
+const createProps = () => ({
+  open: boolean('Open (open)', false),
+  disabled: boolean('Disabled (disabled)', false),
+  direction: select('Direction (direction in <bx-overflow-menu-body>)', directions, FLOATING_MENU_DIRECTION.BOTTOM),
+});
+
+storiesOf('Overflow menu', module)
+  .addDecorator(withKnobs)
+  .add('Default', () => ({
+    template: `
+      <bx-overflow-menu :open="open" :disabled="disabled">
+        <bx-overflow-menu-body :direction="direction">
+          <bx-overflow-menu-item>Option 1</bx-overflow-menu-item>
+          <bx-overflow-menu-item>Option 2</bx-overflow-menu-item>
+          <bx-overflow-menu-item>Option 3</bx-overflow-menu-item>
+          <bx-overflow-menu-item>Option 4</bx-overflow-menu-item>
+          <bx-overflow-menu-item>Option 5</bx-overflow-menu-item>
+        </bx-overflow-menu-body>
+      </bx-overflow-menu>
+    `,
+    ...createVueBindingsFromProps(createProps()),
+  }));