@hero-design/rn 8.22.0 → 8.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.22.0",
+  "version": "8.23.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.22.0",
+    "@hero-design/colors": "8.23.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -45,7 +45,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.22.0",
+    "@hero-design/eslint-plugin": "8.23.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,9 +61,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.22.0",
+    "eslint-config-hd": "8.23.0",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.22.0",
+    "prettier-config-hd": "8.23.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Alert/index.tsx

@@ -11,6 +11,7 @@ import {
   TextContainer,
 } from './StyledAlert';
 import type { IconName } from '../Icon';
+import { useDeprecation } from '../../utils/hooks';
 
 const getIntentIcon = (
   intent: 'success' | 'info' | 'warning' | 'error' | 'notification'
@@ -84,6 +85,11 @@ const Alert = ({
   style,
   testID,
 }: AlertProps): JSX.Element => {
+  useDeprecation(
+    `Alert's notification intent is deprecated and will be removed in the next major release. Please use other intents instead.`,
+    intent === 'notification'
+  );
+
   return (
     <Container
       themeVariant={variant}

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

@@ -32,7 +32,7 @@ exports[`Empty renders empty state content correctly 1`] = `
             "color": "#001f23",
             "fontFamily": "RebondGrotesque-SemiBold",
             "fontSize": 24,
-            "marginBottom": 16,
+            "marginBottom": 8,
             "textAlign": "center",
           },
           undefined,
@@ -127,7 +127,7 @@ exports[`Empty renders empty state with image correctly 1`] = `
             "color": "#001f23",
             "fontFamily": "RebondGrotesque-SemiBold",
             "fontSize": 24,
-            "marginBottom": 16,
+            "marginBottom": 8,
             "textAlign": "center",
           },
           undefined,

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

@@ -35,7 +35,7 @@ exports[`Error renders error screen with custom image element correctly 1`] = `
         Array [
           Object {
             "height": 176,
-            "marginBottom": 32,
+            "marginBottom": 24,
             "width": 176,
           },
           undefined,
@@ -159,7 +159,7 @@ exports[`Error renders error screen with image correctly 1`] = `
         Array [
           Object {
             "height": 176,
-            "marginBottom": 32,
+            "marginBottom": 24,
             "width": 176,
           },
           undefined,
@@ -182,7 +182,7 @@ exports[`Error renders error screen with image correctly 1`] = `
             Array [
               Object {
                 "height": 176,
-                "marginBottom": 32,
+                "marginBottom": 24,
                 "resizeMode": "contain",
                 "width": 176,
               },
@@ -307,7 +307,7 @@ exports[`Error renders full screen error page correctly 1`] = `
           Array [
             Object {
               "height": 176,
-              "marginBottom": 32,
+              "marginBottom": 24,
               "width": 176,
             },
             undefined,
@@ -330,7 +330,7 @@ exports[`Error renders full screen error page correctly 1`] = `
               Array [
                 Object {
                   "height": 176,
-                  "marginBottom": 32,
+                  "marginBottom": 24,
                   "resizeMode": "contain",
                   "width": 176,
                 },

package/src/components/List/ListItem.tsx

@@ -1,21 +1,21 @@
 import React, { ReactElement } from 'react';
 
-import { View } from 'react-native';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+import { useTheme } from '../../theme';
+import type { IconName } from '../Icon';
 import Icon from '../Icon';
 import Typography from '../Typography';
 import {
-  StyledListItemContainer,
   StyledChildrenContainer,
-  StyledLeadingStatus,
   StyledContentContainer,
+  StyledLeadingStatus,
+  StyledListItemContainer,
   StyledPrefixContainer,
   StyledSuffixContainer,
   StyledTitleContainer,
 } from './StyledListItem';
-import type { IconName } from '../Icon';
-import { useTheme } from '../../theme';
 
 export interface ListItemProps {
   /**
@@ -123,9 +123,13 @@ const ListItem = ({
               </StyledPrefixContainer>
             )}
             <StyledTitleContainer>
-              <Typography.Text intent="body" fontSize="large">
-                {title}
-              </Typography.Text>
+              {typeof title === 'string' ? (
+                <Typography.Text intent="body" fontSize="large">
+                  {title}
+                </Typography.Text>
+              ) : (
+                title
+              )}
               {!!subtitle && (
                 <Typography.Text intent="subdued" fontSize="small">
                   {subtitle}

package/src/components/Success/StyledSuccess.tsx

@@ -0,0 +1,87 @@
+import styled from '@emotion/native';
+import { Modal, View } from 'react-native';
+import Image from '../Image';
+import Typography from '../Typography';
+import Button from '../Button';
+
+type SuccessVariant = 'full-screen' | 'in-page';
+
+const StyledSuccessContainer = styled(View)<{ themeVariant: SuccessVariant }>(
+  ({ theme, themeVariant }) => ({
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor:
+      themeVariant === 'in-page'
+        ? theme.__hd__.success.colors.inPageBackground
+        : theme.__hd__.success.colors.fullScreenBackground,
+  })
+);
+
+const StyledSuccessImage = styled(Image)(({ theme }) => ({
+  marginBottom: theme.__hd__.success.space.imageMarginBottom,
+  width: theme.__hd__.success.sizes.image,
+  height: theme.__hd__.success.sizes.image,
+  resizeMode: 'contain',
+}));
+
+const StyledSuccessContent = styled(View)(({ theme }) => ({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: theme.__hd__.success.space.wrapperPadding,
+}));
+
+const StyledSuccessImageContainer = styled(View)(({ theme }) => ({
+  marginBottom: theme.__hd__.success.space.imageMarginBottom,
+  width: theme.__hd__.success.sizes.image,
+  height: theme.__hd__.success.sizes.image,
+}));
+
+const StyledSuccessTitle = styled(Typography.Text)(({ theme }) => ({
+  fontFamily: theme.__hd__.success.fonts.title,
+  fontSize: theme.__hd__.success.fontSizes.title,
+  textAlign: 'center',
+  marginBottom: theme.__hd__.success.space.titleMarginBottom,
+  color: theme.__hd__.success.colors.title,
+}));
+
+const StyledSuccessDescription = styled(Typography.Text)(({ theme }) => ({
+  fontFamily: theme.__hd__.success.fonts.description,
+  fontSize: theme.__hd__.success.fontSizes.description,
+  textAlign: 'center',
+  color: theme.__hd__.success.colors.description,
+}));
+
+const StyledSuccessButtonContainer = styled(View)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  paddingHorizontal: theme.__hd__.success.space.button.wrapperHorizontalPadding,
+  paddingVertical: theme.__hd__.success.space.button.wrapperVerticalPadding,
+}));
+
+const StyledSuccessButtonPrimary = styled(Button)(({ theme }) => ({
+  padding: theme.__hd__.success.space.button.padding,
+}));
+
+const StyledSuccessModal = styled(Modal)({
+  height: '100%',
+  width: '100%',
+});
+
+export {
+  SuccessVariant,
+  StyledSuccessImage,
+  StyledSuccessContainer,
+  StyledSuccessContent,
+  StyledSuccessImageContainer,
+  StyledSuccessTitle,
+  StyledSuccessDescription,
+  StyledSuccessButtonContainer,
+  StyledSuccessButtonPrimary,
+  StyledSuccessModal,
+};