@hero-design/rn 7.25.1 → 7.27.0

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -87,6 +87,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
       themeFontSize="medium"
       themeFontWeight="regular"
       themeIntent="body"
+      themeTypeface="neutral"
     >
       Move to Work
     </Text>
@@ -283,6 +284,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     themeFontSize="medium"
                     themeFontWeight="semi-bold"
                     themeIntent="body"
+                    themeTypeface="neutral"
                   >
                     Work
                   </Text>

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

@@ -87,6 +87,7 @@ exports[`Tabs renders correctly 1`] = `
       themeFontSize="medium"
       themeFontWeight="regular"
       themeIntent="body"
+      themeTypeface="neutral"
     >
       Move to Work
     </Text>
@@ -175,6 +176,7 @@ exports[`Tabs renders correctly 1`] = `
                 themeFontSize="medium"
                 themeFontWeight="semi-bold"
                 themeIntent="body"
+                themeTypeface="neutral"
               >
                 Work
               </Text>
@@ -221,6 +223,7 @@ exports[`Tabs renders correctly 1`] = `
                 themeFontSize="medium"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeTypeface="neutral"
               >
                 Personal
               </Text>
@@ -274,6 +277,7 @@ exports[`Tabs renders correctly 1`] = `
                 themeFontSize="medium"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeTypeface="neutral"
               >
                 Home
               </Text>
@@ -352,6 +356,7 @@ exports[`Tabs renders correctly 1`] = `
                 themeFontSize="medium"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeTypeface="neutral"
               >
                 Wallet
               </Text>

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

@@ -87,7 +87,7 @@ describe('Tabs', () => {
 
   it('renders correctly with lazy preloaded', () => {
     const { getByText, queryByText } = renderWithTheme(
-      <TestTabsComponent lazy lazyPreloadDistance={1} />
+      <TestTabsComponent lazy lazyPreloadDistance={1} swipeEnabled={false} />
     );
 
     expect(getByText('Work Screen')).toBeDefined();

package/src/components/Tabs/index.tsx

@@ -67,6 +67,11 @@ export interface TabsProps extends ViewProps {
    * Defaults value is `1`.
    */
   lazyPreloadDistance?: number;
+  /**
+   * Boolean indicating whether to enable swipe gestures. Passing `false` will disable swipe gestures, but the user can still switch tabs by pressing the tab bar.
+   * Defaults value is `true`.
+   */
+  swipeEnabled?: boolean;
   /**
    * Testing id of the component.
    */
@@ -105,6 +110,7 @@ const Tabs = ({
   barStyle,
   lazy = false,
   lazyPreloadDistance = 1,
+  swipeEnabled = true,
   testID: componentTestID,
 }: TabsProps): JSX.Element => {
   const theme = useTheme();
@@ -207,6 +213,7 @@ const Tabs = ({
             useNativeDriver: true,
           }
         )}
+        scrollEnabled={swipeEnabled}
       >
         {tabs.map((tab, index) => {
           const { key, component, testID } = tab;

package/src/components/Tag/StyledTag.tsx

@@ -1,5 +1,6 @@
 import { View, Text } from 'react-native';
 import styled from '@emotion/native';
+import { Theme } from '../../theme';
 
 type ThemeIntent =
   | 'default'
@@ -10,26 +11,56 @@ type ThemeIntent =
   | 'danger'
   | 'archived';
 
-const StyledView = styled(View)<{ themeIntent: ThemeIntent }>(
-  ({ themeIntent, theme }) => ({
+type ThemeVariant = 'filled' | 'outlined';
+
+const getFilledStyles = (themeIntent: ThemeIntent, theme: Theme) => ({
+  textColor: theme.__hd__.tag.colors.text,
+  borderColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
+  backgroundColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
+});
+
+const getOutlinedStyles = (themeIntent: ThemeIntent, theme: Theme) => ({
+  textColor: theme.__hd__.tag.colors[themeIntent],
+  borderColor: theme.__hd__.tag.colors[themeIntent],
+  backgroundColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
+});
+
+const StyledView = styled(View)<{
+  themeIntent: ThemeIntent;
+  themeVariant: ThemeVariant;
+}>(({ themeIntent, themeVariant, theme }) => {
+  const { borderColor, backgroundColor } =
+    themeVariant === 'filled'
+      ? getFilledStyles(themeIntent, theme)
+      : getOutlinedStyles(themeIntent, theme);
+
+  return {
     borderWidth: theme.__hd__.tag.borderWidths.default,
     borderRadius: theme.__hd__.tag.radii.default,
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
     paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
-    borderColor: theme.__hd__.tag.colors[themeIntent],
-    backgroundColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
-  })
-);
+    borderColor,
+    backgroundColor,
+  };
+});
+
+const StyledText = styled(Text)<{
+  themeIntent: ThemeIntent;
+  themeVariant: ThemeVariant;
+}>(({ themeIntent, themeVariant, theme }) => {
+  const { textColor } =
+    themeVariant === 'filled'
+      ? getFilledStyles(themeIntent, theme)
+      : getOutlinedStyles(themeIntent, theme);
 
-const StyledText = styled(Text)<{ themeIntent: ThemeIntent }>(
-  ({ themeIntent, theme }) => ({
+  return {
     fontFamily: theme.__hd__.tag.fonts.default,
     fontSize: theme.__hd__.tag.fontSizes.default,
-    color: theme.__hd__.tag.colors[themeIntent],
+    color: textColor,
     includeFontPadding: false,
     textAlignVertical: 'center',
     textAlign: 'center',
-  })
-);
+  };
+});
 
 export { StyledView, StyledText };

package/src/components/Tag/__tests__/Tag.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Tag from '..';
+import Typography from '../../Typography';
 
 describe('Tag', () => {
   it('has success style when intent is success', () => {
@@ -65,4 +66,31 @@ describe('Tag', () => {
     expect(toJSON()).toMatchSnapshot();
     expect(getByText('PRIMARY')).toBeDefined();
   });
+
+  it('renders correctly when variant is filled and intent is warning', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Tag content="WARNING" intent="warning" variant="filled" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('WARNING')).toBeDefined();
+  });
+
+  it('renders correctly when variant is filled and intent is danger', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Tag content="DANGER" intent="danger" variant="filled" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('DANGER')).toBeDefined();
+  });
+
+  it('renders correctly with custom content', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Tag content={<Typography.Text>Custom Content</Typography.Text>} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Custom Content')).toBeDefined();
+  });
 });

package/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap

@@ -16,6 +16,7 @@ exports[`Tag has archived style when intent is archived 1`] = `
     ]
   }
   themeIntent="archived"
