tide-design-system 2.5.0 → 2.5.3

package/src/components/TideLink.vue

@@ -4,16 +4,19 @@
   import InternalBaseLink from '@/components/InternalBaseLink.vue';
   import TideIcon from '@/components/TideIcon.vue';
   import { ELEMENT } from '@/types/Element';
+  import { SIZE } from '@/types/Size';
   import { CSS } from '@/types/Styles';
   import { TARGET } from '@/types/Target';
 
   import type { Element } from '@/types/Element';
   import type { Icon } from '@/types/Icon';
+  import type { Size } from '@/types/Size';
 
   type Props = {
     element?: Element;
     href?: string;
     iconLeading?: Icon;
+    iconSize?: Size;
     iconTrailing?: Icon;
     isNewTab?: boolean;
     label: string;
@@ -24,6 +27,7 @@
     element: ELEMENT.LINK,
     href: undefined,
     iconLeading: undefined,
+    iconSize: SIZE.SMALL,
     iconTrailing: undefined,
     isNewTab: false,
     label: undefined,
@@ -49,6 +53,7 @@
     <TideIcon
       :class="[CSS.DISPLAY.INLINE_BLOCK, CSS.ALIGN.Y.MIDDLE, CSS.MARGIN.RIGHT.QUARTER]"
       :icon="props.iconLeading"
+      :size="iconSize"
       v-if="props.iconLeading"
     />
 
@@ -59,6 +64,7 @@
     <TideIcon
       :class="[CSS.DISPLAY.INLINE_BLOCK, CSS.ALIGN.Y.MIDDLE, CSS.MARGIN.LEFT.QUARTER]"
       :icon="props.iconTrailing"
+      :size="iconSize"
       v-if="props.iconTrailing"
     />
   </component>

package/src/components/TideMenuItem.vue

@@ -50,7 +50,7 @@
       CSS.BORDER.RADIUS.ZERO,
       CSS.DISPLAY.FLEX,
       CSS.ELLIPSIS,
-      CSS.FONT.ROLE.LABEL_2,
+      CSS.FONT.ROLE.LABEL_1,
       CSS.GAP.QUARTER,
       CSS.PADDING.X.ONE,
       CSS.PADDING.Y.HALF,

package/src/components/TideModal.vue

@@ -236,7 +236,7 @@
     padding-inline: var(--modal-padding-x);
   }
   .tide-modal-content {
-    grid-template-columns: var(--modal-padding-x) 1fr var(--modal-padding-x);
+    grid-template-columns: var(--modal-padding-x) var(--tide-safe-fr) var(--modal-padding-x);
   }
   :where(.tide-modal-content):deep(> :where(*)) {
     grid-column: 2;

package/src/components/TideRating.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+  import { computed } from 'vue';
+
+  import { CSS } from '@/types/Styles';
+
+  type Props = {
+    description?: string;
+    maxRating?: number;
+    showRating?: boolean;
+    title?: string;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    description: undefined,
+    maxRating: 10,
+    showRating: false,
+    title: undefined,
+  });
+
+  const ratingValue = defineModel<number>({ required: true });
+
+  const segments = computed(() => Array.from({ length: props.maxRating }, (_, index) => index + 1));
+
+  const handleClick = (segment: number) => {
+    ratingValue.value = segment;
+  };
+</script>
+
+<template>
+  <div :class="['tide-rating', CSS.WIDTH.FULL]">
+    <section :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.AXIS1.BETWEEN, CSS.PADDING.BOTTOM.HALF]">
+      <div :class="[CSS.FONT.ROLE.LABEL_2]">
+        {{ props.title }}
+      </div>
+      <div
+        :class="[CSS.FONT.ROLE.LABEL_3, CSS.FONT.COLOR.SURFACE.VARIANT]"
+        v-if="props.showRating"
+      >
+        {{ ratingValue }}/{{ props.maxRating }}
+      </div>
+    </section>
+    <section
+      :class="[CSS.FONT.ROLE.BODY_2, CSS.PADDING.BOTTOM.ONE, CSS.OVERFLOW.XY.HIDDEN, CSS.ELLIPSIS]"
+      v-if="props.description"
+    >
+      {{ props.description }}
+    </section>
+
+    <section :class="['tide-rating-bar', CSS.DISPLAY.FLEX, CSS.GAP.QUARTER, CSS.FLEX.GROW.ON, CSS.FLEX.SHRINK.ON]">
+      <button
+        :class="[
+          'tide-rating-segment',
+          CSS.BG.SURFACE.VARIANT,
+          CSS.POSITION.RELATIVE,
+          CSS.OVERFLOW.XY.HIDDEN,
+          CSS.FLEX.GROW.ON,
+          CSS.FLEX.SHRINK.ON,
+          CSS.FLEX.BASIS.ZERO,
+          CSS.BORDER.FULL.ZERO,
+          segment === 1 && ['tide-rating-segment-first'],
+          segment === segments.length && ['tide-rating-segment-last'],
+          segment <= ratingValue && [CSS.BG.SURFACE.GRADIENT],
+        ]"
+        :key="segment"
+        @click="handleClick(segment)"
+        type="button"
+        v-for="segment in segments"
+      />
+    </section>
+  </div>
+</template>
+
+<style scoped>
+  .tide-rating-bar {
+    height: 28px;
+  }
+
+  .tide-rating-segment {
+    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
+  }
+
+  .tide-rating-segment-first {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
+  }
+
+  .tide-rating-segment-last {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
+  }
+</style>

