tide-design-system 2.5.13 → 2.5.15

package/src/stories/TideButtonIcon.stories.ts

@@ -1,109 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import TideButtonIcon from '@/components/TideButtonIcon.vue';
-import * as STANDARD_ELEMENT from '@/types/Element';
-import { ICON } from '@/types/Icon';
-import * as STANDARD_PRIORITY from '@/types/Priority';
-import * as STANDARD_TYPE_BUTTON from '@/types/Type';
-import {
-  argTypeBooleanUnrequired,
-  click,
-  dataTrack,
-  doSomething,
-  formatArgType,
-  parameters,
-  prependNoneAsUndefined,
-} from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideButtonIcon>['$props'] & {
-  click: string;
-};
-
-const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
-const PRIORITY = prependNoneAsUndefined(STANDARD_PRIORITY.PRIORITY);
-const BUTTON_TYPE = prependNoneAsUndefined(STANDARD_TYPE_BUTTON.BUTTON_TYPE);
-
-const render = (args: Args) => ({
-  components: { TideButtonIcon },
-  methods: {
-    doSomething,
-    handleClick: () => {
-      action('TideButtonIcon clicked')({});
-
-      try {
-        const callback = eval(args.click);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "click" control.');
-      }
-    },
-  },
-  setup: () => ({ args }),
-  template: '<TideButtonIcon @click="handleClick" v-bind="args" />',
-});
-
-export default {
-  argTypes: {
-    click: {
-      ...click,
-      if: { arg: 'element', neq: ELEMENT.LINK },
-    },
-    dataTrack,
-    disabled: {
-      ...argTypeBooleanUnrequired,
-      if: { arg: 'element', neq: ELEMENT.LINK },
-    },
-    element: {
-      ...formatArgType({ ELEMENT }),
-      table: {
-        defaultValue: { summary: 'BUTTON' },
-      },
-    },
-    href: {
-      if: { arg: 'element', eq: ELEMENT.LINK },
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    icon: {
-      ...formatArgType({ ICON }),
-    },
-    isNewTab: {
-      ...argTypeBooleanUnrequired,
-      if: { arg: 'element', eq: ELEMENT.LINK },
-    },
-    priority: {
-      ...formatArgType({ PRIORITY }),
-      table: {
-        defaultValue: { summary: 'PRIMARY' },
-      },
-    },
-    type: {
-      ...formatArgType({ BUTTON_TYPE }),
-      table: {
-        defaultValue: { summary: 'BUTTON' },
-      },
-    },
-  },
-  args: {
-    click: 'doSomething',
-    dataTrack: '',
-    disabled: undefined,
-    element: undefined,
-    href: 'https://www.sample.com',
-    icon: ICON.MAIL,
-    isNewTab: undefined,
-    priority: undefined,
-  },
-  component: TideButtonIcon,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideButtonIcon',
-};
-
-export const Demo = {};

package/src/stories/TideButtonPagination.stories.ts

@@ -1,99 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import TideButtonPagination from '@/components/TideButtonPagination.vue';
-import * as STANDARD_ELEMENT from '@/types/Element';
-import {
-  argTypeBooleanUnrequired,
-  click,
-  dataTrack,
-  doSomething,
-  formatArgType,
-  parameters,
-  prependNoneAsUndefined,
-} from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideButtonPagination>['$props'] & {
-  click: string;
-};
-
-const ELEMENT_BROAD = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT_BROAD);
-
-const render = (args: Args) => ({
-  components: { TideButtonPagination },
-  methods: {
-    doSomething,
-    handleClick: () => {
-      action('TideButtonPagination clicked')({});
-
-      try {
-        const callback = eval(args.click);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "click" control.');
-      }
-    },
-  },
-  setup: () => ({ args }),
-  template: `<TideButtonPagination @click="handleClick" v-bind="args" />`,
-});
-
-export default {
-  argTypes: {
-    click: {
-      ...click,
-      if: { arg: 'element', neq: ELEMENT_BROAD.LINK },
-    },
-    dataTrack,
-    disabled: {
-      ...argTypeBooleanUnrequired,
-      if: {
-        arg: 'element',
-        eq: ELEMENT_BROAD.BUTTON,
-      },
-    },
-    element: {
-      ...formatArgType({ ELEMENT_BROAD }),
-      table: {
-        defaultValue: { summary: 'BUTTON' },
-      },
-    },
-    href: {
-      if: { arg: 'element', eq: ELEMENT_BROAD.LINK },
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    isNewTab: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines whether to target a new browser tab<br />(Link only)',
-      if: { arg: 'element', eq: ELEMENT_BROAD.LINK },
-    },
-    label: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-  },
-  args: {
-    click: 'doSomething',
-    dataTrack: '',
-    disabled: undefined,
-    element: undefined,
-    href: 'https://www.sample.com',
-    isNewTab: undefined,
-    label: '1',
-  },
-  component: TideButtonPagination,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideButtonPagination',
-};
-
-export const Demo = {};

