tide-design-system 2.0.22 → 2.0.23

package/src/components/TideModal.vue

@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+  import { onMounted, ref, watch } from 'vue';
+
+  import TideIcon from '@/components/TideIcon.vue';
+  import { CSS } from '@/types/Styles';
+  import { ICON } from '@/types/Icon';
+
+  type Props = {
+    isOpen: boolean;
+    title?: string;
+    width?: string;
+  };
+
+  const props = defineProps<Props>();
+
+  const emit = defineEmits(['close']);
+
+  const isOpen = ref(props.isOpen);
+  const savedScrollPosition = ref<number | null>(null); // TODO: replace body scroll lock with global structure?
+
+  const handleClose = (event: Event) => {
+    isOpen.value = false;
+
+    updateModalDisplay();
+    emit('close', event);
+  };
+
+  const updateModalDisplay = () => {
+    if (isOpen.value) {
+      savedScrollPosition.value = window.scrollY;
+      document.body.style.overflow = 'hidden';
+      savedScrollPosition.value && window.scrollTo(0, savedScrollPosition.value);
+
+      addOpenListeners();
+    } else {
+      document.body.style.overflow = '';
+
+      removeOpenListeners();
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      handleClose(event);
+    }
+  };
+
+  const addOpenListeners = () => {
+    window.addEventListener('keydown', handleKeyDown);
+  };
+
+  const removeOpenListeners = () => {
+    window.removeEventListener('keydown', handleKeyDown);
+  };
+
+  onMounted(() => {
+    updateModalDisplay();
+  });
+
+  watch(
+    () => props.isOpen,
+    (newValue) => {
+      isOpen.value = newValue;
+      updateModalDisplay();
+    }
+  );
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      :class="[
+        'tide-modal-wrapper',
+        CSS.POSITION.ABSOLUTE,
+        CSS.DISPLAY.FLEX,
+        CSS.AXIS1.CENTER,
+        CSS.AXIS2.CENTER,
+        CSS.POSITIONING.TOP,
+        CSS.POSITIONING.LEFT,
+        CSS.WIDTH.FULL,
+        CSS.HEIGHT.FULL,
+        props.isOpen ? 'active' : CSS.POINTER_EVENTS.OFF,
+        CSS.OVERFLOW.Y.HIDDEN,
+      ]"
+    >
+      <div
+        :class="['tide-modal-bg', CSS.POSITION.ABSOLUTE, CSS.WIDTH.FULL, CSS.HEIGHT.FULL]"
+        :style="{ '--tide-modal-width': props.width }"
+        @click.self="handleClose"
+      />
+
+      <div
+        :class="[
+          'tide-modal',
+          CSS.BG.SURFACE.DEFAULT,
+          CSS.FONT.COLOR.SURFACE.DEFAULT,
+          CSS.POSITION.ABSOLUTE,
+          CSS.DISPLAY.FLEX,
+          CSS.FLEX.DIRECTION.COLUMN,
+          CSS.BORDER.RADIUS.ONE,
+          CSS.OVERFLOW.XY.HIDDEN,
+          CSS.SHADOW.BOTTOM,
+        ]"
+      >
+        <header
+          :class="[
+            'tide-modal-header',
+            CSS.POSITION.RELATIVE,
+            CSS.DISPLAY.FLEX,
+            CSS.AXIS2.CENTER,
+            CSS.PADDING.Y.ONE,
+            CSS.PADDING.X.TWO,
+            CSS.BORDER.BOTTOM.ONE,
+            CSS.BORDER.COLOR.LOW,
+          ]"
+        >
+          <div
+            :class="[CSS.FLEX.GROW.ON, CSS.FONT.SIZE.TWENTY, CSS.FONT.WEIGHT.SEVEN_HUNDRED]"
+            v-if="title"
+          >
+            {{ title }}
+          </div>
+
+          <button
+            :class="[CSS.POSITION.ABSOLUTE, CSS.POSITIONING.RIGHT, CSS.MARGIN.RIGHT.TWO]"
+            @click="handleClose"
+            title="Close"
+          >
+            <TideIcon :icon="ICON.CLOSE" />
+          </button>
+        </header>
+
+        <div :class="['tide-modal-content', CSS.PADDING.FULL.TWO, CSS.OVERFLOW.Y.AUTO]">
+          <slot />
+        </div>
+
+        <template v-if="$slots.footer">
+          <footer
+            :class="[
+              'tide-bg-surface',
+              CSS.POSITION.STICKY,
+              CSS.POSITIONING.LEFT,
+              CSS.POSITIONING.BOTTOM,
+              CSS.DISPLAY.FLEX,
+              CSS.AXIS1.END,
+              CSS.GAP.ONE,
+              CSS.PADDING.X.TWO,
+              CSS.PADDING.Y.ONE,
+              CSS.SHADOW.TOP,
+            ]"
+          >
+            <slot name="footer" />
+          </footer>
+        </template>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+  .tide-modal {
+    width: var(--tide-modal-width);
+    max-width: calc(100% - 2rem);
+    max-height: calc(100% - 2rem);
+    box-shadow: 0px 10px 25px 0px rgba(18, 43, 58, 0.2);
+    transform: translateY(100vh);
+    transition: var(--tide-animate);
+    transition-property: transform;
+  }
+
+  .tide-modal-bg {
+    backdrop-filter: blur(0px);
+    background-color: rgba(255, 255, 255, 0);
+    transition: var(--tide-animate);
+    transition-property: backdrop-filter, background-color;
+  }
+
+  .active .tide-modal {
+    transform: translateY(0);
+  }
+
+  .active .tide-modal-bg {
+    backdrop-filter: blur(8px);
+    background-color: var(--tide-transparent-400);
+  }
+</style>

