tide-design-system 2.5.13 → 2.5.14

package/src/components/TideButtonPagination.vue

@@ -1,87 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a button component for use in pagination purposes.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebuttonpagination--docs) for TideButtonPagination
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { computed } from 'vue';
-
-  import InternalBaseLink from '@/components/InternalBaseLink.vue';
-  import { ELEMENT, ELEMENT_BROAD } from '@/types/Element';
-  import { CSS } from '@/types/Styles';
-
-  import type { ElementBroad } from '@/types/Element';
-
-  type Props = {
-    /** Indicates whether Pagination Button is associated with the displayed page */
-    disabled?: boolean;
-
-    /** HTML tag type */
-    element?: ElementBroad;
-
-    /** URL to open<br />(Link only) */
-    href?: string;
-
-    /** Button text */
-    label: string | number;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    disabled: false,
-    element: ELEMENT_BROAD.BUTTON,
-    href: undefined,
-    label: undefined,
-  });
-
-  const rootElement = computed(() => (props.element === ELEMENT.LINK ? InternalBaseLink : props.element));
-</script>
-
-<template>
-  <component
-    :class="[
-      'tide-button-icon',
-      [CSS.DISPLAY.INLINE_BLOCK, CSS.BORDER.RADIUS.FULL, CSS.PADDING.FULL.HALF],
-      props.element === ELEMENT_BROAD.LINK ? [CSS.UNDERLINE.REST.OFF] : '',
-      props.element === ELEMENT_BROAD.DIV ? [CSS.CURSOR.POINTER] : '',
-      [CSS.FONT.ROLE.HEADLINE_3],
-    ]"
-    :disabled="props.element === ELEMENT_BROAD.BUTTON && props.disabled"
-    :href="props.element === ELEMENT_BROAD.LINK && props.href ? props.href : undefined"
-    :type="element === ELEMENT_BROAD.BUTTON ? ELEMENT_BROAD.BUTTON : undefined"
-    :is="rootElement"
-  >
-    <span :class="['label', CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER]">
-      {{ props.label }}
-    </span>
-  </component>
-</template>
-
-<style scoped>
-  .tide-button-icon,
-  .tide-link-as-button-icon {
-    border: 1px solid var(--tide-white);
-    background: var(--tide-white);
-    color: var(--tide-secondary);
-  }
-
-  .tide-button-icon:not(:disabled):hover,
-  .tide-link-as-button-icon:not(:disabled):hover {
-    border: 1px solid var(--tide-surface-variant);
-    background: var(--tide-surface-variant);
-  }
-
-  .tide-button-icon:disabled,
-  .tide-link-as-button-icon:disabled {
-    border: 1px solid var(--tide-border-high);
-  }
-
-  .tide-button-icon .label,
-  .tide-link-as-button-icon .label {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-</style>

package/src/components/TideButtonSave.vue

@@ -1,109 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a button component for use to save items.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebuttonsave--docs) for TideButtonSave
-   */
-  export default {};
-</script>
-
-<script setup lang="ts">
-  import { ref, watch } from 'vue';
-
-  import { CSS } from '@/types/Styles';
-
-  const isTouched = ref(false);
-  const isSaved = defineModel<boolean>({ required: true });
-
-  watch(
-    isSaved,
-    () => {
-      if (!isTouched.value) isTouched.value = true;
-    },
-    { immediate: false }
-  );
-</script>
-
-<template>
-  <button
-    :class="['tide-button-save', CSS.PADDING.FULL.QUARTER, isSaved && 'saved']"
-    @click="isSaved = !isSaved"
-    type="button"
-  >
-    <div :class="['heart-container', CSS.DISPLAY.FLEX, isSaved && isTouched && 'animate-heartbeat']">
-      <svg
-        :class="['tide-button-save-icon', CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF]"
-        height="32"
-        viewBox="0 0 24 24"
-        width="32"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          :class="['heart-filled', isSaved ? CSS.FONT.COLOR.GLOBAL.PRIMARY.RED : 'filled-transparent']"
-          d="m12 21-1.45-1.3c-1.6833-1.5167-3.075-2.825-4.175-3.925-1.1-1.1-1.975-2.0875-2.625-2.9625-.65-.875-1.1042-1.6792-1.3625-2.4125C2.1292 9.6667 2 8.9167 2 8.15c0-1.5667.525-2.875 1.575-3.925C4.625 3.175 5.9333 2.65 7.5 2.65c.8667 0 1.6917.1833 2.475.55.7833.3667 1.4583.8833 2.025 1.55.5667-.6667 1.2417-1.1833 2.025-1.55.7833-.3667 1.6083-.55 2.475-.55 1.5667 0 2.875.525 3.925 1.575C21.475 5.275 22 6.5833 22 8.15c0 .7667-.1292 1.5167-.3875 2.25-.2583.7333-.7125 1.5375-1.3625 2.4125s-1.525 1.8625-2.625 2.9625c-1.1 1.1-2.4917 2.4083-4.175 3.925L12 21Z"
-        />
-
-        <path
-          :class="['heart-outline', CSS.FONT.COLOR.SURFACE.INVERSE]"
-          d="m12 21-1.45-1.3c-1.6833-1.5167-3.075-2.825-4.175-3.925-1.1-1.1-1.975-2.0875-2.625-2.9625-.65-.875-1.1042-1.6792-1.3625-2.4125C2.1292 9.6667 2 8.9167 2 8.15c0-1.5667.525-2.875 1.575-3.925C4.625 3.175 5.9333 2.65 7.5 2.65c.8667 0 1.6917.1833 2.475.55.7833.3667 1.4583.8833 2.025 1.55.5667-.6667 1.2417-1.1833 2.025-1.55.7833-.3667 1.6083-.55 2.475-.55 1.5667 0 2.875.525 3.925 1.575C21.475 5.275 22 6.5833 22 8.15c0 .7667-.1292 1.5167-.3875 2.25-.2583.7333-.7125 1.5375-1.3625 2.4125s-1.525 1.8625-2.625 2.9625c-1.1 1.1-2.4917 2.4083-4.175 3.925L12 21Zm0-2.7c1.6-1.4333 2.9167-2.6625 3.95-3.6875s1.85-1.9167 2.45-2.675c.6-.7583 1.0167-1.4333 1.25-2.025.2333-.5917.35-1.1792.35-1.7625 0-1-.3333-1.8333-1-2.5-.6667-.6667-1.5-1-2.5-1-.7833 0-1.5083.2208-2.175.6625C13.6583 5.7542 13.2 6.3167 12.95 7h-1.9c-.25-.6833-.7083-1.2458-1.375-1.6875S8.2833 4.65 7.5 4.65c-1 0-1.8333.3333-2.5 1-.6667.6667-1 1.5-1 2.5 0 .5833.1167 1.1708.35 1.7625.2333.5917.65 1.2667 1.25 2.025s1.4167 1.65 2.45 2.675S10.4 16.8667 12 18.3Z"
-        />
-      </svg>
-    </div>
-  </button>
-</template>
-
-<style scoped>
-  .heart-container {
-    --rotate-during-heart-beat: 9deg;
-    filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.3));
-    transition: var(--tide-duration-300) var(--tide-easing-ease-out);
-    transition-property: transform, scale;
-    rotate: 0deg;
-  }
-
-  .heart-container.animate-heartbeat {
-    animation: heartBeat var(--tide-duration-150);
-    animation-direction: alternate;
-    animation-iteration-count: 4;
-  }
-
-  .heart-container:active {
-    scale: 0.9;
-    transition-duration: var(--tide-duration-75);
-  }
-
-  .tide-button-save-icon {
-    fill: currentColor;
-  }
-
-  @media (hover: hover) {
-    .heart-container {
-      --rotate-during-heart-beat: 0deg;
-    }
-
-    .tide-button-save:where(:hover, :focus-visible) .heart-container {
-      transform: rotate(9deg);
-    }
-  }
-
-  .heart-filled {
-    scale: 0.985; /* avoid hairline border render issue */
-    transform-origin: center;
-    transition: color var(--tide-duration-75) var(--tide-easing-linear);
-  }
-
-  .filled-transparent {
-    color: var(--tide-transparent-400);
-  }
-
-  @keyframes heartBeat {
-    from {
-      scale: 1;
-      rotate: 0deg;
-    }
-    to {
-      scale: 1.25;
-      rotate: var(--rotate-during-heart-beat);
-    }
-  }
-</style>

