@zealicsolutions/web-ui 0.1.48 → 0.1.50

package/dist/esm/src/molecules/Stepper/Step.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { OrientationType } from './Stepper';
+export declare type StepProps = {
+    step: {
+        title?: string;
+        description?: string;
+    };
+    stepsNumber: number;
+    order: number;
+    orientation?: OrientationType;
+    active: number;
+};
+export declare const Step: ({ stepsNumber, step: { title, description }, orientation, order, active, }: StepProps) => JSX.Element;

package/dist/esm/src/molecules/Stepper/Stepper.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare type OrientationType = 'horizontal' | 'vertical';
+export declare type StepperProps = {
+    steps: {
+        title?: string;
+        description?: string;
+    }[];
+    active: number;
+    orientation?: OrientationType;
+};
+export declare const Stepper: ({ active, steps, orientation }: StepperProps) => JSX.Element;

package/dist/esm/src/molecules/Stepper/styles.d.ts

@@ -0,0 +1,19 @@
+import { OrientationType } from 'molecules/Stepper/Stepper';
+export declare const StepperWrapper: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {
+    orientation?: OrientationType | undefined;
+}, never>;
+export declare const StepWrapper: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    orientation?: OrientationType | undefined;
+}, never>;
+export declare const VerticalWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    orientation?: OrientationType | undefined;
+    isLastChild?: boolean | undefined;
+}, never>;
+export declare const CustomStep: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    done?: boolean | undefined;
+    current?: boolean | undefined;
+    orientation?: OrientationType | undefined;
+}, never>;
+export declare const ConnectionLine: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    orientation?: OrientationType | undefined;
+}, never>;

package/dist/esm/src/molecules/index.d.ts

@@ -16,3 +16,4 @@ export * from './MenuNavigation/MenuNavigation';
 export * from './EmphasizedText/EmphasizedText';
 export * from './RadioButtonField/RadioButtonField';
 export * from './Alert/Alert';
+export * from './Stepper/Stepper';

package/dist/esm/src/organisms/Header/HeaderA.d.ts

@@ -6,6 +6,7 @@ declare type ImportantLink = {
     href: string;
 };
 export declare type HeaderAProps<T = string> = {
+    className?: string;
     links?: ImportantLink[];
     logoUrl: string;
     tabsProps: TabGroupProps;
@@ -14,5 +15,5 @@ export declare type HeaderAProps<T = string> = {
     buttonLink: string;
     isMobile?: boolean;
 };
-export declare const HeaderA: <T extends string | number>({ logoUrl, links, onActionButtonClick, tabsProps, buttonText, isMobile, buttonLink, }: HeaderAProps<T>) => JSX.Element;
+export declare const HeaderA: <T extends string | number>({ logoUrl, links, onActionButtonClick, tabsProps, buttonText, isMobile, className, buttonLink, }: HeaderAProps<T>) => JSX.Element;
 export {};

package/dist/esm/src/organisms/Header/HeaderB.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { HeaderAProps } from 'organisms/Header/HeaderA';
-export declare type HeaderBProps<T = string> = Pick<HeaderAProps<T>, 'isMobile' | 'logoUrl' | 'tabsProps' | 'buttonText' | 'onActionButtonClick' | 'buttonLink'>;
-export declare const HeaderB: <T extends string | number>({ logoUrl, onActionButtonClick, buttonText, isMobile, tabsProps, buttonLink, }: HeaderBProps<T>) => JSX.Element;
+export declare type HeaderBProps<T = string> = Pick<HeaderAProps<T>, 'isMobile' | 'logoUrl' | 'tabsProps' | 'buttonText' | 'onActionButtonClick' | 'buttonLink' | 'className'>;
+export declare const HeaderB: <T extends string | number>({ logoUrl, onActionButtonClick, buttonText, isMobile, tabsProps, className, buttonLink, }: HeaderBProps<T>) => JSX.Element;

package/dist/esm/src/organisms/Header/HeaderC.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { HeaderAProps } from 'organisms/Header/HeaderA';
-export declare type HeaderCProps<T> = Pick<HeaderAProps<T>, 'logoUrl' | 'tabsProps' | 'isMobile'>;
-export declare const HeaderC: <T extends string | number>({ logoUrl, tabsProps, isMobile, }: HeaderCProps<T>) => JSX.Element;
+export declare type HeaderCProps<T> = Pick<HeaderAProps<T>, 'logoUrl' | 'tabsProps' | 'isMobile' | 'className'>;
+export declare const HeaderC: <T extends string | number>({ logoUrl, tabsProps, isMobile, className, }: HeaderCProps<T>) => JSX.Element;

package/dist/esm/src/organisms/Header/HeaderD.d.ts

@@ -3,5 +3,5 @@ import { AvatarDropdownProps } from 'molecules';
 import { HeaderAProps } from 'organisms/Header/HeaderA';
 export declare type HeaderDProps = {
     withAvatar: AvatarDropdownProps<string>;
-} & Pick<HeaderAProps, 'isMobile' | 'logoUrl' | 'links' | 'tabsProps'>;
-export declare const HeaderD: ({ tabsProps, logoUrl, links, withAvatar, isMobile }: HeaderDProps) => JSX.Element;
+} & Pick<HeaderAProps, 'isMobile' | 'logoUrl' | 'links' | 'tabsProps' | 'className'>;
+export declare const HeaderD: ({ tabsProps, logoUrl, links, withAvatar, isMobile, className, }: HeaderDProps) => JSX.Element;