package/src/components/TidePagination.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+
+  import TideButtonIcon from '@/components/TideButtonIcon.vue';
+  import TideButtonPagination from '@/components/TideButtonPagination.vue';
+  import { CSS } from '@/types/Styles';
+  import { ICON } from '@/types/Icon';
+  import { PRIORITY } from '@/types/Priority';
+
+  type Props = {
+    pageCurrent?: number;
+    pageTotal?: number;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    pageCurrent: 1,
+    pageTotal: 1,
+  });
+
+  const emit = defineEmits(['change']);
+
+  const pageCurrent = ref(props.pageCurrent);
+
+  const paginationButtons = computed(() => new Array(props.pageTotal).fill('').map((empty, index) => index + 1));
+
+  const handleClick = (event: Event, index: number) => {
+    pageCurrent.value = index;
+
+    emit('change', event, index);
+  };
+</script>
+
+<template>
+  <section
+    :class="['tide-pagination', CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.WIDTH.FULL]"
+  >
+    <TideButtonIcon
+      :disabled="pageCurrent === 1"
+      :icon="ICON.CHEVRON_LEFT"
+      :priority="PRIORITY.QUATERNARY"
+      @click="(event: Event) => handleClick(event, pageCurrent - 1)"
+    />
+
+    <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="pageCurrent === paginationButton"
+          :label="paginationButton"
+          :priority="PRIORITY.QUATERNARY"
+          @click="(event: Event) => handleClick(event, paginationButton)"
+        />
+      </li>
+    </ul>
+
+    <TideButtonIcon
+      :disabled="pageCurrent === paginationButtons[paginationButtons.length - 1]"
+      :icon="ICON.CHEVRON_RIGHT"
+      :priority="PRIORITY.QUATERNARY"
+      @click="(event: Event) => handleClick(event, pageCurrent + 1)"
+    />
+  </section>
+</template>
+
+<style scoped></style>

package/src/components/TideSeoLinks.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+  import type { Link } from '@/types/Link';
+
+  import { CSS } from '@/types/Styles';
+  import { TARGET } from '@/types/Target';
+
+  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, 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-seo-link', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.QUARTER, CSS.FONT.SIZE.FOURTEEN]"
+        :key="link.label"
+        v-for="link in props.links"
+      >
+        <a
+          :class="[CSS.UNDERLINE.OFF]"
+          :href="link.url"
+          :target="link.isNewTab ? TARGET.BLANK : TARGET.SELF"
+        >
+          {{ link.label }}
+        </a>
+      </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>

