@hero-design/rn 8.84.3 → 8.86.0

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/index.spec.tsx.snap

@@ -540,6 +540,141 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-secondar
 </View>
 `;
 
+exports[`LoadingIndicator renders correctly when themeVariant is filled-white 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "justifyContent": "center",
+        },
+        {},
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        size={12}
+        style={
+          [
+            {
+              "backgroundColor": "#401960",
+              "borderRadius": 8,
+              "height": 12,
+              "marginHorizontal": 8,
+              "width": 12,
+            },
+            {},
+          ]
+        }
+        themeVariant="filled-white"
+      />
+    </View>
+    <View
+      collapsable={false}
+      style={
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        size={12}
+        style={
+          [
+            {
+              "backgroundColor": "#401960",
+              "borderRadius": 8,
+              "height": 12,
+              "marginHorizontal": 8,
+              "width": 12,
+            },
+            {},
+          ]
+        }
+        themeVariant="filled-white"
+      />
+    </View>
+    <View
+      collapsable={false}
+      style={
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        size={12}
+        style={
+          [
+            {
+              "backgroundColor": "#401960",
+              "borderRadius": 8,
+              "height": 12,
+              "marginHorizontal": 8,
+              "width": 12,
+            },
+            {},
+          ]
+        }
+        themeVariant="filled-white"
+      />
+    </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[`LoadingIndicator renders correctly when themeVariant is outlined-danger 1`] = `
 <View
   style={
@@ -945,6 +1080,141 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
 </View>
 `;
 
+exports[`LoadingIndicator renders correctly when themeVariant is outlined-white 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "justifyContent": "center",
+        },
+        {},
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        size={12}
+        style={
+          [
+            {
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
+              "height": 12,
+              "marginHorizontal": 8,
+              "width": 12,
+            },
+            {},
+          ]
+        }
+        themeVariant="outlined-white"
+      />
+    </View>
+    <View
+      collapsable={false}
+      style={
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        size={12}
+        style={
+          [
+            {
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
+              "height": 12,
+              "marginHorizontal": 8,
+              "width": 12,
+            },
+            {},
+          ]
+        }
+        themeVariant="outlined-white"
+      />
+    </View>
+    <View
+      collapsable={false}
+      style={
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        size={12}
+        style={
+          [
+            {
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
+              "height": 12,
+              "marginHorizontal": 8,
+              "width": 12,
+            },
+            {},
+          ]
+        }
+        themeVariant="outlined-white"
+      />
+    </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[`LoadingIndicator renders correctly when themeVariant is text-danger 1`] = `
 <View
   style={
@@ -1254,7 +1524,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
         style={
           [
             {
-              "backgroundColor": "#4d6265",
+              "backgroundColor": "#cb300a",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1284,7 +1554,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
         style={
           [
             {
-              "backgroundColor": "#4d6265",
+              "backgroundColor": "#cb300a",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1314,7 +1584,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
         style={
           [
             {
-              "backgroundColor": "#4d6265",
+              "backgroundColor": "#cb300a",
               "borderRadius": 8,
               "height": 12,
               "marginHorizontal": 8,
@@ -1349,3 +1619,138 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
   />
 </View>
 `;
+
+exports[`LoadingIndicator renders correctly when themeVariant is text-white 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "justifyContent": "center",
+        },
+        {},
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        size={12}
+        style={
+          [
+            {
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
+              "height": 12,
+              "marginHorizontal": 8,
+              "width": 12,
+            },
+            {},
+          ]
+        }
+        themeVariant="text-white"
+      />
+    </View>
+    <View
+      collapsable={false}
+      style={
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        size={12}
+        style={
+          [
+            {
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
+              "height": 12,
+              "marginHorizontal": 8,
+              "width": 12,
+            },
+            {},
+          ]
+        }
+        themeVariant="text-white"
+      />
+    </View>
+    <View
+      collapsable={false}
+      style={
+        {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        size={12}
+        style={
+          [
+            {
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
+              "height": 12,
+              "marginHorizontal": 8,
+              "width": 12,
+            },
+            {},
+          ]
+        }
+        themeVariant="text-white"
+      />
+    </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/Button/LoadingIndicator/__tests__/index.spec.tsx

@@ -10,12 +10,15 @@ describe('LoadingIndicator', () => {
     ${'filled-primary'}
     ${'filled-secondary'}
     ${'filled-danger'}
+    ${'filled-white'}
     ${'outlined-primary'}
     ${'outlined-secondary'}
     ${'outlined-danger'}
+    ${'outlined-white'}
     ${'text-primary'}
     ${'text-secondary'}
     ${'text-danger'}
+    ${'text-white'}
   `(
     'renders correctly when themeVariant is $themeVariant',
     ({ themeVariant }) => {

package/src/components/Button/LoadingIndicator/index.tsx

@@ -11,12 +11,15 @@ type ThemeVariant =
   | 'filled-primary'
   | 'filled-secondary'
   | 'filled-danger'
+  | 'filled-white'
   | 'outlined-primary'
   | 'outlined-secondary'
   | 'outlined-danger'
+  | 'outlined-white'
   | 'text-primary'
   | 'text-secondary'
-  | 'text-danger';
+  | 'text-danger'
+  | 'text-white';
 
 const AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(
   StyledLoadingIndicatorWrapper

package/src/components/Button/StyledButton.tsx

@@ -6,18 +6,21 @@ import Icon from '../Icon';
 import Typography from '../Typography';
 import { scale } from '../../utils/scale';
 
-type Intent = 'primary' | 'secondary' | 'danger';
+type Intent = 'primary' | 'secondary' | 'danger' | 'white';
 
 type ThemeVariant =
   | 'filled-primary'
   | 'filled-secondary'
   | 'filled-danger'
+  | 'filled-white'
   | 'outlined-primary'
   | 'outlined-secondary'
   | 'outlined-danger'
+  | 'outlined-white'
   | 'text-primary'
   | 'text-secondary'
-  | 'text-danger';
+  | 'text-danger'
+  | 'text-white';
 
 const getButtonHeight = (themeIsCompact: boolean) => {
   switch (themeIsCompact) {
@@ -172,6 +175,14 @@ const StyledButtonContainer = styled(TouchableHighlight)<{
           loading,
           themeIsCompact
         );
+      case 'filled-white':
+        return genFilledContainerStyles(
+          theme,
+          'white',
+          disabled,
+          loading,
+          themeIsCompact
+        );
       case 'outlined-primary':
         return genOutlineContainerStyles(
           theme,
@@ -196,9 +207,18 @@ const StyledButtonContainer = styled(TouchableHighlight)<{
           loading,
           themeIsCompact
         );
+      case 'outlined-white':
+        return genOutlineContainerStyles(
+          theme,
+          'white',
+          disabled,
+          loading,
+          themeIsCompact
+        );
       case 'text-primary':
       case 'text-secondary':
       case 'text-danger':
+      case 'text-white':
         return {
           height: themeInlineText ? undefined : getButtonHeight(themeIsCompact),
           borderRadius: theme.__hd__.button.radii.text,
@@ -212,7 +232,7 @@ const StyledButtonContainer = styled(TouchableHighlight)<{
 
           borderWidth: 0,
           backgroundColor:
-            loading && !themeInlineText
+            loading && !themeInlineText && themeButtonVariant !== 'text-white'
               ? theme.__hd__.button.colors.textLoadingBackground
               : 'transparent',
         };
@@ -220,6 +240,47 @@ const StyledButtonContainer = styled(TouchableHighlight)<{
   }
 );
 
+const genWhiteTextStyles = ({
+  variant,
+  disabled,
+  theme,
+}: {
+  variant: ThemeVariant;
+  disabled?: boolean;
+  theme: Theme;
+}) => {
+  if (disabled) {
+    switch (variant) {
+      case 'filled-white': {
+        return {
+          color: theme.__hd__.button.colors.invertedText,
+        };
+      }
+      case 'outlined-white':
+      case 'text-white': {
+        return {
+          color: theme.__hd__.button.colors.disabledText,
+        };
+      }
+    }
+  }
+
+  switch (variant) {
+    case 'filled-white': {
+      return {
+        color: theme.__hd__.button.colors.primary,
+      };
+    }
+
+    case 'outlined-white':
+    case 'text-white': {
+      return {
+        color: theme.__hd__.button.colors.invertedText,
+      };
+    }
+  }
+};
+
 const StyledButtonText = styled(Typography.Title)<{
   disabled?: boolean;
   themeButtonVariant: ThemeVariant;
@@ -238,12 +299,21 @@ const StyledButtonText = styled(Typography.Title)<{
         return genTextStyles(theme, 'secondary', disabled);
       case 'outlined-danger':
         return genTextStyles(theme, 'danger', disabled);
+
       case 'text-primary':
         return genTextStyles(theme, 'primary', disabled);
       case 'text-secondary':
         return genTextStyles(theme, 'secondary', disabled);
       case 'text-danger':
         return genTextStyles(theme, 'danger', disabled);
+      case 'filled-white':
+      case 'outlined-white':
+      case 'text-white':
+        return genWhiteTextStyles({
+          variant: themeButtonVariant,
+          disabled,
+          theme,
+        });
     }
   };
   return {
@@ -257,7 +327,11 @@ const StyledSmallButtonText = StyledButtonText.withComponent(Typography.Body);
 
 const StyledButtonTitleOfVariantText = styled(Typography.Body)<{
   disabled?: boolean;
-  themeButtonVariant: 'text-primary' | 'text-secondary' | 'text-danger';
+  themeButtonVariant:
+    | 'text-primary'
+    | 'text-secondary'
+    | 'text-danger'
+    | 'text-white';
   themeIsPressed?: boolean;
 }>(({ disabled, themeButtonVariant, themeIsPressed, theme }) => {
   const themeStyling = () => {
@@ -268,6 +342,12 @@ const StyledButtonTitleOfVariantText = styled(Typography.Body)<{
         return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
       case 'text-danger':
         return genTextStyles(theme, 'danger', disabled, themeIsPressed);
+      case 'text-white':
+        return genWhiteTextStyles({
+          variant: 'text-white',
+          disabled,
+          theme,
+        });
     }
   };
   return {
@@ -310,7 +390,9 @@ const StyledButtonIcon = styled(Icon)<{
         case 'filled-primary':
         case 'filled-secondary':
         case 'filled-danger':
-          return { color: theme.__hd__.button.colors.invertedText };
+          return {
+            color: theme.__hd__.button.colors.invertedText,
+          };
         case 'outlined-primary':
           return genTextStyles(theme, 'primary', disabled);
         case 'outlined-secondary':
@@ -323,6 +405,14 @@ const StyledButtonIcon = styled(Icon)<{
           return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
         case 'text-danger':
           return genTextStyles(theme, 'danger', disabled, themeIsPressed);
+        case 'filled-white':
+        case 'outlined-white':
+        case 'text-white':
+          return genWhiteTextStyles({
+            variant: themeButtonVariant,
+            disabled,
+            theme,
+          });
       }
     };
 

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

@@ -112,9 +112,15 @@ describe('Button', () => {
     ${'filled'}           | ${'primary'}   | ${false} | ${false}
     ${'filled'}           | ${'primary'}   | ${true}  | ${false}
     ${'filled'}           | ${'primary'}   | ${false} | ${true}
+    ${'filled'}           | ${'white'}     | ${false} | ${false}
+    ${'filled'}           | ${'white'}     | ${true}  | ${false}
+    ${'filled'}           | ${'white'}     | ${false} | ${true}
     ${'outlined'}         | ${'primary'}   | ${false} | ${false}
     ${'outlined'}         | ${'primary'}   | ${true}  | ${false}
     ${'outlined'}         | ${'primary'}   | ${false} | ${true}
+    ${'outlined'}         | ${'white'}     | ${false} | ${false}
+    ${'outlined'}         | ${'white'}     | ${true}  | ${false}
+    ${'outlined'}         | ${'white'}     | ${false} | ${true}
     ${'text'}             | ${'primary'}   | ${false} | ${false}
     ${'text'}             | ${'primary'}   | ${true}  | ${false}
     ${'text'}             | ${'primary'}   | ${false} | ${true}
@@ -124,6 +130,9 @@ describe('Button', () => {
     ${'text'}             | ${'danger'}    | ${false} | ${false}
     ${'text'}             | ${'danger'}    | ${true}  | ${false}
     ${'text'}             | ${'danger'}    | ${false} | ${true}
+    ${'text'}             | ${'white'}     | ${false} | ${false}
+    ${'text'}             | ${'white'}     | ${true}  | ${false}
+    ${'text'}             | ${'white'}     | ${false} | ${true}
     ${'inline-text'}      | ${'primary'}   | ${false} | ${false}
     ${'inline-text'}      | ${'secondary'} | ${true}  | ${false}
     ${'inline-text'}      | ${'danger'}    | ${false} | ${false}
@@ -157,14 +166,17 @@ describe('getThemeVariant', () => {
     ${'filled'}           | ${'primary'}   | ${'filled-primary'}
     ${'filled'}           | ${'secondary'} | ${'filled-secondary'}
     ${'filled'}           | ${'danger'}    | ${'filled-danger'}
+    ${'filled'}           | ${'white'}     | ${'filled-white'}
     ${'filled-compact'}   | ${'danger'}    | ${'filled-danger'}
     ${'outlined'}         | ${'primary'}   | ${'outlined-primary'}
     ${'outlined'}         | ${'secondary'} | ${'outlined-secondary'}
     ${'outlined'}         | ${'danger'}    | ${'outlined-danger'}
+    ${'outlined'}         | ${'white'}     | ${'outlined-white'}
     ${'outlined-compact'} | ${'danger'}    | ${'outlined-danger'}
     ${'text'}             | ${'primary'}   | ${'text-primary'}
     ${'text'}             | ${'secondary'} | ${'text-secondary'}
     ${'text'}             | ${'danger'}    | ${'text-danger'}
+    ${'text'}             | ${'white'}     | ${'text-white'}
   `('returns $themeVariant', ({ variant, intent, themeVariant }) => {
     expect(getThemeVariant(variant, intent)).toBe(themeVariant);
   });