package/src/components/TideButtonSegmented.vue

@@ -1,115 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a segmented button component for navigation purposes.
-   *
-   * Powered by native input[type="radio"] under the hood for enhanced accessibility.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidebuttonsegmented--docs) for TideButtonSegmented
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { computed, useId } from 'vue';
-
-  import { CSS } from '@/types/Styles';
-
-  import type { Tab } from '@/types/Tab';
-
-  type Props = {
-    /** Sets label and callback for each tab */
-    tabs: Tab[] | readonly Tab[];
-
-    /** Opts in as a native HTML form field with this name. */
-    name?: string;
-  };
-
-  const props = defineProps<Props>();
-
-  const currentIndex = defineModel<number>({ required: true });
-
-  const uniqueId = useId();
-
-  const inputFormAttribute = computed(() => (props.name ? undefined : 'none'));
-  const inputNameAttribute = computed(() => props.name ?? uniqueId);
-</script>
-
-<template>
-  <div
-    :class="[
-      'tide-button-segmented',
-      CSS.BG.SURFACE.VARIANT,
-      CSS.BORDER.RADIUS.FULL,
-      CSS.DISPLAY.FLEX,
-      CSS.FLEX.SHRINK.OFF,
-      CSS.GAP.QUARTER,
-      CSS.OVERFLOW.XY.AUTO,
-      CSS.PADDING.FULL.QUARTER,
-    ]"
-    role="radiogroup"
-  >
-    <label
-      :class="[
-        'tide-button-segmented-tab',
-        index === currentIndex
-          ? [CSS.BG.SURFACE.DEFAULT, CSS.FONT.COLOR.SURFACE.DEFAULT, CSS.SHADOW.BOTTOM]
-          : ['inactive', CSS.FONT.COLOR.SURFACE.VARIANT],
-        CSS.ALIGN.X.CENTER,
-        CSS.BORDER.FULL.TWO,
-        CSS.BORDER.RADIUS.FULL,
-        CSS.CURSOR.POINTER,
-        CSS.FLEX.GROW.ON,
-        CSS.FLEX.SHRINK.OFF,
-        CSS.FONT.ROLE.BUTTON_1,
-        CSS.PADDING.X.HALF,
-        CSS.PADDING.Y.QUARTER,
-        CSS.WHITESPACE_WRAP.OFF,
-        CSS.WIDTH.AUTO,
-      ]"
-      :data-track="tab.dataTrack || undefined"
-      :key="tab.label"
-      v-for="(tab, index) in tabs"
-    >
-      <input
-        :checked="index === currentIndex"
-        :class="['tide-screen-reader-only']"
-        :form="inputFormAttribute"
-        :name="inputNameAttribute"
-        :value="index"
-        @change="currentIndex = index"
-        type="radio"
-      />
-
-      <span :class="[CSS.FONT.ROLE.LABEL_2_SEMIBOLD]">
-        {{ tab.label }}
-      </span>
-
-      <span
-        :class="[CSS.FONT.ROLE.LABEL_2_SEMIBOLD]"
-        v-if="tab.count && tab.count > 0"
-      >
-        ({{ tab.count }})
-      </span>
-    </label>
-  </div>
-</template>
-
-<style scoped>
-  .tide-button-segmented {
-    max-width: 23.3rem;
-    align-self: stretch;
-  }
-
-  .tide-button-segmented:has(:focus-visible) {
-    outline: auto;
-  }
-
-  .inactive {
-    border-color: var(--tide-surface-variant);
-  }
-
-  .inactive:hover {
-    border-color: var(--tide-border);
-    color: var(--tide-surface-default);
-  }
-</style>

