@hero-design/rn 7.18.1 → 7.20.0

package/src/components/Card/StyledCard.tsx

@@ -1,26 +1,19 @@
 import { View } from 'react-native';
 import styled from '@emotion/native';
 
-const StyledCard = styled(View)<{ themeVariant: 'basic' | 'data' }>(
-  ({ themeVariant, theme }) => {
-    const sharedStyles = {
-      borderRadius: theme.__hd__.card.radii.default,
-      overflow: 'hidden',
-    } as const;
-
-    const dataStyles = {
-      flexDirection: 'row',
-    };
-
-    switch (themeVariant) {
-      case 'basic':
-        return sharedStyles;
-      case 'data':
-        return { ...sharedStyles, ...dataStyles };
-    }
-  }
-);
+const StyledCard = styled(View)<{
+  themeVariant: 'basic' | 'data';
+  themeIntent?: 'primary' | 'success' | 'warning';
+}>(({ themeVariant, theme, themeIntent }) => ({
+  ...(themeVariant === 'data' && { flexDirection: 'row' }),
+  ...(themeIntent !== undefined && {
+    backgroundColor: theme.__hd__.card.colors[themeIntent],
+  }),
+  borderRadius: theme.__hd__.card.radii.default,
+  overflow: 'hidden',
+}));
 
