@hero-design/rn 8.84.3 → 8.86.0

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -276,6 +276,75 @@ exports[`StyledButtonContainer has filled-secondary style 1`] = `
 </View>
 `;
 
+exports[`StyledButtonContainer has filled-white style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 32,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </Text>
+  </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[`StyledButtonContainer has outlined-danger style 1`] = `
 <View
   style={
@@ -489,6 +558,77 @@ exports[`StyledButtonContainer has outlined-secondary style 1`] = `
 </View>
 `;
 
+exports[`StyledButtonContainer has outlined-white style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "transparent",
+          "borderColor": "#ffffff",
+          "borderRadius": 32,
+          "borderWidth": 2,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 14,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </Text>
+  </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[`StyledButtonContainer has text-danger style 1`] = `
 <View
   style={
@@ -696,6 +836,75 @@ exports[`StyledButtonContainer has text-secondary style 1`] = `
 </View>
 `;
 
+exports[`StyledButtonContainer has text-white style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "borderWidth": 0,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 12,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </Text>
+  </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[`StyledButtonContainer has true style 1`] = `
 <View
   style={
@@ -869,23 +1078,227 @@ exports[`StyledButtonContainer renders disabled correctly 1`] = `
     style={
       [
         {
-          "alignItems": "center",
-          "alignSelf": "stretch",
-          "backgroundColor": "#bfc1c5",
-          "borderRadius": 32,
-          "flexDirection": "row",
-          "height": 60,
-          "justifyContent": "center",
-          "padding": 16,
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "#bfc1c5",
+          "borderRadius": 32,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Title
+    </Text>
+  </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[`StyledButtonIcon has false style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <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[`StyledButtonIcon has filled-danger style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <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[`StyledButtonIcon has filled-primary style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <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[`StyledButtonIcon has filled-secondary style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="bell"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
         },
-        undefined,
+        [
+          {
+            "color": "#ffffff",
+            "fontSize": 20,
+          },
+          undefined,
+        ],
       ]
     }
-  >
-    <Text>
-      Title
-    </Text>
-  </View>
+    themeIntent="text"
+    themeSize="medium"
+  />
   <View
     pointerEvents="box-none"
     position="bottom"
@@ -909,7 +1322,7 @@ exports[`StyledButtonContainer renders disabled correctly 1`] = `
 </View>
 `;
 
-exports[`StyledButtonIcon has false style 1`] = `
+exports[`StyledButtonIcon has filled-white style 1`] = `
 <View
   style={
     {
@@ -927,7 +1340,7 @@ exports[`StyledButtonIcon has false style 1`] = `
         },
         [
           {
-            "color": "#ffffff",
+            "color": "#401960",
             "fontSize": 20,
           },
           undefined,
@@ -960,7 +1373,7 @@ exports[`StyledButtonIcon has false style 1`] = `
 </View>
 `;
 
-exports[`StyledButtonIcon has filled-danger style 1`] = `
+exports[`StyledButtonIcon has outlined-danger style 1`] = `
 <View
   style={
     {
@@ -978,7 +1391,7 @@ exports[`StyledButtonIcon has filled-danger style 1`] = `
         },
         [
           {
-            "color": "#ffffff",
+            "color": "#cb300a",
             "fontSize": 20,
           },
           undefined,
@@ -1011,7 +1424,7 @@ exports[`StyledButtonIcon has filled-danger style 1`] = `
 </View>
 `;
 
-exports[`StyledButtonIcon has filled-primary style 1`] = `
+exports[`StyledButtonIcon has outlined-primary style 1`] = `
 <View
   style={
     {
@@ -1029,7 +1442,7 @@ exports[`StyledButtonIcon has filled-primary style 1`] = `
         },
         [
           {
-            "color": "#ffffff",
+            "color": "#401960",
             "fontSize": 20,
           },
           undefined,
@@ -1062,7 +1475,7 @@ exports[`StyledButtonIcon has filled-primary style 1`] = `
 </View>
 `;
 
-exports[`StyledButtonIcon has filled-secondary style 1`] = `
+exports[`StyledButtonIcon has outlined-secondary style 1`] = `
 <View
   style={
     {
@@ -1080,7 +1493,7 @@ exports[`StyledButtonIcon has filled-secondary style 1`] = `
         },
         [
           {
-            "color": "#ffffff",
+            "color": "#4d6265",
             "fontSize": 20,
           },
           undefined,
@@ -1113,7 +1526,7 @@ exports[`StyledButtonIcon has filled-secondary style 1`] = `
 </View>
 `;
 
-exports[`StyledButtonIcon has outlined-danger style 1`] = `
+exports[`StyledButtonIcon has outlined-white style 1`] = `
 <View
   style={
     {
@@ -1131,7 +1544,7 @@ exports[`StyledButtonIcon has outlined-danger style 1`] = `
         },
         [
           {
-            "color": "#cb300a",
+            "color": "#ffffff",
             "fontSize": 20,
           },
           undefined,
@@ -1164,7 +1577,7 @@ exports[`StyledButtonIcon has outlined-danger style 1`] = `
 </View>
 `;
 
-exports[`StyledButtonIcon has outlined-primary style 1`] = `
+exports[`StyledButtonIcon has text-danger style 1`] = `
 <View
   style={
     {
@@ -1182,7 +1595,7 @@ exports[`StyledButtonIcon has outlined-primary style 1`] = `
         },
         [
           {
-            "color": "#401960",
+            "color": "#cb300a",
             "fontSize": 20,
           },
           undefined,
@@ -1215,7 +1628,7 @@ exports[`StyledButtonIcon has outlined-primary style 1`] = `
 </View>
 `;
 
-exports[`StyledButtonIcon has outlined-secondary style 1`] = `
+exports[`StyledButtonIcon has text-danger style 2`] = `
 <View
   style={
     {
@@ -1233,7 +1646,7 @@ exports[`StyledButtonIcon has outlined-secondary style 1`] = `
         },
         [
           {
-            "color": "#4d6265",
+            "color": "#f68282",
             "fontSize": 20,
           },
           undefined,
@@ -1266,7 +1679,7 @@ exports[`StyledButtonIcon has outlined-secondary style 1`] = `
 </View>
 `;
 
-exports[`StyledButtonIcon has text-danger style 1`] = `
+exports[`StyledButtonIcon has text-primary style 1`] = `
 <View
   style={
     {
@@ -1284,7 +1697,7 @@ exports[`StyledButtonIcon has text-danger style 1`] = `
         },
         [
           {
-            "color": "#cb300a",
+            "color": "#401960",
             "fontSize": 20,
           },
           undefined,
@@ -1317,7 +1730,7 @@ exports[`StyledButtonIcon has text-danger style 1`] = `
 </View>
 `;
 
-exports[`StyledButtonIcon has text-danger style 2`] = `
+exports[`StyledButtonIcon has text-primary style 2`] = `
 <View
   style={
     {
@@ -1335,7 +1748,7 @@ exports[`StyledButtonIcon has text-danger style 2`] = `
         },
         [
           {
-            "color": "#f68282",
+            "color": "#33144d",
             "fontSize": 20,
           },
           undefined,
@@ -1368,7 +1781,7 @@ exports[`StyledButtonIcon has text-danger style 2`] = `
 </View>
 `;
 
-exports[`StyledButtonIcon has text-primary style 1`] = `
+exports[`StyledButtonIcon has text-secondary style 1`] = `
 <View
   style={
     {
@@ -1386,7 +1799,7 @@ exports[`StyledButtonIcon has text-primary style 1`] = `
         },
         [
           {
-            "color": "#401960",
+            "color": "#4d6265",
             "fontSize": 20,
           },
           undefined,
@@ -1419,7 +1832,7 @@ exports[`StyledButtonIcon has text-primary style 1`] = `
 </View>
 `;
 
-exports[`StyledButtonIcon has text-primary style 2`] = `
+exports[`StyledButtonIcon has text-secondary style 2`] = `
 <View
   style={
     {
@@ -1437,7 +1850,7 @@ exports[`StyledButtonIcon has text-primary style 2`] = `
         },
         [
           {
-            "color": "#33144d",
+            "color": "#001f23",
             "fontSize": 20,
           },
           undefined,
@@ -1470,7 +1883,7 @@ exports[`StyledButtonIcon has text-primary style 2`] = `
 </View>
 `;
 
-exports[`StyledButtonIcon has text-secondary style 1`] = `
+exports[`StyledButtonIcon has text-white style 1`] = `
 <View
   style={
     {
@@ -1488,7 +1901,7 @@ exports[`StyledButtonIcon has text-secondary style 1`] = `
         },
         [
           {
-            "color": "#4d6265",
+            "color": "#ffffff",
             "fontSize": 20,
           },
           undefined,
@@ -1521,7 +1934,7 @@ exports[`StyledButtonIcon has text-secondary style 1`] = `
 </View>
 `;
 
-exports[`StyledButtonIcon has text-secondary style 2`] = `
+exports[`StyledButtonIcon has text-white style 2`] = `
 <View
   style={
     {
@@ -1539,7 +1952,7 @@ exports[`StyledButtonIcon has text-secondary style 2`] = `
         },
         [
           {
-            "color": "#001f23",
+            "color": "#ffffff",
             "fontSize": 20,
           },
           undefined,
@@ -2114,6 +2527,65 @@ exports[`StyledButtonText has filled-secondary style 1`] = `
 </View>
 `;
 
+exports[`StyledButtonText has filled-white style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        [
+          {
+            "color": "#401960",
+            "flexShrink": 1,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeButtonVariant="filled-white"
+    themeIntent="body"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    Example
+  </Text>
+  <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[`StyledButtonText has outlined-danger style 1`] = `
 <View
   style={
@@ -2291,6 +2763,65 @@ exports[`StyledButtonText has outlined-secondary style 1`] = `
 </View>
 `;
 
+exports[`StyledButtonText has outlined-white style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "flexShrink": 1,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeButtonVariant="outlined-white"
+    themeIntent="body"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    Example
+  </Text>
+  <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[`StyledButtonText has text-danger style 1`] = `
 <View
   style={
@@ -2468,6 +2999,65 @@ exports[`StyledButtonText has text-secondary style 1`] = `
 </View>
 `;
 
+exports[`StyledButtonText has text-white style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "flexShrink": 1,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeButtonVariant="text-white"
+    themeIntent="body"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    Example
+  </Text>
+  <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[`StyledButtonText renders disabled correctly 1`] = `
 <View
   style={