@hero-design/rn 8.71.0 → 8.72.0

package/src/components/Progress/ProgressStep.tsx

@@ -67,7 +67,9 @@ const ProgressStep = ({
   if (steps === 1) {
     return (
       <StyledSingleStepContainer {...props}>
-        <StyledSingleStep />
+        <StyledSingleStep
+          themeState={current >= steps ? 'complete' : 'incomplete'}
+        />
       </StyledSingleStepContainer>
     );
   }

package/src/components/Progress/StyledStep.tsx

@@ -28,17 +28,19 @@ const StyledSingleStepContainer = styled(Box)(({ theme }) => ({
   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,
-}));
+const StyledSingleStep = styled(Box)<{ themeState: 'complete' | 'incomplete' }>(
+  ({ theme, themeState }) => ({
+    height: theme.__hd__.progress.sizes.stepHeight,
+    borderRadius: theme.__hd__.progress.radii.default,
+    backgroundColor: theme.__hd__.progress.colors.step.complete,
+    width: themeState === 'complete' ? '100%' : '70%',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+  })
+);
 
 export {
   StyledStepContainer,

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

@@ -1119,7 +1119,7 @@ exports[`Progress.Step renders correctly 1`] = `
           {},
           [
             {
-              "backgroundColor": "#401960",
+              "backgroundColor": "#DACCE4",
               "borderRadius": 999,
               "height": 8,
               "width": 0,
@@ -1128,7 +1128,7 @@ exports[`Progress.Step renders correctly 1`] = `
           ],
         ]
       }
-      themeState="complete"
+      themeState="current"
       themeWidth={0}
     />
     <View
@@ -1137,7 +1137,7 @@ exports[`Progress.Step renders correctly 1`] = `
           {},
           [
             {
-              "backgroundColor": "#DACCE4",
+              "backgroundColor": "#dadbde",
               "borderRadius": 999,
               "height": 8,
               "width": 0,
@@ -1146,7 +1146,7 @@ exports[`Progress.Step renders correctly 1`] = `
           ],
         ]
       }
-      themeState="current"
+      themeState="incomplete"
       themeWidth={0}
     />
     <View
@@ -1227,7 +1227,217 @@ exports[`Progress.Step renders correctly 1`] = `
 </View>
 `;
 
+exports[`Progress.Step renders correctly 2`] = `
+<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": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "width": 0,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeState="complete"
+      themeWidth={0}
+    />
+    <View
+      style={
+        [
+          {},
+          [
+            {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "width": 0,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeState="complete"
+      themeWidth={0}
+    />
+    <View
+      style={
+        [
+          {},
+          [
+            {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "width": 0,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeState="complete"
+      themeWidth={0}
+    />
+    <View
+      style={
+        [
+          {},
+          [
+            {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "width": 0,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeState="complete"
+      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": "100%",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeState="complete"
+    />
+  </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 2`] = `
 <View
   style={
     {
@@ -1272,6 +1482,7 @@ exports[`Progress.Step renders correctly with single step 1`] = `
           ],
         ]
       }
+      themeState="incomplete"
     />
   </View>
   <View

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

