@hero-design/rn 7.0.0 → 7.0.3

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/Card/StyledCard.tsx

@@ -0,0 +1,9 @@
+import { View } from 'react-native';
+import styled from 'styled-components-native';
+
+const StyledCard = styled(View)<{}>`
+  border-radius: ${({ theme }) => theme.__hd__.card.radii.default};
+  padding: ${({ theme }) => theme.__hd__.card.padding.default};
+`;
+
+export { StyledCard };

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, RenderAPI } from '@testing-library/react-native';
+import { View } from 'react-native';
+import Card from '..';
+import { theme, ThemeProvider } from '../../../index';
+
+describe('Card', () => {
+  let wrapper: RenderAPI;
+
+  beforeEach(() => {
+    wrapper = render(
+      <ThemeProvider theme={theme}>
+        <Card
+          style={{ backgroundColor: theme.colors.backgroundDark }}
+          testID="card"
+          nativeID="card-native-id"
+          hitSlop={{ top: 1, left: 1, bottom: 1, right: 1 }}
+          pointerEvents="box-only"
+          removeClippedSubviews
+        >
+          <View testID="child-view" />
+        </Card>
+      </ThemeProvider>
+    );
+  });
+
+  it('renders correct', () => {
+    expect(wrapper.queryAllByTestId('card')).toHaveLength(1);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('has child', () => {
+    expect(wrapper.queryAllByTestId('child-view')).toHaveLength(1);
+  });
+});

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, theme } from '../../../index';
+import { StyledCard } from '../StyledCard';
+
+describe('StyledCard', () => {
+  it('renders correct style', () => {
+    const { toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <StyledCard />
+      </ThemeProvider>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card renders correct 1`] = `
+<View
+  hitSlop={
+    Object {
+      "bottom": 1,
+      "left": 1,
+      "right": 1,
+      "top": 1,
+    }
+  }
+  nativeID="card-native-id"
+  pointerEvents="box-only"
+  removeClippedSubviews={true}
+  style={
+    Array [
+      Object {
+        "borderBottomLeftRadius": 12,
+        "borderBottomRightRadius": 12,
+        "borderTopLeftRadius": 12,
+        "borderTopRightRadius": 12,
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 16,
+      },
+      Object {
+        "backgroundColor": "#292a2b",
+      },
+    ]
+  }
+  testID="card"
+>
+  <View
+    testID="child-view"
+  />
+</View>
+`;

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledCard renders correct style 1`] = `
+<View
+  style={
+    Object {
+      "borderBottomLeftRadius": 12,
+      "borderBottomRightRadius": 12,
+      "borderTopLeftRadius": 12,
+      "borderTopRightRadius": 12,
+      "paddingBottom": 16,
+      "paddingLeft": 16,
+      "paddingRight": 16,
+      "paddingTop": 16,
+    }
+  }
+/>
+`;

package/src/components/Card/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+import { StyledCard } from './StyledCard';
+
+interface CardProps extends ViewProps {}
+
+const Card = (props: CardProps): JSX.Element => <StyledCard {...props} />;
+
+export default Card;

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;