@zealicsolutions/web-ui 0.2.50 → 0.2.52

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

@@ -1,5 +1,5 @@
-export declare const AppLogo: string;
-export declare const HomeHeroImage: string;
-export declare const ProfileGraphic: string;
-export declare const PulseEmblem: string;
-export declare const Logo: string;
+export declare const AppLogo: any;
+export declare const HomeHeroImage: any;
+export declare const ProfileGraphic: any;
+export declare const PulseEmblem: any;
+export declare const Logo: any;

package/dist/esm/src/atoms/Icon/Icon.d.ts

@@ -6,6 +6,7 @@ export declare type IconProps = {
     color?: ThemeColors | string;
     fill?: ThemeColors | string;
     pointerEvents?: 'auto' | 'none';
+    style?: React.CSSProperties;
 };
 declare const availableIcons: {
     CaretDown: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
@@ -28,6 +29,7 @@ declare const availableIcons: {
     Menu: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
     Search: ({ size, color, ...props }: Omit<IconProps, "name">) => JSX.Element;
     Bookmark: ({ fill, color, size, ...props }: Omit<IconProps, "name">) => JSX.Element;
+    ArrowRight: ({ color, ...props }: Omit<IconProps, "name">) => JSX.Element;
 };
 export declare type IconNames = keyof typeof availableIcons;
 export declare const Icon: ({ name, color, ...props }: IconProps) => JSX.Element;

package/dist/esm/src/atoms/Image/Image.d.ts

@@ -5,3 +5,4 @@ export declare type ImageProps = {
     style?: CSSProperties;
 };
 export declare const Image: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, ImageProps, never>;
+export declare const BackgroundImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, ImageProps, never>;

package/dist/esm/src/icons/ArrowRight.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from 'atoms/Icon/Icon';
+export declare const ArrowRight: ({ color, ...props }: Omit<IconProps, 'name'>) => JSX.Element;

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

@@ -20,3 +20,4 @@ export { Save } from './Save';
 export { Menu } from './Menu';
 export { Play } from './Play';
 export { Search } from './Search';
+export { ArrowRight } from './ArrowRight';

package/dist/esm/src/molecules/Columns/ColumnImage.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BaseColumnProps } from './types';
+export declare type ColumnImageProps = BaseColumnProps & {
+    isMobile: boolean;
+};
+export declare const ColumnImage: ({ item, isMobile }: BaseColumnProps & {
+    isMobile: boolean;
+}) => JSX.Element;

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const ColumnWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ColumnWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isMobile: boolean;
+}, never>;
 export declare const InfoWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const Link: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     activeOpacity?: number | undefined;
@@ -15,4 +17,10 @@ export declare const Link: import("styled-components").StyledComponent<"div", im
     buttonLink?: string | undefined;
     elementId?: string | undefined;
 }, never>;
-export declare const ColumnCardWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ColumnCardWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isMobile: boolean;
+}, never>;
+export declare const ColumnImageWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isMobile: boolean;
+}, never>;
+export declare const ColumnBackgroundImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, import("atoms").ImageProps, never>;

package/dist/esm/src/molecules/Columns/types.d.ts

@@ -1,5 +1,5 @@
 import { ColumnItem } from './Columns';
-export declare type ColumnsTemplateKeys = 'horizontal' | 'card';
+export declare type ColumnsTemplateKeys = 'horizontal' | 'card' | 'with_image';
 export declare type BaseColumnProps = {
     item: ColumnItem;
 };

package/dist/esm/src/organisms/FeedContentContainer/mocks.d.ts