@@ -62,14 +62,26 @@ describe('Progress.Bar', () => {
 });
 
 describe('Progress.Step', () => {
-  it('renders correctly', () => {
-    const { toJSON } = renderWithTheme(<Progress.Step steps={5} current={2} />);
+  it.each`
+    current
+    ${1}
+    ${6}
+  `('renders correctly', ({ current }) => {
+    const { toJSON } = renderWithTheme(
+      <Progress.Step steps={5} current={current} />
+    );
 
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('renders correctly with single step', () => {
-    const { toJSON } = renderWithTheme(<Progress.Step steps={1} current={1} />);
+  it.each`
+    current
+    ${1}
+    ${0}
+  `('renders correctly with single step', ({ current }) => {
+    const { toJSON } = renderWithTheme(
+      <Progress.Step steps={1} current={current} />
+    );
 
     expect(toJSON()).toMatchSnapshot();
   });

package/src/components/Search/SearchOneLine.tsx

@@ -66,6 +66,11 @@ interface SearchOneLineProps extends NativeTextInputProps {
    * Whether to hide the character count.
    * */
   renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  /**
+   * Variant of the SearchTwo
+   * @default 'basic'
+   */
+  variant?: 'basic' | 'reversed';
 }
 
 export const getState = ({
@@ -115,6 +120,7 @@ const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
       placeholder,
       disabled = false,
       testID,
+      variant = 'basic',
       ...nativeProps
     } = props;
 
@@ -157,7 +163,7 @@ const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
         testID={testID}
         style={style}
       >
-        <StyledInputContainer themeFocused={isFocused}>
+        <StyledInputContainer themeFocused={isFocused} themeVariant={variant}>
           {renderPrefix({ prefix })}
           {renderInput({
             nativeInputProps: {

package/src/components/Search/SearchSuffixIcon.tsx

@@ -24,11 +24,22 @@ interface SearchSuffixIconProps {
   badge?: Omit<BadgeProps, 'size'>;
 }
 
+const renderBadge = (props: Omit<BadgeProps, 'size'>) => {
+  const { content, icon, ...rest } = props;
+  if (content)
+    return (
+      <StyledBadge intent="primary" content={content} size="small" {...rest} />
+    );
+  if (icon)
+    return <StyledBadge intent="primary" icon={icon} size="small" {...rest} />;
+  return null;
+};
+
 const SearchSuffixIcon = (props: SearchSuffixIconProps) => {
   const { suffix, testID, style, badge } = props;
   return (
     <StyledSuffixContainer testID={testID} style={style}>
-      {!!badge && <StyledBadge intent="primary" {...badge} size="small" />}
+      {!!badge && renderBadge(badge)}
       {renderSuffix({ suffix })}
     </StyledSuffixContainer>
   );

package/src/components/Search/SearchTwoLine.tsx

@@ -34,6 +34,11 @@ interface SearchTwoLineProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Variant of the SearchTwo
+   * @default 'basic'
+   */
+  variant?: 'basic' | 'reversed';
 }
 
 const SearchTwoLine = (props: SearchTwoLineProps) => {
@@ -44,10 +49,11 @@ const SearchTwoLine = (props: SearchTwoLineProps) => {
     label,
     content,
     testID,
+    variant = 'basic',
   } = props;
   return (
     <StyledContainer style={style} testID={testID}>
-      <StyledInputContainer themeFocused={false}>
+      <StyledInputContainer themeFocused={false} themeVariant={variant}>
         {renderPrefix({ prefix })}
         <StyledHandlerContainer>
           <Typography.Caption fontWeight="semi-bold">

package/src/components/Search/StyledSearch.tsx

@@ -1,28 +1,53 @@
 import styled from '@emotion/native';
 import { TextInput, View } from 'react-native';
-import Badge from '../Badge';
+import { Theme } from '../../theme';
+import Badge, { BadgeProps } from '../Badge';
 
 export type State = 'default' | 'filled' | 'disabled' | 'readonly';
 
+export type Variant = 'basic' | 'reversed';
+
 export const StyledContainer = styled(View)(() => ({
   width: '100%',
 }));
 
+const getBorderWidth = (
+  theme: Theme,
+  themeFocused: boolean,
+  themeVariant: Variant
+) =>
+  themeFocused
+    ? theme.__hd__.search.borderWidths.container[themeVariant].focused
+    : theme.__hd__.search.borderWidths.container[themeVariant].normal;
+
 export const StyledInputContainer = styled(View)<{
   themeFocused: boolean;
-}>(({ theme, themeFocused }) => ({
-  flexDirection: 'row',
-  alignItems: 'center',
-  paddingHorizontal: theme.__hd__.search.space.containerHorizontalPadding,
-  paddingVertical: theme.__hd__.search.space.containerVerticalPadding,
-  backgroundColor: theme.__hd__.search.colors.containerBackground,
-  height: 56,
-  borderRadius: theme.__hd__.search.radii.container,
-  borderWidth: theme.__hd__.search.borderWidths.container.focused,
-  borderColor: themeFocused
-    ? theme.__hd__.search.colors.borders
-    : theme.__hd__.search.colors.containerBackground,
-}));
+  themeVariant: Variant;
+}>(({ theme, themeFocused, themeVariant }) => {
+  const borderWidth = getBorderWidth(theme, themeFocused, themeVariant);
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal:
+      theme.__hd__.search.space.containerHorizontalPadding - borderWidth,
+    paddingVertical:
+      theme.__hd__.search.space.containerVerticalPadding - borderWidth,
+    backgroundColor:
+      theme.__hd__.search.colors[themeVariant].containerBackground,
+    height: 56,
+    borderRadius: theme.__hd__.search.radii.container,
+    borderWidth,
+    borderColor: themeFocused
+      ? theme.__hd__.search.colors[themeVariant].focusedBorder
+      : theme.__hd__.search.colors[themeVariant].border,
+    ...(themeVariant === 'reversed' && {
+      elevation: theme.__hd__.search.shadows.elevation,
+      shadowOffset: theme.__hd__.search.shadows.offset,
+      shadowOpacity: theme.__hd__.search.shadows.opacity,
+      shadowRadius: theme.__hd__.search.shadows.radius,
+    }),
+  };
+});
 
 export const StyledAffixContainer = styled(View)(({ theme }) => ({
   paddingHorizontal: theme.__hd__.search.space.prefixHorizontalPadding,
@@ -34,7 +59,7 @@ export const StyledSuffixContainer = styled(View)(({ theme }) => ({
   alignItems: 'center',
   width: theme.__hd__.search.sizes.surfixSize,
   height: theme.__hd__.search.sizes.surfixSize,
-  backgroundColor: theme.__hd__.search.colors.surfixBackground,
+  backgroundColor: theme.__hd__.search.colors.suffixBackground,
   borderRadius: theme.__hd__.search.radii.surfix,
 }));
 
@@ -57,9 +82,10 @@ export const StyledHandlerContainer = styled(View)(({ theme }) => ({
   flexGrow: 1,
   height: '100%',
   marginHorizontal: theme.__hd__.search.space.inputHorizontalMargin,
+  paddingVertical: theme.__hd__.search.space.inputVerticalPadding,
 }));
 
-export const StyledBadge = styled(Badge)(({ theme }) => ({
+export const StyledBadge = styled(Badge)<BadgeProps>(({ theme }) => ({
   position: 'absolute',
   top: theme.__hd__.search.space.badgeTop,
   right: theme.__hd__.search.space.badgeRight,

package/src/components/Search/__tests__/SearchOneLine.spec.tsx

@@ -56,6 +56,36 @@ describe('SearchOneLine', () => {
       ).toHaveLength(1);
     });
 
+    it('renders reserved variant correctly', () => {
+      const { getByTestId, toJSON } = renderWithTheme(
+        <SearchOneLine
+          prefix="search-outlined"
+          suffix="adjustment"
+          testID="idle-search-text-input"
+          placeholder="Search"
+          variant="reversed"
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(getByTestId('idle-search-text-input')).toBeTruthy();
+      expect(
+        within(getByTestId('idle-search-text-input')).queryAllByTestId(
+          'text-input'
+        )
+      ).toHaveLength(1);
+      expect(
+        within(getByTestId('idle-search-text-input')).queryAllByTestId(
+          'input-prefix'
+        )
+      ).toHaveLength(1);
+      expect(
+        within(getByTestId('idle-search-text-input')).queryAllByTestId(
+          'input-suffix'
+        )
+      ).toHaveLength(1);
+    });
+
     it('renders custom affix correctly', () => {
       const { getByTestId, toJSON } = renderWithTheme(
         <SearchOneLine

package/src/components/Search/__tests__/SearchTwoLine.spec.tsx

@@ -17,4 +17,19 @@ describe('SearchTwoLine', () => {
     expect(wrapper.getByText('Anywhere')).toBeDefined();
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it('renders reserved variant correctly', () => {
+    const wrapper = renderWithTheme(
+      <SearchTwoLine
+        label="Find Work"
+        content={<Typography.Caption>Anywhere</Typography.Caption>}
+        prefix="search-outlined"
+        suffix="adjustment"
+        variant="reversed"
+      />
+    );
+    expect(wrapper.getByText('Find Work')).toBeDefined();
+    expect(wrapper.getByText('Anywhere')).toBeDefined();
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
 });