tide-design-system 2.5.8 → 2.5.9

package/src/components/TideInputRadio.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders an input radio component.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputradio--docs) for TideInputRadio
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { computed } from 'vue';
 
@@ -5,11 +14,22 @@
   import { formatNumber } from '@/utilities/format';
 
   type Props = {
+    /** Determines whether input is interactable */
     disabled?: boolean;
+
+    /** Unique ID attribute (to bind input label to input) */
     inputId?: string;
+
+    /** Label content */
     label: string;
+
+    /** Name attribute */
     name: string;
+
+    /** Parenthetical response count */
     number?: number;
+
+    /** Value attribute */
     value: string;
   };
 

package/src/components/TideInputSelect.vue

@@ -96,7 +96,7 @@
   });
   const hasErrorFromProp = computed(() => props.error !== '');
   const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
-  const isEmpty = computed(() => modelValue.value === '');
+  const isEmpty = computed(() => modelValue.value == null || modelValue.value === '');
   const supportingTextMessage = computed(() => (showError.value && errorRef.value.message) || props.supportingText);
 
   const expandOptions = () => {
@@ -193,11 +193,11 @@
             :class="[
               CSS.PADDING.BOTTOM.HALF,
               CSS.PADDING.TOP.ONE,
-              CSS.PADDING.LEFT.ONE,
               CSS.PADDING.RIGHT.TWO,
               CSS.WIDTH.FULL,
               CSS.FONT.ROLE.BODY_1,
               disabled && CSS.CURSOR.NOT_ALLOWED,
+              prefix ? CSS.PADDING.LEFT.ZERO : CSS.PADDING.LEFT.ONE,
             ]"
             :disabled="disabled"
             :name="name"

package/src/components/TideInputSupportingText.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders an input supporting text component.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputsupportingtext--docs) for TideInputSupportingText
+   */
+  export default {};
+</script>
+
 <script setup lang="ts">
   import TideIcon from '@/components/TideIcon.vue';
   import { ICON } from '@/types/Icon';

package/src/components/TideInputText.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a text input intended to be used in forms.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputtext--docs) for TideInputText
+   */
+  export default {};
+</script>
+
 <script setup lang="ts">
   import { computed, ref, watch, watchEffect } from 'vue';
 
@@ -18,24 +27,61 @@
   import type { ErrorDisplay, ValidationResult, Validator } from '@/types/Validation';
 
   type Props = {
+    /** Determines whether browser attempts to autocomplete */
     autocomplete?: boolean;
+
+    /** Determines whether input is interactable */
     disabled?: boolean;
+
+    /** Overrides the default error message and valid state */
     error?: string;
+
+    /** Determines whether errors display prior to blur */
     errorDisplay?: ErrorDisplay;
+
+    /** Determines whether a clear/reset button is shown for the input */
     hasClear?: boolean;
+
+    /** Icon at left of input value */
     iconLeading?: Icon;
+
+    /** Unique ID attribute (to bind input label to input) */
     inputId?: string;
+
+    /** Determines the input editing features offered by the browser */
     inputmode?: InputMode;
+
+    /** Label content */
     label?: string;
+
+    /** Applies a maximum character count to the input */
     maxlength?: number;
+
+    /** Applies a minimum character count to the input */
     minlength?: number;
+
+    /** Name attribute */
     name?: string;
+
+    /** Input prefix */
     prefix?: string;
+
+    /** Determines whether input is required */
     required?: boolean;
+
+    /** Input suffix (i.e. units) */
     suffix?: string;
+
+    /** Explainer text beneath input */
     supportingText?: string;
+
+    /** Determines text formatting applied to input value upon invoking relevant listener event(s) */
     transformValue?: FormValueTransformer;
+
+    /** Determines the type(s) of values expected by the input */
     type?: TextInputType;
+
+    /** Determines method(s) used to check for valid input value upon invoking relevant listener event(s) */
     validators?: Validator[];
   };
 
@@ -88,7 +134,7 @@
   const inputType = computed(() =>
     props.type === TEXT_INPUT_TYPE.PASSWORD && showPassword.value === true ? TEXT_INPUT_TYPE.TEXT : props.type
   );
-  const isEmpty = computed(() => modelValue.value === '');
+  const isEmpty = computed(() => modelValue.value == null || modelValue.value === '');
   const shouldShowClearButton = computed(
     () => props.hasClear && modelValue.value && props.type !== TEXT_INPUT_TYPE.PASSWORD
   );

