@hero-design/rn 8.68.0 → 8.70.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/Card/StyledCard.tsx

@@ -9,11 +9,15 @@ const StyledCard = styled(View)<{
     | 'danger'
     | 'archived'
     | 'neutral';
-}>(({ theme, themeIntent }) => ({
+  themeVariant?: 'basic' | 'super-round';
+}>(({ theme, themeIntent, themeVariant }) => ({
   ...(themeIntent !== undefined && {
     backgroundColor: theme.__hd__.card.colors[themeIntent],
   }),
-  borderRadius: theme.__hd__.card.radii.default,
+  borderRadius:
+    themeVariant === 'basic'
+      ? theme.__hd__.card.radii.default
+      : theme.__hd__.card.radii.superRound,
   overflow: 'hidden',
 }));
 

package/src/components/Card/__tests__/__snapshots__/StyledCard.spec.tsx.snap

@@ -12,7 +12,7 @@ exports[`StyledCard renders correct basic style 1`] = `
     style={
       [
         {
-          "borderRadius": 12,
+          "borderRadius": 24,
           "overflow": "hidden",
         },
         undefined,

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

@@ -20,6 +20,7 @@ exports[`Card renders correctly when intent is archived 1`] = `
       ]
     }
     themeIntent="archived"
+    themeVariant="basic"
   >
     <Text
       allowFontScaling={false}
@@ -85,6 +86,7 @@ exports[`Card renders correctly when intent is danger 1`] = `
       ]
     }
     themeIntent="danger"
+    themeVariant="basic"
   >
     <Text
       allowFontScaling={false}
@@ -150,6 +152,7 @@ exports[`Card renders correctly when intent is info 1`] = `
       ]
     }
     themeIntent="info"
+    themeVariant="basic"
   >
     <Text
       allowFontScaling={false}
@@ -215,6 +218,7 @@ exports[`Card renders correctly when intent is primary 1`] = `
       ]
     }
     themeIntent="primary"
+    themeVariant="basic"
   >
     <Text
       allowFontScaling={false}
@@ -279,6 +283,7 @@ exports[`Card renders correctly when intent is subdued 1`] = `
       ]
     }
     themeIntent="subdued"
+    themeVariant="basic"
   >
     <Text
       allowFontScaling={false}
@@ -344,6 +349,7 @@ exports[`Card renders correctly when intent is success 1`] = `
       ]
     }
     themeIntent="success"
+    themeVariant="basic"
   >
     <Text
       allowFontScaling={false}
@@ -407,6 +413,7 @@ exports[`Card renders correctly when intent is undefined 1`] = `
         undefined,
       ]
     }
+    themeVariant="basic"
   >
     <Text
       allowFontScaling={false}

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

@@ -17,6 +17,18 @@ describe('Card', () => {
     expect(queryAllByTestId('data-card-indicator')).toHaveLength(0);
   });
 
+  it('renders super round card correctly', () => {
+    const { queryAllByTestId } = renderWithTheme(
+      <Card testID="card" variant="super-round">
+        <View testID="child-view" />
+      </Card>
+    );
+
+    expect(queryAllByTestId('card')).toHaveLength(1);
+    expect(queryAllByTestId('child-view')).toHaveLength(1);
+    expect(queryAllByTestId('data-card-indicator')).toHaveLength(0);
+  });
+
   it.each`
     intent
     ${undefined}

package/src/components/Card/index.tsx

@@ -27,11 +27,17 @@ export interface CardProps extends ViewProps {
    * Testing id of the component.
    */
   testID?: string;
+  variant?: 'basic' | 'super-round';
 }
 
-const Card = ({ intent, children, ...nativeProps }: CardProps): JSX.Element => {
+const Card = ({
+  intent,
+  children,
+  variant = 'basic',
+  ...nativeProps
+}: CardProps): JSX.Element => {
   return (
-    <StyledCard {...nativeProps} themeIntent={intent}>
+    <StyledCard {...nativeProps} themeIntent={intent} themeVariant={variant}>
       {children}
     </StyledCard>
   );

package/src/components/Carousel/__tests__/__snapshots__/CardCarousel.spec.tsx.snap

@@ -124,6 +124,7 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
                   ],
                 ]
               }
+              themeVariant="basic"
             >
               <Text
                 allowFontScaling={false}
@@ -188,6 +189,7 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
                   ],
                 ]
               }
+              themeVariant="basic"
             >
               <Text
                 allowFontScaling={false}
@@ -419,6 +421,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
                   ],
                 ]
               }
+              themeVariant="basic"
             >
               <Text
                 allowFontScaling={false}
@@ -483,6 +486,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
                   ],
                 ]
               }
+              themeVariant="basic"
             >
               <Text
                 allowFontScaling={false}

package/src/components/Carousel/__tests__/__snapshots__/StyledCardCarousel.spec.tsx.snap

@@ -25,6 +25,7 @@ exports[`StyledCard should render correctly 1`] = `
         ],
       ]
     }
