diff --git a/src/components/checkbox/checkbox-story-vue.ts b/src/components/checkbox/checkbox-story-vue.ts new file mode 100644 index 00000000000..ba7bcff6062 --- /dev/null +++ b/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: ` + + `, + ...createVueBindingsFromProps(createProps()), + })); diff --git a/src/components/combo-box/combo-box-story-vue.ts b/src/components/combo-box/combo-box-story-vue.ts new file mode 100644 index 00000000000..d8ed94f89f3 --- /dev/null +++ b/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: ` + + Option 1 + Option 2 + Option 3 + Option 4 + Option 5 + + `, + ...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()) + ), + })); diff --git a/src/components/loading/loading-story-vue.ts b/src/components/loading/loading-story-vue.ts new file mode 100644 index 00000000000..360293f644b --- /dev/null +++ b/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: ` + + `, + ...createVueBindingsFromProps(createProps()), + })); diff --git a/src/components/modal/modal-story-vue.ts b/src/components/modal/modal-story-vue.ts new file mode 100644 index 00000000000..f2a04173ccf --- /dev/null +++ b/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: ` + + + + Label (Optional) + Modal Title + +

Modal text description

 + + Cancel + Save + + + `, + ...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()) + ), + })); diff --git a/src/components/multi-select/multi-select-story-vue.ts b/src/components/multi-select/multi-select-story-vue.ts new file mode 100644 index 00000000000..b213afca4b2 --- /dev/null +++ b/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: ` + + Option 1 + Option 2 + Option 3 + Option 4 + Option 5 + + `, + ...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()) + ), + })); diff --git a/src/components/notification/notification-story-vue.ts b/src/components/notification/notification-story-vue.ts new file mode 100644 index 00000000000..c1b24101c2e --- /dev/null +++ b/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: ` + + + `, + ...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: ` + + + `, + ...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()) + ), + })); diff --git a/src/components/overflow-menu/overflow-menu-story-vue.ts b/src/components/overflow-menu/overflow-menu-story-vue.ts new file mode 100644 index 00000000000..a140c76134e --- /dev/null +++ b/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 )', directions, FLOATING_MENU_DIRECTION.BOTTOM), +}); + +storiesOf('Overflow menu', module) + .addDecorator(withKnobs) + .add('Default', () => ({ + template: ` + + + Option 1 + Option 2 + Option 3 + Option 4 + Option 5 + + + `, + ...createVueBindingsFromProps(createProps()), + })); diff --git a/src/components/structured-list/structured-list-story-vue.ts b/src/components/structured-list/structured-list-story-vue.ts new file mode 100644 index 00000000000..fead473b2b4 --- /dev/null +++ b/src/components/structured-list/structured-list-story-vue.ts @@ -0,0 +1,64 @@ +import { storiesOf } from '@storybook/vue'; +import { withKnobs, boolean } from '@storybook/addon-knobs'; +import createVueBindingsFromProps from '../../../.storybook/vue/create-vue-bindings-from-props'; +import './structured-list'; +import './structured-list-head'; +import './structured-list-header-row'; +import './structured-list-body'; +import './structured-list-row'; + +const createProps = () => ({ + hasSelection: boolean('Supports selection feature (has-selection)', false), +}); + +storiesOf('Structured list', module) + .addDecorator(withKnobs) + .add('Default', () => ({ + template: ` + + + + ColumnA + ColumnB + ColumnC + + + + + Row 1 + Row 1 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum + augue. Aenean posuere sem vel euismod dignissim. + + + Row 2 + Row 2 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum + augue. Aenean posuere sem vel euismod dignissim. + + + Row 3 + Row 3 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum + augue. Aenean posuere sem vel euismod dignissim. + + + + `, + ...createVueBindingsFromProps( + (({ hasSelection, ...rest }) => ({ + ...rest, + hasSelection, + selectionName: !hasSelection ? undefined : 'structured-list-selection', + selectionValues: !hasSelection + ? [] + : ['structured-list-selection-0', 'structured-list-selection-1', 'structured-list-selection-2'], + }))(createProps()) + ), + })); diff --git a/src/components/tile/tile-story-vue.ts b/src/components/tile/tile-story-vue.ts new file mode 100644 index 00000000000..72c9bf701d0 --- /dev/null +++ b/src/components/tile/tile-story-vue.ts @@ -0,0 +1,47 @@ +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 './tile'; +import './clickable-tile'; +import './selectable-tile'; + +const createClickableProps = () => ({ + href: text('Href for clickable UI (href)', ''), +}); + +const createSelectableProps = () => ({ + checkmarkLabel: text('Label text for the checkmark icon (checkmark-label)', ''), + name: text('Name (name)', ''), + selected: boolean('Selected (selected)', false), + value: text('Value (value)', ''), + onInput: action('input'), +}); + +storiesOf('Tile', module) + .addDecorator(withKnobs) + .add('Default', () => ({ + template: ` + Default tile + `, + })) + .add('Clickable', () => ({ + template: ` + Clickable tile + `, + ...createVueBindingsFromProps(createClickableProps()), + })) + .add('Selectable', () => ({ + template: ` + + Multi-select Tile + + `, + ...createVueBindingsFromProps(createSelectableProps()), + })); diff --git a/src/components/tooltip/tooltip-story-vue.ts b/src/components/tooltip/tooltip-story-vue.ts new file mode 100644 index 00000000000..52db433a8df --- /dev/null +++ b/src/components/tooltip/tooltip-story-vue.ts @@ -0,0 +1,39 @@ +import { storiesOf } from '@storybook/vue'; +import { withKnobs, boolean, select } from '@storybook/addon-knobs'; +import '../button/button'; +import './tooltip'; +import createVueBindingsFromProps from '../../../.storybook/vue/create-vue-bindings-from-props'; +import { FLOATING_MENU_DIRECTION } from '../floating-menu/floating-menu'; +import './tooltip-body'; +import './tooltip-footer'; + +const directions = { + [`Bottom (${FLOATING_MENU_DIRECTION.BOTTOM})`]: FLOATING_MENU_DIRECTION.BOTTOM, + [`Left (${FLOATING_MENU_DIRECTION.LEFT})`]: FLOATING_MENU_DIRECTION.LEFT, + [`Top (${FLOATING_MENU_DIRECTION.TOP})`]: FLOATING_MENU_DIRECTION.TOP, + [`Right (${FLOATING_MENU_DIRECTION.RIGHT})`]: FLOATING_MENU_DIRECTION.RIGHT, +}; + +const createProps = () => ({ + open: boolean('Open (open)', false), + direction: select('Direction (direction in )', directions, FLOATING_MENU_DIRECTION.BOTTOM), +}); + +storiesOf('Tooltip', module) + .addDecorator(withKnobs) + .add('Default', () => ({ + template: ` + + +

