@purple/phoenix-components 4.15.0 → 4.18.0

package/dist/index.d.ts

@@ -1,22 +1,67 @@
 import * as React$1 from 'react';
-import React__default, { InputHTMLAttributes, ReactElement, JSXElementConstructor, HTMLAttributes, MouseEventHandler, FocusEventHandler, TextareaHTMLAttributes } from 'react';
+import React__default, { HTMLAttributes, InputHTMLAttributes, ReactElement, JSXElementConstructor, MouseEventHandler, FocusEventHandler, TextareaHTMLAttributes } from 'react';
+import * as styled_components from 'styled-components';
+import { IntrinsicElementsKeys } from 'styled-components';
+import { LayoutProps, FlexboxProps, GridProps, BackgroundColorProps, BackgroundProps, OpacityProps, PositionProps } from 'styled-system';
 import { DayPickerProps } from 'react-day-picker';
 import { Props } from 'tippy.js';
 import { OptionTypeBase, NamedProps } from 'react-select';
 import { TippyProps } from '@tippyjs/react';
 export { TabPanel, Tabs } from 'react-tabs';
-import * as styled_components from 'styled-components';
 
 declare type GenericComponentProps = {
     testId?: string;
     className?: string;
 };
 
+declare const Spacing: readonly ["xxxs", "xxs", "xs", "s", "m", "l", "xl", "xxl", "xxxl"];
+declare type Spacing = typeof Spacing[number];
+
+interface MarginProps {
+    ml?: Spacing | string | number;
+    mr?: Spacing | string | number;
+    mt?: Spacing | string | number;
+    mb?: Spacing | string | number;
+    mx?: Spacing | string | number;
+    my?: Spacing | string | number;
+    m?: Spacing | string | number;
+}
+
+interface PaddingProps {
+    pl?: Spacing | string | number;
+    pr?: Spacing | string | number;
+    pt?: Spacing | string | number;
+    pb?: Spacing | string | number;
+    px?: Spacing | string | number;
+    py?: Spacing | string | number;
+    p?: Spacing | string | number;
+}
+
 declare const ColorTheme: readonly ["primary", "success", "warning", "error", "info", "neutral"];
 declare type ColorTheme = typeof ColorTheme[number];
 declare const ButtonColorTheme: readonly ["primary", "success", "error", "neutral"];
 declare type ButtonColorTheme = typeof ButtonColorTheme[number];
 
+declare const TextAlignment: readonly ["left", "center", "right", "justify"];
+declare type TextAlignment = typeof TextAlignment[number];
+
+declare const TextColor: readonly ["darkest", "dark", "light", "lightest", "white"];
+declare type TextColor = typeof TextColor[number];
+
+interface CommonTextProps<T> extends HTMLAttributes<T>, GenericComponentProps, TextAlignProp {
+    colorTheme?: ColorTheme;
+    color?: TextColor;
+    bold?: boolean;
+}
+interface TextAlignProp {
+    textAlign?: TextAlignment;
+}
+
+interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, LayoutProps, FlexboxProps, GridProps, MarginProps, PaddingProps, BackgroundColorProps, BackgroundProps, OpacityProps, PositionProps, TextAlignProp, GenericComponentProps {
+    element?: IntrinsicElementsKeys;
+}
+declare const Box: React__default.FC<BoxProps>;
+
 declare const ComponentSize: readonly ["tiny", "small", "medium", "large"];
 declare type ComponentSize = typeof ComponentSize[number];
 declare const ComponentSizeSmallMedium: readonly ["small", "medium"];
@@ -197,28 +242,15 @@ declare const PhoenixIconsSrc: {
     readonly withdrawal: string;
     readonly wrench: string;
 };
