tide-design-system 2.4.0 → 2.4.1

package/package.json

@@ -61,7 +61,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/components/TideCard.vue

@@ -12,7 +12,7 @@
     heading: string;
     icon?: Icon;
     selected?: boolean;
-    type: CardType;
+    type?: CardType;
     href?: string;
   };
 

package/src/components/TideImage.vue

@@ -8,7 +8,7 @@
   import type { Source } from '@/types/Source';
 
   type Props = {
-    alt: string;
+    alt?: string;
     height?: string;
     isLazy?: boolean;
     objectFit?: ObjectFit;

package/src/stories/FoundationsBorder.stories.ts

@@ -1,8 +1,10 @@
 import * as STYLES from '@/types/Storybook';
-import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+import { CSS } from '@/types/Styles';
+import { flatten, formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
+const BORDER_COLOR = prependNoneAsEmpty(flatten(CSS.BORDER.COLOR));
 const BORDER_RADIUS = prependNoneAsEmpty(STYLES.BORDER_RADIUS);
 const BORDER_SIDE = prependNoneAsEmpty(STYLES.BORDER_SIDE);
 const BORDER_STYLE = prependNoneAsEmpty(STYLES.BORDER_STYLE);
@@ -16,18 +18,21 @@ const formatArgs = (args: any) => {
 
 const formatClassNames = (args: any) => {
   const classNames: string[] = [];
+  const hasBorder = args.borderSide || args.borderWidth;
 
-  if (args.borderSide === BORDER_SIDE.Full && args.borderWidth && args.borderRadius) {
-    classNames.push(args.borderRadius);
-  }
+  // Any selection for any property should also add a side and width or nothing will be visible.
+  if (hasBorder) {
+    const side = args.borderSide || BORDER_SIDE.Full;
+    const width = args.borderWidth || BORDER_WIDTH['1px'];
 
-  if (args.borderSide && args.borderWidth) {
-    classNames.push(`${args.borderSide}-${args.borderWidth}`);
+    classNames.push(`${side}-${width}`);
+  } else if (args.borderStyle || args.borderColor || args.borderRadius) {
+    classNames.push(CSS.BORDER.FULL.ONE);
   }
 
-  if (args.borderSide && args.borderWidth && args.borderStyle) {
-    classNames.push(args.borderStyle);
-  }
+  if (args.borderStyle) classNames.push(args.borderStyle);
+  if (args.borderColor) classNames.push(args.borderColor);
+  if (args.borderRadius) classNames.push(args.borderRadius);
 
   return classNames;
 };
@@ -67,22 +72,28 @@ const render = (args: any) => ({
 
 export default {
   argTypes: {
+    borderColor: {
+      ...formatArgType({ BORDER_COLOR }),
+      description: 'Applies a border color',
+      name: 'Border Color',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'CSS.BORDER.COLOR' },
+      },
+    },
     borderRadius: {
       ...formatArgType({ BORDER_RADIUS }),
       description: 'Dictates severity of rounded corners',
-      if: { arg: 'borderSide', eq: BORDER_SIDE.Full },
       name: 'Border Radius',
     },
     borderSide: {
       ...formatArgType({ BORDER_SIDE }),
       description: 'Dictates to which edge(s) the border applies',
-      if: { arg: 'borderWidth', neq: BORDER_WIDTH.None },
       name: 'Border Side',
     },
     borderStyle: {
       ...formatArgType({ BORDER_STYLE }),
       description: 'Applies a border style',
-      if: { arg: 'borderWidth', neq: BORDER_STYLE.None },
       name: 'Border Style',
     },
     borderWidth: {
@@ -92,6 +103,7 @@ export default {
     },
   },
   args: {
+    borderColor: BORDER_COLOR.None,
     borderRadius: BORDER_RADIUS.None,
     borderSide: BORDER_SIDE.None,
     borderStyle: BORDER_STYLE.None,
@@ -200,7 +212,7 @@ export const BorderFullDashed2px = {
     borderStyle: BORDER_STYLE.Dashed,
     borderWidth: BORDER_WIDTH['2px'],
   },
-  name: 'Border Full Dashed 1px',
+  name: 'Border Full Dashed 2px',
 };
 
 export const RadiusQuarter = {