tide-design-system 2.0.21 → 2.0.23

package/src/stories/TideTabs.stories.ts

@@ -0,0 +1,100 @@
+import { action } from '@storybook/addon-actions';
+
+import type { Tab } from '@/types/Tab';
+
+import TideTabs from '@/components/TideTabs.vue';
+import { change, disabledArgType, doSomething, getLabelsFromOptions, parameters } from '@/utilities/storybook';
+
+/* eslint-disable */
+// ^ Storybook controls are based on iterating over object properties instead of array slots (bad form), so these can't be ordered alphabetically.
+const options = {
+  'None': undefined,
+  'Tab 1': 0,
+  'Tab 2': 1,
+  'Tab 3': 2,
+};
+/* eslint-enable */
+
+const tabs: Tab[] = [
+  {
+    dataTrack: 'Tab 0 Click',
+    label: 'First Tab',
+  },
+  {
+    dataTrack: 'Tab 1 Click',
+    label: 'Second Tab',
+  },
+  {
+    dataTrack: 'Tab 2 Click',
+    label: 'Third Tab',
+  },
+];
+
+const render = (args: any) => ({
+  components: { TideTabs },
+  methods: {
+    doSomething,
+    handleEmit: (event: Event, index: number) => {
+      action(`Current tab ${index}`)(event, { index });
+
+      try {
+        const performCallback = eval(args.handleEmit);
+
+        if (performCallback) {
+          performCallback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "change" control.');
+      }
+    },
+  },
+  setup: () => ({ args }),
+  template:
+    '<TideTabs @change="handleEmit" :key="args.activeTabInitial" class="tide-display-inline-flex" v-bind="args" />',
+});
+
+export default {
+  argTypes: {
+    activeTabInitial: {
+      control: {
+        labels: getLabelsFromOptions(options),
+        type: 'select',
+      },
+      description: 'Determines which tab should be active by default<br />(Subsequently managed within component)',
+      isDynamic: true,
+      options: Object.values(options),
+      table: {
+        defaultValue: { summary: 'None' },
+      },
+    },
+    change: disabledArgType,
+    handleEmit: {
+      ...change,
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: '(event: Event, tabIndex: number) => void' },
+      },
+    },
+    tabs: {
+      control: 'object',
+      description: 'Sets label and callback for each tab',
+      isCustom: true,
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Tab[]' },
+      },
+    },
+  },
+  args: {
+    activeTabInitial: undefined,
+    handleEmit: 'doSomething',
+    tabs,
+  },
+  component: TideTabs,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideTabs',
+};
+
+export const Demo = {};

package/src/stories/TideToggle.stories.ts

@@ -0,0 +1,69 @@
+import { action } from '@storybook/addon-actions';
+
+import TideToggle from '@/components/TideToggle.vue';
+import {
+  argTypeBooleanUnrequired,
+  change,
+  dataTrack,
+  disabledArgType,
+  doSomething,
+  parameters,
+} from '@/utilities/storybook';
+
+const render = (args: any, { updateArgs }: any) => ({
+  components: { TideToggle },
+  methods: {
+    doSomething,
+    handleEmit: (event: Event, isActive: boolean) => {
+      updateArgs({ ...args, isActive });
+      action('TideToggle changed')(event, { isActive });
+
+      try {
+        const performCallback = eval(args.handleEmit);
+
+        if (performCallback) {
+          performCallback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "change" control.');
+      }
+    },
+  },
+  setup: () => ({ args }),
+  template: `<TideToggle @change="handleEmit" v-bind="args" />`,
+});
+
+export default {
+  argTypes: {
+    change: disabledArgType,
+    dataTrack,
+    disabled: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines clickability',
+    },
+    handleEmit: {
+      ...change,
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: '(event: Event, tabIndex: number) => void' },
+      },
+    },
+    isActive: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether toggle is active',
+    },
+  },
+  args: {
+    dataTrack: '',
+    disabled: undefined,
+    handleEmit: 'doSomething',
+    isActive: undefined,
+  },
+  component: TideToggle,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideToggle',
+};
+
+export const Demo = {};

package/src/stories/Welcome.mdx

