tide-design-system 2.5.13 → 2.5.14

package/src/types/Orientation.ts

@@ -1,6 +0,0 @@
-export const ORIENTATION = {
-  HORIZONTAL: 'horizontal',
-  VERTICAL: 'vertical',
-} as const;
-
-export type Orientation = (typeof ORIENTATION)[keyof typeof ORIENTATION];

package/src/types/Priority.ts

@@ -1,11 +0,0 @@
-/* eslint-disable vue/sort-keys */
-
-export const PRIORITY = {
-  PRIMARY: 'primary',
-  SECONDARY: 'secondary',
-  TERTIARY: 'tertiary',
-  QUATERNARY: 'quaternary',
-  FLOATING: 'floating',
-} as const;
-
-export type Priority = (typeof PRIORITY)[keyof typeof PRIORITY];

package/src/types/Realm.ts

@@ -1,14 +0,0 @@
-export const REALM = {
-  AERO: 'aero',
-  ATV: 'atv',
-  BOATMART: 'boatmart',
-  CYCLE: 'cycle',
-  EQUIPMENT: 'equipment',
-  PWC: 'pwc',
-  RV: 'rv',
-  SNOW: 'snow',
-  TRUCK: 'truck',
-} as const;
-
-export type RealmKey = keyof typeof REALM;
-export type Realm = (typeof REALM)[RealmKey];

package/src/types/RealmLogo.ts

@@ -1,23 +0,0 @@
-import type { RealmKey } from '@/types/Realm';
-
-export const LOGO_HEIGHT = {
-  LARGE: 32,
-  SMALL: 24,
-};
-
-export const LOGO_WIDTH_LARGE: Record<RealmKey, number> = {
-  AERO: 147,
-  ATV: 142,
-  BOATMART: 128,
-  CYCLE: 169,
-  EQUIPMENT: 122,
-  PWC: 148,
-  RV: 129,
-  SNOW: 136,
-  TRUCK: 148,
-} as const;
-
-export const CSS_REALM_LOGO_SIZE = {
-  LARGE: 'large',
-  SMALL: 'small',
-} as const;

package/src/types/Select.ts

@@ -1,9 +0,0 @@
-export type SelectOption = {
-  label: string;
-  value?: string;
-};
-
-export type SelectOptionGroup = {
-  label: string;
-  options: SelectOption[];
-};

package/src/types/Size.ts

@@ -1,13 +0,0 @@
-export const SIZE = {
-  LARGE: 'large',
-  SMALL: 'small',
-} as const;
-
-export type Size = (typeof SIZE)[keyof typeof SIZE];
-
-export const SIZE_BUTTON = {
-  LARGE: 'large',
-  SMALL: 'small',
-} as const;
-
-export type SizeButton = (typeof SIZE)[keyof typeof SIZE];

package/src/types/Source.ts

@@ -1,6 +0,0 @@
-import type { Media } from '@/types/Breakpoint';
-
-export type Source = {
-  media: Media;
-  srcset: string;
-};

package/src/types/Storybook.ts

@@ -1,253 +0,0 @@
-/* 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 = {
-  True: true,
-  False: false,
-};
-
-export const BOOLEAN_UNREQUIRED = {
-  None: undefined,
-  True: true,
-  False: false,
-};
-
-export const BADGE_TRUSTED = {
-  YEARS_5: '5',
-  YEARS_10: '10',
-  YEARS_15: '15',
-  YEARS_20: '20',
-  YEARS_25: '25',
-  YEARS_30: '30',
-  YEARS_35: '35',
-};
-
-export const BG = {
-  Red: 'sb-bg-red',
-  Green: 'sb-bg-green',
-  Blue: 'sb-bg-blue',
-};
-
-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_STYLE = {
-  Solid: CSS.BORDER.STYLE.SOLID,
-  Dashed: CSS.BORDER.STYLE.DASHED,
-};
-
-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_COLOR = {
-  Black: 'sb-font-black',
-  White: 'sb-font-white',
-};
-
-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 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 TEXT_DECORATION = {
-  Strikethrough: CSS.STRIKETHROUGH.ON,
-  Underline: CSS.UNDERLINE.REST.ON,
-};
-
-export const TEXT_TRANSFORM = {
-  Lowercase: CSS.TEXT_TRANSFORM.LOWER,
-  Uppercase: CSS.TEXT_TRANSFORM.UPPER,
-};
-
-export const TRANSPARENT = {
-  '100: 90% White': CSS.BG.TRANSPARENT.ONE_HUNDRED,
-  '200: 75% White': CSS.BG.TRANSPARENT.TWO_HUNDRED,
-  '300: 10% Black': CSS.BG.TRANSPARENT.THREE_HUNDRED,
-  '400: 50% Black': CSS.BG.TRANSPARENT.FOUR_HUNDRED,
-};
-
-export const TYPOGRAPHY = {
-  'Display 1': CSS.FONT.ROLE.DISPLAY_1,
-  'Headline 1': CSS.FONT.ROLE.HEADLINE_1,
-  'Headline 2': CSS.FONT.ROLE.HEADLINE_2,
-  'Headline 3': CSS.FONT.ROLE.HEADLINE_3,
-  'Title 1': CSS.FONT.ROLE.TITLE_1,
-  'Title 2': CSS.FONT.ROLE.TITLE_2,
-  'Body 1': CSS.FONT.ROLE.BODY_1,
-  'Body 2': CSS.FONT.ROLE.BODY_2,
-  'Label 1': CSS.FONT.ROLE.LABEL_1,
-  'Label 1 Semibold': CSS.FONT.ROLE.LABEL_1_SEMIBOLD,
-  'Label 2': CSS.FONT.ROLE.LABEL_2,
-  'Label 2 Semibold': CSS.FONT.ROLE.LABEL_2_SEMIBOLD,
-  'Label 3': CSS.FONT.ROLE.LABEL_3,
-  'Link 1': CSS.FONT.ROLE.LINK_1,
-  'Link 2': CSS.FONT.ROLE.LINK_2,
-  'Link 3': CSS.FONT.ROLE.LINK_3,
-  'Button 1': CSS.FONT.ROLE.BUTTON_1,
-};