tide-design-system 2.2.9 → 2.2.10

package/src/stories/FoundationsBorder.stories.ts

@@ -5,6 +5,7 @@ import type { StoryContext } from '@storybook/vue3';
 
 const BORDER_RADIUS = prependNoneAsEmpty(STYLES.BORDER_RADIUS);
 const BORDER_SIDE = prependNoneAsEmpty(STYLES.BORDER_SIDE);
+const BORDER_STYLE = prependNoneAsEmpty(STYLES.BORDER_STYLE);
 const BORDER_WIDTH = prependNoneAsEmpty(STYLES.BORDER_WIDTH);
 
 const formatArgs = (args: any) => {
@@ -16,7 +17,7 @@ const formatArgs = (args: any) => {
 const formatClassNames = (args: any) => {
   const classNames: string[] = [];
 
-  if (args.borderSide === BORDER_SIDE.Full && args.borderWidth !== BORDER_WIDTH.None && args.borderRadius) {
+  if (args.borderSide === BORDER_SIDE.Full && args.borderWidth && args.borderRadius) {
     classNames.push(args.borderRadius);
   }
 
@@ -24,6 +25,10 @@ const formatClassNames = (args: any) => {
     classNames.push(`${args.borderSide}-${args.borderWidth}`);
   }
 
+  if (args.borderSide && args.borderWidth && args.borderStyle) {
+    classNames.push(args.borderStyle);
+  }
+
   return classNames;
 };
 
@@ -74,6 +79,12 @@ export default {
       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: {
       ...formatArgType({ BORDER_WIDTH }),
       description: 'Applies a border width',
@@ -83,6 +94,7 @@ export default {
   args: {
     borderRadius: BORDER_RADIUS.None,
     borderSide: BORDER_SIDE.None,
+    borderStyle: BORDER_STYLE.None,
     borderWidth: BORDER_WIDTH.None,
   },
   parameters,
@@ -133,6 +145,15 @@ export const BorderFull1px = {
   name: 'Border Full 1px',
 };
 
+export const BorderFullDashed1px = {
+  args: {
+    borderSide: BORDER_SIDE.Full,
+    borderStyle: BORDER_STYLE.Dashed,
+    borderWidth: BORDER_WIDTH['1px'],
+  },
+  name: 'Border Full Dashed 1px',
+};
+
 export const BorderTop2px = {
   args: {
     borderSide: BORDER_SIDE.Top,
@@ -173,6 +194,15 @@ export const BorderFull2px = {
   name: 'Border Full 2px',
 };
 
+export const BorderFullDashed2px = {
+  args: {
+    borderSide: BORDER_SIDE.Full,
+    borderStyle: BORDER_STYLE.Dashed,
+    borderWidth: BORDER_WIDTH['2px'],
+  },
+  name: 'Border Full Dashed 1px',
+};
+
 export const RadiusQuarter = {
   args: {
     borderRadius: BORDER_RADIUS['0.25 REM'],

package/src/stories/FoundationsTypography.stories.ts

@@ -105,7 +105,7 @@ export const Headline2 = {
 
 export const Headline3 = {
   args: {
-    type: TYPOGRAPHY['Headline 1'],
+    type: TYPOGRAPHY['Headline 3'],
   },
 };
 
@@ -117,7 +117,7 @@ export const Title1 = {
 
 export const Title2 = {
   args: {
-    type: TYPOGRAPHY['Title 1'],
+    type: TYPOGRAPHY['Title 2'],
   },
 };
 
@@ -129,7 +129,7 @@ export const Body1 = {
 
 export const Body2 = {
   args: {
-    type: TYPOGRAPHY['Body 1'],
+    type: TYPOGRAPHY['Body 2'],
   },
 };
 

package/src/stories/TideCarousel.stories.ts

@@ -13,6 +13,7 @@ const formatSnippet = (code: string, context: StoryContext) => {
   const hasBleed = args.bleed !== '';
 
   if (hasBleed) argsWithValues.push(`bleed="${args.bleed}"`);
+  if (args.isFloating !== undefined) argsWithValues.push(`:is-floating="${args.isFloating}"`);
   if (args.isHideawayButtons !== undefined) argsWithValues.push(`:is-hideaway-buttons="${args.isHideawayButtons}"`);
   if (args.isTouchscreen !== undefined) argsWithValues.push(`:is-touchscreen="${args.isTouchscreen}"`);
   if (args.subtitle !== '') argsWithValues.push(`subtitle="${args.subtitle}"`);

package/src/stories/TideImageBackground.stories.ts

@@ -1,6 +1,6 @@
 import TideImageBackground from '@/components/TideImageBackground.vue';
 import { MEDIA } from '@/types/Breakpoint';
-import { argTypeBooleanUnrequired, disabledArgType } from '@/utilities/storybook';
+import { argTypeBooleanUnrequired } from '@/utilities/storybook';
 
 import type { Source } from '@/types/Source';
 import type { StoryContext } from '@storybook/vue3';
@@ -36,7 +36,7 @@ const render = (args: any) => ({
   template: `
     <TideImageBackground v-bind="args">
       <div class="tide-padding-4 tide-font-700 tide-font-20">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque est nibh, convallis vel aliquam non, elementum a lorem.
+        {{ args.default }}
       </div>
     </TideImageBackground>
   `,
@@ -71,7 +71,14 @@ export default {
         type: { summary: 'string' },
       },
     },
-    default: disabledArgType,
+    default: {
+      control: 'text',
+      description: 'Content exposed when expanded',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
+      },
+    },
     isLazy: {
       ...argTypeBooleanUnrequired,
       description: `Determines whether to delay loading until image is in viewport.`,
@@ -95,6 +102,7 @@ export default {
   },
   args: {
     alt: '',
+    default: 'Lorem Ipsum',
     isLazy: undefined,
     sources,
     src: 'https://placedog.net/375/400',

package/src/types/Storybook.ts

@@ -45,6 +45,11 @@ export const BORDER_SIDE = {
   Left: 'tide-border-left',
 };
 
+export const BORDER_STYLE = {
+  Solid: CSS.BORDER.STYLE.SOLID,
+  Dashed: CSS.BORDER.STYLE.DASHED,
+};
+
 export const BORDER_WIDTH = {
   '1px': '1',
   '2px': '2',

package/src/types/Styles.ts

@@ -87,6 +87,10 @@ export const CSS = {
       ONE: 'tide-radius-1',
       FULL: 'tide-radius-full',
     },
+    STYLE: {
+      DASHED: 'tide-border-dashed',
+      SOLID: 'tide-border-solid',
+    },
     BOTTOM: {
       ZERO: 'tide-border-bottom-0',
       ONE: 'tide-border-bottom-1',