@hero-design/rn 8.69.0 → 8.70.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.69.0",
+  "version": "8.70.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.45.0",
+    "@hero-design/colors": "8.45.1",
     "date-fns": "^2.16.1",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"

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 };