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

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;