@hero-design/rn 8.68.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/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -461,7 +461,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                       style={
                         [
                           {
-                            "alignItems": "center",
+                            "alignItems": "flex-end",
                             "height": 48,
                             "justifyContent": "center",
                             "marginLeft": 12,

package/src/components/Progress/ProgressStep.tsx

@@ -0,0 +1,87 @@
+import { useTheme } from '@emotion/react';
+import React, { useMemo } from 'react';
+import { LayoutChangeEvent, ViewProps } from 'react-native';
+import {
+  StyledSingleStep,
+  StyledSingleStepContainer,
+  StyledStep,
+  StyledStepContainer,
+} from './StyledStep';
+
+export interface ProgressStepProps extends ViewProps {
+  /**
+   * The total number of steps.
+   */
+  steps: number;
+  /**
+   * The current step.
+   */
+  current: number;
+  /**
+   * Test ID of the component.
+   */
+  testID?: string;
+}
+
+type StepState = 'complete' | 'incomplete' | 'current';
+
+export const getStepState = (current: number, index: number): StepState => {
+  if (index < current) {
+    return 'complete';
+  }
+
+  if (index === current) {
+    return 'current';
+  }
+
+  return 'incomplete';
+};
+
+const ProgressStep = ({
+  steps,
+  current,
+  onLayout,
+  ...props
+}: ProgressStepProps) => {
+  const theme = useTheme();
+  const [containerWidth, setContainerWidth] = React.useState(0);
+
+  const onContainerLayout = (event: LayoutChangeEvent) => {
+    setContainerWidth(event.nativeEvent.layout.width);
+
+    onLayout?.(event);
+  };
+
+  // Calculate the width for each step
+  const stepWidth = useMemo(() => {
+    let width = 0;
+    if (containerWidth > 0) {
+      width =
+        (containerWidth - (steps - 1) * theme.__hd__.progress.space.stepGap) /
+        steps;
+    }
+
+    return width;
+  }, [containerWidth, steps, theme]);
+
+  if (steps === 1) {
+    return (
+      <StyledSingleStepContainer {...props}>
+        <StyledSingleStep />
+      </StyledSingleStepContainer>
+    );
+  }
+
+  return (
+    <StyledStepContainer {...props} onLayout={onContainerLayout}>
+      {Array.from({ length: steps }).map((_, index) => (
+        <StyledStep
+          themeState={getStepState(current - 1, index)}
+          themeWidth={stepWidth}
+        />
+      ))}
+    </StyledStepContainer>
+  );
+};
+
+export default ProgressStep;

package/src/components/Progress/StyledStep.tsx

@@ -0,0 +1,48 @@
+import styled from '@emotion/native';
+import Box from '../Box';
+
+type StepState = 'complete' | 'incomplete' | 'current';
+
+const StyledStepContainer = styled(Box)({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+const StyledStep = styled(Box)<{
+  themeState: StepState;
+  themeWidth: number;
+}>(({ theme, themeState, themeWidth }) => ({
+  height: theme.__hd__.progress.sizes.stepHeight,
+  borderRadius: theme.__hd__.progress.radii.default,
+  backgroundColor: theme.__hd__.progress.colors.step[themeState],
+  width: themeWidth,
+}));
+
+const StyledSingleStepContainer = styled(Box)(({ theme }) => ({
+  height: theme.__hd__.progress.sizes.stepHeight,
+  borderRadius: theme.__hd__.progress.radii.default,
+  backgroundColor: theme.__hd__.progress.colors.step.current,
+  width: '100%',
+  position: 'relative',
+}));
+
+const StyledSingleStep = styled(Box)(({ theme }) => ({
+  height: theme.__hd__.progress.sizes.stepHeight,
+  borderRadius: theme.__hd__.progress.radii.default,
+  backgroundColor: theme.__hd__.progress.colors.step.complete,
+  width: '70%',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+}));
+
+export {
+  StyledStepContainer,
+  StyledStep,
+  StyledSingleStepContainer,
+  StyledSingleStep,
+};

package/src/components/Progress/__tests__/__snapshots__/index.spec.js.snap

@@ -1087,3 +1087,212 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
   />
 </View>
 `;
+
+exports[`Progress.Step renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      [
+        {},
+        [
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {},
+          [
+            {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "width": 0,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeState="complete"
+      themeWidth={0}
+    />
+    <View
+      style={
+        [
+          {},
+          [
+            {
+              "backgroundColor": "#DACCE4",
+              "borderRadius": 999,
+              "height": 8,
+              "width": 0,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeState="current"
+      themeWidth={0}
+    />
+    <View
+      style={
+        [
+          {},
+          [
+            {
+              "backgroundColor": "#dadbde",
+              "borderRadius": 999,
+              "height": 8,
+              "width": 0,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeState="incomplete"
+      themeWidth={0}
+    />
+    <View
+      style={
+        [
+          {},
+          [
+            {
+              "backgroundColor": "#dadbde",
+              "borderRadius": 999,
+              "height": 8,
+              "width": 0,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeState="incomplete"
+      themeWidth={0}
+    />
+    <View
+      style={
+        [
+          {},
+          [
+            {
+              "backgroundColor": "#dadbde",
+              "borderRadius": 999,
+              "height": 8,
+              "width": 0,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeState="incomplete"
+      themeWidth={0}
+    />
+  </View>
+  <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[`Progress.Step renders correctly with single step 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {},
+        [
+          {
+            "backgroundColor": "#DACCE4",
+            "borderRadius": 999,
+            "height": 8,
+            "position": "relative",
+            "width": "100%",
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {},
+          [
+            {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "bottom": 0,
+              "height": 8,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "width": "70%",
+            },
+            undefined,
+          ],
+        ]
+      }
+    />
+  </View>
+  <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>
+`;

package/src/components/Progress/__tests__/index.spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 
 import Progress from '..';
+import { getStepState } from '../ProgressStep';
 
 describe('Progress.Circle', () => {
   it('renders correctly', () => {
@@ -59,3 +60,28 @@ describe('Progress.Bar', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 });
+
+describe('Progress.Step', () => {
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(<Progress.Step steps={5} current={2} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with single step', () => {
+    const { toJSON } = renderWithTheme(<Progress.Step steps={1} current={1} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    current | index | state
+    ${1}    | ${0}  | ${'complete'}
+    ${1}    | ${1}  | ${'current'}
+    ${1}    | ${2}  | ${'incomplete'}
+  `('getStepState returns correct variant', ({ current, index, state }) => {
+    const result = getStepState(current, index);
+
+    expect(result).toBe(state);
+  });
+});

package/src/components/Progress/index.tsx

@@ -1,6 +1,11 @@
 import ProgressCircle from './ProgressCircle';
 import ProgressBar from './ProgressBar';
+import ProgressStep from './ProgressStep';
 
-const Progress = { Circle: ProgressCircle, Bar: ProgressBar } as const;
+const Progress = {
+  Circle: ProgressCircle,
+  Bar: ProgressBar,
+  Step: ProgressStep,
+} as const;
 
 export default Progress;

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -426,7 +426,7 @@ exports[`rendering allows custom renderer 1`] = `
               style={
                 [
                   {
-                    "alignItems": "center",
+                    "alignItems": "flex-end",
                     "height": 48,
                     "justifyContent": "center",
                     "marginLeft": 12,
@@ -2249,7 +2249,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
               style={
                 [
                   {
-                    "alignItems": "center",
+                    "alignItems": "flex-end",
                     "height": 48,
                     "justifyContent": "center",
                     "marginLeft": 12,
@@ -4291,7 +4291,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
               style={
                 [
                   {
-                    "alignItems": "center",
+                    "alignItems": "flex-end",
                     "height": 48,
                     "justifyContent": "center",
                     "marginLeft": 12,
@@ -5614,7 +5614,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
               style={
                 [
                   {
-                    "alignItems": "center",
+                    "alignItems": "flex-end",
                     "height": 48,
                     "justifyContent": "center",
                     "marginLeft": 12,

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -425,7 +425,7 @@ exports[`rendering allows custom renderer 1`] = `
               style={
                 [
                   {
-                    "alignItems": "center",
+                    "alignItems": "flex-end",
                     "height": 48,
                     "justifyContent": "center",
                     "marginLeft": 12,
@@ -2164,7 +2164,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
               style={
                 [
                   {
-                    "alignItems": "center",
+                    "alignItems": "flex-end",
                     "height": 48,
                     "justifyContent": "center",
                     "marginLeft": 12,
@@ -4066,7 +4066,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
               style={
                 [
                   {
-                    "alignItems": "center",
+                    "alignItems": "flex-end",
                     "height": 48,
                     "justifyContent": "center",
                     "marginLeft": 12,

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -747,7 +747,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                       style={
                         [
                           {
-                            "alignItems": "center",
+                            "alignItems": "flex-end",
                             "height": 48,
                             "justifyContent": "center",
                             "marginLeft": 12,

package/src/index.ts

@@ -4,6 +4,7 @@ import theme, {
   useTheme,
   swagSystemPalette,
   swagLightSystemPalette,
+  swagLightJobsSystemPalette,
   swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
@@ -80,6 +81,7 @@ export {
   withTheme,
   swagSystemPalette,
   swagLightSystemPalette,
+  swagLightJobsSystemPalette,
   swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,