package/src/stories/TideButtonSave.stories.ts

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

package/src/stories/TideButtonSegmented.stories.ts

@@ -1,110 +0,0 @@
-import { ref, watch } from 'vue';
-
-import TideButtonSegmented from '@/components/TideButtonSegmented.vue';
-import { doSomething, getLabelsFromOptions, parameters } from '@/utilities/storybook';
-
-import type { Tab } from '@/types/Tab';
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideButtonSegmented>['$props'] & {
-  vModel: number;
-};
-
-const options = {
-  'None': undefined,
-  'Tab 1': 0,
-  'Tab 2': 1,
-  'Tab 3': 2,
-};
-
-const tabs: Tab[] = [
-  {
-    dataTrack: 'Tab 0 Selected',
-    label: 'First Tab',
-  },
-  {
-    dataTrack: 'Tab 1 Selected',
-    label: 'Second Tab',
-  },
-  {
-    dataTrack: 'Tab 2 Selected',
-    label: 'Third Tab',
-  },
-];
-
-const render = (args: Args, context: StoryContext) => ({
-  components: { TideButtonSegmented },
-  methods: {
-    doSomething,
-    handleIndexChange: (value: number) => {
-      context.updateArgs({ ...args, vModel: value });
-    },
-  },
-  setup: () => {
-    const currentIndex = ref(args.vModel);
-
-    watch(currentIndex, () => {
-      args.vModel = currentIndex.value;
-    });
-
-    watch(
-      () => args.vModel,
-      (newValue) => {
-        currentIndex.value = newValue;
-      }
-    );
-
-    return {
-      args,
-      currentIndex,
-    };
-  },
-  template: '<TideButtonSegmented v-bind="args" v-model="currentIndex" @update:modelValue="handleIndexChange" />',
-});
-
-export default {
-  argTypes: {
-    activeTab: {
-      control: {
-        labels: getLabelsFromOptions(options),
-        type: 'select',
-      },
-      description: 'Determines which tab should be active',
-      isDynamic: true,
-      options: Object.values(options),
-      table: {
-        defaultValue: { summary: 'None' },
-      },
-    },
-    tabs: {
-      control: 'object',
-      isCustom: true,
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Tab[]' },
-      },
-    },
-    vModel: {
-      control: 'number',
-      description: 'Data binding to Vue ref',
-      table: {
-        category: 'Native',
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Ref<number>' },
-      },
-    },
-  },
-  args: {
-    activeTab: undefined,
-    handleChange: 'doSomething',
-    tabs,
-    vModel: 0,
-  },
-  component: TideButtonSegmented,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideButtonSegmented',
-};
-
-export const Demo = {};

package/src/stories/TideCard.stories.ts