package/src/components/TideSheet.vue

@@ -170,7 +170,7 @@
   }
 
   .tide-sheet-content {
-    grid-template-columns: var(--sheet-padding-x) 1fr var(--sheet-padding-x);
+    grid-template-columns: var(--sheet-padding-x) var(--tide-safe-fr) var(--sheet-padding-x);
   }
 
   :where(.tide-sheet-content):deep(> :where(*)) {

package/src/components/TideTabs.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+  import TideCarousel from '@/components/TideCarousel.vue';
+  import TideLink from '@/components/TideLink.vue';
+  import { ELEMENT } from '@/types/Element';
+  import { CSS } from '@/types/Styles';
+
+  import type { Tab } from '@/types/Tab';
+
+  type Props = {
+    tabs: Tab[];
+  };
+
+  defineProps<Props>();
+
+  const currentTab = defineModel<number>({ required: true });
+
+  const handleClick = (index: number) => {
+    currentTab.value = index;
+  };
+</script>
+
+<template>
+  <div :class="['tide-tabs', CSS.DISPLAY.FLEX, CSS.BORDER.BOTTOM.TWO, CSS.BORDER.COLOR.LOW]">
+    <TideCarousel :is-floating="true">
+      <li
+        :key="tab.label"
+        v-for="(tab, index) in tabs"
+      >
+        <TideLink
+          :class="[
+            index === currentTab ? CSS.FONT.COLOR.SURFACE.BRAND : CSS.FONT.COLOR.SURFACE.VARIANT,
+            CSS.PADDING.BOTTOM.ONE,
+            CSS.FONT.ROLE.LABEL_1,
+            CSS.WHITESPACE_WRAP.OFF,
+          ]"
+          :element="ELEMENT.BUTTON"
+          :label="tab.label"
+          :subtle="true"
+          @click="handleClick(index)"
+        />
+        <div :class="['rounded-border', index === currentTab && 'active']" />
+      </li>
+    </TideCarousel>
+  </div>
+</template>
+
+<style scoped>
+  .rounded-border {
+    border-radius: var(--tide-radius-full) var(--tide-radius-full) 0 0;
+    border-top-width: 4px;
+    border-top-style: solid;
+    border-color: transparent;
+  }
+
+  .active {
+    border-color: var(--tide-on-surface-brand);
+  }
+</style>

package/src/stories/TideCarousel.stories.ts

@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { computed } from 'vue';
 
 import TideCard from '@/components/TideCard.vue';
 import TideCarousel from '@/components/TideCarousel.vue';
@@ -8,6 +9,8 @@ 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) => {
@@ -19,7 +22,6 @@ const formatSnippet = (code: string, context: StoryContext) => {
   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.isTouchscreen !== undefined) argsWithValues.push(`:is-touchscreen="${args.isTouchscreen}"`);
   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}"`);
@@ -31,7 +33,7 @@ const formatSnippet = (code: string, context: StoryContext) => {
     // prettier-ignore
     `<TideCarousel ${argsWithValues.join(' ')}>` + lineBreak +
       slotContentMisc + tab +
-      `<li class="tide-shrink-none" v-for="(_child, index) in new Array(12)">` + lineBreak + tab + 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>`
@@ -66,19 +68,31 @@ const render = (args: Args) => ({
       }
     },
   },
-  setup: () => ({ args }),
+  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="args"
+    v-bind="argsFormatted"
+    :key="argsFormatted.isFullWidthCards"
   >
-    <template #misc>{{ args.misc }}</template>
+    <template #misc>{{ argsFormatted.misc }}</template>
     <li
-      class="tide-shrink-none tide-border-1 sb-border-blue tide-padding-1 sb-bg-blue-light"
+      :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)"
     >
-      {{ args.default.replace('#', index) }}
+      {{ argsFormatted.default.replace('#', index) }}
     </li>
   </TideCarousel>`,
 });
