@hero-design/rn 7.9.0 → 7.10.1

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

@@ -0,0 +1,167 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UtilityButton snapshot has intent primary style 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#fafbfb",
+      "borderRadius": 8,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "padding": 8,
+      "width": "100%",
+    }
+  }
+  testID="settings-btn"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "paddingRight": 12,
+        },
+        undefined,
+      ]
+    }
+  >
+    <HeroIcon
+      name="cog-outlined"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      testID="settings-btn-icon"
+      themeIntent="text"
+      themeSize="medium"
+    />
+  </View>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "flexShrink": 1,
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 16,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Settings
+  </Text>
+</View>
+`;
+
+exports[`UtilityButton snapshot has intent text style 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#fafbfb",
+      "borderRadius": 8,
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "opacity": 1,
+      "padding": 8,
+      "width": "100%",
+    }
+  }
+  testID="settings-btn"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "paddingRight": 12,
+        },
+        undefined,
+      ]
+    }
+  >
+    <HeroIcon
+      name="cog-outlined"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      testID="settings-btn-icon"
+      themeIntent="text"
+      themeSize="medium"
+    />
+  </View>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "flexShrink": 1,
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 16,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Settings
+  </Text>
+</View>
+`;

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+
+import UtilityButton from '..';
+
+describe('UtilityButton', () => {
+  it('renders utility button', () => {
+    const screen = renderWithTheme(
+      <UtilityButton
+        text="Settings"
+        icon="cog-outlined"
+        testID="settings-btn"
+        onPress={() => {}}
+      />
+    );
+
+    expect(screen.getByText('Settings')).toBeDefined();
+    expect(screen.getByTestId('settings-btn-icon')).toBeDefined();
+  });
+
+  it('allows to click on', () => {
+    const onPress = jest.fn();
+    const screen = renderWithTheme(
+      <UtilityButton
+        text="Settings"
+        icon="cog-outlined"
+        testID="settings-btn"
+        onPress={onPress}
+      />
+    );
+    fireEvent.press(screen.getByText('Settings'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('UtilityButton snapshot', () => {
+  it.each`
+    intent
+    ${'primary'}
+    ${'text'}
+  `('has intent $intent style', () => {
+    const { toJSON } = renderWithTheme(
+      <UtilityButton
+        text="Settings"
+        icon="cog-outlined"
+        testID="settings-btn"
+        onPress={() => {}}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,53 @@
+import React, { ReactChild } from 'react';
+import { ViewProps } from 'react-native';
+
+import Icon, { IconName } from '../../Icon';
+import { ButtonContainer, IconWrapper, ButtonText } from './styled';
+
+export interface UtilityButtonProps extends ViewProps {
+  /**
+   * Places an icon within the button, before the button's text
+   */
+  icon: IconName;
+  /**
+   * Set the handler to handle press event.
+   */
+  onPress: () => void;
+  /**
+   * Button label.
+   */
+  text: ReactChild;
+  /**
+   * Visual intent color to apply to button.
+   */
+  intent?: 'primary' | 'text';
+}
+
+const TEXT_INTENTS = {
+  primary: 'primary',
+  text: 'body',
+} as const;
+
+const UtilityButton = ({
+  icon,
+  onPress,
+  text,
+  testID,
+  intent = 'text',
+  style,
+  hitSlop,
+}: UtilityButtonProps) => (
+  <ButtonContainer
+    style={style}
+    onPress={onPress}
+    testID={testID}
+    hitSlop={hitSlop}
+  >
+    <IconWrapper>
+      <Icon icon={icon} intent={intent} testID={`${testID}-icon`} />
+    </IconWrapper>
+    <ButtonText intent={TEXT_INTENTS[intent]}>{text}</ButtonText>
+  </ButtonContainer>
+);
+
+export default UtilityButton;

package/src/components/Button/UtilityButton/styled.tsx

@@ -0,0 +1,25 @@
+import { View, TouchableOpacity } from 'react-native';
+import styled from '@emotion/native';
+
+import Typography from '../../Typography';
+
+export const ButtonContainer = styled(TouchableOpacity)(({ theme }) => ({
+  width: '100%',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: theme.__hd__.button.space.utilityPadding,
+  borderRadius: theme.__hd__.button.radii.utilityRadii,
+  backgroundColor: theme.__hd__.button.colors.utilityBackground,
+}));
+
+export const IconWrapper = styled(View)(({ theme }) => ({
+  paddingRight: theme.__hd__.button.space.utilityIconPadding,
+}));
+
+export const ButtonText = styled(Typography.Text)(({ theme }) => ({
+  flexShrink: 1,
+  textAlign: 'center',
+  fontSize: theme.__hd__.button.fontSize.utility,
+  fontFamily: theme.__hd__.button.fonts.default,
+}));

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

@@ -82,6 +82,9 @@ describe('getThemeVariant', () => {
     ${'outlined'}          | ${'primary'}   | ${'outlined-primary'}
     ${'outlined'}          | ${'secondary'} | ${'outlined-secondary'}
     ${'outlined'}          | ${'danger'}    | ${'outlined-danger'}
+    ${'text'}              | ${'primary'}   | ${'text-primary'}
+    ${'text'}              | ${'secondary'} | ${'text-secondary'}
+    ${'text'}              | ${'danger'}    | ${'text-danger'}
   `('returns $themeVariant', ({ variant, intent, themeVariant }) => {
     expect(getThemeVariant(variant, intent)).toBe(themeVariant);
   });

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

