@hexure/ui 1.1.2 → 1.3.1

package/dist/esm/types/components/Button/Button.d.ts

@@ -1,19 +1,24 @@
 import { FC } from 'react';
 import { AccessibleProps } from '../../utils/Accessibility';
 export interface ButtonProps extends AccessibleProps {
+    /** Display a number badge on the right side of the button */
+    badge?: number;
     /** Define the button label. */
     children?: string;
     /** If enabled, the button will be disabled */
     disabled?: boolean;
     /** The SVG path of the icon to show */
     icon?: string;
+    /** Adjust the button to work within a <form> tag. Ignores onClick, sets type='form'  */
+    isForm?: boolean;
+    /** Set the margin of the button as needed */
     margin?: string;
     /** Prop to pass a that fires when the user does a click. */
     onClick?: (e?: any) => void;
     /** If enabled, the small button format will be used. */
     small?: boolean;
-    /** Define which button type to display. By default the Primary button will be used.  */
-    type?: 'primary' | 'secondary' | 'red';
+    /** Define which button format to display. By default the Primary button will be used.  */
+    format?: 'primary' | 'secondary' | 'red';
 }
 declare const Button: FC<ButtonProps>;
 export default Button;

package/dist/esm/types/components/Copy/Copy.d.ts

@@ -10,6 +10,8 @@ export interface CopyProps extends AccessibleProps {
     padding?: string;
     /** Set the type of copy to display */
     type?: 'default' | 'bold' | 'italic' | 'underline' | 'line-through' | 'small';
+    /** Set the color of the copy based on the design system color pallette */
+    color?: 'PRIMARY' | 'GREEN' | 'RED' | 'YELLOW' | 'BLACK' | 'GRAY' | 'MEDIUM_GRAY' | 'LIGHT_GRAY';
 }
 declare const Copy: FC<CopyProps>;
 export default Copy;

package/dist/esm/types/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import { AccessibleProps } from '../../utils/Accessibility';
+export interface DateProps extends AccessibleProps {
+    /** If it's value is true then select is disabled. */
+    readOnly?: boolean;
+    /** It is used to show error messages when it's value is false. */
+    invalid?: boolean;
+    /** It is used to set maxxiumum year. */
+    maxYear?: number;
+    /** It is used to set minumum year. */
+    minYear?: number;
+    /** It is used to set the date. */
+    date?: {
+        month: number;
+        day: number;
+        year: number;
+    };
+    /** It is used to read value for border rasius & flex grow */
+    style?: {
+        borderRadius?: string;
+        flexGrow?: number;
+    };
+    /** It is used to get selected value */
+    onChange: (e: any) => void;
+}
+declare const DatePicker: FC<DateProps>;
+export default DatePicker;

package/dist/esm/types/components/DatePicker/DatePicker.stories.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FC<import("./DatePicker").DateProps>>;
+export default _default;
+export declare const _DatePicker: ComponentStory<React.FC<import("./DatePicker").DateProps>>;

package/dist/esm/types/components/DatePicker/index.d.ts

@@ -0,0 +1 @@
+export { default } from './DatePicker';

package/dist/esm/types/components/Drawer/Drawer.d.ts

@@ -0,0 +1,28 @@
+import { FC, ReactNode } from 'react';
+import { AccessibleProps } from '../../utils/Accessibility';
+interface ButtonProps extends AccessibleProps {
+    disabled: boolean;
+    children: string;
+    icon?: string;
+    onClick: (e?: any) => void;
+    tabIndex?: number;
+}
+export interface DrawerProps extends AccessibleProps {
+    primaryButton: ButtonProps;
+    secondaryButton?: ButtonProps;
+    tertiaryButton?: ButtonProps;
+    /** It is used to pass child nodes, string values and number as child components. */
+    children: ReactNode;
+    /** It is used to give title. */
+    title: string;
+    /** Define an optional description that's displayed under the title */
+    description?: string;
+    /** Set a width wider than 400px */
+    width?: string | number;
+    /** Display an scrim over the main content, forcing users to interact with the drawer */
+    scrim?: 'transparent' | 'dark';
+    /**  It is used to close drawer. */
+    onClose: (e?: any) => void;
+}
+declare const Drawer: FC<DrawerProps>;
+export default Drawer;

package/dist/esm/types/components/Drawer/Drawer.stories.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FC<import("./Drawer").DrawerProps>>;
+export default _default;
+export declare const _Drawer: ComponentStory<React.FC<import("./Drawer").DrawerProps>>;

package/dist/esm/types/components/Drawer/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Drawer';

package/dist/esm/types/components/Input/Input.d.ts