@@ -0,0 +1,17 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Welcome" />
+
+# Welcome to TIDE
+
+> When building apps, one of the biggest challenges is to figure out if a piece of UI already exists in your codebase and how to use it for the new feature you're building.
+>
+> Storybook catalogues all your components and their use cases. Therefore, you can quickly browse it to find what you're looking for.
+>
+> Here's what the workflow looks like:
+>
+> * Use the sidebar to find the suitable component.
+> * Review its stories to select the variant that fulfills the requirements.
+> * Copy/paste the code snippet into the app and wire it up to data.
+
+*(Excerpted from the [Storybook docs](https://storybook.js.org/docs/vue/get-started/browse-stories#use-stories-to-build-uis))*

package/src/types/Alert.ts

@@ -0,0 +1,8 @@
+export const ALERT = {
+  ERROR: 'error',
+  INFO: 'info',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+} as const;
+
+export type Alert = (typeof ALERT)[keyof typeof ALERT];

package/src/types/Badge.ts

@@ -0,0 +1,21 @@
+export const BADGE = {
+  JUST_LISTED: 'Just listed',
+  NATIONWIDE: 'Nationwide',
+  REDUCED: 'Reduced',
+  UPDATED: 'Updated',
+} as const;
+
+export const BADGE_PREMIUM = {
+  PREMIUM: 'Premium',
+  PREMIUM_SELECT: 'Premium SELECT',
+} as const;
+
+export const BADGE_TRUSTED = {
+  YEARS_10: '10',
+  YEARS_15: '15',
+  YEARS_5: '5',
+} as const;
+
+export type Badge = (typeof BADGE)[keyof typeof BADGE];
+export type BadgePremium = (typeof BADGE_PREMIUM)[keyof typeof BADGE_PREMIUM];
+export type BadgeTrustedYears = (typeof BADGE_TRUSTED)[keyof typeof BADGE_TRUSTED];

package/src/types/BreadCrumb.ts

@@ -0,0 +1,5 @@
+export type BreadCrumb = {
+  dataTrack?: string;
+  label: string;
+  url?: string;
+};

package/src/types/Detail.ts

@@ -0,0 +1,4 @@
+export type Detail = {
+  label: string;
+  value: string;
+};

package/src/types/Element.ts

@@ -0,0 +1,13 @@
+export const ELEMENT = {
+  BUTTON: 'button',
+  LINK: 'a',
+} as const;
+
+export const ELEMENT_TEXT_AS_ICON = {
+  BUTTON: 'button',
+  DIV: 'div',
+  LINK: 'a',
+} as const;
+
+export type Element = (typeof ELEMENT)[keyof typeof ELEMENT];
+export type ElementTextAsIcon = (typeof ELEMENT_TEXT_AS_ICON)[keyof typeof ELEMENT_TEXT_AS_ICON];

package/src/types/FacetRange.ts

@@ -0,0 +1,84 @@
+import type { SelectOption } from '@/types/Select';
+
+export const FACET_COMPONENT_ID_RANGE = {
+  GROSS_WEIGHT: 'grossWeight',
+  LENGTH: 'vehicleLength',
+  MILEAGE: 'mileage',
+  PRICE: 'price',
+  SLEEPING_CAPACITY: 'sleepingCapacity',
+  SLIDEOUTS: 'slideouts',
+  YEAR: 'vehicleYear',
+} as const;
+
+export type FacetComponentIdRange = (typeof FACET_COMPONENT_ID_RANGE)[keyof typeof FACET_COMPONENT_ID_RANGE];
+
+export type RangeData = {
+  min: number | null;
+  max: number | null;
+};
+
+const GROSS_WEIGHT_MIN = 1000;
+const GROSS_WEIGHT_MAX = 12000;
+export const GROSS_WEIGHT_OPTIONS: SelectOption[] = [
+  {
+    label: 'Any',
+    value: null,
+  },
+  ...Array.from({ length: Math.floor((GROSS_WEIGHT_MAX - GROSS_WEIGHT_MIN) / 1000) + 1 }, (_, index) => ({
+    label: (GROSS_WEIGHT_MAX - index * 1000).toString(),
+    value: (GROSS_WEIGHT_MAX - index * 1000).toString(),
+  })),
+];
+
+const SLEEP_CAP_MIN = 1;
+const SLEEP_CAP_MAX = 10;
+export const SLEEPING_CAPACITY_OPTIONS: SelectOption[] = [
+  {
+    label: 'Any',
+    value: null,
+  },
+  ...Array.from({ length: SLEEP_CAP_MAX - SLEEP_CAP_MIN + 1 }, (_, index) => ({
+    label: (SLEEP_CAP_MAX - index).toString(),
+    value: (SLEEP_CAP_MAX - index).toString(),
+  })),
+];
+
+const SLIDEOUT_MIN = 0;
+const SLIDEOUT_MAX = 5;
+export const SLIDEOUT_OPTIONS: SelectOption[] = [
+  {
+    label: 'Any',
+    value: null,
+  },
+  ...Array.from({ length: SLIDEOUT_MAX - SLIDEOUT_MIN + 1 }, (_, index) => ({
+    label: (SLIDEOUT_MAX - index).toString(),
+    value: (SLIDEOUT_MAX - index).toString(),
+  })),
+];
+
+const LENGTH_MIN = 10;
+const LENGTH_MAX = 50;
+export const LENGTH_OPTIONS: SelectOption[] = [
+  {
+    label: 'Any',
+    value: null,
+  },
+  ...Array.from({ length: LENGTH_MAX - LENGTH_MIN + 1 }, (_, index) => ({
+    label: (LENGTH_MAX - index).toString(),
+    value: (LENGTH_MAX - index).toString(),
+  })),
+];
+
+const YEAR_MIN = 1900;
+const today = new Date();
+const YEAR_MAX = today.getFullYear() + 2;
+export const YEAR_OPTIONS: SelectOption[] = [
+  {
+    label: 'Any',
+    value: null,
+  },
+  ...Array.from({ length: YEAR_MAX - YEAR_MIN + 1 }, (_, index) => ({
+    label: (YEAR_MAX - index).toString(),
+    value: (YEAR_MAX - index).toString(),
+  })),
+];

package/src/types/Field.ts

@@ -0,0 +1,54 @@
+import type { FormValueTransformer } from '@/types/Form';
+import type { SelectOption } from '@/types/Select';
+import type { TextInputType } from '@/types/TextInput';
+import type { ValidationError, Validator } from '@/types/Validation';
+
+interface BooleanValue {
+  value?: boolean;
+}
+
+interface CheckboxField extends GenericInput, BooleanValue {
+  indeterminate?: boolean;
+}
+
+interface GenericField extends GenericInput {
+  transformValue?: FormValueTransformer;
+  validators?: Validator[];
+}
+
+interface GenericInput {
+  disabled?: boolean;
+  error: ValidationError;
+  label?: string;
+  name: string;
+  required?: boolean;
+}
+
+interface SelectField extends GenericInput, StringValue {
+  options: SelectOption[];
+}
+
+interface StringValue {
+  value?: string;
+}
+
+interface TextareaField extends GenericField, StringValue {
+  maxlength?: number;
+  minlength?: number;
+  placeholder?: string;
+  value?: string;
+}
+
+interface TextField extends GenericField, StringValue {
+  maxlength?: number;
+  minlength?: number;
+  placeholder?: string;
+  type?: TextInputType;
+  value?: string;
+}
+
+export type BooleanField = CheckboxField;
+export type Field = SelectField | TextField | TextareaField | CheckboxField;
+export type StringField = SelectField | TextField | TextareaField;
+export type { BooleanValue, StringValue };
+export type { CheckboxField, GenericField, GenericInput, SelectField, TextareaField, TextField };

package/src/types/Form.ts

@@ -0,0 +1,58 @@
+import type { SelectOptGroup, SelectOption } from '@/types/Select';
+import type { TextInputType } from '@/types/TextInput';
+import type { ValidationError, Validator } from '@/types/Validation';
+
+interface GenericInput {
+  error?: ValidationError;
+  transformValue?: FormValueTransformer;
+  name: string;
+  validators?: Validator[];
+  required?: boolean;
+  label?: string;
+  disabled?: boolean;
+}
+
+interface StringValue {
+  value?: string;
+}
+
+interface BooleanValue {
+  value?: boolean;
+}
+
+export type SelectInput = GenericInput &
+  StringValue & {
+    options?: SelectOption[] | readonly SelectOption[];
+    placeholder?: string;
+    optgroups?: SelectOptGroup[];
+  };
+
+export type TextInput = GenericInput &
+  StringValue & {
+    autocomplete?: boolean;
+    maxlength?: number;
+    minlength?: number;
+    type?: TextInputType;
+    placeholder?: string;
+    value?: string;
+  };
+
+export type TextareaInput = GenericInput &
+  StringValue & {
+    maxlength?: number;
+    minlength?: number;
+    placeholder?: string;
+    value?: string;
+  };
+
+export type CheckboxInput = GenericInput &
+  BooleanValue & {
+    checked?: boolean;
+    indeterminate?: boolean;
+  };
+
+export type StringInput = SelectInput | TextInput | TextareaInput;
+export type BooleanInput = CheckboxInput;
+export type Input = SelectInput | TextInput | TextareaInput | CheckboxInput;
+
+export type FormValueTransformer = (value: string) => string;

package/src/types/Formatted.ts

@@ -0,0 +1,22 @@
+import { formatNumber, formatPhone, formatPrice } from '@/utilities/format';
+
+export type Formatted = {
+  [key: string]: string | string[] | number;
+};
+
+export const FORMAT = {
+  NUMBER: formatNumber,
+  PHONE: formatPhone,
+  PRICE: formatPrice,
+} as const;
+
+export const FORMAT_REGEX = {
+  alpha: /^[a-zA-Z]+$/g,
+  alphaNumberOrEmpty: /^$|^[a-z0-9]+$/i,
+  alphaSpace: /^[a-zA-Z ]+$/g,
+  email:
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+  numberFormatted: /^$|(?=.)^\$?(([1-9][0-9]{0,2}(,[0-9]{3})*)|0)?(\.[0-9]{1,2})?$/,
+  phone: /^(?:\d{3}-\d{3}-\d{4}|\d{1}-\d{3}-\d{3}-\d{4})?$/,
+  price: /(?=.)^\$?(([1-9][0-9]{0,2}(,[0-9]{3})*)|0)?(\.[0-9]{1,2})?$/,
+};

package/src/types/Icon.ts

@@ -0,0 +1,87 @@
+export const ICON = {
+  ACCOUNT_BALANCE: 'account-balance',
+  ADD: 'add',
+  AI_DESCRIPTION: 'ai-description',
+  ALIGN_SPACE: 'align-space',
+  APPLE_PAY: 'apple-pay',
+  ARROW_BACK: 'arrow-back',
+  ARROW_FORWARD: 'arrow-forward',
+  ARROW_RIGHT: 'arrow-right',
+  ASSIGNMENT: 'assignment',
+  AWARD_STAR: 'award-star',
+  BOOKMARK: 'bookmark',
+  CALENDAR_MONTH: 'calendar-month',
+  CALL: 'call',
+  CHECK: 'check',
+  CHEVRON_LEFT: 'chevron-left',
+  CHEVRON_RIGHT: 'chevron-right',
+  CLEAR: 'clear',
+  CLOSE: 'close',
+  CYCLE: 'cycle',
+  DELETE: 'delete',
+  DIAMOND: 'diamond',
+  DRAFT: 'draft',
+  EDIT: 'edit',
+  ERROR: 'error',
+  EXPAND_CONTENT: 'expand-content',
+  EXPAND_LESS: 'expand-less',
+  EXPAND_MORE: 'expand-more',
+  FACEBOOK: 'facebook',
+  FAVORITE: 'favorite',
+  FAVORITE_FILLED: 'favorite-filled',
+  FORMAT_BOLD: 'format-bold',
+  FORMAT_ITALIC: 'format-italic',
+  FORMAT_LIST_BULLETED: 'format-list-bulleted',
+  FORUM: 'forum',
+  GAVEL: 'gavel',
+  GOOGLE: 'google',
+  GOOGLE_PAY: 'google-pay',
+  GRID: 'grid',
+  HEIGHT: 'height',
+  HELP: 'help',
+  INFO: 'info',
+  INSERT_TEXT: 'insert-text',
+  INSTAGRAM: 'instagram',
+  IOS_SHARE: 'ios-share',
+  LAYOUT: 'layout',
+  LINKED_IN: 'linked in',
+  LOCAL_SHIPPING: 'local-shipping',
+  LOCK: 'lock',
+  MAIL: 'mail',
+  MENU: 'menu',
+  MORE_HORIZ: 'more-horiz',
+  NOTIFICATIONS: 'notifications',
+  OPEN_IN_NEW: 'open-in-new',
+  PALETTE: 'palette',
+  PAYPAL: 'paypal',
+  PERSON: 'person',
+  PHOTO_CAMERA: 'photo-camera',
+  PINTEREST: 'pinterest',
+  PLAY_ARROW: 'play-arrow',
+  REMOVE: 'remove',
+  ROUNDED_CORNERS: 'rounded-corners',
+  RULER: 'ruler',
+  SEARCH: 'search',
+  SEATING: 'seating',
+  SELL: 'sell',
+  SHARE: 'share',
+  SHOPPING_CART: 'shopping-cart',
+  SMS: 'sms',
+  STAR: 'star',
+  SWAP_VERT: 'swap-vert',
+  THREE_D_ROTATION: 'three-d-rotation',
+  TROPHY: 'trophy',
+  TUNE: 'tune',
+  TWITTER: 'twitter',
+  VIDEOCAM: 'videocam',
+  VIEW_IN_AR: 'view-in-ar',
+  VISIBILITY: 'visibility',
+  VOLUME_OFF: 'volume-off',
+  VOLUME_ON: 'volume-on',
+  WARNING: 'warning',
+  WEIGHT: 'weight',
+  WIDTH: 'width',
+  YOUTUBE: 'youtube',
+} as const;
+
+export type Icon = (typeof ICON)[keyof typeof ICON];

package/src/types/Link.ts

@@ -0,0 +1,5 @@
+export type Link = {
+  label: string;
+  url: string;
+  isNewTab?: boolean;
+};

package/src/types/ListingMedia.ts

@@ -0,0 +1,43 @@
+/**
+ * These slides are used in both the inline detail page photo slider
+ * and the fullscreen media gallery.
+ */
+
+export const MEDIA_SLIDE_TYPES = {
+  IMAGE: {
+    FLOORPLAN: 'floorplan',
+    IMAGE: 'image',
+  },
+  VIDEO: 'video',
+  VR: 'vr',
+} as const;
+
+export type MediaSlideType =
+  | (typeof MEDIA_SLIDE_TYPES.IMAGE)[keyof typeof MEDIA_SLIDE_TYPES.IMAGE]
+  | typeof MEDIA_SLIDE_TYPES.VIDEO
+  | typeof MEDIA_SLIDE_TYPES.VR;
+
+export type ImageSlideType = (typeof MEDIA_SLIDE_TYPES.IMAGE)[keyof typeof MEDIA_SLIDE_TYPES.IMAGE];
+
+type ImageSlide = {
+  imageUrl: string;
+  type: ImageSlideType;
+};
+
+export type VideoSlideType = typeof MEDIA_SLIDE_TYPES.VIDEO;
+
+type VideoSlide = {
+  imageUrl: string;
+  type: VideoSlideType;
+  videoUrl: string;
+};
+
+export type VrSlideType = typeof MEDIA_SLIDE_TYPES.VR;
+
+type VrSlide = {
+  imageUrl: string;
+  type: VrSlideType;
+  vrUrl: string;
+};
+
+export type ListingMedia = ImageSlide | VideoSlide | VrSlide;

package/src/types/Orientation.ts

@@ -0,0 +1,6 @@
+export const ORIENTATION = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical',
+} as const;
+
+export type Orientation = (typeof ORIENTATION)[keyof typeof ORIENTATION];

package/src/types/Priority.ts

@@ -0,0 +1,11 @@
+/* eslint-disable vue/sort-keys */
+
+export const PRIORITY = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary',
+  QUATERNARY: 'quaternary',
+  FLOATING: 'floating',
+} as const;
+
+export type Priority = (typeof PRIORITY)[keyof typeof PRIORITY];