@@ -106,7 +120,7 @@ export default {
     },
     hasDots: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether to display the indicator dots overlay',
+      description: 'Determines whether to display the indicator dots overlay<br />(Only valid with full width cards)',
       table: {
         defaultValue: { summary: 'False' },
       },
@@ -118,6 +132,16 @@ export default {
         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,
       description: 'Determines font role used for title display',
@@ -133,23 +157,11 @@ export default {
         defaultValue: { summary: 'True' },
       },
     },
-    isScrollByPage: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines pagination method',
-      table: {
-        defaultValue: { summary: 'None' },
-      },
-    },
-    isTouchscreen: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines button and/or swipe control scheme',
-      table: {
-        defaultValue: { summary: 'None' },
-      },
-    },
+    isScrollByPage: disabledArgType,
     maxDots: {
       control: 'text',
       description: 'Determines the max number of indicator dots to display at a given time',
+      if: { arg: 'hasDots', eq: true },
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'number' },
@@ -186,9 +198,8 @@ export default {
     handleSlidesAddedToView: 'doSomething',
     hasDots: undefined,
     isFloating: undefined,
+    isFullWidthCards: undefined,
     isHideawayButtons: undefined,
-    isScrollByPage: undefined,
-    isTouchscreen: undefined,
     maxDots: '',
     misc: '',
     subtitle: '',
@@ -201,4 +212,15 @@ export default {
   title: 'Components/TideCarousel',
 };
 
-export const Demo = {};
+export const Demo = {
+  name: 'Default',
+};
+
+export const FullWidth = {
+  args: {
+    default: 'Full-width card #',
+    isFullWidthCards: true,
+    title: 'Demo',
+  },
+  name: 'Full-width cards ',
+};

package/src/stories/TideRating.stories.ts

@@ -0,0 +1,120 @@
+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',
+      description: 'Determines the text displayed below the title',
+      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',
+      description: 'Maximum rating value / Number of segments',
+      table: {
+        defaultValue: { summary: 10 },
+        type: { summary: 'number' },
+      },
+    },
+    showRating: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether to display the current rating value',
+    },
+    title: {
+      control: 'text',
+      description: 'Determines the title text displayed above the rating component',
+      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/TideTabs.stories.ts

@@ -0,0 +1,115 @@
+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',
+      description: 'Sets labels and callback for each tab',
+      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 = {};

package/src/types/Formatted.ts

@@ -15,7 +15,7 @@ export const FORMAT_REGEX = {
   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,}))$/,
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@(?!(?:[a-zA-Z0-9-]+\.)*(?<tld>[a-zA-Z]{2,})\.\k<tld>$)((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z0-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/utilities/validation.ts

@@ -62,7 +62,7 @@ export const getFieldValidationResult = ({
 
   // custom validator prop errors from have second highest precedence
   if (validators) {
-    const validation = validateProperty(value.value, validators);
+    const validation = validateProperty(value.value ?? '', validators);
 
     if (!validation.valid) {
       return validation;

package/tests/utilities-format.spec.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
+import { FORMAT_REGEX } from '../src/types/Formatted';
 import {
   formatCamelCase,
   formatKebabCase,
@@ -428,3 +429,42 @@ describe('@/src/utilities/format.ts', () => {
     });
   });
 });
+
+describe('@/src/types/Formatted.ts', () => {
+  describe('FORMAT_REGEX.email', () => {
+    it('accepts a standard email address.', () => {
+      const input = 'john.doe@gmail.com';
+      const output = true;
+
+      expect(FORMAT_REGEX.email.test(input)).toEqual(output);
+    });
+
+    it('accepts an email address with subdomains.', () => {
+      const input = 'john.doe@mail.sub.example.co.uk';
+      const output = true;
+
+      expect(FORMAT_REGEX.email.test(input)).toEqual(output);
+    });
+
+    it('rejects an email address that ends with a repeated TLD label (e.g. .com.com).', () => {
+      const input = 'john@gmail.com.com';
+      const output = false;
+
+      expect(FORMAT_REGEX.email.test(input)).toEqual(output);
+    });
+
+    it('rejects an email address that ends with a repeated TLD label (e.g. .net.net).', () => {
+      const input = 'john@company.net.net';
+      const output = false;
+
+      expect(FORMAT_REGEX.email.test(input)).toEqual(output);
+    });
+
+    it('rejects an email address missing a valid top-level domain.', () => {
+      const input = 'john@gmail';
+      const output = false;
+
+      expect(FORMAT_REGEX.email.test(input)).toEqual(output);
+    });
+  });
+});