+ This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed + please use a modal instead. +

+ + Create + + + + `, + ...createVueBindingsFromProps(createProps()), + })); diff --git a/src/components/ui-shell/ui-shell-story-vue.ts b/src/components/ui-shell/ui-shell-story-vue.ts new file mode 100644 index 00000000000..2e3ed082604 --- /dev/null +++ b/src/components/ui-shell/ui-shell-story-vue.ts @@ -0,0 +1,147 @@ +import { storiesOf } from '@storybook/vue'; +import { withKnobs, boolean, text } from '@storybook/addon-knobs'; +import Fade16 from '@carbon/icons-vue/es/fade/16'; +import createVueBindingsFromProps from '../../../.storybook/vue/create-vue-bindings-from-props'; +import './side-nav'; +import './side-nav-items'; +import './side-nav-link'; +import './side-nav-menu'; +import './side-nav-menu-item'; +import './header'; +import './header-nav'; +import './header-nav-item'; +import './header-menu'; +import './header-menu-item'; +import './header-menu-button'; +import './header-name'; + +const createProps = () => ({ + expanded: boolean('Expanded (expanded)', true), + fixed: boolean('Fixed (fixed)', false), + href: text('Link href (href)', 'javascript:void 0'), // eslint-disable-line no-script-url +}); + +storiesOf('UI Shell', module) + .addDecorator(withKnobs) + .add('Side nav', () => ({ + template: ` + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + L0 link + L0 link + + + + `, + ...createVueBindingsFromProps(createProps()), + })) + .add('Side nav with icons', () => ({ + template: ` + + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + + L0 link + + + + L0 link + + + + + `, + components: { + 'fade-16': Fade16, + }, + ...createVueBindingsFromProps(createProps()), + })) + .add('Header', () => ({ + template: ` + + + [Platform] + + Link 1 + Link 2 + Link 3 + + Sub-link 1 + Sub-link 2 + Sub-link 3 + + + + + `, + ...createVueBindingsFromProps(createProps()), + }));