tide-design-system 2.5.13 → 2.5.14

package/src/stories/TidePopover.stories.ts

@@ -1,101 +0,0 @@
-import TideIcon from '@/components/TideIcon.vue';
-import TidePopover from '@/components/TidePopover.vue';
-import { ICON } from '@/types/Icon';
-import { lineBreak, tab } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TidePopover>['$props'] & {
-  default: string;
-  offset: string;
-};
-
-const formatSnippet = (code: string, context: StoryContext) => {
-  const { args } = context;
-
-  const argsWithValues: string[] = [];
-
-  if (args.anchorId !== '') argsWithValues.push(`anchor-id="${args.anchorId}"`);
-  if (args.offset !== '') argsWithValues.push(`:offset="${args.offset}"`);
-
-  return (
-    `<TideIcon :icon="ICON.INFO" id="anchorDemo" />${lineBreak}${lineBreak}` +
-    `<TidePopover ${argsWithValues.join(' ')}>${lineBreak}` +
-    `${tab}${args.default}${lineBreak}` +
-    `</TidePopover>`
-  );
-};
-
-const parameters = {
-  docs: {
-    source: {
-      format: 'vue',
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-const render = (args: Args) => ({
-  components: { TideIcon, TidePopover },
-  setup: () => {
-    if (args.offset === '') {
-      delete args.offset;
-    }
-
-    return { ICON, args };
-  },
-  template: `
-  <TideIcon :icon="ICON.INFO" id="anchorDemo" />
-
-  <TidePopover v-bind="args">
-    ${args.default}
-  </TidePopover>
-  `,
-  updated() {
-    if (args.offset === '') {
-      delete args.offset;
-    }
-
-    return { ICON, args };
-  },
-});
-
-export default {
-  argTypes: {
-    anchorId: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    default: {
-      control: 'text',
-      description: 'Popover content',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'HTML' },
-      },
-    },
-    offset: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: '16' },
-        type: { summary: 'number' },
-      },
-    },
-  },
-  args: {
-    anchorId: 'anchorDemo',
-    default: '<span>Demo</span>',
-    offset: '',
-  },
-  component: TidePopover,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TidePopover',
-};
-
-export const Demo = {};

package/src/stories/TideRating.stories.ts

@@ -1,114 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { ref, watchEffect } from 'vue';
-
-import TideRating from '@/components/TideRating.vue';
-import { argTypeBooleanUnrequired, change, doSomething, parameters } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideRating>['$props'] & {
-  handleChange: string;
-  vModel: number;
-};
-
-const maxRating = 10;
-
-const render = (args: Args, context: StoryContext) => ({
-  components: { TideRating },
-  methods: {
-    doSomething,
-    handleChange: (index: number) => {
-      action('Current rating')(index);
-      context.updateArgs({ ...args, vModel: index });
-
-      try {
-        const callback = eval(args.handleChange);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "change" control.');
-      }
-    },
-  },
-  setup: () => {
-    const ratingValue = ref<number>(args.vModel);
-
-    watchEffect(() => {
-      ratingValue.value = args.vModel;
-    });
-
-    return {
-      args,
-      ratingValue,
-    };
-  },
-  template: '<TideRating v-model="ratingValue" @update:modelValue="handleChange" v-bind="args" />',
-});
-
-export default {
-  argTypes: {
-    description: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    handleChange: {
-      ...change,
-      control: 'text',
-      description: 'JS code or function to execute on change event',
-      name: 'update:modelValue',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '() => void' },
-      },
-    },
-    maxRating: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 10 },
-        type: { summary: 'number' },
-      },
-    },
-    showRating: argTypeBooleanUnrequired,
-    title: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    vModel: {
-      control: {
-        type: 'select',
-      },
-      description: 'Data binding to Vue ref (selected rating index)',
-      isDynamic: true,
-      options: Array.from({ length: maxRating + 1 }, (_, i) => i),
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref<number>' },
-      },
-    },
-  },
-  args: {
-    description: 'Description',
-    handleChange: 'doSomething',
-    maxRating: '10',
-    showRating: undefined,
-    title: 'Title',
-    vModel: 0,
-  },
-  component: TideRating,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideRating',
-};
-
-export const Demo = {};

