tide-design-system 2.0.21 → 2.0.23

package/src/stories/FoundationsMargin.stories.ts

@@ -0,0 +1,155 @@
+import type { StoryContext } from '@storybook/vue3';
+
+import * as STYLES from '@/types/Storybook';
+import { CSS } from '@/types/Styles';
+import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+
+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: 'Foundations/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

@@ -0,0 +1,108 @@
+import type { StoryContext } from '@storybook/vue3';
+
+import * as STYLES from '@/types/Storybook';
+import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+
+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: 'Foundations/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

@@ -0,0 +1,84 @@
+import type { StoryContext } from '@storybook/vue3';
+
+import * as STYLES from '@/types/Storybook';
+import { formatArgType, getConstantsByValues, prependNoneAsEmpty } from '@/utilities/storybook';
+
+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.shadow) classNames.push(args.shadow);
+
+  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: {
+    shadow: {
+      ...formatArgType({ SHADOW }),
+      description: `Applies a shadow at the element's top or bottom boundary.<br />(Top shadows are for sticky footers only.)`,
+      name: 'Shadow',
+    },
+  },
+  args: {
+    shadow: SHADOW.None,
+  },
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Foundations/Shadow',
+};
+
+export const Default = {};
+
+export const ShadowBottom = {
+  args: {
+    shadow: SHADOW['Bottom'],
+  },
+};
+
+export const ShadowTop = {
+  args: {
+    shadow: SHADOW['Top'],
+  },
+};

package/src/stories/FoundationsTypography.stories.ts

@@ -0,0 +1,172 @@
+import type { StoryContext } from '@storybook/vue3';
+
+import { TYPOGRAPHY } from '@/types/Storybook';
+import { formatArgType, getConstantsByValues } from '@/utilities/storybook';
+
+const formatArgs = (args: any) => {
+  args.class = args.type.join(' ');
+
+  return { args };
+};
+
+const formatClassNames = (args: any) => {
+  const classNames: string[] = args.type;
+
+  return getConstantsByValues(classNames);
+};
+
+const formatSnippet = (code: string, context: StoryContext) => {
+  const { args } = context;
+  const classNames = formatClassNames(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' },
+      },
+    },
+    type: {
+      ...formatArgType({ TYPOGRAPHY }),
+      description: `Applies font rules`,
+      name: 'Type',
+    },
+  },
+  args: {
+    label: 'Aa',
+    type: TYPOGRAPHY.BODY_1,
+  },
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Foundations/Typography',
+};
+
+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_1,
+  },
+};
+
+export const Title1 = {
+  args: {
+    type: TYPOGRAPHY.TITLE_1,
+  },
+};
+
+export const Title2 = {
+  args: {
+    type: TYPOGRAPHY.TITLE_1,
+  },
+};
+
+export const Body1 = {
+  args: {
+    type: TYPOGRAPHY.BODY_1,
+  },
+};
+
+export const Body2 = {
+  args: {
+    type: TYPOGRAPHY.BODY_1,
+  },
+};
+
+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,
+  },
+};

package/src/stories/Template.stories.ts

