tide-design-system 2.5.13 → 2.5.14

package/src/components/TideAlert.vue

@@ -1,186 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders an alert component with customizable content and behavior.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidealert--docs) for TideAlert
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { Comment, computed, useSlots } from 'vue';
-
-  import TideButtonIcon from '@/components/TideButtonIcon.vue';
-  import TideIcon from '@/components/TideIcon.vue';
-  import TideLink from '@/components/TideLink.vue';
-  import { ALERT } from '@/types/Alert';
-  import { ELEMENT } from '@/types/Element';
-  import { ICON } from '@/types/Icon';
-  import { PRIORITY } from '@/types/Priority';
-  import { SIZE } from '@/types/Size';
-  import { CSS } from '@/types/Styles';
-
-  import type { Alert } from '@/types/Alert';
-
-  type Props = {
-    /** Call To Action that renders as a TideLink; clicking emits a separate `click` event */
-    ctaLabel?: string;
-
-    /** Heading text */
-    heading?: string;
-
-    /** Determines whether the Alert can be closed by the user */
-    isDismissible?: boolean;
-
-    /** Determines whether the Alert is an overlay or displaces content */
-    isToast?: boolean;
-
-    /** Alert type */
-    type?: Alert;
-  };
-
-  type Emits = {
-    (event: 'close'): void;
-    (event: 'ctaClick'): void;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    ctaLabel: undefined,
-    heading: undefined,
-    isDismissible: true,
-    isToast: false,
-    type: ALERT.INFO,
-  });
-
-  const emit = defineEmits<Emits>();
-  const slots = useSlots();
-  const hasBody = computed(() => {
-    const nodes = slots.default?.();
-    if (!nodes) return false;
-
-    return nodes.some(
-      (node) => node.type !== Comment && (typeof node.children !== 'string' || node.children.trim().length > 0)
-    );
-  });
-
-  const iconType = computed(() => {
-    if (props.type === ALERT.ERROR) return ICON.PRIORITY_HIGH;
-    if (props.type === ALERT.SUCCESS) return ICON.CHECK;
-    if (props.type === ALERT.WARNING) return ICON.WARNING;
-    return ICON.INFORMATION;
-  });
-</script>
-
-<template>
-  <div
-    :class="[
-      props.type,
-      'tide-alert',
-      CSS.AXIS2.CENTER,
-      CSS.BORDER.RADIUS.HALF,
-      CSS.DISPLAY.GRID,
-      CSS.PADDING.FULL.ONE,
-      !props.isToast && props.type === ALERT.ERROR ? [CSS.BG.GLOBAL.SURFACE.ERROR, CSS.BORDER.COLOR.GLOBAL.ERROR] : '',
-      !props.isToast && props.type === ALERT.INFO ? [CSS.BG.GLOBAL.SURFACE.INFO, CSS.BORDER.COLOR.GLOBAL.INFO] : '',
-      !props.isToast && props.type === ALERT.SUCCESS
-        ? [CSS.BG.GLOBAL.SURFACE.SUCCESS, CSS.BORDER.COLOR.GLOBAL.SUCCESS]
-        : '',
-      !props.isToast && props.type === ALERT.WARNING
-        ? [CSS.BG.GLOBAL.SURFACE.WARNING, CSS.BORDER.COLOR.GLOBAL.WARNING]
-        : '',
-      props.isToast ? [CSS.BG.SECONDARY, CSS.FONT.COLOR.SECONDARY, CSS.SHADOW.BOTTOM] : CSS.BORDER.LEFT.TWO,
-    ]"
-  >
-    <div
-      :class="[
-        'tide-alert-icon',
-        CSS.PADDING.FULL.QUARTER,
-        CSS.BORDER.RADIUS.FULL,
-        CSS.FONT.COLOR.SURFACE.INVERSE,
-        props.type === ALERT.ERROR && CSS.BG.GLOBAL.PRIMARY.ERROR,
-        props.type === ALERT.INFO && CSS.BG.GLOBAL.PRIMARY.INFO,
-        props.type === ALERT.SUCCESS && CSS.BG.GLOBAL.PRIMARY.SUCCESS,
-        props.type === ALERT.WARNING && CSS.BG.GLOBAL.PRIMARY.WARNING,
-      ]"
-      v-if="!props.isToast"
-    >
-      <TideIcon
-        :icon="iconType"
-        :size="SIZE.SMALL"
-      />
-    </div>
-
-    <div
-      :class="[
-        'tide-alert-heading',
-        CSS.DISPLAY.FLEX,
-        CSS.AXIS2.CENTER,
-        CSS.FLEX.DIRECTION.ROW,
-        !hasBody ? [CSS.AXIS1.BETWEEN, CSS.MARGIN.RIGHT.HALF] : '',
-      ]"
-    >
-      <span :class="CSS.FONT.ROLE.LABEL_2_SEMIBOLD">{{ props.heading }}</span>
-
-      <TideLink
-        :class="[CSS.FONT.ROLE.LINK_2]"
-        :element="ELEMENT.BUTTON"
-        :label="props.ctaLabel"
-        @click="emit('ctaClick')"
-        v-if="props.ctaLabel && !hasBody"
-      />
-    </div>
-
-    <TideButtonIcon
-      :class="['tide-alert-close', CSS.AXIS2.CENTER, CSS.FONT.COLOR.SURFACE.DEFAULT]"
-      :icon="ICON.CLOSE"
-      :priority="PRIORITY.QUATERNARY"
-      @click="emit('close')"
-      aria-label="Close alert"
-      v-if="isDismissible"
-    />
-
-    <div :class="['tide-alert-body', CSS.FONT.ROLE.BODY_2, !props.isToast && CSS.FONT.COLOR.SURFACE.DEFAULT]">
-      <slot />
-
-      <div
-        :class="[CSS.MARGIN.TOP.HALF]"
-        v-if="props.ctaLabel && hasBody"
-      >
-        <TideLink
-          :class="[CSS.FONT.ROLE.LINK_2]"
-          :element="ELEMENT.BUTTON"
-          :label="props.ctaLabel"
-          @click="emit('ctaClick')"
-          v-if="props.ctaLabel"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-  .tide-alert {
-    grid-template-areas:
-      'icon heading close'
-      '. body .';
-    grid-template-columns: auto var(--tide-safe-fr) auto;
-    grid-column-gap: var(--tide-spacing-1\/2);
-    max-width: var(--tide-max-width, 640px);
-  }
-
-  .tide-alert-icon {
-    grid-area: icon;
-  }
-
-  .tide-alert-heading {
-    grid-area: heading;
-  }
-
-  .tide-alert-close {
-    grid-area: close;
-  }
-
-  .tide-alert-body {
-    grid-area: body;
-  }
-</style>

