tide-design-system 2.5.13 → 2.5.14

package/src/stories/FoundationsColor.stories.ts

@@ -1,311 +0,0 @@
-import TideIcon from '@/components/TideIcon.vue';
-import { CSS } from '@/types/Styles';
-import {
-  disabledArgType,
-  flatten,
-  formatArgType,
-  getConstantsByValues,
-  prependNoneAsEmpty,
-} from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-const COLOR_BACKGROUND = prependNoneAsEmpty(flatten(CSS.BG));
-const COLOR_BORDER = prependNoneAsEmpty(flatten(CSS.BORDER.COLOR));
-const COLOR_FONT = prependNoneAsEmpty(flatten(CSS.FONT.COLOR));
-
-const formatArgs = (args: any) => {
-  args.class = formatClassNames(args).join(' ');
-
-  return { args };
-};
-
-const formatClassNames = (args: any) => {
-  const classNames = [];
-
-  if (args.backgroundColor) classNames.push(args.backgroundColor);
-  if (args.borderColor) classNames.push(...['tide-border-1', args.borderColor]);
-  if (args.fontColor) classNames.push(args.fontColor);
-
-  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) => ({
-  components: { TideIcon },
-  setup() {
-    return formatArgs(args);
-  },
-  template: `<div class="tide-display-inline-block tide-padding-1" v-bind="args">${args.default}</div>`,
-  updated() {
-    return formatArgs(args);
-  },
-});
-
-export default {
-  argTypes: {
-    backgroundColor: {
-      ...formatArgType({ COLOR_BACKGROUND }),
-      description: 'Applies a background color',
-      name: 'Background Color',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'CSS.BG' },
-      },
-    },
-    borderColor: {
-      ...formatArgType({ COLOR_BORDER }),
-      description: 'Applies a border color',
-      name: 'Border Color',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'CSS.BORDER.COLOR' },
-      },
-    },
-    default: disabledArgType,
-    fontColor: {
-      ...formatArgType({ COLOR_FONT }),
-      description: 'Applies a font color',
-      name: 'Font Color',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'CSS.FONT.COLOR' },
-      },
-    },
-  },
-  args: {
-    backgroundColor: COLOR_BACKGROUND.None,
-    borderColor: COLOR_BORDER.None,
-    default: 'Demo',
-    fontColor: COLOR_FONT.None,
-  },
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Utilities/Color',
-};
-
-export const Default = {};
-
-export const SurfaceAccent = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['SURFACE.ACCENT'],
-  },
-};
-
-export const SurfaceBrand = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['SURFACE.BRAND'],
-    fontColor: COLOR_FONT['SURFACE.INVERSE'],
-  },
-};
-
-export const SurfaceGradient = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['SURFACE.GRADIENT'],
-  },
-};
-
-export const SurfaceVariant = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['SURFACE.VARIANT'],
-  },
-};
-
-export const SurfaceInverse = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['SURFACE.INVERSE'],
-    fontColor: COLOR_FONT['SURFACE.INVERSE'],
-  },
-};
-
-export const GlobalPrimaryBlue = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.BLUE'],
-    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
-  },
-};
-
-export const GlobalPrimaryGreen = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.GREEN'],
-    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
-  },
-};
-
-export const GlobalPrimaryLime = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.LIME'],
-    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
-  },
-};
-
-export const GlobalPrimaryOrange = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.ORANGE'],
-    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
-  },
-};
-
-export const GlobalPrimaryPurple = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.PURPLE'],
-    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
-  },
-};
-
-export const GlobalPrimaryRed = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.RED'],
-    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
-  },
-};
-
-export const GlobalPrimarySalmon = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.SALMON'],
-    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
-  },
-};
-
-export const GlobalPrimaryTeal = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.TEAL'],
-    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
-  },
-};
-
-export const GlobalPrimaryYellow = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.YELLOW'],
-    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
-  },
-};
-
-export const GlobalSurfaceBlue = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.BLUE'],
-  },
-};
-
-export const GlobalSurfaceGreen = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.GREEN'],
-  },
-};
-
-export const GlobalSurfaceLime = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.LIME'],
-  },
-};
-
-export const GlobalSurfaceOrange = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.ORANGE'],
-  },
-};
-
-export const GlobalSurfacePurple = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.PURPLE'],
-  },
-};
-
-export const GlobalSurfaceRed = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.RED'],
-  },
-};
-
-export const GlobalSurfaceSalmon = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.SALMON'],
-  },
-};
-
-export const GlobalSurfaceTeal = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.TEAL'],
-  },
-};
-
-export const GlobalSurfaceYellow = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.YELLOW'],
-  },
-};
-
-export const StatusPrimaryError = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.ERROR'],
-    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
-  },
-};
-
-export const StatusPrimaryInfo = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.INFO'],
-    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
-  },
-};
-
-export const StatusPrimarySuccess = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.SUCCESS'],
-    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
-  },
-};
-
-export const StatusPrimaryWarning = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.PRIMARY.WARNING'],
-    default: `<TideIcon class="tide-font-on-surface-inverse" icon="ai-description" />`,
-  },
-};
-
-export const StatusSurfaceError = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.ERROR'],
-  },
-};
-
-export const StatusSurfaceInfo = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.INFO'],
-  },
-};
-
-export const StatusSurfaceSuccess = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.SUCCESS'],
-  },
-};
-
-export const StatusSurfaceWarning = {
-  args: {
-    backgroundColor: COLOR_BACKGROUND['GLOBAL.SURFACE.WARNING'],
-  },
-};

