tide-design-system 2.5.13 → 2.5.14

package/src/components/TidePagination.vue

@@ -1,65 +0,0 @@
-<script lang="ts" setup>
-  import { computed } from 'vue';
-
-  import TideButtonIcon from '@/components/TideButtonIcon.vue';
-  import TideButtonPagination from '@/components/TideButtonPagination.vue';
-  import { ICON } from '@/types/Icon';
-  import { PRIORITY } from '@/types/Priority';
-  import { CSS } from '@/types/Styles';
-
-  type Props = {
-    pageTotal: number;
-  };
-
-  const props = defineProps<Props>();
-
-  const currentIndex = defineModel<number>({ required: true });
-
-  const paginationButtons = computed(() => new Array(props.pageTotal).fill('').map((empty, index) => index + 1));
-
-  const handleClick = (index: number) => {
-    currentIndex.value = index;
-  };
-
-  const handlePreviousClick = () => {
-    currentIndex.value--;
-  };
-
-  const handleNextClick = () => {
-    currentIndex.value++;
-  };
-</script>
-
-<template>
-  <section
-    :class="['tide-pagination', CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.WIDTH.FULL]"
-  >
-    <TideButtonIcon
-      :disabled="currentIndex <= 1"
-      :icon="ICON.CHEVRON_LEFT"
-      :priority="PRIORITY.QUATERNARY"
-      @click="handlePreviousClick"
-    />
-
-    <ul :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.LIST_BULLETS.OFF]">
-      <li
-        :key="paginationButton"
-        v-for="paginationButton in paginationButtons"
-      >
-        <TideButtonPagination
-          :disabled="currentIndex === paginationButton"
-          :label="paginationButton"
-          :priority="PRIORITY.QUATERNARY"
-          @click="handleClick(paginationButton)"
-        />
-      </li>
-    </ul>
-
-    <TideButtonIcon
-      :disabled="currentIndex >= paginationButtons[paginationButtons.length - 1]"
-      :icon="ICON.CHEVRON_RIGHT"
-      :priority="PRIORITY.QUATERNARY"
-      @click="handleNextClick"
-    />
-  </section>
-</template>

package/src/components/TidePopover.vue

