@hero-design/rn 7.9.0 → 7.10.2-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.9.0",
+  "version": "7.10.2-rc.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.9.0"
+    "@hero-design/colors": "7.10.2-rc.0"
   },
   "peerDependencies": {
     "react": "17.0.2",

package/src/components/Button/Button.tsx

@@ -60,7 +60,7 @@ export interface ButtonProps {
   /**
    * Button type.
    */
-  variant?: 'basic-transparent' | 'filled' | 'outlined';
+  variant?: 'basic-transparent' | 'filled' | 'outlined' | 'text';
 }
 
 const FILLED_VARIANTS = {
@@ -75,8 +75,14 @@ const OUTLINED_VARIANTS = {
   danger: 'outlined-danger',
 } as const;
 
+const TEXT_VARIANTS = {
+  primary: 'text-primary',
+  secondary: 'text-secondary',
+  danger: 'text-danger',
+} as const;
+
 export const getThemeVariant = (
-  variant: 'basic-transparent' | 'filled' | 'outlined',
+  variant: 'basic-transparent' | 'filled' | 'outlined' | 'text',
   intent: Intent
 ): ThemeVariant => {
   switch (variant) {
@@ -86,6 +92,8 @@ export const getThemeVariant = (
       return FILLED_VARIANTS[intent];
     case 'outlined':
       return OUTLINED_VARIANTS[intent];
+    case 'text':
+      return TEXT_VARIANTS[intent];
   }
 };
 

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

@@ -11,7 +11,10 @@ type ThemeVariant =
   | 'filled-danger'
   | 'outlined-primary'
   | 'outlined-secondary'
-  | 'outlined-danger';
+  | 'outlined-danger'
+  | 'text-primary'
+  | 'text-secondary'
+  | 'text-danger';
 
 const genLoadingIndicatorStyles = (
   theme: Theme,
@@ -41,10 +44,13 @@ const StyledLoadingDot = styled(View)<{
           backgroundColor: theme.__hd__.button.colors.invertedText,
         };
       case 'outlined-primary':
+      case 'text-primary':
         return genLoadingIndicatorStyles(theme, 'primary');
       case 'outlined-secondary':
+      case 'text-secondary':
         return genLoadingIndicatorStyles(theme, 'secondary');
       case 'outlined-danger':
+      case 'text-danger':
         return genLoadingIndicatorStyles(theme, 'danger');
     }
   };

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

@@ -13,6 +13,9 @@ describe('StyledLoadingIndicator', () => {
     ${'outlined-primary'}
     ${'outlined-secondary'}
     ${'outlined-danger'}
+    ${'text-primary'}
+    ${'text-secondary'}
+    ${'text-danger'}
   `('has $themeVariant style', ({ themeVariant }) => {
     const { toJSON } = renderWithTheme(
       <StyledLoadingDot themeVariant={themeVariant} />

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

@@ -139,3 +139,63 @@ exports[`StyledLoadingIndicator has outlined-secondary style 1`] = `
   themeVariant="outlined-secondary"
 />
 `;
+
+exports[`StyledLoadingIndicator has text-danger style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#de350b",
+        "borderRadius": 8,
+        "height": 12,
+        "marginBottom": 4,
+        "marginHorizontal": 8,
+        "marginTop": 4,
+        "width": 12,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="text-danger"
+/>
+`;
+
+exports[`StyledLoadingIndicator has text-primary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#7622d7",
+        "borderRadius": 8,
+        "height": 12,
+        "marginBottom": 4,
+        "marginHorizontal": 8,
+        "marginTop": 4,
+        "width": 12,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="text-primary"
+/>
+`;
+
+exports[`StyledLoadingIndicator has text-secondary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#4568fb",
+        "borderRadius": 8,
+        "height": 12,
+        "marginBottom": 4,
+        "marginHorizontal": 8,
+        "marginTop": 4,
+        "width": 12,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="text-secondary"
+/>
+`;

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

@@ -846,3 +846,366 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
   </View>
 </View>
 `;
+
+exports[`LoadingIndicator renders correctly when themeVariant is text-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="text-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="text-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="text-danger"
+    />
+  </View>
+</View>
+`;
+
+exports[`LoadingIndicator renders correctly when themeVariant is text-primary 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": "#7622d7",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="text-primary"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="text-primary"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="text-primary"
+    />
+  </View>
+</View>
+`;
+
+exports[`LoadingIndicator renders correctly when themeVariant is text-secondary 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": "#4568fb",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="text-secondary"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#4568fb",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="text-secondary"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      size={12}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#4568fb",
+            "borderRadius": 8,
+            "height": 12,
+            "marginBottom": 4,
+            "marginHorizontal": 8,
+            "marginTop": 4,
+            "width": 12,
+          },
+          Object {},
+        ]
+      }
+      themeVariant="text-secondary"
+    />
+  </View>
+</View>
+`;

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

@@ -13,6 +13,9 @@ describe('LoadingIndicator', () => {
     ${'outlined-primary'}
     ${'outlined-secondary'}
     ${'outlined-danger'}
+    ${'text-primary'}
+    ${'text-secondary'}
+    ${'text-danger'}
   `(
     'renders correctly when themeVariant is $themeVariant',
     ({ themeVariant }) => {

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

@@ -19,7 +19,10 @@ type ThemeVariant =
   | 'filled-danger'
   | 'outlined-primary'
   | 'outlined-secondary'
-  | 'outlined-danger';
+  | 'outlined-danger'
+  | 'text-primary'
+  | 'text-secondary'
+  | 'text-danger';
 
 const AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(
   StyledLoadingIndicatorWrapper

package/src/components/Button/StyledButton.tsx

@@ -14,7 +14,10 @@ type ThemeVariant =
   | 'filled-danger'
   | 'outlined-primary'
   | 'outlined-secondary'
-  | 'outlined-danger';
+  | 'outlined-danger'
+  | 'text-primary'
+  | 'text-secondary'
+  | 'text-danger';
 
 const PRESSED_COLORS = {
   primary: 'pressedPrimary',
@@ -152,6 +155,35 @@ const genOutlineTextStyles = (
   };
 };
 
+const genTextVariantTextStyles = (
+  theme: Theme,
+  intent: Intent,
+  pressed?: boolean,
+  disabled?: boolean
+): ReactNativeStyle => {
+  const textColorStyling = () => {
+    if (disabled) {
+      return {
+        color: theme.__hd__.button.colors.disabledText,
+      };
+    }
+
+    if (pressed) {
+      return {
+        color: theme.__hd__.button.colors[PRESSED_COLORS[intent]],
+      };
+    }
+
+    return { color: theme.__hd__.button.colors[intent] };
+  };
+
+  return {
+    fontSize: theme.__hd__.button.fontSize.textVariant,
+    lineHeight: theme.__hd__.button.lineHeight.default,
+    ...textColorStyling(),
+  };
+};
+
 const StyledButtonContainer = styled(View)<{
   disabled?: boolean;
   pressed?: boolean;
@@ -172,6 +204,18 @@ const StyledButtonContainer = styled(View)<{
       return genOutlineContainerStyles(theme, 'secondary', pressed, disabled);
     case 'outlined-danger':
       return genOutlineContainerStyles(theme, 'danger', pressed, disabled);
+    case 'text-primary':
+    case 'text-secondary':
+    case 'text-danger':
+      return {
+        width: '100%',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: theme.__hd__.button.space.buttonPadding,
+        borderWidth: 0,
+        backgroundColor: 'transparent',
+      };
   }
 });
 
@@ -204,6 +248,12 @@ const StyledButtonText = styled(Typography.Text)<{
         return genOutlineTextStyles(theme, 'secondary', pressed, disabled);
       case 'outlined-danger':
         return genOutlineTextStyles(theme, 'danger', pressed, disabled);
+      case 'text-primary':
+        return genTextVariantTextStyles(theme, 'primary', pressed, disabled);
+      case 'text-secondary':
+        return genTextVariantTextStyles(theme, 'secondary', pressed, disabled);
+      case 'text-danger':
+        return genTextVariantTextStyles(theme, 'danger', pressed, disabled);
     }
   };
   return {
@@ -248,6 +298,12 @@ const StyledButtonIcon = styled(Icon)<{
         return genOutlineTextStyles(theme, 'secondary', pressed, disabled);
       case 'outlined-danger':
         return genOutlineTextStyles(theme, 'danger', pressed, disabled);
+      case 'text-primary':
+        return genTextVariantTextStyles(theme, 'primary', pressed, disabled);
+      case 'text-secondary':
+        return genTextVariantTextStyles(theme, 'secondary', pressed, disabled);
+      case 'text-danger':
+        return genTextVariantTextStyles(theme, 'danger', pressed, disabled);
     }
   };