@hero-design/rn 7.7.0 → 7.9.0

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

@@ -10,7 +10,7 @@ Object {
       "colors": Object {
         "divider": "#fafbfb",
         "error": "#de350b",
-        "info": "#1dbeee",
+        "info": "#b5c3fd",
         "success": "#01b39c",
         "warning": "#ffa234",
       },
@@ -134,11 +134,13 @@ Object {
         "default": 2,
       },
       "colors": Object {
+        "danger": "#de350b",
         "defaultText": "#292a2b",
         "disabledBackground": "#ccced1",
         "disabledBorder": "#ccced1",
         "disabledText": "#ccced1",
         "invertedText": "#ffffff",
+        "pressedDanger": "#f2ae9d",
         "pressedPrimary": "#c8a7ef",
         "pressedSecondary": "#d1d9fe",
         "primary": "#7622d7",
@@ -167,10 +169,20 @@ Object {
     "card": Object {
       "colors": Object {
         "dataCardIndicator": "#a26fb0",
+        "indicator": Object {
+          "archived": "#bfc1c5",
+          "danger": "#e3602a",
+          "info": "#b5c3fd",
+          "success": "#5ace7d",
+          "warning": "#ffbe71",
+        },
       },
       "radii": Object {
         "default": 12,
       },
+      "sizes": Object {
+        "indicatorWidth": 16,
+      },
     },
     "checkbox": Object {
       "borderWidths": Object {
@@ -284,6 +296,7 @@ Object {
         "danger": "#de350b",
         "disabledText": "#8b8d92",
         "info": "#4568fb",
+        "invertedText": "#ffffff",
         "primary": "#7622d7",
         "success": "#01b39c",
         "text": "#292a2b",
@@ -297,6 +310,44 @@ Object {
         "xsmall": 16,
       },
     },
+    "list": Object {
+      "colors": Object {
+        "checkedListItemContainerBackground": "#f1e9fb",
+        "leadingStatus": Object {
+          "archived": "#ccced1",
+          "danger": "#de350b",
+          "info": "#d1d9fe",
+          "success": "#017d6d",
+          "warning": "#ffbe71",
+        },
+        "listItemContainerBackground": "#ffffff",
+      },
+      "offsets": Object {
+        "cardShadow": Object {
+          "height": 2,
+          "width": 0,
+        },
+      },
+      "opacity": Object {
+        "cardShadow": 1,
+        "disabled": 0.38,
+        "enabled": 1,
+      },
+      "radii": Object {
+        "card": 8,
+        "cardShadow": 4,
+        "leadingStatus": 999,
+      },
+      "space": Object {
+        "leadingStatusMarginRight": 8,
+        "listItemContainerPadding": 16,
+        "prefixContainerMarginRight": 8,
+        "suffixContainerMarginLeft": 8,
+      },
+      "widths": Object {
+        "leadingStatus": 8,
+      },
+    },
     "progress": Object {
       "colors": Object {
         "background": "#dadbde",
@@ -490,7 +541,7 @@ Object {
       "colors": Object {
         "divider": "#fafbfb",
         "error": "#de350b",
-        "info": "#1dbeee",
+        "info": "#b5c3fd",
         "success": "#01b39c",
         "warning": "#ffa234",
       },
@@ -505,11 +556,34 @@ Object {
         "mediumPadding": 16,
       },
     },
+    "toolbar": Object {
+      "borderWidths": Object {
+        "default": 1,
+      },
+      "colors": Object {
+        "background": "#ffffff",
+        "border": "#dadbde",
+        "danger": "#ffa234",
+        "disabled": "#8b8d92",
+        "error": "#de350b",
+        "info": "#4568fb",
+        "primary": "#7622d7",
+        "success": "#01b39c",
+      },
+      "space": Object {
+        "horizontalPadding": 12,
+        "verticalPadding": 8,
+      },
+    },
     "typography": Object {
       "colors": Object {
         "body": "#292a2b",
+        "danger": "#de350b",
+        "info": "#4568fb",
         "primary": "#7622d7",
         "subdued": "#8b8d92",
+        "success": "#01b39c",
+        "warning": "#ffa234",
       },
       "fontSizes": Object {
         "large": 16,
@@ -536,19 +610,21 @@ Object {
   },
   "colors": Object {
     "archived": "#ccced1",
+    "archivedDark": "#bfc1c5",
     "backgroundDark": "#292a2b",
     "backgroundLight": "#fafbfb",
     "black": "#000000",
     "danger": "#de350b",
     "dangerBackground": "#fcebe7",
     "dangerLight": "#f2ae9d",
+    "dangerMediumLight": "#e3602a",
     "disabledLightText": "#ccced1",
     "disabledText": "#8b8d92",
     "inactiveBackground": "#727478",
     "info": "#4568fb",
     "infoBackground": "#ecf0ff",
     "infoLight": "#d1d9fe",
-    "infoMediumLight": "#1dbeee",
+    "infoMediumLight": "#b5c3fd",
     "invertedText": "#ffffff",
     "outline": "#dadbde",
     "platformBackground": "#ffffff",
@@ -558,13 +634,16 @@ Object {
     "primaryLight": "#c8a7ef",
     "secondary": "#4568fb",
     "secondaryLight": "#d1d9fe",
+    "shadow": "#dadbde",
     "success": "#01b39c",
     "successBackground": "#f0fef4",
     "successDark": "#017d6d",
+    "successLight": "#5ace7d",
     "text": "#292a2b",
     "warning": "#ffa234",
     "warningBackground": "#fff6eb",
     "warningDark": "#d98a2c",
+    "warningLight": "#ffbe71",
   },
   "fontSizes": Object {
     "large": 16,
@@ -604,6 +683,7 @@ Object {
     "large": 24,
     "medium": 16,
     "small": 8,
+    "smallMedium": 12,
     "xlarge": 32,
     "xsmall": 4,
     "xxlarge": 40,

package/src/theme/components/button.ts

@@ -35,6 +35,8 @@ const getButtonTheme = (theme: GlobalTheme) => {
     pressedPrimary: theme.colors.primaryLight,
     secondary: theme.colors.secondary,
     pressedSecondary: theme.colors.secondaryLight,
+    danger: theme.colors.danger,
+    pressedDanger: theme.colors.dangerLight,
     defaultText: theme.colors.text,
     disabledText: theme.colors.disabledLightText,
     disabledBorder: theme.colors.disabledLightText,

package/src/theme/components/card.ts

@@ -3,13 +3,24 @@ import { GlobalTheme } from '../global';
 const getCardTheme = (theme: GlobalTheme) => {
   const colors = {
     dataCardIndicator: theme.colors.primaryDark,
+    indicator: {
+      archived: theme.colors.archivedDark,
+      info: theme.colors.infoMediumLight,
+      success: theme.colors.successLight,
+      warning: theme.colors.warningLight,
+      danger: theme.colors.dangerMediumLight,
+    },
+  };
+
+  const sizes = {
+    indicatorWidth: theme.space.medium,
   };
 
   const radii = {
-    default: 12,
+    default: theme.radii.large,
   };
 
-  return { colors, radii };
+  return { colors, sizes, radii };
 };
 
 export default getCardTheme;

package/src/theme/components/icon.ts

@@ -9,6 +9,7 @@ const getIconTheme = (theme: GlobalTheme) => {
     success: theme.colors.success,
     warning: theme.colors.warning,
     disabledText: theme.colors.disabledText,
+    invertedText: theme.colors.invertedText,
   };
 
   const sizes = {

package/src/theme/components/list.ts

@@ -0,0 +1,46 @@
+import { GlobalTheme } from '../global';
+
+const getListTheme = (theme: GlobalTheme) => {
+  const colors = {
+    checkedListItemContainerBackground: theme.colors.primaryBackground,
+    listItemContainerBackground: theme.colors.platformBackground,
+    leadingStatus: {
+      danger: theme.colors.danger,
+      info: theme.colors.infoLight,
+      success: theme.colors.successDark,
+      warning: theme.colors.warningLight,
+      archived: theme.colors.archived,
+    },
+  };
+
+  const space = {
+    listItemContainerPadding: theme.space.medium,
+    leadingStatusMarginRight: theme.space.small,
+    prefixContainerMarginRight: theme.space.small,
+    suffixContainerMarginLeft: theme.space.small,
+  };
+
+  const radii = {
+    card: theme.radii.medium,
+    cardShadow: theme.radii.base,
+    leadingStatus: theme.radii.rounded,
+  };
+
+  const offsets = {
+    cardShadow: { width: 0, height: 2 },
+  };
+
+  const widths = {
+    leadingStatus: 8,
+  };
+
+  const opacity = {
+    disabled: 0.38,
+    enabled: 1,
+    cardShadow: 1,
+  };
+
+  return { colors, space, radii, offsets, widths, opacity };
+};
+
+export default getListTheme;

package/src/theme/components/toolbar.ts

@@ -0,0 +1,27 @@
+import { GlobalTheme } from '../global';
+
+const getToolbarTheme = (theme: GlobalTheme) => {
+  const colors = {
+    background: theme.colors.platformBackground,
+    border: theme.colors.outline,
+    primary: theme.colors.primary,
+    info: theme.colors.info,
+    success: theme.colors.success,
+    danger: theme.colors.warning,
+    error: theme.colors.danger,
+    disabled: theme.colors.disabledText,
+  };
+
+  const space = {
+    verticalPadding: theme.space.small,
+    horizontalPadding: theme.space.smallMedium,
+  };
+
+  const borderWidths = {
+    default: theme.borderWidths.base,
+  };
+
+  return { colors, space, borderWidths };
+};
+
+export default getToolbarTheme;

package/src/theme/components/typography.ts

@@ -5,6 +5,10 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     body: theme.colors.text,
     subdued: theme.colors.disabledText,
     primary: theme.colors.primary,
+    info: theme.colors.info,
+    danger: theme.colors.danger,
+    warning: theme.colors.warning,
+    success: theme.colors.success,
   };
 
   const fonts = {

package/src/theme/global/colors.ts

@@ -1,4 +1,6 @@
-import palette from '@hero-design/colors';
+import palette, {
+  defaultMobilePalette as mobilePalette,
+} from '@hero-design/colors';
 
 const systemPalette = {
   primary: palette.violet,
@@ -8,16 +10,19 @@ const systemPalette = {
   secondary: palette.dodgerBlue,
   secondaryLight: palette.dodgerBlueLight75,
   info: palette.dodgerBlue,
-  infoMediumLight: palette.blue,
+  infoMediumLight: mobilePalette.vodka,
   infoLight: palette.dodgerBlueLight75,
   infoBackground: palette.dodgerBlueLight90,
   success: palette.green,
+  successLight: mobilePalette.emerald,
   successDark: palette.greenDark30,
   successBackground: palette.grotesqueGreenLight90,
   danger: palette.red,
+  dangerMediumLight: mobilePalette.apple,
   dangerLight: palette.redLight60,
   dangerBackground: palette.redLight90,
   warning: palette.orange,
+  warningLight: mobilePalette.mellowApricot,
   warningDark: palette.orangeDark15,
   warningBackground: palette.orangeLight90,
   platformBackground: palette.white,
@@ -28,9 +33,11 @@ const systemPalette = {
   disabledLightText: palette.greyLight45,
   invertedText: palette.white,
   outline: palette.greyLight60,
+  archivedDark: mobilePalette.greyLight30,
   archived: palette.greyLight45,
   black: palette.black,
   inactiveBackground: palette.greyDark30,
+  shadow: palette.greyLight60,
 };
 
 type SystemPalette = typeof systemPalette;

package/src/theme/global/space.ts

@@ -4,6 +4,7 @@ interface Space {
   large: number;
   medium: number;
   small: number;
+  smallMedium: number;
   xlarge: number;
   xsmall: number;
   xxlarge: number;
@@ -16,6 +17,7 @@ const getSpace = (baseSpace: number): Space => ({
   xxsmall: scale(baseSpace * 0.25),
   xsmall: scale(baseSpace * 0.5),
   small: scale(baseSpace),
+  smallMedium: scale(baseSpace) * 1.5,
   medium: scale(baseSpace * 2),
   large: scale(baseSpace * 3),
   xlarge: scale(baseSpace * 4),

package/src/theme/index.ts

@@ -32,7 +32,9 @@ import getTabsTheme from './components/tabs';
 import getTagTheme from './components/tag';
 import getTextInputTheme from './components/textInput';
 import getToastTheme from './components/toast';
+import getToolbarTheme from './components/toolbar';
 import getTypographyTheme from './components/typography';
+import getListTheme from './components/list';
 
 type Theme = GlobalTheme & {
   __hd__: {
@@ -59,7 +61,9 @@ type Theme = GlobalTheme & {
     tag: ReturnType<typeof getTagTheme>;
     textInput: ReturnType<typeof getTextInputTheme>;
     toast: ReturnType<typeof getToastTheme>;
+    toolbar: ReturnType<typeof getToolbarTheme>;
     typography: ReturnType<typeof getTypographyTheme>;
+    list: ReturnType<typeof getListTheme>;
   };
 };
 
@@ -94,7 +98,9 @@ const getTheme = (
       tag: getTagTheme(globalTheme),
       textInput: getTextInputTheme(globalTheme),
       toast: getToastTheme(globalTheme),
+      toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
+      list: getListTheme(globalTheme),
     },
   };
 };

package/tsconfig.json

@@ -21,8 +21,7 @@
     "src"
   ],
   "exclude": [
-    "node_modules",
-    "playground"
+    "node_modules"
   ],
   "extends": "expo/tsconfig.base"
 }

package/types/components/Avatar/index.d.ts

@@ -13,7 +13,7 @@ interface AvatarProps extends ViewProps {
     /** Size of the avatar. */
     size?: 'small' | 'medium' | 'large' | 'xlarge';
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

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

@@ -22,7 +22,7 @@ export interface ButtonProps {
     /**
      * Visual intent color to apply to button. It is required for `filled`, `outlined` and `text` variants.
      */
-    intent?: 'primary' | 'secondary';
+    intent?: 'primary' | 'secondary' | 'danger';
     /**
      * Loading state of button.
      */
@@ -36,7 +36,7 @@ export interface ButtonProps {
      */
     rightIcon?: IconName;
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

package/types/components/Button/LoadingIndicator/StyledLoadingIndicator.d.ts

@@ -1,6 +1,6 @@
 import { View, ViewProps } from 'react-native';
 import { Theme } from '@emotion/react';
-declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'outlined-primary' | 'outlined-secondary';
+declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger';
 declare const StyledLoadingIndicatorWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Button/LoadingIndicator/index.d.ts

@@ -1,5 +1,5 @@
 import { StyleProp, ViewStyle, ViewProps } from 'react-native';
-declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'outlined-primary' | 'outlined-secondary';
+declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger';
 interface LoadingIndicatorProps extends ViewProps {
     /**
      * Size of the loading dot.

package/types/components/Button/StyledButton.d.ts

@@ -1,7 +1,7 @@
 import { View } from 'react-native';
 import { Theme } from '@emotion/react';
-declare type Intent = 'primary' | 'secondary';
-declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'outlined-primary' | 'outlined-secondary';
+declare type Intent = 'primary' | 'secondary' | 'danger';
+declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger';
 declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Card/DataCard/StyledDataCard.d.ts

@@ -0,0 +1,16 @@
+import { View } from 'react-native';
+declare const StyledDataCard: 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;
+}>;
+declare const Indicator: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeIntent: 'success' | 'info' | 'warning' | 'danger' | 'archived';
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledDataCard, Indicator };

package/types/components/Card/DataCard/__tests__/index.spec.d.ts

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

package/types/components/Card/DataCard/index.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+export interface DataCardProps extends ViewProps {
+    /**
+     * Card's content.
+     */
+    children?: ReactNode;
+    /**
+     * Visual intent color to apply to card.
+     */
+    intent?: 'success' | 'info' | 'warning' | 'danger' | 'archived';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const DataCard: ({ intent, children, ...nativeProps }: DataCardProps) => JSX.Element;
+export default DataCard;

package/types/components/Card/index.d.ts

@@ -7,10 +7,12 @@ interface CardProps extends ViewProps {
     children?: ReactNode;
     /**
      * Card type.
+     * This is now deprecated. If you want to use "data" variant, please use Card.Data instead.
+     * @deprecated
      */
     variant?: 'basic' | 'data';
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**
@@ -18,5 +20,7 @@ interface CardProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Card: ({ variant, children, ...nativeProps }: CardProps) => JSX.Element;
-export default Card;
+declare const _default: (({ variant, children, ...nativeProps }: CardProps) => JSX.Element) & {
+    Data: ({ intent, children, ...nativeProps }: import("./DataCard").DataCardProps) => JSX.Element;
+};
+export default _default;

package/types/components/Checkbox/index.d.ts

@@ -13,7 +13,7 @@ export interface CheckboxProps {
      */
     onPress?: () => void;
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

package/types/components/Collapse/index.d.ts

@@ -7,7 +7,7 @@ interface CollapseProps extends ViewProps {
      */
     open?: boolean;
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<ViewStyle>;
     /**

package/types/components/Icon/HeroIcon/index.d.ts

@@ -1,5 +1,5 @@
 declare type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-declare type ThemeIntent = 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text';
+declare type ThemeIntent = 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text' | 'text-inverted';
 declare const StyledHeroIcon: import("@emotion/native").StyledComponent<import("react-native-vector-icons/Icon").IconProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Icon/index.d.ts

@@ -9,13 +9,13 @@ export interface IconProps {
     /**
      * Intent of the Icon.
      */
-    intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text';
+    intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text' | 'text-inverted';
     /**
      * Size of the Icon.
      */
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<TextStyle>;
     /**

package/types/components/List/BasicListItem.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+export interface ListItemProps {
+    /**
+     * Name of Icon or component to render on the left side of title.
+     */
+    prefix?: IconName | React.ReactElement;
+    /**
+     * Name of Icon or component to render on the right side of title.
+     */
+    suffix?: IconName | React.ReactElement;
+    /**
+     * The title of the component.
+     */
+    title: string;
+    /**
+     * The subtile title of the component.
+     */
+    subtitle?: string;
+    /**
+     * Whether the component is disabled. Default value is false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the component is selected. Default value is false
+     */
+    selected?: boolean;
+    /**
+     * Additional wrapper style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Set the handler to handle press event.
+     */
+    onPress?: () => void;
+}
+declare const BasicListItem: ({ prefix, suffix, title, subtitle, style, testID, selected, disabled, onPress, }: ListItemProps) => JSX.Element;
+export default BasicListItem;