+// DEPRECATED
 const LeftDataCard = styled(View)(({ theme }) => ({
   backgroundColor: theme.__hd__.card.colors.dataCardIndicator,
   width: theme.__hd__.card.sizes.indicatorWidth,

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

@@ -0,0 +1,147 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card renders correctly when intent is info 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#b5c3fd",
+        "borderRadius": 12,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeIntent="info"
+  themeVariant="basic"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Card Content
+  </Text>
+</View>
+`;
+
+exports[`Card renders correctly when intent is primary 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#c38cee",
+        "borderRadius": 12,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeIntent="primary"
+  themeVariant="basic"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Card Content
+  </Text>
+</View>
+`;
+
+exports[`Card renders correctly when intent is success 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#5ace7d",
+        "borderRadius": 12,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeIntent="success"
+  themeVariant="basic"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Card Content
+  </Text>
+</View>
+`;
+
+exports[`Card renders correctly when intent is undefined 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderRadius": 12,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="basic"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Card Content
+  </Text>
+</View>
+`;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Card from '..';
+import Typography from '../../Typography';
 
 describe('Card', () => {
   it('renders basic card', () => {
@@ -27,4 +28,21 @@ describe('Card', () => {
     expect(queryAllByTestId('child-view')).toHaveLength(1);
     expect(queryAllByTestId('data-card-indicator')).toHaveLength(1);
   });
+
+  it.each`
+    intent
+    ${undefined}
+    ${'primary'}
+    ${'success'}
+    ${'info'}
+  `('renders correctly when intent is $intent', ({ intent }) => {
+    const { toJSON, getByText } = renderWithTheme(
+      <Card intent={intent}>
+        <Typography.Text>Card Content</Typography.Text>
+      </Card>
+    );
+
+    expect(getByText('Card Content')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/src/components/Card/index.tsx

@@ -1,5 +1,6 @@
-import React, { ReactNode } from 'react';
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import DataCard from './DataCard';
 import { StyledCard, LeftDataCard } from './StyledCard';
 
@@ -8,6 +9,10 @@ interface CardProps extends ViewProps {
    * Card's content.
    */
   children?: ReactNode;
+  /**
+   * Visual intent color to apply to card.
+   */
+  intent?: 'primary' | 'success' | 'warning';
   /**
    * Card type.
    * This is now deprecated. If you want to use "data" variant, please use Card.Data instead.
@@ -26,10 +31,11 @@ interface CardProps extends ViewProps {
 
 const Card = ({
   variant = 'basic',
+  intent,
   children,
   ...nativeProps
 }: CardProps): JSX.Element => (
-  <StyledCard {...nativeProps} themeVariant={variant}>
+  <StyledCard {...nativeProps} themeVariant={variant} themeIntent={intent}>
     {variant === 'data' && <LeftDataCard testID="data-card-indicator" />}
     {children}
   </StyledCard>

package/src/components/Checkbox/StyledCheckbox.tsx

@@ -1,18 +1,48 @@
 import styled from '@emotion/native';
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
+import Icon from '../Icon';
+import Typography from '../Typography';
 
-const StyledWrapper = styled(TouchableOpacity)(({ theme, disabled }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  height: theme.__hd__.checkbox.sizes.base,
-  width: theme.__hd__.checkbox.sizes.base,
-  borderRadius: theme.__hd__.checkbox.radii.base,
-  borderWidth: theme.__hd__.checkbox.borderWidths.default,
-  borderColor: disabled
-    ? theme.__hd__.checkbox.colors.disabled
-    : theme.__hd__.checkbox.colors.borderColor,
-  overflow: 'hidden',
+export const StyledWrapper = styled(TouchableOpacity)<{
+  themeWithBorder: boolean;
+  themeDisabled: boolean;
+}>(({ theme, themeWithBorder, themeDisabled }) => {
+  const borderStyle = {
+    borderRadius: theme.__hd__.checkbox.radii.wrapper,
+    borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
+    padding: theme.__hd__.checkbox.space.wrapperPadding,
+    borderColor: themeDisabled
+      ? theme.__hd__.checkbox.colors.disabledBorder
+      : theme.__hd__.checkbox.colors.default,
+  };
+
+  return {
+    flexDirection: 'row',
+    ...(themeWithBorder && borderStyle),
+  };
+});
+
+export const StyledDescription = styled(Typography.Text)(({ theme }) => ({
+  paddingRight: theme.__hd__.checkbox.space.iconDescriptionPadding,
+  flex: 1,
 }));
 
-export { StyledWrapper };
+export const StyledCheckbox = styled(View)<{ themeDisabled: boolean }>(
+  ({ theme, themeDisabled }) => ({
+    flexDirection: 'row',
+    justifyContent: 'center',
+    height: theme.__hd__.checkbox.sizes.icon,
+    width: theme.__hd__.checkbox.sizes.icon,
+    borderRadius: theme.__hd__.checkbox.radii.icon,
+    borderWidth: theme.__hd__.checkbox.borderWidths.icon,
+    borderColor: themeDisabled
+      ? theme.__hd__.checkbox.colors.disabledBorder
+      : theme.__hd__.checkbox.colors.default,
+    overflow: 'hidden',
+  })
+);
+
+export const StyledCheckMark = styled(Icon)(({ theme }) => ({
+  position: 'absolute',
+  top: theme.__hd__.checkbox.space.iconTop,
+}));

package/src/components/Checkbox/__tests__/StyledCheckbox.spec.tsx

@@ -1,10 +1,35 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { StyledWrapper } from '../StyledCheckbox';
+import { StyledWrapper, StyledCheckbox } from '../StyledCheckbox';
 
 describe('StyledWrapper', () => {
-  it('renders correct style', () => {
-    const { toJSON } = renderWithTheme(<StyledWrapper />);
+  it.each`
+    withBorder | disabled
+    ${false}   | ${false}
+    ${true}    | ${false}
+    ${true}    | ${true}
+  `(
+    'renders correctly when disabled is $disabled, withBorder is $withBorder',
+    ({ disabled, withBorder }) => {
+      const { toJSON } = renderWithTheme(
+        <StyledWrapper themeDisabled={disabled} themeWithBorder={withBorder} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});
+
+describe('StyledCheckbox', () => {
+  it.each`
+    disabled
+    ${true}
+    ${false}
+  `('renders correctly when disabled is $disabled', ({ disabled }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledCheckbox themeDisabled={disabled} />
+    );
+
     expect(toJSON()).toMatchSnapshot();
   });
 });

package/src/components/Checkbox/__tests__/__snapshots__/StyledCheckbox.spec.tsx.snap

@@ -1,6 +1,96 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StyledWrapper renders correct style 1`] = `
+exports[`StyledCheckbox renders correctly when disabled is false 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "#001f23",
+        "borderRadius": 4,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "height": 20,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 20,
+      },
+      undefined,
+    ]
+  }
+  themeDisabled={false}
+/>
+`;
+
+exports[`StyledCheckbox renders correctly when disabled is true 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "#808f91",
+        "borderRadius": 4,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "height": 20,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 20,
+      },
+      undefined,
+    ]
+  }
+  themeDisabled={true}
+/>
+`;
+
+exports[`StyledWrapper renders correctly when disabled is false, withBorder is false 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "flexDirection": "row",
+      "opacity": 1,
+    }
+  }
+/>
+`;
+
+exports[`StyledWrapper renders correctly when disabled is false, withBorder is true 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#001f23",
+      "borderRadius": 8,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;
+
+exports[`StyledWrapper renders correctly when disabled is true, withBorder is true 1`] = `
 <View
   accessible={true}
   collapsable={false}
@@ -15,16 +105,12 @@ exports[`StyledWrapper renders correct style 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "borderColor": "#8505a2",
-      "borderRadius": 4,
-      "borderWidth": 2,
-      "display": "flex",
+      "borderColor": "#808f91",
+      "borderRadius": 8,
+      "borderWidth": 1,
       "flexDirection": "row",
-      "height": 24,
-      "justifyContent": "center",
       "opacity": 1,
-      "overflow": "hidden",
-      "width": 24,
+      "padding": 16,
     }
   }
 />