tide-design-system 2.5.12 → 2.5.14

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 = {};

package/src/stories/TideInputCheckbox.stories.ts

@@ -1,138 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { ref, watch } from 'vue';
-
-import TideInputCheckbox from '@/components/TideInputCheckbox.vue';
-import { argTypeBooleanUnrequired, dataTrack, disabledArgType, doSomething, parameters } from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideInputCheckbox>['$props'] & {
-  handleValid: string;
-  vModel: boolean;
-};
-
-const render = (args: Args) => ({
-  components: { TideInputCheckbox },
-  methods: {
-    doSomething,
-    handleValid: () => {
-      action('TideInputText valid was emitted')({});
-
-      try {
-        const callback = eval(args.handleValid);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "valid" control.');
-      }
-    },
-  },
-  setup() {
-    const model = ref(args.vModel);
-
-    watch(model, (v) => {
-      args.vModel = v;
-    });
-
-    watch(
-      () => args.vModel,
-      (v) => {
-        model.value = v;
-      }
-    );
-
-    return {
-      args,
-      model,
-    };
-  },
-  template: `<TideInputCheckbox @valid="handleValid" v-bind="args" v-model="model" />`,
-});
-
-export default {
-  argTypes: {
-    dataTrack,
-    disabled: argTypeBooleanUnrequired,
-    error: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    handleValid: {
-      control: 'text',
-      description: 'JS code or function to execute on valid event',
-      isEmit: true,
-      name: 'valid',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '(isValid: boolean) => void' },
-      },
-    },
-    indeterminate: {
-      ...argTypeBooleanUnrequired,
-      if: { arg: 'checked', eq: true },
-    },
-    inputId: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    label: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    name: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    number: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'number' },
-      },
-    },
-    required: argTypeBooleanUnrequired,
-    vModel: {
-      control: 'boolean',
-      description: 'Data binding to Vue ref',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref<boolean>' },
-      },
-    },
-    valid: disabledArgType,
-  },
-  args: {
-    dataTrack: '',
-    disabled: undefined,
-    error: '',
-    handleValid: 'doSomething',
-    indeterminate: undefined,
-    inputId: '',
-    label: 'Input label',
-    name: '',
-    number: '',
-    required: undefined,
-    vModel: false,
-  },
-  component: TideInputCheckbox,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideInputCheckbox',
-};
-
-export const Demo = {};

package/src/stories/TideInputRadio.stories.ts

@@ -1,100 +0,0 @@
-import { ref, watch } from 'vue';
-
-import TideInputRadio from '@/components/TideInputRadio.vue';
-import { argTypeBooleanUnrequired, dataTrack, parameters } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideInputRadio>['$props'];
-
-const render = (args: Args, context: StoryContext) => ({
-  components: { TideInputRadio },
-  setup() {
-    const model = ref<string | undefined>(undefined);
-
-    watch(
-      () => ({ ...args }),
-      (newArgs) => {
-        // Reset v-model when arg table is reset.
-        if (JSON.stringify(newArgs) === JSON.stringify(context.allArgs)) model.value = undefined;
-      }
-    );
-
-    return {
-      args: {
-        ...args,
-        inputId: undefined,
-      },
-      model,
-    };
-  },
-  template: `<TideInputRadio v-bind="args" v-model="model" />`,
-});
-
-export default {
-  argTypes: {
-    dataTrack,
-    disabled: argTypeBooleanUnrequired,
-    inputId: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    label: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    name: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    number: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'number' },
-      },
-    },
-    vModel: {
-      control: 'text',
-      description: 'Data binding to Vue ref',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref' },
-      },
-    },
-    value: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-  },
-  args: {
-    dataTrack: '',
-    disabled: undefined,
-    inputId: '',
-    label: 'Input label',
-    name: '',
-    number: '',
-    vModel: '',
-    value: '',
-  },
-  component: TideInputRadio,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideInputRadio',
-};
-
-export const Demo = {};