package/src/components/TideBadge.vue

@@ -1,64 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a badge component with customizable content and behavior.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebadge--docs) for TideBadge
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import TideIcon from '@/components/TideIcon.vue';
-  import { BADGE_COLOR_DETAILS } from '@/types/Badge';
-  import { CSS } from '@/types/Styles';
-
-  import type { BadgeColor } from '@/types/Badge';
-  import type { Icon } from '@/types/Icon';
-
-  type Props = {
-    /** Determines which color option to adopt (if any) */
-    color?: BadgeColor;
-
-    /** Icon to left of label */
-    iconLeading?: Icon;
-
-    /** Determines whether to display the "Floating" variant styles */
-    isFloating?: boolean;
-
-    /** Badge text */
-    label: string;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    color: undefined,
-    iconLeading: undefined,
-    isFloating: false,
-  });
-</script>
-
-<template>
-  <div
-    :class="[
-      'tide-badge',
-      props.isFloating || props.color ? [CSS.BG.SURFACE.FLOATING, CSS.SHADOW.BOTTOM] : [CSS.BG.SURFACE.VARIANT],
-      CSS.DISPLAY.INLINE_FLEX,
-      CSS.AXIS2.CENTER,
-      CSS.GAP.QUARTER,
-      CSS.BORDER.RADIUS.QUARTER,
-      CSS.PADDING.Y.QUARTER,
-      CSS.PADDING.X.HALF,
-      props.color && [CSS.BORDER.LEFT.TWO, BADGE_COLOR_DETAILS[props.color].borderColor],
-      CSS.ELLIPSIS,
-      CSS.FONT.ROLE.LABEL_2,
-      CSS.WHITESPACE_WRAP.OFF,
-    ]"
-  >
-    <TideIcon
-      :class="[CSS.FLEX.SHRINK.OFF, props.color && BADGE_COLOR_DETAILS[props.color].iconColor]"
-      :icon="props.iconLeading"
-      v-if="props.iconLeading"
-    />
-
-    <span :class="[CSS.ELLIPSIS]">{{ props.label }}</span>
-  </div>
-</template>