@@ -1,198 +0,0 @@
-<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';
-
-  import { CSS } from '@/types/Styles';
-  import { isClickOutside } from '@/utilities/event';
-  import { TOP_LAYER_ID, initFauxTopLayer } from '@/utilities/viewport';
-
-  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;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    offset: 16,
-  });
-
-  const anchor: Ref<HTMLElement | null> = ref(null);
-  const floating: Ref<HTMLElement | null> = ref(null);
-  const root: Ref<HTMLElement | null> = ref(null);
-  const isHovered = ref(false);
-  const isToggledOpen = ref(false);
-  const isTouchDevice = ref(false);
-  const middleware = ref([autoPlacement(), offsetMiddleware({ mainAxis: props.offset }), shift({ padding: 16 })]);
-
-  const isShowPopover = computed(() => isHovered.value || isToggledOpen.value);
-
-  const { floatingStyles } = useFloating(anchor, floating, {
-    middleware,
-    strategy: 'fixed',
-    whileElementsMounted: autoUpdate,
-  });
-
-  const handlePermanentOpenBodyClick = (e: MouseEvent) => {
-    if (!anchor.value || !floating.value) return;
-    if (isClickOutside(e, [anchor.value, floating.value])) {
-      isToggledOpen.value = false;
-      e.preventDefault();
-      e.stopImmediatePropagation();
-    }
-  };
-
-  const handleAnchorElementMouseOver = () => {
-    if (isTouchDevice.value) return;
-    isHovered.value = true;
-  };
-
-  const handleAnchorElementMouseLeave = () => {
-    if (isTouchDevice.value) return;
-    isHovered.value = false;
-  };
-
-  const handleAnchorElementTouchStart = () => {
-    isTouchDevice.value = true;
-  };
-
-  const handleAnchorElementClick = (e: MouseEvent) => {
-    e.preventDefault();
-    if (isToggledOpen.value) {
-      isToggledOpen.value = false;
-      isHovered.value = false;
-    } else {
-      isToggledOpen.value = true;
-    }
-  };
-
-  const addListenersToAnchorElement = () => {
-    if (!anchor.value) return null;
-    anchor.value.addEventListener('touchstart', handleAnchorElementTouchStart, { passive: true });
-    anchor.value.addEventListener('mouseover', handleAnchorElementMouseOver);
-    anchor.value.addEventListener('mouseleave', handleAnchorElementMouseLeave);
-    anchor.value.addEventListener('click', handleAnchorElementClick);
-  };
-
-  const removeListenersFromAnchorElement = () => {
-    if (!anchor.value) return null;
-    anchor.value.removeEventListener('touchstart', handleAnchorElementTouchStart);
-    anchor.value.removeEventListener('mouseover', handleAnchorElementMouseOver);
-    anchor.value.removeEventListener('mouseleave', handleAnchorElementMouseLeave);
-    anchor.value.removeEventListener('click', handleAnchorElementClick);
-  };
-
-  const handlePermanentOpenBodyKeydown = (e: KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      isToggledOpen.value = false;
-    }
-  };
-
-  const addOpenListenersToRoot = () => {
-    if (!root.value) return;
-    root.value.addEventListener('click', handlePermanentOpenBodyClick, true);
-    root.value.addEventListener('keydown', handlePermanentOpenBodyKeydown);
-  };
-
-  const removeOpenListenersFromRoot = () => {
-    if (!root.value) return;
-    root.value.removeEventListener('click', handlePermanentOpenBodyClick, true);
-    root.value.removeEventListener('keydown', handlePermanentOpenBodyKeydown);
-  };
-
-  const updateAnchorElement = () => {
-    anchor.value = document.getElementById(props.anchorId);
-  };
-
-  watch(
-    () => isToggledOpen.value,
-    (newValue) => {
-      if (newValue) {
-        addOpenListenersToRoot();
-      } else {
-        removeOpenListenersFromRoot();
-      }
-    }
-  );
-
-  watch(
-    () => props.anchorId,
-    () => {
-      removeListenersFromAnchorElement();
-      updateAnchorElement();
-      addListenersToAnchorElement();
-    }
-  );
-
-  watchEffect(() => {
-    middleware.value = [autoPlacement(), offsetMiddleware({ mainAxis: props.offset }), shift({ padding: 16 })];
-  });
-
-  onBeforeMount(() => {
-    initFauxTopLayer();
-  });
-
-  onMounted(() => {
-    updateAnchorElement();
-    root.value = document.documentElement;
-    addListenersToAnchorElement();
-  });
-
-  onUnmounted(() => {
-    removeListenersFromAnchorElement();
-  });
-</script>
-
-<template>
-  <Teleport :to="`#${TOP_LAYER_ID}`">
-    <Transition>
-      <div
-        :class="[
-          'tide-popover',
-          CSS.BG.SURFACE.DEFAULT,
-          CSS.BORDER.COLOR.LOW,
-          CSS.BORDER.FULL.ONE,
-          CSS.BORDER.RADIUS.HALF,
-          CSS.FONT.ROLE.BODY_2,
-          CSS.PADDING.FULL.ONE,
-          CSS.SHADOW.BOTTOM,
-        ]"
-        ref="floating"
-        :style="{ ...floatingStyles }"
-        v-show="isShowPopover"
-      >
-        <slot />
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<style scoped>
-  .tide-popover {
-    max-width: 256px;
-  }
-  .v-enter-from,
-  .v-leave-to {
-    opacity: 0;
-  }
-  .v-enter-active,
-  .v-leave-active {
-    transition: opacity var(--tide-animate);
-  }
-  .v-enter-to,
-  .v-leave-from {
-    opacity: 1;
-  }
-</style>

package/src/components/TideRating.vue

