tide-design-system 2.5.13 → 2.5.15

package/src/stories/DemoCssUtilities.stories.ts

@@ -1,154 +0,0 @@
-/* eslint vue/sort-keys: 0 */
-
-import Border from '@/stories/FoundationsBorder.stories';
-import Flexbox from '@/stories/FoundationsFlexbox.stories';
-import Margin from '@/stories/FoundationsMargin.stories';
-import Padding from '@/stories/FoundationsPadding.stories';
-import Shadow from '@/stories/FoundationsShadow.stories';
-import * as STYLES from '@/types/Storybook';
-import { argTypeDimension, formatArgType, prependKeyValue, prependNoneAsEmpty } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-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,
-    ...Flexbox.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

@@ -1,61 +0,0 @@
-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

@@ -1,272 +0,0 @@
-import * as STYLES from '@/types/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);
-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[] = [];
-  const hasBorder = args.borderSide || args.borderWidth;
-
-  // 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'];
-
-    classNames.push(`${side}-${width}`);
-  } else if (args.borderStyle || args.borderColor || args.borderRadius) {
-    classNames.push(CSS.BORDER.FULL.ONE);
-  }
-
-  if (args.borderStyle) classNames.push(args.borderStyle);
-  if (args.borderColor) classNames.push(args.borderColor);
-  if (args.borderRadius) classNames.push(args.borderRadius);
-
-  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: {
-    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',
-      name: 'Border Radius',
-    },
-    borderSide: {
-      ...formatArgType({ BORDER_SIDE }),
-      description: 'Dictates to which edge(s) the border applies',
-      name: 'Border Side',
-    },
-    borderStyle: {
-      ...formatArgType({ BORDER_STYLE }),
-      description: 'Applies a border style',
-      name: 'Border Style',
-    },
-    borderWidth: {
-      ...formatArgType({ BORDER_WIDTH }),
-      description: 'Applies a border width',
-      name: 'Border Width',
-    },
-  },
-  args: {
-    borderColor: BORDER_COLOR.None,
-    borderRadius: BORDER_RADIUS.None,
-    borderSide: BORDER_SIDE.None,
-    borderStyle: BORDER_STYLE.None,
-    borderWidth: BORDER_WIDTH.None,
-  },
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Utilities/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 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,
-    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 BorderFullDashed2px = {
-  args: {
-    borderSide: BORDER_SIDE.Full,
-    borderStyle: BORDER_STYLE.Dashed,
-    borderWidth: BORDER_WIDTH['2px'],
-  },
-  name: 'Border Full Dashed 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);
-    },
-  }),
-};