tide-design-system 2.0.48 → 2.0.49

package/dist/utilities/storybook.ts

@@ -1,6 +1,6 @@
-import type { ArgTypes } from '@storybook/vue3';
+import type { ArgTypes, StoryContext } from '@storybook/vue3';
 
-import { BOOLEAN, BOOLEAN_UNREQUIRED } from '@/types/Storybook';
+import { BOOLEAN, BOOLEAN_UNREQUIRED, NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
 import { CSS } from '@/types/Styles';
 import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
 
@@ -12,10 +12,7 @@ type KeyValueNamed = {
   [key: string]: KeyValue;
 };
 
-import type { StoryContext } from '@storybook/vue3';
-
 import { formatKebabCase } from '@/utilities/format';
-import { NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
 
 export const lineBreak = '\r';
 export const tab = '  ';

package/index.ts

@@ -48,8 +48,8 @@ import type {
   SelectField,
   StringField,
   StringValue,
-  TextField,
   TextareaField,
+  TextField,
 } from '@/types/Field';
 import type {
   BooleanInput,
@@ -58,8 +58,8 @@ import type {
   Input,
   SelectInput,
   StringInput,
-  TextInput,
   TextareaInput,
+  TextInput,
 } from '@/types/Form';
 import type { Formatted } from '@/types/Formatted';
 import type { Icon } from '@/types/Icon';
@@ -71,12 +71,12 @@ import type { Raw } from '@/types/Raw';
 import type { Realm } from '@/types/Realm';
 import type { RealmConfig } from '@/types/RealmConfig';
 import type { SelectOption, SelectOptionGroup } from '@/types/Select';
-import type { Size } from '@/types/Size';
+import type { Size, SizeButton } from '@/types/Size';
 import type { CssUtility } from '@/types/Styles';
 import type { Tab } from '@/types/Tab';
 import type { Target } from '@/types/Target';
 import type { TextInputType } from '@/types/TextInput';
-import type { ValidationError, ValidationResult, ValidationLength, Validator } from '@/types/Validation';
+import type { ValidationError, ValidationLength, ValidationResult, Validator } from '@/types/Validation';
 
 import { ALERT } from '@/types/Alert';
 import { BADGE, BADGE_PREMIUM, BADGE_TRUSTED } from '@/types/Badge';
@@ -90,7 +90,7 @@ import { ORIENTATION } from '@/types/Orientation';
 import { POSITION_CARD_ICON, TYPE_CARD } from '@/types/Card';
 import { PRIORITY } from '@/types/Priority';
 import { REALM } from '@/types/Realm';
-import { SIZE } from '@/types/Size';
+import { SIZE, SIZE_BUTTON } from '@/types/Size';
 import { TARGET } from '@/types/Target';
 import { TEXT_INPUT_TYPE } from '@/types/TextInput';
 import { VALIDATOR } from '@/types/Validation';
@@ -139,6 +139,7 @@ export type {
   SelectOptionGroup,
   SelectOption,
   Size,
+  SizeButton,
   StringField,
   StringInput,
   StringValue,
@@ -177,6 +178,7 @@ export {
   PRIORITY,
   REALM,
   SIZE,
+  SIZE_BUTTON,
   TARGET,
   TEXT_INPUT_TYPE,
   TYPE_CARD,

package/package.json

@@ -18,6 +18,8 @@
     "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/test-utils": "^2.0.0-rc.18",
     "@vue/tsconfig": "^0.4.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "^9.9.0",
     "happy-dom": "^15.10.2",
@@ -55,5 +57,5 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.0.48"
+  "version": "2.0.49"
 }

package/src/assets/css/dynamic-buttons.css

@@ -1,15 +1,3 @@
-.tide-link-as-button,
-.tide-button {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
-.tide-link-as-button.tide-button-quaternary,
-.tide-button.tide-button-quaternary {
-  padding-right: 1rem;
-  padding-left: 1rem;
-}
-
 /* Rest State */
 .tide-button-primary {
   background: var(--tide-primary);

package/src/assets/css/reset.css

@@ -1,6 +1,7 @@
 body {
   color: var(--tide-on-surface);
   font-weight: 500;
+  line-height: 1.4;
 }
 
 *,
@@ -13,6 +14,7 @@ body {
   color: inherit;
   font-family: Montserrat;
   font-weight: inherit;
+  line-height: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-underline-offset: .2em;
@@ -44,7 +46,6 @@ img {
 
 p {
   max-width: 80ch;
-  line-height: 150%;
 }
 
 button,

package/src/assets/css/utilities.css

@@ -289,7 +289,7 @@
 
 .tide-isolate {isolation: isolate;}
 
-.tide-leading-default {line-height: 100%;}
+.tide-leading-default {line-height: 1.4;}
 .tide-leading-normal  {line-height: normal;}
 
 .tide-list-none {list-style-type: none;}
@@ -655,7 +655,7 @@
 
   .sm-tide-isolate {isolation: isolate;}
 
-  .sm-tide-leading-default {line-height: 100%;}
+  .sm-tide-leading-default {line-height: 1.4;}
   .sm-tide-leading-normal  {line-height: normal;}
 
   .sm-tide-list-none {list-style-type: none;}
@@ -1022,7 +1022,7 @@
 
   .md-tide-isolate {isolation: isolate;}
 
-  .md-tide-leading-default {line-height: 100%;}
+  .md-tide-leading-default {line-height: 1.4;}
   .md-tide-leading-normal  {line-height: normal;}
 
   .md-tide-list-none {list-style-type: none;}
@@ -1389,7 +1389,7 @@
 
   .lg-tide-isolate {isolation: isolate;}
 
-  .lg-tide-leading-default {line-height: 100%;}
+  .lg-tide-leading-default {line-height: 1.4;}
   .lg-tide-leading-normal  {line-height: normal;}
 
   .lg-tide-list-none {list-style-type: none;}
@@ -1756,7 +1756,7 @@
 
   .xl-tide-isolate {isolation: isolate;}
 
-  .xl-tide-leading-default {line-height: 100%;}
+  .xl-tide-leading-default {line-height: 1.4;}
   .xl-tide-leading-normal  {line-height: normal;}
 
   .xl-tide-list-none {list-style-type: none;}

package/src/assets/svg/icons/IconBunkhouse.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M5.95 21a.87.87 0 0 1-.75-.39.94.94 0 0 1-.15-.84L9.5 3.7a.98.98 0 0 1 .35-.51.93.93 0 0 1 .58-.19c.33 0 .59.13.77.39.18.26.23.53.15.83L10.85 6h5.63l.62-2.3a.99.99 0 0 1 .95-.7c.32 0 .57.13.75.39.18.26.23.53.15.83L14.5 20.3a.98.98 0 0 1-.35.51.93.93 0 0 1-.58.19.9.9 0 0 1-.77-.39.95.95 0 0 1-.15-.84l.5-1.77H7.53l-.63 2.3a.99.99 0 0 1-.95.7Zm3.53-10h5.6l.82-3h-5.6l-.82 3ZM8.1 16h5.6l.83-3h-5.6l-.83 3Z" />
+</svg>

package/src/components/TideButton.vue

@@ -7,7 +7,7 @@
   import { CSS } from '@/types/Styles';
   import { ELEMENT } from '@/types/Element';
   import { PRIORITY } from '@/types/Priority';
-  import { SIZE } from '@/types/Size';
+  import { SIZE, SIZE_BUTTON, type SizeButton } from '@/types/Size';
   import { TARGET } from '@/types/Target';
 
   type Props = {
@@ -19,6 +19,7 @@
     isNewTab?: boolean;
     label: string;
     priority?: Priority;
+    size?: SizeButton;
   };
 
   const props = withDefaults(defineProps<Props>(), {
@@ -30,19 +31,23 @@
     isNewTab: false,
     label: undefined,
     priority: PRIORITY.PRIMARY,
+    size: SIZE_BUTTON.LARGE,
   });
 </script>
 
 <template>
   <component
     :class="[
-      props.element === ELEMENT.LINK ? 'tide-link-as-button' : 'tide-button',
+      'tide-button',
       props.priority && `tide-button-${props.priority}`,
       props.element === ELEMENT.LINK ? [CSS.DISPLAY.INLINE_FLEX] : [CSS.DISPLAY.FLEX],
-      [CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.HALF, CSS.BORDER.RADIUS.HALF],
       props.element === ELEMENT.LINK ? CSS.UNDERLINE.OFF : '',
-      CSS.PADDING.Y.ONE,
-      CSS.PADDING.X.TWO,
+      size === SIZE_BUTTON.SMALL && [CSS.FONT.ROLE.BUTTON_2, CSS.PADDING.X.ONE, CSS.PADDING.Y.HALF],
+      size === SIZE_BUTTON.LARGE && [CSS.FONT.ROLE.BUTTON_1, CSS.PADDING.X.TWO, CSS.PADDING.Y.ONE],
+      CSS.AXIS1.CENTER,
+      CSS.AXIS2.CENTER,
+      CSS.GAP.HALF,
+      CSS.BORDER.RADIUS.HALF,
       CSS.FONT.WEIGHT.SIX_HUNDRED,
     ]"
     :disabled="props.element === ELEMENT.BUTTON && props.disabled"
@@ -52,7 +57,7 @@
   >
     <TideIcon
       :icon="props.iconLeading"
-      :size="SIZE.LARGE"
+      :size="size === SIZE_BUTTON.LARGE ? SIZE.LARGE : SIZE.SMALL"
       v-if="props.iconLeading"
     />
 
@@ -60,7 +65,7 @@
 
     <TideIcon
       :icon="props.iconTrailing"
-      :size="SIZE.LARGE"
+      :size="size === SIZE_BUTTON.LARGE ? SIZE.LARGE : SIZE.SMALL"
       v-if="props.iconTrailing"
     />
   </component>

package/src/components/TideCard.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-  import { POSITION_CARD_ICON, TYPE_CARD, type CardIconPosition, type CardType } from '@/types/Card';
+  import type { CardIconPosition, CardType } from '@/types/Card';
   import type { Icon } from '@/types/Icon';
+
+  import TideIcon from '@/components/TideIcon.vue';
   import { CSS } from '@/types/Styles';
+  import { POSITION_CARD_ICON, TYPE_CARD } from '@/types/Card';
   import { SIZE } from '@/types/Size';
-  import TideIcon from '@/components/TideIcon.vue';
 
   type Props = {
     description?: string;
@@ -12,10 +14,12 @@
     iconPosition: CardIconPosition;
     selected?: boolean;
     type: CardType;
+    href?: string;
   };
 
   withDefaults(defineProps<Props>(), {
     description: undefined,
+    href: undefined,
     icon: undefined,
     iconPosition: POSITION_CARD_ICON.LEFT,
     selected: undefined,
@@ -41,16 +45,20 @@
       type !== TYPE_CARD.INFORMATIONAL && 'hoverable',
       type === TYPE_CARD.SELECTABLE && selected && 'selected',
     ]"
-    :is="type === TYPE_CARD.INFORMATIONAL ? 'div' : 'button'"
+    :href="href"
+    :is="href ? 'a' : type === TYPE_CARD.INFORMATIONAL ? 'div' : 'button'"
   >
     <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_1_SEMIBOLD, CSS.FONT.COLOR.SURFACE.DEFAULT]">
+        {{ heading }}
+      </div>
 
       <div
         :class="[CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]"

package/src/components/TideColumns.vue

@@ -12,7 +12,9 @@
 
 <template>
   <section class="tide-columns">
-    <h2 :class="[CSS.MARGIN.BOTTOM.HALF, CSS.FONT.SIZE.SIXTEEN]">{{ props.heading }}</h2>
+    <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">

package/src/components/TideInputSelect.vue

@@ -8,7 +8,7 @@
   import { CSS } from '@/types/Styles';
   import { ICON } from '@/types/Icon';
   import { SIZE } from '@/types/Size';
-  import { getFieldHasError, getErrorMessage } from '@/utilities/validation';
+  import { getErrorMessage, getFieldHasError } from '@/utilities/validation';
 
   interface Props extends SelectField {
     inputId?: string;

package/src/stories/FoundationsGap.stories.ts

@@ -1,8 +1,12 @@
 import type { StoryContext } from '@storybook/vue3';
 
 import * as STYLES from '@/types/Storybook';
-import { argTypeBooleanUnrequired } from '@/utilities/storybook';
-import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+import {
+  argTypeBooleanUnrequired,
+  formatArgType,
+  getConstantsByValues,
+  prependNoneAsEmpty,
+} from '@/utilities/storybook';
 
 const FLEX_AXIS1 = prependNoneAsEmpty(STYLES.FLEX_AXIS1);
 const FLEX_AXIS2 = prependNoneAsEmpty(STYLES.FLEX_AXIS2);

package/src/stories/TideButton.stories.ts

@@ -3,6 +3,7 @@ import { action } from '@storybook/addon-actions';
 import * as STANDARD_ELEMENT from '@/types/Element';
 import * as STANDARD_ICON from '@/types/Icon';
 import * as STANDARD_PRIORITY from '@/types/Priority';
+import * as STANDARD_SIZE_BUTTON from '@/types/Size';
 import TideButton from '@/components/TideButton.vue';
 import {
   argTypeBooleanUnrequired,
@@ -17,6 +18,7 @@ import {
 const ELEMENT = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT);
 const ICON = prependNoneAsUndefined(STANDARD_ICON.ICON);
 const PRIORITY = prependNoneAsUndefined(STANDARD_PRIORITY.PRIORITY);
+const SIZE_BUTTON = prependNoneAsUndefined(STANDARD_SIZE_BUTTON.SIZE_BUTTON);
 
 const render = (args: any) => ({
   components: { TideButton },
@@ -95,6 +97,13 @@ export default {
         defaultValue: { summary: 'PRIMARY' },
       },
     },
+    size: {
+      ...formatArgType({ SIZE_BUTTON }),
+      description: 'Determines rendered size',
+      table: {
+        defaultValue: { summary: 'LARGE' },
+      },
+    },
   },
   args: {
     click: 'doSomething',
@@ -107,6 +116,7 @@ export default {
     isNewTab: undefined,
     label: 'Demo',
     priority: undefined,
+    size: undefined,
   },
   component: TideButton,
   parameters,

package/src/stories/TideCard.stories.ts

@@ -3,8 +3,14 @@ import { action } from '@storybook/addon-actions';
 import TideCard from '@/components/TideCard.vue';
 import { ICON } from '@/types/Icon';
 import { POSITION_CARD_ICON as STANDARD_POSITION_CARD_ICON, TYPE_CARD as STANDARD_TYPE_CARD } from '@/types/Card';
-import { argTypeBooleanUnrequired, click, doSomething } from '@/utilities/storybook';
-import { parameters, prependNoneAsUndefined, formatArgType } from '@/utilities/storybook';
+import {
+  argTypeBooleanUnrequired,
+  click,
+  doSomething,
+  formatArgType,
+  parameters,
+  prependNoneAsUndefined,
+} from '@/utilities/storybook';
 
 const TYPE_CARD = prependNoneAsUndefined(STANDARD_TYPE_CARD);
 const POSITION_CARD_ICON = prependNoneAsUndefined(STANDARD_POSITION_CARD_ICON);

package/src/stories/TideIcon.stories.ts

@@ -1,5 +1,4 @@
-import { ICON as STANDARD_ICON } from '@/types/Icon';
-import { ICON_REALM as STANDARD_ICON_REALM } from '@/types/Icon';
+import { ICON as STANDARD_ICON, ICON_REALM as STANDARD_ICON_REALM } from '@/types/Icon';
 import * as STANDARD_SIZE from '@/types/Size';
 import TideIcon from '@/components/TideIcon.vue';
 import { formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';

package/src/types/Field.ts

@@ -1,5 +1,5 @@
 import type { FormValueTransformer } from '@/types/Form';
-import type { SelectOptionGroup, SelectOption } from '@/types/Select';
+import type { SelectOption, SelectOptionGroup } from '@/types/Select';
 import type { TextInputType } from '@/types/TextInput';
 import type { ValidationError, Validator } from '@/types/Validation';
 

package/src/types/Form.ts

@@ -1,4 +1,4 @@
-import type { SelectOptionGroup, SelectOption } from '@/types/Select';
+import type { SelectOption, SelectOptionGroup } from '@/types/Select';
 import type { TextInputType } from '@/types/TextInput';
 import type { ValidationError, Validator } from '@/types/Validation';
 

package/src/types/Icon.ts

@@ -14,6 +14,7 @@ export const ICON = {
   AWARD_STAR: 'award-star',
   BED: 'bed',
   BOOKMARK: 'bookmark',
+  BUNKHOUSE: 'bunkhouse',
   CALENDAR_MONTH: 'calendar-month',
   CALL: 'call',
   CHECK: 'check',

package/src/types/Size.ts

@@ -4,3 +4,10 @@ export const SIZE = {
 } as const;
 
 export type Size = (typeof SIZE)[keyof typeof SIZE];
+
+export const SIZE_BUTTON = {
+  LARGE: 'large',
+  SMALL: 'small',
+} as const;
+
+export type SizeButton = (typeof SIZE)[keyof typeof SIZE];

package/src/utilities/storybook.ts

@@ -1,6 +1,6 @@
-import type { ArgTypes } from '@storybook/vue3';
+import type { ArgTypes, StoryContext } from '@storybook/vue3';
 
-import { BOOLEAN, BOOLEAN_UNREQUIRED } from '@/types/Storybook';
+import { BOOLEAN, BOOLEAN_UNREQUIRED, NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
 import { CSS } from '@/types/Styles';
 import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
 
@@ -12,10 +12,7 @@ type KeyValueNamed = {
   [key: string]: KeyValue;
 };
 
-import type { StoryContext } from '@storybook/vue3';
-
 import { formatKebabCase } from '@/utilities/format';
-import { NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
 
 export const lineBreak = '\r';
 export const tab = '  ';

package/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-svg-loader" />

package/vite.config.ts

@@ -1,9 +1,9 @@
 import vue from '@vitejs/plugin-vue';
+import svgLoader from 'vite-svg-loader';
+import ViteDts from 'vite-plugin-dts';
 import { defineConfig } from 'vite';
 import { fileURLToPath, URL } from 'node:url';
 import { resolve } from 'path';
-import svgLoader from 'vite-svg-loader';
-import ViteDts from 'vite-plugin-dts';
 
 // https://vitejs.dev/config/
 export default defineConfig({