tide-design-system 2.5.13 → 2.5.14

package/src/stories/TideChipAction.stories.ts

@@ -1,81 +0,0 @@
-import TideChipAction from '@/components/TideChipAction.vue';
-import * as STANDARD_ELEMENT from '@/types/Element';
-import * as STANDARD_ICON from '@/types/Icon';
-import {
-  argTypeBooleanUnrequired,
-  click,
-  dataTrack,
-  formatArgType,
-  parameters,
-  prependNoneAsUndefined,
-} from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideChipAction>['$props'];
-
-const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
-const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
-
-const render = (args: Args) => ({
-  components: { TideChipAction },
-  setup: () => ({ args }),
-  template: '<TideChipAction class="tide-display-inline-flex" v-bind="args" />',
-});
-
-export default {
-  argTypes: {
-    click: {
-      ...click,
-      if: { arg: 'element', eq: ELEMENT.BUTTON },
-    },
-    dataTrack,
-    element: {
-      ...formatArgType({ ELEMENT }),
-      table: {
-        defaultValue: { summary: 'LINK' },
-        type: { summary: 'Element' },
-      },
-    },
-    href: {
-      control: 'text',
-      if: { arg: 'element', neq: ELEMENT.BUTTON },
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    iconLeading: {
-      ...formatArgType({ ICON }),
-      table: {
-        category: 'Props',
-        defaultValue: { summary: 'SEARCH' },
-      },
-    },
-    isNewTab: {
-      ...argTypeBooleanUnrequired,
-      if: { arg: 'element', neq: ELEMENT.BUTTON },
-    },
-    label: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-  },
-  args: {
-    click: 'doSomething',
-    dataTrack: '',
-    element: undefined,
-    href: 'https://www.sample.com',
-    iconLeading: undefined,
-    isNewTab: undefined,
-    label: 'Demo',
-  },
-  component: TideChipAction,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideChipAction',
-};
-
-export const Demo = {};

package/src/stories/TideChipFilter.stories.ts

@@ -1,84 +0,0 @@
-import { ref, watch } from 'vue';
-
-import TideChipFilter from '@/components/TideChipFilter.vue';
-import { dataTrack, doSomething, parameters } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideChipFilter>['$props'] & {
-  vModel: boolean;
-};
-
-const render = (args: Args, context: StoryContext) => ({
-  components: { TideChipFilter },
-  methods: {
-    doSomething,
-    handleIsActiveChange: (value: boolean) => {
-      context.updateArgs({ ...args, vModel: value });
-    },
-  },
-  setup: () => {
-    const isActive = ref(args.vModel);
-
-    watch(isActive, () => {
-      args.vModel = isActive.value;
-    });
-
-    watch(
-      () => args.vModel,
-      (newValue) => {
-        isActive.value = newValue;
-      }
-    );
-
-    return {
-      args,
-      isActive,
-    };
-  },
-  template: `<TideChipFilter v-bind="args" v-model="isActive" @update:modelValue="handleIsActiveChange">{{ args.default }}</TideChipFilter>`,
-});
-
-export default {
-  argTypes: {
-    dataTrack,
-    default: {
-      control: 'text',
-      defaultValue: 'None',
-      description: 'Content above label<br />(i.e. Vehicle thumbnail)',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'HTML' },
-      },
-    },
-    label: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    vModel: {
-      control: 'boolean',
-      description: 'Data binding to Vue ref',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref<boolean>' },
-      },
-    },
-  },
-  args: {
-    dataTrack: '',
-    default: '',
-    label: 'Demo',
-    vModel: false,
-  },
-  component: TideChipFilter,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideChipFilter',
-};
-
-export const Demo = {};

package/src/stories/TideChipInput.stories.ts