@@ -3,6 +3,7 @@ import { AccessibleProps } from '../../utils/Accessibility';
 export interface InputProps extends AccessibleProps {
     format?: 'phone' | 'currency' | 'currency_decimal' | 'ssn';
     height?: string;
+    suffix?: string;
     invalid?: boolean;
     max?: number;
     maxLength?: number;

package/dist/esm/types/components/Logo/Logo.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { AccessibleProps } from '../../utils/Accessibility';
+export interface LogoProps extends AccessibleProps {
+    type?: 'mark_red' | 'mark_white' | 'standard_white' | 'standard_black' | 'standard_full' | 'standard_reversed';
+    height?: string;
+}
+export interface colorProps {
+    fill_1: string;
+    fill_2: string;
+    fill_3: string;
+}
+export interface colorObj {
+    [key: string]: colorProps;
+}
+declare const Logo: FC<LogoProps>;
+export default Logo;

package/dist/esm/types/components/Logo/Logo.stories.d.ts

@@ -0,0 +1,5 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+declare const _default: ComponentMeta<React.FC<import("./Logo").LogoProps>>;
+export default _default;
+export declare const _Logo: ComponentStory<React.FC<import("./Logo").LogoProps>>;

package/dist/esm/types/components/Logo/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Logo';

package/dist/esm/types/components/MoreMenu/MoreMenu.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { AccessibleProps } from '../../utils/Accessibility';
+interface MenuItemProps extends AccessibleProps {
+    icon?: string;
+    label?: string;
+    onClick: (e?: any) => void;
+}
+export interface MoreMenuProps extends AccessibleProps {
+    menuItems: MenuItemProps[];
+    maxHeight: string | number;
+}
+declare const MoreMenu: FC<MoreMenuProps>;
+export default MoreMenu;

package/dist/esm/types/components/MoreMenu/MoreMenu.stories.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FC<import("./MoreMenu").MoreMenuProps>>;
+export default _default;
+export declare const _MoreMenu: ComponentStory<React.FC<import("./MoreMenu").MoreMenuProps>>;

package/dist/esm/types/components/MoreMenu/index.d.ts

@@ -0,0 +1 @@
+export { default } from './MoreMenu';

package/dist/esm/types/components/Select/Select.d.ts

@@ -10,6 +10,10 @@ export interface OptionGroupProps {
     options: OptionProps[];
     label: string;
 }
+export interface styleProps {
+    borderRadius?: string;
+    flexGrow?: number;
+}
 export interface SelectProps extends AccessibleProps {
     /** It is used to give options from which value is selected. */
     options?: OptionProps[];
@@ -21,6 +25,11 @@ export interface SelectProps extends AccessibleProps {
     invalid?: boolean;
     /** It is used to read value for selected option. */
     value: string;
+    /** It is used to read value for border rasius & flex grow */
+    style?: {
+        borderRadius?: string;
+        flexGrow?: number;
+    };
     /** It is used to change value when an option is clicked. */
     onChange: (e: any) => void;
 }

package/dist/esm/types/components/ZeroState/ZeroState.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { AccessibleProps } from '../../utils/Accessibility';
+export interface ZeroStateProps extends AccessibleProps {
+    /** The SVG path of the icon to show */
+    icon: string;
+    /** It is used to give title. */
+    title: string;
+    /** It is used to give description. */
+    description?: string;
+    /** It is used to pass object to button. */
+    action?: {
+        children: string;
+        icon?: string;
+        onClick: (e?: any) => void;
+    };
+}
+declare const ZeroState: FC<ZeroStateProps>;
+export default ZeroState;

package/dist/esm/types/components/ZeroState/ZeroState.stories.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.FC<import("./ZeroState").ZeroStateProps>>;
+export default _default;
+export declare const _ZeroState: ComponentStory<React.FC<import("./ZeroState").ZeroStateProps>>;

package/dist/esm/types/components/ZeroState/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ZeroState';

package/dist/esm/types/index.d.ts

@@ -6,10 +6,12 @@ export { default as Button } from './components/Button';
 export { default as Checkbox } from './components/Checkbox';
 export { default as Checklist } from './components/Checklist';
 export { default as Copy } from './components/Copy';
+export { default as Drawer } from './components/Drawer';
 export { default as Field } from './components/Field';
 export { default as Heading } from './components/Heading';
 export { default as Input } from './components/Input';
 export { default as Modal } from './components/Modal';
+export { default as MoreMenu } from './components/MoreMenu';
 export { default as MultiSelect } from './components/MultiSelect';
 export { default as Pagination } from './components/Pagination';
 export { default as Radio } from './components/Radio';
@@ -19,3 +21,4 @@ export { default as Table } from './components/Table';
 export { default as Tabs } from './components/Tabs';
 export { default as Tag } from './components/Tag';
 export { default as Toggle } from './components/Toggle';
+export { default as ZeroState } from './components/ZeroState';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import React, { FC, ReactNode } from 'react';
-
+import React, { FC, ReactNode } from 'react';
+
 interface AccessibleProps {
     /** Set the css id for the main wrapping html element */
     id?: string;
@@ -13,8 +13,8 @@ interface AccessibleProps {
     tabIndex?: number;
     /** Set a label for an interactive element. See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label */
     ariaLabel?: string;
-}
-
+}
+
 interface AccordionProps extends AccessibleProps {
     title?: string;
     /** Define the content to be displayed */
@@ -24,9 +24,9 @@ interface AccordionProps extends AccessibleProps {
     /** Method to call when the header is clicked */
     onClick: (e?: any) => void;
 }
-declare const Accordion: FC<AccordionProps>;
-
-interface ButtonProps$3 {
+declare const Accordion: FC<AccordionProps>;
+
+interface ButtonProps$4 {
     children: string;
     icon?: string;
     onClick: (e?: any) => void;
@@ -37,12 +37,12 @@ interface ActionDialogProps extends AccessibleProps {
     title?: string;
     /** It is used to give description. */
     description?: string;
-    primaryButton?: ButtonProps$3;
-    secondaryButton?: ButtonProps$3;
+    primaryButton?: ButtonProps$4;
+    secondaryButton?: ButtonProps$4;
     onClose: (e?: any) => void;
 }
-declare const ActionDialog: FC<ActionDialogProps>;
-
+declare const ActionDialog: FC<ActionDialogProps>;
+
 interface AlertProps extends AccessibleProps {
     type?: 'info' | 'error' | 'warning' | 'success';
     /** It is used to add title to alert. */
@@ -50,39 +50,44 @@ interface AlertProps extends AccessibleProps {
     /** It is used to add description to alert. */
     description: string;
 }
-declare const Alert: FC<AlertProps>;
-
-interface ButtonProps$2 {
+declare const Alert: FC<AlertProps>;
+
+interface ButtonProps$3 {
     children: string;
     onClick: (e?: any) => void;
     type?: 'primary' | 'secondary';
     icon?: string;
 }
 interface BulkActionBarProps extends AccessibleProps {
-    actions?: ButtonProps$2[];
+    actions?: ButtonProps$3[];
     errorMsg?: string;
     onClear: (e?: any) => void;
     selectedCount?: number;
 }
-declare const BulkActionBar: FC<BulkActionBarProps>;
-
-interface ButtonProps$1 extends AccessibleProps {
+declare const BulkActionBar: FC<BulkActionBarProps>;
+
+interface ButtonProps$2 extends AccessibleProps {
+    /** Display a number badge on the right side of the button */
+    badge?: number;
     /** Define the button label. */
     children?: string;
     /** If enabled, the button will be disabled */
     disabled?: boolean;
     /** The SVG path of the icon to show */
     icon?: string;
+    /** Adjust the button to work within a <form> tag. Ignores onClick, sets type='form'  */
+    isForm?: boolean;
+    /** Set the margin of the button as needed */
     margin?: string;
     /** Prop to pass a that fires when the user does a click. */
     onClick?: (e?: any) => void;
     /** If enabled, the small button format will be used. */
     small?: boolean;
-    /** Define which button type to display. By default the Primary button will be used.  */
-    type?: 'primary' | 'secondary' | 'red';
+    /** Define which button format to display. By default the Primary button will be used.  */
+    format?: 'primary' | 'secondary' | 'red';
 }
-declare const Button: FC<ButtonProps$1>;
-
+declare const Button: FC<ButtonProps$2>;
+
 interface CheckboxProps extends AccessibleProps {
     /** It is used to give label to checkbox. */
     children?: string;
@@ -93,8 +98,8 @@ interface CheckboxProps extends AccessibleProps {
     /** It is used to change value of checkbox. */
     onChange: (e?: any) => void;
 }
-declare const Checkbox: FC<CheckboxProps>;
-
+declare const Checkbox: FC<CheckboxProps>;
+
 interface OptionProps$3 {
     label?: string;
     value: string | number;
@@ -106,8 +111,8 @@ interface ChecklistProps extends AccessibleProps {
     selected: (string | number)[];
     showSelectAll?: boolean;
 }
-declare const Checklist: FC<ChecklistProps>;
-
+declare const Checklist: FC<ChecklistProps>;
+
 interface CopyProps extends AccessibleProps {
     /** Set the text to be displayed */
     children: string;
@@ -118,9 +123,37 @@ interface CopyProps extends AccessibleProps {
     padding?: string;
     /** Set the type of copy to display */
     type?: 'default' | 'bold' | 'italic' | 'underline' | 'line-through' | 'small';
+    /** Set the color of the copy based on the design system color pallette */
+    color?: 'PRIMARY' | 'GREEN' | 'RED' | 'YELLOW' | 'BLACK' | 'GRAY' | 'MEDIUM_GRAY' | 'LIGHT_GRAY';
 }
-declare const Copy: FC<CopyProps>;
-
+declare const Copy: FC<CopyProps>;
+
+interface ButtonProps$1 extends AccessibleProps {
+    disabled: boolean;
+    children: string;
+    icon?: string;
+    onClick: (e?: any) => void;
+    tabIndex?: number;
+}
+interface DrawerProps extends AccessibleProps {
+    primaryButton: ButtonProps$1;
+    secondaryButton?: ButtonProps$1;
+    tertiaryButton?: ButtonProps$1;
+    /** It is used to pass child nodes, string values and number as child components. */
+    children: ReactNode;
+    /** It is used to give title. */
+    title: string;
+    /** Define an optional description that's displayed under the title */
+    description?: string;
+    /** Set a width wider than 400px */
+    width?: string | number;
+    /** Display an scrim over the main content, forcing users to interact with the drawer */
+    scrim?: 'transparent' | 'dark';
+    /**  It is used to close drawer. */
+    onClose: (e?: any) => void;
+}
+declare const Drawer: FC<DrawerProps>;
+
 interface ActionProps {
     label: string;
     onClick: (e?: any) => void;
@@ -140,8 +173,8 @@ interface FieldProps extends AccessibleProps {
     /** It is used to give description to input. */
     description?: string;
 }
-declare const Field: FC<FieldProps>;
-
+declare const Field: FC<FieldProps>;
+
 interface HeadingProps extends AccessibleProps {
     /** Toggle between bold and normal font weights */
     bold?: boolean;
@@ -154,11 +187,12 @@ interface HeadingProps extends AccessibleProps {
     /** Set the type of heading to display: primary, secondary, tertiary  */
     type?: 'primary' | 'secondary' | 'tertiary';
 }
-declare const Heading: FC<HeadingProps>;
-
+declare const Heading: FC<HeadingProps>;
+
 interface InputProps extends AccessibleProps {
     format?: 'phone' | 'currency' | 'currency_decimal' | 'ssn';
     height?: string;
+    suffix?: string;
     invalid?: boolean;
     max?: number;
     maxLength?: number;
@@ -172,8 +206,8 @@ interface InputProps extends AccessibleProps {
     type?: 'email' | 'number' | 'password' | 'tel' | 'text' | 'url' | 'textarea';
     value?: string;
 }
-declare const Input: FC<InputProps>;
-
+declare const Input: FC<InputProps>;
+
 interface ButtonProps {
     disabled: boolean;
     children: string;
@@ -193,8 +227,19 @@ interface ModalProps extends AccessibleProps {
     /**  It is used to close modal. */
     onClose: (e?: any) => void;
 }
-declare const Modal: FC<ModalProps>;
-
+declare const Modal: FC<ModalProps>;
+
+interface MenuItemProps extends AccessibleProps {
+    icon?: string;
+    label?: string;
+    onClick: (e?: any) => void;
+}
+interface MoreMenuProps extends AccessibleProps {
+    menuItems: MenuItemProps[];
+    maxHeight: string | number;
+}
+declare const MoreMenu: FC<MoreMenuProps>;
+
 interface OptionProps$2 {
     label?: string;
     value: string | number;
@@ -208,15 +253,15 @@ interface MultiSelectProps extends AccessibleProps {
     selected: (string | number)[];
     showSelectAll?: boolean;
 }
-declare const MultiSelect: FC<MultiSelectProps>;
-
+declare const MultiSelect: FC<MultiSelectProps>;
+
 interface PaginationProps extends AccessibleProps {
     currentPage: number;
     onClick: (e?: any) => void;
     pageCount: number;
 }
-declare const Pagination: FC<PaginationProps>;
-
+declare const Pagination: FC<PaginationProps>;
+
 interface RadioProps extends AccessibleProps {
     /** It is used to give label to radio. */
     children: string | number;
@@ -228,8 +273,8 @@ interface RadioProps extends AccessibleProps {
     onChange: (e?: any) => void;
     value: string | number;
 }
-declare const Radio: FC<RadioProps>;
-
+declare const Radio: FC<RadioProps>;
+
 interface OptionProps$1 {
     label?: string;
     value: string | number;
@@ -240,8 +285,8 @@ interface RadioListProps extends AccessibleProps {
     options: OptionProps$1[];
     value: string;
 }
-declare const RadioList: FC<RadioListProps>;
-
+declare const RadioList: FC<RadioListProps>;
+
 interface OptionProps {
     /** It is used to give label to option. */
     label: string;
@@ -263,11 +308,16 @@ interface SelectProps extends AccessibleProps {
     invalid?: boolean;
     /** It is used to read value for selected option. */
     value: string;
+    /** It is used to read value for border rasius & flex grow */
+    style?: {
+        borderRadius?: string;
+        flexGrow?: number;
+    };
     /** It is used to change value when an option is clicked. */
     onChange: (e: any) => void;
 }
-declare const Select: FC<SelectProps>;
-
+declare const Select: FC<SelectProps>;
+
 interface RowObject {
     [key: string]: any;
 }
@@ -289,8 +339,8 @@ interface TableProps extends AccessibleProps {
     onSortChange?: (e?: any) => void;
     tableLayout?: string;
 }
-declare const Table: FC<TableProps>;
-
+declare const Table: FC<TableProps>;
+
 interface TabProps extends AccessibleProps {
     label: string;
     onClick: (e?: any) => void;
@@ -299,8 +349,8 @@ interface TabProps extends AccessibleProps {
 interface TabsProps extends AccessibleProps {
     tabs: TabProps[];
 }
-declare const Tabs: FC<TabsProps>;
-
+declare const Tabs: FC<TabsProps>;
+
 interface TagProps extends AccessibleProps {
     /** It is used to select tag-type either default or removable. */
     color?: 'PRIMARY' | 'GREEN' | 'RED' | 'YELLOW' | 'BLACK';
@@ -310,14 +360,30 @@ interface TagProps extends AccessibleProps {
     /** It is callback function called when user wants to close the tag. */
     removable?: boolean;
 }
-declare const Tag: FC<TagProps>;
-
+declare const Tag: FC<TagProps>;
+
 interface ToggleProps extends AccessibleProps {
     /** It is used to check whether Toggle is checked or not */
     on: boolean;
     /** Pass a callback then fires when user change value */
     onClick: (e?: any) => void;
 }
-declare const Toggle: FC<ToggleProps>;
-
-export { Accordion, ActionDialog, Alert, BulkActionBar, Button, Checkbox, Checklist, Copy, Field, Heading, Input, Modal, MultiSelect, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle };
+declare const Toggle: FC<ToggleProps>;
+
+interface ZeroStateProps extends AccessibleProps {
+    /** The SVG path of the icon to show */
+    icon: string;
+    /** It is used to give title. */
+    title: string;
+    /** It is used to give description. */
+    description?: string;
+    /** It is used to pass object to button. */
+    action?: {
+        children: string;
+        icon?: string;
+        onClick: (e?: any) => void;
+    };
+}
+declare const ZeroState: FC<ZeroStateProps>;
+
+export { Accordion, ActionDialog, Alert, BulkActionBar, Button, Checkbox, Checklist, Copy, Drawer, Field, Heading, Input, Modal, MoreMenu, MultiSelect, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, ZeroState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexure/ui",
-  "version": "1.1.2",
+  "version": "1.3.1",
   "description": "A library of shared UI components used within Hexure products.",
   "scripts": {
     "rollup": "rollup -c rollup.config.mjs",
@@ -69,21 +69,22 @@
     "@mdi/font": "^7.0.96",
     "@mdi/js": "^7.1.96",
     "@mdi/react": "^1.6.1",
+    "dayjs": "^1.11.8",
     "moment": "^2.29.4",
     "numeral": "^2.0.6",
     "styled-components": "^5.3.6"
   },
   "peerDependencies": {
-    "react": ">=16.14.0",
-    "react-dom": ">=16.14.0",
     "@mdi/font": ">=7.0.96",
     "@mdi/js": ">=7.1.96",
     "@mdi/react": ">=1.6.1",
     "moment": ">=2.29.4",
-    "numeral": ">=2.0.6"
+    "numeral": ">=2.0.6",
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0"
   },
   "repository": {
     "type": "git",
     "url": "https://InsuranceTechnologies@dev.azure.com/InsuranceTechnologies/Enterprise/_git/InsTech.UI.Library"
   }
-}
+}