@@ -19,6 +19,9 @@ describe('StyledButtonContainer', () => {
     ${'outlined-primary'}
     ${'outlined-secondary'}
     ${'outlined-danger'}
+    ${'text-primary'}
+    ${'text-secondary'}
+    ${'text-danger'}
   `('has $themeVariant style', ({ themeVariant }) => {
     const { toJSON } = renderWithTheme(
       <StyledButtonContainer themeVariant={themeVariant} />
@@ -36,6 +39,9 @@ describe('StyledButtonContainer', () => {
     ${'outlined-primary'}
     ${'outlined-secondary'}
     ${'outlined-danger'}
+    ${'text-primary'}
+    ${'text-secondary'}
+    ${'text-danger'}
   `(
     'has pressed with the correct variant $themeVariant style',
     ({ themeVariant }) => {
@@ -65,6 +71,9 @@ describe('StyledButtonText', () => {
     ${'outlined-primary'}
     ${'outlined-secondary'}
     ${'outlined-danger'}
+    ${'text-primary'}
+    ${'text-secondary'}
+    ${'text-danger'}
   `('has $themeVariant style', ({ themeVariant }) => {
     const { toJSON } = renderWithTheme(
       <StyledButtonText themeVariant={themeVariant}>Example</StyledButtonText>
@@ -82,6 +91,9 @@ describe('StyledButtonText', () => {
     ${'outlined-primary'}
     ${'outlined-secondary'}
     ${'outlined-danger'}
+    ${'text-primary'}
+    ${'text-secondary'}
+    ${'text-danger'}
   `(
     'has pressed with the correct variant $themeVariant style',
     ({ themeVariant }) => {
@@ -129,6 +141,9 @@ describe('StyledButtonIcon', () => {
     ${'outlined-primary'}
     ${'outlined-secondary'}
     ${'outlined-danger'}
+    ${'text-primary'}
+    ${'text-secondary'}
+    ${'text-danger'}
   `('has $themeVariant style', ({ themeVariant }) => {
     const { toJSON } = renderWithTheme(
       <StyledButtonIcon icon="bell" themeVariant={themeVariant} />
@@ -146,6 +161,9 @@ describe('StyledButtonIcon', () => {
     ${'outlined-primary'}
     ${'outlined-secondary'}
     ${'outlined-danger'}
+    ${'text-primary'}
+    ${'text-secondary'}
+    ${'text-danger'}
   `(
     'has pressed with the correct variant $themeVariant style',
     ({ themeVariant }) => {