tide-design-system 2.0.22 → 2.0.23

package/src/types/Storybook.ts

@@ -0,0 +1,219 @@
+/* eslint vue/sort-keys: 0 */
+// ^ Storybook controls are based on iterating over object properties instead of array slots (bad form), so these can't be ordered alphabetically.
+
+import { CSS } from '@/types/Styles';
+
+export const NoneAsEmpty = { None: '' };
+export const NoneAsUndefined = { None: undefined };
+
+// These objects are intended exclusively for use in demonstrating the Storybook UI.
+export const BOOLEAN_UNREQUIRED = {
+  None: undefined,
+  True: true,
+  False: false,
+};
+
+export const BADGE_TRUSTED = {
+  YEARS_5: '5',
+  YEARS_10: '10',
+  YEARS_15: '15',
+};
+
+export const BORDER_RADIUS = {
+  '0.25 REM': CSS.BORDER.RADIUS.QUARTER,
+  '0.5 REM': CSS.BORDER.RADIUS.HALF,
+  '1 REM': CSS.BORDER.RADIUS.ONE,
+  'Full': CSS.BORDER.RADIUS.FULL,
+};
+
+export const BORDER_SIDE = {
+  Full: 'tide-border',
+  Top: 'tide-border-top',
+  Right: 'tide-border-right',
+  Bottom: 'tide-border-bottom',
+  Left: 'tide-border-left',
+};
+
+export const BORDER_WIDTH = {
+  '1px': '1',
+  '2px': '2',
+};
+
+export const DISPLAY = {
+  'Block': CSS.DISPLAY.BLOCK,
+  'Contents': CSS.DISPLAY.CONTENTS,
+  'Flex': CSS.DISPLAY.FLEX,
+  'Grid': CSS.DISPLAY.GRID,
+  'Inline Block': CSS.DISPLAY.INLINE_BLOCK,
+  'Inline Flex': CSS.DISPLAY.INLINE_FLEX,
+  'Inline': CSS.DISPLAY.INLINE,
+  'Hidden': CSS.DISPLAY.NONE,
+};
+
+export const FLEX_AXIS1 = {
+  Around: CSS.AXIS1.AROUND,
+  Between: CSS.AXIS1.BETWEEN,
+  Center: CSS.AXIS1.CENTER,
+  End: CSS.AXIS1.END,
+  Start: CSS.AXIS1.START,
+};
+
+export const FLEX_AXIS2 = {
+  Around: CSS.AXIS2.AROUND,
+  Center: CSS.AXIS2.CENTER,
+  End: CSS.AXIS2.END,
+  Start: CSS.AXIS2.START,
+};
+
+export const FLEX_DIRECTION = {
+  Column: CSS.FLEX.DIRECTION.COLUMN,
+  Row: CSS.FLEX.DIRECTION.ROW,
+};
+
+export const FONT_SIZE = {
+  '12px': CSS.FONT.SIZE.TWELVE,
+  '14px': CSS.FONT.SIZE.FOURTEEN,
+  '16px': CSS.FONT.SIZE.SIXTEEN,
+  '20px': CSS.FONT.SIZE.TWENTY,
+  '24px': CSS.FONT.SIZE.TWENTY_FOUR,
+  '32px': CSS.FONT.SIZE.THIRTY_TWO,
+};
+
+export const FONT_WEIGHT = {
+  '400 Regular': CSS.FONT.WEIGHT.FOUR_HUNDRED,
+  '500 Medium': CSS.FONT.WEIGHT.FIVE_HUNDRED,
+  '600 Semibold': CSS.FONT.WEIGHT.SIX_HUNDRED,
+  '700 Bold': CSS.FONT.WEIGHT.SEVEN_HUNDRED,
+};
+
+export const GAP = {
+  '4 REM': CSS.GAP.FOUR,
+  '2 REM': CSS.GAP.TWO,
+  '1 REM': CSS.GAP.ONE,
+  '0.5 REM': CSS.GAP.HALF,
+  '0.25 REM': CSS.GAP.QUARTER,
+};
+
+export const LINK_SIZE = {
+  TWELVE: CSS.FONT.SIZE.TWELVE,
+  FOURTEEN: CSS.FONT.SIZE.FOURTEEN,
+  SIXTEEN: CSS.FONT.SIZE.SIXTEEN,
+};
+
+export const MARGIN = {
+  'Full 4 REM': CSS.MARGIN.FULL.FOUR,
+  'Full 2 REM': CSS.MARGIN.FULL.TWO,
+  'Full 1 REM': CSS.MARGIN.FULL.ONE,
+  'Full 0.5 REM': CSS.MARGIN.FULL.HALF,
+  'Full 0.25 REM': CSS.MARGIN.FULL.QUARTER,
+
+  'X-axis Auto': CSS.MARGIN.X.AUTO,
+  'X-axis 4 REM': CSS.MARGIN.X.FOUR,
+  'X-axis 2 REM': CSS.MARGIN.X.TWO,
+  'X-axis 1 REM': CSS.MARGIN.X.ONE,
+  'X-axis 0.5 REM': CSS.MARGIN.X.HALF,
+  'X-axis 0.25 REM': CSS.MARGIN.X.QUARTER,
+
+  'Y-axis 4 REM': CSS.MARGIN.Y.FOUR,
+  'Y-axis 2 REM': CSS.MARGIN.Y.TWO,
+  'Y-axis 1 REM': CSS.MARGIN.Y.ONE,
+  'Y-axis 0.5 REM': CSS.MARGIN.Y.HALF,
+  'Y-axis 0.25 REM': CSS.MARGIN.Y.QUARTER,
+
+  'Top 4 REM': CSS.MARGIN.TOP.FOUR,
+  'Top 2 REM': CSS.MARGIN.TOP.TWO,
+  'Top 1 REM': CSS.MARGIN.TOP.ONE,
+  'Top 0.5 REM': CSS.MARGIN.TOP.HALF,
+  'Top 0.25 REM': CSS.MARGIN.TOP.QUARTER,
+
+  'Right Auto': CSS.MARGIN.RIGHT.AUTO,
+  'Right 4 REM': CSS.MARGIN.RIGHT.FOUR,
+  'Right 2 REM': CSS.MARGIN.RIGHT.TWO,
+  'Right 1 REM': CSS.MARGIN.RIGHT.ONE,
+  'Right 0.5 REM': CSS.MARGIN.RIGHT.HALF,
+  'Right 0.25 REM': CSS.MARGIN.RIGHT.QUARTER,
+
+  'Bottom 4 REM': CSS.MARGIN.BOTTOM.FOUR,
+  'Bottom 2 REM': CSS.MARGIN.BOTTOM.TWO,
+  'Bottom 1 REM': CSS.MARGIN.BOTTOM.ONE,
+  'Bottom 0.5 REM': CSS.MARGIN.BOTTOM.HALF,
+  'Bottom 0.25 REM': CSS.MARGIN.BOTTOM.QUARTER,
+
+  'Left Auto': CSS.MARGIN.LEFT.AUTO,
+  'Left 4 REM': CSS.MARGIN.LEFT.FOUR,
+  'Left 2 REM': CSS.MARGIN.LEFT.TWO,
+  'Left 1 REM': CSS.MARGIN.LEFT.ONE,
+  'Left 0.5 REM': CSS.MARGIN.LEFT.HALF,
+  'Left 0.25 REM': CSS.MARGIN.LEFT.QUARTER,
+};
+
+export const PADDING = {
+  'Full 4 REM': CSS.PADDING.FULL.FOUR,
+  'Full 2 REM': CSS.PADDING.FULL.TWO,
+  'Full 1 REM': CSS.PADDING.FULL.ONE,
+  'Full 0.5 REM': CSS.PADDING.FULL.HALF,
+  'Full 0.25 REM': CSS.PADDING.FULL.QUARTER,
+
+  'X-axis 4 REM': CSS.PADDING.X.FOUR,
+  'X-axis 2 REM': CSS.PADDING.X.TWO,
+  'X-axis 1 REM': CSS.PADDING.X.ONE,
+  'X-axis 0.5 REM': CSS.PADDING.X.HALF,
+  'X-axis 0.25 REM': CSS.PADDING.X.QUARTER,
+
+  'Y-axis 4 REM': CSS.PADDING.Y.FOUR,
+  'Y-axis 2 REM': CSS.PADDING.Y.TWO,
+  'Y-axis 1 REM': CSS.PADDING.Y.ONE,
+  'Y-axis 0.5 REM': CSS.PADDING.Y.HALF,
+  'Y-axis 0.25 REM': CSS.PADDING.Y.QUARTER,
+
+  'Top 4 REM': CSS.PADDING.TOP.FOUR,
+  'Top 2 REM': CSS.PADDING.TOP.TWO,
+  'Top 1 REM': CSS.PADDING.TOP.ONE,
+  'Top 0.5 REM': CSS.PADDING.TOP.HALF,
+  'Top 0.25 REM': CSS.PADDING.TOP.QUARTER,
+
+  'Right 4 REM': CSS.PADDING.RIGHT.FOUR,
+  'Right 2 REM': CSS.PADDING.RIGHT.TWO,
+  'Right 1 REM': CSS.PADDING.RIGHT.ONE,
+  'Right 0.5 REM': CSS.PADDING.RIGHT.HALF,
+  'Right 0.25 REM': CSS.PADDING.RIGHT.QUARTER,
+
+  'Bottom 4 REM': CSS.PADDING.BOTTOM.FOUR,
+  'Bottom 2 REM': CSS.PADDING.BOTTOM.TWO,
+  'Bottom 1 REM': CSS.PADDING.BOTTOM.ONE,
+  'Bottom 0.5 REM': CSS.PADDING.BOTTOM.HALF,
+  'Bottom 0.25 REM': CSS.PADDING.BOTTOM.QUARTER,
+
+  'Left 4 REM': CSS.PADDING.LEFT.FOUR,
+  'Left 2 REM': CSS.PADDING.LEFT.TWO,
+  'Left 1 REM': CSS.PADDING.LEFT.ONE,
+  'Left 0.5 REM': CSS.PADDING.LEFT.HALF,
+  'Left 0.25 REM': CSS.PADDING.LEFT.QUARTER,
+};
+
+export const SHADOW = {
+  Bottom: CSS.SHADOW.BOTTOM,
+  Top: CSS.SHADOW.TOP,
+};
+
+export const TYPOGRAPHY = {
+  DISPLAY_1: [CSS.FONT.SIZE.THIRTY_TWO, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
+  HEADLINE_1: [CSS.FONT.SIZE.TWENTY_FOUR, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
+  HEADLINE_2: [CSS.FONT.SIZE.TWENTY, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
+  HEADLINE_3: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
+  TITLE_1: [CSS.FONT.SIZE.TWENTY, CSS.FONT.WEIGHT.SIX_HUNDRED],
+  TITLE_2: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SIX_HUNDRED],
+  BODY_1: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.FOUR_HUNDRED],
+  BODY_2: [CSS.FONT.SIZE.FOURTEEN, CSS.FONT.WEIGHT.FOUR_HUNDRED],
+  LABEL_1: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.FIVE_HUNDRED],
+  LABEL_1_SEMIBOLD: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SIX_HUNDRED],
+  LABEL_2: [CSS.FONT.SIZE.FOURTEEN, CSS.FONT.WEIGHT.FIVE_HUNDRED],
+  LABEL_2_SEMIBOLD: [CSS.FONT.SIZE.FOURTEEN, CSS.FONT.WEIGHT.SIX_HUNDRED],
+  LABEL_3: [CSS.FONT.SIZE.TWELVE, CSS.FONT.WEIGHT.FIVE_HUNDRED],
+  LINK_1: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
+  LINK_2: [CSS.FONT.SIZE.FOURTEEN, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
+  LINK_3: [CSS.FONT.SIZE.TWELVE, CSS.FONT.WEIGHT.SEVEN_HUNDRED],
+  BUTTON_1: [CSS.FONT.SIZE.SIXTEEN, CSS.FONT.WEIGHT.SIX_HUNDRED],
+};
+
+export type Typography = (typeof TYPOGRAPHY)[keyof typeof TYPOGRAPHY];