@@ -1,102 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import TideCard from '@/components/TideCard.vue';
-import { TYPE_CARD as STANDARD_TYPE_CARD } from '@/types/Card';
-import { ICON } from '@/types/Icon';
-import {
-  argTypeBooleanUnrequired,
-  click,
-  doSomething,
-  formatArgType,
-  parameters,
-  prependNoneAsUndefined,
-} from '@/utilities/storybook';
-
-type Args = InstanceType<typeof TideCard>['$props'] & {
-  click: string;
-};
-
-const TYPE_CARD = prependNoneAsUndefined(STANDARD_TYPE_CARD);
-const CARD_ICON = prependNoneAsUndefined(ICON);
-
-const render = (args: Args) => ({
-  components: { TideCard },
-  methods: {
-    doSomething,
-    handleClick: () => {
-      action('TideCard clicked')({});
-
-      try {
-        const callback = eval(args.click);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "click" control.');
-      }
-    },
-  },
-  setup: () => ({ args }),
-  template: `<TideCard @click="handleClick" v-bind="args" />`,
-});
-
-export default {
-  argTypes: {
-    click: {
-      ...click,
-    },
-    description: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    heading: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    href: {
-      control: 'text',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    icon: {
-      ...formatArgType({ CARD_ICON }),
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'Icon' },
-      },
-    },
-    selected: argTypeBooleanUnrequired,
-    type: {
-      ...formatArgType({ TYPE_CARD }),
-      table: {
-        defaultValue: { summary: 'INFORMATIONAL' },
-        type: { summary: 'CardType' },
-      },
-    },
-  },
-  args: {
-    click: 'doSomething',
-    description: '',
-    heading: 'Demo',
-    href: '',
-    icon: CARD_ICON.None,
-    selected: undefined,
-    type: TYPE_CARD.None,
-  },
-  component: TideCard,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideCard',
-};
-
-export const Demo = {};

package/src/stories/TideCarousel.stories.ts