package/src/components/TideCard.vue

@@ -1,107 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a card component with a heading, description, and optional icon.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidecard--docs) for TideCard
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { computed } from 'vue';
-
-  import InternalBaseLink from '@/components/InternalBaseLink.vue';
-  import TideIcon from '@/components/TideIcon.vue';
-  import { TYPE_CARD } from '@/types/Card';
-  import { ELEMENT_BROAD } from '@/types/Element';
-  import { SIZE } from '@/types/Size';
-  import { CSS } from '@/types/Styles';
-
-  import type { CardType } from '@/types/Card';
-  import type { ElementBroad } from '@/types/Element';
-  import type { Icon } from '@/types/Icon';
-
-  type Props = {
-    /** Optional description text displayed below the heading */
-    description?: string;
-
-    /** The main heading of the card. */
-    heading: string;
-
-    /** Optional icon displayed on the card. */
-    icon?: Icon;
-
-    /** Determines whether the Card is selected (for selectable cards). */
-    selected?: boolean;
-
-    /** Type of the card */
-    type?: CardType;
-
-    /** URL to navigate to on click. */
-    href?: string;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    description: undefined,
-    href: undefined,
-    icon: undefined,
-    selected: undefined,
-    type: TYPE_CARD.INFORMATIONAL,
-  });
-
-  const rootElement = computed<ElementBroad | typeof InternalBaseLink>(() =>
-    props.href ? InternalBaseLink : props.type === TYPE_CARD.INFORMATIONAL ? ELEMENT_BROAD.DIV : ELEMENT_BROAD.BUTTON
-  );
-</script>
-
-<template>
-  <component
-    :class="[
-      'tide-card',
-      CSS.BORDER.COLOR.LOW,
-      CSS.BORDER.FULL.ONE,
-      CSS.BORDER.RADIUS.HALF,
-      CSS.DISPLAY.FLEX,
-      CSS.GAP.HALF,
-      CSS.PADDING.FULL.ONE,
-      CSS.WIDTH.FULL,
-      CSS.ALIGN.X.LEFT,
-      CSS.FLEX.DIRECTION.COLUMN,
-      type !== TYPE_CARD.INFORMATIONAL && 'hoverable',
-      type === TYPE_CARD.SELECTABLE && selected && 'selected',
-    ]"
-    :href="href"
-    :type="rootElement === ELEMENT_BROAD.BUTTON ? ELEMENT_BROAD.BUTTON : undefined"
-    :is="rootElement"
-  >
-    <TideIcon
-      :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF]"
-      :icon="icon"
-      :size="SIZE.SMALL"
-      v-if="icon"
-    />
-
-    <div :class="[CSS.AXIS2.START, CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.HALF]">
-      <div :class="[CSS.FONT.ROLE.LABEL_1_SEMIBOLD, CSS.FONT.COLOR.SURFACE.DEFAULT]">
-        {{ heading }}
-      </div>
-
-      <div
-        :class="[CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]"
-        v-if="description"
-      >
-        {{ description }}
-      </div>
-    </div>
-  </component>
-</template>
-
-<style scoped>
-  .tide-card.hoverable:not(.selected):hover {
-    border-color: var(--tide-border-rest);
-  }
-  .tide-card.selected {
-    outline: 2px solid var(--tide-border-high);
-    outline-offset: -2px;
-  }
-</style>