@hero-design/rn 8.65.1 → 8.67.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.65.1",
+  "version": "8.67.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Accordion/__tests__/__snapshots__/AccordionItem.spec.tsx.snap

@@ -82,7 +82,7 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
         style={
           [
             {
-              "color": "#795e90",
+              "color": "#B382FD",
               "fontSize": 20,
             },
             undefined,
@@ -260,7 +260,7 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
         style={
           [
             {
-              "color": "#795e90",
+              "color": "#B382FD",
               "fontSize": 20,
             },
             undefined,
@@ -438,7 +438,7 @@ exports[`AccordionItem renders correctly when open 1`] = `
         style={
           [
             {
-              "color": "#795e90",
+              "color": "#B382FD",
               "fontSize": 20,
             },
             undefined,
@@ -616,7 +616,7 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
         style={
           [
             {
-              "color": "#795e90",
+              "color": "#B382FD",
               "fontSize": 20,
             },
             undefined,

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

@@ -90,7 +90,7 @@ exports[`Accordion allows fully controlled 1`] = `
           style={
             [
               {
-                "color": "#795e90",
+                "color": "#B382FD",
                 "fontSize": 20,
               },
               undefined,
@@ -237,7 +237,7 @@ exports[`Accordion allows fully controlled 1`] = `
           style={
             [
               {
-                "color": "#795e90",
+                "color": "#B382FD",
                 "fontSize": 20,
               },
               undefined,
@@ -424,7 +424,7 @@ exports[`Accordion renders correctly 1`] = `
           style={
             [
               {
-                "color": "#795e90",
+                "color": "#B382FD",
                 "fontSize": 20,
               },
               undefined,
@@ -571,7 +571,7 @@ exports[`Accordion renders correctly 1`] = `
           style={
             [
               {
-                "color": "#795e90",
+                "color": "#B382FD",
                 "fontSize": 20,
               },
               undefined,
@@ -758,7 +758,7 @@ exports[`Accordion renders correctly when variant is card 1`] = `
           style={
             [
               {
-                "color": "#795e90",
+                "color": "#B382FD",
                 "fontSize": 20,
               },
               undefined,
@@ -916,7 +916,7 @@ exports[`Accordion renders correctly when variant is card 1`] = `
           style={
             [
               {
-                "color": "#795e90",
+                "color": "#B382FD",
                 "fontSize": 20,
               },
               undefined,

package/src/components/Alert/StyledAlert.tsx

@@ -2,14 +2,18 @@ import styled from '@emotion/native';
 import { TouchableOpacity, View } from 'react-native';
 import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
+import Typography from '../Typography';
+import { TextProps } from '../Typography/Text';
+import Icon, { IconProps } from '../Icon';
 
+type ThemeIntent = 'success' | 'info' | 'warning' | 'error' | 'notification';
 const Container = styled(View)<{
   themeVariant: 'rounded' | 'unrounded';
-  themeIntent: 'success' | 'info' | 'warning' | 'error' | 'notification';
+  themeIntent: ThemeIntent;
 }>(({ theme, themeVariant = 'rounded', themeIntent }) => ({
   borderRadius:
     themeVariant === 'rounded' ? theme.__hd__.alert.radii.default : 0,
-  backgroundColor: theme.__hd__.alert.colors[themeIntent],
+  backgroundColor: theme.__hd__.alert.colors.backgrounds[themeIntent],
   minHeight: theme.__hd__.alert.sizes.height,
   flexDirection: 'row',
 }));
@@ -19,11 +23,27 @@ const IconContainer = styled(View)<ViewProps>(({ theme }) => ({
   paddingLeft: theme.__hd__.alert.space.iconLeftPadding,
 }));
 
+const StyledIcon = styled(Icon)<
+  IconProps & {
+    themeIntent: ThemeIntent;
+  }
+>(({ theme, themeIntent }) => ({
+  color: theme.__hd__.alert.colors.texts[themeIntent],
+}));
+
 const TextContainer = styled(View)<ViewProps>(({ theme }) => ({
   paddingHorizontal: theme.__hd__.alert.space.textPaddingHorizontal,
   flex: 1,
 }));
 
+const StyledBody = styled(Typography.Body)<
+  TextProps & {
+    themeIntent: ThemeIntent;
+  }
+>(({ theme, themeIntent }) => ({
+  color: theme.__hd__.alert.colors.texts[themeIntent],
+}));
+
 const ContentContainer = styled(View)<{ showDivider: boolean }>(
   ({ theme, showDivider }) => ({
     paddingVertical: theme.__hd__.alert.space.contentPaddingHorizontal,
@@ -47,4 +67,6 @@ export {
   TextContainer,
   IconContainer,
   CTAWrapper,
+  StyledBody,
+  StyledIcon,
 };

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

@@ -12,7 +12,7 @@ exports[`Alert Icon render custom icon correctly 1`] = `
     style={
       [
         {
-          "backgroundColor": "#b5c3fd",
+          "backgroundColor": "#ecf0ff",
           "borderRadius": 16,
           "flexDirection": "row",
           "minHeight": 48,
@@ -58,7 +58,12 @@ exports[`Alert Icon render custom icon correctly 1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -87,7 +92,12 @@ exports[`Alert Icon render custom icon correctly 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -134,7 +144,7 @@ exports[`Alert renders correctly when intent is error 1`] = `
     style={
       [
         {
-          "backgroundColor": "#f46363",
+          "backgroundColor": "#fcebe7",
           "borderRadius": 16,
           "flexDirection": "row",
           "minHeight": 48,
@@ -180,7 +190,12 @@ exports[`Alert renders correctly when intent is error 1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#cb300a",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -209,7 +224,12 @@ exports[`Alert renders correctly when intent is error 1`] = `
                 "letterSpacing": 0.24,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#cb300a",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -229,7 +249,12 @@ exports[`Alert renders correctly when intent is error 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#cb300a",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -285,7 +310,12 @@ exports[`Alert renders correctly when intent is error 1`] = `
               "color": "#001f23",
               "fontSize": 20,
             },
-            undefined,
+            [
+              {
+                "color": "#cb300a",
+              },
+              undefined,
+            ],
           ]
         }
         themeIntent="text"
@@ -328,7 +358,7 @@ exports[`Alert renders correctly when intent is info 1`] = `
     style={
       [
         {
-          "backgroundColor": "#b5c3fd",
+          "backgroundColor": "#ecf0ff",
           "borderRadius": 16,
           "flexDirection": "row",
           "minHeight": 48,
@@ -374,7 +404,12 @@ exports[`Alert renders correctly when intent is info 1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -403,7 +438,12 @@ exports[`Alert renders correctly when intent is info 1`] = `
                 "letterSpacing": 0.24,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -423,7 +463,12 @@ exports[`Alert renders correctly when intent is info 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -479,7 +524,12 @@ exports[`Alert renders correctly when intent is info 1`] = `
               "color": "#001f23",
               "fontSize": 20,
             },
-            undefined,
+            [
+              {
+                "color": "#355bfb",
+              },
+              undefined,
+            ],
           ]
         }
         themeIntent="text"
@@ -570,7 +620,12 @@ exports[`Alert renders correctly when intent is notification 1`] = `
                 "letterSpacing": 0.24,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#001f23",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -590,7 +645,12 @@ exports[`Alert renders correctly when intent is notification 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#001f23",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -646,7 +706,12 @@ exports[`Alert renders correctly when intent is notification 1`] = `
               "color": "#001f23",
               "fontSize": 20,
             },
-            undefined,
+            [
+              {
+                "color": "#001f23",
+              },
+              undefined,
+            ],
           ]
         }
         themeIntent="text"
@@ -689,7 +754,7 @@ exports[`Alert renders correctly when intent is success 1`] = `
     style={
       [
         {
-          "backgroundColor": "#5ace7d",
+          "backgroundColor": "#f0fef4",
           "borderRadius": 16,
           "flexDirection": "row",
           "minHeight": 48,
@@ -735,7 +800,12 @@ exports[`Alert renders correctly when intent is success 1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#017d6d",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -764,7 +834,12 @@ exports[`Alert renders correctly when intent is success 1`] = `
                 "letterSpacing": 0.24,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#017d6d",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -784,7 +859,12 @@ exports[`Alert renders correctly when intent is success 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#017d6d",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -840,7 +920,12 @@ exports[`Alert renders correctly when intent is success 1`] = `
               "color": "#001f23",
               "fontSize": 20,
             },
-            undefined,
+            [
+              {
+                "color": "#017d6d",
+              },
+              undefined,
+            ],
           ]
         }
         themeIntent="text"
@@ -883,7 +968,7 @@ exports[`Alert renders correctly when intent is warning 1`] = `
     style={
       [
         {
-          "backgroundColor": "#ffbe71",
+          "backgroundColor": "#fff6eb",
           "borderRadius": 16,
           "flexDirection": "row",
           "minHeight": 48,
@@ -929,7 +1014,12 @@ exports[`Alert renders correctly when intent is warning 1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#ac5d00",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -958,7 +1048,12 @@ exports[`Alert renders correctly when intent is warning 1`] = `
                 "letterSpacing": 0.24,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#ac5d00",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -978,7 +1073,12 @@ exports[`Alert renders correctly when intent is warning 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#ac5d00",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -1034,7 +1134,12 @@ exports[`Alert renders correctly when intent is warning 1`] = `
               "color": "#001f23",
               "fontSize": 20,
             },
-            undefined,
+            [
+              {
+                "color": "#ac5d00",
+              },
+              undefined,
+            ],
           ]
         }
         themeIntent="text"
@@ -1077,7 +1182,7 @@ exports[`Alert renders correctly without rounded  1`] = `
     style={
       [
         {
-          "backgroundColor": "#b5c3fd",
+          "backgroundColor": "#ecf0ff",
           "borderRadius": 0,
           "flexDirection": "row",
           "minHeight": 48,
@@ -1123,7 +1228,12 @@ exports[`Alert renders correctly without rounded  1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -1152,7 +1262,12 @@ exports[`Alert renders correctly without rounded  1`] = `
                 "letterSpacing": 0.24,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -1172,7 +1287,12 @@ exports[`Alert renders correctly without rounded  1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"

package/src/components/Alert/index.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import Icon from '../Icon';
-import Typography from '../Typography';
 import {
   Container,
   ContentContainer,
   CTAWrapper,
   IconContainer,
+  StyledBody,
+  StyledIcon,
   TextContainer,
 } from './StyledAlert';
 import type { IconName } from '../Icon';
 import { useDeprecation } from '../../utils/hooks';
 
+type Intent = 'success' | 'info' | 'warning' | 'error' | 'notification';
 const getIntentIcon = (
   intent: 'success' | 'info' | 'warning' | 'error' | 'notification'
 ) => {
@@ -30,10 +31,10 @@ const getIntentIcon = (
   }
 };
 
-const AlertIcon = ({ icon }: { icon?: IconName }) =>
+const AlertIcon = ({ icon, intent }: { icon?: IconName; intent: Intent }) =>
   icon ? (
     <IconContainer testID="alert-left-icon">
-      <Icon icon={icon} size="small" />
+      <StyledIcon icon={icon} size="small" themeIntent={intent} />
     </IconContainer>
   ) : null;
 
@@ -119,16 +120,20 @@ const Alert = ({
     >
       <ContentContainer showDivider={!!onClose}>
         {icon !== null ? (
-          <AlertIcon icon={icon || getIntentIcon(intent)} />
+          <AlertIcon icon={icon || getIntentIcon(intent)} intent={intent} />
         ) : null}
         <TextContainer>
           {typeof title === 'string' ? (
-            <Typography.Body variant="small-bold">{title}</Typography.Body>
+            <StyledBody variant="small-bold" themeIntent={intent}>
+              {title}
+            </StyledBody>
           ) : (
             title
           )}
           {typeof content === 'string' ? (
-            <Typography.Body variant="small">{content}</Typography.Body>
+            <StyledBody variant="small" themeIntent={intent}>
+              {content}
+            </StyledBody>
           ) : (
             content
           )}
@@ -137,11 +142,11 @@ const Alert = ({
       {onClose ? (
         <CTAWrapper onPress={onClose} testID="alert-close-icon">
           {typeof actionLabel === 'string' ? (
-            <Typography.Body variant="small-bold">
+            <StyledBody variant="small-bold" themeIntent={intent}>
               {actionLabel}
-            </Typography.Body>
+            </StyledBody>
           ) : (
-            <Icon icon="cancel" size="small" />
+            <StyledIcon icon="cancel" size="small" themeIntent={intent} />
           )}
         </CTAWrapper>
       ) : null}