package/dist/esm/src/organisms/ProcessTracker/ProcessTracker.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { CSSProperties } from 'styled-components';
+export declare type ProcessTrackerProps = {
+    title?: string;
+    description?: string;
+    isMobile?: boolean;
+    states?: {
+        title: string;
+        description: string;
+    }[];
+    activeStep?: number;
+    style?: CSSProperties;
+};
+export declare const ProcessTracker: ({ title, states, isMobile, description, activeStep, style, }: ProcessTrackerProps) => JSX.Element;

package/dist/esm/src/organisms/ProcessTracker/ProcessTracker.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ComponentStory } from '@storybook/react';
+import { ProcessTracker as ProcessTrackerComponent, ProcessTrackerProps } from 'organisms';
+declare const _default: {
+    title: string;
+    component: ({ title, states, isMobile, description, activeStep, style, }: ProcessTrackerProps) => JSX.Element;
+};
+export default _default;
+export declare const ProcessTracker: ComponentStory<typeof ProcessTrackerComponent>;
+export declare const processTrackerMockProps: ProcessTrackerProps;

package/dist/esm/src/organisms/index.d.ts

@@ -10,3 +10,4 @@ export * from './Body/Body';
 export * from './ISI/ISI';
 export * from './Header/Header';
 export * from './Consent/Consent';
+export * from './ProcessTracker/ProcessTracker';

package/dist/esm/src/templates/DefaultTemplate/DefaultTemplate.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
 import { AlertProps } from 'molecules/Alert/Alert';
+import { ProcessTrackerProps } from 'organisms';
 export declare type DefaultTemplateProps = {
     alerts?: AlertProps[];
+    processTracker?: ProcessTrackerProps;
     header: React.ReactNode;
     banner?: React.ReactNode;
     content?: React.ReactNode;
 };
-export declare const DefaultTemplate: ({ header, banner, content, alerts }: DefaultTemplateProps) => JSX.Element;
+export declare const DefaultTemplate: ({ header, banner, content, alerts, processTracker, }: DefaultTemplateProps) => JSX.Element;

package/dist/esm/src/templates/DefaultTemplate/DefaultTemplate.stories.d.ts

@@ -3,7 +3,7 @@ import type { ComponentStory } from '@storybook/react';
 import { DefaultTemplate as DefaultTemplateComponent } from './DefaultTemplate';
 declare const _default: {
     title: string;
-    component: ({ header, banner, content, alerts }: import("./DefaultTemplate").DefaultTemplateProps) => JSX.Element;
+    component: ({ header, banner, content, alerts, processTracker, }: import("./DefaultTemplate").DefaultTemplateProps) => JSX.Element;
 };
 export default _default;
 export declare const DefaultTemplate: ComponentStory<typeof DefaultTemplateComponent>;