@@ -0,0 +1,71 @@
+/* eslint-disable storybook/story-exports */
+
+// IMPORTS
+import TideChipInput from '@/components/TideChipInput.vue';
+import { ICON } from '@/types/Icon';
+import { argTypeBooleanUnrequired, formatArgType, formatSnippet } from '@/utilities/storybook';
+
+// PARAMETERS
+const parameters = {
+  docs: {
+    source: {
+      format: 'vue',
+      language: 'html',
+      transform: formatSnippet,
+    },
+  },
+};
+
+// STANDARD FUNCTIONS
+const formatArgs = (args: any) => {
+  return { args };
+};
+
+const render = (args: any) => ({
+  components: { TideChipInput },
+  setup() {
+    return formatArgs(args);
+  },
+  template: '<TideChipInput class="tide-display-inline-flex" v-bind="args" />',
+  updated() {
+    return formatArgs(args);
+  },
+});
+
+// EXPORT
+export default {
+  argTypes: {
+    argTypeBoilerplate: {
+      ...formatArgType({ ICON }),
+      description: 'Prop description',
+    },
+    argTypeBooleanUnrequired: {
+      ...argTypeBooleanUnrequired,
+    },
+    argTypeComplete: {
+      control: 'text',
+      description: 'Complete ArgType<br />(Demonstrates all standard argType properties for this project)', // Description in Description column
+      name: 'Complete', // Name column
+      table: {
+        defaultValue: { summary: 'None' }, // Default column
+        type: { summary: 'string' }, // Type in Description column
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Chip text',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    label: 'Demo', // Value in Control column
+  },
+  component: TideChipInput,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Hidden/Story Template',
+};

package/src/stories/TideAccordionItem.stories.ts

@@ -0,0 +1,68 @@
+import TideAccordionItem from '@/components/TideAccordionItem.vue';
+import { argTypeBooleanUnrequired, dataTrack, parameters } from '@/utilities/storybook';
+
+const render = (args: any) => ({
+  components: { TideAccordionItem },
+  setup: () => ({ args }),
+  template: `<TideAccordionItem :key="args.isExpandedInitial" v-bind="args">{{ args.default }}</TideAccordionItem>`,
+});
+
+export default {
+  argTypes: {
+    dataTrack,
+    default: {
+      control: 'text',
+      description: 'Content exposed when expanded',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
+      },
+    },
+    hasBottomDivider: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether to include bottom divider',
+    },
+    hasTopDivider: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether to include bottom divider',
+    },
+    isActive: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether to show "active" indicator (primarily for filters)',
+    },
+    isExpandedInitial: {
+      ...argTypeBooleanUnrequired,
+      description:
+        'Determines whether content should be expanded by default<br />(Subsequently managed within component)',
+    },
+    isOptional: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether to show "(optional)" indicator after label',
+    },
+    label: {
+      control: 'text',
+      description: 'Label exposed when collapsed',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  args: {
+    dataTrack: '',
+    default: 'Lorem Ipsum',
+    hasBottomDivider: undefined,
+    hasTopDivider: undefined,
+    isActive: undefined,
+    isExpandedInitial: undefined,
+    isOptional: undefined,
+    label: 'Demo',
+  },
+  component: TideAccordionItem,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideAccordionItem',
+};
+
+export const Demo = {};

package/src/stories/TideAlert.stories.ts

@@ -0,0 +1,58 @@
+import * as STANDARD_ALERT from '@/types/Alert';
+import TideAlert from '@/components/TideAlert.vue';
+import {
+  argTypeBooleanUnrequired,
+  dataTrack,
+  formatArgType,
+  parameters,
+  prependNoneAsUndefined,
+} from '@/utilities/storybook';
+
+const render = (args: any) => ({
+  components: { TideAlert },
+  setup: () => ({ args }),
+  template: `<TideAlert v-bind="args">{{ args.default }}</TideAlert>`,
+});
+
+const ALERT = prependNoneAsUndefined(STANDARD_ALERT.ALERT);
+
+export default {
+  argTypes: {
+    dataTrack,
+    default: {
+      control: 'text',
+      description: 'Body text',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
+      },
+    },
+    heading: {
+      control: 'text',
+      description: 'Heading text',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'HTML' },
+      },
+    },
+    isToast: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether the Alert is an overlay or displaces content',
+    },
+    type: {
+      ...formatArgType({ ALERT }),
+      description: 'Alert type',
+      table: {
+        defaultValue: { summary: 'ALERT' },
+      },
+    },
+  },
+  args: { dataTrack: '', default: '', heading: 'Heading', isToast: undefined, type: undefined },
+  component: TideAlert,
+  parameters,
+  render,
+  tags: ['autodocs'],
+  title: 'Basic Components/TideAlert',
+};
+
+export const Demo = {};