@@ -1,109 +0,0 @@
-<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;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    description: undefined,
-    maxRating: 10,
-    showRating: false,
-    title: undefined,
-  });
-
-  const ratingValue = defineModel<number>({ required: true });
-
-  const segments = computed(() => Array.from({ length: props.maxRating }, (_, index) => index + 1));
-
-  const handleClick = (segment: number) => {
-    ratingValue.value = segment;
-  };
-</script>
-
-<template>
-  <div :class="['tide-rating', CSS.WIDTH.FULL]">
-    <section :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.AXIS1.BETWEEN, CSS.PADDING.BOTTOM.HALF]">
-      <div :class="[CSS.FONT.ROLE.LABEL_2]">
-        {{ props.title }}
-      </div>
-      <div
-        :class="[CSS.FONT.ROLE.LABEL_3, CSS.FONT.COLOR.SURFACE.VARIANT]"
-        v-if="props.showRating"
-      >
-        {{ ratingValue }}/{{ props.maxRating }}
-      </div>
-    </section>
-    <section
-      :class="[CSS.FONT.ROLE.BODY_2, CSS.PADDING.BOTTOM.ONE, CSS.OVERFLOW.XY.HIDDEN, CSS.ELLIPSIS]"
-      v-if="props.description"
-    >
-      {{ props.description }}
-    </section>
-
-    <section :class="['tide-rating-bar', CSS.DISPLAY.FLEX, CSS.GAP.QUARTER, CSS.FLEX.GROW.ON, CSS.FLEX.SHRINK.ON]">
-      <button
-        :class="[
-          'tide-rating-segment',
-          CSS.BG.SURFACE.VARIANT,
-          CSS.POSITION.RELATIVE,
-          CSS.OVERFLOW.XY.HIDDEN,
-          CSS.FLEX.GROW.ON,
-          CSS.FLEX.SHRINK.ON,
-          CSS.FLEX.BASIS.ZERO,
-          CSS.BORDER.FULL.ZERO,
-          segment === 1 && ['tide-rating-segment-first'],
-          segment === segments.length && ['tide-rating-segment-last'],
-          segment <= ratingValue && [CSS.BG.SURFACE.GRADIENT],
-        ]"
-        :key="segment"
-        @click="handleClick(segment)"
-        type="button"
-        v-for="segment in segments"
-      />
-    </section>
-  </div>
-</template>
-
-<style scoped>
-  .tide-rating-bar {
-    height: 28px;
-  }
-
-  .tide-rating-segment {
-    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
-  }
-
-  .tide-rating-segment-first {
-    border-top-left-radius: 9999px;
-    border-bottom-left-radius: 9999px;
-    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
-  }
-
-  .tide-rating-segment-last {
-    border-top-right-radius: 9999px;
-    border-bottom-right-radius: 9999px;
-    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
-  }
-</style>

package/src/components/TideRealmLogo.vue

