tide-design-system 2.5.13 → 2.5.14

package/src/stories/FoundationsMargin.stories.ts

@@ -1,155 +0,0 @@
-import * as STYLES from '@/types/Storybook';
-import { CSS } from '@/types/Styles';
-import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-const MARGIN = prependNoneAsEmpty(STYLES.MARGIN);
-
-const formatArgs = (args: any) => {
-  args.class = formatClassNames(args).join(' ');
-  args.style = formatStyles(args);
-
-  return { args };
-};
-
-const formatClassNames = (args: any) => {
-  const classNames: string[] = [];
-  const hasMarginAuto = getHasMarginAuto(args);
-
-  if (hasMarginAuto) classNames.push(CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER);
-  if (args.margin) classNames.push(args.margin);
-
-  return classNames;
-};
-
-const formatClassNamesSnippet = (args: any) => {
-  const classNames = formatClassNames(args);
-
-  return getConstantsByValues(classNames);
-};
-
-const formatSnippet = (code: string, context: StoryContext) => {
-  const { args } = context;
-  const styles = formatStyles(args);
-  const styleAttribute = styles ? ` style="${styles}"` : '';
-  const classNames = formatClassNamesSnippet(args);
-
-  return classNames.length
-    ? `<div :class="[${classNames.join(', ')}]"${styleAttribute}>Demo</div>`
-    : `<div${styleAttribute}>Demo</div>`;
-};
-
-const formatStyles = (args: any) => {
-  const styles: string[] = [];
-  const hasMarginAuto = getHasMarginAuto(args);
-
-  if (hasMarginAuto) {
-    styles.push(`width: ${args.width ? args.width : '100'}px;`);
-    styles.push('height: 100px;');
-  }
-
-  return styles.length > 0 ? styles.join(' ') : null;
-};
-
-const getHasMarginAuto = (args: any) =>
-  [MARGIN['X-axis Auto'], MARGIN['Left Auto'], MARGIN['Right Auto']].includes(args.margin);
-
-const getContainerClass = (args: any) => (getHasMarginAuto(args) ? '' : CSS.DISPLAY.INLINE_BLOCK);
-
-const parameters = {
-  docs: {
-    source: {
-      format: false,
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-const render = (args: any) => ({
-  methods: {
-    getContainerClass,
-  },
-  setup() {
-    return formatArgs(args);
-  },
-  template: `<div :class="getContainerClass(args)" class="sb-bg-blue-light"><div class="tide-border-1 tide-padding-1 sb-bg-white sb-bg-white" v-bind="args">Demo</div></div>`,
-  updated() {
-    return formatArgs(args);
-  },
-});
-
-export default {
-  argTypes: {
-    margin: {
-      ...formatArgType({ MARGIN }),
-      description: 'Applies a margin',
-      name: 'Margin',
-    },
-  },
-  args: {
-    margin: MARGIN.None,
-  },
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Utilities/Margin',
-};
-
-export const MarginDefault = {
-  name: 'Default',
-};
-
-export const Margin4 = {
-  args: {
-    margin: MARGIN['Full 4 REM'],
-  },
-  name: 'Margin 4 REM',
-};
-
-export const Margin2 = {
-  args: {
-    margin: MARGIN['Full 2 REM'],
-  },
-  name: 'Margin 2 REM',
-};
-
-export const Margin1 = {
-  args: {
-    margin: MARGIN['Full 1 REM'],
-  },
-  name: 'Margin 1 REM',
-};
-
-export const MarginHalf = {
-  args: {
-    margin: MARGIN['Full 0.5 REM'],
-  },
-  name: 'Margin 0.5 REM',
-};
-
-export const MarginQuarter = {
-  args: {
-    margin: MARGIN['Full 0.25 REM'],
-  },
-  name: 'Margin 0.25 REM',
-};
-
-export const MarginRightAuto = {
-  args: {
-    margin: MARGIN['Right Auto'],
-  },
-};
-
-export const MarginLeftAuto = {
-  args: {
-    margin: MARGIN['Left Auto'],
-  },
-};
-
-export const MarginXAuto = {
-  args: {
-    margin: MARGIN['X-axis Auto'],
-  },
-};

package/src/stories/FoundationsPadding.stories.ts

@@ -1,108 +0,0 @@
-import * as STYLES from '@/types/Storybook';
-import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-const PADDING = prependNoneAsEmpty(STYLES.PADDING);
-
-const formatArgs = (args: any) => {
-  args.class = formatClassNames(args).join(' ');
-
-  return { args };
-};
-
-const formatClassNames = (args: any) => {
-  const classNames: string[] = [];
-
-  if (args.padding) classNames.push(args.padding);
-
-  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-border-1 sb-bg-blue-light" v-bind="args"><div class="tide-padding-1 sb-bg-white">Demo</div></div>',
-  updated() {
-    return formatArgs(args);
-  },
-});
-
-export default {
-  argTypes: {
-    padding: {
-      ...formatArgType({ PADDING }),
-      description: 'Applies padding',
-      name: 'Padding',
-    },
-  },
-  args: {
-    padding: PADDING.None,
-  },
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Utilities/Padding',
-};
-
-export const Default = {};
-
-export const Padding4 = {
-  args: {
-    padding: PADDING['Full 4 REM'],
-  },
-  name: 'Padding 4 REM',
-};
-
-export const Padding2 = {
-  args: {
-    padding: PADDING['Full 2 REM'],
-  },
-  name: 'Padding 2 REM',
-};
-
-export const Padding1 = {
-  args: {
-    padding: PADDING['Full 1 REM'],
-  },
-  name: 'Padding 1 REM',
-};
-
-export const PaddingHalf = {
-  args: {
-    padding: PADDING['Full 0.5 REM'],
-  },
-  name: 'Padding 0.5 REM',
-};
-
-export const PaddingQuarter = {
-  args: {
-    padding: PADDING['Full 0.25 REM'],
-  },
-  name: 'Padding 0.25 REM',
-};

package/src/stories/FoundationsShadow.stories.ts

@@ -1,103 +0,0 @@
-import * as STYLES from '@/types/Storybook';
-import { CSS } from '@/types/Styles';
-import {
-  argTypeBooleanUnrequired,
-  formatArgType,
-  getConstantsByValues,
-  prependNoneAsEmpty,
-} from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-const SHADOW = prependNoneAsEmpty(STYLES.SHADOW);
-
-const formatArgs = (args: any) => {
-  args.class = formatClassNames(args).join(' ');
-
-  return { args };
-};
-
-const formatClassNames = (args: any) => {
-  const classNames: string[] = [];
-
-  if (args.box) classNames.push(args.box);
-  if (args.text) classNames.push(CSS.SHADOW.TEXT);
-
-  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: {
-    box: {
-      ...formatArgType({ SHADOW }),
-      description: `Applies a shadow at the element's top or bottom boundary or to the text.<br />(Top shadows are for sticky footers.`,
-      name: 'Box Shadow',
-    },
-    text: {
-      ...argTypeBooleanUnrequired,
-      description: `Applies a shadow to the element's text.`,
-      name: 'Text Shadow',
-    },
-  },
-  args: {
-    box: SHADOW.None,
-    text: undefined,
-  },
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Utilities/Shadow',
-};
-
-export const Default = {};
-
-export const ShadowBottom = {
-  args: {
-    box: SHADOW['Bottom'],
-  },
-};
-
-export const ShadowTop = {
-  args: {
-    box: SHADOW['Top'],
-  },
-};
-
-export const ShadowText = {
-  args: {
-    text: true,
-  },
-};

package/src/stories/FoundationsTransparency.stories.ts

@@ -1,114 +0,0 @@
-import * as STYLES from '@/types/Storybook';
-import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-const BG = prependNoneAsEmpty(STYLES.BG);
-const FONT_COLOR = prependNoneAsEmpty(STYLES.FONT_COLOR);
-const TRANSPARENT = prependNoneAsEmpty(STYLES.TRANSPARENT);
-
-const formatArgs = (args: any) => {
-  args.class = formatClassNames(args).join(' ');
-
-  return { args };
-};
-
-const formatClassNames = (args: any) => {
-  const classNames: string[] = [];
-
-  if (args.bg) classNames.push(args.bg);
-  if (args.color) classNames.push(args.color);
-  if (args.transparent) classNames.push(args.transparent);
-
-  return classNames;
-};
-
-const formatClassNamesSnippet = (args: any) => {
-  const classNames: string[] = [];
-
-  if (args.transparent) classNames.push(args.transparent);
-
-  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="[args.bg]"><div class="tide-display-inline-block tide-padding-1 tide-width-full tide-height-full" :class="[args.transparent, args.color]">Demo</div></div>`,
-  updated() {
-    return formatArgs(args);
-  },
-});
-
-export default {
-  argTypes: {
-    bg: {
-      ...formatArgType({ BG }),
-      description: `Applies a background color<br />(For demonstration purposes only).`,
-      name: 'Background color',
-    },
-    color: {
-      ...formatArgType({ FONT_COLOR }),
-      description: `Applies a text color<br />(For demonstration purposes only).`,
-      name: 'Text color',
-    },
-    transparent: {
-      ...formatArgType({ TRANSPARENT }),
-      description: `Applies a semi-transparent overlay.`,
-      name: 'Transparent',
-    },
-  },
-  args: {
-    bg: FONT_COLOR.None,
-    color: BG.None,
-    transparent: TRANSPARENT.None,
-  },
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Utilities/Transparency',
-};
-
-export const Default = {};
-
-export const Transparent100 = {
-  args: {
-    transparent: TRANSPARENT['100: 90% White'],
-  },
-};
-
-export const Transparent200 = {
-  args: {
-    transparent: TRANSPARENT['100: 75% White'],
-  },
-};
-
-export const Transparent300 = {
-  args: {
-    transparent: TRANSPARENT['300: 10% Black'],
-  },
-};
-
-export const Transparent400 = {
-  args: {
-    transparent: TRANSPARENT['400: 50% Black'],
-  },
-};

package/src/stories/FoundationsTypography.stories.ts

@@ -1,212 +0,0 @@
-import * as STYLES from '@/types/Storybook';
-import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
-
-const TYPOGRAPHY = prependNoneAsEmpty(STYLES.TYPOGRAPHY);
-const TEXT_DECORATION = prependNoneAsEmpty(STYLES.TEXT_DECORATION);
-const TEXT_TRANSFORM = prependNoneAsEmpty(STYLES.TEXT_TRANSFORM);
-
-const formatArgs = (args: any) => {
-  args.class = formatClassNames(args).join(' ');
-
-  return { args };
-};
-
-const formatClassNames = (args: any) => {
-  const classNames: string[] = [];
-
-  if (args.type) classNames.push(args.type);
-  if (args.textDecoration) classNames.push(args.textDecoration);
-  if (args.textTransform) classNames.push(args.textTransform);
-
-  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 `<div :class="[${classNames.join(', ')}]">${args.label}</div>`;
-};
-
-const parameters = {
-  docs: {
-    source: {
-      format: false,
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-const render = (args: any) => ({
-  setup() {
-    return formatArgs(args);
-  },
-  template: `<div v-bind="args">{{ args.label }}</div>`,
-  updated() {
-    return formatArgs(args);
-  },
-});
-
-export default {
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Sample text',
-      name: 'Label',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'string' },
-      },
-    },
-    textDecoration: {
-      ...formatArgType({ TEXT_DECORATION }),
-      description: 'Applies text decoration styles',
-      name: 'Text Decoration',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'CSS.STRIKETHROUGH | CSS.UNDERLINE' },
-      },
-    },
-    textTransform: {
-      ...formatArgType({ TEXT_TRANSFORM }),
-      description: 'Applies text transformation styles',
-      name: 'Text Transform',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'CSS.TEXT_TRANSFORM' },
-      },
-    },
-    type: {
-      ...formatArgType({ TYPOGRAPHY }),
-      description: `Applies font rules`,
-      name: 'Type',
-      table: {
-        defaultValue: { summary: 'None' },
-        type: { summary: 'CSS.FONT.ROLE' },
-      },
-    },
-  },
-  args: {
-    label: 'Aa',
-    textDecoration: TEXT_DECORATION.None,
-    textTransform: TEXT_TRANSFORM.None,
-    type: TYPOGRAPHY.None,
-  },
-  parameters,
-  render,
-  tags: ['autodocs'],
-  title: 'Utilities/Typography',
-};
-
-export const Default = {};
-
-export const Display1 = {
-  args: {
-    type: TYPOGRAPHY['Display 1'],
-  },
-};
-
-export const Headline1 = {
-  args: {
-    type: TYPOGRAPHY['Headline 1'],
-  },
-};
-
-export const Headline2 = {
-  args: {
-    type: TYPOGRAPHY['Headline 2'],
-  },
-};
-
-export const Headline3 = {
-  args: {
-    type: TYPOGRAPHY['Headline 3'],
-  },
-};
-
-export const Title1 = {
-  args: {
-    type: TYPOGRAPHY['Title 1'],
-  },
-};
-
-export const Title2 = {
-  args: {
-    type: TYPOGRAPHY['Title 2'],
-  },
-};
-
-export const Body1 = {
-  args: {
-    type: TYPOGRAPHY['Body 1'],
-  },
-};
-
-export const Body2 = {
-  args: {
-    type: TYPOGRAPHY['Body 2'],
-  },
-};
-
-export const Label1 = {
-  args: {
-    type: TYPOGRAPHY['Label 1'],
-  },
-};
-
-export const Label1Semibold = {
-  args: {
-    type: TYPOGRAPHY['Label 1 Semibold'],
-  },
-};
-
-export const Label2 = {
-  args: {
-    type: TYPOGRAPHY['Label 2'],
-  },
-};
-
-export const Label2Semibold = {
-  args: {
-    type: TYPOGRAPHY['Label 2 Semibold'],
-  },
-};
-
-export const Label3 = {
-  args: {
-    type: TYPOGRAPHY['Label 3'],
-  },
-};
-
-export const Link1 = {
-  args: {
-    type: TYPOGRAPHY['Link 1'],
-  },
-};
-
-export const Link2 = {
-  args: {
-    type: TYPOGRAPHY['Link 2'],
-  },
-};
-
-export const Link3 = {
-  args: {
-    type: TYPOGRAPHY['Link 3'],
-  },
-};
-
-export const Button1 = {
-  args: {
-    type: TYPOGRAPHY['Button 1'],
-  },
-};