@hero-design/rn 8.69.0 → 8.70.0

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

@@ -35,41 +35,21 @@ describe('Chip', () => {
       <ChipWithoutIcon />
     );
 
-    expect(queryByTestId('chip-icon-checkmark')).toBeFalsy();
+    expect(queryByTestId('selected-chip-icon-cancel')).toBeFalsy();
     expect(toJSON()).toMatchSnapshot();
 
     fireEvent.press(getByTestId('chip'));
 
-    expect(getByTestId('chip-icon-checkmark')).toBeTruthy();
+    expect(getByTestId('selected-chip-icon-cancel')).toBeTruthy();
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('does not render icon when variant is outlined', () => {
-    const ChipWithIcon = () => {
-      const [selected, setSelected] = React.useState(false);
-
-      return (
-        <Chip
-          label="Cover my bills"
-          testID="chip"
-          icon="charging-station-outlined"
-          selected={selected}
-          variant="outlined"
-          onPress={() => setSelected(!selected)}
-        />
-      );
-    };
-
-    const { getByTestId, toJSON, queryByTestId } = renderWithTheme(
-      <ChipWithIcon />
+  it('does not render selected icon when showSelectedIcon is false', () => {
+    const { toJSON, queryByTestId } = renderWithTheme(
+      <Chip label="Chip" showSelectedIcon={false} selected />
     );
 
-    expect(queryByTestId('chip-icon-charging-station-outlined')).toBeFalsy();
-    expect(toJSON()).toMatchSnapshot();
-
-    fireEvent.press(getByTestId('chip'));
-
-    expect(queryByTestId('chip-icon-charging-station-outlined')).toBeFalsy();
+    expect(queryByTestId('chip-icon-checkmark')).toBeFalsy();
     expect(toJSON()).toMatchSnapshot();
   });
 

package/src/components/Chip/index.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import { ViewProps } from 'react-native';
-import { IconName } from '../Icon';
-import {
-  StyledChipWrapper,
-  StyledIcon,
-  StyledIconWrapper,
-  StyledLabel,
-} from './StyledChip';
+import Box from '../Box';
+import Icon, { IconName } from '../Icon';
+import Typography from '../Typography';
+import { StyledChipWrapper } from './StyledChip';
 
 export interface ChipProps extends ViewProps {
   /**
@@ -22,13 +19,17 @@ export interface ChipProps extends ViewProps {
    */
   selected?: boolean;
   /**
-   * Icon of the chip. Usable only with `variant="filled"`.
+   * Icon of the chip.
    */
   icon?: IconName;
   /**
    * Callback when the chip is pressed.
    */
   onPress?: () => void;
+  /**
+   * Whether to show the selected icon when using outlined variant.
+   */
+  showSelectedIcon?: boolean;
 }
 
 const Chip = ({
@@ -37,17 +38,11 @@ const Chip = ({
   selected = false,
   icon,
   onPress,
+  showSelectedIcon = true,
   ...otherProps
 }: ChipProps) => {
-  const internalIcon = React.useMemo(() => {
-    if (icon && variant === 'filled') {
-      return icon;
-    }
-    if (selected) {
-      return 'checkmark';
-    }
-    return undefined;
-  }, [icon, selected, variant]);
+  const shouldShowSelectedIcon =
+    variant === 'outlined' && selected && showSelectedIcon;
 
   return (
     <StyledChipWrapper
@@ -56,25 +51,23 @@ const Chip = ({
       themeSelected={selected}
       {...otherProps}
     >
-      {internalIcon && (
-        <StyledIconWrapper>
-          <StyledIcon
+      {icon && (
+        <Box marginRight="small">
+          <Icon size="xsmall" icon={icon} testID={`chip-icon-${icon}`} />
+        </Box>
+      )}
+
+      <Typography.Body>{label}</Typography.Body>
+
+      {shouldShowSelectedIcon && (
+        <Box marginLeft="small">
+          <Icon
             size="xsmall"
-            icon={internalIcon}
-            themeSelected={selected}
-            themeVariant={variant}
-            testID={`chip-icon-${internalIcon}`}
+            icon="cancel"
+            testID="selected-chip-icon-cancel"
           />
-        </StyledIconWrapper>
+        </Box>
       )}
-
-      <StyledLabel
-        variant="small"
-        themeVariant={variant}
-        themeSelected={selected}
-      >
-        {label}
-      </StyledLabel>
     </StyledChipWrapper>
   );
 };

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -310,6 +310,7 @@ exports[`theme returns correct theme object 1`] = `
       },
       "radii": {
         "default": 12,
+        "superRound": 24,
       },
       "sizes": {
         "indicatorWidth": 16,
@@ -379,11 +380,11 @@ exports[`theme returns correct theme object 1`] = `
       },
       "colors": {
         "filledBackground": "#ffffff",
-        "outlinedBackground": "transparent",
-        "primaryBackground": "#001f23",
+        "outlinedDefaultBackground": "#ffffff",
+        "outlinedDefaultBorder": "#bfc1c5",
+        "outlinedSelectedBackground": "#e8e9ea",
+        "outlinedSelectedBorder": "#001f23",
         "secondaryBackground": "#ece8ef",
-        "selectedPrimaryText": "#ffffff",
-        "wrapperBorder": "#001f23",
         "wrapperSelectedBorder": "transparent",
       },
       "radii": {
@@ -402,10 +403,12 @@ exports[`theme returns correct theme object 1`] = `
         },
       },
       "sizes": {
-        "wrapperBorder": 1,
+        "outlinedDefaultBorder": 1,
+        "outlinedSelectedBorder": 2,
       },
       "space": {
-        "iconWrapperMarginRight": 8,
+        "iconWrapperHorizontalMargin": 8,
+        "outlinedSelectedMarginTop": -2,
         "wrapperHorizontalPadding": 12,
         "wrapperVerticalPadding": 8,
       },

package/src/theme/components/card.ts

@@ -18,6 +18,7 @@ const getCardTheme = (theme: GlobalTheme) => {
 
   const radii = {
     default: theme.radii.large,
+    superRound: theme.radii.xxxlarge,
   };
 
   return { colors, sizes, radii };

package/src/theme/components/chip.ts

@@ -2,23 +2,25 @@ import type { GlobalTheme } from '../global';
 
 const getChipTheme = (theme: GlobalTheme) => {
   const colors = {
-    primaryBackground: theme.colors.darkGlobalSurface,
     secondaryBackground: theme.colors.highlightedSurface,
     filledBackground: theme.colors.defaultGlobalSurface,
-    outlinedBackground: 'transparent',
-    wrapperBorder: theme.colors.primaryOutline,
     wrapperSelectedBorder: 'transparent',
-    selectedPrimaryText: theme.colors.defaultGlobalSurface,
+    outlinedDefaultBackground: theme.colors.defaultGlobalSurface,
+    outlinedSelectedBackground: theme.colors.secondaryOutline,
+    outlinedSelectedBorder: theme.colors.primaryOutline,
+    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface,
   };
 
   const space = {
     wrapperHorizontalPadding: theme.space.smallMedium,
     wrapperVerticalPadding: theme.space.small,
-    iconWrapperMarginRight: theme.space.small,
+    iconWrapperHorizontalMargin: theme.space.small,
+    outlinedSelectedMarginTop: -theme.space.xxsmall,
   };
 
   const sizes = {
-    wrapperBorder: theme.borderWidths.base,
+    outlinedDefaultBorder: theme.borderWidths.base,
+    outlinedSelectedBorder: theme.borderWidths.medium,
   };
 
   const radii = {

package/src/theme/global/colors/__tests__/__snapshots__/swagLight.spec.ts.snap

@@ -14,20 +14,20 @@ exports[`swagDark returns correct theme object 1`] = `
   "error": "#f46363",
   "errorSurface": "#fcebe7",
   "highlightedSurface": "#f1e9fb",
-  "inactiveOnDefaultGlobalSurface": "#808f91",
-  "inactiveOutline": "#808f91",
+  "inactiveOnDefaultGlobalSurface": "#89898a",
+  "inactiveOutline": "#89898a",
   "info": "#b5c3fd",
   "infoSurface": "#ecf0ff",
   "mutedArchived": "#bcbdbf",
   "mutedError": "#f68282",
   "mutedInfo": "#c4cffd",
-  "mutedOnDefaultGlobalSurface": "#4d6265",
+  "mutedOnDefaultGlobalSurface": "#59595b",
   "mutedSuccess": "#7bd897",
   "mutedWarning": "#ffcb8d",
   "neutralGlobalSurface": "#f6f6f7",
   "onArchivedSurface": "#606065",
   "onDarkGlobalSurface": "#ffffff",
-  "onDefaultGlobalSurface": "#001f23",
+  "onDefaultGlobalSurface": "#121214",
   "onErrorSurface": "#cb300a",
   "onInfoSurface": "#355bfb",
   "onPrimary": "#fdfbff",
@@ -37,7 +37,7 @@ exports[`swagDark returns correct theme object 1`] = `
   "overlayGlobalSurface": "#000000",
   "pressedSurface": "#380060",
   "primary": "#460078",
-  "primaryOutline": "#001f23",
+  "primaryOutline": "#121214",
   "secondary": "#b382fd",
   "secondaryOutline": "#e8e9ea",
   "success": "#5ace7d",

package/src/theme/global/colors/__tests__/__snapshots__/swagLightGlobal.spec.ts.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`swagLightGlobal returns correct theme object 1`] = `
+{
+  "archived": "#abacaf",
+  "archivedSurface": "#dadbde",
+  "darkGlobalSurface": "#001f23",
+  "defaultGlobalSurface": "#ffffff",
+  "disabledOnDefaultGlobalSurface": "#bfc1c5",
+  "disabledOutline": "#bfc1c5",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "inactiveOnDefaultGlobalSurface": "#89898a",
+  "inactiveOutline": "#89898a",
+  "info": "#b5c3fd",
+  "infoSurface": "#ecf0ff",
+  "mutedArchived": "#bcbdbf",
+  "mutedError": "#f68282",
+  "mutedInfo": "#c4cffd",
+  "mutedOnDefaultGlobalSurface": "#59595b",
+  "mutedSuccess": "#7bd897",
+  "mutedWarning": "#ffcb8d",
+  "neutralGlobalSurface": "#f6f6f7",
+  "onArchivedSurface": "#606065",
+  "onDarkGlobalSurface": "#ffffff",
+  "onDefaultGlobalSurface": "#121214",
+  "onErrorSurface": "#cb300a",
+  "onInfoSurface": "#355bfb",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ac5d00",
+  "overlayGlobalSurface": "#000000",
+  "primaryOutline": "#121214",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;

package/src/theme/global/colors/__tests__/__snapshots__/swagLightJobs.spec.ts.snap

@@ -16,20 +16,20 @@ exports[`swagLightJobs returns correct theme object 1`] = `
   "error": "#f46363",
   "errorSurface": "#fcebe7",
   "highlightedSurface": "#f1e9fb",
-  "inactiveOnDefaultGlobalSurface": "#808f91",
-  "inactiveOutline": "#808f91",
+  "inactiveOnDefaultGlobalSurface": "#89898a",
+  "inactiveOutline": "#89898a",
   "info": "#b5c3fd",
   "infoSurface": "#ecf0ff",
   "mutedArchived": "#bcbdbf",
   "mutedError": "#f68282",
   "mutedInfo": "#c4cffd",
-  "mutedOnDefaultGlobalSurface": "#4d6265",
+  "mutedOnDefaultGlobalSurface": "#59595b",
   "mutedSuccess": "#7bd897",
   "mutedWarning": "#ffcb8d",
   "neutralGlobalSurface": "#f6f6f7",
   "onArchivedSurface": "#606065",
   "onDarkGlobalSurface": "#ffffff",
-  "onDefaultGlobalSurface": "#001f23",
+  "onDefaultGlobalSurface": "#121214",
   "onErrorSurface": "#cb300a",
   "onInfoSurface": "#355bfb",
   "onPrimary": "#fdfbff",
@@ -39,7 +39,7 @@ exports[`swagLightJobs returns correct theme object 1`] = `
   "overlayGlobalSurface": "#000000",
   "pressedSurface": "#380060",
   "primary": "#460078",
-  "primaryOutline": "#001f23",
+  "primaryOutline": "#121214",
   "secondary": "#40d1ff",
   "secondaryOutline": "#e8e9ea",
   "success": "#5ace7d",

package/src/theme/global/colors/__tests__/swagLightGlobal.spec.ts

@@ -0,0 +1,7 @@
+import swagLightGlobal from '../swagLightGlobal';
+
+describe('swagLightGlobal', () => {
+  it('returns correct theme object', () => {
+    expect(swagLightGlobal).toMatchSnapshot();
+  });
+});

package/src/theme/global/colors/swagLight.ts

@@ -1,6 +1,6 @@
 import { swagLightPalette as palette } from '@hero-design/colors';
 import type { SystemPalette, BrandSystemPalette } from './types';
-import globalPalette from './global';
+import swagLightGlobalPalette from './swagLightGlobal';
 
 const swagBrandSystemPallete: BrandSystemPalette = {
   primary: '#460078',
@@ -16,7 +16,7 @@ const swagBrandSystemPallete: BrandSystemPalette = {
 
 const swagSystemPalette: SystemPalette = {
   // Global
-  ...globalPalette,
+  ...swagLightGlobalPalette,
   // Brand
   ...swagBrandSystemPallete,
 };

package/src/theme/global/colors/swagLightGlobal.ts

@@ -0,0 +1,14 @@
+import { swagLightPalette as palette } from '@hero-design/colors';
+import type { GlobalSystemPalette } from './types';
+import globalPalette from './global';
+
+const swagLightGlobalPalette: GlobalSystemPalette = {
+  ...globalPalette,
+  onDefaultGlobalSurface: palette.offBlack,
+  mutedOnDefaultGlobalSurface: palette.offBlackLight30,
+  inactiveOnDefaultGlobalSurface: palette.offBlackLight50,
+  primaryOutline: palette.offBlack,
+  inactiveOutline: palette.offBlackLight50,
+};
+
+export default swagLightGlobalPalette;