@@ -1,154 +0,0 @@
-<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';
-
-  import { LOGO_HEIGHT, LOGO_WIDTH_LARGE } from '@/types/RealmLogo';
-  import { CSS } from '@/types/Styles';
-  import { getRealmKeyFromRealm } from '@/utilities/realm';
-
-  import type { Realm } from '@/types/Realm';
-  import type { Component } from 'vue';
-
-  type Props = {
-    /** Determines whether to include text in the logo */
-    markOnly?: boolean;
-
-    /** Sets the realm for this logo instance */
-    realm: Realm;
-  };
-  const props = withDefaults(defineProps<Props>(), {
-    markOnly: false,
-  });
-
-  const innerSVG = ref<Component>();
-
-  type CssLengthPixels = `${number}px`;
-  type LogoSize = {
-    height: CssLengthPixels;
-    width: CssLengthPixels;
-  };
-
-  const logoFull = computed<LogoSize>(() => ({
-    height: `${LOGO_HEIGHT.LARGE}px`,
-    width: `${LOGO_WIDTH_LARGE[getRealmKeyFromRealm(props.realm)]}px`,
-  }));
-
-  const logoSmall = computed<LogoSize>(() => {
-    const shrinkFactor = LOGO_HEIGHT.SMALL / LOGO_HEIGHT.LARGE;
-    return {
-      height: `${LOGO_HEIGHT.SMALL}px`,
-      width: `${Math.round(LOGO_WIDTH_LARGE[getRealmKeyFromRealm(props.realm)] * shrinkFactor)}px`,
-    };
-  });
-
-  const logoMark: LogoSize = {
-    height: '32px',
-    width: '32px',
-  } as const;
-
-  watch(
-    () => [props.markOnly, props.realm],
-    async () => {
-      const component = defineAsyncComponent(() => {
-        if (props.markOnly) return import(`../assets/svg/branding/mark/mark-${props.realm}.svg?component`);
-        else return import(`../assets/svg/branding/logo/logo-${props.realm}.svg?component`);
-      });
-      innerSVG.value = markRaw(component);
-    },
-    { immediate: true }
-  );
-</script>
-
-<template>
-  <div
-    :class="['tide-realm-logo', props.markOnly ? 'mark' : 'full']"
-    :style="{
-      '--logo-height-full': logoFull.height,
-      '--logo-height-mark': logoMark.height,
-      '--logo-height-small': logoSmall.height,
-      '--logo-width-full': logoFull.width,
-      '--logo-width-mark': logoMark.width,
-      '--logo-width-small': logoSmall.width,
-    }"
-  >
-    <Component
-      :class="[CSS.DISPLAY.BLOCK]"
-      :is="innerSVG"
-      v-if="innerSVG"
-    />
-  </div>
-</template>
-
-<style scoped>
-  .tide-realm-logo,
-  .tide-realm-logo.large {
-    width: var(--logo-width-full);
-    height: var(--logo-height-full);
-  }
-
-  .tide-realm-logo.small {
-    width: var(--logo-width-small);
-    height: var(--logo-height-small);
-  }
-
-  .tide-realm-logo.mark {
-    width: var(--logo-width-mark);
-    height: var(--logo-height-mark);
-  }
-
-  @media (min-width: 768px) {
-    .tide-realm-logo.sm-small {
-      width: var(--logo-width-small);
-      height: var(--logo-height-small);
-    }
-
-    .tide-realm-logo.sm-large {
-      width: var(--logo-width-full);
-      height: var(--logo-height-full);
-    }
-  }
-
-  @media (min-width: 992px) {
-    .tide-realm-logo.md-small {
-      width: var(--logo-width-small);
-      height: var(--logo-height-small);
-    }
-
-    .tide-realm-logo.md-large {
-      width: var(--logo-width-full);
-      height: var(--logo-height-full);
-    }
-  }
-
-  @media (min-width: 1232px) {
-    .tide-realm-logo.lg-small {
-      width: var(--logo-width-small);
-      height: var(--logo-height-small);
-    }
-
-    .tide-realm-logo.lg-large {
-      width: var(--logo-width-full);
-      height: var(--logo-height-full);
-    }
-  }
-
-  @media (min-width: 1920px) {
-    .tide-realm-logo.xl-small {
-      width: var(--logo-width-small);
-      height: var(--logo-height-small);
-    }
-
-    .tide-realm-logo.xl-large {
-      width: var(--logo-width-full);
-      height: var(--logo-height-full);
-    }
-  }
-</style>

package/src/components/TideSeoLinks.vue

@@ -1,59 +0,0 @@
-<script lang="ts" setup>
-  import InternalBaseLink from '@/components/InternalBaseLink.vue';
-  import { CSS } from '@/types/Styles';
-  import { TARGET } from '@/types/Target';
-
-  import type { Link } from '@/types/Link';
-
-  type Props = {
-    heading?: string;
-    links: Link[];
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    heading: '',
-  });
-</script>
-
-<template>
-  <section class="tide-seo-links">
-    <h2 :class="[CSS.MARGIN.BOTTOM.HALF]">
-      {{ props.heading }}
-    </h2>
-
-    <ul :class="[CSS.DISPLAY.FLEX, CSS.FLEX.WRAP, CSS.GAP.TWO, CSS.LIST_BULLETS.OFF]">
-      <li
-        :class="['tide-seo-link', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.QUARTER, CSS.FONT.ROLE.BODY_2]"
-        :key="link.label"
-        v-for="link in props.links"
-      >
-        <InternalBaseLink
-          :class="[CSS.UNDERLINE.REST.OFF]"
-          :href="link.url"
-          :target="link.isNewTab ? TARGET.BLANK : TARGET.SELF"
-        >
-          {{ link.label }}
-        </InternalBaseLink>
-      </li>
-    </ul>
-  </section>
-</template>
-
-<style scoped>
-  /* TODO: Refactor to accept breakpoint prop in order to accomplish this with neither custom breakpoints nor dependency on ViewportStore. */
-  .tide-seo-link {
-    width: 100%;
-  }
-
-  @media (min-width: 992px) {
-    .tide-seo-link {
-      width: calc((100% - 2rem) / 2);
-    }
-  }
-
-  @media (min-width: 1232px) {
-    .tide-seo-link {
-      width: calc((100% - 6rem) / 4);
-    }
-  }
-</style>