tide-design-system 2.0.21 → 2.0.23

package/src/stories/DemoCssUtilities.stories.ts

@@ -0,0 +1,154 @@
+/* eslint vue/sort-keys: 0 */
+
+import type { StoryContext } from '@storybook/vue3';
+
+import * as STYLES from '@/types/Storybook';
+import Border from '@/stories/FoundationsBorder.stories';
+import Gap from '@/stories/FoundationsGap.stories';
+import Margin from '@/stories/FoundationsMargin.stories';
+import Padding from '@/stories/FoundationsPadding.stories';
+import Shadow from '@/stories/FoundationsShadow.stories';
+import { argTypeDimension, formatArgType, prependKeyValue, prependNoneAsEmpty } from '@/utilities/storybook';
+
+const BORDER_RADIUS = prependNoneAsEmpty(STYLES.BORDER_RADIUS);
+const BORDER_SIDE = prependNoneAsEmpty(STYLES.BORDER_SIDE);
+const BORDER_WIDTH = prependNoneAsEmpty(STYLES.BORDER_WIDTH);
+const DISPLAY = prependKeyValue(STYLES.DISPLAY, { 'None (Unspecified)': '' });
+const FLEX_AXIS1 = prependNoneAsEmpty(STYLES.FLEX_AXIS1);
+const FLEX_AXIS2 = prependNoneAsEmpty(STYLES.FLEX_AXIS2);
+const FLEX_DIRECTION = prependNoneAsEmpty(STYLES.FLEX_DIRECTION);
+const GAP = prependNoneAsEmpty(STYLES.GAP);
+const MARGIN = prependNoneAsEmpty(STYLES.MARGIN);
+const PADDING = prependNoneAsEmpty(STYLES.PADDING);
+const SHADOW = prependNoneAsEmpty(STYLES.SHADOW);
+const TYPOGRAPHY = prependNoneAsEmpty(STYLES.TYPOGRAPHY);
+
+const formatArgs = (args: any) => {
+  args.class = formatClassNames(args);
+  args.style = formatStyles(args);
+
+  return { args };
+};
+
+const formatClassNames = (args: any) => {
+  const classNames: string[] = [];
+
+  if (args.borderRadius) classNames.push(args.borderRadius);
+  if (args.display) classNames.push(args.display);
+  if (args.flexAxis1) classNames.push(args.flexAxis1);
+  if (args.flexAxis2) classNames.push(args.flexAxis2);
+  if (args.flexDirection) classNames.push(args.flexDirection);
+  if (args.flexGap) classNames.push(args.flexGap);
+  if (args.flexWrap) classNames.push('tide-flex-wrap');
+  if (args.typography) classNames.push(args.typography.join(' '));
+  if (args.margin) classNames.push(args.margin);
+  if (args.padding) classNames.push(args.padding);
+  if (args.shadow) classNames.push(args.shadow);
+
+  if (args.borderSide && args.borderWidth) {
+    classNames.push(`${args.borderSide}${args.borderWidth}`);
+  }
+
+  return classNames.join(' ');
+};
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args } = context;
+  const styles = formatStyles(args);
+  const styleAttribute = styles ? ` style="${styles}"` : '';
+
+  return `<div class="${formatClassNames(args)}"${styleAttribute}>${args.children}</div>`;
+};
+
+const formatStyles = (args: any) => {
+  const styles: string[] = [];
+
+  if (args.width) styles.push(`width: ${args.width}px;`);
+  if (args.height) styles.push(`height: ${args.height}px;`);
+
+  return styles.length > 0 ? styles.join(' ') : null;
+};
+
+const parameters = {
+  docs: {
+    source: {
+      format: false,
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+const render = (args: any) => ({
+  setup() {
+    return formatArgs(args);
+  },
+  template: `<div v-bind="args">${args.children}</div>`,
+  updated() {
+    return formatArgs(args);
+  },
+});
+
+export default {
+  argTypes: {
+    ...Border.argTypes,
+    ...Shadow.argTypes,
+    ...Gap.argTypes,
+    ...Padding.argTypes,
+    children: {
+      control: 'text',
+      defaultValue: 'Demo',
+      description: 'Markup or text content<br />(See "Demo" story for updatable preview)',
+      name: 'Children',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
+      },
+    },
+    display: {
+      ...formatArgType({ DISPLAY }),
+      description: 'Dictates layout rules that govern relationship between element, parent, and/or children',
+      name: 'Display',
+    },
+    height: {
+      ...argTypeDimension,
+      description: 'Apply a "height" to the style attribute<br />(for demonstration purposes only)',
+      name: 'Height',
+    },
+    margin: {
+      ...Margin.argTypes.margin,
+    },
+    typography: {
+      ...formatArgType({ TYPOGRAPHY }),
+      description: `Applies font rules`,
+      name: 'Typography',
+    },
+    width: {
+      ...argTypeDimension,
+      description: 'Apply a "width" to the style attribute<br />(for demonstration purposes only)',
+      name: 'Width',
+    },
+  },
+  args: {
+    borderRadius: BORDER_RADIUS.None,
+    borderSide: BORDER_SIDE.None,
+    borderWidth: BORDER_WIDTH.None,
+    children: 'Demo',
+    display: DISPLAY['None (Unspecified)'],
+    flexAxis1: FLEX_AXIS1.None,
+    flexAxis2: FLEX_AXIS2.None,
+    flexDirection: FLEX_DIRECTION.None,
+    flexGap: GAP.None,
+    flexWrap: undefined,
+    typography: TYPOGRAPHY.None,
+    margin: MARGIN.None,
+    padding: PADDING.None,
+    shadow: SHADOW.None,
+  },
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Proof of Concept/CSS Utilities Demo',
+};
+
+export const Demo = {};

package/src/stories/DemoCssUtilitiesByTextInput.stories.ts

@@ -0,0 +1,61 @@
+import type { StoryContext } from '@storybook/vue3';
+
+const formatArgs = (args: any) => {
+  const classNames: string[] = [];
+
+  if (args.utilities) classNames.push(args.utilities);
+
+  if (classNames.length > 0) {
+    // TODO: Add custom class name sorting?!
+
+    args.class = classNames.join(' ');
+  }
+
+  return { args };
+};
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args } = context;
+
+  const classNames = args.classNames || '';
+
+  return `<div class="${classNames}">Demo</div>`;
+};
+
+export default {
+  argTypes: {
+    utilities: {
+      control: 'text',
+      isCss: true,
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    utilities: '',
+  },
+  parameters: {
+    docs: {
+      source: {
+        format: false,
+        language: 'html',
+        transform: formatSnippet,
+      },
+    },
+  },
+  render: (args: any) => ({
+    setup() {
+      return formatArgs(args);
+    },
+    template: '<div v-bind="args">Demo</div>',
+    updated() {
+      return formatArgs(args);
+    },
+  }),
+  tags: ['autodocs'],
+  title: 'Proof of Concept/CSS Utilities By Text Input',
+};
+
+export const Demo = {};

package/src/stories/FoundationsBorder.stories.ts

@@ -0,0 +1,230 @@
+import type { StoryContext } from '@storybook/vue3';
+
+import * as STYLES from '@/types/Storybook';
+import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+
+const BORDER_RADIUS = prependNoneAsEmpty(STYLES.BORDER_RADIUS);
+const BORDER_SIDE = prependNoneAsEmpty(STYLES.BORDER_SIDE);
+const BORDER_WIDTH = prependNoneAsEmpty(STYLES.BORDER_WIDTH);
+
+const formatArgs = (args: any) => {
+  args.class = formatClassNames(args).join(' ');
+
+  return { args };
+};
+
+const formatClassNames = (args: any) => {
+  const classNames: string[] = [];
+
+  if (args.borderSide === BORDER_SIDE.Full && args.borderWidth !== BORDER_WIDTH.None && args.borderRadius) {
+    classNames.push(args.borderRadius);
+  }
+
+  if (args.borderSide && args.borderWidth) {
+    classNames.push(`${args.borderSide}-${args.borderWidth}`);
+  }
+
+  return classNames;
+};
+
+const formatClassNamesSnippet = (args: any) => {
+  const classNames = formatClassNames(args);
+
+  return getConstantsByValues(classNames);
+};
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args } = context;
+  const classNames = formatClassNamesSnippet(args);
+
+  return classNames.length ? `<div :class="[${classNames.join(', ')}]">Demo</div>` : '<div>Demo</div>';
+};
+
+const parameters = {
+  docs: {
+    source: {
+      format: false,
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+const render = (args: any) => ({
+  setup() {
+    return formatArgs(args);
+  },
+  template: '<div class="tide-display-inline-block tide-padding-1" v-bind="args">Demo</div>',
+  updated() {
+    return formatArgs(args);
+  },
+});
+
+export default {
+  argTypes: {
+    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',
+    },
+    borderWidth: {
+      ...formatArgType({ BORDER_WIDTH }),
+      description: 'Applies a border width',
+      name: 'Border Width',
+    },
+  },
+  args: {
+    borderRadius: BORDER_RADIUS.None,
+    borderSide: BORDER_SIDE.None,
+    borderWidth: BORDER_WIDTH.None,
+  },
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Foundations/Border',
+};
+
+export const Default = {};
+
+export const BorderTop1px = {
+  args: {
+    borderSide: BORDER_SIDE.Top,
+    borderWidth: BORDER_WIDTH['1px'],
+  },
+  name: 'Border Top 1px',
+};
+
+export const BorderRight1px = {
+  args: {
+    borderSide: BORDER_SIDE.Right,
+    borderWidth: BORDER_WIDTH['1px'],
+  },
+  name: 'Border Right 1px',
+};
+
+export const BorderBottom1px = {
+  args: {
+    borderSide: BORDER_SIDE.Bottom,
+    borderWidth: BORDER_WIDTH['1px'],
+  },
+  name: 'Border Bottom 1px',
+};
+
+export const BorderLeft1px = {
+  args: {
+    borderSide: BORDER_SIDE.Left,
+    borderWidth: BORDER_WIDTH['1px'],
+  },
+  name: 'Border Left 1px',
+};
+
+export const BorderFull1px = {
+  args: {
+    borderSide: BORDER_SIDE.Full,
+    borderWidth: BORDER_WIDTH['1px'],
+  },
+  name: 'Border Full 1px',
+};
+
+export const BorderTop2px = {
+  args: {
+    borderSide: BORDER_SIDE.Top,
+    borderWidth: BORDER_WIDTH['2px'],
+  },
+  name: 'Border Top 2px',
+};
+
+export const BorderRight2px = {
+  args: {
+    borderSide: BORDER_SIDE.Right,
+    borderWidth: BORDER_WIDTH['2px'],
+  },
+  name: 'Border Right 2px',
+};
+
+export const BorderBottom2px = {
+  args: {
+    borderSide: BORDER_SIDE.Bottom,
+    borderWidth: BORDER_WIDTH['2px'],
+  },
+  name: 'Border Bottom 2px',
+};
+
+export const BorderLeft2px = {
+  args: {
+    borderSide: BORDER_SIDE.Left,
+    borderWidth: BORDER_WIDTH['2px'],
+  },
+  name: 'Border Left 2px',
+};
+
+export const BorderFull2px = {
+  args: {
+    borderSide: BORDER_SIDE.Full,
+    borderWidth: BORDER_WIDTH['2px'],
+  },
+  name: 'Border Full 2px',
+};
+
+export const RadiusQuarter = {
+  args: {
+    borderRadius: BORDER_RADIUS['0.25 REM'],
+    borderSide: BORDER_SIDE.Full,
+    borderWidth: BORDER_WIDTH['1px'],
+  },
+  name: 'Border Radius 0.25 REM',
+};
+
+export const RadiusHalf = {
+  args: {
+    borderRadius: BORDER_RADIUS['0.5 REM'],
+    borderSide: BORDER_SIDE.Full,
+    borderWidth: BORDER_WIDTH['1px'],
+  },
+  name: 'Border Radius 0.5 REM',
+};
+
+export const Radius1 = {
+  args: {
+    borderRadius: BORDER_RADIUS['1 REM'],
+    borderSide: BORDER_SIDE.Full,
+    borderWidth: BORDER_WIDTH['1px'],
+  },
+  name: 'Border Radius 1 REM',
+};
+
+export const RadiusFull = {
+  args: {
+    borderRadius: BORDER_RADIUS.Full,
+    borderSide: BORDER_SIDE.Full,
+    borderWidth: BORDER_WIDTH['1px'],
+  },
+  name: 'Border Radius Full',
+};
+
+export const Circle = {
+  args: {
+    borderRadius: BORDER_RADIUS.Full,
+    borderSide: BORDER_SIDE.Full,
+    borderWidth: BORDER_WIDTH['1px'],
+  },
+  name: 'Border Radius Full (1/1 Aspect Ratio)',
+  parameters,
+  render: (args: any) => ({
+    setup() {
+      return formatArgs(args);
+    },
+    template:
+      '<div class="tide-display-inline-flex tide-axis1-center tide-axis2-center tide-padding-1" style="width: 100px; height: 100px;" v-bind="args">Demo</div>',
+    updated() {
+      return formatArgs(args);
+    },
+  }),
+};

package/src/stories/FoundationsGap.stories.ts

@@ -0,0 +1,180 @@
+import type { StoryContext } from '@storybook/vue3';
+
+import * as STYLES from '@/types/Storybook';
+import { argTypeBooleanUnrequired } from '@/utilities/storybook';
+import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+
+const FLEX_AXIS1 = prependNoneAsEmpty(STYLES.FLEX_AXIS1);
+const FLEX_AXIS2 = prependNoneAsEmpty(STYLES.FLEX_AXIS2);
+const FLEX_DIRECTION = prependNoneAsEmpty(STYLES.FLEX_DIRECTION);
+const GAP = prependNoneAsEmpty(STYLES.GAP);
+
+const formatArgs = (args: any) => {
+  args.class = formatClassNames(args).join(' ');
+
+  return { args };
+};
+
+const formatClassNames = (args: any) => {
+  const classNames: string[] = ['tide-display-flex'];
+
+  if (args.flexAxis1) classNames.push(args.flexAxis1);
+  if (args.flexAxis2) classNames.push(args.flexAxis2);
+  if (args.flexDirection) classNames.push(args.flexDirection);
+  if (args.flexGap) classNames.push(args.flexGap);
+  if (args.flexWrap) classNames.push('tide-flex-wrap');
+
+  return classNames;
+};
+
+const formatClassNamesSnippet = (args: any) => {
+  const classNames = formatClassNames(args);
+
+  return getConstantsByValues(classNames);
+};
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args } = context;
+  const classNames = formatClassNamesSnippet(args);
+
+  return classNames.length ? `<div :class="[${classNames.join(', ')}]">Demo</div>` : '<div>Demo</div>';
+};
+
+const parameters = {
+  docs: {
+    source: {
+      format: false,
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+const render = (args: any) => ({
+  setup() {
+    return formatArgs(args);
+  },
+  template:
+    '<div class="tide-display-inline-flex tide-max-width-full sb-bg-blue-light tide-x-scroll" v-bind="args"><div :key="index" class="tide-border-1 tide-padding-1 sb-bg-white tide-whitespace-nowrap" v-for="(_child, index) in new Array(10)">Demo {{ index + 1 }}</div></div>',
+  updated() {
+    return formatArgs(args);
+  },
+});
+
+export default {
+  argTypes: {
+    flexAxis1: {
+      ...formatArgType({ FLEX_AXIS1 }),
+      description: 'Dictates alignment of children along primary axis',
+      name: 'Flex Axis Primary',
+    },
+    flexAxis2: {
+      ...formatArgType({ FLEX_AXIS2 }),
+      description: 'Dictates alignment of children along secondary axis',
+      name: 'Flex Axis Secondary',
+    },
+    flexDirection: {
+      ...formatArgType({ FLEX_DIRECTION }),
+      description: 'Dictates whether children form a column or a row',
+      name: 'Flex Direction',
+    },
+    flexGap: {
+      ...formatArgType({ GAP }),
+      description: 'Dictates vertical and/or horizontal spacing between elements within a flexbox container',
+      name: 'Flex Gap',
+    },
+    flexWrap: {
+      ...argTypeBooleanUnrequired,
+      description: 'Dictates whether overflow content should drop to a new line',
+      name: 'Flex Wrap',
+    },
+  },
+  args: {
+    flexAxis1: FLEX_AXIS1.None,
+    flexAxis2: FLEX_AXIS2.None,
+    flexDirection: FLEX_DIRECTION.None,
+    flexGap: GAP.None,
+    flexWrap: undefined,
+  },
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Foundations/Gap',
+};
+
+export const Default = {};
+
+export const Gap4NoWrap = {
+  args: {
+    flexGap: GAP['4 REM'],
+  },
+  name: 'Gap 4 REM (No Wrap)',
+};
+
+export const Gap2NoWrap = {
+  args: {
+    flexGap: GAP['2 REM'],
+  },
+  name: 'Gap 2 REM (No Wrap)',
+};
+
+export const Gap1NoWrap = {
+  args: {
+    flexGap: GAP['1 REM'],
+  },
+  name: 'Gap 1 REM (No Wrap)',
+};
+
+export const GapHalfNoWrap = {
+  args: {
+    flexGap: GAP['0.5 REM'],
+  },
+  name: 'Gap 0.5 REM (No Wrap)',
+};
+
+export const GapQuarterNoWrap = {
+  args: {
+    flexGap: GAP['0.25 REM'],
+  },
+  name: 'Gap 0.25 REM (No Wrap)',
+};
+
+export const Gap4Wrap = {
+  args: {
+    flexGap: GAP['4 REM'],
+    flexWrap: true,
+  },
+  name: 'Gap 4 REM (Wrap)',
+};
+
+export const Gap2Wrap = {
+  args: {
+    flexGap: GAP['2 REM'],
+    flexWrap: true,
+  },
+  name: 'Gap 2 REM (Wrap)',
+};
+
+export const Gap1Wrap = {
+  args: {
+    flexGap: GAP['1 REM'],
+    flexWrap: true,
+  },
+  name: 'Gap 1 REM (Wrap)',
+};
+
+export const GapHalfWrap = {
+  args: {
+    flexGap: GAP['0.5 REM'],
+    flexWrap: true,
+  },
+  name: 'Gap 0.5 REM (Wrap)',
+};
+
+export const GapQuarterWrap = {
+  args: {
+    flexGap: GAP['0.25 REM'],
+    flexWrap: true,
+  },
+  name: 'Gap 0.25 REM (Wrap)',
+};