package/src/components/TideTabs.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  import type { Tab } from '@/types/Tab';
+
+  import { CSS } from '@/types/Styles';
+
+  type Props = {
+    activeTabInitial?: number;
+    tabs: Tab[];
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    activeTabInitial: 0,
+  });
+
+  const emit = defineEmits(['change']);
+
+  const activeTab = ref(props.activeTabInitial);
+
+  const handleClick = (event: Event, index: number) => {
+    activeTab.value = index;
+
+    emit('change', event, index);
+  };
+</script>
+
+<template>
+  <div
+    :class="[
+      'tide-tabs',
+      CSS.BG.SURFACE.VARIANT,
+      CSS.DISPLAY.FLEX,
+      CSS.GAP.QUARTER,
+      CSS.BORDER.RADIUS.HALF,
+      CSS.PADDING.FULL.QUARTER,
+      CSS.OVERFLOW.XY.HIDDEN,
+      CSS.WIDTH.FULL,
+    ]"
+  >
+    <button
+      :class="[
+        'tide-tabs-tab',
+        index === activeTab
+          ? [CSS.BG.SURFACE.DEFAULT, CSS.FONT.COLOR.SURFACE.DEFAULT, CSS.SHADOW.BOTTOM]
+          : ['inactive', CSS.FONT.COLOR.SURFACE.VARIANT],
+        CSS.FLEX.GROW.ON,
+        CSS.BORDER.RADIUS.QUARTER,
+        CSS.PADDING.Y.QUARTER,
+        CSS.WIDTH.FULL,
+        CSS.FONT.WEIGHT.SIX_HUNDRED,
+        CSS.WHITESPACE_WRAP.OFF,
+      ]"
+      :data-track="tab.dataTrack || undefined"
+      :key="tab.label"
+      @click="(event: Event) => handleClick(event, index)"
+      v-for="(tab, index) in props.tabs"
+    >
+      <span :class="[CSS.FONT.WEIGHT.SIX_HUNDRED]">
+        {{ tab.label }}
+      </span>
+      <span
+        :class="[CSS.FONT.WEIGHT.SIX_HUNDRED]"
+        v-if="tab.count && tab.count > 0"
+      >
+        ({{ tab.count }})
+      </span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+  .tide-tabs {
+    max-width: 23.3rem;
+  }
+
+  .tide-tabs-tab {
+    flex: 1;
+    transition: background-color var(--tide-animate);
+  }
+
+  .inactive:not(:hover) {
+    border: 1px solid var(--tide-surface-variant);
+  }
+
+  .inactive:hover {
+    border: 1px solid var(--tide-border);
+  }
+</style>

package/src/components/TideToggle.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  import TideIcon from '@/components/TideIcon.vue';
+  import { CSS } from '@/types/Styles';
+  import { ICON } from '@/types/Icon';
+  import { SIZE } from '@/types/Size';
+
+  const props = defineProps({
+    disabled: {
+      default: false,
+      required: false,
+      type: Boolean,
+    },
+    isActive: {
+      required: true,
+      type: Boolean,
+    },
+  });
+
+  const emit = defineEmits(['change']);
+
+  const isActive = ref(props.isActive);
+
+  const handleClick = (event: Event) => {
+    if (!props.disabled) {
+      isActive.value = !isActive.value;
+
+      emit('change', event, isActive.value);
+    }
+  };
+</script>
+
+<template>
+  <button
+    :class="[
+      'tide-toggle',
+      props.isActive ? 'active' : '',
+      CSS.DISPLAY.FLEX,
+      CSS.AXIS2.CENTER,
+      CSS.BORDER.FULL.ONE,
+      CSS.BORDER.RADIUS.FULL,
+      props.isActive ? '' : CSS.BORDER.COLOR.DEFAULT,
+      CSS.OVERFLOW.XY.HIDDEN,
+      props.isActive ? CSS.BG.SECONDARY : CSS.BG.SURFACE.DEFAULT,
+    ]"
+    :disabled="props.disabled"
+    @click="handleClick"
+    aria-label="Toggle"
+  >
+    <div
+      :class="[
+        'tide-toggle-indicator',
+        CSS.POSITION.RELATIVE,
+        CSS.DISPLAY.FLEX,
+        CSS.AXIS1.CENTER,
+        CSS.AXIS2.CENTER,
+        CSS.BORDER.RADIUS.FULL,
+        props.isActive ? CSS.BG.SURFACE.DEFAULT : CSS.BG.SECONDARY,
+      ]"
+    >
+      <TideIcon
+        :icon="ICON.CHECK"
+        :size="SIZE.LARGE"
+      />
+    </div>
+  </button>
+</template>
+
+<style scoped>
+  .tide-toggle {
+    width: 64px;
+    height: 32px;
+    transition: var(--tide-animate);
+    transition-property: background-color;
+  }
+
+  .tide-toggle:disabled {
+    opacity: 0.32;
+  }
+
+  .tide-toggle.active {
+    border-color: var(--tide-secondary);
+  }
+
+  .tide-toggle.active .tide-toggle-indicator {
+    left: 36px;
+  }
+
+  .tide-toggle-indicator {
+    left: 4px;
+    transition: var(--tide-animate);
+    transition-property: left, border-color, background-color;
+  }
+</style>

package/src/docs/development.md

