@hero-design/rn 8.68.0-alpha.1 → 8.69.0

package/src/components/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -103,7 +103,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
             onStartShouldSetResponder={[Function]}
             style={
               {
-                "backgroundColor": "#7622d7",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 32,
                 "opacity": 1,
@@ -226,7 +226,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
             style={
               [
                 {
-                  "color": "#7622d7",
+                  "color": "#401960",
                   "fontSize": 20,
                 },
                 undefined,
@@ -505,7 +505,7 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
             style={
               [
                 {
-                  "color": "#7622d7",
+                  "color": "#401960",
                   "fontSize": 20,
                 },
                 undefined,
@@ -665,7 +665,7 @@ exports[`ListItem renders correctly ListItem with leading status 1`] = `
             style={
               [
                 {
-                  "color": "#7622d7",
+                  "color": "#401960",
                   "fontSize": 20,
                 },
                 undefined,
@@ -805,7 +805,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
             onStartShouldSetResponder={[Function]}
             style={
               {
-                "backgroundColor": "#7622d7",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 32,
                 "opacity": 1,
@@ -945,7 +945,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
             style={
               [
                 {
-                  "backgroundColor": "#7622d7",
+                  "backgroundColor": "#401960",
                   "borderRadius": 999,
                   "display": "flex",
                   "height": 24,

package/src/components/List/__tests__/__snapshots__/StyledBasicListItem.spec.tsx.snap

@@ -198,7 +198,7 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#F1E9FB",
+          "backgroundColor": "#ece8ef",
           "borderRadius": 4,
           "flexDirection": "row",
           "opacity": 1,
@@ -282,7 +282,7 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#F1E9FB",
+          "backgroundColor": "#ece8ef",
           "borderRadius": 4,
           "flexDirection": "row",
           "opacity": 0.38,

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -428,7 +428,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#F1E9FB",
+          "backgroundColor": "#ece8ef",
           "borderRadius": 8,
           "elevation": 3,
           "flexDirection": "row",
@@ -518,7 +518,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
     style={
       [
         {
-          "backgroundColor": "#F1E9FB",
+          "backgroundColor": "#ece8ef",
           "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,

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

@@ -28,7 +28,7 @@ exports[`RefreshControl renders correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": "#7622d7",
+          "backgroundColor": "#401960",
           "borderRadius": 999,
           "height": 8,
           "marginHorizontal": 8,
@@ -47,7 +47,7 @@ exports[`RefreshControl renders correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": "#7622d7",
+          "backgroundColor": "#401960",
           "borderRadius": 999,
           "height": 8,
           "marginHorizontal": 8,
@@ -66,7 +66,7 @@ exports[`RefreshControl renders correctly 1`] = `
       collapsable={false}
       style={
         {
-          "backgroundColor": "#7622d7",
+          "backgroundColor": "#401960",
           "borderRadius": 999,
           "height": 8,
           "marginHorizontal": 8,

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

@@ -30,7 +30,7 @@ exports[`Progress.Bar renders correctly 1`] = `
       style={
         {
           "alignSelf": "stretch",
-          "backgroundColor": "#7622d7",
+          "backgroundColor": "#401960",
           "borderBottomRightRadius": 999,
           "borderTopRightRadius": 999,
           "flex": 1,
@@ -491,7 +491,7 @@ exports[`Progress.Circle renders correctly 1`] = `
             style={
               [
                 {
-                  "borderColor": "#7622d7",
+                  "borderColor": "#401960",
                   "borderRadius": 999,
                   "borderWidth": 8,
                   "height": 72,
@@ -585,7 +585,7 @@ exports[`Progress.Circle renders correctly 1`] = `
             style={
               [
                 {
-                  "borderColor": "#7622d7",
+                  "borderColor": "#401960",
                   "borderRadius": 999,
                   "borderWidth": 8,
                   "height": 72,
@@ -655,7 +655,7 @@ exports[`Progress.Circle renders correctly 1`] = `
         style={
           [
             {
-              "backgroundColor": "#7622d7",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 8,
               "left": 32,
@@ -691,7 +691,7 @@ exports[`Progress.Circle renders correctly 1`] = `
           style={
             [
               {
-                "backgroundColor": "#7622d7",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 8,
                 "left": 32,
@@ -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/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap

@@ -34,14 +34,14 @@ exports[`rendering renders correctly when checked with inactiveIntent=dark 1`] =
     style={
       [
         {
-          "backgroundColor": "#F1E9FB",
+          "backgroundColor": "#ece8ef",
           "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
         [
           {
-            "backgroundColor": "#F1E9FB",
+            "backgroundColor": "#ece8ef",
           },
           undefined,
         ],
@@ -114,7 +114,7 @@ exports[`rendering renders correctly when checked with inactiveIntent=dark 1`] =
               [
                 {
                   "alignItems": "center",
-                  "borderColor": "#7622d7",
+                  "borderColor": "#401960",
                   "borderRadius": 999,
                   "borderWidth": 2,
                   "height": 20,
@@ -129,7 +129,7 @@ exports[`rendering renders correctly when checked with inactiveIntent=dark 1`] =
               style={
                 [
                   {
-                    "backgroundColor": "#7622d7",
+                    "backgroundColor": "#401960",
                     "borderRadius": 999,
                     "height": 10,
                     "width": 10,
@@ -201,14 +201,14 @@ exports[`rendering renders correctly when checked with inactiveIntent=light 1`]
     style={
       [
         {
-          "backgroundColor": "#F1E9FB",
+          "backgroundColor": "#ece8ef",
           "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
         [
           {
-            "backgroundColor": "#F1E9FB",
+            "backgroundColor": "#ece8ef",
           },
           undefined,
         ],
@@ -281,7 +281,7 @@ exports[`rendering renders correctly when checked with inactiveIntent=light 1`]
               [
                 {
                   "alignItems": "center",
-                  "borderColor": "#7622d7",
+                  "borderColor": "#401960",
                   "borderRadius": 999,
                   "borderWidth": 2,
                   "height": 20,
@@ -296,7 +296,7 @@ exports[`rendering renders correctly when checked with inactiveIntent=light 1`]
               style={
                 [
                   {
-                    "backgroundColor": "#7622d7",
+                    "backgroundColor": "#401960",
                     "borderRadius": 999,
                     "height": 10,
                     "width": 10,
@@ -448,7 +448,7 @@ exports[`rendering renders correctly when not checked with inactiveIntent=dark 1
               [
                 {
                   "alignItems": "center",
-                  "borderColor": "#7622d7",
+                  "borderColor": "#401960",
                   "borderRadius": 999,
                   "borderWidth": 2,
                   "height": 20,
@@ -600,7 +600,7 @@ exports[`rendering renders correctly when not checked with inactiveIntent=light
               [
                 {
                   "alignItems": "center",
-                  "borderColor": "#7622d7",
+                  "borderColor": "#401960",
                   "borderRadius": 999,
                   "borderWidth": 2,
                   "height": 20,