npm - @hero-design/rn - Versions diffs - 8.85.0 → 8.87.1 - Mend

@hero-design/rn 8.85.0 → 8.87.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

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

@@ -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={