@hero-design/rn 8.22.0-alpha.0 → 8.23.0

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

@@ -2692,6 +2692,271 @@ exports[`TextInput max length renders correctly 1`] = `
 </View>
 `;
 
+exports[`TextInput max length renders correctly with hide character count 1`] = `
+<View
+  pointerEvents="auto"
+  style={
+    Array [
+      Object {
+        "marginTop": 8,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#de350b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="text-input-border"
+      themeFocused={false}
+      themeVariant="error"
+    />
+    <View
+      pointerEvents="none"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "flexDirection": "row",
+            "left": 16,
+            "paddingHorizontal": 4,
+            "position": "absolute",
+            "top": -10,
+            "zIndex": 1,
+          },
+          Object {
+            "backgroundColor": "#ffffff",
+          },
+        ]
+      }
+      testID="label-container"
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#de350b",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="error"
+      >
+        *
+      </Text>
+      <Text
+        allowFontScaling={false}
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#001f23",
+              },
+              Object {
+                "backgroundColor": "#ffffff",
+              },
+            ],
+          ]
+        }
+        testID="input-label"
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="error"
+      >
+        Shout out
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "flexDirection": "row",
+            "flexGrow": 2,
+            "flexShrink": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <TextInput
+        accessibilityState={
+          Object {
+            "disabled": false,
+          }
+        }
+        allowFontScaling={false}
+        editable={true}
+        maxLength={255}
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        placeholder=" "
+        style={
+          Array [
+            Object {
+              "alignSelf": "stretch",
+              "flexGrow": 2,
+              "fontSize": 14,
+              "marginHorizontal": 8,
+              "paddingVertical": 0,
+              "textAlignVertical": "center",
+            },
+            Object {
+              "backgroundColor": "#ffffff",
+              "color": "#001f23",
+            },
+          ]
+        }
+        testID="text-input"
+        value="shout out Tung Van"
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "minHeight": 16,
+          "paddingLeft": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flex": 1,
+              "flexDirection": "row",
+              "flexGrow": 4,
+              "marginRight": 4,
+            },
+            undefined,
+          ]
+        }
+      >
+        <HeroIcon
+          name="circle-info"
+          style={
+            Array [
+              Object {
+                "color": "#de350b",
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="input-error-icon"
+          themeIntent="danger"
+          themeSize="xsmall"
+        />
+        <Text
+          allowFontScaling={false}
+          style={
+            Array [
+              Object {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Array [
+                Object {
+                  "color": "#de350b",
+                  "fontSize": 12,
+                  "marginLeft": 4,
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="input-error-message"
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeTypeface="neutral"
+        >
+          must not exceed character limit
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
 <View
   pointerEvents="auto"

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

@@ -250,6 +250,35 @@ describe('TextInput', () => {
 
       expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
     });
+
+    it('renders correctly with hide character count', () => {
+      const {
+        toJSON,
+        queryAllByTestId,
+        queryAllByText,
+        queryAllByDisplayValue,
+        getByTestId,
+      } = renderWithTheme(
+        <TextInput
+          label="Shout out"
+          value="shout out Tung Van"
+          required
+          maxLength={255}
+          multiline
+          error="must not exceed character limit"
+          hideCharacterCount
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByText('Shout out')).toHaveLength(1);
+      expect(queryAllByDisplayValue('shout out Tung Van')).toHaveLength(1);
+      expect(queryAllByText('18/255')).toHaveLength(0);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+
+      expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
+    });
   });
 
   describe('disabled', () => {

package/src/components/TextInput/index.tsx

@@ -94,6 +94,10 @@ export interface TextInputProps extends NativeTextInputProps {
    * If the max length is set, the input will display the current length and the max length.
    * */
   maxLength?: number;
+  /**
+   * Whether to hide the character count.
+   * */
+  hideCharacterCount?: boolean;
   /**
    * The helper text to display.
    */
@@ -157,6 +161,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       disabled = false,
       loading = false,
       maxLength,
+      hideCharacterCount = false,
       helpText,
       value,
       defaultValue,
@@ -181,7 +186,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       isEmptyValue,
     });
 
-    const shouldShowMaxLength = maxLength !== undefined;
+    const shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
 
     const theme = useTheme();
 

package/src/index.ts

@@ -46,6 +46,7 @@ import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
 import Select from './components/Select';
 import Skeleton from './components/Skeleton';
+import Success from './components/Success';
 import Switch from './components/Switch';
 import Tabs from './components/Tabs';
 import Tag from './components/Tag';
@@ -107,6 +108,7 @@ export {
   Radio,
   SectionHeading,
   Select,
+  Success,
   Switch,
   Tabs,
   Tag,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -417,7 +417,7 @@ Object {
       },
       "space": Object {
         "imageMargin": 24,
-        "titleMargin": 16,
+        "titleMargin": 8,
         "wrapperPadding": 16,
       },
     },
@@ -446,7 +446,7 @@ Object {
           "wrapperHorizontalPadding": 16,
           "wrapperVerticalPadding": 48,
         },
-        "imageMarginBottom": 32,
+        "imageMarginBottom": 24,
         "titleMarginBottom": 8,
         "wrapperPadding": 24,
       },
@@ -461,6 +461,7 @@ Object {
         "buttonPressedBackground": "#664780",
         "headerText": "#001f23",
         "icon": "#ffffff",
+        "shadow": "#001f23",
         "titleText": "#ffffff",
       },
       "fontSizes": Object {
@@ -482,6 +483,15 @@ Object {
       "radii": Object {
         "actionItem": 999,
       },
+      "shadows": Object {
+        "elevation": 2,
+        "offset": Object {
+          "height": 2,
+          "width": 0,
+        },
+        "opacity": 0.12,
+        "radius": 8,
+      },
       "sizes": Object {
         "height": 64,
         "width": 64,
@@ -783,6 +793,36 @@ Object {
         },
       },
     },
+    "success": Object {
+      "colors": Object {
+        "description": "#4d6265",
+        "fullScreenBackground": "#ccd2d3",
+        "inPageBackground": "#f6f6f7",
+        "title": "#001f23",
+      },
+      "fontSizes": Object {
+        "description": 18,
+        "title": 24,
+      },
+      "fonts": Object {
+        "description": "RebondGrotesque",
+        "title": "RebondGrotesque-SemiBold",
+      },
+      "sizes": Object {
+        "image": 176,
+      },
+      "space": Object {
+        "button": Object {
+          "margin": 16,
+          "padding": 16,
+          "wrapperHorizontalPadding": 16,
+          "wrapperVerticalPadding": 48,
+        },
+        "imageMarginBottom": 32,
+        "titleMarginBottom": 8,
+        "wrapperPadding": 24,
+      },
+    },
     "swipeable": Object {
       "colors": Object {
         "danger": "#f46363",
@@ -864,7 +904,7 @@ Object {
         "dangerBackground": "#fcebe7",
         "info": "#4568fb",
         "infoBackground": "#ecf0ff",
-        "primary": "#401960",
+        "primary": "#001f23",
         "primaryBackground": undefined,
         "success": "#017d6d",
         "successBackground": "#f0fef4",

package/src/theme/components/empty.ts

@@ -2,7 +2,7 @@ import type { GlobalTheme } from '../global';
 
 const getEmptyTheme = (theme: GlobalTheme) => {
   const space = {
-    titleMargin: theme.space.medium,
+    titleMargin: theme.space.small,
     imageMargin: theme.space.large,
     wrapperPadding: theme.space.medium,
   };

package/src/theme/components/error.ts

@@ -3,7 +3,7 @@ import type { GlobalTheme } from '../global';
 const getErrorTheme = (theme: GlobalTheme) => {
   const space = {
     titleMarginBottom: theme.space.small,
-    imageMarginBottom: theme.space.xlarge,
+    imageMarginBottom: theme.space.large,
     wrapperPadding: theme.space.large,
     button: {
       wrapperHorizontalPadding: theme.space.medium,

package/src/theme/components/fab.ts

@@ -11,6 +11,7 @@ const getFABTheme = (theme: GlobalTheme) => {
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary,
+    shadow: theme.colors.primaryOutline,
   };
 
   const sizes = {
@@ -37,6 +38,13 @@ const getFABTheme = (theme: GlobalTheme) => {
     icon: theme.lineHeights.large,
   };
 
+  const shadows = {
+    offset: { width: 0, height: 2 },
+    opacity: 0.12,
+    radius: theme.radii.medium,
+    elevation: 2,
+  };
+
   const space = {
     actionItemPaddingLeft: theme.space.medium,
     actionItemPaddingRight: theme.space.medium,
@@ -58,7 +66,16 @@ const getFABTheme = (theme: GlobalTheme) => {
     actionItem: theme.radii.rounded,
   };
 
-  return { radii, fonts, fontSizes, colors, sizes, lineHeights, space };
+  return {
+    radii,
+    fonts,
+    fontSizes,
+    colors,
+    sizes,
+    lineHeights,
+    shadows,
+    space,
+  };
 };
 
 export default getFABTheme;

package/src/theme/components/success.ts

@@ -0,0 +1,40 @@
+import type { GlobalTheme } from '../global';
+
+const getSuccessTheme = (theme: GlobalTheme) => {
+  const space = {
+    titleMarginBottom: theme.space.small,
+    imageMarginBottom: theme.space.xlarge,
+    wrapperPadding: theme.space.large,
+    button: {
+      wrapperHorizontalPadding: theme.space.medium,
+      wrapperVerticalPadding: theme.space.xxxlarge,
+      margin: theme.space.medium,
+      padding: theme.space.medium,
+    },
+  };
+
+  const sizes = {
+    image: theme.sizes['19xlarge'],
+  };
+
+  const colors = {
+    title: theme.colors.onDefaultGlobalSurface,
+    description: theme.colors.mutedOnDefaultGlobalSurface,
+    fullScreenBackground: theme.colors.decorativePrimarySurface,
+    inPageBackground: theme.colors.neutralGlobalSurface,
+  };
+
+  const fontSizes = {
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge,
+  };
+
+  const fonts = {
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular,
+  };
+
+  return { fontSizes, colors, sizes, space, fonts };
+};
+
+export default getSuccessTheme;

package/src/theme/components/tag.ts

@@ -6,7 +6,7 @@ const getTagTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    primary: theme.colors.primary,
+    primary: theme.colors.onDefaultGlobalSurface,
     primaryBackground: undefined,
     info: theme.colors.onInfoSurface,
     infoBackground: theme.colors.infoSurface,

package/src/theme/getTheme.ts

@@ -34,6 +34,7 @@ import getSelectTheme from './components/select';
 import getSkeletonTheme from './components/skeleton';
 import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
+import getSuccessTheme from './components/success';
 import getSwipeableTheme from './components/swipeable';
 import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
@@ -82,6 +83,7 @@ type Theme = GlobalTheme & {
     skeleton: ReturnType<typeof getSkeletonTheme>;
     slider: ReturnType<typeof getSliderTheme>;
     spinner: ReturnType<typeof getSpinnerTheme>;
+    success: ReturnType<typeof getSuccessTheme>;
     swipeable: ReturnType<typeof getSwipeableTheme>;
     switch: ReturnType<typeof getSwitchTheme>;
     tabs: ReturnType<typeof getTabsTheme>;
@@ -136,6 +138,7 @@ const getTheme = (
       skeleton: getSkeletonTheme(globalTheme),
       slider: getSliderTheme(globalTheme),
       spinner: getSpinnerTheme(globalTheme),
+      success: getSuccessTheme(globalTheme),
       swipeable: getSwipeableTheme(globalTheme),
       switch: getSwitchTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),

package/src/theme/global/colors/__tests__/__snapshots__/globalDark.spec.ts.snap

@@ -2,38 +2,38 @@
 
 exports[`globalDark returns correct theme object 1`] = `
 Object {
-  "archived": "#abacaf",
-  "archivedSurface": "#f1f2f3",
+  "archived": "#68686d",
+  "archivedSurface": "#344348",
   "darkGlobalSurface": "#ffffff",
   "defaultGlobalSurface": "#001f23",
   "disabledOnDefaultGlobalSurface": "#82858a",
   "disabledOutline": "#82858a",
-  "error": "#f46363",
-  "errorSurface": "#fcebe7",
+  "error": "#c8300a",
+  "errorSurface": "#6f2a17",
   "inactiveOnDefaultGlobalSurface": "#99a5a7",
   "inactiveOutline": "#99a5a7",
-  "info": "#b5c3fd",
-  "infoSurface": "#ecf0ff",
-  "mutedArchived": "#bcbdbf",
-  "mutedError": "#f68282",
-  "mutedInfo": "#c4cffd",
+  "info": "#3e5ee2",
+  "infoSurface": "#23438f",
+  "mutedArchived": "#b2b3b5",
+  "mutedError": "#e55d3c",
+  "mutedInfo": "#6a86fc",
   "mutedOnDefaultGlobalSurface": "#b3bcbd",
-  "mutedSuccess": "#7bd897",
-  "mutedWarning": "#ffcb8d",
+  "mutedSuccess": "#34978a",
+  "mutedWarning": "#b7864e",
   "neutralGlobalSurface": "#264144",
-  "onArchivedSurface": "#737479",
+  "onArchivedSurface": "#acacaf",
   "onDarkGlobalSurface": "#001f23",
   "onDefaultGlobalSurface": "#ffffff",
-  "onErrorSurface": "#de350b",
-  "onInfoSurface": "#4568fb",
-  "onSuccessSurface": "#017d6d",
+  "onErrorSurface": "#f89076",
+  "onInfoSurface": "#a1b5fc",
+  "onSuccessSurface": "#01cbb0",
   "onWarningSurface": "#ffa234",
   "overlayGlobalSurface": "#727478",
   "primaryOutline": "#ffffff",
   "secondaryOutline": "#193539",
-  "success": "#5ace7d",
-  "successSurface": "#f0fef4",
-  "warning": "#ffbe71",
-  "warningSurface": "#fff6eb",
+  "success": "#017162",
+  "successSurface": "#004e48",
+  "warning": "#a56822",
+  "warningSurface": "#4d4628",
 }
 `;