-declare const PhoenixIconsOutlined: ("filter" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "browser" | "burger" | "calendar" | "camera" | "check" | "check-circle" | "clock" | "cog" | "copy" | "cross" | "deposit" | "document" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "download" | "edit" | "ellipsis" | "email" | "exclamation" | "exit" | "external" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "list" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "revert" | "scales" | "search" | "star" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench")[];
+declare const PhoenixIconsOutlined: ("filter" | "revert" | "document" | "list" | "search" | "email" | "copy" | "download" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "browser" | "burger" | "calendar" | "camera" | "check" | "check-circle" | "clock" | "cog" | "cross" | "deposit" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "edit" | "ellipsis" | "exclamation" | "exit" | "external" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "scales" | "star" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench")[];
 declare type PhoenixIconsOutlined = keyof typeof PhoenixIconsOutlinedSrc;
 declare const PhoenixIconsColored: ("calendar-primary" | "camera-primary" | "email-primary" | "exclamation-error" | "exclamation-warning" | "house-primary" | "id-card-primary" | "lock-primary" | "lock-success" | "paper-primary" | "passport-primary" | "photo-user-primary" | "pin-primary" | "trash-error")[];
 declare type PhoenixIconsColored = keyof typeof PhoenixIconsColoredSrc;
-declare const PhoenixIcons: ("filter" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "browser" | "burger" | "calendar" | "camera" | "check" | "check-circle" | "clock" | "cog" | "copy" | "cross" | "deposit" | "document" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "download" | "edit" | "ellipsis" | "email" | "exclamation" | "exit" | "external" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "list" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "revert" | "scales" | "search" | "star" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench" | "calendar-primary" | "camera-primary" | "email-primary" | "exclamation-error" | "exclamation-warning" | "house-primary" | "id-card-primary" | "lock-primary" | "lock-success" | "paper-primary" | "passport-primary" | "photo-user-primary" | "pin-primary" | "trash-error")[];
+declare const PhoenixIcons: ("filter" | "revert" | "document" | "list" | "search" | "email" | "copy" | "download" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "browser" | "burger" | "calendar" | "camera" | "check" | "check-circle" | "clock" | "cog" | "cross" | "deposit" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "edit" | "ellipsis" | "exclamation" | "exit" | "external" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "scales" | "star" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench" | "calendar-primary" | "camera-primary" | "email-primary" | "exclamation-error" | "exclamation-warning" | "house-primary" | "id-card-primary" | "lock-primary" | "lock-success" | "paper-primary" | "passport-primary" | "photo-user-primary" | "pin-primary" | "trash-error")[];
 declare type PhoenixIcons = keyof typeof PhoenixIconsSrc;
 
 declare type IconType = PhoenixIconsOutlined | React.ReactElement | string;
 
-declare const Spacing: readonly ["xxxs", "xxs", "xs", "s", "m", "l", "xl", "xxl", "xxxl"];
-declare type Spacing = typeof Spacing[number];
-
-interface MarginProps {
-    ml?: Spacing | string | number;
-    mr?: Spacing | string | number;
-    mt?: Spacing | string | number;
-    mb?: Spacing | string | number;
-    mx?: Spacing | string | number;
-    my?: Spacing | string | number;
-    m?: Spacing | string | number;
-}
-
 interface CommonButtonProps extends MarginProps {
     colorTheme?: ButtonColorTheme;
     size?: ComponentSize;
@@ -239,20 +271,10 @@ interface ButtonGroupProps extends GenericComponentProps {
 }
 declare const ButtonGroup: React__default.FC<ButtonGroupProps>;
 
-interface PaddingProps {
-    pl?: Spacing | string | number;
-    pr?: Spacing | string | number;
-    pt?: Spacing | string | number;
-    pb?: Spacing | string | number;
-    px?: Spacing | string | number;
-    py?: Spacing | string | number;
-    p?: Spacing | string | number;
-}
-
 interface CardProps extends PaddingProps, MarginProps, GenericComponentProps {
     elevated?: boolean;
     disabled?: boolean;
-    onClick?: () => void;
+    onClick?: React__default.MouseEventHandler<HTMLDivElement>;
 }
 declare const Card: React__default.FC<CardProps>;
 
@@ -267,12 +289,12 @@ declare type CheckboxProps = CheckboxRadioCommonProps;
 declare const Checkbox: React__default.VoidFunctionComponent<CheckboxProps>;
 
 interface ClosableButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement>, GenericComponentProps {
-    onClose?: () => void;
+    onClose?: React__default.MouseEventHandler<HTMLButtonElement>;
 }
 declare const ClosableButton: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ClosableButtonProps> & React__default.RefAttributes<HTMLButtonElement>>;
 
 interface ClosableItemProps extends GenericComponentProps {
-    onClose?: () => void;
+    onClose?: React__default.MouseEventHandler<HTMLButtonElement>;
 }
 declare const ClosableItem: React__default.FC<ClosableItemProps>;
 
@@ -283,6 +305,7 @@ declare const Collapsible: React$1.FC<CollapsibleProps>;
 
 interface CollapsibleCardProps extends CardProps, GenericComponentProps {
     heading: string;
+    rightContent?: React$1.ReactNode;
 }
 declare const CollapsibleCard: React$1.FC<CollapsibleCardProps>;
 
@@ -369,14 +392,9 @@ interface FileUploadProps extends GenericComponentProps {
 }
 declare const FileUpload: React__default.FC<FileUploadProps>;
 
-declare const TextColor: readonly ["darkest", "dark", "light", "lightest", "white"];
-declare type TextColor = typeof TextColor[number];
+declare const Flex: React__default.FC<BoxProps>;
 
-interface CommonTextProps<T> extends HTMLAttributes<T>, GenericComponentProps {
-    colorTheme?: ColorTheme;
-    color?: TextColor;
-    bold?: boolean;
-}
+declare const Grid: React__default.FC<BoxProps>;
 
 declare type HeadingSizes = 'h1' | 'h2' | 'h3' | 'h4';
 interface HeadingProps extends CommonTextProps<HTMLHeadingElement>, PaddingProps, MarginProps {
@@ -402,9 +420,13 @@ declare const Icon: React__default.ForwardRefExoticComponent<React__default.Prop
 declare type LabelProps = React__default.LabelHTMLAttributes<HTMLLabelElement> & GenericComponentProps;
 declare const Label: React__default.FC<LabelProps>;
 
-interface LinkProps extends React__default.AnchorHTMLAttributes<HTMLAnchorElement>, GenericComponentProps {
+interface LinkProps extends React__default.AnchorHTMLAttributes<HTMLAnchorElement>, GenericComponentProps, MarginProps, PaddingProps {
     icon?: IconType;
     iconAlignment?: IconAlignment;
+    colorTheme?: ColorTheme;
+    color?: TextColor;
+    bold?: boolean;
+    noUnderline?: boolean;
 }
 declare const Link: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<LinkProps> & React__default.RefAttributes<HTMLAnchorElement>>;
 
@@ -422,11 +444,21 @@ interface MenuItemProps extends GenericComponentProps {
     target?: string;
     href?: string;
     onClick?: MouseEventHandler<HTMLAnchorElement>;
-    icon?: IconType;
+    icon?: IconType | PhoenixIconsColored;
     colorTheme?: ColorTheme;
 }
 declare const MenuItem: React__default.FC<MenuItemProps>;
 
+interface ModalProps extends GenericComponentProps, PaddingProps, MarginProps {
+    open: boolean;
+    onClose: () => void;
+    showCloseButton?: boolean;
+    size?: ComponentSize;
+    animate?: boolean;
+    center?: boolean;
+}
+declare const Modal: React__default.FC<ModalProps>;
+
 declare type SubRange = number | [number] | [number, number];
 interface CommonSliderProps extends GenericComponentProps {
     range: {
@@ -759,6 +791,17 @@ declare const prefixedTheme: {
                 h4: number;
             };
         };
+        modal: {
+            zIndex: number;
+            overlayBackground: string;
+            windowShadow: string;
+            size: {
+                tiny: number;
+                small: number;
+                medium: number;
+                large: number;
+            };
+        };
         multiSelect: {
             multiValueLabel: {
                 paddingX: {
@@ -822,4 +865,4 @@ declare const prefixedTheme: {
 
 declare const GlobalStyles: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
 
-export { Button, ButtonColorTheme, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, Checkbox, CheckboxProps, ClosableButton, ClosableButtonProps, ClosableItem, ClosableItemProps, Collapsible, CollapsibleCard, CollapsibleCardProps, CollapsibleProps, ColorTheme, ComponentSize, ComponentSizeMediumLarge, ComponentSizeSmallMedium, ComponentSizeSmallMediumLarge, DateInput, DateInputProps, DatePicker, DatePickerProps, DateRangePicker, DateRangePickerProps, DateRangeValue, DateValue, Dropdown, DropdownProps, FileUpload, FileUploadProps, FileWithPreview, GlobalStyles, Heading, HeadingProps, HeadingSizes, HorizontalDivider, HorizontalDividerProps, Icon, IconAlignment, IconProps, IconType, Label, LabelProps, Link, LinkButton, LinkButtonProps, LinkProps, Menu, MenuDivider, MenuItem, MenuItemProps, MenuProps, MultiSlider, MultiSliderProps, MultiSliderValue, Notice, NoticeProps, Paragraph, ParagraphProps, PhoenixIcons, PhoenixIconsColored, PhoenixIconsColoredSrc, PhoenixIconsOutlined, PhoenixIconsOutlinedSrc, PhoenixIconsSrc, Radio, RadioProps, Select, SelectNative, SelectNativeProps, SelectOption, SelectPicker, SelectPickerOption, SelectPickerProps, SelectProps, Slider, SliderProps, SliderValue, Spacer, SpacerProps, Spacing, Spinner, SpinnerProps, Tab, TabFunctionProps, TabList, TabListProps, TabProps, Tag, TagProps, Text, TextArea, TextAreaProps, TextColor, TextInput, TextInputProps, TextProps, prefixedTheme as Theme, TimezonePicker, TimezonePickerProps, Tooltip, TooltipProps, getOptions as getTimezoneOptions };
+export { Box, BoxProps, Button, ButtonColorTheme, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, Checkbox, CheckboxProps, ClosableButton, ClosableButtonProps, ClosableItem, ClosableItemProps, Collapsible, CollapsibleCard, CollapsibleCardProps, CollapsibleProps, ColorTheme, ComponentSize, ComponentSizeMediumLarge, ComponentSizeSmallMedium, ComponentSizeSmallMediumLarge, DateInput, DateInputProps, DatePicker, DatePickerProps, DateRangePicker, DateRangePickerProps, DateRangeValue, DateValue, Dropdown, DropdownProps, FileUpload, FileUploadProps, FileWithPreview, Flex, GlobalStyles, Grid, Heading, HeadingProps, HeadingSizes, HorizontalDivider, HorizontalDividerProps, Icon, IconAlignment, IconProps, IconType, Label, LabelProps, Link, LinkButton, LinkButtonProps, LinkProps, Menu, MenuDivider, MenuItem, MenuItemProps, MenuProps, Modal, ModalProps, MultiSlider, MultiSliderProps, MultiSliderValue, Notice, NoticeProps, Paragraph, ParagraphProps, PhoenixIcons, PhoenixIconsColored, PhoenixIconsColoredSrc, PhoenixIconsOutlined, PhoenixIconsOutlinedSrc, PhoenixIconsSrc, Radio, RadioProps, Select, SelectNative, SelectNativeProps, SelectOption, SelectPicker, SelectPickerOption, SelectPickerProps, SelectProps, Slider, SliderProps, SliderValue, Spacer, SpacerProps, Spacing, Spinner, SpinnerProps, Tab, TabFunctionProps, TabList, TabListProps, TabProps, Tag, TagProps, Text, TextArea, TextAreaProps, TextColor, TextInput, TextInputProps, TextProps, prefixedTheme as Theme, TimezonePicker, TimezonePickerProps, Tooltip, TooltipProps, getOptions as getTimezoneOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@purple/phoenix-components",
-	"version": "4.15.0",
+	"version": "4.18.0",
 	"description": "",
 	"main": "dist/bundle.umd.js",
 	"module": "dist/bundle.esm.js",
@@ -60,7 +60,8 @@
 		"react-inlinesvg": "~2.3.0",
 		"react-pdf": "~5.3.2",
 		"react-select": "~4.3.1",
-		"react-tabs": "~3.2.2"
+		"react-tabs": "~3.2.2",
+		"styled-system": "~5.1.5"
 	},
 	"peerDependencies": {
 		"react": ">=16.3",
@@ -68,15 +69,11 @@
 		"styled-components": "^5.1.0"
 	},
 	"devDependencies": {
-		"jest": "^27.2.4",
-		"@babel/preset-typescript": "^7.15.0",
-		"@types/jest": "^27.0.2",
-		"@testing-library/jest-dom": "^5.14.1",
-		"@testing-library/react": "^12.1.2",
 		"@babel/cli": "^7.4.4",
 		"@babel/core": "^7.4.4",
 		"@babel/preset-env": "^7.4.4",
 		"@babel/preset-react": "^7.0.0",
+		"@babel/preset-typescript": "^7.15.0",
 		"@commitlint/cli": "^12.1.4",
 		"@commitlint/config-conventional": "^12.1.4",
 		"@percy/storybook": "^3.3.1",
@@ -84,15 +81,18 @@
 		"@rollup/plugin-node-resolve": "^13.0.4",
 		"@rollup/plugin-typescript": "^8.2.1",
 		"@rollup/plugin-url": "^6.0.0",
-		"@storybook/addon-links": "^6.3.9",
 		"@storybook/addon-a11y": "^6.3.8",
 		"@storybook/addon-docs": "^6.3.8",
 		"@storybook/addon-essentials": "^6.3.8",
+		"@storybook/addon-links": "^6.3.9",
 		"@storybook/addon-viewport": "^6.3.8",
 		"@storybook/client-api": "^6.3.8",
 		"@storybook/react": "^6.3.8",
 		"@storybook/storybook-deployer": "^2.8.10",
+		"@testing-library/jest-dom": "^5.14.1",
+		"@testing-library/react": "^12.1.2",
 		"@types/countries-and-timezones": "^2.0.3",
+		"@types/jest": "^27.0.2",
 		"@types/lodash.isequal": "^4.5.5",
 		"@types/node": "^12.7.2",
 		"@types/react": "^17.0.6",
@@ -100,6 +100,7 @@
 		"@types/react-select": "^4.0.15",
 		"@types/react-tabs": "^2.3.3",
 		"@types/styled-components": "^5.1.9",
+		"@types/styled-system": "^5.1.13",
 		"@typescript-eslint/eslint-plugin": "^4.8.2",
 		"@typescript-eslint/parser": "^4.8.2",
 		"awesome-typescript-loader": "^5.2.1",
@@ -114,6 +115,7 @@
 		"eslint-plugin-simple-import-sort": "^7.0.0",
 		"formik": "^2.1.4",
 		"husky": "^7.0.1",
+		"jest": "^27.2.4",
 		"lint-staged": "^11.0.0",
 		"prettier": "2.3.2",
 		"react": "^17.0.2",
@@ -129,6 +131,7 @@
 		"standard-version": "^9.3.0",
 		"storybook-addon-designs": "^6.0.0",
 		"styled-components": "^5.3.0",
+		"ts-transformer-keys": "^0.4.3",
 		"tslib": "^2.2.0",
 		"typescript": "~4.2.2",
 		"webpack-cli": "^3.3.1"