@hero-design/rn 7.12.1 → 7.14.0

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -3,6 +3,17 @@
 exports[`theme returns correct theme object 1`] = `
 Object {
   "__hd__": Object {
+    "accordion": Object {
+      "colors": Object {
+        "background": "#ffffff",
+      },
+      "radii": Object {
+        "card": 8,
+      },
+      "space": Object {
+        "padding": 16,
+      },
+    },
     "alert": Object {
       "borderWidths": Object {
         "base": 1,
@@ -145,6 +156,18 @@ Object {
         "pressedSecondary": "#d1d9fe",
         "primary": "#7622d7",
         "secondary": "#4568fb",
+        "underlayColors": Object {
+          "basic-transparent": "#c8a7ef",
+          "filled-danger": "#f2ae9d",
+          "filled-primary": "#c8a7ef",
+          "filled-secondary": "#d1d9fe",
+          "outlined-danger": "#fcebe7",
+          "outlined-primary": "#f1e9fb",
+          "outlined-secondary": "#ecf0ff",
+          "text-danger": "#fcebe7",
+          "text-primary": "#f1e9fb",
+          "text-secondary": "#ecf0ff",
+        },
         "utilityBackground": "#fafbfb",
       },
       "fontSize": Object {
@@ -172,6 +195,30 @@ Object {
         "utilityPadding": 8,
       },
     },
+    "calendar": Object {
+      "colors": Object {
+        "background": "#fafbfb",
+        "border": "#292a2b",
+        "inverted": "#ffffff",
+        "primary": "#7622d7",
+      },
+      "radii": Object {
+        "default": 999,
+      },
+      "sizes": Object {
+        "cellCircleHeight": 44,
+        "cellCircleWidth": 44,
+        "cellHeight": 48,
+        "cellWidth": 48,
+        "markHeight": 4,
+        "markWidth": 4,
+      },
+      "space": Object {
+        "headerHorizontalPadding": 12,
+        "headerVerticalPadding": 16,
+        "rowVerticalPadding": 16,
+      },
+    },
     "card": Object {
       "colors": Object {
         "dataCardIndicator": "#a26fb0",
@@ -214,6 +261,11 @@ Object {
         "valueHorizontalPadding": 8,
       },
     },
+    "datePicker": Object {
+      "sizes": Object {
+        "height": 176,
+      },
+    },
     "divider": Object {
       "borderWidths": Object {
         "default": 1,
@@ -248,12 +300,39 @@ Object {
         "radius": 4.65,
       },
     },
+    "empty": Object {
+      "colors": Object {
+        "illustrationBackground": "#dadbde",
+        "invertedText": "#ffffff",
+        "subduedText": "#727478",
+        "text": "#292a2b",
+      },
+      "fontSizes": Object {
+        "description": 16,
+        "title": 28,
+      },
+      "fonts": Object {
+        "description": "BeVietnamPro-Light",
+        "title": "BeVietnamPro-SemiBold",
+      },
+      "radii": Object {
+        "illustration": 999,
+      },
+      "sizes": Object {
+        "illustration": 168,
+      },
+      "space": Object {
+        "large": 24,
+        "medium": 16,
+      },
+    },
     "fab": Object {
       "colors": Object {
-        "actionItemBackground": "#d1d9fe",
-        "backdropBackground": "#ffffff",
+        "actionItemBackground": "#4d6265",
+        "actionItemText": "#ffffff",
+        "backdropBackground": "#292a2b",
         "buttonBackground": "#292a2b",
-        "headerText": "#292a2b",
+        "headerText": "#ffffff",
         "icon": "#ffffff",
         "titleText": "#ffffff",
       },
@@ -319,6 +398,7 @@ Object {
     "list": Object {
       "colors": Object {
         "checkedListItemContainerBackground": "#f1e9fb",
+        "highlightedListItemContainerBackground": "#f1e9fb",
         "leadingStatus": Object {
           "archived": "#ccced1",
           "danger": "#de350b",
@@ -429,6 +509,30 @@ Object {
         "wrapperPadding": 16,
       },
     },
+    "richTextEditor": Object {
+      "borderWidths": Object {
+        "webViewBorderBottomWidth": 0.8,
+      },
+      "colors": Object {
+        "toolbarBackgroundColor": "#fafbfb",
+        "toolbarBorderColor": "#dadbde",
+        "toolbarButtonSelectedBackground": "#dadbde",
+      },
+      "fontSizes": Object {
+        "editor": 14,
+      },
+      "sizes": Object {
+        "editorMinHeight": 21,
+        "toolbarButtonSize": 48,
+        "toolbarSeparatorHeight": 16,
+        "toolbarSeparatorWidth": 1,
+      },
+      "space": Object {
+        "editorPadding": 16,
+        "toolbarHorizontalPadding": 8,
+        "wrapperMarginBottom": 16,
+      },
+    },
     "sectionHeading": Object {
       "colors": Object {
         "background": "#dadbde",
@@ -532,10 +636,16 @@ Object {
         "default": 1,
       },
       "colors": Object {
+        "archived": "#737479",
+        "archivedBackground": "#f1f2f3",
         "danger": "#de350b",
         "dangerBackground": "#fcebe7",
+        "default": "#292a2b",
+        "defaultBackground": undefined,
         "info": "#4568fb",
         "infoBackground": "#ecf0ff",
+        "primary": "#7622d7",
+        "primaryBackground": "#f1e9fb",
         "success": "#017d6d",
         "successBackground": "#f0fef4",
         "warning": "#d98a2c",
@@ -687,6 +797,7 @@ Object {
         "body": "#292a2b",
         "danger": "#de350b",
         "info": "#4568fb",
+        "inverted": "#ffffff",
         "primary": "#7622d7",
         "subdued": "#8b8d92",
         "success": "#01b39c",
@@ -719,7 +830,9 @@ Object {
   },
   "colors": Object {
     "archived": "#ccced1",
-    "archivedDark": "#bfc1c5",
+    "archivedBackground": "#f1f2f3",
+    "archivedDark": "#737479",
+    "archivedLight": "#bfc1c5",
     "backgroundDark": "#292a2b",
     "backgroundLight": "#fafbfb",
     "black": "#000000",
@@ -739,9 +852,11 @@ Object {
     "platformBackground": "#ffffff",
     "primary": "#7622d7",
     "primaryBackground": "#f1e9fb",
+    "primaryBackgroundDark": "#4d6265",
     "primaryDark": "#a26fb0",
     "primaryLight": "#c8a7ef",
     "secondary": "#4568fb",
+    "secondaryBackground": "#ecf0ff",
     "secondaryLight": "#d1d9fe",
     "shadow": "#dadbde",
     "subduedText": "#727478",

package/src/theme/components/accordion.ts

@@ -0,0 +1,19 @@
+import { GlobalTheme } from '../global';
+
+const getAccordionTheme = (theme: GlobalTheme) => {
+  const colors = {
+    background: theme.colors.platformBackground,
+  };
+
+  const space = {
+    padding: theme.space.medium,
+  };
+
+  const radii = {
+    card: theme.radii.medium,
+  };
+
+  return { colors, space, radii };
+};
+
+export default getAccordionTheme;

package/src/theme/components/button.ts

@@ -48,6 +48,18 @@ const getButtonTheme = (theme: GlobalTheme) => {
     disabledBackground: theme.colors.disabledLightText,
     invertedText: theme.colors.invertedText,
     utilityBackground: theme.colors.backgroundLight,
+    underlayColors: {
+      'filled-primary': theme.colors.primaryLight,
+      'filled-secondary': theme.colors.secondaryLight,
+      'filled-danger': theme.colors.dangerLight,
+      'outlined-primary': theme.colors.primaryBackground,
+      'outlined-secondary': theme.colors.secondaryBackground,
+      'outlined-danger': theme.colors.dangerBackground,
+      'text-primary': theme.colors.primaryBackground,
+      'text-secondary': theme.colors.secondaryBackground,
+      'text-danger': theme.colors.dangerBackground,
+      'basic-transparent': theme.colors.primaryLight,
+    },
   };
 
   return {

package/src/theme/components/calendar.ts

@@ -0,0 +1,34 @@
+import { GlobalTheme } from '../global';
+import { scale } from '../../utils/scale';
+
+const getCalendarTheme = (theme: GlobalTheme) => {
+  const colors = {
+    background: theme.colors.backgroundLight,
+    border: theme.colors.text,
+    primary: theme.colors.primary,
+    inverted: theme.colors.invertedText,
+  };
+
+  const sizes = {
+    cellWidth: scale(48),
+    cellHeight: scale(48),
+    cellCircleWidth: scale(44),
+    cellCircleHeight: scale(44),
+    markWidth: scale(4),
+    markHeight: scale(4),
+  };
+
+  const space = {
+    rowVerticalPadding: theme.space.medium,
+    headerVerticalPadding: theme.space.medium,
+    headerHorizontalPadding: theme.space.smallMedium,
+  };
+
+  const radii = {
+    default: theme.radii.rounded,
+  };
+
+  return { radii, colors, sizes, space };
+};
+
+export default getCalendarTheme;

package/src/theme/components/card.ts

@@ -4,7 +4,7 @@ const getCardTheme = (theme: GlobalTheme) => {
   const colors = {
     dataCardIndicator: theme.colors.primaryDark,
     indicator: {
-      archived: theme.colors.archivedDark,
+      archived: theme.colors.archivedLight,
       info: theme.colors.infoMediumLight,
       success: theme.colors.successLight,
       warning: theme.colors.warningLight,

package/src/theme/components/datePicker.ts

@@ -0,0 +1,11 @@
+import { scale } from '../../utils/scale';
+
+const getDatePickerTheme = () => {
+  const sizes = {
+    height: scale(176),
+  };
+
+  return { sizes };
+};
+
+export default getDatePickerTheme;

package/src/theme/components/empty.ts

@@ -0,0 +1,38 @@
+import { scale } from '../../utils/scale';
+import { GlobalTheme } from '../global';
+
+const getEmptyTheme = (theme: GlobalTheme) => {
+  const space = {
+    medium: theme.space.medium,
+    large: theme.space.large,
+  };
+
+  const sizes = {
+    illustration: scale(168),
+  };
+
+  const radii = {
+    illustration: theme.radii.rounded,
+  };
+
+  const colors = {
+    text: theme.colors.text,
+    invertedText: theme.colors.invertedText,
+    subduedText: theme.colors.subduedText,
+    illustrationBackground: theme.colors.shadow,
+  };
+
+  const fontSizes = {
+    title: theme.fontSizes.xxxxlarge,
+    description: theme.fontSizes.large,
+  };
+
+  const fonts = {
+    title: theme.fonts.semiBold,
+    description: theme.fonts.light,
+  };
+
+  return { fontSizes, colors, sizes, space, fonts, radii };
+};
+
+export default getEmptyTheme;

package/src/theme/components/fab.ts

@@ -4,10 +4,11 @@ const getFABTheme = (theme: GlobalTheme) => {
   const colors = {
     buttonBackground: theme.colors.backgroundDark,
     icon: theme.colors.invertedText,
-    headerText: theme.colors.text,
-    actionItemBackground: theme.colors.infoLight,
-    backdropBackground: theme.colors.platformBackground,
+    headerText: theme.colors.invertedText,
+    actionItemBackground: theme.colors.primaryBackgroundDark,
+    backdropBackground: theme.colors.backgroundDark,
     titleText: theme.colors.invertedText,
+    actionItemText: theme.colors.invertedText,
   };
 
   const sizes = {

package/src/theme/components/list.ts

@@ -3,6 +3,7 @@ import { GlobalTheme } from '../global';
 const getListTheme = (theme: GlobalTheme) => {
   const colors = {
     checkedListItemContainerBackground: theme.colors.primaryBackground,
+    highlightedListItemContainerBackground: theme.colors.primaryBackground,
     listItemContainerBackground: theme.colors.platformBackground,
     leadingStatus: {
       danger: theme.colors.danger,

package/src/theme/components/pinInput.ts

@@ -10,7 +10,7 @@ const getPinInputTheme = (theme: GlobalTheme) => {
     default: theme.colors.text,
     mask: theme.colors.subduedText, // should be Maastricht Blue light 50
     error: theme.colors.danger, // using this so that the color is the same as danger Icon, should be Vermilion
-    disabled: theme.colors.archivedDark,
+    disabled: theme.colors.archivedLight,
   };
 
   const fonts = {

package/src/theme/components/richTextEditor.ts

@@ -0,0 +1,34 @@
+import { GlobalTheme } from '../global';
+
+const getRichTextEditorTheme = (theme: GlobalTheme) => {
+  const colors = {
+    toolbarBorderColor: theme.colors.outline,
+    toolbarBackgroundColor: theme.colors.backgroundLight,
+    toolbarButtonSelectedBackground: theme.colors.outline,
+  };
+
+  const borderWidths = {
+    webViewBorderBottomWidth: 0.8,
+  };
+
+  const sizes = {
+    editorMinHeight: 21,
+    toolbarButtonSize: theme.space.xxxlarge,
+    toolbarSeparatorWidth: 1,
+    toolbarSeparatorHeight: theme.space.medium,
+  };
+
+  const fontSizes = {
+    editor: theme.fontSizes.medium,
+  };
+
+  const space = {
+    wrapperMarginBottom: theme.space.medium,
+    toolbarHorizontalPadding: theme.space.small,
+    editorPadding: theme.space.medium,
+  };
+
+  return { colors, space, borderWidths, fontSizes, sizes };
+};
+
+export default getRichTextEditorTheme;

package/src/theme/components/tag.ts

@@ -6,14 +6,20 @@ const getTagTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    danger: theme.colors.danger,
-    dangerBackground: theme.colors.dangerBackground,
+    default: theme.colors.text,
+    defaultBackground: undefined,
+    primary: theme.colors.primary,
+    primaryBackground: theme.colors.primaryBackground,
     info: theme.colors.info,
     infoBackground: theme.colors.infoBackground,
     success: theme.colors.successDark,
     successBackground: theme.colors.successBackground,
     warning: theme.colors.warningDark,
     warningBackground: theme.colors.warningBackground,
+    danger: theme.colors.danger,
+    dangerBackground: theme.colors.dangerBackground,
+    archived: theme.colors.archivedDark,
+    archivedBackground: theme.colors.archivedBackground,
   };
 
   const fonts = {

package/src/theme/components/typography.ts

@@ -9,6 +9,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     danger: theme.colors.danger,
     warning: theme.colors.warning,
     success: theme.colors.success,
+    inverted: theme.colors.invertedText,
   };
 
   const fonts = {

package/src/theme/global/borders.ts

@@ -12,16 +12,16 @@ interface Radii {
 }
 
 const getBorderWidths = (baseBorderWidth: number): BorderWidths => ({
-  base: baseBorderWidth,
-  medium: baseBorderWidth * 2,
+  base: baseBorderWidth, // 1
+  medium: baseBorderWidth * 2, // 2
 });
 
 const getRadii = (baseRadius: number): Radii => ({
   rounded: 999,
-  base: baseRadius,
-  medium: baseRadius * 2,
-  large: baseRadius * 3,
-  xlarge: baseRadius * 4,
+  base: baseRadius, // 4
+  medium: baseRadius * 2, // 8
+  large: baseRadius * 3, // 12
+  xlarge: baseRadius * 4, // 16
 });
 
 export { BorderWidths, getBorderWidths, Radii, getRadii };

package/src/theme/global/colors.ts

@@ -7,8 +7,10 @@ const systemPalette = {
   primaryLight: palette.violetLight60,
   primaryDark: palette.purpleDark15,
   primaryBackground: palette.violetLight90,
+  primaryBackgroundDark: mobilePalette.maasstrichtBlueLight30,
   secondary: palette.dodgerBlue,
   secondaryLight: palette.dodgerBlueLight75,
+  secondaryBackground: palette.dodgerBlueLight90,
   info: palette.dodgerBlue,
   infoMediumLight: mobilePalette.vodka,
   infoLight: palette.dodgerBlueLight75,
@@ -34,8 +36,10 @@ const systemPalette = {
   disabledLightText: palette.greyLight45,
   invertedText: palette.white,
   outline: palette.greyLight60,
-  archivedDark: mobilePalette.greyLight30,
   archived: palette.greyLight45,
+  archivedLight: mobilePalette.greyLight30,
+  archivedDark: mobilePalette.sonicSilver,
+  archivedBackground: mobilePalette.antiFlashWhite,
   black: palette.black,
   inactiveBackground: palette.greyDark30,
   shadow: palette.greyLight60,

package/src/theme/index.ts

@@ -9,23 +9,28 @@ import {
   defaultSystemPalette,
 } from './global';
 
+import getAccordionTheme from './components/accordion';
 import getAlertTheme from './components/alert';
 import getAvatarTheme from './components/avatar';
 import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
 import getBottomSheetTheme from './components/bottomSheet';
 import getButtonTheme from './components/button';
+import getCalendarTheme from './components/calendar';
 import getCardTheme from './components/card';
 import getCheckboxTheme from './components/checkbox';
 import getContentNavigatorTheme from './components/contentNavigator';
+import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
+import getEmptyTheme from './components/empty';
 import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
 import getListTheme from './components/list';
 import getPinInputTheme from './components/pinInput';
 import getProgressTheme from './components/progress';
 import getRadioTheme from './components/radio';
+import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
 import getSelectTheme from './components/select';
 import getSpinnerTheme from './components/spinner';
@@ -40,23 +45,28 @@ import getTypographyTheme from './components/typography';
 
 type Theme = GlobalTheme & {
   __hd__: {
+    accordion: ReturnType<typeof getAccordionTheme>;
     alert: ReturnType<typeof getAlertTheme>;
     avatar: ReturnType<typeof getAvatarTheme>;
     badge: ReturnType<typeof getBadgeTheme>;
     bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
     bottomSheet: ReturnType<typeof getBottomSheetTheme>;
     button: ReturnType<typeof getButtonTheme>;
+    calendar: ReturnType<typeof getCalendarTheme>;
     card: ReturnType<typeof getCardTheme>;
     checkbox: ReturnType<typeof getCheckboxTheme>;
     contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
+    datePicker: ReturnType<typeof getDatePickerTheme>;
     divider: ReturnType<typeof getDividerTheme>;
     drawer: ReturnType<typeof getDrawerTheme>;
+    empty: ReturnType<typeof getEmptyTheme>;
     fab: ReturnType<typeof getFABTheme>;
     icon: ReturnType<typeof getIconTheme>;
     list: ReturnType<typeof getListTheme>;
     pinInput: ReturnType<typeof getPinInputTheme>;
     progress: ReturnType<typeof getProgressTheme>;
     radio: ReturnType<typeof getRadioTheme>;
+    richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
     sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
     select: ReturnType<typeof getSelectTheme>;
     spinner: ReturnType<typeof getSpinnerTheme>;
@@ -79,23 +89,28 @@ const getTheme = (
   return {
     ...globalTheme,
     __hd__: {
+      accordion: getAccordionTheme(globalTheme),
       avatar: getAvatarTheme(globalTheme),
       alert: getAlertTheme(globalTheme),
       badge: getBadgeTheme(globalTheme),
       bottomNavigation: getBottomNavigationTheme(globalTheme),
       bottomSheet: getBottomSheetTheme(globalTheme),
       button: getButtonTheme(globalTheme),
+      calendar: getCalendarTheme(globalTheme),
       card: getCardTheme(globalTheme),
       checkbox: getCheckboxTheme(globalTheme),
       contentNavigator: getContentNavigatorTheme(globalTheme),
+      datePicker: getDatePickerTheme(),
       divider: getDividerTheme(globalTheme),
       drawer: getDrawerTheme(globalTheme),
+      empty: getEmptyTheme(globalTheme),
       fab: getFABTheme(globalTheme),
       icon: getIconTheme(globalTheme),
       list: getListTheme(globalTheme),
       pinInput: getPinInputTheme(globalTheme),
       progress: getProgressTheme(globalTheme),
       radio: getRadioTheme(globalTheme),
+      richTextEditor: getRichTextEditorTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
       select: getSelectTheme(globalTheme),
       spinner: getSpinnerTheme(globalTheme),

package/testUtils/setup.tsx

@@ -51,3 +51,20 @@ jest.mock('@react-native-community/datetimepicker', () => {
     }
   };
 });
+
+jest.mock('react-native-webview', () => {
+  const React = jest.requireActual('react');
+
+  class WebView extends React.Component {
+    render() {
+      return React.createElement('WebView', this.props, this.props.children);
+    }
+  }
+
+  return {
+    WebView,
+    default: WebView,
+  };
+});
+
+jest.mock('hero-editor/dist/app.js', () => ({ default: '' }));

package/types/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { Variant } from './StyledAccordion';
+export declare type AccordionItemProps = {
+    header: string | ReactElement;
+    content: ReactElement;
+    open?: boolean;
+    onPress?: () => void;
+    variant?: Variant;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+};
+declare const AccordionItem: ({ header, content, open, onPress, variant, style, testID, }: AccordionItemProps) => JSX.Element;
+export default AccordionItem;

package/types/components/Accordion/StyledAccordion.d.ts

@@ -0,0 +1,32 @@
+import { TouchableOpacity, View } from 'react-native';
+export declare type Variant = 'default' | 'card';
+export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledItemWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: Variant;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+export declare const StyledCollapse: import("@emotion/native").StyledComponent<import("../Collapse").CollapseProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export declare const Spacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;

package/types/components/Accordion/__tests__/AccordionItem.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/Accordion/__tests__/StyledAccordion.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/Accordion/__tests__/index.spec.d.ts

@@ -0,0 +1 @@
+export {};