tide-design-system 2.0.21 → 2.0.23

package/src/components/TideButtonIcon.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+  import type { Element } from '@/types/Element';
+  import type { Icon } from '@/types/Icon';
+  import type { Priority } from '@/types/Priority';
+
+  import TideIcon from '@/components/TideIcon.vue';
+  import { CSS } from '@/types/Styles';
+  import { ELEMENT } from '@/types/Element';
+  import { PRIORITY } from '@/types/Priority';
+  import { SIZE } from '@/types/Size';
+  import { TARGET } from '@/types/Target';
+
+  type Props = {
+    disabled?: boolean;
+    element?: Element;
+    href?: string;
+    icon: Icon;
+    isNewTab?: boolean;
+    priority?: Priority;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
+    element: ELEMENT.BUTTON,
+    href: undefined,
+    icon: undefined,
+    isNewTab: false,
+    priority: PRIORITY.PRIMARY,
+  });
+</script>
+
+<template>
+  <component
+    :aria-label="props.icon"
+    :class="[
+      props.element === ELEMENT.LINK ? 'tide-link-as-button-icon' : 'tide-button-icon',
+      props.priority && `tide-button-${props.priority}`,
+      [CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.BORDER.RADIUS.FULL, CSS.PADDING.FULL.HALF],
+      props.element === ELEMENT.LINK ? [CSS.UNDERLINE.OFF] : '',
+    ]"
+    :disabled="props.element === ELEMENT.BUTTON && props.disabled"
+    :href="props.element === ELEMENT.LINK && props.href ? props.href : undefined"
+    :target="props.element === ELEMENT.LINK && props.isNewTab ? TARGET.BLANK : TARGET.SELF"
+    :is="props.element === ELEMENT.LINK ? 'a' : 'button'"
+  >
+    <TideIcon
+      :icon="props.icon"
+      :size="SIZE.LARGE"
+      v-if="props.icon"
+    />
+  </component>
+</template>

package/src/components/TideButtonPagination.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+  import type { ElementTextAsIcon } from '@/types/Element';
+
+  import { CSS } from '@/types/Styles';
+  import { ELEMENT_TEXT_AS_ICON } from '@/types/Element';
+
+  type Props = {
+    disabled?: boolean;
+    element?: ElementTextAsIcon;
+    href?: string;
+    label: string | number;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
+    element: ELEMENT_TEXT_AS_ICON.BUTTON,
+    href: undefined,
+    label: undefined,
+  });
+</script>
+
+<template>
+  <component
+    :class="[
+      props.element === ELEMENT_TEXT_AS_ICON.LINK ? 'tide-link-as-button-icon' : 'tide-button-icon',
+      [CSS.DISPLAY.INLINE_BLOCK, CSS.BORDER.RADIUS.FULL, CSS.PADDING.FULL.HALF],
+      props.element === ELEMENT_TEXT_AS_ICON.LINK ? [CSS.UNDERLINE.OFF] : '',
+      props.element === ELEMENT_TEXT_AS_ICON.DIV ? [CSS.CURSOR.POINTER] : '',
+      [CSS.FONT.WEIGHT.SEVEN_HUNDRED],
+    ]"
+    :disabled="props.element === ELEMENT_TEXT_AS_ICON.BUTTON && props.disabled"
+    :href="props.element === ELEMENT_TEXT_AS_ICON.LINK && props.href ? props.href : undefined"
+    :is="
+      props.element === ELEMENT_TEXT_AS_ICON.LINK
+        ? 'a'
+        : props.element === ELEMENT_TEXT_AS_ICON.BUTTON
+        ? 'button'
+        : 'div'
+    "
+  >
+    <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/TideCard.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+  import { CSS } from '@/types/Styles';
+</script>
+
+<template>
+  <div
+    :class="[
+      'tide-card',
+      CSS.HEIGHT.FULL,
+      CSS.BORDER.RADIUS.HALF,
+      CSS.BG.SURFACE.DEFAULT,
+      CSS.SHADOW.BOTTOM,
+      CSS.FONT.COLOR.SURFACE.DEFAULT,
+      CSS.SNAP_ALIGN.START,
+    ]"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/TideCarousel.vue