package/src/components/TideBadgeTrustedPartner.vue

@@ -1,52 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a trusted partner badge component with preset years.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebadgetrustedpartner--docs) for TideBadgeTrustedPartner
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import TideIcon from '@/components/TideIcon.vue';
-  import { BADGE_TRUSTED } from '@/types/Badge';
-  import { ICON } from '@/types/Icon';
-  import { CSS } from '@/types/Styles';
-
-  import type { BadgeTrustedYears } from '@/types/Badge';
-
-  type Props = {
-    /** Number of years to display in the trusted partner badge */
-    years?: BadgeTrustedYears;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    years: BADGE_TRUSTED.YEARS_5,
-  });
-</script>
-
-<template>
-  <div
-    :class="[
-      'tide-badge-trusted-partner',
-      CSS.FONT.COLOR.SURFACE.BRAND,
-      CSS.DISPLAY.INLINE_FLEX,
-      CSS.AXIS2.CENTER,
-      CSS.GAP.QUARTER,
-      CSS.ELLIPSIS,
-      CSS.FONT.ROLE.LABEL_2,
-      CSS.WHITESPACE_WRAP.OFF,
-    ]"
-  >
-    <TideIcon
-      :class="[CSS.FLEX.SHRINK.OFF]"
-      :icon="ICON.AWARD_STAR"
-    />
-
-    <div :class="[CSS.ELLIPSIS]">
-      <span>{{ props.years }} year trusted partner</span>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>

package/src/components/TideBadgeVerifiedVehicle.vue

@@ -1,46 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a badge component for indicating a verified vehicle.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebadgeverifiedvehicle--docs) for TideBadgeVerifiedVehicle
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import TideIcon from '@/components/TideIcon.vue';
-  import { ICON } from '@/types/Icon';
-  import { CSS } from '@/types/Styles';
-</script>
-
-<template>
-  <div
-    :class="[
-      'tide-badge-verified-vehicle',
-      CSS.BG.SECONDARY,
-      CSS.FONT.ROLE.LABEL_2,
-      CSS.FONT.COLOR.SECONDARY,
-      CSS.DISPLAY.INLINE_FLEX,
-      CSS.AXIS2.CENTER,
-      CSS.GAP.QUARTER,
-      CSS.BORDER.RADIUS.QUARTER,
-      CSS.PADDING.Y.QUARTER,
-      CSS.PADDING.X.HALF,
-      CSS.ELLIPSIS,
-      CSS.WHITESPACE_WRAP.OFF,
-    ]"
-  >
-    <TideIcon
-      :class="[CSS.FLEX.SHRINK.OFF]"
-      :icon="ICON.VERIFIED"
-    />
-
-    <span :class="[CSS.ELLIPSIS]">Verified vehicle</span>
-  </div>
-</template>
-
-<style scoped>
-  .tide-icon {
-    color: var(--tide-info-primary);
-  }
-</style>

package/src/components/TideBreadCrumbs.vue