package/src/components/TideInputTextarea.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a textarea input intended to be used in forms.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputtextarea--docs) for TideInputTextarea
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { computed, ref, watch, watchEffect } from 'vue';
 
@@ -10,16 +19,37 @@
   import type { ErrorDisplay, ValidationResult, Validator } from '@/types/Validation';
 
   type Props = {
+    /** Overrides the default error message and valid state */
     error?: string;
+
+    /** Determines whether errors display prior to blur */
     errorDisplay?: ErrorDisplay;
+
+    /** Unique ID attribute (to bind input label to input) */
     inputId?: string;
+
+    /** Label content */
     label?: string;
+
+    /** Applies a maximum character count to the input */
     maxlength?: number | undefined;
+
+    /** Applies a minimum character count to the input */
     minlength?: number | undefined;
+
+    /** Name attribute */
     name?: string;
+
+    /** Determines whether input is required */
     required?: boolean;
+
+    /** Determines the height of the input */
     rows?: number;
+
+    /** Explainer text beneath input */
     supportingText?: string;
+
+    /** Determines method(s) used to check for valid input value upon invoking relevant listener event(s) */
     validators?: Validator[];
   };
 

package/src/components/TideLink.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a link element.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidelink--docs) for TideLink
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { computed } from 'vue';
 
@@ -13,13 +22,28 @@
   import type { Size } from '@/types/Size';
 
   type Props = {
+    /** HTML tag type */
     element?: Element;
+
+    /** URL to open (Link only) */
     href?: string;
+
+    /** Icon to left of label */
     iconLeading?: Icon;
+
+    /** Size of the icons */
     iconSize?: Size;
+
+    /** Icon to right of label */
     iconTrailing?: Icon;
+
+    /** Determines whether to target a new browser tab (Link only) */
     isNewTab?: boolean;
+
+    /** Link text */
     label: string;
+
+    /** Hides the underline until hovered, de-emphasizing the link */
     subtle?: boolean;
   };
 

package/src/components/TideModal.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a modal intended to be used for displaying additional information or options.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidemodal--docs) for TideModal
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 

package/src/components/TidePopover.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a popover intended to be used for displaying additional information.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidepopover--docs) for TidePopover
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { autoPlacement, autoUpdate, offset as offsetMiddleware, shift, useFloating } from '@floating-ui/vue';
   import { computed, onBeforeMount, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue';
@@ -9,7 +18,10 @@
   import type { Ref } from 'vue';
 
   type Props = {
+    /** Determines the HTML node over which the Popover will appear */
     anchorId: string;
+
+    /** Determines spacing between Popover and anchor node */
     offset?: number;
   };
 

package/src/components/TideRating.vue

@@ -1,12 +1,28 @@
+<script lang="ts">
+  /**
+   * Renders a rating component intended to be used for displaying and selecting a rating.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tiderating--docs) for TideRating
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { computed } from 'vue';
 
   import { CSS } from '@/types/Styles';
 
   type Props = {
+    /** Determines the text displayed below the title */
     description?: string;
+
+    /** Maximum rating value / Number of segments */
     maxRating?: number;
+
+    /** Determines whether to display the current rating value */
     showRating?: boolean;
+
+    /** Determines the title text displayed above the rating component */
     title?: string;
   };
 

package/src/components/TideRealmLogo.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a realm logo component intended to be used for displaying a realm's logo.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tiderealmlogo--docs) for TideRealmLogo
+   */
+  export default {};
+</script>
+
 <script setup lang="ts">
   import { computed, defineAsyncComponent, markRaw, ref, watch } from 'vue';
 

package/src/components/TideSheet.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a sheet component intended to be used for displaying content in a modal-like menu overlay on the right side of the screen.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidesheet--docs) for TideSheet
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import { onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 

package/src/components/TideSwitch.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a switch component intended to be used for toggling a boolean value.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideswitch--docs) for TideSwitch
+   */
+  export default {};
+</script>
+
 <script lang="ts" setup>
   import TideIcon from '@/components/TideIcon.vue';
   import { ICON } from '@/types/Icon';
@@ -5,6 +14,7 @@
   import { CSS } from '@/types/Styles';
 
   type Props = {
+    /** Determines clickability */
     disabled?: boolean;
   };
 