@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+  import { onMounted, onUnmounted, onUpdated, ref, watch } from 'vue';
+
+  import TideButtonIcon from '@/components/TideButtonIcon.vue';
+  import { CSS } from '@/types/Styles';
+  import { ICON } from '@/types/Icon';
+  import { PRIORITY } from '@/types/Priority';
+
+  type Props = {
+    isTouchscreen?: boolean;
+    offsetX?: number;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    offsetX: 0,
+  });
+
+  const emit = defineEmits(['change']);
+
+  let contentWidth = ref();
+  let frameWidth = ref();
+  let hasOverflow = ref();
+  let lastPosition = ref();
+
+  const contentRef = ref();
+  const frameRef = ref();
+  const showButtons = ref();
+  const currentSlide = ref(0);
+
+  const gap = 16;
+
+  /**
+   * Measure the current slide based on the scroll
+   * position of the frame. The current slide is
+   * the slide that is closest to the left edge of
+   * the frame.
+   */
+  const measureCurrentSlide = () => {
+    // get left offsets of each slide
+    const slideOffsets = Array.from(contentRef.value.children).map((slide: any) => slide.offsetLeft);
+
+    if (slideOffsets.length === 0) return;
+
+    // get value closest to current scroll position
+    const closestSlideOffset = slideOffsets.reduce((prev, curr) => {
+      return Math.abs(curr - frameRef.value.scrollLeft) < Math.abs(prev - frameRef.value.scrollLeft) ? curr : prev;
+    });
+
+    // set current slide to index of closest slide
+    currentSlide.value = slideOffsets.indexOf(closestSlideOffset);
+  };
+
+  const measureDom = () => {
+    contentWidth.value = contentRef.value.scrollWidth;
+    frameWidth.value = frameRef.value.clientWidth;
+    hasOverflow.value = contentWidth.value > frameWidth.value;
+    lastPosition.value = frameRef.value.scrollWidth - frameRef.value.clientWidth;
+    showButtons.value = hasOverflow.value && !props.isTouchscreen;
+
+    measureCurrentSlide();
+  };
+
+  // TODO: debounce this
+  const handleScroll = () => {
+    measureDom();
+  };
+
+  /**
+   * Scrolls to the slide at the given index, or
+   * to the first or last slide if the given index
+   * is out of bounds.
+   * @param slideIndex The index of the slide to scroll to
+   */
+  const scrollToSlide = (slideIndex: number) => {
+    frameRef.value.scrollTo({
+      behavior: 'smooth',
+      left: contentRef.value.children[slideIndex].offsetLeft,
+    });
+  };
+
+  const showNextSlide = () => {
+    const contentWidth = contentRef.value.scrollWidth;
+    const contentRightEdge = frameRef.value.scrollLeft + frameRef.value.clientWidth;
+
+    if (contentRightEdge > contentWidth) {
+      frameRef.value.scrollTo({
+        behavior: 'smooth',
+        left: contentWidth,
+      });
+    } else {
+      const isFirstSlideWithOffset = props.offsetX && currentSlide.value === 0;
+      const isLastSlide = contentRightEdge === contentWidth;
+      const nextSlide = isLastSlide ? 0 : isFirstSlideWithOffset ? 2 : currentSlide.value + 1;
+
+      scrollToSlide(nextSlide);
+    }
+  };
+
+  const showPreviousSlide = () => {
+    const firstSlide = props.offsetX ? 1 : 0;
+    const isFirstSlide = currentSlide.value - 1 === firstSlide;
+    const isSecondSlide = currentSlide.value <= firstSlide;
+    const previousSlide = isSecondSlide
+      ? contentRef.value.children.length - 1
+      : isFirstSlide
+      ? 0
+      : currentSlide.value - 1;
+
+    scrollToSlide(previousSlide);
+  };
+
+  window.addEventListener('resize', measureDom);
+
+  onMounted(() => {
+    measureDom();
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', measureDom);
+  });
+
+  onUpdated(() => {
+    measureDom();
+  });
+
+  watch(currentSlide, () => {
+    emit('change', currentSlide.value);
+  });
+</script>
+
+<template>
+  <section
+    :class="['tide-carousel', CSS.POSITION.RELATIVE, CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.WIDTH.FULL]"
+    ref="carouselRef"
+  >
+    <div
+      :class="[CSS.SCROLLBAR.OFF, CSS.SNAP.ON, CSS.OVERFLOW.X.SCROLL]"
+      ref="frameRef"
+      @scroll="handleScroll"
+    >
+      <ul
+        :class="[props.isTouchscreen ? [CSS.OVERFLOW.X.AUTO] : '', CSS.DISPLAY.FLEX, CSS.GAP.ONE, CSS.LIST_BULLETS.OFF]"
+        ref="contentRef"
+      >
+        <li
+          :class="[CSS.FLEX.SHRINK.OFF, CSS.SNAP_ALIGN.START]"
+          :style="{ width: `${props.offsetX - gap}px` }"
+          v-if="props.offsetX"
+        />
+
+        <slot />
+
+        <li
+          :class="[CSS.FLEX.SHRINK.OFF, CSS.SNAP_ALIGN.START]"
+          :style="{ width: `${props.offsetX - gap}px` }"
+          v-if="props.offsetX"
+        />
+      </ul>
+    </div>
+
+    <div
+      :class="[
+        CSS.POSITION.ABSOLUTE,
+        CSS.DISPLAY.FLEX,
+        CSS.AXIS1.BETWEEN,
+        CSS.AXIS2.CENTER,
+        CSS.WIDTH.FULL,
+        CSS.HEIGHT.FULL,
+        CSS.POINTER_EVENTS.OFF,
+      ]"
+      v-if="showButtons"
+    >
+      <TideButtonIcon
+        :class="[CSS.MARGIN.LEFT.ONE, CSS.POINTER_EVENTS.ON]"
+        :icon="ICON.CHEVRON_LEFT"
+        :priority="PRIORITY.QUATERNARY"
+        @click="showPreviousSlide"
+      />
+
+      <TideButtonIcon
+        :class="[CSS.MARGIN.RIGHT.ONE, CSS.POINTER_EVENTS.ON]"
+        :icon="ICON.CHEVRON_RIGHT"
+        :priority="PRIORITY.QUATERNARY"
+        @click="showNextSlide"
+      />
+    </div>
+  </section>
+</template>

