@hero-design/rn 7.8.0 → 7.10.1

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

@@ -305,6 +305,129 @@ exports[`StyledButtonContainer has pressed with the correct variant outlined-sec
 />
 `;
 
+exports[`StyledButtonContainer has pressed with the correct variant text-danger style 1`] = `
+<View
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="text-danger"
+/>
+`;
+
+exports[`StyledButtonContainer has pressed with the correct variant text-primary style 1`] = `
+<View
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="text-primary"
+/>
+`;
+
+exports[`StyledButtonContainer has pressed with the correct variant text-secondary style 1`] = `
+<View
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="text-secondary"
+/>
+`;
+
+exports[`StyledButtonContainer has text-danger style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="text-danger"
+/>
+`;
+
+exports[`StyledButtonContainer has text-primary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="text-primary"
+/>
+`;
+
+exports[`StyledButtonContainer has text-secondary style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "padding": 16,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="text-secondary"
+/>
+`;
+
 exports[`StyledButtonContainer renders disabled correctly 1`] = `
 <View
   disabled={true}
@@ -654,6 +777,150 @@ exports[`StyledButtonIcon has pressed with the correct variant outlined-secondar
 />
 `;
 
+exports[`StyledButtonIcon has pressed with the correct variant text-danger style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#f2ae9d",
+          "fontSize": 16,
+          "lineHeight": 24,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIcon has pressed with the correct variant text-primary style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#c8a7ef",
+          "fontSize": 16,
+          "lineHeight": 24,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIcon has pressed with the correct variant text-secondary style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#d1d9fe",
+          "fontSize": 16,
+          "lineHeight": 24,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIcon has text-danger style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#de350b",
+          "fontSize": 16,
+          "lineHeight": 24,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIcon has text-primary style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#7622d7",
+          "fontSize": 16,
+          "lineHeight": 24,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledButtonIcon has text-secondary style 1`] = `
+<HeroIcon
+  name="bell"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#4568fb",
+          "fontSize": 16,
+          "lineHeight": 24,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
 exports[`StyledButtonIcon renders disabled correctly 1`] = `
 <HeroIcon
   name="bell"
@@ -1174,6 +1441,207 @@ exports[`StyledButtonText has pressed with the correct variant outlined-secondar
 </Text>
 `;
 
+exports[`StyledButtonText has pressed with the correct variant text-danger style 1`] = `
+<Text
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#f2ae9d",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 16,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="text-danger"
+>
+  Example
+</Text>
+`;
+
+exports[`StyledButtonText has pressed with the correct variant text-primary style 1`] = `
+<Text
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#c8a7ef",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 16,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="text-primary"
+>
+  Example
+</Text>
+`;
+
+exports[`StyledButtonText has pressed with the correct variant text-secondary style 1`] = `
+<Text
+  pressed={true}
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#d1d9fe",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 16,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="text-secondary"
+>
+  Example
+</Text>
+`;
+
+exports[`StyledButtonText has text-danger style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#de350b",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 16,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="text-danger"
+>
+  Example
+</Text>
+`;
+
+exports[`StyledButtonText has text-primary style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#7622d7",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 16,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="text-primary"
+>
+  Example
+</Text>
+`;
+
+exports[`StyledButtonText has text-secondary style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#4568fb",
+          "flexShrink": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 16,
+          "lineHeight": 24,
+          "textAlign": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="text-secondary"
+>
+  Example
+</Text>
+`;
+
 exports[`StyledButtonText renders disabled correctly 1`] = `
 <Text
   disabled={true}

package/src/components/Button/index.tsx

@@ -1,13 +1,16 @@
 import { FunctionComponent } from 'react';
 import Button, { ButtonProps } from './Button';
 import IconButton from './IconButton';
+import UtilityButton from './UtilityButton';
 
 interface CompoundButtonProps extends FunctionComponent<ButtonProps> {
   Icon: typeof IconButton;
+  Utility: typeof UtilityButton;
 }
 
 const CompoundButton = Button as CompoundButtonProps;
 
 CompoundButton.Icon = IconButton;
+CompoundButton.Utility = UtilityButton;
 
 export default CompoundButton;

package/src/components/Card/DataCard/StyledDataCard.tsx

@@ -1,11 +1,9 @@
 import { View } from 'react-native';
 import styled from '@emotion/native';
-import { scale } from '../../../utils/scale';
 
 const StyledDataCard = styled(View)(({ theme }) => ({
   borderRadius: theme.__hd__.card.radii.default,
   overflow: 'hidden',
-  flex: 1,
   flexDirection: 'row',
 }));
 
@@ -13,7 +11,7 @@ const Indicator = styled(View)<{
   themeIntent: 'success' | 'info' | 'warning' | 'danger' | 'archived';
 }>(({ theme, themeIntent }) => ({
   backgroundColor: theme.__hd__.card.colors.indicator[themeIntent],
-  width: scale(16),
+  width: theme.__hd__.card.sizes.indicatorWidth,
   height: '100%',
 }));
 

package/src/components/Card/DataCard/__tests__/__snapshots__/StyledDataCard.spec.tsx.snap

@@ -86,7 +86,6 @@ exports[`StyledDataCard renders correctly 1`] = `
     Array [
       Object {
         "borderRadius": 12,
-        "flex": 1,
         "flexDirection": "row",
         "overflow": "hidden",
       },

package/src/components/Card/DataCard/__tests__/__snapshots__/index.spec.tsx.snap

@@ -6,7 +6,6 @@ exports[`DataCard renders correctly when intent is archived 1`] = `
     Array [
       Object {
         "borderRadius": 12,
-        "flex": 1,
         "flexDirection": "row",
         "overflow": "hidden",
       },
@@ -37,7 +36,6 @@ exports[`DataCard renders correctly when intent is danger 1`] = `
     Array [
       Object {
         "borderRadius": 12,
-        "flex": 1,
         "flexDirection": "row",
         "overflow": "hidden",
       },
@@ -68,7 +66,6 @@ exports[`DataCard renders correctly when intent is info 1`] = `
     Array [
       Object {
         "borderRadius": 12,
-        "flex": 1,
         "flexDirection": "row",
         "overflow": "hidden",
       },
@@ -99,7 +96,6 @@ exports[`DataCard renders correctly when intent is success 1`] = `
     Array [
       Object {
         "borderRadius": 12,
-        "flex": 1,
         "flexDirection": "row",
         "overflow": "hidden",
       },
@@ -130,7 +126,6 @@ exports[`DataCard renders correctly when intent is warning 1`] = `
     Array [
       Object {
         "borderRadius": 12,
-        "flex": 1,
         "flexDirection": "row",
         "overflow": "hidden",
       },

package/src/components/Card/StyledCard.tsx

@@ -1,6 +1,5 @@
 import { View } from 'react-native';
 import styled from '@emotion/native';
-import { scale } from '../../utils/scale';
 
 const StyledCard = styled(View)<{ themeVariant: 'basic' | 'data' }>(
   ({ themeVariant, theme }) => {
@@ -10,7 +9,6 @@ const StyledCard = styled(View)<{ themeVariant: 'basic' | 'data' }>(
     } as const;
 
     const dataStyles = {
-      flex: 1,
       flexDirection: 'row',
     };
 
@@ -25,7 +23,7 @@ const StyledCard = styled(View)<{ themeVariant: 'basic' | 'data' }>(
 
 const LeftDataCard = styled(View)(({ theme }) => ({
   backgroundColor: theme.__hd__.card.colors.dataCardIndicator,
-  width: scale(16),
+  width: theme.__hd__.card.sizes.indicatorWidth,
   height: '100%',
 }));
 

package/src/components/Card/__tests__/__snapshots__/StyledCard.spec.tsx.snap

@@ -36,7 +36,6 @@ exports[`StyledCard renders correct data style 1`] = `
     Array [
       Object {
         "borderRadius": 12,
-        "flex": 1,
         "flexDirection": "row",
         "overflow": "hidden",
       },

package/src/components/Icon/HeroIcon/index.tsx

@@ -10,7 +10,8 @@ type ThemeIntent =
   | 'danger'
   | 'success'
   | 'warning'
-  | 'disabled-text';
+  | 'disabled-text'
+  | 'text-inverted';
 
 const HeroIcon = createIconSetFromIcoMoon(
   heroIconConfig,
@@ -26,6 +27,7 @@ const COLOR_INTENTS = {
   success: 'success',
   warning: 'warning',
   'disabled-text': 'disabledText',
+  'text-inverted': 'invertedText',
 } as const;
 
 const StyledHeroIcon = styled(HeroIcon)<{