@hero-design/rn 7.0.1 → 7.0.4

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, theme } from '../../../index';
+import Badge from '..';
+
+describe('Badge', () => {
+  it('has success style when intent is success', () => {
+    const { getByText, toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <Badge content="APPROVED" intent="success" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('APPROVED')).toBeDefined();
+  });
+
+  it('has warning style when intent is warning', () => {
+    const { getByText, toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <Badge content="PENDING" intent="warning" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('PENDING')).toBeDefined();
+  });
+
+  it('has danger style when intent is danger', () => {
+    const { getByText, toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <Badge content="DECLINED" intent="danger" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('DECLINED')).toBeDefined();
+  });
+
+  it('has info style when intent is info', () => {
+    const { getByText, toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <Badge content="SUBMITTED" intent="info" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('SUBMITTED')).toBeDefined();
+  });
+});

package/src/components/Badge/__tests__/__snapshots__/Badge.spec.tsx.snap

@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Badge has danger style when intent is danger 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#fcebe7",
+      "borderBottomColor": "#de350b",
+      "borderBottomLeftRadius": 4,
+      "borderBottomRightRadius": 4,
+      "borderBottomWidth": 1,
+      "borderLeftColor": "#de350b",
+      "borderLeftWidth": 1,
+      "borderRightColor": "#de350b",
+      "borderRightWidth": 1,
+      "borderTopColor": "#de350b",
+      "borderTopLeftRadius": 4,
+      "borderTopRightRadius": 4,
+      "borderTopWidth": 1,
+      "paddingBottom": 4,
+      "paddingLeft": 8,
+      "paddingRight": 8,
+      "paddingTop": 4,
+    }
+  }
+  themeIntent="danger"
+>
+  <Text
+    style={
+      Object {
+        "color": "#de350b",
+        "fontSize": 12,
+        "fontWeight": "600",
+      }
+    }
+    themeIntent="danger"
+  >
+    DECLINED
+  </Text>
+</View>
+`;
+
+exports[`Badge has info style when intent is info 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#ecf0ff",
+      "borderBottomColor": "#4568fb",
+      "borderBottomLeftRadius": 4,
+      "borderBottomRightRadius": 4,
+      "borderBottomWidth": 1,
+      "borderLeftColor": "#4568fb",
+      "borderLeftWidth": 1,
+      "borderRightColor": "#4568fb",
+      "borderRightWidth": 1,
+      "borderTopColor": "#4568fb",
+      "borderTopLeftRadius": 4,
+      "borderTopRightRadius": 4,
+      "borderTopWidth": 1,
+      "paddingBottom": 4,
+      "paddingLeft": 8,
+      "paddingRight": 8,
+      "paddingTop": 4,
+    }
+  }
+  themeIntent="info"
+>
+  <Text
+    style={
+      Object {
+        "color": "#4568fb",
+        "fontSize": 12,
+        "fontWeight": "600",
+      }
+    }
+    themeIntent="info"
+  >
+    SUBMITTED
+  </Text>
+</View>
+`;
+
+exports[`Badge has success style when intent is success 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#f0fef4",
+      "borderBottomColor": "#017d6d",
+      "borderBottomLeftRadius": 4,
+      "borderBottomRightRadius": 4,
+      "borderBottomWidth": 1,
+      "borderLeftColor": "#017d6d",
+      "borderLeftWidth": 1,
+      "borderRightColor": "#017d6d",
+      "borderRightWidth": 1,
+      "borderTopColor": "#017d6d",
+      "borderTopLeftRadius": 4,
+      "borderTopRightRadius": 4,
+      "borderTopWidth": 1,
+      "paddingBottom": 4,
+      "paddingLeft": 8,
+      "paddingRight": 8,
+      "paddingTop": 4,
+    }
+  }
+  themeIntent="success"
+>
+  <Text
+    style={
+      Object {
+        "color": "#017d6d",
+        "fontSize": 12,
+        "fontWeight": "600",
+      }
+    }
+    themeIntent="success"
+  >
+    APPROVED
+  </Text>
+</View>
+`;
+
+exports[`Badge has warning style when intent is warning 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#fff6eb",
+      "borderBottomColor": "#d98a2c",
+      "borderBottomLeftRadius": 4,
+      "borderBottomRightRadius": 4,
+      "borderBottomWidth": 1,
+      "borderLeftColor": "#d98a2c",
+      "borderLeftWidth": 1,
+      "borderRightColor": "#d98a2c",
+      "borderRightWidth": 1,
+      "borderTopColor": "#d98a2c",
+      "borderTopLeftRadius": 4,
+      "borderTopRightRadius": 4,
+      "borderTopWidth": 1,
+      "paddingBottom": 4,
+      "paddingLeft": 8,
+      "paddingRight": 8,
+      "paddingTop": 4,
+    }
+  }
+  themeIntent="warning"
+>
+  <Text
+    style={
+      Object {
+        "color": "#d98a2c",
+        "fontSize": 12,
+        "fontWeight": "600",
+      }
+    }
+    themeIntent="warning"
+  >
+    PENDING
+  </Text>
+</View>
+`;

package/src/components/Badge/index.tsx

@@ -0,0 +1,35 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import React, { ReactElement } from 'react';
+import { StyledView, StyledText } from './StyledBadge';
+
+interface BadgeProps {
+  /**
+   * Content of the `Badge`.
+   */
+  content: string;
+  /**
+   * Visual intent color to apply to `Badge`.
+   */
+  intent?: 'success' | 'warning' | 'danger' | 'info';
+  /**
+   * Addditional style to be applied for `Badge`.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Badge = ({
+  content,
+  intent = 'info',
+  style,
+  testID,
+}: BadgeProps): ReactElement => (
+  <StyledView testID={testID} themeIntent={intent} style={style}>
+    <StyledText themeIntent={intent}>{content}</StyledText>
+  </StyledView>
+);
+
+export default Badge;

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

@@ -0,0 +1,30 @@
+import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
+import styled, { css } from 'styled-components-native';
+import heroIconConfig from './selection.json';
+
+type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type ThemeIntent =
+  | 'text'
+  | 'primary'
+  | 'info'
+  | 'danger'
+  | 'success'
+  | 'warning';
+
+const HeroIcon = createIconSetFromIcoMoon(
+  heroIconConfig,
+  'hero-icons',
+  'hero-icons.ttf'
+);
+
+const StyledHeroIcon = styled(HeroIcon)<{
+  themeSize: ThemeSize;
+  themeIntent: ThemeIntent;
+}>`
+  ${({ themeIntent, themeSize }) => css`
+    color: ${({ theme }) => theme.__hd__.icon.colors[themeIntent]};
+    font-size: ${({ theme }) => theme.__hd__.icon.sizes[themeSize]}px;
+  `};
+`;
+
+export default StyledHeroIcon;