@hero-design/rn 7.7.0 → 7.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.7.0",
+  "version": "7.8.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -9,7 +9,6 @@
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
     "type-check": "tsc --noEmit",
-    "dev": "expo start",
     "test": "jest --runInBand",
     "test:watch": "jest --runInBand --watch",
     "test:ci": "jest --runInBand --logHeapUsage",
@@ -17,15 +16,12 @@
     "build:types": "tsc --noEmit false --emitDeclarationOnly",
     "build": "yarn build:js && yarn build:types",
     "build:watch": "yarn build:js -w & yarn build:types -w",
-    "publish:npm": "yarn publish --access public",
-    "start": "expo start --dev-client",
-    "android": "expo run:android",
-    "ios": "expo run:ios"
+    "publish:npm": "yarn publish --access public"
   },
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.7.0"
+    "@hero-design/colors": "7.8.0"
   },
   "peerDependencies": {
     "react": "17.0.2",
@@ -51,7 +47,7 @@
     "@testing-library/react-native": "^9.1.0",
     "@types/jest": "^27.0.2",
     "@types/react": "^17.0.39",
-    "@types/react-native": "^0.66.16",
+    "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "@typescript-eslint/parser": "^5.12.1",

package/src/components/Alert/__tests__/__snapshots__/index.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`Alert Icon render custom icon correctly 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#1dbeee",
+        "backgroundColor": "#b5c3fd",
         "borderRadius": 0,
         "flexDirection": "row",
         "minHeight": 48,
@@ -246,7 +246,7 @@ exports[`Alert renders correctly when intent is info 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#1dbeee",
+        "backgroundColor": "#b5c3fd",
         "borderRadius": 0,
         "flexDirection": "row",
         "minHeight": 48,

package/src/components/Avatar/index.tsx

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

package/src/components/Button/Button.tsx

@@ -32,7 +32,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.
    */
@@ -46,7 +46,7 @@ export interface ButtonProps {
    */
   rightIcon?: IconName;
   /**
-   * Addditional style.
+   * Additional style.
    */
   style?: StyleProp<ViewStyle>;
   /**
@@ -66,11 +66,13 @@ export interface ButtonProps {
 const FILLED_VARIANTS = {
   primary: 'filled-primary',
   secondary: 'filled-secondary',
+  danger: 'filled-danger',
 } as const;
 
 const OUTLINED_VARIANTS = {
   primary: 'outlined-primary',
   secondary: 'outlined-secondary',
+  danger: 'outlined-danger',
 } as const;
 
 export const getThemeVariant = (

package/src/components/Button/LoadingIndicator/StyledLoadingIndicator.tsx

@@ -2,14 +2,16 @@ import { View, ViewProps } from 'react-native';
 import styled, { ReactNativeStyle } from '@emotion/native';
 import { Theme } from '@emotion/react';
 
-type Intent = 'primary' | 'secondary';
+type Intent = 'primary' | 'secondary' | 'danger';
 
 type ThemeVariant =
   | 'basic-transparent'
   | 'filled-primary'
   | 'filled-secondary'
+  | 'filled-danger'
   | 'outlined-primary'
-  | 'outlined-secondary';
+  | 'outlined-secondary'
+  | 'outlined-danger';
 
 const genLoadingIndicatorStyles = (
   theme: Theme,
@@ -34,6 +36,7 @@ const StyledLoadingDot = styled(View)<{
       case 'basic-transparent':
       case 'filled-primary':
       case 'filled-secondary':
+      case 'filled-danger':
         return {
           backgroundColor: theme.__hd__.button.colors.invertedText,
         };
@@ -41,6 +44,8 @@ const StyledLoadingDot = styled(View)<{
         return genLoadingIndicatorStyles(theme, 'primary');
       case 'outlined-secondary':
         return genLoadingIndicatorStyles(theme, 'secondary');
+      case 'outlined-danger':
+        return genLoadingIndicatorStyles(theme, 'danger');
     }
   };
 

package/src/components/Button/LoadingIndicator/__tests__/StyledLoadingIndicator.spec.tsx

@@ -9,8 +9,10 @@ describe('StyledLoadingIndicator', () => {
     ${'basic-transparent'}
     ${'filled-primary'}
     ${'filled-secondary'}
+    ${'filled-danger'}
     ${'outlined-primary'}
     ${'outlined-secondary'}
+    ${'outlined-danger'}
   `('has $themeVariant style', ({ themeVariant }) => {
     const { toJSON } = renderWithTheme(
       <StyledLoadingDot themeVariant={themeVariant} />

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/StyledLoadingIndicator.spec.tsx.snap

@@ -20,6 +20,26 @@ exports[`StyledLoadingIndicator has basic-transparent style 1`] = `
 />
 `;
 
+exports[`StyledLoadingIndicator has filled-danger style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 8,
+        "height": 12,
+        "marginBottom": 4,
+        "marginHorizontal": 8,
+        "marginTop": 4,
+        "width": 12,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="filled-danger"
+/>
+`;
+
 exports[`StyledLoadingIndicator has filled-primary style 1`] = `
 <View
   style={
@@ -60,6 +80,26 @@ exports[`StyledLoadingIndicator has filled-secondary style 1`] = `
 />
 `;
 
+exports[`StyledLoadingIndicator has outlined-danger style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#de350b",
+        "borderRadius": 8,
+        "height": 12,
+        "marginBottom": 4,
+        "marginHorizontal": 8,
+        "marginTop": 4,
+        "width": 12,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="outlined-danger"
+/>
+`;
+
 exports[`StyledLoadingIndicator has outlined-primary style 1`] = `
 <View
   style={

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/index.spec.tsx.snap

@@ -121,6 +121,127 @@ exports[`LoadingIndicator renders correctly when themeVariant is basic-transpare
 </View>
 `;
 
+exports[`LoadingIndicator renders correctly when themeVariant is filled-danger 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingVertical": 2,
+      },
+      Object {},
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="filled-danger"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="filled-danger"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="filled-danger"
+    />
+  </View>
+</View>
+`;
+
 exports[`LoadingIndicator renders correctly when themeVariant is filled-primary 1`] = `
 <View
   collapsable={false}
@@ -363,6 +484,127 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-secondar
 </View>
 `;
 
+exports[`LoadingIndicator renders correctly when themeVariant is outlined-danger 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingVertical": 2,
+      },
+      Object {},
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#de350b",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="outlined-danger"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#de350b",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="outlined-danger"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#de350b",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="outlined-danger"
+    />
+  </View>
+</View>
+`;
+
 exports[`LoadingIndicator renders correctly when themeVariant is outlined-primary 1`] = `
 <View
   collapsable={false}

package/src/components/Button/LoadingIndicator/__tests__/index.spec.tsx

@@ -9,8 +9,10 @@ describe('LoadingIndicator', () => {
     ${'basic-transparent'}
     ${'filled-primary'}
     ${'filled-secondary'}
+    ${'filled-danger'}
     ${'outlined-primary'}
     ${'outlined-secondary'}
+    ${'outlined-danger'}
   `(
     'renders correctly when themeVariant is $themeVariant',
     ({ themeVariant }) => {

package/src/components/Button/LoadingIndicator/index.tsx

@@ -16,8 +16,10 @@ type ThemeVariant =
   | 'basic-transparent'
   | 'filled-primary'
   | 'filled-secondary'
+  | 'filled-danger'
   | 'outlined-primary'
-  | 'outlined-secondary';
+  | 'outlined-secondary'
+  | 'outlined-danger';
 
 const AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(
   StyledLoadingIndicatorWrapper

package/src/components/Button/StyledButton.tsx

@@ -5,18 +5,21 @@ import { Theme } from '@emotion/react';
 import Icon from '../Icon';
 import Typography from '../Typography';
 
-type Intent = 'primary' | 'secondary';
+type Intent = 'primary' | 'secondary' | 'danger';
 
 type ThemeVariant =
   | 'basic-transparent'
   | 'filled-primary'
   | 'filled-secondary'
+  | 'filled-danger'
   | 'outlined-primary'
-  | 'outlined-secondary';
+  | 'outlined-secondary'
+  | 'outlined-danger';
 
 const PRESSED_COLORS = {
   primary: 'pressedPrimary',
   secondary: 'pressedSecondary',
+  danger: 'pressedDanger',
 } as const;
 
 const genBasicTransparentContainerStyles = (
@@ -161,10 +164,14 @@ const StyledButtonContainer = styled(View)<{
       return genFilledContainerStyles(theme, 'primary', pressed, disabled);
     case 'filled-secondary':
       return genFilledContainerStyles(theme, 'secondary', pressed, disabled);
+    case 'filled-danger':
+      return genFilledContainerStyles(theme, 'danger', pressed, disabled);
     case 'outlined-primary':
       return genOutlineContainerStyles(theme, 'primary', pressed, disabled);
     case 'outlined-secondary':
       return genOutlineContainerStyles(theme, 'secondary', pressed, disabled);
+    case 'outlined-danger':
+      return genOutlineContainerStyles(theme, 'danger', pressed, disabled);
   }
 });
 
@@ -185,6 +192,7 @@ const StyledButtonText = styled(Typography.Text)<{
         };
       case 'filled-primary':
       case 'filled-secondary':
+      case 'filled-danger':
         return {
           fontSize: theme.__hd__.button.fontSize.default,
           lineHeight: theme.__hd__.button.lineHeight.default,
@@ -194,6 +202,8 @@ const StyledButtonText = styled(Typography.Text)<{
         return genOutlineTextStyles(theme, 'primary', pressed, disabled);
       case 'outlined-secondary':
         return genOutlineTextStyles(theme, 'secondary', pressed, disabled);
+      case 'outlined-danger':
+        return genOutlineTextStyles(theme, 'danger', pressed, disabled);
     }
   };
   return {
@@ -230,11 +240,14 @@ const StyledButtonIcon = styled(Icon)<{
         };
       case 'filled-primary':
       case 'filled-secondary':
+      case 'filled-danger':
         return { color: theme.__hd__.button.colors.invertedText };
       case 'outlined-primary':
         return genOutlineTextStyles(theme, 'primary', pressed, disabled);
       case 'outlined-secondary':
         return genOutlineTextStyles(theme, 'secondary', pressed, disabled);
+      case 'outlined-danger':
+        return genOutlineTextStyles(theme, 'danger', pressed, disabled);
     }
   };
 

package/src/components/Button/__tests__/Button.spec.tsx

@@ -78,8 +78,10 @@ describe('getThemeVariant', () => {
     ${'basic-transparent'} | ${'primary'}   | ${'basic-transparent'}
     ${'filled'}            | ${'primary'}   | ${'filled-primary'}
     ${'filled'}            | ${'secondary'} | ${'filled-secondary'}
+    ${'filled'}            | ${'danger'}    | ${'filled-danger'}
     ${'outlined'}          | ${'primary'}   | ${'outlined-primary'}
     ${'outlined'}          | ${'secondary'} | ${'outlined-secondary'}
+    ${'outlined'}          | ${'danger'}    | ${'outlined-danger'}
   `('returns $themeVariant', ({ variant, intent, themeVariant }) => {
     expect(getThemeVariant(variant, intent)).toBe(themeVariant);
   });

package/src/components/Button/__tests__/StyledButton.spec.tsx

@@ -15,8 +15,10 @@ describe('StyledButtonContainer', () => {
     ${'basic-transparent'}
     ${'filled-primary'}
     ${'filled-secondary'}
+    ${'filled-danger'}
     ${'outlined-primary'}
     ${'outlined-secondary'}
+    ${'outlined-danger'}
   `('has $themeVariant style', ({ themeVariant }) => {
     const { toJSON } = renderWithTheme(
       <StyledButtonContainer themeVariant={themeVariant} />
@@ -30,8 +32,10 @@ describe('StyledButtonContainer', () => {
     ${'basic-transparent'}
     ${'filled-primary'}
     ${'filled-secondary'}
+    ${'filled-danger'}
     ${'outlined-primary'}
     ${'outlined-secondary'}
+    ${'outlined-danger'}
   `(
     'has pressed with the correct variant $themeVariant style',
     ({ themeVariant }) => {
@@ -57,8 +61,10 @@ describe('StyledButtonText', () => {
     ${'basic-transparent'}
     ${'filled-primary'}
     ${'filled-secondary'}
+    ${'filled-danger'}
     ${'outlined-primary'}
     ${'outlined-secondary'}
+    ${'outlined-danger'}
   `('has $themeVariant style', ({ themeVariant }) => {
     const { toJSON } = renderWithTheme(
       <StyledButtonText themeVariant={themeVariant}>Example</StyledButtonText>
@@ -72,8 +78,10 @@ describe('StyledButtonText', () => {
     ${'basic-transparent'}
     ${'filled-primary'}
     ${'filled-secondary'}
+    ${'filled-danger'}
     ${'outlined-primary'}
     ${'outlined-secondary'}
+    ${'outlined-danger'}
   `(
     'has pressed with the correct variant $themeVariant style',
     ({ themeVariant }) => {
@@ -117,8 +125,10 @@ describe('StyledButtonIcon', () => {
     ${'basic-transparent'}
     ${'filled-primary'}
     ${'filled-secondary'}
+    ${'filled-danger'}
     ${'outlined-primary'}
     ${'outlined-secondary'}
+    ${'outlined-danger'}
   `('has $themeVariant style', ({ themeVariant }) => {
     const { toJSON } = renderWithTheme(
       <StyledButtonIcon icon="bell" themeVariant={themeVariant} />
@@ -132,8 +142,10 @@ describe('StyledButtonIcon', () => {
     ${'basic-transparent'}
     ${'filled-primary'}
     ${'filled-secondary'}
+    ${'filled-danger'}
     ${'outlined-primary'}
     ${'outlined-secondary'}
+    ${'outlined-danger'}
   `(
     'has pressed with the correct variant $themeVariant style',
     ({ themeVariant }) => {