tide-design-system 2.1.11 → 2.1.13

package/src/stories/FoundationsShadow.stories.ts

@@ -1,5 +1,11 @@
 import * as STYLES from '@/types/Storybook';
-import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+import { CSS } from '@/types/Styles';
+import {
+  argTypeBooleanUnrequired,
+  formatArgType,
+  getConstantsByValues,
+  prependNoneAsEmpty,
+} from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
@@ -14,7 +20,8 @@ const formatArgs = (args: any) => {
 const formatClassNames = (args: any) => {
   const classNames: string[] = [];
 
-  if (args.shadow) classNames.push(args.shadow);
+  if (args.box) classNames.push(args.box);
+  if (args.text) classNames.push(CSS.SHADOW.TEXT);
 
   return classNames;
 };
@@ -54,14 +61,20 @@ const render = (args: any) => ({
 
 export default {
   argTypes: {
-    shadow: {
+    box: {
       ...formatArgType({ SHADOW }),
-      description: `Applies a shadow at the element's top or bottom boundary.<br />(Top shadows are for sticky footers only.)`,
-      name: 'Shadow',
+      description: `Applies a shadow at the element's top or bottom boundary or to the text.<br />(Top shadows are for sticky footers.`,
+      name: 'Box Shadow',
+    },
+    text: {
+      ...argTypeBooleanUnrequired,
+      description: `Applies a shadow to the element's text.`,
+      name: 'Text Shadow',
     },
   },
   args: {
-    shadow: SHADOW.None,
+    box: SHADOW.None,
+    text: undefined,
   },
   parameters,
   render,
@@ -73,12 +86,18 @@ export const Default = {};
 
 export const ShadowBottom = {
   args: {
-    shadow: SHADOW['Bottom'],
+    box: SHADOW['Bottom'],
   },
 };
 
 export const ShadowTop = {
   args: {
-    shadow: SHADOW['Top'],
+    box: SHADOW['Top'],
+  },
+};
+
+export const ShadowText = {
+  args: {
+    text: true,
   },
 };

package/src/stories/TideBadge.stories.ts

@@ -1,14 +1,25 @@
 import TideBadge from '@/components/TideBadge.vue';
-import { parameters } from '@/utilities/storybook';
+import * as STANDARD_ICON from '@/types/Icon';
+import { argTypeBooleanUnrequired, formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';
+
+const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
 
 const render = (args: any) => ({
   components: { TideBadge },
   setup: () => ({ args }),
-  template: `<TideBadge class="tide-shadow-bottom" v-bind="args" />`,
+  template: `<TideBadge v-bind="args" />`,
 });
 
 export default {
   argTypes: {
+    iconLeading: {
+      ...formatArgType({ ICON }),
+      description: 'Icon to left of label',
+    },
+    isFloating: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether to display the "Floating" variant styles',
+    },
     label: {
       control: 'text',
       description: 'Badge text',

package/src/stories/TideBadgeVerifiedVehicle.stories.ts

@@ -0,0 +1,20 @@
+import TideBadgeVerifiedVehicle from '@/components/TideBadgeVerifiedVehicle.vue';
+import { parameters } from '@/utilities/storybook';
+
+const render = (args: any) => ({
+  components: { TideBadgeVerifiedVehicle },
+  setup: () => ({ args }),
+  template: `<TideBadgeVerifiedVehicle v-bind="args" />`,
+});
+
+export default {
+  argTypes: {},
+  args: {},
+  component: TideBadgeVerifiedVehicle,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideBadgeVerifiedVehicle',
+};
+
+export const Demo = {};

package/src/types/Badge.ts

@@ -1,21 +1,7 @@
-export const BADGE = {
-  JUST_LISTED: 'Just listed',
-  NATIONWIDE: 'Nationwide',
-  REDUCED: 'Reduced',
-  UPDATED: 'Updated',
-} as const;
-
-export const BADGE_PREMIUM = {
-  PREMIUM: 'Premium',
-  PREMIUM_SELECT: 'Premium SELECT',
-} as const;
-
 export const BADGE_TRUSTED = {
   YEARS_10: '10',
   YEARS_15: '15',
   YEARS_5: '5',
 } as const;
 
-export type Badge = (typeof BADGE)[keyof typeof BADGE];
-export type BadgePremium = (typeof BADGE_PREMIUM)[keyof typeof BADGE_PREMIUM];
 export type BadgeTrustedYears = (typeof BADGE_TRUSTED)[keyof typeof BADGE_TRUSTED];

package/src/types/Styles.ts

@@ -452,6 +452,7 @@ export const CSS = {
     INITIAL: 'tide-shadow-initial',
     BOTTOM: 'tide-shadow-bottom',
     TOP: 'tide-shadow-top',
+    TEXT: 'tide-shadow-text',
   },
   SNAP: {
     ON: 'tide-scroll-snap',

package/dist/IconVerified-04c12500.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n=e.createElementVNode("path",{d:"m8.6 22.5-1.9-3.2-3.6-.8.35-3.7L1 12l2.45-2.8-.35-3.7 3.6-.8 1.9-3.2L12 2.95l3.4-1.45 1.9 3.2 3.6.8-.35 3.7L23 12l-2.45 2.8.35 3.7-3.6.8-1.9 3.2-3.4-1.45-3.4 1.45Zm2.35-6.95L16.6 9.9l-1.4-1.45-4.25 4.25-2.15-2.1L7.4 12l3.55 3.55Z"},null,-1),r=[n];function t(l,s){return e.openBlock(),e.createElementBlock("svg",o,r)}const c={render:t};exports.default=c;exports.render=t;
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvblZlcmlmaWVkLTA0YzEyNTAwLmNqcyIsInNvdXJjZXMiOlsiLi4vc3JjL2Fzc2V0cy9zdmcvaWNvbnMvSWNvblZlcmlmaWVkLnN2ZyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjcmVhdGVFbGVtZW50Vk5vZGUgYXMgX2NyZWF0ZUVsZW1lbnRWTm9kZSwgb3BlbkJsb2NrIGFzIF9vcGVuQmxvY2ssIGNyZWF0ZUVsZW1lbnRCbG9jayBhcyBfY3JlYXRlRWxlbWVudEJsb2NrIH0gZnJvbSBcInZ1ZVwiXG5cbmNvbnN0IF9ob2lzdGVkXzEgPSB7XG4gIHhtbG5zOiBcImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIsXG4gIHZpZXdCb3g6IFwiMCAwIDI0IDI0XCJcbn1cbmNvbnN0IF9ob2lzdGVkXzIgPSAvKiNfX1BVUkVfXyovX2NyZWF0ZUVsZW1lbnRWTm9kZShcInBhdGhcIiwgeyBkOiBcIm04LjYgMjIuNS0xLjktMy4yLTMuNi0uOC4zNS0zLjdMMSAxMmwyLjQ1LTIuOC0uMzUtMy43IDMuNi0uOCAxLjktMy4yTDEyIDIuOTVsMy40LTEuNDUgMS45IDMuMiAzLjYuOC0uMzUgMy43TDIzIDEybC0yLjQ1IDIuOC4zNSAzLjctMy42LjgtMS45IDMuMi0zLjQtMS40NS0zLjQgMS40NVptMi4zNS02Ljk1TDE2LjYgOS45bC0xLjQtMS40NS00LjI1IDQuMjUtMi4xNS0yLjFMNy40IDEybDMuNTUgMy41NVpcIiB9LCBudWxsLCAtMSlcbmNvbnN0IF9ob2lzdGVkXzMgPSBbXG4gIF9ob2lzdGVkXzJcbl1cblxuZXhwb3J0IGZ1bmN0aW9uIHJlbmRlcihfY3R4LCBfY2FjaGUpIHtcbiAgcmV0dXJuIChfb3BlbkJsb2NrKCksIF9jcmVhdGVFbGVtZW50QmxvY2soXCJzdmdcIiwgX2hvaXN0ZWRfMSwgX2hvaXN0ZWRfMykpXG59XG5leHBvcnQgZGVmYXVsdCB7IHJlbmRlcjogcmVuZGVyIH0iXSwibmFtZXMiOlsiX2hvaXN0ZWRfMSIsIl9ob2lzdGVkXzIiLCJfY3JlYXRlRWxlbWVudFZOb2RlIiwiX2hvaXN0ZWRfMyIsInJlbmRlciIsIl9jdHgiLCJfY2FjaGUiLCJfb3BlbkJsb2NrIiwiX2NyZWF0ZUVsZW1lbnRCbG9jayIsIkljb25WZXJpZmllZCJdLCJtYXBwaW5ncyI6InVHQUVNQSxFQUFhLENBQ2pCLE1BQU8sNkJBQ1AsUUFBUyxXQUNYLEVBQ01DLEVBQTBCQyxFQUFBQSxtQkFBb0IsT0FBUSxDQUFFLEVBQUcseU9BQTJPLEtBQU0sRUFBRSxFQUM5U0MsRUFBYSxDQUNqQkYsQ0FDRixFQUVPLFNBQVNHLEVBQU9DLEVBQU1DLEVBQVEsQ0FDbkMsT0FBUUMsRUFBQUEsVUFBWSxFQUFFQyxFQUFtQixtQkFBQyxNQUFPUixFQUFZRyxDQUFVLENBQ3pFLENBQ0EsTUFBZU0sRUFBQSxDQUFFLE9BQVFMLENBQU0ifQ==

package/dist/IconVerified-a78449ea.js

@@ -1,16 +0,0 @@
-import { openBlock as e, createElementBlock as t, createElementVNode as o } from "vue";
-const n = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-}, c = /* @__PURE__ */ o("path", { d: "m8.6 22.5-1.9-3.2-3.6-.8.35-3.7L1 12l2.45-2.8-.35-3.7 3.6-.8 1.9-3.2L12 2.95l3.4-1.45 1.9 3.2 3.6.8-.35 3.7L23 12l-2.45 2.8.35 3.7-3.6.8-1.9 3.2-3.4-1.45-3.4 1.45Zm2.35-6.95L16.6 9.9l-1.4-1.45-4.25 4.25-2.15-2.1L7.4 12l3.55 3.55Z" }, null, -1), l = [
-  c
-];
-function r(s, d) {
-  return e(), t("svg", n, l);
-}
-const _ = { render: r };
-export {
-  _ as default,
-  r as render
-};
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvblZlcmlmaWVkLWE3ODQ0OWVhLmpzIiwic291cmNlcyI6WyIuLi9zcmMvYXNzZXRzL3N2Zy9pY29ucy9JY29uVmVyaWZpZWQuc3ZnIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNyZWF0ZUVsZW1lbnRWTm9kZSBhcyBfY3JlYXRlRWxlbWVudFZOb2RlLCBvcGVuQmxvY2sgYXMgX29wZW5CbG9jaywgY3JlYXRlRWxlbWVudEJsb2NrIGFzIF9jcmVhdGVFbGVtZW50QmxvY2sgfSBmcm9tIFwidnVlXCJcblxuY29uc3QgX2hvaXN0ZWRfMSA9IHtcbiAgeG1sbnM6IFwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIixcbiAgdmlld0JveDogXCIwIDAgMjQgMjRcIlxufVxuY29uc3QgX2hvaXN0ZWRfMiA9IC8qI19fUFVSRV9fKi9fY3JlYXRlRWxlbWVudFZOb2RlKFwicGF0aFwiLCB7IGQ6IFwibTguNiAyMi41LTEuOS0zLjItMy42LS44LjM1LTMuN0wxIDEybDIuNDUtMi44LS4zNS0zLjcgMy42LS44IDEuOS0zLjJMMTIgMi45NWwzLjQtMS40NSAxLjkgMy4yIDMuNi44LS4zNSAzLjdMMjMgMTJsLTIuNDUgMi44LjM1IDMuNy0zLjYuOC0xLjkgMy4yLTMuNC0xLjQ1LTMuNCAxLjQ1Wm0yLjM1LTYuOTVMMTYuNiA5LjlsLTEuNC0xLjQ1LTQuMjUgNC4yNS0yLjE1LTIuMUw3LjQgMTJsMy41NSAzLjU1WlwiIH0sIG51bGwsIC0xKVxuY29uc3QgX2hvaXN0ZWRfMyA9IFtcbiAgX2hvaXN0ZWRfMlxuXVxuXG5leHBvcnQgZnVuY3Rpb24gcmVuZGVyKF9jdHgsIF9jYWNoZSkge1xuICByZXR1cm4gKF9vcGVuQmxvY2soKSwgX2NyZWF0ZUVsZW1lbnRCbG9jayhcInN2Z1wiLCBfaG9pc3RlZF8xLCBfaG9pc3RlZF8zKSlcbn1cbmV4cG9ydCBkZWZhdWx0IHsgcmVuZGVyOiByZW5kZXIgfSJdLCJuYW1lcyI6WyJfaG9pc3RlZF8xIiwiX2hvaXN0ZWRfMiIsIl9jcmVhdGVFbGVtZW50Vk5vZGUiLCJfaG9pc3RlZF8zIiwicmVuZGVyIiwiX2N0eCIsIl9jYWNoZSIsIl9vcGVuQmxvY2siLCJfY3JlYXRlRWxlbWVudEJsb2NrIiwiSWNvblZlcmlmaWVkIl0sIm1hcHBpbmdzIjoiO0FBRUEsTUFBTUEsSUFBYTtBQUFBLEVBQ2pCLE9BQU87QUFBQSxFQUNQLFNBQVM7QUFDWCxHQUNNQyxJQUEwQkMsZ0JBQUFBLEVBQW9CLFFBQVEsRUFBRSxHQUFHLDJPQUEyTyxNQUFNLEVBQUUsR0FDOVNDLElBQWE7QUFBQSxFQUNqQkY7QUFDRjtBQUVPLFNBQVNHLEVBQU9DLEdBQU1DLEdBQVE7QUFDbkMsU0FBUUMsRUFBWSxHQUFFQyxFQUFvQixPQUFPUixHQUFZRyxDQUFVO0FBQ3pFO0FBQ0EsTUFBZU0sSUFBQSxFQUFFLFFBQVFMLEVBQU07In0=

package/src/components/TideBadgePremium.vue

@@ -1,31 +0,0 @@
-<script lang="ts" setup>
-  import { CSS } from '@/types/Styles';
-
-  import type { BadgePremium } from '@/types/Badge';
-
-  type Props = {
-    label: BadgePremium;
-  };
-
-  const props = defineProps<Props>();
-</script>
-
-<template>
-  <div
-    :class="[
-      'tide-badge',
-      CSS.FONT.COLOR.SURFACE.DEFAULT,
-      CSS.BG.SURFACE.VARIANT,
-      CSS.DISPLAY.INLINE_FLEX,
-      CSS.GAP.QUARTER,
-      CSS.BORDER.RADIUS.QUARTER,
-      CSS.PADDING.Y.QUARTER,
-      CSS.PADDING.X.HALF,
-      CSS.FONT.SIZE.TWELVE,
-    ]"
-  >
-    {{ props.label }}
-  </div>
-</template>
-
-<style scoped></style>

package/src/stories/TideBadgePremium.stories.ts

@@ -1,31 +0,0 @@
-import TideBadgePremium from '@/components/TideBadgePremium.vue';
-import { BADGE_PREMIUM } from '@/types/Badge';
-import { formatArgType, parameters } from '@/utilities/storybook';
-
-const render = (args: any) => ({
-  components: { TideBadgePremium },
-  setup: () => ({ args }),
-  template: `<TideBadgePremium v-bind="args" />`,
-});
-
-export default {
-  argTypes: {
-    label: {
-      ...formatArgType({ BADGE_PREMIUM }),
-      description: 'Badge text',
-      table: {
-        defaultValue: { summary: 'Premium' },
-      },
-    },
-  },
-  args: {
-    label: BADGE_PREMIUM.PREMIUM,
-  },
-  component: TideBadgePremium,
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Basic Components/TideBadgePremium',
-};
-
-export const Demo = {};