@@ -1,62 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a set of breadcrumbs for navigation purposes.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebreadcrumbs--docs) for TideBreadCrumbs
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import InternalBaseLink from '@/components/InternalBaseLink.vue';
-  import TideIcon from '@/components/TideIcon.vue';
-  import { ICON } from '@/types/Icon';
-  import { SIZE } from '@/types/Size';
-  import { CSS } from '@/types/Styles';
-
-  import type { BreadCrumb } from '@/types/BreadCrumb';
-
-  type Props = {
-    /** An array of labels and optional URLs to display for each bread crumb. */
-    breadCrumbs: BreadCrumb[];
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    breadCrumbs: undefined,
-  });
-</script>
-
-<template>
-  <ul :class="['tide-bread-crumbs', CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.LIST_BULLETS.OFF]">
-    <template
-      :key="crumb.label"
-      v-for="(crumb, index) in props.breadCrumbs"
-    >
-      <li :class="[CSS.FONT.ROLE.BODY_2]">
-        <InternalBaseLink
-          :class="[CSS.FONT.ROLE.LINK_2, CSS.FONT.COLOR.SURFACE.DEFAULT]"
-          :data-track="crumb.dataTrack || undefined"
-          :href="crumb.url"
-          v-if="crumb.url"
-        >
-          {{ crumb.label }}
-        </InternalBaseLink>
-
-        <span
-          :class="[CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]"
-          :data-track="crumb.dataTrack || undefined"
-          v-else
-        >
-          {{ crumb.label }}
-        </span>
-      </li>
-
-      <li v-if="props.breadCrumbs && index < props.breadCrumbs.length - 1">
-        <TideIcon
-          :icon="ICON.ARROW_RIGHT"
-          :size="SIZE.SMALL"
-        />
-      </li>
-    </template>
-  </ul>
-</template>

package/src/components/TideButton.vue

@@ -1,115 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a button component with various styling options.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebutton--docs) for TideButton
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { computed } from 'vue';
-
-  import InternalBaseLink from '@/components/InternalBaseLink.vue';
-  import TideIcon from '@/components/TideIcon.vue';
-  import { ELEMENT } from '@/types/Element';
-  import { PRIORITY } from '@/types/Priority';
-  import { SIZE, SIZE_BUTTON } 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 { Priority } from '@/types/Priority';
-  import type { SizeButton } from '@/types/Size';
-  import type { ButtonType } from '@/types/Type';
-
-  type Props = {
-    /** Determines clickability (Button only) */
-    disabled?: boolean;
-
-    /** HTML tag type */
-    element?: Element;
-
-    /** URL to open (Link only) */
-    href?: string;
-
-    /** Icon to left of label */
-    iconLeading?: Icon;
-
-    /** Icon to right of label */
-    iconTrailing?: Icon;
-
-    /** Determines whether to target a new browser tab (Link only) */
-    isNewTab?: boolean;
-
-    /** Button text */
-    label: string;
-
-    /** Determines visual prominence */
-    priority?: Exclude<Priority, typeof PRIORITY.FLOATING>;
-
-    /** Determines rendered size */
-    size?: SizeButton;
-
-    /** Applies type attribute to HTML element */
-    type?: ButtonType;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    disabled: false,
-    element: ELEMENT.BUTTON,
-    href: undefined,
-    iconLeading: undefined,
-    iconTrailing: undefined,
-    isNewTab: false,
-    label: undefined,
-    priority: PRIORITY.PRIMARY,
-    size: SIZE_BUTTON.LARGE,
-    type: undefined,
-  });
-
-  const typeAttribute = computed<string | undefined>(() =>
-    props.element === ELEMENT.BUTTON ? props.type ?? ELEMENT.BUTTON : undefined
-  );
-
-  const rootElement = computed(() => (props.element === ELEMENT.LINK ? InternalBaseLink : props.element));
-</script>
-
-<template>
-  <component
-    :class="[
-      'tide-button',
-      CSS.AXIS1.CENTER,
-      CSS.AXIS2.CENTER,
-      CSS.BORDER.RADIUS.FULL,
-      CSS.FONT.ROLE.LABEL_1_SEMIBOLD,
-      CSS.GAP.HALF,
-      CSS.PADDING.X.TWO,
-      `tide-button-${priority}`,
-      element === ELEMENT.LINK ? [CSS.DISPLAY.INLINE_FLEX, CSS.UNDERLINE.REST.OFF] : [CSS.DISPLAY.FLEX],
-      size === SIZE_BUTTON.SMALL
-        ? [CSS.FONT.ROLE.BUTTON_2, CSS.PADDING.Y.HALF]
-        : [CSS.FONT.ROLE.BUTTON_1, CSS.PADDING.Y.ONE],
-    ]"
-    :disabled="element === ELEMENT.BUTTON && disabled"
-    :href="element === ELEMENT.LINK && href ? href : undefined"
-    :target="element === ELEMENT.LINK && isNewTab ? TARGET.BLANK : TARGET.SELF"
-    :type="typeAttribute"
-    :is="rootElement"
-  >
-    <TideIcon
-      :icon="iconLeading"
-      :size="size === SIZE_BUTTON.LARGE ? SIZE.LARGE : SIZE.SMALL"
-      v-if="iconLeading"
-    />
-
-    {{ label }}
-
-    <TideIcon
-      :icon="iconTrailing"
-      :size="size === SIZE_BUTTON.LARGE ? SIZE.LARGE : SIZE.SMALL"
-      v-if="iconTrailing"
-    />
-  </component>
-</template>

