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

package/src/components/Typography/Label/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,529 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label has archived intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#606065",
+          "fontSize": 10,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="archived"
+  >
+    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[`Label has body intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    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[`Label has danger intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    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[`Label has disabled intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#bfc1c5",
+          "fontSize": 10,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="disabled"
+  >
+    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[`Label has info intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    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[`Label has inverted intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    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[`Label has primary intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    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[`Label has secondary intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#795e90",
+          "fontSize": 10,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="secondary"
+  >
+    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[`Label has subdued intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    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[`Label has success intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    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[`Label has warning intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    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>
+`;

package/src/components/Typography/Label/__tests__/index.spec.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import Label from '..';
+
+describe('Label', () => {
+  it('renders correctly', () => {
+    const { queryAllByText } = renderWithTheme(<Label>This is a test</Label>);
+
+    expect(queryAllByText('This is a test')).toHaveLength(1);
+  });
+
+  it.each`
+    intent
+    ${'body'}
+    ${'subdued'}
+    ${'primary'}
+    ${'secondary'}
+    ${'success'}
+    ${'info'}
+    ${'warning'}
+    ${'danger'}
+    ${'inverted'}
+    ${'archived'}
+    ${'disabled'}
+  `('has $intent intent style', ({ intent }) => {
+    const { toJSON } = renderWithTheme(
+      <Label intent={intent}>This is a test</Label>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type {
+  TextProps as NativeTextProps,
+  StyleProp,
+  TextStyle,
+} from 'react-native';
+import { StyledLabel } from './StyledLabel';
+
+export interface LabelProps extends NativeTextProps {
+  /**
+   * Text content.
+   */
+  children: ReactNode;
+  /**
+   * 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 Label = ({
+  children,
+  intent = 'body',
+  allowFontScaling = false,
+  ...nativeProps
+}: LabelProps) => (
+  <StyledLabel
+    {...nativeProps}
+    themeIntent={intent}
+    allowFontScaling={allowFontScaling}
+  >
+    {children}
+  </StyledLabel>
+);
+
+export default Label;