@@ -0,0 +1,51 @@
+# TIDE Development
+
+## Local Integration
+Run a local instance of `tide-design-system` in parallel with a local consumer project to preview changes prior to publishing a revision to the NPM Registrty.
+
+1. Clone repository:
+
+    `git clone git@github.com:traderinteractive/tide-design-system.git`
+
+2. Install packages:
+
+    `cd tide-design-system`
+
+    `npm install`
+
+3. Generate distribution files:
+
+    `npm build`
+
+4. From TIDE directory, create local package alias:
+
+    `npm link`
+
+5. From consumer directory. leverage local package alias:
+
+   `npm link tide-design-system`
+
+## Scripts
+-  `npm run build`: Generate package.
+-  `npm run build-storybook`: Generate Storybook UI.
+-  `npm run coverage`: Display unit test statistics.
+-  `npm run lint`: Display ESLint issues.
+-  `npm run lint:fix`: Autofix ESLint issues where available.
+-  `npm run preview`: Serve Storybook UI in production mode.
+-  `npm run storybook`: Serve Storybook UI in development mode.
+-  `npm run test`: Run unit test suite.
+-  `npm run type-check`: Detect TypeScript errors.
+
+## Publication (TIDE Task Force devs only)
+1. Test via local integration (see above)
+2. Increment version
+
+   \# Non-backward compatible release
+
+   #.# Backward compatible feature
+
+   #.#.# Backward compatible bugfix
+
+3. Publish (RESTRICTED)
+
+    `npm publish`

package/src/docs/integration.md

@@ -0,0 +1,79 @@
+# TIDE Prod Integration
+1. Install dependency from Node Package Manager Registry:
+
+   `npm install tide-design-system`
+
+2. Use CSS utilities:
+   1. Import global utilities:
+
+      `import 'tide-design-system/css';`
+
+   2. Import realm-specific utilities (where applicable):
+
+      `import 'tide-design-system/css/realm/aero';`
+
+      `import 'tide-design-system/css/realm/atv';`
+
+      `import 'tide-design-system/css/realm/boatmart';`
+
+      `import 'tide-design-system/css/realm/cycle';`
+
+      `import 'tide-design-system/css/realm/equip';`
+
+      `import 'tide-design-system/css/realm/pwc';`
+
+      `import 'tide-design-system/css/realm/snow';`
+
+      `import 'tide-design-system/css/realm/truck';`
+
+   3. Import TypeScript constant:
+
+      `import { CSS } from 'tide-design-system';`
+
+   4. Leverage:
+
+      `<div :class="[CSS.POSITION.ABSOLUTE]" />`
+
+   5. Via CSS directly (only when markup is outside a JS framework):
+
+      `<div class="tide-position-absolute" />`
+
+   6. Apply classes responsively:
+   
+      `<div :class=[CSS.DISPLAY.NONE, withBreakpoint([CSS.DISPLAY.FLEX], BREAKPOINT.MD)] />`
+
+3. Use TypeScript types:
+   1. Import:
+
+      `import type { Priority } from 'tide-design-system';`
+
+   2. Leverage:
+
+      ```
+      type Sample = {
+         ...
+         priority: Priority;
+      };
+      ```
+
+      ```
+      const setPriority = (priority: Priority) => {...};
+      ```
+
+4. Leverage TypeScript constants:
+   1. Import:
+
+      `import { PRIORITY } from 'tide-design-system';`
+
+   2. Leverage:
+
+      `<div :priority="PRIORITY.QUATERNARY">Sample</div>`
+
+5. Use Vue 3 component(s):
+   1. Import:
+
+      `import { TideButton } from 'tide-design-system';`
+
+   2. Leverage:
+
+      `<TideButton label="Sample" />`

package/src/docs/storybook.md

@@ -0,0 +1,39 @@
+# TIDE Storybook
+
+Storybook is a frontend workshop for building, testing, and documenting UI components and styles in isolation.
+
+## Benefits
+
+The TIDE Storybook was implemented to facilitate collaboration between 3 primary departments within the Trader Interactive development group:
+- **Product Managers** can reference our components library when writing requirements for new pages and features.
+- **Designers** can interact with our components in real browser conditions independent from any specific context in our websites.
+- **Engineers** can leverage our components without having to become reacquinted with formatting standards, styling structures, or complex prop implementations.
+
+## TODO
+- based in stories
+- args -> props, etc.
+
+## Public
+
+The TIDE Storybook UI is currently hosted from Netlify, a free, third-party platform connected to the Trader developer's personal GitHub fork. This is a temporary measure, to be replaced by a permanent solution that integrates the private server deployment process into the `tide-design-system` repository of the `traderinteractive` GitHub account for hosting to users within the Trader VPN.
+
+https://tide-design-system.netlify.app
+
+## Local Setup
+
+1. Install dependencies:
+
+   `npm install`
+
+2. Run demo:
+
+   `npm run storybook`
+
+## Storybook UI
+
+1. **Sidebar** serves as table of contents along the left edge of the screen
+2. **Toolbar** offers project-level controls across the top of the screen
+3. **Canvas** contains an interactive demo
+4. **Code snippet** displays live-updated markup implementation available to copy
+5. **Controls** determine the options passed into demo and code snippet
+6. **Stories** demonstrate all major features of a given structure