@hero-design/rn 7.0.1 → 7.0.4

package/src/components/Icon/IconList.ts

@@ -0,0 +1,298 @@
+const IconList = [
+  'activate',
+  'add-person',
+  'adjustment',
+  'alignment',
+  'bank',
+  'bell',
+  'billing',
+  'bookmark',
+  'box-check',
+  'box',
+  'buildings',
+  'cake',
+  'calendar-clock',
+  'calendar',
+  'carat-down-small',
+  'carat-down',
+  'carat-left',
+  'carat-right',
+  'carat-up',
+  'circle-add',
+  'circle-cancel',
+  'circle-check',
+  'circle-down',
+  'circle-info',
+  'circle-left',
+  'circle-ok',
+  'circle-pencil',
+  'circle-question',
+  'circle-remove',
+  'circle-right',
+  'circle-up',
+  'circle-warning',
+  'clock',
+  'cloud-download',
+  'cloud-upload',
+  'cog',
+  'coin',
+  'contacts',
+  'credit-card',
+  'diamond',
+  'direction-arrows',
+  'directory',
+  'document',
+  'dollar-coin-shine',
+  'double-buildings',
+  'edit-template',
+  'envelope',
+  'expense',
+  'eye-circle',
+  'eye-invisible',
+  'eye',
+  'face-meh',
+  'face-sad',
+  'face-smiley',
+  'feed',
+  'feedbacks',
+  'file-certified',
+  'file-clone',
+  'file-copy',
+  'file-csv',
+  'file-dispose',
+  'file-doc',
+  'file-excel',
+  'file-export',
+  'file-lock',
+  'file-pdf',
+  'file-powerpoint',
+  'file-search',
+  'file-secured',
+  'file-sheets',
+  'file-slide',
+  'file-verified',
+  'file-word',
+  'file',
+  'folder-user',
+  'folder',
+  'funnel-filter',
+  'global-dollar',
+  'globe',
+  'graduation-cap',
+  'graph',
+  'happy-sun',
+  'health-bag',
+  'heart',
+  'home',
+  'image',
+  'import',
+  'incident-siren',
+  'instapay',
+  'list',
+  'loading',
+  'loading-2',
+  'location',
+  'lock',
+  'media-content',
+  'menu',
+  'moneybag',
+  'moon',
+  'multiple-stars',
+  'multiple-users',
+  'node',
+  'open-folder',
+  'paperclip',
+  'payment-summary',
+  'pencil',
+  'phone',
+  'piggy-bank',
+  'plane',
+  'play-circle',
+  'print',
+  'raising-hands',
+  'reply',
+  'reschedule',
+  'rostering',
+  'save',
+  'schedule',
+  'search-person',
+  'send',
+  'speaker',
+  'star-medal',
+  'star',
+  'steps-circle',
+  'stopwatch',
+  'suitcase',
+  'survey',
+  'switch',
+  'tag',
+  'target',
+  'teams',
+  'timesheet',
+  'touch-id',
+  'trash-bin',
+  'unlock',
+  'user',
+  'video-1',
+  'video-2',
+  'activate-outlined',
+  'add-person-outlined',
+  'add-section-outlined',
+  'add-time-outlined',
+  'add',
+  'adjustment-outlined',
+  'alignment-2-outlined',
+  'alignment-outlined',
+  'all-caps',
+  'arrow-down',
+  'arrow-left',
+  'arrow-right',
+  'arrow-up',
+  'at-sign',
+  'bell-outlined',
+  'billing-outlined',
+  'body-outlined',
+  'bold',
+  'bookmark-outlined',
+  'box-check-outlined',
+  'box-outlined',
+  'bullet-points',
+  'cake-outlined',
+  'calendar-dates-outlined',
+  'calendar-star-outlined',
+  'camera-outlined',
+  'cancel',
+  'checkmark',
+  'circle-add-outlined',
+  'circle-cancel-outlined',
+  'circle-down-outlined',
+  'circle-info-outlined',
+  'circle-left-outlined',
+  'circle-ok-outlined',
+  'circle-question-outlined',
+  'circle-remove-outlined',
+  'circle-right-outlined',
+  'circle-up-outlined',
+  'circle-warning-outlined',
+  'clock-2-outlined',
+  'clock-outlined',
+  'cog-outlined',
+  'coin-outlined',
+  'comment-outlined',
+  'contacts-outlined',
+  'credit-card-outlined',
+  'direction-arrows-outlined',
+  'directory-outlined',
+  'document-outlined',
+  'dollar-coin-shine-outlined',
+  'dollar-sign',
+  'double-buildings-outlined',
+  'double-left-arrows',
+  'double-right-arrows',
+  'download-outlined',
+  'edit-template-outlined',
+  'email-outlined',
+  'enter-arrow',
+  'envelope-outlined',
+  'expense-outlined',
+  'external-link',
+  'eye-invisible-outlined',
+  'eye-outlined',
+  'face-id',
+  'face-meh-outlined',
+  'face-open-smiley-outlined',
+  'face-sad-outlined',
+  'face-smiley-outlined',
+  'feed-outlined',
+  'file-certified-outlined',
+  'file-clone-outlined',
+  'file-copy-outlined',
+  'file-dispose-outlined',
+  'file-download-outlined',
+  'file-export-outlined',
+  'file-lock-outlined',
+  'file-outlined',
+  'file-search-outlined',
+  'file-secured-outlined',
+  'file-verified-outlined',
+  'folder-outlined',
+  'folder-user-outlined',
+  'funnel-filter-outline',
+  'graph-outlined',
+  'happy-sun-outlined',
+  'health-bag-outlined',
+  'heart-outlined',
+  'home-outlined',
+  'image-outlined',
+  'import-outlined',
+  'instapay-outlined',
+  'italic',
+  'link-1',
+  'link-2',
+  'list-outlined',
+  'location-outlined',
+  'lock-outlined',
+  'locked-file-outlined',
+  'log-out',
+  'media-content-outlined',
+  'menu-close',
+  'menu-expand',
+  'menu-fold-outlined',
+  'menu-unfold-outlined',
+  'moneybag-outlined',
+  'moon-outlined',
+  'more-horizontal',
+  'more-vertical',
+  'multiple-folders-outlined',
+  'multiple-users-outlined',
+  'node-outlined',
+  'number-points',
+  'number',
+  'payment-summary-outlined',
+  'payslip-outlined',
+  'pencil-outlined',
+  'percentage',
+  'phone-outlined',
+  'piggy-bank-outlined',
+  'plane-outlined',
+  'play-circle-outlined',
+  'print-outlined',
+  'qr-code-outlined',
+  're-assign',
+  'refresh',
+  'remove',
+  'reply-outlined',
+  'restart',
+  'return-arrow',
+  'rostering-outlined',
+  'save-outlined',
+  'schedule-outlined',
+  'search-outlined',
+  'send-outlined',
+  'share-1',
+  'share-2',
+  'single-down-arrow',
+  'single-left-arrow',
+  'single-right-arrow',
+  'single-up-arrow',
+  'speaker-outlined',
+  'star-outlined',
+  'stopwatch-outlined',
+  'strikethrough',
+  'survey-outlined',
+  'switch-outlined',
+  'sync',
+  'target-outlined',
+  'timesheet-outlined',
+  'transfer',
+  'trash-bin-outlined',
+  'unavailable',
+  'underline',
+  'unlock-outlined',
+  'upload-outlined',
+  'user-outlined',
+  'video-1-outlined',
+  'video-2-outlined',
+] as const;
+
+export default IconList;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, theme } from '../../../index';
+import Icon from '..';
+
+describe('Icon', () => {
+  it('renders correctly', () => {
+    const { toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <Icon icon="home" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with intent', () => {
+    const { toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <Icon icon="home" intent="primary" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with color and size', () => {
+    const { toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <Icon icon="home" intent="danger" size="large" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon renders correctly 1`] = `
+<HeroIcon
+  name="home"
+  style={
+    Object {
+      "color": "#292a2b",
+      "fontSize": 24,
+    }
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`Icon renders correctly with color and size 1`] = `
+<HeroIcon
+  name="home"
+  style={
+    Object {
+      "color": "#de350b",
+      "fontSize": 28,
+    }
+  }
+  themeIntent="danger"
+  themeSize="large"
+/>
+`;
+
+exports[`Icon renders correctly with intent 1`] = `
+<HeroIcon
+  name="home"
+  style={
+    Object {
+      "color": "#7622d7",
+      "fontSize": 24,
+    }
+  }
+  themeIntent="primary"
+  themeSize="medium"
+/>
+`;

package/src/components/Icon/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import IconList from './IconList';
+import HeroIcon from './HeroIcon';
+
+type IconName = typeof IconList[number];
+
+interface IconProps {
+  /**
+   * Name of the `Icon`.
+   */
+  icon: IconName;
+  /**
+   * Addditional style to be applied for `Icon`.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Size of the `Icon`.
+   */
+  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  /**
+   * Intent of the `Icon`.
+   */
+  intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Icon = ({
+  icon,
+  style,
+  size = 'medium',
+  intent = 'text',
+  testID,
+}: IconProps) => (
+  <HeroIcon
+    name={icon}
+    themeIntent={intent}
+    themeSize={size}
+    style={style}
+    testID={testID}
+  />
+);
+
+export default Icon;

package/src/components/Typography/Text/StyledText.tsx

@@ -0,0 +1,69 @@
+import { Text } from 'react-native';
+import styled, { css } from '../../../styled-components';
+
+const StyledText = styled(Text)<{
+  themeFontSize: 'small' | 'medium' | 'large' | 'xlarge';
+  themeFontWeight: 'light' | 'regular' | 'semi-bold';
+  themeIntent: 'body' | 'subdued';
+}>`
+  ${({ themeFontSize, theme }) => {
+    switch (themeFontSize) {
+      case 'small':
+        return css`
+          font-size: ${theme.__hd__.typography.fontSizes.small}px;
+          line-height: ${theme.__hd__.typography.lineHeights.small};
+          letter-spacing: ${theme.__hd__.typography.fontSizes.small * 0.03}px;
+        `;
+      case 'medium':
+        return css`
+          font-size: ${theme.__hd__.typography.fontSizes.medium}px;
+          line-height: ${theme.__hd__.typography.lineHeights.medium};
+          letter-spacing: ${theme.__hd__.typography.fontSizes.medium * 0.03}px;
+        `;
+      case 'large':
+        return css`
+          font-size: ${theme.__hd__.typography.fontSizes.large}px;
+          line-height: ${theme.__hd__.typography.lineHeights.large};
+          letter-spacing: ${theme.__hd__.typography.fontSizes.large * 0.03}px;
+        `;
+      case 'xlarge':
+        return css`
+          font-size: ${theme.__hd__.typography.fontSizes.xlarge}px;
+          line-height: ${theme.__hd__.typography.lineHeights.xlarge};
+          letter-spacing: ${theme.__hd__.typography.fontSizes.xlarge * 0.03}px;
+        `;
+    }
+  }}
+
+  ${({ themeFontWeight, theme }) => {
+    switch (themeFontWeight) {
+      case 'light':
+        return css`
+          font-weight: ${theme.__hd__.typography.fontWeights.light};
+        `;
+      case 'regular':
+        return css`
+          font-weight: ${theme.__hd__.typography.fontWeights.regular};
+        `;
+      case 'semi-bold':
+        return css`
+          font-weight: ${theme.__hd__.typography.fontWeights.semiBold};
+        `;
+    }
+  }}
+
+  ${({ themeIntent, theme }) => {
+    switch (themeIntent) {
+      case 'body':
+        return css`
+          color: ${theme.__hd__.typography.colors.body};
+        `;
+      case 'subdued':
+        return css`
+          color: ${theme.__hd__.typography.colors.subdued};
+        `;
+    }
+  }}
+`;
+
+export { StyledText };

package/src/components/Typography/Text/__test__/StyledText.spec.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import { StyledText } from '../StyledText';
+
+describe('StyledText', () => {
+  it.each`
+    fontSize
+    ${'small'}
+    ${'medium'}
+    ${'large'}
+    ${'xlarge'}
+  `('has $fontSize fontSize style', ({ fontSize }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledText
+        themeFontSize={fontSize}
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        This is a test
+      </StyledText>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    fontWeight
+    ${'light'}
+    ${'regular'}
+    ${'semi-bold'}
+  `('has $fontWeight fontWeight style', ({ fontWeight }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledText
+        themeFontSize="medium"
+        themeFontWeight={fontWeight}
+        themeIntent="body"
+      >
+        This is a test
+      </StyledText>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    intent
+    ${'body'}
+    ${'subdued'}
+  `('has $intent intent style', ({ intent }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledText
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent={intent}
+      >
+        This is a test
+      </StyledText>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});