package/src/components/TideTabs.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a tabs component intended to be used for navigation.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidetabs--docs) for TideTabs
+   */
+  export default {};
+</script>
+
 <script setup lang="ts">
   import TideCarousel from '@/components/TideCarousel.vue';
   import TideLink from '@/components/TideLink.vue';
@@ -7,6 +16,7 @@
   import type { Tab } from '@/types/Tab';
 
   type Props = {
+    /** Sets labels and callback for each tab */
     tabs: Tab[];
   };
 

package/src/components/TideToaster.vue

@@ -1,3 +1,12 @@
+<script lang="ts">
+  /**
+   * Renders a toaster component intended to be used for displaying notifications.
+   *
+   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidetoaster--docs) for TideToaster
+   */
+  export default {};
+</script>
+
 <script setup lang="ts">
   import { onBeforeMount } from 'vue';
 

package/src/stories/TideAccordionItem.stories.ts

@@ -50,18 +50,10 @@ export default {
         type: { summary: 'HTML' },
       },
     },
-    disabled: {
-      ...argTypeBooleanUnrequired,
-    },
-    hasBottomDivider: {
-      ...argTypeBooleanUnrequired,
-    },
-    hasTopDivider: {
-      ...argTypeBooleanUnrequired,
-    },
-    isOptional: {
-      ...argTypeBooleanUnrequired,
-    },
+    disabled: argTypeBooleanUnrequired,
+    hasBottomDivider: argTypeBooleanUnrequired,
+    hasTopDivider: argTypeBooleanUnrequired,
+    isOptional: argTypeBooleanUnrequired,
     label: {
       control: 'text',
       table: {

package/src/stories/TideAlert.stories.ts

@@ -60,7 +60,6 @@ export default {
     close: disabledArgType,
     ctaLabel: {
       control: 'text',
-      description: 'Call To Action that renders as a TideLink; clicking emits a separate `click` event',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -99,23 +98,15 @@ export default {
     },
     heading: {
       control: 'text',
-      description: 'Heading text',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'HTML' },
       },
     },
-    isDismissible: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines whether the Alert can be closed by the user',
-    },
-    isToast: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines whether the Alert is an overlay or displaces content',
-    },
+    isDismissible: argTypeBooleanUnrequired,
+    isToast: argTypeBooleanUnrequired,
     type: {
       ...formatArgType({ ALERT }),
-      description: 'Alert type',
       table: {
         defaultValue: { summary: 'ALERT' },
       },

package/src/stories/TideBadge.stories.ts

@@ -46,7 +46,6 @@ export default {
   argTypes: {
     color: {
       ...formatArgType({ BADGE_COLOR }),
-      description: 'Determines which color option to adopt (if any)',
       table: {
         category: 'Props',
         defaultValue: { summary: 'None' },
@@ -54,7 +53,6 @@ export default {
     },
     iconLeading: {
       ...formatArgType({ ICON }),
-      description: 'Icon to left of label',
       table: {
         category: 'Props',
         defaultValue: { summary: 'None' },
@@ -62,7 +60,6 @@ export default {
     },
     isFloating: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether to display the "Floating" variant styles',
       table: {
         category: 'Props',
         defaultValue: { summary: 'None' },
@@ -70,7 +67,6 @@ export default {
     },
     label: {
       control: 'text',
-      description: 'Badge text',
       table: {
         category: 'Props',
         defaultValue: { summary: 'None' },

package/src/stories/TideBadgeTrustedPartner.stories.ts

@@ -16,7 +16,6 @@ export default {
   argTypes: {
     years: {
       ...formatArgType({ BADGE_TRUSTED }),
-      description: 'Badge text',
       table: {
         defaultValue: { summary: BADGE_TRUSTED.YEARS_5 },
       },

package/src/stories/TideBreadCrumbs.stories.ts

@@ -23,7 +23,6 @@ export default {
   argTypes: {
     breadCrumbs: {
       control: 'object',
-      description: 'Determines label and optional URL for each bread crumb',
       isCustom: true,
       table: {
         defaultValue: { summary: '[]' },

package/src/stories/TideButtonPagination.stories.ts

@@ -49,7 +49,6 @@ export default {
     dataTrack,
     disabled: {
       ...argTypeBooleanUnrequired,
-      description: 'Indicates whether Pagination Button is associated with the displayed page',
       if: {
         arg: 'element',
         eq: ELEMENT_BROAD.BUTTON,
@@ -57,13 +56,11 @@ export default {
     },
     element: {
       ...formatArgType({ ELEMENT_BROAD }),
-      description: 'HTML tag type',
       table: {
         defaultValue: { summary: 'BUTTON' },
       },
     },
     href: {
-      description: 'URL to open<br />(Link only)',
       if: { arg: 'element', eq: ELEMENT_BROAD.LINK },
       table: {
         defaultValue: { summary: 'None' },
@@ -77,7 +74,6 @@ export default {
     },
     label: {
       control: 'text',
-      description: 'Button text',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },

package/src/stories/TideButtonSegmented.stories.ts

@@ -78,7 +78,6 @@ export default {
     },
     tabs: {
       control: 'object',
-      description: 'Sets label and callback for each tab',
       isCustom: true,
       table: {
         defaultValue: { summary: 'None' },

package/src/stories/TideCard.stories.ts

@@ -48,7 +48,6 @@ export default {
     },
     description: {
       control: 'text',
-      description: 'Optional description text displayed below the heading.',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -56,7 +55,13 @@ export default {
     },
     heading: {
       control: 'text',
-      description: 'The main heading of the card.',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    href: {
+      control: 'text',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -64,19 +69,14 @@ export default {
     },
     icon: {
       ...formatArgType({ CARD_ICON }),
-      description: 'Optional icon displayed on the card.',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'Icon' },
       },
     },
-    selected: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines whether the Card is selected (for selectable cards).',
-    },
+    selected: argTypeBooleanUnrequired,
     type: {
       ...formatArgType({ TYPE_CARD }),
-      description: 'Type of the card.',
       table: {
         defaultValue: { summary: 'INFORMATIONAL' },
         type: { summary: 'CardType' },
@@ -87,6 +87,7 @@ export default {
     click: 'doSomething',
     description: '',
     heading: 'Demo',
+    href: '',
     icon: CARD_ICON.None,
     selected: undefined,
     type: TYPE_CARD.None,

package/src/stories/TideCarousel.stories.ts

@@ -120,14 +120,12 @@ export default {
     },
     hasDots: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether to display the indicator dots overlay<br />(Only valid with full width cards)',
       table: {
         defaultValue: { summary: 'False' },
       },
     },
     isFloating: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether to display on-page or floating carousel',
       table: {
         defaultValue: { summary: 'False' },
       },
@@ -144,14 +142,12 @@ export default {
     },
     isHeadline1: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines font role used for title display',
       table: {
         defaultValue: { summary: 'False' },
       },
     },
     isHideawayButtons: {
       ...argTypeBooleanUnrequired,
-      description: 'Determines whether on-page buttons should be hidden until hover',
       if: { arg: 'isFloating', eq: true },
       table: {
         defaultValue: { summary: 'True' },
@@ -160,7 +156,6 @@ export default {
     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' },
@@ -178,7 +173,6 @@ export default {
     slidesAddedToView: disabledArgType,
     subtitle: {
       control: 'text',
-      description: 'Determines the text displayed to the right of the title',
       if: { arg: 'isFloating', neq: true },
       table: {
         defaultValue: { summary: 'None' },
@@ -186,7 +180,6 @@ export default {
     },
     title: {
       control: 'text',
-      description: 'Determines the title text displayed above the carousel',
       if: { arg: 'isFloating', neq: true },
       table: {
         defaultValue: { summary: 'None' },

package/src/stories/TideChipAction.stories.ts

@@ -37,7 +37,7 @@ export default {
     },
     href: {
       control: 'text',
-      if: { arg: 'element', eq: ELEMENT.LINK },
+      if: { arg: 'element', neq: ELEMENT.BUTTON },
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -52,7 +52,7 @@ export default {
     },
     isNewTab: {
       ...argTypeBooleanUnrequired,
-      if: { arg: 'element', eq: ELEMENT.LINK },
+      if: { arg: 'element', neq: ELEMENT.BUTTON },
     },
     label: {
       control: 'text',

package/src/stories/TideChipFilter.stories.ts

@@ -53,7 +53,6 @@ export default {
     },
     label: {
       control: 'text',
-      description: 'Chip text',
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },