@hero-design/rn 8.75.0 → 8.76.1-alpha.0

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarMessage.spec.tsx.snap

@@ -0,0 +1,382 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToolbarMessage disabled renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "height": 64,
+          "justifyContent": "space-between",
+          "paddingHorizontal": 8,
+          "paddingVertical": 12,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-message"
+  >
+    <View
+      pointerEvents="none"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#f6f6f7",
+            "borderRadius": 999,
+            "flex": 1,
+            "flexDirection": "row",
+            "height": 40,
+            "paddingHorizontal": 12,
+            "paddingVertical": 8,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-input-container"
+    >
+      <TextInput
+        editable={true}
+        onChangeText={[MockFunction]}
+        placeholder="Message"
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ]
+        }
+        testID="toolbar-message-input"
+        value="Jisoo"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`ToolbarMessage filled renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "height": 64,
+          "justifyContent": "space-between",
+          "paddingHorizontal": 8,
+          "paddingVertical": 12,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-message"
+  >
+    <View
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#f6f6f7",
+            "borderRadius": 999,
+            "flex": 1,
+            "flexDirection": "row",
+            "height": 40,
+            "paddingHorizontal": 12,
+            "paddingVertical": 8,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-input-container"
+    >
+      <TextInput
+        editable={true}
+        placeholder="Message"
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ]
+        }
+        testID="toolbar-message-input"
+        value="Jennie Kim"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`ToolbarMessage idle renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "height": 64,
+          "justifyContent": "space-between",
+          "paddingHorizontal": 8,
+          "paddingVertical": 12,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-message"
+  >
+    <View
+      style={
+        [
+          {
+            "marginRight": 16,
+            "maxHeight": "100%",
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-prefix"
+    >
+      prefix
+    </View>
+    <View
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#f6f6f7",
+            "borderRadius": 999,
+            "flex": 1,
+            "flexDirection": "row",
+            "height": 40,
+            "paddingHorizontal": 12,
+            "paddingVertical": 8,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-input-container"
+    >
+      <TextInput
+        editable={true}
+        placeholder="Message"
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ]
+        }
+        testID="toolbar-message-input"
+      />
+    </View>
+    <View
+      style={
+        [
+          {
+            "marginLeft": 16,
+            "maxHeight": "100%",
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-suffix"
+    >
+      suffix
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`ToolbarMessage readonly renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "height": 64,
+          "justifyContent": "space-between",
+          "paddingHorizontal": 8,
+          "paddingVertical": 12,
+        },
+        undefined,
+      ]
+    }
+    testID="toolbar-message"
+  >
+    <View
+      pointerEvents="auto"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#f6f6f7",
+            "borderRadius": 999,
+            "flex": 1,
+            "flexDirection": "row",
+            "height": 40,
+            "paddingHorizontal": 12,
+            "paddingVertical": 8,
+          },
+          undefined,
+        ]
+      }
+      testID="toolbar-message-input-container"
+    >
+      <TextInput
+        editable={true}
+        onChangeText={[MockFunction]}
+        placeholder="Message"
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ]
+        }
+        testID="toolbar-message-input"
+        value="Lalisa"
+      />
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

package/src/components/Toolbar/index.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import { ViewProps } from 'react-native';
 import { ToolbarWrapper } from './StyledToolbar';
 import ToolbarGroup from './ToolbarGroup';
+import ToolbarMessage from './ToolbarMessage';
 
 export interface ToolbarProps extends Omit<ViewProps, 'style'> {
   /**
@@ -17,4 +18,5 @@ const Toolbar = ({ children, ...rest }: ToolbarProps) => (
 
 export default Object.assign(Toolbar, {
   Group: ToolbarGroup,
+  Message: ToolbarMessage,
 });

package/src/components/Typography/Body/__tests__/__snapshots__/StyledBody.tsx.snap

@@ -212,7 +212,7 @@ exports[`StyledBody has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 16,
           "letterSpacing": 0.48,

package/src/components/Typography/Body/__tests__/__snapshots__/index.spec.tsx.snap

@@ -370,7 +370,7 @@ exports[`Body has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 16,
           "letterSpacing": 0.48,
@@ -625,7 +625,7 @@ exports[`Body has secondary intent style 1`] = `
     style={
       [
         {
-          "color": "#795e90",
+          "color": "#B382FD",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 16,
           "letterSpacing": 0.48,

package/src/components/Typography/Caption/__tests__/__snapshots__/StyledCaption.spec.tsx.snap

@@ -208,7 +208,7 @@ exports[`StyledCaption has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 12,
           "letterSpacing": 0.36,

package/src/components/Typography/Caption/__tests__/__snapshots__/index.spec.tsx.snap

@@ -363,7 +363,7 @@ exports[`Caption has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -463,7 +463,7 @@ exports[`Caption has secondary intent style 1`] = `
     style={
       [
         {
-          "color": "#795e90",
+          "color": "#B382FD",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 12,
           "letterSpacing": 0.36,

package/src/components/Typography/Label/__tests__/__snapshots__/StyledLabel.tsx.snap

@@ -200,7 +200,7 @@ exports[`StyledLabel has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,

package/src/components/Typography/Label/__tests__/__snapshots__/index.spec.tsx.snap

@@ -349,7 +349,7 @@ exports[`Label has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -397,7 +397,7 @@ exports[`Label has secondary intent style 1`] = `
     style={
       [
         {
-          "color": "#795e90",
+          "color": "#B382FD",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -471,7 +471,7 @@ exports[`StyledText has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
           "letterSpacing": 0.42,

package/src/components/Typography/Title/__tests__/__snapshots__/StyledTitle.tsx.snap

@@ -812,7 +812,7 @@ exports[`StyledTitle has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 18,
           "letterSpacing": 0.48,

package/src/components/Typography/Title/__tests__/__snapshots__/index.spec.tsx.snap

@@ -982,7 +982,7 @@ exports[`Title has primary intent style 1`] = `
     style={
       [
         {
-          "color": "#401960",
+          "color": "#460078",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 42,
           "letterSpacing": 0,
@@ -1033,7 +1033,7 @@ exports[`Title has secondary intent style 1`] = `
     style={
       [
         {
-          "color": "#795e90",
+          "color": "#B382FD",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 42,
           "letterSpacing": 0,

package/src/theme/ThemeSwitcher.tsx

@@ -9,13 +9,21 @@ import {
   walletSystemPalette,
   eBensSystemPalette,
   swagDarkSystemPalette,
+  swagLightSystemPalette,
 } from './global';
 import ThemeProvider from './ThemeProvider';
 
-type ThemeName = 'swag' | 'swagDark' | 'work' | 'jobs' | 'wallet' | 'eBens';
+type ThemeName =
+  | 'swag'
+  | 'swagLight'
+  | 'swagDark'
+  | 'work'
+  | 'jobs'
+  | 'wallet'
+  | 'eBens';
 
 const ThemeSwitcher = ({
-  name = 'swag',
+  name = 'swagLight',
   children,
 }: {
   name?: ThemeName;
@@ -35,6 +43,8 @@ const ThemeSwitcher = ({
         return getTheme(defaultScale, eBensSystemPalette);
       case 'swagDark':
         return getTheme(defaultScale, swagDarkSystemPalette);
+      case 'swagLight':
+        return getTheme(defaultScale, swagLightSystemPalette);
     }
   }, [name]);
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;

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

@@ -1316,20 +1316,36 @@ exports[`theme returns correct theme object 1`] = `
         "error": "#f46363",
         "iconButtonBackground": "#ece8ef",
         "info": "#b5c3fd",
+        "inputContainerBackground": "#f6f6f7",
         "primary": "#401960",
         "secondary": "#4d6265",
         "success": "#5ace7d",
       },
+      "fontSizes": {
+        "text": 16,
+      },
+      "fonts": {
+        "text": "BeVietnamPro-Regular",
+      },
       "radii": {
         "iconButtonWrapperBorderRadius": 24,
+        "messageContainer": 999,
       },
       "sizes": {
         "itemWrapperHeight": 64,
+        "messageInputHeight": 40,
+        "messageWrapperHeight": 64,
       },
       "space": {
+        "affixInnerMargin": 16,
         "horizontalPadding": 8,
         "iconButtonLabelMarginLeft": 8,
         "iconButtonWrapperPadding": 12,
+        "messageInputPaddingHorizontal": 12,
+        "messageInputPaddingVertical": 8,
+        "messageWrapperMarginHorizontal": 8,
+        "messageWrapperPaddingHorizontal": 8,
+        "messageWrapperPaddingVertical": 12,
         "verticalPadding": 8,
       },
     },

package/src/theme/components/fab.ts

@@ -2,13 +2,13 @@ import type { GlobalTheme } from '../global';
 
 const getFABTheme = (theme: GlobalTheme) => {
   const colors = {
-    buttonBackground: theme.colors.primary,
-    buttonPressedBackground: theme.colors.pressedSurface,
-    buttonActiveBackground: theme.colors.pressedSurface,
+    buttonBackground: theme.colors.overlayGlobalSurface,
+    buttonPressedBackground: theme.colors.overlayGlobalSurface,
+    buttonActiveBackground: theme.colors.overlayGlobalSurface,
     icon: theme.colors.onPrimary,
-    actionItemBackground: theme.colors.secondary,
-    actionItemPressedBackground: theme.colors.pressedSurface,
-    backdropBackground: theme.colors.overlayGlobalSurface,
+    actionItemBackground: theme.colors.overlayGlobalSurface,
+    actionItemPressedBackground: theme.colors.overlayGlobalSurface,
+    backdropBackground: theme.colors.defaultSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary,
   };

package/src/theme/components/toolbar.ts

@@ -13,6 +13,7 @@ const getToolbarTheme = (theme: GlobalTheme) => {
     error: theme.colors.error,
     disabled: theme.colors.disabledOnDefaultGlobalSurface,
     iconButtonBackground: theme.colors.highlightedSurface,
+    inputContainerBackground: theme.colors.neutralGlobalSurface,
   };
 
   const space = {
@@ -20,6 +21,12 @@ const getToolbarTheme = (theme: GlobalTheme) => {
     horizontalPadding: theme.space.small,
     iconButtonLabelMarginLeft: theme.space.small,
     iconButtonWrapperPadding: theme.space.smallMedium,
+    messageWrapperMarginHorizontal: theme.space.small,
+    messageWrapperPaddingVertical: theme.space.smallMedium,
+    messageWrapperPaddingHorizontal: theme.space.small,
+    messageInputPaddingHorizontal: theme.space.smallMedium,
+    messageInputPaddingVertical: theme.space.small,
+    affixInnerMargin: theme.space.medium,
   };
 
   const borderWidths = {
@@ -28,13 +35,24 @@ const getToolbarTheme = (theme: GlobalTheme) => {
 
   const sizes = {
     itemWrapperHeight: scale(64),
+    messageWrapperHeight: scale(64),
+    messageInputHeight: 40,
   };
 
   const radii = {
     iconButtonWrapperBorderRadius: theme.radii.xxxlarge,
+    messageContainer: theme.radii.rounded,
   };
 
-  return { colors, space, borderWidths, sizes, radii };
+  const fontSizes = {
+    text: theme.fontSizes.large,
+  };
+
+  const fonts = {
+    text: theme.fonts.neutral.regular,
+  };
+
+  return { colors, space, borderWidths, sizes, radii, fontSizes, fonts };
 };
 
 export default getToolbarTheme;

package/src/theme/getTheme.ts

@@ -1,4 +1,4 @@
-import { getGlobalTheme, defaultScale, swagSystemPalette } from './global';
+import { getGlobalTheme, defaultScale, swagLightSystemPalette } from './global';
 
 import getAccordionTheme from './components/accordion';
 import getAlertTheme from './components/alert';
@@ -108,7 +108,7 @@ type Theme = GlobalTheme & {
 
 const getTheme = (
   scale: Scale = defaultScale,
-  systemPallete: SystemPalette = swagSystemPalette
+  systemPallete: SystemPalette = swagLightSystemPalette
 ): Theme => {
   const globalTheme = getGlobalTheme(scale, systemPallete);
   return {