+  themeVariant="outlined"
 >
   <Text
     style={
@@ -32,6 +33,7 @@ exports[`Tag has archived style when intent is archived 1`] = `
       ]
     }
     themeIntent="archived"
+    themeVariant="outlined"
   >
     ARCHIVED
   </Text>
@@ -54,6 +56,7 @@ exports[`Tag has archived style when intent is primary 1`] = `
     ]
   }
   themeIntent="primary"
+  themeVariant="outlined"
 >
   <Text
     style={
@@ -70,6 +73,7 @@ exports[`Tag has archived style when intent is primary 1`] = `
       ]
     }
     themeIntent="primary"
+    themeVariant="outlined"
   >
     PRIMARY
   </Text>
@@ -92,6 +96,7 @@ exports[`Tag has danger style when intent is danger 1`] = `
     ]
   }
   themeIntent="danger"
+  themeVariant="outlined"
 >
   <Text
     style={
@@ -108,6 +113,7 @@ exports[`Tag has danger style when intent is danger 1`] = `
       ]
     }
     themeIntent="danger"
+    themeVariant="outlined"
   >
     DANGER
   </Text>
@@ -130,6 +136,7 @@ exports[`Tag has default style when intent is default 1`] = `
     ]
   }
   themeIntent="default"
+  themeVariant="outlined"
 >
   <Text
     style={
@@ -146,6 +153,7 @@ exports[`Tag has default style when intent is default 1`] = `
       ]
     }
     themeIntent="default"
+    themeVariant="outlined"
   >
     DEFAULT
   </Text>
@@ -168,6 +176,7 @@ exports[`Tag has info style when intent is info 1`] = `
     ]
   }
   themeIntent="info"
+  themeVariant="outlined"
 >
   <Text
     style={
@@ -184,6 +193,7 @@ exports[`Tag has info style when intent is info 1`] = `
       ]
     }
     themeIntent="info"
+    themeVariant="outlined"
   >
     INFO
   </Text>
@@ -206,6 +216,7 @@ exports[`Tag has success style when intent is success 1`] = `
     ]
   }
   themeIntent="success"
+  themeVariant="outlined"
 >
   <Text
     style={
@@ -222,6 +233,7 @@ exports[`Tag has success style when intent is success 1`] = `
       ]
     }
     themeIntent="success"
+    themeVariant="outlined"
   >
     SUCCESS
   </Text>
@@ -244,6 +256,7 @@ exports[`Tag has warning style when intent is warning 1`] = `
     ]
   }
   themeIntent="warning"
