tide-design-system 2.0.21 → 2.0.23

package/src/stories/TideChipAction.stories.ts

@@ -0,0 +1,46 @@
+import TideChipAction from '@/components/TideChipAction.vue';
+import { argTypeBooleanUnrequired, dataTrack, parameters } from '@/utilities/storybook';
+
+const render = (args: any) => ({
+  components: { TideChipAction },
+  setup: () => ({ args }),
+  template: '<TideChipAction class="tide-display-inline-flex" v-bind="args" />',
+});
+
+export default {
+  argTypes: {
+    dataTrack,
+    href: {
+      control: 'text',
+      description: 'URL to navigate to on click',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    isNewTab: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether to target a new browser tab',
+    },
+    label: {
+      control: 'text',
+      description: 'Chip text',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    dataTrack: '',
+    href: 'https://www.sample.com',
+    label: 'Demo',
+  },
+  component: TideChipAction,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideChipAction',
+};
+
+export const Demo = {};

package/src/stories/TideChipFilter.stories.ts

@@ -0,0 +1,59 @@
+import { action } from '@storybook/addon-actions';
+
+import TideChipFilter from '@/components/TideChipFilter.vue';
+import { argTypeBooleanUnrequired, click, dataTrack, parameters } from '@/utilities/storybook';
+
+const render = (args: any, { updateArgs }: any) => ({
+  components: { TideChipFilter },
+  methods: {
+    handleClick: (event: Event) => {
+      if (args.click) action(args.click)(event);
+
+      updateArgs({ ...args, isActive: !args.isActive });
+    },
+  },
+  setup: () => ({ args }),
+  template: `<TideChipFilter @click="handleClick" class="tide-display-inline-flex" v-bind="args">{{ args.default }}</TideChipFilter>`,
+});
+
+export default {
+  argTypes: {
+    click,
+    dataTrack,
+    default: {
+      control: 'text',
+      defaultValue: 'None',
+      description: 'Content above label<br />(i.e. Vehicle thumbnail)',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
+      },
+    },
+    isActive: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether toggle is active',
+    },
+    label: {
+      control: 'text',
+      description: 'Chip text',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    click: 'doSomething',
+    dataTrack: '',
+    default: '',
+    isActive: undefined,
+    label: 'Demo',
+  },
+  component: TideChipFilter,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideChipFilter',
+};
+
+export const Demo = {};

package/src/stories/TideChipInput.stories.ts

@@ -0,0 +1,42 @@
+import { action } from '@storybook/addon-actions';
+
+import TideChipInput from '@/components/TideChipInput.vue';
+import { click, dataTrack, parameters } from '@/utilities/storybook';
+
+const render = (args: any) => ({
+  components: { TideChipInput },
+  methods: {
+    handleClick: (event: Event) => {
+      if (args.click) action(args.click)(event);
+    },
+  },
+  setup: () => ({ args }),
+  template: `<TideChipInput @click="handleClick" v-bind="args" />`,
+});
+
+export default {
+  argTypes: {
+    click,
+    dataTrack,
+    label: {
+      control: 'text',
+      description: 'Chip text',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    click: 'doSomething',
+    dataTrack: '',
+    label: 'Demo',
+  },
+  component: TideChipInput,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideChipInput',
+};
+
+export const Demo = {};

package/src/stories/TideColumns.stories.ts

@@ -0,0 +1,90 @@
+import type { StoryContext } from '@storybook/vue3';
+
+import TideColumns from '@/components/TideColumns.vue';
+import { lineBreak, tab } from '@/utilities/storybook';
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args } = context;
+
+  const argsWithValues: string[] = [];
+
+  if (args.heading) argsWithValues.push(`:heading="${args.heading}"`);
+
+  return `<TideColumns ${argsWithValues.join(' ')}>${lineBreak}${tab}<template #section1>${
+    args.section1
+  }</template>${lineBreak}${tab}<template #section2>${args.section2}</template>${lineBreak}${tab}<template #section3>${
+    args.section3
+  }</template>${lineBreak}${tab}<template #section4>${args.section4}</template>${lineBreak}</TideColumns>`;
+};
+
+const parameters = {
+  docs: {
+    source: {
+      format: 'vue',
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+export default {
+  argTypes: {
+    heading: {
+      control: 'text',
+      description: 'Determines label',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    section1: {
+      control: 'text',
+      defaultValue: 'None',
+      description: 'Section 1 content',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
+      },
+    },
+    section2: {
+      control: 'text',
+      defaultValue: 'None',
+      description: 'Section 2 content',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
+      },
+    },
+    section3: {
+      control: 'text',
+      defaultValue: 'None',
+      description: 'Section 3 content',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
+      },
+    },
+    section4: {
+      control: 'text',
+      defaultValue: 'None',
+      description: 'Section 4 content',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
+      },
+    },
+  },
+  args: {
+    heading: 'Demo',
+    section1: 'Section 1',
+    section2: 'Section 2',
+    section3: 'Section 3',
+    section4: 'Section 4',
+  },
+  component: TideColumns,
+  parameters,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideColumns',
+};
+
+export const Demo = {};

