@hero-design/rn 8.68.0 → 8.69.0

package/src/components/BottomSheet/index.tsx

@@ -12,13 +12,15 @@ import {
 import BottomSheetContext from './BottomSheetContext';
 import Footer from './Footer';
 import Header from './Header';
+import ScrollView from './ScrollView';
 import {
   StyledBackdrop,
   StyledBottomSheet,
+  StyledFloatingBottomSheet,
+  StyledFloatingWrapper,
   StyledKeyboardAvoidingView,
   StyledWrapper,
 } from './StyledBottomSheet';
-import ScrollView from './ScrollView';
 
 interface BottomSheetProps {
   /**
@@ -82,6 +84,10 @@ interface BottomSheetProps {
    * Supported orientations for the BottomSheet modal, iOS only.
    */
   supportedOrientations?: ('portrait' | 'landscape')[];
+  /**
+   * Variant of the bottom sheet.
+   */
+  variant?: 'fixed' | 'floating';
 }
 
 const BottomSheet = ({
@@ -100,6 +106,7 @@ const BottomSheet = ({
   testID,
   keyboardAvoidingViewProps = {},
   supportedOrientations = ['portrait'],
+  variant = 'fixed',
 }: BottomSheetProps): JSX.Element => {
   const { height } = Dimensions.get('window');
 
@@ -159,6 +166,12 @@ const BottomSheet = ({
     [setInternalShowDivider]
   );
 
+  const BottomSheetWrapperComponent =
+    variant === 'fixed' ? React.Fragment : StyledFloatingWrapper;
+
+  const BottomSheetComponent =
+    variant === 'fixed' ? StyledBottomSheet : StyledFloatingBottomSheet;
+
   return (
     <Modal
       visible={visible}
@@ -177,35 +190,39 @@ const BottomSheet = ({
             style={{ opacity: interpolateOpacity }}
             onPress={onRequestClose}
           />
-          <StyledBottomSheet
-            style={[
-              style,
-              {
-                transform: [
-                  { scaleY: height > 0 ? 1 : 0 },
-                  {
-                    translateY: interpolateY,
-                  },
-                ],
-              },
-            ]}
-          >
-            {header !== undefined ? (
-              <Header
-                content={header}
-                showDivider={internalShowDivider}
-                onRequestClose={onRequestClose}
-                showCloseButton={showCloseButton}
-              />
-            ) : null}
-            <BottomSheetContext.Provider value={BottomSheetContextValue}>
-              {children}
-            </BottomSheetContext.Provider>
-
-            {footer ? (
-              <Footer showDivider={showDivider}>{footer}</Footer>
-            ) : null}
-          </StyledBottomSheet>
+          <BottomSheetWrapperComponent>
+            <BottomSheetComponent
+              style={[
+                style,
+                {
+                  transform: [
+                    { scaleY: height > 0 ? 1 : 0 },
+                    {
+                      translateY: interpolateY,
+                    },
+                  ],
+                },
+              ]}
+            >
+              {header !== undefined ? (
+                <Header
+                  variant={variant}
+                  content={header}
+                  showDivider={internalShowDivider}
+                  onRequestClose={onRequestClose}
+                  showCloseButton={showCloseButton}
+                />
+              ) : null}
+
+              <BottomSheetContext.Provider value={BottomSheetContextValue}>
+                {children}
+              </BottomSheetContext.Provider>
+
+              {footer ? (
+                <Footer showDivider={showDivider}>{footer}</Footer>
+              ) : null}
+            </BottomSheetComponent>
+          </BottomSheetWrapperComponent>
         </StyledKeyboardAvoidingView>
       </StyledWrapper>
     </Modal>

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,

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

@@ -185,10 +185,13 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "backdrop": "#000000",
         "background": "#ffffff",
+        "floatingHeaderIconBackground": "#dadbde",
         "shadow": "#001f23",
       },
       "radii": {
         "default": 16,
+        "floating": 32,
+        "floatingHeaderIcon": 999,
       },
       "shadows": {
         "elevation": 10,
@@ -201,9 +204,13 @@ exports[`theme returns correct theme object 1`] = `
       },
       "sizes": {
         "closeIcon": 48,
+        "floatingCloseIcon": 12,
       },
       "space": {
         "closeIconMargin": 12,
+        "floatingContentMargin": 16,
+        "floatingHeaderIconPadding": 8,
+        "floatingInnerPadding": 8,
         "footerHorizontalPadding": 12,
         "footerVerticalPadding": 2,
         "headerWrapperHorizontalPadding": 16,
@@ -725,6 +732,11 @@ exports[`theme returns correct theme object 1`] = `
           "warning": "#e8e9ea",
           "warningInverted": "#ffcb8d",
         },
+        "step": {
+          "complete": "#401960",
+          "current": "#DACCE4",
+          "incomplete": "#dadbde",
+        },
       },
       "radii": {
         "default": 999,
@@ -733,6 +745,10 @@ exports[`theme returns correct theme object 1`] = `
         "barHeight": 8,
         "circleCompletenessHeight": 8,
         "circleDiameter": 72,
+        "stepHeight": 8,
+      },
+      "space": {
+        "stepGap": 4,
       },
     },
     "radio": {

package/src/theme/components/bottomSheet.ts

@@ -5,10 +5,12 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
     backdrop: theme.colors.overlayGlobalSurface,
+    floatingHeaderIconBackground: theme.colors.archivedSurface,
   };
 
   const sizes = {
     closeIcon: theme.sizes.xxxlarge,
+    floatingCloseIcon: theme.sizes.smallMedium,
   };
 
   const space = {
@@ -17,6 +19,9 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
     closeIconMargin: theme.space.smallMedium,
     footerVerticalPadding: theme.space.xxsmall,
     footerHorizontalPadding: theme.space.smallMedium,
+    floatingContentMargin: theme.space.medium,
+    floatingInnerPadding: theme.space.small,
+    floatingHeaderIconPadding: theme.space.small,
   };
 
   const shadows = {
@@ -28,6 +33,8 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
 
   const radii = {
     default: theme.radii.xlarge,
+    floating: theme.radii['5xlarge'],
+    floatingHeaderIcon: theme.radii.rounded,
   };
 
   return { colors, shadows, radii, sizes, space };