package/src/stories/TideRealmLogo.stories.ts

@@ -1,93 +0,0 @@
-import TideRealmLogo from '@/components/TideRealmLogo.vue';
-import * as STANDARD_BREAKPOINT from '@/types/Breakpoint';
-import { REALM } from '@/types/Realm';
-import * as STANDARD_CSS_REALM_LOGO_SIZE from '@/types/RealmLogo';
-import {
-  argTypeBooleanUnrequired,
-  formatArgType,
-  formatValueAsConstant,
-  prependNoneAsUndefined,
-} from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-// TODO: Add "watcher" to reset args.breakpoint when args.markOnly is set to true.
-
-const BREAKPOINT = prependNoneAsUndefined(STANDARD_BREAKPOINT.BREAKPOINT);
-const CSS_REALM_LOGO_SIZE = prependNoneAsUndefined(STANDARD_CSS_REALM_LOGO_SIZE.CSS_REALM_LOGO_SIZE);
-
-const formatSnippet = (code: string, context: StoryContext) => {
-  const { args, argTypes } = context;
-  const argsWithValues: string[] = [`:realm="${formatValueAsConstant({ realm: args.realm }, argTypes)}"`];
-  const classes: string[] = [];
-
-  if (args.markOnly !== undefined) argsWithValues.push(`:mark-only="${args.markOnly}"`);
-  if (args.size !== undefined && args.markOnly !== true)
-    classes.push(formatValueAsConstant({ size: args.size }, argTypes));
-  if (args.breakpoint !== undefined && args.markOnly !== true)
-    classes.push(
-      `CSS.withBreakpoint([CSS_REALM_LOGO_SIZE.LARGE], ${formatValueAsConstant(
-        { breakpoint: args.breakpoint },
-        argTypes
-      )})`
-    );
-  if (classes.length > 0) argsWithValues.push(`:class="[${classes.join(', ')}]"`);
-
-  return `<TideRealmLogo ${argsWithValues.join(' ')} />`;
-};
-
-const parameters = {
-  docs: {
-    source: {
-      format: 'vue',
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-export default {
-  argTypes: {
-    breakpoint: {
-      ...formatArgType({ BREAKPOINT }),
-      description:
-        'Determines which responsive utility to apply<br /><br />Controlled via mobile-first "CSS.withBreakpoint"<br /><br />Does not apply to markOnly = true',
-      if: { arg: 'size', eq: CSS_REALM_LOGO_SIZE.SMALL },
-      table: {
-        category: 'Non-props',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'BREAKPOINT' },
-      },
-    },
-    markOnly: {
-      ...argTypeBooleanUnrequired,
-    },
-    realm: {
-      ...formatArgType({ REALM }),
-    },
-    size: {
-      ...formatArgType({ CSS_REALM_LOGO_SIZE }),
-      description:
-        'Determines logo display size<br /><br />Controlled via CSS utilities<br /><br />Does not apply to markOnly = true',
-      if: { arg: 'markOnly', neq: true },
-      table: {
-        category: 'Non-props',
-        defaultValue: { summary: 'LARGE' },
-        type: { summary: 'CSS_REALM_LOGO_SIZE' },
-      },
-    },
-  },
-  args: {
-    markOnly: undefined,
-    realm: REALM.RV,
-  },
-  component: TideRealmLogo,
-  parameters,
-  tags: ['autodocs'],
-  title: 'Components/TideRealmLogo',
-};
-
-export const Demo = {
-  markOnly: undefined,
-  size: undefined,
-};

package/src/stories/TideSeoLinks.stories.ts

@@ -1,68 +0,0 @@
-import TideSeoLinks from '@/components/TideSeoLinks.vue';
-
-import type { Link } from '@/types/Link';
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideSeoLinks>['$props'];
-
-const links: Link[] = new Array(12).fill({}).map((link, index) => {
-  return {
-    isNewTab: false,
-    label: `Link ${index + 1}`,
-    url: '/',
-  };
-});
-
-const formatSnippet = (code: string, context: StoryContext) => {
-  const { args } = context;
-
-  return `<TideSeoLinks :heading="${args.heading}" :link="links" />`;
-};
-
-const parameters = {
-  docs: {
-    source: {
-      format: 'vue',
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-const render = (args: Args) => ({
-  components: { TideSeoLinks },
-  setup: () => ({ args }),
-  template: '<TideSeoLinks v-bind="args" />',
-});
-
-export default {
-  argTypes: {
-    heading: {
-      control: 'text',
-      description: 'Determines label, URL, and target for each link',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Link[]' },
-      },
-    },
-    links: {
-      control: 'object',
-      description: 'Determines label, URL, and target for each link',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Link[]' },
-      },
-    },
-  },
-  args: {
-    heading: 'Demo',
-    links,
-  },
-  component: TideSeoLinks,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideSeoLinks',
-};
-
-export const Demo = {};

package/src/stories/TideSheet.stories.ts

@@ -1,152 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { ref, watch } from 'vue';
-
-import TideButton from '@/components/TideButton.vue';
-import TideSheet from '@/components/TideSheet.vue';
-import {
-  argTypeBooleanUnrequired,
-  disabledArgType,
-  doSomething,
-  doSomethingElse,
-  lineBreak,
-  tab,
-} from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideSheet>['$props'] & {
-  default: string;
-  handleBack: string;
-  handleClose: string;
-  vModel: boolean;
-};
-
-const formatSnippet = (code: string, context: StoryContext) => {
-  const { args } = context;
-
-  const argsWithValues: string[] = [`:is-open="${args.isOpen}"`];
-
-  if (args.isBackButton !== undefined) argsWithValues.push(`:is-back-button="${args.isBackButton}"`);
-  if (args.handleBack !== undefined) argsWithValues.push(`@back="${args.handleBack}"`);
-  if (args.handleClose !== undefined) argsWithValues.push(`@close="${args.handleClose}"`);
-
-  return `<TideSheet ${argsWithValues.join(' ')}>${lineBreak}` + `${tab}${args.default}${lineBreak}` + `</TideSheet>`;
-};
-
-const parameters = {
-  docs: {
-    source: {
-      format: 'vue',
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-const render = (args: Args, context: StoryContext) => ({
-  components: { TideButton, TideSheet },
-  methods: {
-    doSomething,
-    doSomethingElse,
-    handleBack: () => {
-      action('Back button pressed')({});
-
-      try {
-        const callback = eval(args.handleBack);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "back" control.');
-      }
-    },
-    handleIsOpenChange: (value: boolean) => {
-      context.updateArgs({ ...args, vModel: value });
-    },
-  },
-  setup: () => {
-    const isOpen = ref(args.vModel);
-
-    watch(isOpen, () => {
-      args.vModel = isOpen.value;
-    });
-
-    watch(
-      () => args.vModel,
-      (newValue) => {
-        isOpen.value = newValue;
-      }
-    );
-
-    return {
-      args,
-      isOpen,
-    };
-  },
-  template: `
-  <TideButton label="Open sheet" @click="handleIsOpenChange(true)" />
-  <TideSheet v-bind="args" v-model="isOpen" @back="handleBack" @update:modelValue="handleIsOpenChange">
-    ${args.default}
-  </TideSheet>`,
-});
-
-export default {
-  argTypes: {
-    back: disabledArgType,
-    close: disabledArgType,
-    default: {
-      control: 'text',
-      description: 'Sheet content',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'HTML' },
-      },
-    },
-    handleBack: {
-      control: 'text',
-      description: "JS function to execute when sheet's back button is pressed",
-      name: 'back',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '() => void' },
-      },
-    },
-    isBackButton: {
-      ...argTypeBooleanUnrequired,
-      table: {
-        defaultValue: { summary: 'False' },
-      },
-    },
-    isOpen: {
-      description: 'Determines whether the Sheet is displayed',
-      table: {
-        defaultValue: { summary: 'False' },
-      },
-    },
-    vModel: {
-      control: 'boolean',
-      description: 'Data binding to Vue ref',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref<boolean>' },
-      },
-    },
-  },
-  args: {
-    default: `<div>${lineBreak}${tab}Default Slot Demo${lineBreak}</div>`,
-    handleBack: 'doSomething',
-    handleClose: 'doSomethingElse',
-    isBackButton: undefined,
-    vModel: false,
-  },
-  component: TideSheet,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideSheet',
-};
-
-export const Demo = {};

package/src/stories/TideSwitch.stories.ts

@@ -1,72 +0,0 @@
-import { ref, watch } from 'vue';
-
-import TideSwitch from '@/components/TideSwitch.vue';
-import { argTypeBooleanUnrequired, dataTrack, doSomething, parameters } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideSwitch>['$props'] & {
-  vModel: true;
-};
-
-const render = (args: Args, context: StoryContext) => ({
-  components: { TideSwitch },
-  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: `<TideSwitch v-bind="args" v-model="isActive" @update:modelValue="handleIsActiveChange" />`,
-});
-
-export default {
-  argTypes: {
-    dataTrack,
-    disabled: argTypeBooleanUnrequired,
-    isActive: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines whether toggle is active',
-    },
-    vModel: {
-      control: 'boolean',
-      description: 'Data binding to Vue ref',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref<boolean>' },
-      },
-    },
-  },
-  args: {
-    dataTrack: '',
-    disabled: undefined,
-    vModel: false,
-  },
-  component: TideSwitch,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideSwitch',
-};
-
-export const Demo = {};