package/src/stories/TideDivider.stories.ts

@@ -0,0 +1,46 @@
+import { ORIENTATION as STANDARD_ORIENTATION } from '@/types/Orientation';
+import TideDivider from '@/components/TideDivider.vue';
+import { disabledArgType, formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';
+
+const formatArgs = (args: any) => {
+  args.flexDirection = args.orientation === ORIENTATION.VERTICAL ? 'tide-flex-row' : 'tide-flex-column';
+  args.divTemplate = `<div class="sb-border-blue-light sb-font-blue-light tide-display-flex tide-axis1-center tide-axis2-center tide-padding-1 tide-width-full" style="min-width: 100px; min-height:100px;" />`;
+
+  return { args };
+};
+
+const render = (args: any) => ({
+  components: { TideDivider },
+  setup: () => formatArgs(args),
+  template: `<div :class="['tide-display-flex', args.flexDirection]">
+    <div class="sb-border-blue-light sb-font-blue-light tide-display-flex tide-axis1-center tide-axis2-center tide-padding-1 tide-width-full" style="min-width: 100px; min-height:100px;" />
+
+    <TideDivider :orientation="args.orientation" />
+
+    <div class="sb-border-blue-light sb-font-blue-light tide-display-flex tide-axis1-center tide-axis2-center tide-padding-1 tide-width-full" style="min-width: 100px; height:100px;" />
+  </div>`,
+  updated: () => formatArgs(args),
+});
+
+const ORIENTATION = prependNoneAsUndefined(STANDARD_ORIENTATION);
+
+export default {
+  argTypes: {
+    disabledArgType: disabledArgType, // Force updated() trigger when orientation is set to undefined.
+    orientation: {
+      ...formatArgType({ ORIENTATION }),
+      description: 'Determines whether Divider is horizontal or vertical',
+    },
+  },
+  args: {
+    disabledArgType: '',
+    orientation: undefined,
+  },
+  component: TideDivider,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideDivider',
+};
+
+export const Demo = {};

package/src/stories/TideIcon.stories.ts

@@ -0,0 +1,29 @@
+import * as STANDARD_SIZE from '@/types/Size';
+import TideIcon from '@/components/TideIcon.vue';
+import { ICON } from '@/types/Icon';
+import { formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';
+
+const SIZE = prependNoneAsUndefined(STANDARD_SIZE.SIZE);
+
+export default {
+  argTypes: {
+    icon: {
+      ...formatArgType({ ICON }),
+      description: 'Icon',
+    },
+    size: {
+      ...formatArgType({ SIZE }),
+      description: 'Determines icon dimensions',
+    },
+  },
+  args: {
+    icon: ICON.FAVORITE,
+    size: undefined,
+  },
+  component: TideIcon,
+  parameters,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideIcon',
+};
+
+export const Demo = {};

package/src/stories/TideIndicator.stories.ts

@@ -0,0 +1,31 @@
+import TideIndicator from '@/components/TideIndicator.vue';
+import { parameters } from '@/utilities/storybook';
+
+const render = (args: any) => ({
+  components: { TideIndicator },
+  setup: () => ({ args }),
+  template: `<TideIndicator v-bind="args" />`,
+});
+
+export default {
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Indicator text',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'text' },
+      },
+    },
+  },
+  args: {
+    label: '',
+  },
+  component: TideIndicator,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideIndicator',
+};
+
+export const Demo = {};

package/src/stories/TideInputCheckbox.stories.ts

@@ -0,0 +1,86 @@
+import { action } from '@storybook/addon-actions';
+
+import TideInputCheckbox from '@/components/TideInputCheckbox.vue';
+import { argTypeBooleanUnrequired, dataTrack, parameters } from '@/utilities/storybook';
+
+const render = (args: any, context: any) => ({
+  components: { TideInputCheckbox },
+  methods: {
+    handleClick: (event: Event) => {
+      const input = context.canvasElement.querySelector('input');
+
+      action('TideInputCheckbox toggled')(event);
+      context.updateArgs({ ...args, checked: input.checked === true, indeterminate: undefined });
+    },
+  },
+  setup: () => ({ args }),
+  template: `<TideInputCheckbox @click="handleClick" v-bind="args" />`,
+});
+
+export default {
+  argTypes: {
+    checked: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether Checkbox is checked or unchecked',
+    },
+    dataTrack,
+    disabled: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether Checkbox state is interactable',
+    },
+    indeterminate: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether Checkbox is indeterminate',
+      if: { arg: 'checked', eq: true },
+    },
+    inputId: {
+      control: 'text',
+      description: 'Unique ID attribute<br />(to bind Checkbox label to input)',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Label content',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    name: {
+      control: 'text',
+      description: 'Name attribute',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    number: {
+      control: 'text',
+      description: 'Parenthetical response count',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'number' },
+      },
+    },
+  },
+  args: {
+    checked: undefined,
+    dataTrack: '',
+    disabled: undefined,
+    indeterminate: undefined,
+    inputId: '',
+    label: 'Input label',
+    name: '',
+    number: '',
+  },
+  component: TideInputCheckbox,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideInputCheckbox',
+};
+
+export const Demo = {};

