@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

package/src/components/Typography/Caption/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type {
+  TextProps as NativeTextProps,
+  StyleProp,
+  TextStyle,
+} from 'react-native';
+import { StyledCaption } from './StyledCaption';
+
+export interface CaptionProps extends NativeTextProps {
+  /**
+   * Text content.
+   */
+  children: ReactNode;
+  /**
+   * Font weight of the text.
+   */
+  fontWeight?: 'regular' | 'semi-bold';
+  /**
+   * Visual intent color to apply to the text.
+   */
+  intent?:
+    | 'body'
+    | 'subdued'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'info'
+    | 'warning'
+    | 'danger'
+    | 'inverted'
+    | 'archived'
+    | 'disabled';
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<TextStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Caption = ({
+  children,
+  fontWeight = 'regular',
+  intent = 'body',
+  allowFontScaling = false,
+  ...nativeProps
+}: CaptionProps) => (
+  <StyledCaption
+    {...nativeProps}
+    themeFontWeight={fontWeight}
+    themeIntent={intent}
+    allowFontScaling={allowFontScaling}
+  >
+    {children}
+  </StyledCaption>
+);
+
+export default Caption;

package/src/components/Typography/Label/StyledLabel.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/native';
+import { Text } from 'react-native';
+import { ThemeIntent } from '../types';
+
+const StyledLabel = styled(Text)<{
+  themeIntent: ThemeIntent;
+}>(({ themeIntent, theme }) => ({
+  fontSize: theme.__hd__.typography.fontSizes.label,
+  lineHeight: theme.__hd__.typography.lineHeights.label,
+  letterSpacing: 0,
+  color: theme.__hd__.typography.colors[themeIntent],
+}));
+
+export { StyledLabel };

package/src/components/Typography/Label/__tests__/StyledLabel.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import { StyledLabel } from '../StyledLabel';
+
+describe('StyledLabel', () => {
+  it.each`
+    intent
+    ${'body'}
+    ${'subdued'}
+    ${'primary'}
+    ${'success'}
+    ${'info'}
+    ${'warning'}
+    ${'danger'}
+    ${'inverted'}
+  `('has $intent intent style', ({ intent }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledLabel themeIntent={intent}>This is a test</StyledLabel>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Typography/Label/__tests__/__snapshots__/StyledLabel.tsx.snap

@@ -0,0 +1,377 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledLabel has body intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 10,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+  >
+    This is a test
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledLabel has danger intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#f46363",
+          "fontSize": 10,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="danger"
+  >
+    This is a test
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledLabel has info intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#355bfb",
+          "fontSize": 10,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="info"
+  >
+    This is a test
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledLabel has inverted intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#ffffff",
+          "fontSize": 10,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="inverted"
+  >
+    This is a test
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledLabel has primary intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#401960",
+          "fontSize": 10,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="primary"
+  >
+    This is a test
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledLabel has subdued intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#4d6265",
+          "fontSize": 10,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="subdued"
+  >
+    This is a test
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledLabel has success intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#5ace7d",
+          "fontSize": 10,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="success"
+  >
+    This is a test
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledLabel has warning intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#ffbe71",
+          "fontSize": 10,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="warning"
+  >
+    This is a test
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;