tide-design-system 2.4.5 → 2.4.7

package/src/types/Element.ts

@@ -3,11 +3,11 @@ export const ELEMENT = {
   LINK: 'a',
 } as const;
 
-export const ELEMENT_TEXT_AS_ICON = {
+export const ELEMENT_BROAD = {
   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];
+export type ElementBroad = (typeof ELEMENT_BROAD)[keyof typeof ELEMENT_BROAD];

package/src/types/Formatted.ts

@@ -19,4 +19,5 @@ export const FORMAT_REGEX = {
   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})?$/,
+  zip: /^\d{5}$/,
 };

package/src/types/Storybook.ts

@@ -22,6 +22,10 @@ export const BADGE_TRUSTED = {
   YEARS_5: '5',
   YEARS_10: '10',
   YEARS_15: '15',
+  YEARS_20: '20',
+  YEARS_25: '25',
+  YEARS_30: '30',
+  YEARS_35: '35',
 };
 
 export const BG = {
@@ -115,12 +119,6 @@ export const GAP = {
   '0.25 REM': CSS.GAP.QUARTER,
 };
 
-export const LINK_SIZE = {
-  TWELVE: CSS.FONT.SIZE.TWELVE,
-  FOURTEEN: CSS.FONT.SIZE.FOURTEEN,
-  SIXTEEN: CSS.FONT.SIZE.SIXTEEN,
-};
-
 export const MARGIN = {
   'Full 4 REM': CSS.MARGIN.FULL.FOUR,
   'Full 2 REM': CSS.MARGIN.FULL.TWO,

package/src/types/Type.ts

@@ -0,0 +1,6 @@
+export const BUTTON_TYPE = {
+  BUTTON: 'button',
+  SUBMIT: 'submit',
+} as const;
+
+export type ButtonType = (typeof BUTTON_TYPE)[keyof typeof BUTTON_TYPE];

package/src/types/Validation.ts

@@ -7,6 +7,7 @@ export const VALIDATOR = {
   EMAIL: checkFormat(FORMAT_REGEX.email, 'Enter a valid email address (e.g. name@example.com)'),
   NUMBER: checkFormat(FORMAT_REGEX.numberFormatted, 'Enter a valid number'),
   PHONE: checkFormat(FORMAT_REGEX.phone, 'Enter a valid phone number'),
+  ZIP: checkFormat(FORMAT_REGEX.zip, 'Enter a valid Zip code'),
 } as const;
 
 export type ValidationError = string | boolean;

package/src/utilities/storybook.ts

@@ -1,4 +1,4 @@
-import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
+import { ELEMENT, ELEMENT_BROAD } from '@/types/Element';
 import { BOOLEAN, BOOLEAN_UNREQUIRED, NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
 import { CSS } from '@/types/Styles';
 import { formatKebabCase } from '@/utilities/format';
@@ -61,6 +61,7 @@ export const change = {
   isEmit: true,
   name: 'change',
   table: {
+    category: 'Events',
     defaultValue: { summary: 'None' },
     type: { summary: '() => void' },
   },
@@ -71,6 +72,7 @@ export const click = {
   description: 'JS code or function to execute on click event',
   isEmit: true,
   table: {
+    category: 'Events',
     defaultValue: { summary: 'None' },
     type: { summary: '() => void' },
   },
@@ -81,6 +83,7 @@ export const close = {
   description: 'JS code or function to execute on close event',
   isEmit: true,
   table: {
+    category: 'Events',
     defaultValue: { summary: 'None' },
     type: { summary: '() => void' },
   },
@@ -90,6 +93,7 @@ export const dataTrack = {
   control: 'text',
   description: 'Data attribute for external tracking',
   table: {
+    category: 'Native',
     defaultValue: { summary: 'None' },
     type: { summary: 'string' },
   },
@@ -252,7 +256,7 @@ export const formatSnippet = (code: string, context: StoryContext) => {
     if (
       isClick &&
       value &&
-      (!args.element || args.element === ELEMENT.BUTTON || args.element === ELEMENT_TEXT_AS_ICON.BUTTON)
+      (!args.element || args.element === ELEMENT.BUTTON || args.element === ELEMENT_BROAD.BUTTON)
     ) {
       return `@click="${value}"`;
     }

package/src/utilities/validation.ts

@@ -70,7 +70,7 @@ export const getFieldValidationResult = ({
   }
 
   // all other prop-based errors come last
-  if (required && value.value.trim() === '') {
+  if (required && value.value?.trim() === '') {
     return VALIDATION_RESULT.REQUIRED;
   }
 

package/tests/InternalBaseLink.spec.ts

@@ -0,0 +1,61 @@
+/// <reference types="vitest/globals" />
+
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, h, markRaw } from 'vue';
+
+import InternalBaseLink from '@/components/InternalBaseLink.vue';
+import { provideTideConfig } from '@/composables/useTideConfig';
+
+// @vitest-environment jsdom
+
+/* eslint-disable vue/one-component-per-file */
+const TestWrapper = defineComponent({
+  props: {
+    config: { type: Object, default: () => ({}) },
+  },
+  setup(props, { slots }) {
+    provideTideConfig(props.config);
+    return () => h(InternalBaseLink, null, slots);
+  },
+});
+/* eslint-enable vue/one-component-per-file */
+
+describe('InternalBaseLink', () => {
+  it('renders default <a> when no provider is used', () => {
+    const wrapper = mount(InternalBaseLink, {
+      slots: { default: 'Hello' },
+    });
+
+    expect(wrapper.element.tagName.toLowerCase()).toBe('a');
+    expect(wrapper.text()).toBe('Hello');
+  });
+
+  it('renders a provided custom link component', () => {
+    const CustomLink = markRaw(
+      /* eslint-disable vue/one-component-per-file */
+      defineComponent({
+        name: 'CustomLink',
+        render() {
+          return h('custom-link', {}, this.$slots.default?.());
+        },
+      })
+      /* eslint-enable vue/one-component-per-file */
+    );
+
+    const wrapper = mount(TestWrapper, {
+      props: {
+        config: {
+          linkComponent: CustomLink,
+        },
+      },
+      slots: {
+        default: 'Custom Content',
+      },
+    });
+
+    const btn = wrapper.find('custom-link');
+    expect(btn.exists()).toBe(true);
+    expect(btn.text()).toBe('Custom Content');
+  });
+});