npm - @hero-design/rn - Versions diffs - 9.0.0-0 → 9.0.0-alpha.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (668) hide show

package/src/components/Typography/Body/__tests__/index.spec.tsx ADDED Viewed

@@ -0,0 +1,54 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import Body from '..';
+describe('Body', () => {
+  it('renders correctly', () => {
+    const { queryAllByText } = renderWithTheme(<Body>This is a test</Body>);
+    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(
+      <Body intent={intent}>This is a test</Body>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it.each`
+    variant           | typeface
+    ${'regular'}      | ${'neutral'}
+    ${'small'}        | ${'neutral'}
+    ${'regular-bold'} | ${'neutral'}
+    ${'small-bold'}   | ${'neutral'}
+    ${'regular'}      | ${'playful'}
+    ${'small'}        | ${'playful'}
+    ${'regular-bold'} | ${'playful'}
+    ${'small-bold'}   | ${'playful'}
+  `(
+    'has $variant variant and $typeface typeface and $fontWeight fontWeight style',
+    ({ variant, typeface }) => {
+      const { toJSON } = renderWithTheme(
+        <Body intent="body" typeface={typeface} variant={variant}>
+          This is a test
+        </Body>
+      );
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});

package/src/components/Typography/Body/index.tsx ADDED Viewed

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type {
+  TextProps as NativeTextProps,
+  StyleProp,
+  TextStyle,
+} from 'react-native';
+import { StyledBody } from './StyledBody';
+export interface BodyProps 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;
+  /**
+   * The typeface to render the text in:
+   * - `neutral`: The default typeface for the platform.
+   * - `playful`: To visualise a playful content.
+   */
+  typeface?: 'neutral' | 'playful';
+  /**
+   * size variant of the text.
+   * */
+  variant?: 'regular' | 'regular-bold' | 'small' | 'small-bold';
+}
+const Body = ({
+  children,
+  intent = 'body',
+  allowFontScaling = false,
+  typeface = 'neutral',
+  variant = 'regular',
+  ...nativeProps
+}: BodyProps) => {
+  return (
+    <StyledBody
+      {...nativeProps}
+      themeTypeface={typeface}
+      themeIntent={intent}
+      themeVariant={variant}
+      allowFontScaling={allowFontScaling}
+    >
+      {children}
+    </StyledBody>
+  );
+};
+export default Body;

package/src/components/Typography/Caption/StyledCaption.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import { Text } from 'react-native';
+import styled from '@emotion/native';
+import { FONTWEIGHT_MAP, ThemeIntent } from '../types';
+const StyledCaption = styled(Text)<{
+  themeFontWeight: 'regular' | 'semi-bold';
+  themeIntent: ThemeIntent;
+}>(({ themeFontWeight, themeIntent, theme }) => ({
+  fontSize: theme.__hd__.typography.fontSizes.caption,
+  lineHeight: theme.__hd__.typography.lineHeights.caption,
+  letterSpacing: themeFontWeight === 'regular' ? 0.36 : 0.24,
+  color: theme.__hd__.typography.colors[themeIntent],
+  fontFamily:
+    theme.__hd__.typography.fonts.neutral[FONTWEIGHT_MAP[themeFontWeight]],
+}));
+export { StyledCaption };

package/src/components/Typography/Caption/__tests__/StyledCaption.spec.tsx ADDED Viewed

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

package/src/components/Typography/Caption/__tests__/__snapshots__/StyledCaption.spec.tsx.snap ADDED Viewed

@@ -0,0 +1,491 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`StyledCaption has body intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="regular"
+    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[`StyledCaption has danger intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#f46363",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="regular"
+    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[`StyledCaption has info intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#355bfb",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="regular"
+    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[`StyledCaption has inverted intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#ffffff",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="regular"
+    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[`StyledCaption has primary intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#401960",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="regular"
+    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[`StyledCaption has regular fontWeight style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="regular"
+    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[`StyledCaption has semi-bold fontWeight style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.24,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="semi-bold"
+    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[`StyledCaption has subdued intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#4d6265",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="regular"
+    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[`StyledCaption has success intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#5ace7d",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="regular"
+    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[`StyledCaption has warning intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#ffbe71",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="regular"
+    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>
+`;