package/src/stories/TideInputRadio.stories.ts

@@ -0,0 +1,71 @@
+import { action } from '@storybook/addon-actions';
+
+import TideInputRadio from '@/components/TideInputRadio.vue';
+import { argTypeBooleanUnrequired, dataTrack, parameters } from '@/utilities/storybook';
+
+const render = (args: any, context: any) => ({
+  components: { TideInputRadio },
+  methods: {
+    handleChange: (event: KeyboardEvent) => {
+      const input = context.canvasElement.querySelector('input');
+
+      action('TideInputRadio changed')(event);
+      context.updateArgs({ ...args, checked: input.checked });
+    },
+  },
+  setup: () => ({ args }),
+  template: `<TideInputRadio @change="handleChange" v-bind="args" />`,
+});
+
+export default {
+  argTypes: {
+    checked: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether input is selected',
+    },
+    dataTrack,
+    disabled: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether input is interactable',
+    },
+    inputId: {
+      control: 'text',
+      description: 'Unique ID attribute<br />(to bind input label to input)',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Label content',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    name: {
+      control: 'text',
+      description: 'Name attribute',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    checked: undefined,
+    dataTrack: '',
+    disabled: undefined,
+    inputId: '',
+    label: 'Input label',
+    name: '',
+  },
+  component: TideInputRadio,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideInputRadio',
+};
+
+export const Demo = {};

package/src/stories/TideInputSelect.stories.ts

@@ -0,0 +1,145 @@
+import { action } from '@storybook/addon-actions';
+
+import type { SelectOption } from '@/types/Select';
+
+import TideInputSelect from '@/components/TideInputSelect.vue';
+import {
+  argTypeBooleanUnrequired,
+  change,
+  dataTrack,
+  doSomething,
+  formatArgType,
+  getLabelsFromOptions,
+  parameters,
+} from '@/utilities/storybook';
+
+const options = {
+  'Option 1': 1,
+  'Option 2': 2,
+  'Option 3': 3,
+};
+
+const selectOptions: SelectOption[] = [
+  {
+    label: 'Option 1',
+    value: 1,
+  },
+  {
+    label: 'Option 2',
+    value: 2,
+  },
+  {
+    label: 'Option 3',
+    value: 3,
+  },
+];
+
+const render = (args: any, { updateArgs }: any) => ({
+  components: { TideInputSelect },
+  methods: {
+    doSomething,
+    handleChange: (event: Event) => {
+      const value = parseInt((event?.target as HTMLSelectElement).value, 10);
+
+      updateArgs({ ...args, value });
+      action('TideInputSelect changed')(event);
+
+      try {
+        const performCallback = eval(args.change);
+
+        if (performCallback) {
+          performCallback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "change" control.');
+      }
+    },
+  },
+  setup: () => ({ args }),
+  template: `<TideInputSelect @change="handleChange" v-bind="args" />`,
+});
+
+export default {
+  argTypes: {
+    change,
+    dataTrack,
+    disabled: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether Select is interactable',
+    },
+    error: {
+      ...argTypeBooleanUnrequired,
+      description: 'Reflects whether the Select value is valid',
+    },
+    inputId: {
+      control: 'text',
+      description: 'Unique ID attribute<br />(to bind Select label to input)',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Label content',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    options: {
+      ...formatArgType({ selectOptions }),
+      control: 'object',
+      description: 'Determines values found inside Select',
+      isCustom: true,
+      table: {
+        defaultValue: { summary: '[]' },
+        type: { summary: 'SelectOption[]' },
+      },
+    },
+    required: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether Select is required',
+    },
+    supportingText: {
+      control: 'text',
+      description: 'Explainer text beneath input',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    value: {
+      control: {
+        labels: getLabelsFromOptions(options),
+        type: 'select',
+      },
+      description: 'Determines which tab should be active by default<br />(Subsequently managed within component)',
+      options: Object.values(options),
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'SelectOption' },
+      },
+    },
+  },
+  args: {
+    change: 'doSomething',
+    dataTrack: '',
+    disabled: undefined,
+    error: undefined,
+    inputId: '',
+    label: 'Input label',
+    name: '',
+    options: selectOptions,
+    required: undefined,
+    supportingText: '',
+    value: undefined,
+  },
+  component: TideInputSelect,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideInputSelect',
+};
+
+export const Demo = {};