@@ -7,7 +7,7 @@ export declare const feedContentContainerMockProps: {
         buttonConfig: {
             disabled: boolean;
         };
-        image: string;
+        image: any;
         feedContentTemplate: FeedContentTemplateTypes;
         lastUpdated: string;
         isFavorite: boolean;
@@ -21,7 +21,7 @@ export declare const feedContentContainerMockProps: {
         buttonConfig: {
             disabled: boolean;
         };
-        image: string;
+        image: any;
         feedContentTemplate: FeedContentTemplateTypes;
         lastUpdated: string;
         isFavorite: boolean;
@@ -31,7 +31,7 @@ export declare const feedContentContainerMockProps: {
         document?: undefined;
     } | {
         id: string;
-        image: string;
+        image: any;
         buttonConfig: {
             disabled: boolean;
         };

package/dist/index.d.ts

@@ -133,6 +133,7 @@ declare type IconProps = {
     color?: ThemeColors$2 | string;
     fill?: ThemeColors$2 | string;
     pointerEvents?: 'auto' | 'none';
+    style?: React.CSSProperties;
 };
 declare const availableIcons: {
     CaretDown: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
@@ -155,6 +156,7 @@ declare const availableIcons: {
     Menu: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
     Search: ({ size, color, ...props }: Omit<IconProps, "name">) => JSX.Element;
     Bookmark: ({ fill, color, size, ...props }: Omit<IconProps, "name">) => JSX.Element;
+    ArrowRight: ({ color, ...props }: Omit<IconProps, "name">) => JSX.Element;
 };
 declare type IconNames = keyof typeof availableIcons;
 declare const Icon: ({ name, color, ...props }: IconProps) => JSX.Element;
@@ -177,6 +179,7 @@ declare type ImageProps = {
     style?: CSSProperties;
 };
 declare const Image: styled_components.StyledComponent<"img", styled_components.DefaultTheme, ImageProps, never>;
+declare const BackgroundImage: styled_components.StyledComponent<"img", styled_components.DefaultTheme, ImageProps, never>;
 
 declare type LinkButtonProps = PropsWithChildren<{
     activeOpacity?: number;
@@ -523,7 +526,7 @@ declare type DrawerProps = DrawerProps$1 & {
 
 declare const Drawer: ({ children, closeIconColor, ...props }: PropsWithChildren<DrawerProps>) => JSX.Element;
 
-declare type ColumnsTemplateKeys = 'horizontal' | 'card';
+declare type ColumnsTemplateKeys = 'horizontal' | 'card' | 'with_image';
 
 declare type ColumnsProps = {
     type: 'columns';
@@ -1034,4 +1037,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, BottomNaVBarItemProps, BottomNavBarItem, BottomNavBarNavigation, BottomNavBarNavigationProps, BreakpointSizesTypes, Button, ButtonProps, COMMUNICATION_LINK_DATA_TEXT, COMMUNICATION_LINK_DATA_URL, COMMUNICATION_LINK_ELEMENT_ID, CaretIconWrapper, CheckBoxProps, Checkbox, CheckboxField, CheckboxFieldProps, Circle, CircleBoxProps, CircularIndicator, CircularIndicatorProps, CircularIndicatorStyledComponent, ColumnItem, Columns, ColumnsProps, Consent, ConsentProps, CustomValidation, CustomValidationProps, CustomValidationRule, DefaultTemplate, DefaultTemplateProps, Divider, DividerProps, Drawer, DynamicContentZone, DynamicContentZoneProps, DynamicElementProps, EmphasizedText, EmphasizedTextProps, FeedContent, FeedContentContainer, FeedContentContainerProps, FeedContentHeader, FeedContentHeaderProps, FeedTemplateKeys, FieldLabels, FieldLabelsProps, FieldMapper, FieldMapperProps, FieldRuleLabelTypes, FieldSection, FieldSectionProps, FieldTypes, FilteredFeedContentType, FontSizesTypes, Footer, FooterContactInfo, FooterLink, FooterProps, ForgotPasswordForm, ForgotPasswordFormProps, GoogleMap, GoogleMapProps, Header, HeaderProps, HeroImage, HeroImageAlignment, HeroImageProps, HeroImageTemplate, HeroSlider, HeroSliderProps, HeroSliderWrapper, HorizontalButtons, HorizontalButtonsField, HorizontalButtonsProps, HorizontalPadding, HorizontalPaddingProps, ISI, ISIProps, Icon, IconButton, IconButtonProps, IconNames, IconProps, Image, ImageProps, Input, InputField, InputFieldProps, InputFieldTypes, InputIconProps, InputProps, LinkButton, LinkButtonProps, LoginForm, LoginFormProps, MATRIX_MESSAGE_DATA_ID, MATRIX_MESSAGE_ELEMENT_ID, MapPosition, MenuItem, MenuItems, MenuItemsProps, MenuNavigation, MenuNavigationProps, MlrRichTextViewerContext, MlrRichTextViewerContextType, MlrRichTextViewerProvider, MlrRichTextViewerProviderProps, OrientationType, PdfDocument, PdfDocumentProps, ProcessTracker, ProcessTrackerProps, ProcessTrackerStatus, ProfileInformation, ProfileInformationProps, RadioButtonField, RadioButtonFieldProps, RadioButtonType, RadioButtons, RadioButtonsProps, RichTextEditorProps, RichTextViewer, Select, SelectField, SelectFieldProps, SelectableCardGroup, SelectableCardGroupProps, SetPasswordForm, SetPasswordFormProps, SetPasswordRuleValidation, SizesTypes, Spacer, SpacerProps, Spinner, Stepper, StepperProps, StyleWrapper, SubscribePanel, TabGroup, TabGroupProps, TextAlign, TextTypes, TextWrapper, TextWrapperProps, ThemeColors, ThemeColorsType, ThemeDevicesType, ThemeSizesType, ThemeTextType, Tooltip, TooltipProps, TouchableOpacity, TouchableOpacityProps, TwoFactorAuth, TwoFactorAuthProps, UICheckboxField, UIField, UIFields, UIInputField, UISelectField, ValidationTag, ValidationTagProps, ValidationTagStatus, VerticalPadding, Video, VideoProps, ZealTheme, ZealThemeProvider, acquisitionFormMockFields, defaultTheme, getFieldPlaceholder, getFieldsFromFieldSections, getInitialValuesFromFields, isFormValid, loginMockFields, profileInformationMockForm, sectionMockFields, setPasswordMockFields, showAcceptToastMessage, toast, toastStyles, useMediaQuery, useMlrRichTextViewerContext, useRequiredConsentsAcceptedValues, useStep };
+export { AcquisitionForm, AcquisitionFormProps, Alert, AlertProps, AnnotationsList, AuthMethod, Avatar, AvatarDropdown, AvatarDropdownProps, AvatarProps, BackgroundImage, BaseButtonProps, Body, BodyProps, BottomNaVBarItemProps, BottomNavBarItem, BottomNavBarNavigation, BottomNavBarNavigationProps, BreakpointSizesTypes, Button, ButtonProps, COMMUNICATION_LINK_DATA_TEXT, COMMUNICATION_LINK_DATA_URL, COMMUNICATION_LINK_ELEMENT_ID, CaretIconWrapper, CheckBoxProps, Checkbox, CheckboxField, CheckboxFieldProps, Circle, CircleBoxProps, CircularIndicator, CircularIndicatorProps, CircularIndicatorStyledComponent, ColumnItem, Columns, ColumnsProps, Consent, ConsentProps, CustomValidation, CustomValidationProps, CustomValidationRule, DefaultTemplate, DefaultTemplateProps, Divider, DividerProps, Drawer, DynamicContentZone, DynamicContentZoneProps, DynamicElementProps, EmphasizedText, EmphasizedTextProps, FeedContent, FeedContentContainer, FeedContentContainerProps, FeedContentHeader, FeedContentHeaderProps, FeedTemplateKeys, FieldLabels, FieldLabelsProps, FieldMapper, FieldMapperProps, FieldRuleLabelTypes, FieldSection, FieldSectionProps, FieldTypes, FilteredFeedContentType, FontSizesTypes, Footer, FooterContactInfo, FooterLink, FooterProps, ForgotPasswordForm, ForgotPasswordFormProps, GoogleMap, GoogleMapProps, Header, HeaderProps, HeroImage, HeroImageAlignment, HeroImageProps, HeroImageTemplate, HeroSlider, HeroSliderProps, HeroSliderWrapper, HorizontalButtons, HorizontalButtonsField, HorizontalButtonsProps, HorizontalPadding, HorizontalPaddingProps, ISI, ISIProps, Icon, IconButton, IconButtonProps, IconNames, IconProps, Image, ImageProps, Input, InputField, InputFieldProps, InputFieldTypes, InputIconProps, InputProps, LinkButton, LinkButtonProps, LoginForm, LoginFormProps, MATRIX_MESSAGE_DATA_ID, MATRIX_MESSAGE_ELEMENT_ID, MapPosition, MenuItem, MenuItems, MenuItemsProps, MenuNavigation, MenuNavigationProps, MlrRichTextViewerContext, MlrRichTextViewerContextType, MlrRichTextViewerProvider, MlrRichTextViewerProviderProps, OrientationType, PdfDocument, PdfDocumentProps, ProcessTracker, ProcessTrackerProps, ProcessTrackerStatus, ProfileInformation, ProfileInformationProps, RadioButtonField, RadioButtonFieldProps, RadioButtonType, RadioButtons, RadioButtonsProps, RichTextEditorProps, RichTextViewer, Select, SelectField, SelectFieldProps, SelectableCardGroup, SelectableCardGroupProps, SetPasswordForm, SetPasswordFormProps, SetPasswordRuleValidation, SizesTypes, Spacer, SpacerProps, Spinner, Stepper, StepperProps, StyleWrapper, SubscribePanel, TabGroup, TabGroupProps, TextAlign, TextTypes, TextWrapper, TextWrapperProps, ThemeColors, ThemeColorsType, ThemeDevicesType, ThemeSizesType, ThemeTextType, Tooltip, TooltipProps, TouchableOpacity, TouchableOpacityProps, TwoFactorAuth, TwoFactorAuthProps, UICheckboxField, UIField, UIFields, UIInputField, UISelectField, ValidationTag, ValidationTagProps, ValidationTagStatus, VerticalPadding, Video, VideoProps, ZealTheme, ZealThemeProvider, acquisitionFormMockFields, defaultTheme, getFieldPlaceholder, getFieldsFromFieldSections, getInitialValuesFromFields, isFormValid, loginMockFields, profileInformationMockForm, sectionMockFields, setPasswordMockFields, showAcceptToastMessage, toast, toastStyles, useMediaQuery, useMlrRichTextViewerContext, useRequiredConsentsAcceptedValues, useStep };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zealicsolutions/web-ui",
-  "version": "0.2.50",
+  "version": "0.2.52",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"
@@ -23,8 +23,8 @@
   "scripts": {
     "build": "npm run clean && rollup -c",
     "test": "jest",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "clean": "rimraf dist",
     "lint:fix": "eslint --fix ./src/**/*.ts",
     "format:fix": "prettier --write ./src",
@@ -33,19 +33,21 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.0",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.21.5",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^14.0.0",
     "@rollup/plugin-typescript": "^8.5.0",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/builder-webpack4": "^6.5.10",
-    "@storybook/manager-webpack4": "^6.5.10",
-    "@storybook/react": "^6.5.10",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^7.0.18",
+    "@storybook/addon-essentials": "^7.0.18",
+    "@storybook/addon-interactions": "^7.0.18",
+    "@storybook/addon-links": "^7.0.18",
+    "@storybook/react": "^7.0.18",
+    "@storybook/react-webpack5": "^7.0.18",
+    "@storybook/testing-library": "^0.1.0",
     "@swc/core": "^1.2.248",
     "@swc/jest": "^0.2.22",
     "@testing-library/jest-dom": "^5.16.5",
@@ -74,6 +76,7 @@
     "rollup-plugin-import-css": "^3.0.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
+    "storybook": "^7.0.18",
     "styled-system": "^5.1.5",
     "ts-node": "^10.9.1",
     "typescript": "^4.8.2"
@@ -81,7 +84,8 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.5",
+    "react-pdf": "6.2.2"
   },
   "dependencies": {
     "@mui/material": "^5.10.4",
@@ -95,7 +99,7 @@
     "react-dom": "^18.2.0",
     "react-google-maps": "^9.4.5",
     "react-hook-form": "^7.34.2",
-    "react-pdf": "^6.2.2",
+    "react-pdf": "6.2.2",
     "slate": "^0.85.0",
     "slate-react": "^0.83.2",
     "styled-components": "^5.3.5"