package/src/components/TideChipAction.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+  import TideIcon from '@/components/TideIcon.vue';
+  import { CSS } from '@/types/Styles';
+  import { ICON } from '@/types/Icon';
+  import { TARGET } from '@/types/Target';
+
+  type Props = {
+    href: string;
+    isNewTab?: boolean;
+    label: string;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    isNewTab: false,
+  });
+</script>
+
+<template>
+  <a
+    :class="[
+      'tide-chip-action',
+      CSS.AXIS2.CENTER,
+      CSS.GAP.HALF,
+      CSS.BORDER.FULL.ONE,
+      CSS.BORDER.RADIUS.FULL,
+      CSS.PADDING.X.ONE,
+      CSS.PADDING.Y.HALF,
+      CSS.BG.SURFACE.DEFAULT,
+      CSS.FONT.SIZE.FOURTEEN,
+      CSS.FONT.WEIGHT.FIVE_HUNDRED,
+      CSS.FONT.COLOR.SURFACE.DEFAULT,
+      CSS.UNDERLINE.OFF,
+    ]"
+    :href="props.href"
+    :target="props.isNewTab ? TARGET.BLANK : TARGET.SELF"
+  >
+    <TideIcon :icon="ICON.SEARCH" />
+
+    <span>{{ props.label }}</span>
+  </a>
+</template>
+
+<style scoped>
+  .tide-chip-action:hover {
+    background-color: var(--tide-surface-variant);
+    border-color: var(--tide-border-high);
+  }
+</style>