package/src/components/TideButtonIcon.vue

@@ -1,91 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a icon button component with various styling options.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebuttonicon--docs) for TideButtonIcon
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { computed } from 'vue';
-
-  import InternalBaseLink from '@/components/InternalBaseLink.vue';
-  import TideIcon from '@/components/TideIcon.vue';
-  import { ELEMENT } from '@/types/Element';
-  import { PRIORITY } from '@/types/Priority';
-  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 { Priority } from '@/types/Priority';
-  import type { ButtonType } from '@/types/Type';
-
-  type Props = {
-    /** Determines clickability (Button only) */
-    disabled?: boolean;
-
-    /** HTML tag type */
-    element?: Element;
-
-    /** URL to open (Link only) */
-    href?: string;
-
-    /** Icon to show */
-    icon: Icon;
-
-    /** Determines whether to target a new browser tab (Link only) */
-    isNewTab?: boolean;
-
-    /** Determines visual prominence */
-    priority?: Priority;
-
-    /** Applies type attribute to HTML element */
-    type?: ButtonType;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    disabled: false,
-    element: ELEMENT.BUTTON,
-    href: undefined,
-    icon: undefined,
-    isNewTab: false,
-    priority: PRIORITY.PRIMARY,
-    type: undefined,
-  });
-
-  const typeAttribute = computed<string | undefined>(() =>
-    props.element === ELEMENT.BUTTON ? props.type ?? ELEMENT.BUTTON : undefined
-  );
-
-  const rootElement = computed(() => (props.element === ELEMENT.LINK ? InternalBaseLink : props.element));
-</script>
-
-<template>
-  <component
-    :aria-label="icon"
-    :class="[
-      'tide-button-icon',
-      CSS.AXIS1.CENTER,
-      CSS.AXIS2.CENTER,
-      CSS.BORDER.RADIUS.FULL,
-      CSS.DISPLAY.FLEX,
-      CSS.PADDING.FULL.HALF,
-      `tide-button-${priority}`,
-      element === ELEMENT.LINK ? [CSS.UNDERLINE.REST.OFF] : '',
-    ]"
-    :disabled="element === ELEMENT.BUTTON && disabled"
-    :href="element === ELEMENT.LINK && href ? href : undefined"
-    :target="element === ELEMENT.LINK && isNewTab ? TARGET.BLANK : TARGET.SELF"
-    :type="typeAttribute"
-    :is="rootElement"
-  >
-    <TideIcon
-      :icon="icon"
-      :size="SIZE.LARGE"
-      v-if="icon"
-    />
-  </component>
-</template>