@@ -1,56 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import TideChipInput from '@/components/TideChipInput.vue';
-import { click, dataTrack, doSomething, parameters } from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideChipInput>['$props'] & {
-  click: string;
-};
-
-const render = (args: Args) => ({
-  components: { TideChipInput },
-  methods: {
-    doSomething,
-    handleClick: () => {
-      action('TideChipInput clicked')({});
-
-      try {
-        const callback = eval(args.click);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "change" control.');
-      }
-    },
-  },
-  setup: () => ({ args }),
-  template: `<TideChipInput @click="handleClick" v-bind="args" />`,
-});
-
-export default {
-  argTypes: {
-    click,
-    dataTrack,
-    label: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-  },
-  args: {
-    click: 'doSomething',
-    dataTrack: '',
-    label: 'Demo',
-  },
-  component: TideChipInput,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideChipInput',
-};
-
-export const Demo = {};

package/src/stories/TideColumns.stories.ts

@@ -1,89 +0,0 @@
-import TideColumns from '@/components/TideColumns.vue';
-import { lineBreak, tab } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-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',
-      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: 'Components/TideColumns',
-};
-
-export const Demo = {};

package/src/stories/TideDivider.stories.ts

@@ -1,48 +0,0 @@
-import TideDivider from '@/components/TideDivider.vue';
-import { ORIENTATION as STANDARD_ORIENTATION } from '@/types/Orientation';
-import { disabledArgType, formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideDivider>['$props'] & {
-  flexDirection: string;
-};
-
-const formatArgs = (args: Args) => {
-  args.flexDirection = args.orientation === ORIENTATION.VERTICAL ? 'tide-flex-row' : 'tide-flex-column';
-
-  return { args };
-};
-
-const render = (args: Args) => ({
-  components: { TideDivider },
-  setup: () => formatArgs(args),
-  template: `<div :class="['tide-display-inline-flex', args.flexDirection]">
-    <div class="sb-border-blue-light tide-padding-1">Demo</div>
-
-    <TideDivider :orientation="args.orientation" />
-
-    <div class="sb-border-blue-light tide-padding-1">Demo</div>
-  </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 }),
-    },
-  },
-  args: {
-    disabledArgType: '',
-    orientation: undefined,
-  },
-  component: TideDivider,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideDivider',
-};
-
-export const Demo = {};

package/src/stories/TideIcon.stories.ts

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

package/src/stories/TideImage.stories.ts

@@ -1,124 +0,0 @@
-import TideImage from '@/components/TideImage.vue';
-import { MEDIA } from '@/types/Breakpoint';
-import { OBJECT_FIT } from '@/types/Image';
-import {
-  argTypeBooleanUnrequired,
-  formatArgType,
-  formatValueAsConstant,
-  prependNoneAsUndefined,
-} from '@/utilities/storybook';
-
-import type { Source } from '@/types/Source';
-import type { StoryContext } from '@storybook/vue3';
-
-const sources: Source[] = [
-  {
-    media: MEDIA.XL,
-    srcset: 'https://placedog.net/1919/400',
-  },
-  {
-    media: MEDIA.LG,
-    srcset: 'https://placedog.net/1231/400',
-  },
-  {
-    media: MEDIA.MD,
-    srcset: 'https://placedog.net/991/400',
-  },
-  {
-    media: MEDIA.SM,
-    srcset: 'https://placedog.net/767/400',
-  },
-];
-
-const formatSnippet = (code: string, context: StoryContext) => {
-  const { args, argTypes } = context;
-  const { objectFit } = args;
-  const argsWithValues: string[] = [`alt="${args.alt}"`];
-  const hasSources = args.sources !== null;
-  const hasSourcesLength = hasSources ? (args.sources as any).length > 0 : false;
-
-  if (args.height !== '') argsWithValues.push(`height="${args.height}"`);
-  if (args.isLazy !== undefined) argsWithValues.push(`:is-lazy="${args.isLazy}"`);
-  if (hasSources && hasSourcesLength) argsWithValues.push(`:sources="sources"`);
-  if (args.src) argsWithValues.push(`src="${args.src}"`);
-  if (args.width !== '') argsWithValues.push(`width="${args.width}"`);
-  if (args.objectFit !== undefined)
-    argsWithValues.push(`:object-fit="${formatValueAsConstant({ objectFit }, argTypes)}"`);
-
-  return `<TideImage ${argsWithValues.join(' ')} />`;
-};
-
-const parameters = {
-  docs: {
-    source: {
-      format: 'vue',
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-const OBJECT_FIT_OPTIONS = prependNoneAsUndefined(OBJECT_FIT);
-
-export default {
-  argTypes: {
-    alt: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    height: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    isLazy: argTypeBooleanUnrequired,
-    objectFit: {
-      ...formatArgType({ OBJECT_FIT_OPTIONS }),
-      table: {
-        defaultValue: { summary: 'None' },
-      },
-    },
-    sources: {
-      control: 'object',
-      isCustom: true,
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Source[]' },
-      },
-    },
-    src: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    width: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-  },
-  args: {
-    alt: '',
-    height: '',
-    isLazy: undefined,
-    objectFit: undefined,
-    sources,
-    src: 'https://placedog.net/375/400',
-    width: '',
-  },
-  component: TideImage,
-  parameters,
-  tags: ['autodocs'],
-  title: 'Components/TideImage',
-};
-
-export const Demo = {};

package/src/stories/TideImageBackground.stories.ts

@@ -1,114 +0,0 @@
-import TideImageBackground from '@/components/TideImageBackground.vue';
-import { MEDIA } from '@/types/Breakpoint';
-import { CSS } from '@/types/Styles';
-import { argTypeBooleanUnrequired } from '@/utilities/storybook';
-
-import type { Source } from '@/types/Source';
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideImageBackground>['$props'];
-
-const formatSnippet = (_code: string, context: StoryContext) => {
-  const { args } = context;
-  const argsWithValues: string[] = [`alt="${args.alt}"`];
-  const hasSources = args.sources !== null;
-  const hasSourcesLength = hasSources ? (args.sources as any).length > 0 : false;
-
-  if (args.isLazy !== undefined) argsWithValues.push(`:is-lazy="${args.isLazy}"`);
-  if (hasSources && hasSourcesLength) argsWithValues.push(`:sources="sources"`);
-  if (args.src) argsWithValues.push(`:src="${args.src}"`);
-
-  return `<TideImageBackground ${argsWithValues.join(' ')} />`;
-};
-
-const parameters = {
-  docs: {
-    source: {
-      format: 'vue',
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-const render = (args: Args) => ({
-  components: { TideImageBackground },
-  setup() {
-    return { args };
-  },
-  template: `
-    <TideImageBackground v-bind="args">
-      <div class="${[CSS.PADDING.FULL.FOUR, CSS.FONT.ROLE.HEADLINE_2].join(' ')}">
-        {{ args.default }}
-      </div>
-    </TideImageBackground>
-  `,
-});
-
-const sources: Source[] = [
-  {
-    media: MEDIA.XL,
-    srcset: 'https://placedog.net/1919/400',
-  },
-  {
-    media: MEDIA.LG,
-    srcset: 'https://placedog.net/1231/400',
-  },
-  {
-    media: MEDIA.MD,
-    srcset: 'https://placedog.net/991/400',
-  },
-  {
-    media: MEDIA.SM,
-    srcset: 'https://placedog.net/767/400',
-  },
-];
-
-export default {
-  argTypes: {
-    alt: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    default: {
-      control: 'text',
-      description: 'Content exposed when expanded',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'HTML' },
-      },
-    },
-    isLazy: argTypeBooleanUnrequired,
-    sources: {
-      control: 'object',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Source[]' },
-      },
-    },
-    src: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-  },
-  args: {
-    alt: '',
-    default: 'Lorem Ipsum',
-    isLazy: undefined,
-    sources,
-    src: 'https://placedog.net/375/400',
-  },
-  component: TideImageBackground,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideImageBackground',
-};
-
-export const Demo = {};

package/src/stories/TideIndicator.stories.ts

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