package/dist/esm/src/theme/types.d.ts

@@ -1,4 +1,4 @@
-export declare type ThemeColors = 'primary' | 'secondary' | 'background' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'indigo' | 'blue' | 'white' | 'black' | 'indigoTint' | 'indigoTint2' | 'success' | 'error' | 'warning';
+export declare type ThemeColors = 'primary' | 'secondary' | 'background' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'indigo' | 'blue' | 'white' | 'black' | 'indigoTint' | 'indigoTint2' | 'success' | 'error' | 'warning' | 'green';
 export declare type SizesTypes = '2XL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
 export declare type FontSizesTypes = SizesTypes | 'H2';
 export declare type BreakpointSizesTypes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/index.d.ts

@@ -19,7 +19,7 @@ import { Control, ControllerProps } from 'react-hook-form/dist/types';
 import { SelectOption as SelectOption$1 } from 'atoms/Select/types';
 import { ControllerProps as ControllerProps$1, DeepPartial, FieldValues, FormState } from 'react-hook-form';
 import { SetPasswordFields, MaxRuleValidation, MinRuleValidation } from 'organisms/SetPasswordForm/types';
-import { ConsentProps as ConsentProps$1 } from 'organisms';
+import { ConsentProps as ConsentProps$1, ProcessTrackerProps as ProcessTrackerProps$1 } from 'organisms';
 import { FooterAProps } from 'organisms/Footer/FooterA';
 import { FooterBProps } from 'organisms/Footer/FooterB';
 import { FooterCProps } from 'organisms/Footer/FooterC';
@@ -393,7 +393,7 @@ declare const ZealThemeProvider: (props: PropsWithChildren<{
     theme?: DefaultTheme;
 }>) => JSX.Element;
 
-declare type ThemeColors = 'primary' | 'secondary' | 'background' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'indigo' | 'blue' | 'white' | 'black' | 'indigoTint' | 'indigoTint2' | 'success' | 'error' | 'warning';
+declare type ThemeColors = 'primary' | 'secondary' | 'background' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'indigo' | 'blue' | 'white' | 'black' | 'indigoTint' | 'indigoTint2' | 'success' | 'error' | 'warning' | 'green';
 declare type SizesTypes = '2XL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
 declare type FontSizesTypes = SizesTypes | 'H2';
 declare type BreakpointSizesTypes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -557,6 +557,17 @@ declare type AlertProps = {
 };
 declare const Alert: ({ logo, title, withCloseIcon, description, style, ...props }: AlertProps) => JSX.Element;
 