package/src/stories/FoundationsFlexbox.stories.ts

@@ -1,184 +0,0 @@
-import * as STYLES from '@/types/Storybook';
-import {
-  argTypeBooleanUnrequired,
-  formatArgType,
-  getConstantsByValues,
-  prependNoneAsEmpty,
-} from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-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 main axis',
-      name: 'Main Axis',
-    },
-    flexAxis2: {
-      ...formatArgType({ FLEX_AXIS2 }),
-      description: 'Dictates alignment of children along cross axis',
-      name: 'Cross Axis',
-    },
-    flexDirection: {
-      ...formatArgType({ FLEX_DIRECTION }),
-      description: 'Dictates whether children form a column or a row',
-      name: 'Flex Direction',
-    },
-    flexGap: {
-      ...formatArgType({ GAP }),
-      description: 'Dictates spacing between elements along the main axis',
-      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: 'Utilities/Flexbox',
-};
-
-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)',
-};

package/src/stories/FoundationsGrid.stories.ts

@@ -1,126 +0,0 @@
-import { CSS } from '@/types/Styles';
-import { argTypeBoolean, getConstantsByValues, lineBreak, tab } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-const formatArgs = (args: any) => {
-  args.class = formatClassNames(args).join(' ');
-
-  return { args };
-};
-
-const formatClassNames = (args: any) => {
-  const classNames: string[] = [];
-
-  if (args.fluid) classNames.push(CSS.GRID.FLUID);
-  if (args.item) classNames.push(CSS.GRID.ITEM);
-
-  return classNames;
-};
-
-const formatClassNamesSnippet = (args: any) => {
-  const classNames = formatClassNames(args);
-
-  return getConstantsByValues(classNames);
-};
-
-const formatClassNamesParentSnippet = (args: any) => {
-  const classNamesParent: string[] = [CSS.GRID.LAYOUT];
-
-  if (args.xl) classNamesParent.push(CSS.GRID.XL);
-
-  return getConstantsByValues(classNamesParent);
-};
-
-const formatSnippet = (code: string, context: StoryContext) => {
-  const { args } = context;
-  const classNames = formatClassNamesSnippet(args);
-  const attribute = classNames.length ? ` :class="[${classNames.join(', ')}]"` : '';
-
-  if (args.item) {
-    return (
-      `<div :class="[${formatClassNamesParentSnippet(args).join(', ')}]">${lineBreak}` +
-      `${tab}<span :class="[CSS.DISPLAY.CONTENTS]">${lineBreak}` +
-      `${tab}${tab}<span${attribute}>Demo</span>${lineBreak}` +
-      `${tab}</span>${lineBreak}` +
-      `</div>`
-    );
-  }
-
-  return (
-    `<div :class="[${formatClassNamesParentSnippet(args).join(', ')}]">${lineBreak}` +
-    `${tab}<span${attribute}>Demo</span>${lineBreak}` +
-    `</div>`
-  );
-};
-
-const parameters = {
-  docs: {
-    source: {
-      format: false,
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-const render = (args: any) => ({
-  setup() {
-    return formatArgs(args);
-  },
-  template: `<div class="tide-grid-layout tide-padding-top-2"><div class="tide-border-1 tide-padding-1 sb-bg-white tide-xy-hidden" v-bind="args">Demo</div></div>`,
-  updated() {
-    return formatArgs(args);
-  },
-});
-
-export default {
-  argTypes: {
-    fluid: {
-      ...argTypeBoolean,
-      description: `Determines whether grid item should extend to parent bounds`,
-      if: { arg: 'item', neq: true },
-      name: 'Fluid',
-    },
-    item: {
-      ...argTypeBoolean,
-      description: `Forces a non-direct descendant to adhere to the grid`,
-      if: { arg: 'fluid', neq: true },
-      name: 'Item',
-    },
-    xl: {
-      ...argTypeBoolean,
-      description: `Increases the maximum content width`,
-      name: 'XL',
-    },
-  },
-  args: {
-    fluid: false,
-    item: false,
-    xl: false,
-  },
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Utilities/Grid',
-};
-
-export const Default = {};
-
-export const Fluid = {
-  args: {
-    fluid: true,
-  },
-};
-
-export const Item = {
-  args: {
-    item: true,
-  },
-};
-
-export const XL = {
-  args: {
-    xl: true,
-  },
-};