+  themeVariant="outlined"
 >
   <Text
     style={
@@ -260,8 +273,130 @@ exports[`Tag has warning style when intent is warning 1`] = `
       ]
     }
     themeIntent="warning"
+    themeVariant="outlined"
   >
     WARNING
   </Text>
 </View>
 `;
+
+exports[`Tag renders correctly when variant is filled and intent is danger 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#fcebe7",
+        "borderColor": "#fcebe7",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="danger"
+  themeVariant="filled"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="danger"
+    themeVariant="filled"
+  >
+    DANGER
+  </Text>
+</View>
+`;
+
+exports[`Tag renders correctly when variant is filled and intent is warning 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#fff6eb",
+        "borderColor": "#fff6eb",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="warning"
+  themeVariant="filled"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="warning"
+    themeVariant="filled"
+  >
+    WARNING
+  </Text>
+</View>
+`;
+
+exports[`Tag renders correctly with custom content 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": undefined,
+        "borderColor": "#401960",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="primary"
+  themeVariant="outlined"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Custom Content
+  </Text>
+</View>
+`;

package/src/components/Tag/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledView, StyledText } from './StyledTag';
 
@@ -6,7 +6,7 @@ interface TagProps extends ViewProps {
   /**
    * Content of the Tag.
    */
-  content: string;
+  content: string | ReactElement;
   /**
    * Visual intent color to apply to Tag.
    */
@@ -18,6 +18,10 @@ interface TagProps extends ViewProps {
     | 'warning'
     | 'danger'
     | 'archived';
+  /**
+   * Tag variant.
+   */
+  variant?: 'filled' | 'outlined';
   /**
    * Additional style.
    */
@@ -30,6 +34,7 @@ interface TagProps extends ViewProps {
 
 const Tag = ({
   content,
+  variant = 'outlined',
   intent = 'primary',
   style,
   testID,
@@ -38,10 +43,17 @@ const Tag = ({
   <StyledView
     {...nativeProps}
     themeIntent={intent}
+    themeVariant={variant}
     style={style}
     testID={testID}
   >
-    <StyledText themeIntent={intent}>{content}</StyledText>
+    {typeof content === 'string' ? (
+      <StyledText themeIntent={intent} themeVariant={variant}>
+        {content}
+      </StyledText>
+    ) : (
+      content
+    )}
   </StyledView>
 );
 

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

@@ -22,6 +22,7 @@ exports[`Label renders correctly with themeVariant default 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="default"
 >
   Label
@@ -50,6 +51,7 @@ exports[`Label renders correctly with themeVariant disabled 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="disabled"
 >
   Label
@@ -78,6 +80,7 @@ exports[`Label renders correctly with themeVariant error 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="error"
 >
   Label
@@ -106,6 +109,7 @@ exports[`Label renders correctly with themeVariant filled 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="filled"
 >
   Label
@@ -134,6 +138,7 @@ exports[`Label renders correctly with themeVariant readonly 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="readonly"
 >
   Label
@@ -185,6 +190,7 @@ exports[`LabelInsideTextInput renders correctly with themeVariant default 1`] =
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="default"
 >
   Label
@@ -217,6 +223,7 @@ exports[`LabelInsideTextInput renders correctly with themeVariant disabled 1`] =
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="disabled"
 >
   Label
@@ -249,6 +256,7 @@ exports[`LabelInsideTextInput renders correctly with themeVariant error 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="error"
 >
   Label
@@ -281,6 +289,7 @@ exports[`LabelInsideTextInput renders correctly with themeVariant filled 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="filled"
 >
   Label
@@ -313,6 +322,7 @@ exports[`LabelInsideTextInput renders correctly with themeVariant readonly 1`] =
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="readonly"
 >
   Label
@@ -341,6 +351,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant default 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="default"
 >
   *
@@ -369,6 +380,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant disabled 1`] =
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="disabled"
 >
   *
@@ -397,6 +409,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant error 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="error"
 >
   *
@@ -425,6 +438,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant filled 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="filled"
 >
   *
@@ -453,6 +467,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant readonly 1`] =
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="readonly"
 >
   *
@@ -615,6 +630,7 @@ exports[`StyledErrorMessage renders correctly 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
 >
   must not exceed character limit
 </Text>
@@ -665,6 +681,7 @@ exports[`StyledHelperText renders correctly 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
 >
   helper text
 </Text>
@@ -698,6 +715,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant default 1`]
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="default"
 >
   100/255
@@ -732,6 +750,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant disabled 1`]
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="disabled"
 >
   100/255
@@ -766,6 +785,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant error 1`] =
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="error"
 >
   100/255
@@ -800,6 +820,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant filled 1`] =
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="filled"
 >
   100/255
@@ -834,6 +855,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant readonly 1`]
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="readonly"
 >
   100/255