package/src/stories/TideTabs.stories.ts

@@ -1,114 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { ref, watchEffect } from 'vue';
-
-import TideTabs from '@/components/TideTabs.vue';
-import { change, disabledArgType, doSomething, parameters } from '@/utilities/storybook';
-
-import type { Tab } from '@/types/Tab';
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideTabs>['$props'] & {
-  handleChange: string;
-  vModel: number;
-};
-
-const tabs: Tab[] = [
-  {
-    dataTrack: 'Tab 0 Click',
-    label: 'First Tab',
-  },
-  {
-    dataTrack: 'Tab 1 Click',
-    label: 'Second Tab',
-  },
-  {
-    dataTrack: 'Tab 2 Click',
-    label: 'Third Tab',
-  },
-  {
-    dataTrack: 'Tab 3 Click',
-    label: 'Fourth Tab',
-  },
-];
-
-const render = (args: Args, context: StoryContext) => ({
-  components: { TideTabs },
-  methods: {
-    doSomething,
-    handleChange: (index: number) => {
-      action('Current tab')(index);
-      context.updateArgs({ ...args, vModel: index });
-
-      try {
-        const callback = eval(args.handleChange);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "change" control.');
-      }
-    },
-  },
-  setup: () => {
-    const currentTab = ref<number>(args.vModel);
-
-    watchEffect(() => {
-      currentTab.value = args.vModel;
-    });
-
-    return {
-      args,
-      currentTab,
-    };
-  },
-  template: `<TideTabs @update:modelValue="handleChange" v-bind="args" v-model="currentTab" />`,
-});
-
-export default {
-  argTypes: {
-    change: disabledArgType,
-    handleChange: {
-      ...change,
-      name: 'update:modelValue',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '(tabIndex: number) => void' },
-      },
-    },
-    tabs: {
-      control: 'object',
-      isCustom: true,
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Tab[]' },
-      },
-    },
-    vModel: {
-      control: {
-        type: 'select',
-      },
-      description: 'Data binding to Vue ref (active tab index)',
-      isDynamic: true,
-      options: Object.keys(tabs).map((index) => parseInt(index)),
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref<number>' },
-      },
-    },
-  },
-  args: {
-    handleChange: 'doSomething',
-    tabs,
-    vModel: 0,
-  },
-  component: TideTabs,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideTabs',
-};
-
-export const Demo = {};