package/src/types/Raw.ts

@@ -0,0 +1,5 @@
+export type Raw = {
+  [key: string]: {
+    raw: number | string | string[];
+  };
+};

package/src/types/Realm.ts

@@ -0,0 +1,13 @@
+export const REALM = {
+  AERO: 'aero',
+  ATV: 'atv',
+  BOATMART: 'boatmart',
+  CYCLE: 'cycle',
+  EQUIP: 'equip',
+  PWC: 'pwc',
+  RV: 'rv',
+  SNOW: 'snow',
+  TRUCK: 'truck',
+} as const;
+
+export type Realm = (typeof REALM)[keyof typeof REALM];

package/src/types/RealmConfig.ts

@@ -0,0 +1,14 @@
+import type { Realm } from '@/types/Realm';
+
+export type RealmConfig = {
+  cdn: {
+    domain: string;
+    version: string;
+  };
+  id: Realm;
+  label: {
+    plural: string;
+    singular: string;
+    singularWithArticle: string;
+  };
+};

package/src/types/Select.ts

@@ -0,0 +1,10 @@
+export type SelectOption = {
+  label: string | number;
+  value: any;
+};
+
+export type SelectOptGroup = {
+  label: string;
+  options?: SelectOption[];
+  value?: any;
+};

package/src/types/Size.ts

@@ -0,0 +1,6 @@
+export const SIZE = {
+  LARGE: 'large',
+  SMALL: 'small',
+} as const;
+
+export type Size = (typeof SIZE)[keyof typeof SIZE];