tide-design-system 2.0.22 → 2.0.23

package/src/stories/TideBackgroundImage.stories.ts

@@ -0,0 +1,53 @@
+import { parameters, argTypeBooleanUnrequired } from '@/utilities/storybook';
+import TideBackgroundImage from '@/components/TideBackgroundImage.vue';
+
+const render = (args: any) => ({
+  components: { TideBackgroundImage },
+  setup() {
+    return { args };
+  },
+  template: `
+    <TideBackgroundImage v-bind="args">
+      <div class="tide-padding-4 tide-font-700 tide-font-20">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque est nibh, convallis vel aliquam non, elementum a lorem.
+      </div>
+    </TideBackgroundImage>
+  `,
+});
+
+export default {
+  argTypes: {
+    alt: {
+      control: 'text',
+      description: 'Button text',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    isLazy: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines if the image should be lazy-loaded',
+    },
+    src: {
+      control: 'text',
+      description: 'Source URL for the background image',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    alt: '',
+    isLazy: true,
+    src: 'https://placedog.net/500/400',
+  },
+  component: TideBackgroundImage,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideBackgroundImage',
+};
+
+export const Demo = {};

package/src/stories/TideBadge.stories.ts

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

package/src/stories/TideBadgePremium.stories.ts

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

package/src/stories/TideBadgeTrustedPartner.stories.ts

@@ -0,0 +1,33 @@
+import * as STANDARD_BADGE from '@/types/Storybook';
+import TideBadgeTrustedPartner from '@/components/TideBadgeTrustedPartner.vue';
+import { formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';
+
+const BADGE_TRUSTED = prependNoneAsUndefined(STANDARD_BADGE.BADGE_TRUSTED);
+
+const render = (args: any) => ({
+  components: { TideBadgeTrustedPartner },
+  setup: () => ({ args }),
+  template: `<TideBadgeTrustedPartner v-bind="args" />`,
+});
+
+export default {
+  argTypes: {
+    years: {
+      ...formatArgType({ BADGE_TRUSTED }),
+      description: 'Badge text',
+      table: {
+        defaultValue: { summary: BADGE_TRUSTED.YEARS_5 },
+      },
+    },
+  },
+  args: {
+    years: undefined,
+  },
+  component: TideBadgeTrustedPartner,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideBadgeTrustedPartner',
+};
+
+export const Demo = {};

package/src/stories/TideBreadCrumbs.stories.ts

@@ -0,0 +1,43 @@
+import type { BreadCrumb } from '@/types/BreadCrumb';
+
+import TideBreadCrumbs from '@/components/TideBreadCrumbs.vue';
+import { parameters } from '@/utilities/storybook';
+
+const breadCrumbs: BreadCrumb[] = [
+  {
+    dataTrack: 'Home Bread Crumb Click',
+    label: 'Home',
+    url: '/',
+  },
+  {
+    dataTrack: 'SRP Bread Crumb Click',
+    label: 'Search results',
+    url: '/rvs-for-sale',
+  },
+  {
+    label: 'Vehicle details',
+  },
+];
+
+export default {
+  argTypes: {
+    breadCrumbs: {
+      control: 'object',
+      description: 'Determines label and optional URL for each bread crumb',
+      isCustom: true,
+      table: {
+        defaultValue: { summary: '[]' },
+        type: { summary: 'BreadCrumb[]' },
+      },
+    },
+  },
+  args: {
+    breadCrumbs: breadCrumbs,
+  },
+  component: TideBreadCrumbs,
+  parameters,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideBreadCrumbs',
+};
+
+export const Demo = {};

package/src/stories/TideButton.stories.ts

@@ -0,0 +1,118 @@
+import { action } from '@storybook/addon-actions';
+
+import * as STANDARD_ELEMENT from '@/types/Element';
+import * as STANDARD_ICON from '@/types/Icon';
+import * as STANDARD_PRIORITY from '@/types/Priority';
+import TideButton from '@/components/TideButton.vue';
+import {
+  argTypeBooleanUnrequired,
+  click,
+  dataTrack,
+  doSomething,
+  formatArgType,
+  parameters,
+  prependNoneAsUndefined,
+} from '@/utilities/storybook';
+
+const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
+const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
+const PRIORITY = prependNoneAsUndefined(STANDARD_PRIORITY.PRIORITY);
+
+const render = (args: any) => ({
+  components: { TideButton },
+  methods: {
+    doSomething,
+    handleClick: (event: Event) => {
+      action('TideButton clicked')(event);
+
+      try {
+        const buttonClick = eval(args.click);
+
+        if (buttonClick) {
+          buttonClick();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "click" control.');
+      }
+    },
+  },
+  setup: () => ({ args }),
+  template: `<TideButton @click="handleClick" v-bind="args" />`,
+});
+
+export default {
+  argTypes: {
+    click: {
+      ...click,
+      if: { arg: 'element', neq: ELEMENT.LINK },
+    },
+    dataTrack,
+    disabled: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines clickability<br />(Button only)',
+      if: { arg: 'element', neq: ELEMENT.LINK },
+    },
+    element: {
+      ...formatArgType({ ELEMENT }),
+      description: 'HTML tag type',
+      table: {
+        defaultValue: { summary: 'BUTTON' },
+      },
+    },
+    href: {
+      description: 'URL to open<br />(Link only)',
+      if: { arg: 'element', eq: ELEMENT.LINK },
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    iconLeading: {
+      ...formatArgType({ ICON }),
+      description: 'Icon to left of label',
+    },
+    iconTrailing: {
+      ...formatArgType({ ICON }),
+      description: 'Icon to right of label',
+    },
+    isNewTab: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether to target a new browser tab<br />(Link only)',
+      if: { arg: 'element', eq: ELEMENT.LINK },
+    },
+    label: {
+      control: 'text',
+      description: 'Button text',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    priority: {
+      ...formatArgType({ PRIORITY }),
+      description: 'Determines visual prominence',
+      table: {
+        defaultValue: { summary: 'PRIMARY' },
+      },
+    },
+  },
+  args: {
+    click: 'doSomething',
+    dataTrack: '',
+    disabled: undefined,
+    element: undefined,
+    href: 'https://www.sample.com',
+    iconLeading: undefined,
+    iconTrailing: undefined,
+    isNewTab: undefined,
+    label: 'Demo',
+    priority: undefined,
+  },
+  component: TideButton,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideButton',
+};
+
+export const Demo = {};

package/src/stories/TideButtonIcon.stories.ts

@@ -0,0 +1,103 @@
+import { action } from '@storybook/addon-actions';
+
+import * as STANDARD_ELEMENT from '@/types/Element';
+import * as STANDARD_PRIORITY from '@/types/Priority';
+import TideButtonIcon from '@/components/TideButtonIcon.vue';
+import { ICON } from '@/types/Icon';
+import {
+  argTypeBooleanUnrequired,
+  click,
+  dataTrack,
+  doSomething,
+  formatArgType,
+  parameters,
+  prependNoneAsUndefined,
+} from '@/utilities/storybook';
+
+const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
+const PRIORITY = prependNoneAsUndefined(STANDARD_PRIORITY.PRIORITY);
+
+const render = (args: any) => ({
+  components: { TideButtonIcon },
+  methods: {
+    doSomething,
+    handleClick: (event: Event) => {
+      action('TideButtonIcon clicked')(event);
+
+      try {
+        const buttonClick = eval(args.click);
+
+        if (buttonClick) {
+          buttonClick();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "click" control.');
+      }
+    },
+  },
+  setup: () => ({ args }),
+  template: '<TideButtonIcon @click="handleClick" class="tide-display-inline-block" v-bind="args" />',
+});
+
+export default {
+  argTypes: {
+    click: {
+      ...click,
+      if: { arg: 'element', neq: ELEMENT.LINK },
+    },
+    dataTrack,
+    disabled: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines clickability<br />(Button only)',
+      if: { arg: 'element', neq: ELEMENT.LINK },
+    },
+    element: {
+      ...formatArgType({ ELEMENT }),
+      description: 'HTML tag type',
+      table: {
+        defaultValue: { summary: 'BUTTON' },
+      },
+    },
+    href: {
+      description: 'URL to open<br />(Link only)',
+      if: { arg: 'element', eq: ELEMENT.LINK },
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    icon: {
+      ...formatArgType({ ICON }),
+      description: 'Icon',
+    },
+    isNewTab: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether to target a new browser tab<br />(Link only)',
+      if: { arg: 'element', eq: ELEMENT.LINK },
+    },
+    priority: {
+      ...formatArgType({ PRIORITY }),
+      description: 'Determines visual prominence',
+      table: {
+        defaultValue: { summary: 'PRIMARY' },
+      },
+    },
+  },
+  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: 'Basic Components/TideButtonIcon',
+};
+
+export const Demo = {};

package/src/stories/TideButtonPagination.stories.ts

@@ -0,0 +1,99 @@
+import { action } from '@storybook/addon-actions';
+
+import * as STANDARD_ELEMENT from '@/types/Element';
+import TideButtonPagination from '@/components/TideButtonPagination.vue';
+import {
+  argTypeBooleanUnrequired,
+  click,
+  dataTrack,
+  doSomething,
+  formatArgType,
+  parameters,
+  prependNoneAsUndefined,
+} from '@/utilities/storybook';
+
+const ELEMENT_TEXT_AS_ICON = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT_TEXT_AS_ICON);
+
+const render = (args: any) => ({
+  components: { TideButtonPagination },
+  methods: {
+    doSomething,
+    handleClick: (event: Event) => {
+      action('TideButtonPagination clicked')(event);
+
+      try {
+        const buttonClick = eval(args.click);
+
+        if (buttonClick) {
+          buttonClick();
+        }
+      } 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_TEXT_AS_ICON.LINK },
+    },
+    dataTrack,
+    disabled: {
+      ...argTypeBooleanUnrequired,
+      description: 'Indicates whether Pagination Button is associated with the displayed page',
+      if: {
+        arg: 'element',
+        eq: ELEMENT_TEXT_AS_ICON.BUTTON,
+      },
+    },
+    element: {
+      ...formatArgType({ ELEMENT_TEXT_AS_ICON }),
+      description: 'HTML tag type',
+      table: {
+        defaultValue: { summary: 'BUTTON' },
+      },
+    },
+    href: {
+      description: 'URL to open<br />(Link only)',
+      if: { arg: 'element', eq: ELEMENT_TEXT_AS_ICON.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_TEXT_AS_ICON.LINK },
+    },
+    label: {
+      control: 'text',
+      description: 'Button 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: 'Basic Components/TideButtonPagination',
+};
+
+export const Demo = {};

package/src/stories/TideCard.stories.ts

@@ -0,0 +1,38 @@
+import TideCard from '@/components/TideCard.vue';
+import { dataTrack, parameters } from '@/utilities/storybook';
+
+const render = (args: any) => ({
+  components: { TideCard },
+  setup: () => ({ args }),
+  template: `<TideCard class="tide-display-inline-block tide-padding-1">{{ args.default }}</TideCard>`,
+});
+
+export default {
+  argTypes: {
+    class: {
+      table: {
+        disable: true,
+      },
+    },
+    dataTrack,
+    default: {
+      control: 'text',
+      description: 'Card content',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
+      },
+    },
+  },
+  args: {
+    dataTrack: '',
+    default: 'Demo',
+  },
+  component: TideCard,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideCard',
+};
+
+export const Demo = {};

package/src/stories/TideCarousel.stories.ts

@@ -0,0 +1,130 @@
+import { action } from '@storybook/addon-actions';
+
+import type { StoryContext } from '@storybook/vue3';
+
+import TideCard from '@/components/TideCard.vue';
+import TideCarousel from '@/components/TideCarousel.vue';
+import { argTypeBooleanUnrequired, change, disabledArgType, doSomething, lineBreak, tab } from '@/utilities/storybook';
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args } = context;
+
+  const argsWithValues: string[] = [];
+
+  if (args.isTouchscreen !== undefined) argsWithValues.push(`:is-touchscreen="${args.isTouchscreen}"`);
+  if (args.offsetX) argsWithValues.push(`:offset-x="${args.offsetX}"`);
+  if (args.handleEmit) argsWithValues.push(`@change"${args.handleEmit}"`);
+
+  return (
+    `<TideCarousel ${argsWithValues.join(' ')}>${lineBreak}` +
+    `${tab}<li${lineBreak}` +
+    `${tab}${tab}:class="tide-shrink-none${args.hasPadding ? ' tide-padding-y-1' : ''}"${lineBreak}` +
+    `${tab}${tab}v-for="(_child, index) in new Array(12)"${lineBreak}` +
+    `${tab}>${lineBreak}` +
+    `${tab}${tab}<TideCard class="tide-padding-1">Card {{ index + 1 }}</TideCard>${lineBreak}` +
+    `${tab}</li>${lineBreak}` +
+    `</TideCarousel>`
+  );
+};
+
+const parameters = {
+  docs: {
+    source: {
+      format: 'vue',
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+const render = (args: any) => ({
+  components: { TideCard, TideCarousel },
+  methods: {
+    doSomething,
+    handleEmit: (index: number) => {
+      action(`Current slide ${index}`)({ index });
+
+      try {
+        const performCallback = eval(args.handleEmit);
+
+        if (performCallback) {
+          performCallback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "change" control.');
+      }
+    },
+  },
+  setup: () => ({ args }),
+  template: `<TideCarousel @change="handleEmit" v-bind="args"><li v-for="(_child, index) in new Array(12)" :class="['tide-shrink-none', args.hasPadding ? ' tide-padding-y-1' : '']"><TideCard class="tide-padding-1">Card {{ index + 1 }}</TideCard></li></TideCarousel>`,
+});
+
+export default {
+  argTypes: {
+    change: disabledArgType,
+    default: {
+      table: {
+        disable: true,
+      },
+    },
+    handleEmit: {
+      ...change,
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: '(event: Event, currentSlide: number) => void' },
+      },
+    },
+    // TODO: adapt via formatSnippet
+    hasPadding: {
+      control: 'boolean',
+      description: 'Demonstrates the box shadow',
+      name: 'Has Padding',
+      table: {
+        defaultValue: { summary: 'False' },
+        type: { summary: 'boolean' },
+      },
+    },
+    isTouchscreen: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines button and/or swipe control scheme<br />(Use reference to ViewportStore)',
+      table: {
+        defaultValue: { summary: 'None' },
+      },
+    },
+    offsetX: {
+      control: {
+        max: 72,
+        min: 0,
+        step: 24,
+        type: 'number',
+      },
+      description: 'Determines horizontal spacing around Carousel content',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'number (px)' },
+      },
+    },
+    slideChange: {
+      control: 'text',
+      description: 'JS function to execute when current slide is updated',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: '(event: Event, slideIndex: number) => void' },
+      },
+    },
+  },
+  args: {
+    handleEmit: 'doSomething',
+    hasPadding: false,
+    isTouchscreen: undefined,
+    offsetX: 0,
+    slideChange: 'doSomething',
+  },
+  component: TideCarousel,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideCarousel',
+};
+
+export const Demo = {};