+    themeVariant="basic"
   />
   <View
     pointerEvents="box-none"

package/src/components/Chip/StyledChip.tsx

@@ -1,8 +1,5 @@
 import styled from '@emotion/native';
 import { TouchableOpacity } from 'react-native';
-import Box from '../Box';
-import Icon from '../Icon';
-import Typography from '../Typography';
 
 type StyledChipWrapperProps = {
   themeVariant?: 'outlined' | 'filled';
@@ -23,27 +20,19 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
     };
 
     const getBorderStyles = () => {
-      const commonStyle = {
-        borderWidth: theme.__hd__.chip.sizes.wrapperBorder,
-      };
-
-      if (themeSelected) {
-        return {
-          ...commonStyle,
-          borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder,
-        };
-      }
-
       switch (themeVariant) {
         case 'outlined': {
           return {
-            ...commonStyle,
-            borderColor: theme.__hd__.chip.colors.wrapperBorder,
+            borderColor: themeSelected
+              ? theme.__hd__.chip.colors.outlinedSelectedBorder
+              : theme.__hd__.chip.colors.outlinedDefaultBorder,
+            borderWidth: themeSelected
+              ? theme.__hd__.chip.sizes.outlinedSelectedBorder
+              : theme.__hd__.chip.sizes.outlinedDefaultBorder,
           };
         }
         case 'filled': {
           return {
-            ...commonStyle,
             borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder,
           };
         }
@@ -55,7 +44,9 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
         switch (themeVariant) {
           case 'outlined': {
             return {
-              backgroundColor: theme.__hd__.chip.colors.primaryBackground,
+              backgroundColor: themeSelected
+                ? theme.__hd__.chip.colors.outlinedSelectedBackground
+                : theme.__hd__.chip.colors.outlinedDefaultBackground,
             };
           }
           case 'filled':
@@ -67,7 +58,8 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
         switch (themeVariant) {
           case 'outlined': {
             return {
-              backgroundColor: theme.__hd__.chip.colors.outlinedBackground,
+              backgroundColor:
+                theme.__hd__.chip.colors.outlinedDefaultBackground,
             };
           }
           case 'filled':
@@ -86,7 +78,9 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
       borderRadius: theme.__hd__.chip.radii.wrapper,
       paddingVertical: theme.__hd__.chip.space.wrapperVerticalPadding,
       paddingHorizontal: theme.__hd__.chip.space.wrapperHorizontalPadding,
-      borderWidth: theme.__hd__.chip.sizes.wrapperBorder,
+      marginTop: themeSelected
+        ? theme.__hd__.chip.space.outlinedSelectedMarginTop
+        : undefined,
       ...getShadowStyles(),
       ...getBorderStyles(),
       ...getBackgroundStyles(),
@@ -94,28 +88,4 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
   }
 );
 
-const StyledIconWrapper = styled(Box)(({ theme }) => ({
-  marginRight: theme.__hd__.chip.space.iconWrapperMarginRight,
-}));
-
-const StyledLabel = styled(Typography.Body)<{
-  themeSelected?: boolean;
-  themeVariant?: 'outlined' | 'filled';
-}>(({ themeSelected, themeVariant, theme }) => ({
-  color:
-    themeSelected && themeVariant === 'outlined'
-      ? theme.__hd__.chip.colors.selectedPrimaryText
-      : undefined,
-}));
-
-const StyledIcon = styled(Icon)<{
-  themeSelected?: boolean;
-  themeVariant?: 'outlined' | 'filled';
-}>(({ themeSelected, themeVariant, theme }) => ({
-  color:
-    themeSelected && themeVariant === 'outlined'
-      ? theme.__hd__.chip.colors.selectedPrimaryText
-      : undefined,
-}));
-
-export { StyledChipWrapper, StyledIcon, StyledIconWrapper, StyledLabel };
+export { StyledChipWrapper };