@hero-design/rn 8.105.4 → 8.106.0

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -100,7 +100,7 @@ exports[`StyledButtonContainer has filled-danger style 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "stretch",
-          "backgroundColor": "#cb300a",
+          "backgroundColor": "#f46363",
           "borderRadius": 32,
           "flexDirection": "row",
           "height": 60,
@@ -238,7 +238,7 @@ exports[`StyledButtonContainer has filled-secondary style 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "stretch",
-          "backgroundColor": "#4d6265",
+          "backgroundColor": "#f6f6f7",
           "borderRadius": 32,
           "flexDirection": "row",
           "height": 60,
@@ -519,7 +519,7 @@ exports[`StyledButtonContainer has outlined-secondary style 1`] = `
           "alignItems": "center",
           "alignSelf": "stretch",
           "backgroundColor": "transparent",
-          "borderColor": "#4d6265",
+          "borderColor": "#e8e9ea",
           "borderRadius": 32,
           "borderWidth": 2,
           "flexDirection": "row",
@@ -660,7 +660,7 @@ exports[`StyledButtonContainer has text-danger style 1`] = `
         {
           "alignItems": "center",
           "backgroundColor": "transparent",
-          "borderRadius": 4,
+          "borderRadius": 999,
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 60,
@@ -729,7 +729,7 @@ exports[`StyledButtonContainer has text-primary style 1`] = `
         {
           "alignItems": "center",
           "backgroundColor": "transparent",
-          "borderRadius": 4,
+          "borderRadius": 999,
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 60,
@@ -798,7 +798,7 @@ exports[`StyledButtonContainer has text-secondary style 1`] = `
         {
           "alignItems": "center",
           "backgroundColor": "transparent",
-          "borderRadius": 4,
+          "borderRadius": 999,
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 60,
@@ -867,7 +867,7 @@ exports[`StyledButtonContainer has text-white style 1`] = `
         {
           "alignItems": "center",
           "backgroundColor": "transparent",
-          "borderRadius": 4,
+          "borderRadius": 999,
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 60,
@@ -1080,11 +1080,12 @@ exports[`StyledButtonContainer renders disabled correctly 1`] = `
         {
           "alignItems": "center",
           "alignSelf": "stretch",
-          "backgroundColor": "#bfc1c5",
+          "backgroundColor": "#401960",
           "borderRadius": 32,
           "flexDirection": "row",
           "height": 60,
           "justifyContent": "center",
+          "opacity": 0.25,
           "padding": 16,
         },
         undefined,
@@ -1289,7 +1290,7 @@ exports[`StyledButtonIcon has filled-secondary style 1`] = `
         },
         [
           {
-            "color": "#ffffff",
+            "color": "#001f23",
             "fontSize": 20,
           },
           undefined,
@@ -1493,7 +1494,7 @@ exports[`StyledButtonIcon has outlined-secondary style 1`] = `
         },
         [
           {
-            "color": "#4d6265",
+            "color": "#001f23",
             "fontSize": 20,
           },
           undefined,
@@ -1646,7 +1647,7 @@ exports[`StyledButtonIcon has text-danger style 2`] = `
         },
         [
           {
-            "color": "#f68282",
+            "color": "#f46363",
             "fontSize": 20,
           },
           undefined,
@@ -1748,7 +1749,7 @@ exports[`StyledButtonIcon has text-primary style 2`] = `
         },
         [
           {
-            "color": "#33144d",
+            "color": "#795e90",
             "fontSize": 20,
           },
           undefined,
@@ -1799,7 +1800,7 @@ exports[`StyledButtonIcon has text-secondary style 1`] = `
         },
         [
           {
-            "color": "#4d6265",
+            "color": "#001f23",
             "fontSize": 20,
           },
           undefined,
@@ -1850,7 +1851,7 @@ exports[`StyledButtonIcon has text-secondary style 2`] = `
         },
         [
           {
-            "color": "#001f23",
+            "color": "#606065",
             "fontSize": 20,
           },
           undefined,
@@ -1952,7 +1953,7 @@ exports[`StyledButtonIcon has text-white style 2`] = `
         },
         [
           {
-            "color": "#ffffff",
+            "color": "#795e90",
             "fontSize": 20,
           },
           undefined,
@@ -2493,7 +2494,7 @@ exports[`StyledButtonText has filled-secondary style 1`] = `
         },
         [
           {
-            "color": "#ffffff",
+            "color": "#001f23",
             "flexShrink": 1,
             "lineHeight": undefined,
             "textAlign": "center",
@@ -2737,7 +2738,7 @@ exports[`StyledButtonText has outlined-secondary style 1`] = `
         },
         [
           {
-            "color": "#4d6265",
+            "color": "#001f23",
             "flexShrink": 1,
             "lineHeight": undefined,
             "textAlign": "center",
@@ -2981,7 +2982,7 @@ exports[`StyledButtonText has text-secondary style 1`] = `
         },
         [
           {
-            "color": "#4d6265",
+            "color": "#001f23",
             "flexShrink": 1,
             "lineHeight": undefined,
             "textAlign": "center",

package/src/components/Chart/Line/__tests__/__snapshots__/index.spec.tsx.snap

@@ -117,7 +117,7 @@ exports[`LineChart renders chart with custom colors 1`] = `
                   "alignItems": "center",
                   "alignSelf": "flex-start",
                   "backgroundColor": "transparent",
-                  "borderRadius": 4,
+                  "borderRadius": 999,
                   "borderWidth": 0,
                   "flexDirection": "row",
                   "height": undefined,
@@ -1577,7 +1577,7 @@ exports[`LineChart should render 1`] = `
                   "alignItems": "center",
                   "alignSelf": "flex-start",
                   "backgroundColor": "transparent",
-                  "borderRadius": 4,
+                  "borderRadius": 999,
                   "borderWidth": 0,
                   "flexDirection": "row",
                   "height": undefined,

package/src/components/Checkbox/{index.tsx → DefaultCheckBox.tsx}

@@ -6,10 +6,11 @@ import {
   StyledCheckMark,
   StyledDescription,
   StyledWrapper,
-} from './StyledCheckbox';
+} from './StyledDefaultCheckBox';
 import { useDeprecation } from '../../utils/hooks';
+import { getThemeState } from './utils';
 
-export interface CheckboxProps {
+export interface DefaultCheckboxProps {
   /**
    * Control whether the switch is checked
    */
@@ -46,33 +47,7 @@ export interface CheckboxProps {
   readonly?: boolean;
 }
 
-type getStateType = {
-  disabled: boolean;
-  readonly: boolean;
-  checked?: boolean;
-};
-
-export const getThemeState = ({
-  disabled,
-  readonly,
-  checked,
-}: getStateType) => {
-  if (disabled) {
-    return 'disabled';
-  }
-
-  if (readonly) {
-    return 'readonly';
-  }
-
-  if (checked) {
-    return 'checked';
-  }
-
-  return 'default';
-};
-
-const Checkbox = ({
+const DefaultCheckbox = ({
   checked,
   description,
   withBorder = false,
@@ -81,7 +56,7 @@ const Checkbox = ({
   style,
   testID,
   readonly = false,
-}: CheckboxProps) => {
+}: DefaultCheckboxProps) => {
   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
@@ -119,4 +94,4 @@ const Checkbox = ({
   );
 };
 
-export default Checkbox;
+export default DefaultCheckbox;

package/src/components/Checkbox/InlineCheckBox.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import {
+  StyledCheckbox,
+  StyledCheckboxContainer,
+  StyledCheckMark,
+  StyledDescription,
+  StyledWrapper,
+} from './StyledInlineCheckBox';
+import { getThemeState } from './utils';
+
+export interface InlineCheckboxProps {
+  /**
+   * Control whether the checkbox is checked
+   */
+  checked?: boolean;
+  /**
+   * Checkbox's description.
+   */
+  description?: string;
+  /**
+   * Whether the checkbox is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Event handler.
+   */
+  onPress?: () => void;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Readonly of the checkbox.
+   */
+  readonly?: boolean;
+
+  /**
+   * Size of the checkbox. Can be 'medium' or 'large'.
+   */
+  size?: 'medium' | 'large';
+}
+
+const InlineCheckbox = ({
+  checked = false,
+  description,
+  disabled = false,
+  onPress,
+  style,
+  testID,
+  readonly = false,
+  size = 'medium',
+}: InlineCheckboxProps) => {
+  const themeState = getThemeState({ disabled, readonly, checked });
+  return (
+    <StyledWrapper
+      onPress={onPress}
+      disabled={disabled || readonly}
+      themeState={themeState}
+      style={style}
+      testID={testID}
+      accessibilityRole="checkbox"
+      accessibilityState={{
+        checked,
+        disabled: disabled || readonly,
+      }}
+      accessibilityLabel={description}
+    >
+      <StyledCheckboxContainer themeSize={size}>
+        {checked && (
+          <StyledCheckMark
+            themeIntent="primary"
+            name="box-check"
+            testID="check-mark"
+            themeState={themeState}
+            themeSize={size}
+          />
+        )}
+        <StyledCheckbox themeState={themeState} themeSize={size} />
+      </StyledCheckboxContainer>
+      {!!description && (
+        <StyledDescription
+          intent={disabled ? 'subdued' : 'body'}
+          variant={size === 'large' ? 'regular' : 'small'}
+        >
+          {description}
+        </StyledDescription>
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default InlineCheckbox;

package/src/components/Checkbox/{StyledCheckbox.tsx → StyledDefaultCheckBox.tsx}

@@ -13,6 +13,7 @@ export const StyledWrapper = styled(TouchableOpacity)<{
   borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
   padding: theme.__hd__.checkbox.space.wrapperPadding,
   borderColor: theme.__hd__.checkbox.colors.borders[themeState],
+  gap: theme.__hd__.checkbox.space.inlineCheckboxGap,
 }));
 
 export const StyledDescription = styled(Typography.Body)(({ theme }) => ({

package/src/components/Checkbox/StyledInlineCheckBox.tsx

@@ -0,0 +1,49 @@
+import styled from '@emotion/native';
+import { TouchableOpacity, View } from 'react-native';
+import Typography from '../Typography';
+import HeroIcon from '../Icon/HeroIcon';
+
+type CheckboxThemeState = 'default' | 'checked' | 'disabled' | 'readonly';
+
+export const StyledWrapper = styled(TouchableOpacity)<{
+  themeState: CheckboxThemeState;
+}>(({ theme }) => ({
+  flexDirection: 'row',
+  gap: theme.__hd__.checkbox.space.inlineCheckboxGap,
+}));
+
+export const StyledDescription = styled(Typography.Body)({
+  flex: 1,
+  alignSelf: 'center',
+});
+
+export const StyledCheckboxContainer = styled(View)<{
+  themeSize?: 'medium' | 'large';
+}>(({ theme, themeSize = 'medium' }) => ({
+  height: theme.__hd__.checkbox.sizes.inlineCheckbox[themeSize],
+  width: theme.__hd__.checkbox.sizes.inlineCheckbox[themeSize],
+  overflow: 'hidden',
+  margin: theme.__hd__.checkbox.space.inlineCheckboxMargin,
+}));
+
+export const StyledCheckbox = styled(View)<{
+  themeState: CheckboxThemeState;
+  themeSize?: 'medium' | 'large';
+}>(({ theme, themeState }) => ({
+  flex: 1,
+  borderRadius: theme.__hd__.checkbox.radii.icon,
+  borderWidth: theme.__hd__.checkbox.borderWidths.icon,
+  borderColor: theme.__hd__.checkbox.colors.checkboxBorder[themeState],
+  overflow: 'hidden',
+}));
+
+export const StyledCheckMark = styled(HeroIcon)<{
+  themeState: CheckboxThemeState;
+  themeSize?: 'medium' | 'large';
+}>(({ theme, themeState, themeSize = 'medium' }) => ({
+  position: 'absolute',
+  overflow: 'hidden',
+  borderRadius: theme.__hd__.checkbox.radii.icon,
+  color: theme.__hd__.checkbox.colors.checkboxBorder[themeState],
+  fontSize: theme.__hd__.checkbox.sizes.inlineCheckbox[themeSize],
+}));

package/src/components/Checkbox/__tests__/{index.spec.tsx → DefaultCheckBox.spec.tsx}

@@ -2,26 +2,7 @@ import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
 
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import Checkbox, { getThemeState } from '..';
-
-describe('getThemeState', () => {
-  it.each`
-    disabled | readonly | checked  | expected
-    ${false} | ${false} | ${false} | ${'default'}
-    ${false} | ${false} | ${true}  | ${'checked'}
-    ${false} | ${true}  | ${false} | ${'readonly'}
-    ${false} | ${true}  | ${true}  | ${'readonly'}
-    ${true}  | ${false} | ${false} | ${'disabled'}
-    ${true}  | ${false} | ${true}  | ${'disabled'}
-    ${true}  | ${true}  | ${false} | ${'disabled'}
-    ${true}  | ${true}  | ${true}  | ${'disabled'}
-  `(
-    `should return correctly if disabled is $disabled and readonly is $readonly`,
-    ({ disabled, readonly, checked, expected }) => {
-      expect(getThemeState({ disabled, readonly, checked })).toBe(expected);
-    }
-  );
-});
+import Checkbox from '../DefaultCheckBox';
 
 describe('Checkbox', () => {
   it.each`
@@ -71,4 +52,24 @@ describe('Checkbox', () => {
     fireEvent.press(wrapper.getByTestId('checkbox'));
     expect(pressFn).toBeCalled();
   });
+
+  it('does not trigger press function when disabled', () => {
+    const pressFn = jest.fn();
+    const wrapper = renderWithTheme(
+      <Checkbox testID="checkbox" onPress={pressFn} disabled />
+    );
+
+    fireEvent.press(wrapper.getByTestId('checkbox'));
+    expect(pressFn).not.toBeCalled();
+  });
+
+  it('does not trigger press function when readonly', () => {
+    const pressFn = jest.fn();
+    const wrapper = renderWithTheme(
+      <Checkbox testID="checkbox" onPress={pressFn} readonly />
+    );
+
+    fireEvent.press(wrapper.getByTestId('checkbox'));
+    expect(pressFn).not.toBeCalled();
+  });
 });

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import InlineCheckbox from '../InlineCheckBox';
+
+describe('InlineCheckbox', () => {
+  it.each`
+    disabled | readonly
+    ${false} | ${false}
+    ${true}  | ${false}
+    ${false} | ${true}
+    ${true}  | ${true}
+  `(
+    'renders correctly when disabled is $disabled and readonly is $readonly',
+    ({ disabled, readonly }) => {
+      const wrapper = renderWithTheme(
+        <InlineCheckbox
+          disabled={disabled}
+          readonly={readonly}
+          description="Please agree to our privacy policy"
+        />
+      );
+
+      expect(
+        wrapper.getByText('Please agree to our privacy policy')
+      ).toBeTruthy();
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it.each`
+    checked  | length
+    ${false} | ${0}
+    ${true}  | ${1}
+  `(
+    'renders correctly when checked is $checked and there is no description',
+    ({ checked, length }) => {
+      const wrapper = renderWithTheme(<InlineCheckbox checked={checked} />);
+
+      expect(wrapper.queryAllByTestId('check-mark')).toHaveLength(length);
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it('trigger press function correctly', () => {
+    const pressFn = jest.fn();
+    const wrapper = renderWithTheme(
+      <InlineCheckbox testID="checkbox" onPress={pressFn} />
+    );
+
+    fireEvent.press(wrapper.getByTestId('checkbox'));
+    expect(pressFn).toBeCalled();
+  });
+
+  it('does not trigger press function when disabled', () => {
+    const pressFn = jest.fn();
+    const wrapper = renderWithTheme(
+      <InlineCheckbox testID="checkbox" onPress={pressFn} disabled />
+    );
+
+    fireEvent.press(wrapper.getByTestId('checkbox'));
+    expect(pressFn).not.toBeCalled();
+  });
+
+  it('does not trigger press function when readonly', () => {
+    const pressFn = jest.fn();
+    const wrapper = renderWithTheme(
+      <InlineCheckbox testID="checkbox" onPress={pressFn} readonly />
+    );
+
+    fireEvent.press(wrapper.getByTestId('checkbox'));
+    expect(pressFn).not.toBeCalled();
+  });
+
+  it.each`
+    size
+    ${'medium'}
+    ${'large'}
+  `('renders correctly when size is $size', ({ size }) => {
+    const wrapper = renderWithTheme(
+      <InlineCheckbox
+        size={size}
+        description="Please agree to our privacy policy"
+      />
+    );
+
+    expect(
+      wrapper.getByText('Please agree to our privacy policy')
+    ).toBeTruthy();
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Checkbox/__tests__/{StyledCheckbox.spec.tsx → StyledDefaultCheckbox.spec.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { StyledWrapper, StyledCheckbox } from '../StyledCheckbox';
-import { getThemeState } from '..';
+import { StyledWrapper, StyledCheckbox } from '../StyledDefaultCheckBox';
+import { getThemeState } from '../utils';
 
 describe('StyledWrapper', () => {
   it.each`

package/src/components/Checkbox/__tests__/__snapshots__/{index.spec.tsx.snap → DefaultCheckBox.spec.tsx.snap}

@@ -42,6 +42,7 @@ exports[`Checkbox renders correctly when checked is false and there is no descri
         "borderRadius": 8,
         "borderWidth": 1,
         "flexDirection": "row",
+        "gap": 8,
         "opacity": 1,
         "padding": 16,
       }
@@ -140,6 +141,7 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
         "borderRadius": 8,
         "borderWidth": 1,
         "flexDirection": "row",
+        "gap": 8,
         "opacity": 1,
         "padding": 16,
       }
@@ -260,6 +262,7 @@ exports[`Checkbox renders correctly when disabled is false and readonly is false
         "borderRadius": 8,
         "borderWidth": 1,
         "flexDirection": "row",
+        "gap": 8,
         "opacity": 1,
         "padding": 16,
       }
@@ -384,6 +387,7 @@ exports[`Checkbox renders correctly when disabled is false and readonly is true
         "borderRadius": 8,
         "borderWidth": 1,
         "flexDirection": "row",
+        "gap": 8,
         "opacity": 1,
         "padding": 16,
       }
@@ -508,6 +512,7 @@ exports[`Checkbox renders correctly when disabled is true and readonly is false
         "borderRadius": 8,
         "borderWidth": 1,
         "flexDirection": "row",
+        "gap": 8,
         "opacity": 1,
         "padding": 16,
       }
@@ -632,6 +637,7 @@ exports[`Checkbox renders correctly when disabled is true and readonly is true 1
         "borderRadius": 8,
         "borderWidth": 1,
         "flexDirection": "row",
+        "gap": 8,
         "opacity": 1,
         "padding": 16,
       }