package/src/components/TideChipFilter.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+  import { CSS } from '@/types/Styles';
+
+  type Props = {
+    isActive: boolean;
+    label: string;
+  };
+
+  const props = defineProps<Props>();
+</script>
+
+<template>
+  <button
+    :class="[
+      'tide-chip-filter',
+      props.isActive
+        ? [CSS.BG.SECONDARY, CSS.FONT.COLOR.SECONDARY]
+        : [CSS.BG.SURFACE.VARIANT, CSS.FONT.COLOR.SURFACE.DEFAULT],
+      CSS.DISPLAY.FLEX,
+      CSS.AXIS2.CENTER,
+      CSS.GAP.HALF,
+      CSS.BORDER.FULL.ONE,
+      CSS.BORDER.RADIUS.FULL,
+      CSS.PADDING.X.ONE,
+      CSS.PADDING.Y.HALF,
+      CSS.FONT.SIZE.FOURTEEN,
+      CSS.FONT.WEIGHT.FIVE_HUNDRED,
+      props.isActive ? 'active' : '',
+    ]"
+  >
+    <slot />
+    <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.HALF]">
+      <span :class="[props.isActive ? '' : 'icon-spacing', CSS.FONT.WEIGHT.FIVE_HUNDRED, CSS.WHITESPACE_WRAP.OFF]">
+        {{ props.label }}
+      </span>
+    </div>
+  </button>
+</template>
+
+<style scoped>
+  /* Border must always exist to prevent resize on hover state, but match background color on rest state to blend in. */
+  .tide-chip-filter {
+    border-color: var(--tide-surface-variant);
+  }
+
+  .tide-chip-filter.active {
+    border-color: var(--tide-secondary);
+  }
+
+  .tide-chip-filter:hover {
+    background-color: var(--tide-surface-variant);
+    border-color: var(--tide-border);
+    color: var(--tide-on-surface);
+  }
+</style>

package/src/components/TideChipInput.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+  import TideIcon from '@/components/TideIcon.vue';
+  import { CSS } from '@/types/Styles';
+  import { ICON } from '@/types/Icon';
+
+  type Props = {
+    label: string;
+  };
+
+  const props = defineProps<Props>();
+</script>
+
+<template>
+  <button
+    :class="[
+      'tide-chip-input',
+      CSS.BG.SURFACE.VARIANT,
+      CSS.FONT.COLOR.SURFACE,
+      CSS.DISPLAY.FLEX,
+      CSS.AXIS2.CENTER,
+      CSS.GAP.HALF,
+      CSS.BORDER.FULL.ONE,
+      CSS.BORDER.RADIUS.FULL,
+      CSS.PADDING.X.ONE,
+      CSS.PADDING.Y.HALF,
+      CSS.FONT.SIZE.FOURTEEN,
+      CSS.FONT.WEIGHT.FIVE_HUNDRED,
+    ]"
+  >
+    <span>{{ props.label }}</span>
+
+    <TideIcon :icon="ICON.CLOSE" />
+  </button>
+</template>
+
+<style scoped>
+  .tide-chip-input {
+    border-color: var(--tide-border);
+  }
+
+  .tide-chip-input:hover {
+    border-color: var(--tide-border-high);
+  }
+</style>