@@ -1,219 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { computed } from 'vue';
-
-import TideCard from '@/components/TideCard.vue';
-import TideCarousel from '@/components/TideCarousel.vue';
-import { argTypeBooleanUnrequired, disabledArgType, doSomething, lineBreak, tab } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-type Args = InstanceType<typeof TideCarousel>['$props'] & {
-  handleSlidesAddedToView: string;
-  isFullWidthCards: boolean | undefined;
-  maxDots: string | undefined;
-};
-
-const formatSnippet = (code: string, context: StoryContext) => {
-  const { args } = context;
-
-  const argsWithValues: string[] = [];
-
-  if (args.hasDots !== undefined) argsWithValues.push(`has-dots="${args.hasDots}"`);
-  if (args.isFloating !== undefined) argsWithValues.push(`:is-floating="${args.isFloating}"`);
-  if (args.isHideawayButtons !== undefined) argsWithValues.push(`:is-hideaway-buttons="${args.isHideawayButtons}"`);
-  if (args.isScrollByPage !== undefined) argsWithValues.push(`:is-scroll-by-page="false"`);
-  if (args.maxDots !== '') argsWithValues.push(`max-dots="${args.maxDots}"`);
-  if (args.subtitle !== '') argsWithValues.push(`subtitle="${args.subtitle}"`);
-  if (args.title !== '') argsWithValues.push(`title="${args.title}"`);
-  if (args.handleSlidesAddedToView) argsWithValues.push(`@slides-added-to-view="${args.handleSlidesAddedToView}"`);
-
-  const slotContentMisc = args.misc === '' ? '' : `${tab}<template #misc>${args.misc}</template>${lineBreak}`;
-
-  return (
-    // prettier-ignore
-    `<TideCarousel ${argsWithValues.join(' ')}>` + lineBreak +
-      slotContentMisc + tab +
-      `<li class="tide-shrink-none${args.isFullWidthCards ? ' tide-width-full' : ''}" v-for="(_child, index) in new Array(12)">` + lineBreak + tab + tab +
-        args.default + lineBreak + tab +
-      `</li>` + lineBreak +
-    `</TideCarousel>`
-  );
-};
-
-const parameters = {
-  docs: {
-    source: {
-      format: 'vue',
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-const render = (args: Args) => ({
-  components: { TideCard, TideCarousel },
-  methods: {
-    doSomething,
-    handleSlidesAddedToView: (slides: number[]) => {
-      action(`Slides added to view`)(slides);
-
-      try {
-        const callback = eval(args.handleSlidesAddedToView);
-
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "slidesAddedToView" control.');
-      }
-    },
-  },
-  setup: () => {
-    const conditionalFullWidth = computed(() => (args.isFullWidthCards ? ' tide-width-full' : ''));
-    const argsFormatted = computed(() => ({
-      ...args,
-      maxDots: args.maxDots === '' ? undefined : args.maxDots,
-    }));
-
-    return {
-      argsFormatted,
-      conditionalFullWidth,
-    };
-  },
-  // prettier-ignore
-  template:
-  `<TideCarousel
-    @slides-added-to-view="handleSlidesAddedToView"
-    v-bind="argsFormatted"
-    :key="argsFormatted.isFullWidthCards"
-  >
-    <template #misc>{{ argsFormatted.misc }}</template>
-    <li
-      :class="['tide-shrink-none tide-border-1 sb-border-blue tide-padding-1 sb-bg-blue-light', conditionalFullWidth]"
-      v-for="(_child, index) in new Array(12)"
-    >
-      {{ argsFormatted.default.replace('#', index) }}
-    </li>
-  </TideCarousel>`,
-});
-
-export default {
-  argTypes: {
-    default: {
-      control: 'text',
-      description: 'Dynamic card content',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'HTML' },
-      },
-    },
-    handleSlidesAddedToView: {
-      control: 'text',
-      description: 'JS code or function to execute on slidesAddedToView event',
-      isEmit: true,
-      name: 'slidesAddedToView',
-      table: {
-        category: 'Events',
-        defaultValue: { summary: 'None' },
-        type: { summary: '(slides: number[]) => void' },
-      },
-    },
-    hasDots: {
-      ...argTypeBooleanUnrequired,
-      table: {
-        defaultValue: { summary: 'False' },
-      },
-    },
-    isFloating: {
-      ...argTypeBooleanUnrequired,
-      table: {
-        defaultValue: { summary: 'False' },
-      },
-    },
-    isFullWidthCards: {
-      ...argTypeBooleanUnrequired,
-      description: 'Preview 1 card per page implementation',
-      table: {
-        category: 'Demo',
-        defaultValue: { summary: 'None' },
-        disable: true,
-        type: { summary: 'boolean' },
-      },
-    },
-    isHeadline1: {
-      ...argTypeBooleanUnrequired,
-      table: {
-        defaultValue: { summary: 'False' },
-      },
-    },
-    isHideawayButtons: {
-      ...argTypeBooleanUnrequired,
-      if: { arg: 'isFloating', eq: true },
-      table: {
-        defaultValue: { summary: 'True' },
-      },
-    },
-    isScrollByPage: disabledArgType,
-    maxDots: {
-      control: 'text',
-      if: { arg: 'hasDots', eq: true },
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'number' },
-      },
-    },
-    misc: {
-      control: 'text',
-      description: 'Content to display between the title/buttons and carousel content',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'HTML' },
-      },
-    },
-    slidesAddedToView: disabledArgType,
-    subtitle: {
-      control: 'text',
-      if: { arg: 'isFloating', neq: true },
-      table: {
-        defaultValue: { summary: 'None' },
-      },
-    },
-    title: {
-      control: 'text',
-      if: { arg: 'isFloating', neq: true },
-      table: {
-        defaultValue: { summary: 'None' },
-      },
-    },
-  },
-  args: {
-    default: 'Card #',
-    handleSlidesAddedToView: 'doSomething',
-    hasDots: undefined,
-    isFloating: undefined,
-    isFullWidthCards: undefined,
-    isHideawayButtons: undefined,
-    maxDots: '',
-    misc: '',
-    subtitle: '',
-    title: 'Demo',
-  },
-  component: TideCarousel,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Components/TideCarousel',
-};
-
-export const Demo = {
-  name: 'Default',
-};
-
-export const FullWidth = {
-  args: {
-    default: 'Full-width card #',
-    isFullWidthCards: true,
-    title: 'Demo',
-  },
-  name: 'Full-width cards ',
-};