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

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

@@ -2,22 +2,37 @@ import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
 
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import Checkbox from '..';
+import Checkbox, { getThemeState } from '..';
+
+describe('getThemeState', () => {
+  it.each`
+    disabled | readonly | expected
+    ${false} | ${false} | ${'default'}
+    ${false} | ${true}  | ${'readonly'}
+    ${true}  | ${false} | ${'disabled'}
+    ${true}  | ${true}  | ${'disabled'}
+  `(
+    `should return correctly if disabled is $disabled and readonly is $readonly`,
+    ({ disabled, readonly, expected }) => {
+      expect(getThemeState({ disabled, readonly })).toBe(expected);
+    }
+  );
+});
 
 describe('Checkbox', () => {
   it.each`
-    withBorder | disabled
-    ${false}   | ${false}
-    ${false}   | ${true}
-    ${true}    | ${false}
-    ${true}    | ${true}
+    disabled | readonly
+    ${false} | ${false}
+    ${true}  | ${false}
+    ${false} | ${true}
+    ${true}  | ${true}
   `(
-    'renders correctly when disabled is $disabled, withBorder is $withBorder',
-    ({ disabled, withBorder }) => {
+    'renders correctly when disabled is $disabled and readonly is $readonly',
+    ({ disabled, readonly }) => {
       const wrapper = renderWithTheme(
         <Checkbox
           disabled={disabled}
-          withBorder={withBorder}
+          readonly={readonly}
           description="Please agree to our privacy policy"
         />
       );

package/src/components/Checkbox/index.tsx

@@ -7,6 +7,7 @@ import {
   StyledDescription,
   StyledWrapper,
 } from './StyledCheckbox';
+import { useDeprecation } from '../../utils/hooks';
 
 export interface CheckboxProps {
   /**
@@ -18,6 +19,7 @@ export interface CheckboxProps {
    */
   description?: string;
   /**
+   * @deprecated This prop will be removed in the next major release. Checkboxes will always have border.
    * Whether the border is shown.
    */
   withBorder?: boolean;
@@ -37,8 +39,29 @@ export interface CheckboxProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Readonly of the checkbox.
+   */
+  readonly?: boolean;
 }
 
+type getStateType = {
+  disabled: boolean;
+  readonly: boolean;
+};
+
+export const getThemeState = ({ disabled, readonly }: getStateType) => {
+  if (disabled) {
+    return 'disabled';
+  }
+
+  if (readonly) {
+    return 'readonly';
+  }
+
+  return 'default';
+};
+
 const Checkbox = ({
   checked,
   description,
@@ -47,31 +70,43 @@ const Checkbox = ({
   onPress,
   style,
   testID,
-}: CheckboxProps) => (
-  <StyledWrapper
-    onPress={onPress}
-    disabled={disabled}
-    themeDisabled={disabled}
-    themeWithBorder={withBorder}
-    style={style}
-    testID={testID}
-  >
-    {!!description && (
-      <StyledDescription intent={disabled ? 'subdued' : 'body'}>
-        {description}
-      </StyledDescription>
-    )}
-    <StyledCheckboxContainer>
-      {checked && (
-        <StyledCheckMark
-          icon="box-check"
-          intent={disabled ? 'disabled-text' : 'text'}
-          testID="check-mark"
-        />
+  readonly = false,
+}: CheckboxProps) => {
+  useDeprecation(
+    `Checkbox's withBorder prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.`,
+    withBorder === true
+  );
+
+  const themeState = getThemeState({ disabled, readonly });
+
+  return (
+    <StyledWrapper
+      onPress={onPress}
+      disabled={disabled || readonly}
+      themeState={themeState}
+      style={style}
+      testID={testID}
+    >
+      {!!description && (
+        <StyledDescription
+          intent={disabled ? 'subdued' : 'body'}
+          variant="small"
+        >
+          {description}
+        </StyledDescription>
       )}
-      <StyledCheckbox themeDisabled={disabled} />
-    </StyledCheckboxContainer>
-  </StyledWrapper>
-);
+      <StyledCheckboxContainer>
+        {checked && (
+          <StyledCheckMark
+            icon="box-check"
+            testID="check-mark"
+            themeState={themeState}
+          />
+        )}
+        <StyledCheckbox themeState={themeState} />
+      </StyledCheckboxContainer>
+    </StyledWrapper>
+  );
+};
 
 export default Checkbox;

package/src/components/Chip/StyledChip.tsx

@@ -0,0 +1,121 @@
+import styled from '@emotion/native';
+import { TouchableOpacity } from 'react-native';
+import Box from '../Box';
+import Icon from '../Icon';
+import Typography from '../Typography';
+
+type StyledChipWrapperProps = {
+  themeVariant?: 'outlined' | 'filled';
+  themeSelected?: boolean;
+};
+
+const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
+  ({ themeVariant, themeSelected, theme }) => {
+    const getShadowStyles = () => {
+      switch (themeVariant) {
+        case 'filled':
+          return {
+            ...theme.__hd__.chip.shadows.filledWrapper,
+          };
+        case 'outlined':
+          return undefined;
+      }
+    };
+
+    const getBorderStyles = () => {
+      const commonStyle = {
+        borderWidth: theme.__hd__.chip.sizes.wrapperBorder,
+      };
+
+      if (themeSelected) {
+        return {
+          ...commonStyle,
+          borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder,
+        };
+      }
+
+      switch (themeVariant) {
+        case 'outlined': {
+          return {
+            ...commonStyle,
+            borderColor: theme.__hd__.chip.colors.wrapperBorder,
+          };
+        }
+        case 'filled': {
+          return {
+            ...commonStyle,
+            borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder,
+          };
+        }
+      }
+    };
+
+    const getBackgroundStyles = () => {
+      if (themeSelected) {
+        switch (themeVariant) {
+          case 'outlined': {
+            return {
+              backgroundColor: theme.__hd__.chip.colors.primaryBackground,
+            };
+          }
+          case 'filled':
+            return {
+              backgroundColor: theme.__hd__.chip.colors.secondaryBackground,
+            };
+        }
+      } else {
+        switch (themeVariant) {
+          case 'outlined': {
+            return {
+              backgroundColor: theme.__hd__.chip.colors.outlinedBackground,
+            };
+          }
+          case 'filled':
+            return {
+              backgroundColor: theme.__hd__.chip.colors.filledBackground,
+            };
+        }
+      }
+    };
+
+    return {
+      alignSelf: 'flex-start',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: theme.__hd__.chip.radii.wrapper,
+      paddingVertical: theme.__hd__.chip.space.wrapperVerticalPadding,
+      paddingHorizontal: theme.__hd__.chip.space.wrapperHorizontalPadding,
+      borderWidth: theme.__hd__.chip.sizes.wrapperBorder,
+      ...getShadowStyles(),
+      ...getBorderStyles(),
+      ...getBackgroundStyles(),
+    };
+  }
+);
+
+const StyledIconWrapper = styled(Box)(({ theme }) => ({
+  marginRight: theme.__hd__.chip.space.iconWrapperMarginRight,
+}));
+
+const StyledLabel = styled(Typography.Body)<{
+  themeSelected?: boolean;
+  themeVariant?: 'outlined' | 'filled';
+}>(({ themeSelected, themeVariant, theme }) => ({
+  color:
+    themeSelected && themeVariant === 'outlined'
+      ? theme.__hd__.chip.colors.selectedPrimaryText
+      : undefined,
+}));
+
+const StyledIcon = styled(Icon)<{
+  themeSelected?: boolean;
+  themeVariant?: 'outlined' | 'filled';
+}>(({ themeSelected, themeVariant, theme }) => ({
+  color:
+    themeSelected && themeVariant === 'outlined'
+      ? theme.__hd__.chip.colors.selectedPrimaryText
+      : undefined,
+}));
+
+export { StyledChipWrapper, StyledIcon, StyledIconWrapper, StyledLabel };