alicia-design-system 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "alicia-design-system",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": false,
   "dependencies": {
     "@chakra-ui/icons": "^2.0.17",

package/src/alicia/common/Buttons/Buttons.tsx

@@ -1,15 +1,15 @@
-import { Button as ChakraButton, ButtonProps as ChakraButtonProps} from '@chakra-ui/react'
+import { Button as ChakraButton, ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
 
-export const Button =  ( { children , ...rest } : ButtonProps) => {
+export const Button = ({ children, ...rest }: ButtonProps) => {
 
-    return (
-      <>
-        <ChakraButton  w="full"  {...rest}>{children}</ChakraButton>
-      </>
-    );
-  };
+  return (
+    <>
+      <ChakraButton  {...rest}>{children}</ChakraButton>
+    </>
+  );
+};
 
 
-  interface ButtonProps extends ChakraButtonProps{
-    
-  }
+interface ButtonProps extends ChakraButtonProps {
+
+}

package/src/alicia/common/Checkbox/Checkbox.stories.tsx

@@ -17,8 +17,9 @@ const Template: ComponentStory<typeof CheckBox> = (args) => {
   return (
     <CheckBox
       {...args}
+      mt="4"
       isActive={isChecked}
-      onChange={() => setIsChecked(!isChecked)}
+      onChange={() => { setIsChecked(!isChecked); }}
     />
   );
 };

package/src/alicia/common/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {
-  Checkbox,
+  Checkbox, CheckboxProps as defaultProps
 } from '@chakra-ui/react';
 
 export const CheckBox: React.FC<CheckboxProps> = ({
@@ -11,13 +11,13 @@ export const CheckBox: React.FC<CheckboxProps> = ({
 }) => {
 
   return (
-    <Checkbox {...props} onChange={onChange} isChecked={isActive} variant="primary">{label}</Checkbox>
+    <Checkbox {...props} onChange={(e) => onChange(e.target.checked)} isChecked={isActive} variant="primary">{label}</Checkbox>
   );
 };
 
-export type CheckboxProps = {
+export type CheckboxProps = defaultProps & {
   customClass?: string;
   isActive?: boolean;
   label?: string;
-  onChange: () => void;
+  onChange: (value: boolean) => void;
 };

package/src/alicia/common/DateInput/DateInput.stories.tsx

@@ -18,8 +18,8 @@ Primary.args = {
     title: '',
     dateString: '',
     message: '',
-    minDate: { date: '2009-12-12', error: 'Date cannot be older than 2009-12-12' },
-    maxDate: { date: '2010-12-12', error: 'Date cannot be newer than 2010-12-12' },
+    minDate: { date: '2020-12-12', error: 'Date cannot be older than 2020-12-12' },
+    maxDate: { date: '2023-12-12', error: 'Date cannot be newer than 2023-12-12' },
     controlName: 'birthdate',
     infoMessage: ''
 };

package/src/alicia/common/DateInput/DateInput.tsx

@@ -1,9 +1,9 @@
-import { FormControl, FormLabel, Input, Text, Tooltip, Flex } from '@chakra-ui/react';
+import { FormControl, FormLabel, Input, Text, Tooltip, Flex, ChakraProps } from '@chakra-ui/react';
 import { FC, useState, useEffect } from 'react';
 import { differenceInMilliseconds } from 'date-fns';
 import { InfoIcon } from '../icons';
 
-export const DateInput: FC<DateInputProps> = ({ title, dateString, message, isRequired = false, minDate, maxDate, controlName, infoMessage }) => {
+export const DateInput: FC<DateInputProps> = ({ title, dateString, message, isRequired = false, minDate, maxDate, controlName, infoMessage, ...props }) => {
   const [value, setValue] = useState<string>('');
   const [errorMessage, setErrorMessage] = useState(message);
 
@@ -38,16 +38,16 @@ export const DateInput: FC<DateInputProps> = ({ title, dateString, message, isRe
 
   return (
     <FormControl isRequired={isRequired}>
-      {title && (<Flex color='white'><FormLabel htmlFor={controlName} color={errorMessage ? 'error' : 'black'}>{title}</FormLabel>
-        {infoMessage && (<Tooltip bg='white' color="black" label={infoMessage} aria-label='A tooltip' hasArrow ><InfoIcon width={16} /></Tooltip>)}
+      {title && (<Flex align="center" color='white'><FormLabel mb="0" htmlFor={controlName} color={errorMessage ? 'error' : 'black'}>{title}</FormLabel>
+        {infoMessage && (<Tooltip bg='white' color="black" label={infoMessage} aria-label='A tooltip' hasArrow ><InfoIcon width={20} /></Tooltip>)}
       </Flex>)}
-      <Input color={errorMessage ? 'error' : 'black'} placeholder="DD-MM-YYYY" value={value} variant='flushed' id={controlName} name={controlName} type="date" data-date-format="DD MMMM YYYY" onChange={(e) => { onChange(e.target.value); }} />
+      <Input {...props} color={errorMessage ? 'error' : 'black'} placeholder="DD-MM-YYYY" value={value} variant='flushed' id={controlName} name={controlName} type="date" data-date-format="DD MMMM YYYY" onChange={(e) => { onChange(e.target.value); }} />
       {errorMessage && (<Text fontSize='xs' color="error">{errorMessage}</Text>)}
     </FormControl>
   );
 };
 
-type DateInputProps = {
+type DateInputProps = ChakraProps & {
   title?: string;
   dateString?: string;
   onDateChange: (value: string) => void;

package/src/alicia/common/Header/Header.spec.tsx

@@ -0,0 +1,102 @@
+import { render } from "@testing-library/react";
+import '@testing-library/jest-dom';
+import { Header } from "./index";
+import AliciaLogo from "../../../assets/vectors/alicia.svg";
+import { MultiStepRouteType } from 'types';
+
+const DEFAULT_HEADER_PROPS = {
+    backgroundColor: 'headerBg',
+    textColor: 'black',
+    imageSrc: AliciaLogo,
+    imageFallbackSrc: AliciaLogo,
+    showSupport: false,
+    showLanguageSelector: false,
+    showProgressBar: false,
+    languages: [
+        {
+            label: 'English',
+            labelSm: 'EN',
+            value: 'en'
+        },
+        {
+            label: 'Netherland',
+            labelSm: 'NL',
+            value: 'nl'
+        },
+        {
+            label: 'Français',
+            labelSm: 'FR',
+            value: 'fr'
+        },
+    ],
+    showSteps: false,
+    steps: [
+        {
+            index: 1,
+            isNewSection: true,
+            sectionIndex: 0,
+            type: MultiStepRouteType.PERSONAL,
+            title: 'Your Claim'
+        },
+        {
+            index: 2,
+            isNewSection: true,
+            sectionIndex: 1,
+            type: MultiStepRouteType.CLAIM,
+            title: 'Personal Details'
+        },
+        {
+            index: 3,
+            isNewSection: false,
+            sectionIndex: 1,
+            type: MultiStepRouteType.CLAIM,
+            title: 'Address Details'
+        },
+    ],
+    currentStep: 1,
+    showCurrentStep: true
+};
+
+describe("Header component testing with testing-library", () => {
+    it("renders without crashing", () => {
+        const component = render(<Header {...DEFAULT_HEADER_PROPS} />);
+
+        expect(component).toBeTruthy();
+    });
+});
+
+describe('Check if component Renders with support label', () => {
+    it('component includes support label text', () => {
+        const { getAllByText } = render(<Header {...{ ...DEFAULT_HEADER_PROPS, showSupport: true }} />);
+        expect(getAllByText('Support')).toBeTruthy();
+    });
+});
+
+describe('Check if component Renders with language selector label', () => {
+    it('component includes english label text', () => {
+        const { getAllByText } = render(<Header {...{ ...DEFAULT_HEADER_PROPS, showLanguageSelector: true }} />);
+        expect(getAllByText('English')).toBeTruthy();
+    });
+    it('component includes netherland label text', () => {
+        const { getAllByText } = render(<Header {...{ ...DEFAULT_HEADER_PROPS, showLanguageSelector: true, language: DEFAULT_HEADER_PROPS.languages[1] }} />);
+        expect(getAllByText('Netherland')).toBeTruthy();
+    });
+});
+
+describe('Check if component Renders with steps header labels', () => {
+    it('component includes which step label text', () => {
+        const { getAllByText } = render(<Header {...{ ...DEFAULT_HEADER_PROPS, showSteps: true }} />);
+        expect(getAllByText('Step 1 of 3')).toBeTruthy();
+    });
+    it('component includes step title label text', () => {
+        const { getAllByText } = render(<Header {...{ ...DEFAULT_HEADER_PROPS, showSteps: true }} />);
+        expect(getAllByText('Your Claim')).toBeTruthy();
+    });
+});
+
+describe('Check if component Renders with progress bar', () => {
+    it('component includes progress bar aria label', () => {
+        const { getAllByLabelText } = render(<Header {...{ ...DEFAULT_HEADER_PROPS, showProgressBar: true }} />);
+        expect(getAllByLabelText('progress-bar')).toBeTruthy();
+    });
+});

package/src/alicia/common/Header/Header.stories.tsx

@@ -0,0 +1,86 @@
+import { useState } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Header, Language } from "./Header";
+import AliciaLogo from "../../../assets/vectors/alicia.svg";
+import { MultiStepRouteType } from 'types';
+
+const LANGUAGES: Language[] = [
+  {
+    label: 'English',
+    labelSm: 'EN',
+    value: 'en'
+  },
+  {
+    label: 'Netherland',
+    labelSm: 'NL',
+    value: 'nl'
+  },
+  {
+    label: 'Français',
+    labelSm: 'FR',
+    value: 'fr'
+  },
+];
+
+export default {
+  title: "Alicia/common/Header",
+  component: Header,
+} as ComponentMeta<typeof Header>;
+
+const Template: ComponentStory<typeof Header> = (args) => {
+  const [language, setLanguage] = useState<Language>(LANGUAGES[0]);
+  return (
+    <Header
+      {...args}
+      language={language}
+      setLanguage={(lan: Language) => setLanguage(lan)}
+      onSupportClick={() => alert('support clicked...')}
+    />
+  );
+};
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  backgroundColor: 'headerBg',
+  textColor: 'black',
+  imageSrc: AliciaLogo,
+  imageFallbackSrc: AliciaLogo,
+  showSupport: false,
+  showLanguageSelector: false,
+  languages: LANGUAGES,
+  showSteps: false,
+  showProgressBar: false,
+  steps: [{
+    index: 1,
+    isNewSection: true,
+    sectionIndex: 0,
+    type: MultiStepRouteType.PERSONAL,
+    title: 'Your Claim'
+  },
+  {
+    index: 2,
+    isNewSection: true,
+    sectionIndex: 1,
+    type: MultiStepRouteType.CLAIM,
+    title: 'Personal Details'
+  },
+  {
+    index: 3,
+    isNewSection: false,
+    sectionIndex: 1,
+    type: MultiStepRouteType.CLAIM,
+    title: 'Address Details'
+  }, {
+    index: 4,
+    isNewSection: true,
+    sectionIndex: 1,
+    type: MultiStepRouteType.PAYMENT,
+    title: 'Approval'
+  }],
+  routeStepsWithoutProgress: [MultiStepRouteType.INTRO],
+  currentStep: 1,
+  progressBarPrimaryColor: "#006A70",
+  progressBarBackgroundColor: "#EEEEEE",
+  showCurrentStep: true
+};

package/src/alicia/common/Header/Header.tsx

@@ -0,0 +1,198 @@
+import React from "react";
+import {
+  Box,
+  Grid,
+  GridItem,
+  Flex,
+  Text,
+  Image,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  useMediaQuery,
+} from '@chakra-ui/react';
+import { SupportIcon, ChevronUpIcon, ChevronDownIcon, GlobeIcon } from "../icons";
+import AliciaLogo from "../../../assets/vectors/alicia.svg";
+import { ProgressBar } from '../ProgressBar/ProgressBar';
+import { HeaderStep, MultiStepRouteType } from 'types';
+import { Step } from '../Step/Step';
+
+export const Header: React.FC<HeaderProps> = ({
+  backgroundColor = 'headerBg',
+  textColor = 'black',
+  imageSrc = AliciaLogo,
+  imageFallbackSrc = AliciaLogo,
+  showSupport = undefined,
+  onSupportClick = undefined,
+  showLanguageSelector = undefined,
+  languages = undefined,
+  language = undefined,
+  setLanguage = undefined,
+  showSteps = undefined,
+  steps = undefined,
+  currentStep = undefined,
+  showProgressBar = false,
+  routeStepsWithoutProgress = [],
+  progressBarBackgroundColor,
+  progressBarPrimaryColor,
+  showCurrentStep = false,
+}) => {
+  const [isMobile] = useMediaQuery('(max-width: 768px)');
+
+  return (
+    <Flex direction="column">
+      <Grid
+        bg={backgroundColor}
+        height={68}
+        padding={`0px ${isMobile ? 16 : 24}px`}
+        templateColumns="repeat(3, 1fr)"
+        gap={2}
+      >
+        <GridItem
+          display="flex"
+          alignItems="center"
+          colStart={1}
+          colEnd={2}
+        >
+          <Image
+            width={isMobile ? '50px' : '82px'}
+            height='32px'
+            objectFit='fill'
+            alt='logo-image'
+            src={imageSrc}
+            fallbackSrc={imageFallbackSrc}
+          />
+        </GridItem>
+        {showSteps && steps &&
+          (
+            <GridItem
+              display="flex"
+              flexDirection="column"
+              alignItems="center"
+              justifyContent="center"
+              colStart={2}
+              colEnd={3}
+            >
+              <Step isMobile={isMobile} stepTitle={showCurrentStep ? `Step ${currentStep ?? ""} of ${steps.length}` : ''} mainTitle={steps?.find((step) => step.index === currentStep)?.title} />
+            </GridItem>
+          )}
+        <GridItem
+          display="flex"
+          alignItems="center"
+          justifyContent="flex-end"
+          colStart={3}
+          colEnd={4}
+        >
+          {showLanguageSelector &&
+            (
+              <Flex
+                direction="row"
+                justifyContent="center"
+                alignItems="center"
+                cursor="pointer"
+              >
+                <Box marginRight={showSupport ? isMobile ? 2 : 8 : 0}>
+                  <Menu>
+                    {({ isOpen }) => (
+                      <>
+                        <MenuButton>
+                          <Box display='flex' flexDirection='row' alignItems='center'>
+                            <GlobeIcon
+                              sx={{
+                                "@media (max-width: 768px)": {
+                                  display: "none",
+                                },
+                              }}
+                            />
+                            <Text fontSize={14} marginLeft="8px" marginRight="7px">{isMobile ? language?.labelSm : language?.label}</Text>
+                            {isOpen ? <ChevronDownIcon /> : <ChevronUpIcon />}
+                          </Box>
+                        </MenuButton>
+                        <MenuList border='none' sx={{
+                          padding: '4px',
+                          minW:'150px'
+                        }} >
+                          {languages?.map((lan) => <MenuItem sx={{
+                            bg: 'headerBg',
+                            '_hover': {
+                              bg: 'dropDownHover'
+                            }
+                          }} onClick={() => setLanguage?.(lan)} key={lan.value}>
+                            <Text fontSize={14}>{isMobile ? lan.labelSm : lan?.label}</Text>
+                          </MenuItem>)}
+                        </MenuList>
+                      </>
+                    )}
+                  </Menu>
+                </Box>
+              </Flex>
+            )
+          }
+          {showSupport && (
+            <Flex
+              direction="row"
+              justifyContent="center"
+              alignItems="center"
+              cursor="pointer"
+              onClick={onSupportClick}
+            >
+              <SupportIcon sx={{
+                'fill': textColor
+              }} />
+              <Text
+                marginLeft="12.3px"
+                color={textColor}
+                sx={{
+                  "@media (max-width: 768px)": {
+                    display: "none",
+                  },
+                }}
+                fontSize={14}
+              >
+                Support
+              </Text>
+            </Flex>
+          )}
+        </GridItem>
+      </Grid>
+      {
+        showProgressBar && steps &&
+        <ProgressBar
+          current={currentStep ?? 1}
+          routeStepsWithoutProgress={routeStepsWithoutProgress}
+          progressBarSteps={steps}
+          primaryColor={progressBarPrimaryColor}
+          backgroundColor={progressBarBackgroundColor} />
+      }
+    </Flex >
+  );
+};
+
+export type Language = {
+  label: string;
+  labelSm: string;
+  value: string;
+};
+
+
+export type HeaderProps = {
+  backgroundColor: string;
+  textColor: string;
+  imageSrc: string;
+  imageFallbackSrc: string;
+  showSupport?: boolean;
+  onSupportClick?: () => void;
+  showLanguageSelector?: boolean;
+  languages?: Language[];
+  language?: Language;
+  setLanguage?: (lan: Language) => void;
+  showSteps?: boolean;
+  steps?: HeaderStep[];
+  currentStep?: number;
+  showProgressBar?: boolean;
+  routeStepsWithoutProgress?: MultiStepRouteType[];
+  progressBarPrimaryColor?: string;
+  progressBarBackgroundColor?: string;
+  showCurrentStep?: boolean;
+};

package/src/alicia/common/Header/index.ts

@@ -0,0 +1 @@
+export { Header } from "./Header";

package/src/alicia/common/ProgressBar/ProgressBar.spec.tsx

@@ -0,0 +1,50 @@
+import { render } from "@testing-library/react";
+import '@testing-library/jest-dom';
+import { ProgressBar } from "./index";
+import { MultiStepRouteType } from 'types';
+const DEFAULT_HEADER_PROPS = {
+  progressBarSteps: [{
+    index: 1,
+    isNewSection: true,
+    sectionIndex: 0,
+    type: MultiStepRouteType.PERSONAL,
+    title: 'Your Claim'
+  },
+  {
+    index: 2,
+    isNewSection: true,
+    sectionIndex: 1,
+    type: MultiStepRouteType.CLAIM,
+    title: 'Personal Details'
+  },
+  {
+    index: 3,
+    isNewSection: false,
+    sectionIndex: 1,
+    type: MultiStepRouteType.CLAIM,
+    title: 'Address Details'
+  }, {
+    index: 4,
+    isNewSection: true,
+    sectionIndex: 1,
+    type: MultiStepRouteType.PAYMENT,
+    title: 'Approval'
+  }],
+  routeStepsWithoutProgress: [MultiStepRouteType.INTRO],
+  current: 1,
+};
+
+describe("Progress bar component testing with testing-library", () => {
+  it("renders without crashing", () => {
+    const component = render(<ProgressBar {...DEFAULT_HEADER_PROPS} />);
+
+    expect(component).toBeTruthy();
+  });
+});
+
+describe("Progress bar citems to be rendered properly", () => {
+  it("item with index 2 to be be in dom", () => {
+    const { getByLabelText } = render(<ProgressBar {...DEFAULT_HEADER_PROPS} />);
+    expect(getByLabelText('item-2')).toBeTruthy();
+  });
+});

package/src/alicia/common/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,56 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { MultiStepRouteType } from 'types';
+
+import { ProgressBar } from "./index";
+
+export default {
+  title: "Alicia/Common/ProgressBar",
+  component: ProgressBar,
+  argTypes: {},
+} as ComponentMeta<typeof ProgressBar>;
+
+const Template: ComponentStory<typeof ProgressBar> = (args) => {
+  return <ProgressBar {...args} />;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  primaryColor: '#006A70',
+  backgroundColor: '#EEEEEE',
+  current: 1,
+  routeStepsWithoutProgress: [],
+  progressBarSteps: [{
+    index: 1,
+    isNewSection: true,
+    sectionIndex: 0,
+    type: MultiStepRouteType.ADDITIONAL,
+    title: "step 1"
+  },
+  {
+    index: 2,
+    isNewSection: false,
+    sectionIndex: 0,
+    type: MultiStepRouteType.ADDITIONAL,
+    title: "step 2"
+  },
+  {
+    index: 3,
+    isNewSection: true,
+    sectionIndex: 1,
+    type: MultiStepRouteType.PAYMENT,
+    title: "step 3"
+  }, {
+    index: 4,
+    isNewSection: false,
+    sectionIndex: 1,
+    type: MultiStepRouteType.PAYMENT,
+    title: "step 4"
+  }, {
+    index: 5,
+    isNewSection: false,
+    sectionIndex: 1,
+    type: MultiStepRouteType.PAYMENT,
+    title: "step 5"
+  }]
+};
+

package/src/alicia/common/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,55 @@
+import { Box, Flex } from '@chakra-ui/react';
+import { FC } from "react";
+import { HeaderStep, MultiStepRouteType } from 'types';
+
+export const ProgressBar: FC<ProgressBarProps> = ({
+  routeStepsWithoutProgress,
+  current = 0,
+  progressBarSteps,
+  primaryColor = 'primary',
+  backgroundColor = 'gray.medium'
+}) => {
+
+  return (
+    <Flex width="100%" aria-label="progress-bar">
+      {progressBarSteps.filter((item) => !routeStepsWithoutProgress.includes(item.type)).map(({ index, isNewSection }, i) => (
+        <ProgressBarStepItem
+          index={index}
+          key={index}
+          backgroundColor={current >= index ? primaryColor : backgroundColor}
+          isNewSection={isNewSection && i !== 0} />
+      ))}
+    </Flex>
+  );
+};
+
+const ProgressBarStepItem: FC<ProgressBarStepItemProps> = ({
+  backgroundColor,
+  isNewSection = false,
+  index
+}) => {
+  return (
+    <Box
+      aria-label={`item-${index}`}
+      width="100%" height="4px"
+      bg={backgroundColor}
+      marginStart={isNewSection ? '4px' : "0"} />
+  );
+};
+
+type ProgressBarStepItemProps = {
+  backgroundColor: string;
+  isNewSection: boolean;
+  index: number;
+};
+
+type ProgressBarProps = {
+  routeStepsWithoutProgress: MultiStepRouteType[];
+  current: number;
+  progressBarSteps: HeaderStep[];
+  primaryColor?: string;
+  backgroundColor?: string;
+};
+
+
+

package/src/alicia/common/ProgressBar/index.ts

@@ -0,0 +1 @@
+export { ProgressBar } from "./ProgressBar";

package/src/alicia/common/RadioButtonGroup/RadioButtonGroup.stories.tsx

@@ -23,7 +23,7 @@ const Template: ComponentStory<typeof RadioButtonGroup> = (args) => {
 export const Primary = Template.bind({});
 
 Primary.args = {
-  isShownInColumn: true,
+  variant: 'column',
   options: [{ value: '1', label: 'label - 1' }, { value: '2', label: 'label - 2' }],
   spacing: 5,
 };

package/src/alicia/common/RadioButtonGroup/RadioButtonGroup.tsx

@@ -1,11 +1,11 @@
-import { Radio, RadioGroup, Stack } from '@chakra-ui/react';
+import { Radio, RadioGroup, Stack, RadioGroupProps as RadioGroupDefaultProps } from '@chakra-ui/react';
 import { FC } from 'react';
 
-export const RadioButtonGroup: FC<RadioButtonGroupProps> = ({ isShownInColumn = true, onChange, value, options, spacing = 1 }) => {
+export const RadioButtonGroup: FC<RadioButtonGroupProps> = ({ variant = 'row', onChange, value, options, spacing = 1, ...props }) => {
 
   return (
-    <RadioGroup onChange={onChange} value={value} >
-      <Stack direction={isShownInColumn ? 'column' : 'row'} spacing={spacing}>
+    <RadioGroup onChange={onChange} value={value} {...props}>
+      <Stack direction={variant} spacing={spacing}>
         {options.map((item) => (
           <Radio key={item.value} value={item.value}>{item.label}</Radio>
         ))}
@@ -15,8 +15,8 @@ export const RadioButtonGroup: FC<RadioButtonGroupProps> = ({ isShownInColumn =
 
 };
 
-type RadioButtonGroupProps = {
-  isShownInColumn?: boolean;
+type RadioButtonGroupProps = RadioGroupDefaultProps & {
+  variant?: 'column' | 'row';
   onChange: (value: any) => void;
   value: any;
   options: RadioButtonOptions[];

package/src/alicia/common/Step/Step.stories.tsx

@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Step } from "./Step";
+
+export default {
+    title: "Alicia/Common/Step",
+    component: Step,
+    argTypes: {},
+} as ComponentMeta<typeof Step>;
+
+const Template: ComponentStory<typeof Step> = (args) => {
+    return <Step {...args} />;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+    stepTitle: "Step 1 of 3",
+    mainTitle: 'Partner acceptance',
+    isMobile: false
+};

package/src/alicia/common/Step/Step.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Step } from './Step';
+
+test('Render main title', () => {
+    render(<Step mainTitle="Main title" stepTitle="" isMobile />);
+    expect(screen.getByText("Main title")).toBeInTheDocument();
+});
+
+test('Render main title and step title', () => {
+    render(<Step mainTitle="Main title" stepTitle="Step title" isMobile />);
+    expect(screen.getByText("Main title")).toBeInTheDocument();
+    expect(screen.getByText("Step title")).toBeInTheDocument();
+});

package/src/alicia/common/Step/Step.tsx

@@ -0,0 +1,22 @@
+import { Flex, Text } from '@chakra-ui/react';
+import { FC } from 'react';
+
+export const Step: FC<StepProps> = ({ stepTitle = "", mainTitle = "", isMobile }) => {
+
+  return (
+    <Flex
+      direction="column"
+      align="center"
+      justify="center"
+    >
+      {stepTitle !== "" && (<Text fontSize="10">{stepTitle}</Text>)}
+      {mainTitle !== "" && (<Text noOfLines={1} textAlign="center" fontSize={isMobile ? '12' : '18'} fontWeight="700">{mainTitle}</Text>)}
+    </Flex>
+  );
+};
+
+type StepProps = {
+  isMobile: boolean;
+  stepTitle?: string;
+  mainTitle?: string;
+};

package/src/alicia/common/icons/ChevronDownIcon.tsx

@@ -0,0 +1,16 @@
+import { createIcon } from '@chakra-ui/icons';
+
+export const ChevronDownIcon = createIcon({
+    displayName: 'ChevronDownIcon',
+    viewBox: '0 0 24 24',
+    path: (
+        <>
+            <mask id="mask0_268_1515" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+                <rect width="24" height="24" fill="#D9D9D9" />
+            </mask>
+            <g mask="url(#mask0_268_1515)">
+                <path d="M7.40002 14.4999L6.90002 13.9999L12 8.8999L17.1 13.9999L16.6 14.4999L12 9.8999L7.40002 14.4999Z" fill="#1E1E1E" />
+            </g>
+        </>
+    ),
+});

package/src/alicia/common/icons/ChevronUpIcon.tsx

@@ -0,0 +1,16 @@
+import { createIcon } from '@chakra-ui/icons';
+
+export const ChevronUpIcon = createIcon({
+    displayName: 'ChevronUpIcon',
+    viewBox: '0 0 24 24',
+    path: (
+        <>
+            <mask id="mask0_268_1377" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+                <rect width="24" height="24" fill="#D9D9D9" />
+            </mask>
+            <g mask="url(#mask0_268_1377)">
+                <path d="M12 14.4999L6.90002 9.3999L7.40002 8.8999L12 13.4999L16.6 8.8999L17.1 9.3999L12 14.4999Z" fill="#1E1E1E" />
+            </g>
+        </>
+    ),
+});

package/src/alicia/common/icons/GlobeIcon.tsx

@@ -0,0 +1,16 @@
+import { createIcon } from '@chakra-ui/icons';
+
+export const GlobeIcon = createIcon({
+    displayName: 'GlobeIcon',
+    viewBox: '0 0 24 24',
+    path: (
+        <>
+            <mask id="mask0_268_1509" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+                <rect width="24" height="24" fill="#D9D9D9" />
+            </mask>
+            <g mask="url(#mask0_268_1509)">
+                <path d="M12 20.6998C10.8 20.6998 9.67105 20.4705 8.61305 20.0118C7.55438 19.5538 6.63338 18.9331 5.85005 18.1498C5.06672 17.3665 4.44572 16.4455 3.98705 15.3868C3.52905 14.3288 3.30005 13.1998 3.30005 11.9998C3.30005 10.7998 3.52905 9.67047 3.98705 8.6118C4.44572 7.5538 5.06672 6.63314 5.85005 5.8498C6.63338 5.06647 7.55438 4.44547 8.61305 3.9868C9.67105 3.5288 10.8 3.2998 12 3.2998C13.2 3.2998 14.3294 3.5288 15.388 3.9868C16.446 4.44547 17.3667 5.06647 18.15 5.8498C18.9334 6.63314 19.5544 7.5538 20.0131 8.6118C20.4711 9.67047 20.7001 10.7998 20.7001 11.9998C20.7001 13.1998 20.4711 14.3288 20.0131 15.3868C19.5544 16.4455 18.9334 17.3665 18.15 18.1498C17.3667 18.9331 16.446 19.5538 15.388 20.0118C14.3294 20.4705 13.2 20.6998 12 20.6998ZM12 20.0248C12.6334 19.2248 13.15 18.4498 13.55 17.6998C13.95 16.9498 14.275 16.0998 14.525 15.1498H9.47505C9.75838 16.1665 10.0917 17.0498 10.475 17.7998C10.8584 18.5498 11.3667 19.2915 12 20.0248ZM11.125 19.9498C10.6084 19.3998 10.1334 18.6871 9.70005 17.8118C9.26672 16.9371 8.95005 16.0498 8.75005 15.1498H4.65005C5.25005 16.5165 6.12505 17.6248 7.27505 18.4748C8.42505 19.3248 9.70838 19.8165 11.125 19.9498ZM12.875 19.9498C14.2917 19.8165 15.575 19.3248 16.725 18.4748C17.875 17.6248 18.75 16.5165 19.35 15.1498H15.25C14.9667 16.0665 14.6084 16.9621 14.175 17.8368C13.7417 18.7121 13.3084 19.4165 12.875 19.9498ZM4.37505 14.4498H8.60005C8.51672 14.0165 8.45838 13.5958 8.42505 13.1878C8.39172 12.7791 8.37505 12.3831 8.37505 11.9998C8.37505 11.6165 8.39172 11.2205 8.42505 10.8118C8.45838 10.4038 8.51672 9.98314 8.60005 9.5498H4.37505C4.25838 9.8998 4.16672 10.2915 4.10005 10.7248C4.03338 11.1581 4.00005 11.5831 4.00005 11.9998C4.00005 12.4165 4.03338 12.8415 4.10005 13.2748C4.16672 13.7081 4.25838 14.0998 4.37505 14.4498ZM9.30005 14.4498H14.7C14.7834 14.0165 14.8417 13.6038 14.875 13.2118C14.9084 12.8205 14.925 12.4165 14.925 11.9998C14.925 11.5831 14.9084 11.1788 14.875 10.7868C14.8417 10.3955 14.7834 9.98314 14.7 9.5498H9.30005C9.21672 9.98314 9.15838 10.3955 9.12505 10.7868C9.09172 11.1788 9.07505 11.5831 9.07505 11.9998C9.07505 12.4165 9.09172 12.8205 9.12505 13.2118C9.15838 13.6038 9.21672 14.0165 9.30005 14.4498ZM15.4 14.4498H19.625C19.7417 14.0998 19.8334 13.7081 19.9 13.2748C19.9667 12.8415 20 12.4165 20 11.9998C20 11.5831 19.9667 11.1581 19.9 10.7248C19.8334 10.2915 19.7417 9.8998 19.625 9.5498H15.4C15.4834 9.98314 15.5417 10.4038 15.575 10.8118C15.6084 11.2205 15.625 11.6165 15.625 11.9998C15.625 12.3831 15.6084 12.7791 15.575 13.1878C15.5417 13.5958 15.4834 14.0165 15.4 14.4498ZM15.25 8.8498H19.35C18.7334 7.4498 17.871 6.34147 16.763 5.5248C15.6544 4.70814 14.3584 4.20814 12.875 4.0248C13.3917 4.65814 13.8584 5.3998 14.275 6.2498C14.6917 7.0998 15.0167 7.96647 15.25 8.8498ZM9.47505 8.8498H14.525C14.2417 7.8498 13.896 6.9538 13.488 6.1618C13.0794 5.37047 12.5834 4.64147 12 3.9748C11.4167 4.64147 10.9207 5.37047 10.512 6.1618C10.104 6.9538 9.75838 7.8498 9.47505 8.8498ZM4.65005 8.8498H8.75005C8.98338 7.96647 9.30838 7.0998 9.72505 6.2498C10.1417 5.3998 10.6084 4.65814 11.125 4.0248C9.62505 4.20814 8.32505 4.71214 7.22505 5.5368C6.12505 6.36214 5.26672 7.46647 4.65005 8.8498Z" fill="#1E1E1E" />
+            </g>
+        </>
+    ),
+});

package/src/alicia/common/icons/SupportIcon.tsx

@@ -0,0 +1,11 @@
+import { createIcon } from "@chakra-ui/icons";
+
+export const SupportIcon = createIcon({
+    displayName: "SupportIcon",
+    viewBox: "0 0 16 18",
+    path: (
+        <path
+            d="M8.00005 17.9V17.2H14.2C14.4334 17.2 14.625 17.125 14.775 16.975C14.925 16.825 15 16.6333 15 16.4V15.7H12.2V10.1H15V7.99999C15 6.06665 14.3167 4.41665 12.95 3.04999C11.5834 1.68332 9.93338 0.999988 8.00005 0.999988C6.06672 0.999988 4.41672 1.68332 3.05005 3.04999C1.68338 4.41665 1.00005 6.06665 1.00005 7.99999V10.1H3.80005V15.7H1.80005C1.36672 15.7 1.00838 15.5583 0.725049 15.275C0.441715 14.9917 0.300049 14.6333 0.300049 14.2V7.99999C0.300049 6.93332 0.500049 5.93332 0.900049 4.99999C1.30005 4.06665 1.85005 3.24999 2.55005 2.54999C3.25005 1.84999 4.06672 1.29999 5.00005 0.899988C5.93338 0.499988 6.93338 0.299988 8.00005 0.299988C9.06672 0.299988 10.0667 0.499988 11 0.899988C11.9334 1.29999 12.75 1.84999 13.45 2.54999C14.15 3.24999 14.7 4.06665 15.1 4.99999C15.5 5.93332 15.7 6.93332 15.7 7.99999V16.4C15.7 16.8333 15.5584 17.1917 15.275 17.475C14.9917 17.7583 14.6334 17.9 14.2 17.9H8.00005ZM1.80005 15H3.10005V10.8H1.00005V14.2C1.00005 14.4333 1.07505 14.625 1.22505 14.775C1.37505 14.925 1.56672 15 1.80005 15ZM12.9 15H15V10.8H12.9V15ZM15 15H12.9H15ZM3.10005 15H1.00005H3.10005Z"
+        />
+    ),
+});

package/src/alicia/common/icons/index.ts

@@ -1,4 +1,8 @@
 export * from './DeleteIcon';
 export * from './PdfIcon';
 export * from './UploadIcon';
-export * from './InfoIcon';
+export * from './InfoIcon';
+export * from './SupportIcon';
+export * from './ChevronUpIcon';
+export * from './ChevronDownIcon';
+export * from './GlobeIcon';

package/src/assets/vectors/alicia.svg

@@ -0,0 +1,17 @@
+<svg width="83" height="32" viewBox="0 0 83 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_268_1358)">
+<path d="M16.4388 21.7486H6.26221L4.11629 27.2823H0L9.06637 4.71729H13.7751L22.8459 27.2823H18.5453L16.4388 21.7486ZM7.56116 18.4968H15.175L11.4449 8.76336H11.3527L7.56116 18.4968Z" fill="#1E1E1E"/>
+<path d="M24.101 27.2823V4.02393H28.1426V27.2823H24.101Z" fill="#1E1E1E"/>
+<path d="M31.0959 4.55957H35.3966V8.5091H31.0959V4.55957ZM31.2232 11.2299H35.2693V27.2826H31.2232V11.2299Z" fill="#1E1E1E"/>
+<path d="M45.4064 10.8481C49.3911 10.8481 51.9495 13.1564 52.3927 16.7242H48.566C48.2501 14.9688 47.21 13.8805 45.3757 13.8805C42.8173 13.8805 41.3954 16.0001 41.3954 19.2563C41.3954 22.5124 42.8173 24.6276 45.3757 24.6276C47.21 24.6276 48.2501 23.4867 48.566 21.784H52.3927C51.9539 25.3824 49.3911 27.66 45.4064 27.66C40.6977 27.66 37.3494 24.4696 37.3494 19.2563C37.3494 14.0429 40.6977 10.8481 45.4064 10.8481Z" fill="#1E1E1E"/>
+<path d="M54.3062 4.55957H58.6068V8.5091H54.3062V4.55957ZM54.4334 11.2299H58.4795V27.2826H54.4159L54.4334 11.2299Z" fill="#1E1E1E"/>
+<path d="M71.2759 24.7505C70.5167 26.5848 68.4937 27.6293 65.9353 27.6293C62.8064 27.6293 60.5332 25.8739 60.5332 22.982C60.5332 19.7609 63.0609 18.4312 66.3127 18.0538L71.118 17.5185V16.7593C71.118 14.7977 69.9155 13.8498 68.0856 13.8498C66.2556 13.8498 65.2419 14.8284 65.1147 16.3161H61.2266C61.5732 12.8712 64.2589 10.8481 68.2129 10.8481C72.5705 10.8481 75.0675 12.9019 75.0675 17.0752V23.2672C75.0368 24.6145 75.1465 25.9573 75.3834 27.2826H71.4954C71.3461 26.4488 71.2759 25.5975 71.2759 24.7505ZM71.118 21.0555V20.0769L67.5458 20.485C65.8387 20.7088 64.5442 21.0862 64.5442 22.7626C64.5442 24.0264 65.4218 24.8163 67.0412 24.8163C69.1256 24.8163 71.118 23.5832 71.118 21.0555Z" fill="#1E1E1E"/>
+<path d="M82.1109 0V32H81.5184V0H82.1109Z" fill="#1E1E1E"/>
+<path d="M78.9599 6.53846C78.9599 7.60045 78.0954 8.46057 77.0335 8.45618C75.9715 8.45179 75.1114 7.59167 75.1157 6.52969C75.1157 5.4677 75.9802 4.60758 77.0422 4.61197C78.0867 4.59881 78.9468 5.4326 78.9599 6.47703C78.9599 6.49897 78.9599 6.51652 78.9599 6.53846ZM78.6923 6.53846C78.6747 5.62568 77.9243 4.9016 77.0115 4.91916C76.0987 4.93671 75.3747 5.68712 75.3922 6.5999C75.4098 7.49952 76.1426 8.21921 77.0422 8.21921C77.9419 8.23238 78.6791 7.51268 78.6923 6.61307C78.6923 6.58674 78.6923 6.5648 78.6923 6.53846ZM76.2743 7.53024V5.48087H77.1519C77.6171 5.48087 77.9024 5.70906 77.9024 6.12596C77.9155 6.39365 77.7488 6.63501 77.4942 6.714L77.977 7.52585H77.5381L77.0993 6.78421H76.6604V7.52585H76.2743V7.53024ZM77.0993 6.45947C77.3758 6.45947 77.503 6.35854 77.503 6.13473C77.503 5.91093 77.3758 5.81438 77.0993 5.81438H76.6604V6.45947H77.0993Z" fill="#1E1E1E"/>
+</g>
+<defs>
+<clipPath id="clip0_268_1358">
+<rect width="82.1108" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/setupTests.ts

@@ -3,3 +3,11 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+
+window.matchMedia = window.matchMedia || function () {
+    return {
+        matches: false,
+        addListener: function () { },
+        removeListener: function () { }
+    };
+};

package/src/styles/chakraTheme.ts

@@ -24,6 +24,7 @@ export const chakraTheme = extendTheme({
   colors: {
     error: '#AC0000',
     cardBg: '#F2F2F2',
+    headerBg: '#F3F3F3',
     whiteDe: ({ colorMode }: { colorMode: string; }) => colorModeValues(colorMode, '#000000', '#FFFFFF'),
     blackDe: ({ colorMode }: { colorMode: string; }) => colorModeValues(colorMode, '#FFFFFF', '#000000'),
     blackLi: ({ colorMode }: { colorMode: string; }) => colorModeValues(colorMode, '#FFFFFF', 'rgba(0,0,0,0.33)'),
@@ -40,7 +41,6 @@ export const chakraTheme = extendTheme({
       800: '#004a4e',
       900: '#004043',
     },
-
     black: Object.assign('#13100D', {
       light: 'rgba(0,0,0,0.33)',
       medium: 'rgba(0,0,0,0.8)',
@@ -69,6 +69,7 @@ export const chakraTheme = extendTheme({
     text: '#003957',
     textSecondary: '#275B76',
     hover: '#F5FcFc',
+    dropDownHover: 'rgba(181, 201, 255, 1)',
   },
   sizes: {
     md: '544px',
@@ -123,7 +124,8 @@ export const chakraTheme = extendTheme({
     Checkbox: {
       baseStyle: {
         control: {
-          borderColor: "gray.light",
+          borderColor: "black.medium",
+          borderWidth: '1px',
           height: '24px',
           width: '24px',
           _checked: {

package/src/types/index.ts

@@ -1,3 +1,4 @@
 // Modules
 export * from "./general";
 export * from "styles/types";
+export * from "./route";

package/src/types/route.ts

@@ -0,0 +1,19 @@
+export type MultiStepRoute = {
+  name: string;
+  path: string;
+  component: React.FC;
+  type: MultiStepRouteType;
+  customTitle?: string;
+};
+
+export enum MultiStepRouteType {
+  PERSONAL, ADDITIONAL, PAYMENT, CLAIM, EXIT_SURVEY, INTRO,
+}
+
+export type HeaderStep = {
+  index: number;
+  isNewSection: boolean;
+  sectionIndex: number;
+  type: MultiStepRouteType;
+  title: string;
+};

package/src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});