package/src/components/TideColumns.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+  import { CSS } from '@/types/Styles';
+
+  type Props = {
+    heading?: string;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    heading: '',
+  });
+</script>
+
+<template>
+  <section class="tide-columns">
+    <h2 :class="[CSS.MARGIN.BOTTOM.HALF, CSS.FONT.SIZE.SIXTEEN]">{{ props.heading }}</h2>
+
+    <ul :class="[CSS.DISPLAY.FLEX, CSS.FLEX.WRAP, CSS.GAP.TWO, CSS.LIST_BULLETS.OFF]">
+      <li class="tide-columns-column">
+        <slot name="section1" />
+      </li>
+
+      <li class="tide-columns-column">
+        <slot name="section2" />
+      </li>
+
+      <li class="tide-columns-column">
+        <slot name="section3" />
+      </li>
+
+      <li class="tide-columns-column">
+        <slot name="section4" />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style scoped>
+  .tide-columns-column {
+    width: 100%;
+  }
+
+  @media (min-width: 992px) {
+    .tide-columns-column {
+      width: calc((100% - 2rem) / 2);
+    }
+  }
+
+  @media (min-width: 1232px) {
+    .tide-columns-column {
+      width: calc((100% - 6rem) / 4);
+    }
+  }
+</style>

package/src/components/TideDivider.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+  import type { Orientation } from '@/types/Orientation';
+  import { CSS } from '@/types/Styles';
+  import { ORIENTATION } from '@/types/Orientation';
+
+  type Props = {
+    orientation?: Orientation;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    orientation: ORIENTATION.HORIZONTAL,
+  });
+</script>
+
+<template>
+  <div
+    :class="[
+      CSS.BORDER.COLOR.LOW,
+      props.orientation === ORIENTATION.HORIZONTAL
+        ? [CSS.MARGIN.Y.HALF, CSS.BORDER.BOTTOM.ONE]
+        : [CSS.MARGIN.X.HALF, CSS.BORDER.RIGHT.ONE],
+    ]"
+  />
+</template>

package/src/components/TideIcon.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+  import { defineAsyncComponent, markRaw, ref, watch } from 'vue';
+
+  import type { Component } from 'vue';
+  import type { Icon } from '@/types/Icon';
+  import type { Size } from '@/types/Size';
+
+  import { CSS } from '@/types/Styles';
+  import { SIZE } from '@/types/Size';
+  import { formatPascalCase } from '@/utilities/format';
+
+  type Props = {
+    icon: Icon;
+    size?: Size;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    size: SIZE.SMALL,
+  });
+
+  const innerSVG = ref<Component>();
+
+  watch(
+    () => props.icon,
+    () => {
+      const id = props.icon as unknown as string;
+      const name = formatPascalCase(id);
+      const component = defineAsyncComponent(() => import(`../assets/svg/icons/Icon${name}.svg`));
+
+      innerSVG.value = markRaw(component);
+    },
+    { immediate: true }
+  );
+</script>
+
+<template>
+  <div :class="['tide-icon', props.size]">
+    <Component
+      :class="[CSS.DISPLAY.BLOCK]"
+      :data-icon="icon"
+      fill="currentColor"
+      :is="innerSVG"
+      v-if="innerSVG"
+    />
+  </div>
+</template>
+
+<style scoped>
+  .tide-icon svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .tide-icon.small svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+</style>

package/src/components/TideImage.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  import { CSS } from '@/types/Styles';
+
+  type Props = {
+    alt?: string;
+    cdn?: string;
+    isLazy?: boolean;
+    offset?: number;
+    src?: string;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    alt: '',
+    cdn: undefined,
+    isLazy: true,
+    offset: 0,
+    src: undefined,
+  });
+
+  const tideImage = ref();
+
+  const imageDefault = `${props.cdn}/image-coming-soon-512.png`;
+
+  const setImageFromDefault = () => {
+    tideImage.value.src = imageDefault;
+  };
+
+  defineExpose(tideImage.value);
+</script>
+
+<template>
+  <img
+    :alt="alt"
+    :class="['tide-image', CSS.OBJECT.CENTER, CSS.OBJECT.COVER]"
+    :loading="isLazy ? 'lazy' : 'eager'"
+    ref="tideImage"
+    :src="src ?? imageDefault"
+    @error="setImageFromDefault"
+  />
+</template>
+
+<style scoped></style>