import {FunctionalComponent} from '@stencil/core';

export type ButtonVariants = 'primary' | 'secondary';
export enum ButtonStates {
  enabled = 'enabled',
  disabled = 'disabled',
}

export type ProcessFlowBoxStepStates = 'first' | 'default';

export type IconName = {
  [key: string]: (props: any) => FunctionalComponent;
};

export enum HeadingVarians {
  default = 'h1',
  h2 = 'h2',
  h3 = 'h3',
  h4 = 'h4',
  h5 = 'h5',
  h6 = 'h6',
}

export enum HeadingSectionVariants {
  default = 'default',
  subSection = 'subsection',
}

export enum LinkVariants {
  default = 'default',
  paragraph = 'within-paragraph',
}

export enum CtaLinkVariants {
  default = 'default',
  linkList = 'link-list',
}

export enum CtaLinkButtonVariants {
  default = 'default',
  onBlueBkgd = 'blue-background',
  onWhiteBkgd = 'white-background',
}

export enum ProcessFlowBoxVariants {
  default = 'big',
  small = 'small',
}

export enum KeyHighlightVariants {
  default = 'big',
  small = 'small',
}

export enum LinkBoxVariants {
  default = 'content',
  landingPage = 'landing',
}

export enum GridColumnsSm {
  columnsSm1 = '1',
  columnsSm2 = '2',
  columnsSm3 = '3',
  columnsSm4 = '4',
  columnsSm5 = '5',
  columnsSm6 = '6',
  columnsSm7 = '7',
  columnsSm8 = '8',
  columnsSm9 = '9',
  columnsSm10 = '10',
  columnsSm11 = '11',
  columnsSm12 = '12',
  default = '12',
}

export enum GridColumns {
  columns1 = '1',
  columns2 = '2',
  columns3 = '3',
  columns4 = '4',
  columns5 = '5',
  columns6 = '6',
  columns7 = '7',
  columns8 = '8',
  columns9 = '9',
  columns10 = '10',
  columns11 = '11',
  columns12 = '12',
  default = '12',
}

export enum GridColumnsLg {
  columnsLg1 = '1',
  columnsLg2 = '2',
  columnsLg3 = '3',
  columnsLg4 = '4',
  columnsLg5 = '5',
  columnsLg6 = '6',
  columnsLg7 = '7',
  columnsLg8 = '8',
  columnsLg9 = '9',
  columnsLg10 = '10',
  columnsLg11 = '11',
  columnsLg12 = '12',
  default = '12',
}

export enum GridAlignVariants {
  default = 'left',
  right = 'right',
  center = 'center',
}

export enum MenuType {
  desktop = 'desktop',
  sidenav = 'sidenav',
  mobile = 'mobile',
  default = 'desktop',
}

export enum SiteLogoSize {
  small = 32,
  big = 64,
}

export enum ColorVariant {
  black = 'var(--brand-main-nearly-black)',
  white = 'var(--grayscale-white)',
}