+declare type OrientationType = 'horizontal' | 'vertical';
+declare type StepperProps = {
+    steps: {
+        title?: string;
+        description?: string;
+    }[];
+    active: number;
+    orientation?: OrientationType;
+};
+declare const Stepper: ({ active, steps, orientation }: StepperProps) => JSX.Element;
+
 declare type SetPasswordRuleValidation = {
     label: string;
     rule: MaxRuleValidation | MinRuleValidation;
@@ -681,6 +692,7 @@ declare type ImportantLink = {
     href: string;
 };
 declare type HeaderAProps<T = string> = {
+    className?: string;
     links?: ImportantLink[];
     logoUrl: string;
     tabsProps: TabGroupProps$1;
@@ -690,13 +702,13 @@ declare type HeaderAProps<T = string> = {
     isMobile?: boolean;
 };
 
-declare type HeaderBProps<T = string> = Pick<HeaderAProps$1<T>, 'isMobile' | 'logoUrl' | 'tabsProps' | 'buttonText' | 'onActionButtonClick' | 'buttonLink'>;
+declare type HeaderBProps<T = string> = Pick<HeaderAProps$1<T>, 'isMobile' | 'logoUrl' | 'tabsProps' | 'buttonText' | 'onActionButtonClick' | 'buttonLink' | 'className'>;
 
-declare type HeaderCProps<T> = Pick<HeaderAProps$1<T>, 'logoUrl' | 'tabsProps' | 'isMobile'>;
+declare type HeaderCProps<T> = Pick<HeaderAProps$1<T>, 'logoUrl' | 'tabsProps' | 'isMobile' | 'className'>;
 
 declare type HeaderDProps = {
     withAvatar: AvatarDropdownProps$1<string>;
-} & Pick<HeaderAProps$1, 'isMobile' | 'logoUrl' | 'links' | 'tabsProps'>;
+} & Pick<HeaderAProps$1, 'isMobile' | 'logoUrl' | 'links' | 'tabsProps' | 'className'>;
 
 declare type HeaderProps<T = string> = (HeaderAProps<T> & {
     type: 'header_a';
@@ -735,13 +747,27 @@ declare type ConsentProps<T extends string = string> = {
 };
 declare const Consent: <T extends string>({ text, consentCaptureProps, containerStyles, clearStyles, }: ConsentProps<T>) => JSX.Element;
 
+declare type ProcessTrackerProps = {
+    title?: string;
+    description?: string;
+    isMobile?: boolean;
+    states?: {
+        title: string;
+        description: string;
+    }[];
+    activeStep?: number;
+    style?: CSSProperties;
+};
+declare const ProcessTracker: ({ title, states, isMobile, description, activeStep, style, }: ProcessTrackerProps) => JSX.Element;
+
 declare type DefaultTemplateProps = {
     alerts?: AlertProps$1[];
+    processTracker?: ProcessTrackerProps$1;
     header: React.ReactNode;
     banner?: React.ReactNode;
     content?: React.ReactNode;
 };
-declare const DefaultTemplate: ({ header, banner, content, alerts }: DefaultTemplateProps) => JSX.Element;
+declare const DefaultTemplate: ({ header, banner, content, alerts, processTracker, }: DefaultTemplateProps) => JSX.Element;
 
 interface Helpers {
     goToNextStep: () => void;
@@ -781,4 +807,4 @@ declare type AnnotationsList = {
 
 declare const useMlrRichTextViewerContext: () => contexts_MlrRichTextViewerContext_MlrRichTextViewerContext.MlrRichTextViewerContextType;
 
-export { AcquisitionForm, AcquisitionFormProps, Alert, AlertProps, AnnotationsList, AuthMethod, Avatar, AvatarDropdown, AvatarDropdownProps, AvatarProps, BaseButtonProps, Body, BodyProps, BreakpointSizesTypes, Button, ButtonProps, CaretIconWrapper, CheckBoxProps, Checkbox, CheckboxField, CheckboxFieldProps, Circle, CircleBoxProps, ColumnItem, Columns, ColumnsProps, Consent, ConsentProps, CustomValidation, CustomValidationProps, CustomValidationRule, DefaultTemplate, DefaultTemplateProps, Divider, DividerProps, Drawer, EmphasizedText, EmphasizedTextProps, FieldLabels, FieldLabelsProps, FieldMapper, FieldMapperProps, FieldRuleLabelTypes, FieldSection, FieldSectionProps, FieldTypes, FontSizesTypes, Footer, FooterContentInfo, FooterLink, FooterProps, ForgotPasswordForm, ForgotPasswordFormProps, GoogleMap, GoogleMapProps, Header, HeaderProps, HeroImage, HeroImageAlignment, HeroImageProps, HorizontalPadding, HorizontalPaddingProps, ISI, ISIProps, Icon, IconNames, IconProps, Image, ImageProps, Input, InputField, InputFieldProps, InputFieldTypes, InputIconProps, InputProps, LinkButton, LinkButtonProps, LoginForm, LoginFormProps, MapPosition, MenuItem, MenuItems, MenuItemsProps, MenuNavigation, MenuNavigationProps, MlrRichTextViewerContext, MlrRichTextViewerContextType, MlrRichTextViewerProvider, MlrRichTextViewerProviderProps, ProfileInformation, ProfileInformationProps, RadioButtonField, RadioButtonFieldProps, RadioButtonType, RadioButtons, RadioButtonsProps, RichTextEditorProps, RichTextViewer, Select, SelectField, SelectFieldProps, SelectableCardGroup, SelectableCardGroupProps, SetPasswordForm, SetPasswordFormProps, SetPasswordRuleValidation, SizesTypes, Spacer, SpacerProps, Spinner, StyleWrapper, TabGroup, TabGroupProps, TextTypes, TextWrapper, TextWrapperProps, ThemeColors, ThemeColorsType, ThemeDevicesType, ThemeSizesType, ThemeTextType, Tooltip, TooltipProps, TouchableOpacity, TouchableOpacityProps, TwoFactorAuth, TwoFactorAuthProps, UICheckboxField, UIField, UIFields, UIInputField, UISelectField, ValidationTag, ValidationTagProps, ValidationTagStatus, VerticalPadding, ZealTheme, ZealThemeProvider, acquisitionFormMockFields, defaultTheme, getFieldPlaceholder, getFieldsFromFieldSections, getInitialValuesFromFields, isFormValid, loginMockFields, profileInformationMockForm, sectionMockFields, setPasswordMockFields, toast, toastStyles, useMediaQuery, useMlrRichTextViewerContext, useStep };
+export { AcquisitionForm, AcquisitionFormProps, Alert, AlertProps, AnnotationsList, AuthMethod, Avatar, AvatarDropdown, AvatarDropdownProps, AvatarProps, BaseButtonProps, Body, BodyProps, BreakpointSizesTypes, Button, ButtonProps, CaretIconWrapper, CheckBoxProps, Checkbox, CheckboxField, CheckboxFieldProps, Circle, CircleBoxProps, ColumnItem, Columns, ColumnsProps, Consent, ConsentProps, CustomValidation, CustomValidationProps, CustomValidationRule, DefaultTemplate, DefaultTemplateProps, Divider, DividerProps, Drawer, EmphasizedText, EmphasizedTextProps, FieldLabels, FieldLabelsProps, FieldMapper, FieldMapperProps, FieldRuleLabelTypes, FieldSection, FieldSectionProps, FieldTypes, FontSizesTypes, Footer, FooterContentInfo, FooterLink, FooterProps, ForgotPasswordForm, ForgotPasswordFormProps, GoogleMap, GoogleMapProps, Header, HeaderProps, HeroImage, HeroImageAlignment, HeroImageProps, HorizontalPadding, HorizontalPaddingProps, ISI, ISIProps, Icon, IconNames, IconProps, Image, ImageProps, Input, InputField, InputFieldProps, InputFieldTypes, InputIconProps, InputProps, LinkButton, LinkButtonProps, LoginForm, LoginFormProps, MapPosition, MenuItem, MenuItems, MenuItemsProps, MenuNavigation, MenuNavigationProps, MlrRichTextViewerContext, MlrRichTextViewerContextType, MlrRichTextViewerProvider, MlrRichTextViewerProviderProps, OrientationType, ProcessTracker, ProcessTrackerProps, ProfileInformation, ProfileInformationProps, RadioButtonField, RadioButtonFieldProps, RadioButtonType, RadioButtons, RadioButtonsProps, RichTextEditorProps, RichTextViewer, Select, SelectField, SelectFieldProps, SelectableCardGroup, SelectableCardGroupProps, SetPasswordForm, SetPasswordFormProps, SetPasswordRuleValidation, SizesTypes, Spacer, SpacerProps, Spinner, Stepper, StepperProps, StyleWrapper, TabGroup, TabGroupProps, TextTypes, TextWrapper, TextWrapperProps, ThemeColors, ThemeColorsType, ThemeDevicesType, ThemeSizesType, ThemeTextType, Tooltip, TooltipProps, TouchableOpacity, TouchableOpacityProps, TwoFactorAuth, TwoFactorAuthProps, UICheckboxField, UIField, UIFields, UIInputField, UISelectField, ValidationTag, ValidationTagProps, ValidationTagStatus, VerticalPadding, ZealTheme, ZealThemeProvider, acquisitionFormMockFields, defaultTheme, getFieldPlaceholder, getFieldsFromFieldSections, getInitialValuesFromFields, isFormValid, loginMockFields, profileInformationMockForm, sectionMockFields, setPasswordMockFields, toast, toastStyles, useMediaQuery, useMlrRichTextViewerContext, useStep };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zealicsolutions/web-ui",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"