@hero-design/rn 8.69.0 → 8.70.0

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Chip does not render icon when variant is outlined 1`] = `
+exports[`Chip does not render selected icon when showSelectedIcon is false 1`] = `
 <View
   style={
     {
@@ -28,7 +28,7 @@ exports[`Chip does not render icon when variant is outlined 1`] = `
     }
     accessible={true}
     collapsable={false}
-    focusable={true}
+    focusable={false}
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -40,18 +40,18 @@ exports[`Chip does not render icon when variant is outlined 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "transparent",
+        "backgroundColor": "#e8e9ea",
         "borderColor": "#001f23",
         "borderRadius": 999,
-        "borderWidth": 1,
+        "borderWidth": 2,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": -2,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
       }
     }
-    testID="chip"
   >
     <Text
       allowFontScaling={false}
@@ -60,22 +60,18 @@ exports[`Chip does not render icon when variant is outlined 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={false}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
-      Cover my bills
+      Chip
     </Text>
   </View>
   <View
@@ -101,7 +97,7 @@ exports[`Chip does not render icon when variant is outlined 1`] = `
 </View>
 `;
 
-exports[`Chip does not render icon when variant is outlined 2`] = `
+exports[`Chip renders correctly when selected is false 1`] = `
 <View
   style={
     {
@@ -129,7 +125,7 @@ exports[`Chip does not render icon when variant is outlined 2`] = `
     }
     accessible={true}
     collapsable={false}
-    focusable={true}
+    focusable={false}
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -141,53 +137,19 @@ exports[`Chip does not render icon when variant is outlined 2`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#001f23",
-        "borderColor": "transparent",
+        "backgroundColor": "#ffffff",
+        "borderColor": "#bfc1c5",
         "borderRadius": 999,
         "borderWidth": 1,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
       }
     }
-    testID="chip"
   >
-    <View
-      style={
-        [
-          {},
-          [
-            {
-              "marginRight": 8,
-            },
-            undefined,
-          ],
-        ]
-      }
-    >
-      <HeroIcon
-        name="checkmark"
-        style={
-          [
-            {
-              "color": "#001f23",
-              "fontSize": 16,
-            },
-            [
-              {
-                "color": "#ffffff",
-              },
-              undefined,
-            ],
-          ]
-        }
-        testID="chip-icon-checkmark"
-        themeIntent="text"
-        themeSize="xsmall"
-      />
-    </View>
     <Text
       allowFontScaling={false}
       style={
@@ -195,22 +157,16 @@ exports[`Chip does not render icon when variant is outlined 2`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {
-              "color": "#ffffff",
-            },
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={true}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
@@ -238,7 +194,7 @@ exports[`Chip does not render icon when variant is outlined 2`] = `
 </View>
 `;
 
-exports[`Chip renders correctly when selected is false 1`] = `
+exports[`Chip renders correctly when selected is true 1`] = `
 <View
   style={
     {
@@ -278,12 +234,13 @@ exports[`Chip renders correctly when selected is false 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "transparent",
+        "backgroundColor": "#e8e9ea",
         "borderColor": "#001f23",
         "borderRadius": 999,
-        "borderWidth": 1,
+        "borderWidth": 2,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": -2,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -297,159 +254,46 @@ exports[`Chip renders correctly when selected is false 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={false}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </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[`Chip renders correctly when selected is true 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": undefined,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
-    collapsable={false}
-    focusable={false}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      {
-        "alignItems": "center",
-        "alignSelf": "flex-start",
-        "backgroundColor": "#001f23",
-        "borderColor": "transparent",
-        "borderRadius": 999,
-        "borderWidth": 1,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "opacity": 1,
-        "paddingHorizontal": 12,
-        "paddingVertical": 8,
-      }
-    }
-  >
     <View
+      marginLeft="small"
       style={
         [
-          {},
-          [
-            {
-              "marginRight": 8,
-            },
-            undefined,
-          ],
+          {
+            "marginLeft": 8,
+          },
+          undefined,
         ]
       }
     >
       <HeroIcon
-        name="checkmark"
+        name="cancel"
         style={
           [
             {
               "color": "#001f23",
               "fontSize": 16,
             },
-            [
-              {
-                "color": "#ffffff",
-              },
-              undefined,
-            ],
+            undefined,
           ]
         }
-        testID="chip-icon-checkmark"
+        testID="selected-chip-icon-cancel"
         themeIntent="text"
         themeSize="xsmall"
       />
     </View>
-    <Text
-      allowFontScaling={false}
-      style={
-        [
-          {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.48,
-            "lineHeight": 22,
-          },
-          [
-            {
-              "color": "#ffffff",
-            },
-            undefined,
-          ],
-        ]
-      }
-      themeIntent="body"
-      themeSelected={true}
-      themeTypeface="neutral"
-      themeVariant="small"
-    >
-      Cover my bills
-    </Text>
   </View>
   <View
     pointerEvents="box-none"
@@ -517,10 +361,10 @@ exports[`Chip renders correctly with custom icon 1`] = `
         "backgroundColor": "#ffffff",
         "borderColor": "transparent",
         "borderRadius": 999,
-        "borderWidth": 1,
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -536,15 +380,13 @@ exports[`Chip renders correctly with custom icon 1`] = `
     testID="chip"
   >
     <View
+      marginRight="small"
       style={
         [
-          {},
-          [
-            {
-              "marginRight": 8,
-            },
-            undefined,
-          ],
+          {
+            "marginRight": 8,
+          },
+          undefined,
         ]
       }
     >
@@ -556,10 +398,7 @@ exports[`Chip renders correctly with custom icon 1`] = `
               "color": "#001f23",
               "fontSize": 16,
             },
-            [
-              {},
-              undefined,
-            ],
+            undefined,
           ]
         }
         testID="chip-icon-charging-station-outlined"
@@ -574,20 +413,16 @@ exports[`Chip renders correctly with custom icon 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={false}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
@@ -658,10 +493,10 @@ exports[`Chip renders correctly with custom icon 2`] = `
         "backgroundColor": "#ece8ef",
         "borderColor": "transparent",
         "borderRadius": 999,
-        "borderWidth": 1,
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": -2,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -677,15 +512,13 @@ exports[`Chip renders correctly with custom icon 2`] = `
     testID="chip"
   >
     <View
+      marginRight="small"
       style={
         [
-          {},
-          [
-            {
-              "marginRight": 8,
-            },
-            undefined,
-          ],
+          {
+            "marginRight": 8,
+          },
+          undefined,
         ]
       }
     >
@@ -697,10 +530,7 @@ exports[`Chip renders correctly with custom icon 2`] = `
               "color": "#001f23",
               "fontSize": 16,
             },
-            [
-              {},
-              undefined,
-            ],
+            undefined,
           ]
         }
         testID="chip-icon-charging-station-outlined"
@@ -715,20 +545,16 @@ exports[`Chip renders correctly with custom icon 2`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={true}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
@@ -796,12 +622,13 @@ exports[`Chip renders correctly with default icon 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "transparent",
-        "borderColor": "#001f23",
+        "backgroundColor": "#ffffff",
+        "borderColor": "#bfc1c5",
         "borderRadius": 999,
         "borderWidth": 1,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -816,20 +643,16 @@ exports[`Chip renders correctly with default icon 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={false}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
@@ -897,12 +720,13 @@ exports[`Chip renders correctly with default icon 2`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#001f23",
-        "borderColor": "transparent",
+        "backgroundColor": "#e8e9ea",
+        "borderColor": "#001f23",
         "borderRadius": 999,
-        "borderWidth": 1,
+        "borderWidth": 2,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": -2,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -910,66 +734,53 @@ exports[`Chip renders correctly with default icon 2`] = `
     }
     testID="chip"
   >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Cover my bills
+    </Text>
     <View
+      marginLeft="small"
       style={
         [
-          {},
-          [
-            {
-              "marginRight": 8,
-            },
-            undefined,
-          ],
+          {
+            "marginLeft": 8,
+          },
+          undefined,
         ]
       }
     >
       <HeroIcon
-        name="checkmark"
+        name="cancel"
         style={
           [
             {
               "color": "#001f23",
               "fontSize": 16,
             },
-            [
-              {
-                "color": "#ffffff",
-              },
-              undefined,
-            ],
+            undefined,
           ]
         }
-        testID="chip-icon-checkmark"
+        testID="selected-chip-icon-cancel"
         themeIntent="text"
         themeSize="xsmall"
       />
     </View>
-    <Text
-      allowFontScaling={false}
-      style={
-        [
-          {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.48,
-            "lineHeight": 22,
-          },
-          [
-            {
-              "color": "#ffffff",
-            },
-            undefined,
-          ],
-        ]
-      }
-      themeIntent="body"
-      themeSelected={true}
-      themeTypeface="neutral"
-      themeVariant="small"
-    >
-      Cover my bills
-    </Text>
   </View>
   <View
     pointerEvents="box-none"
@@ -1037,10 +848,10 @@ exports[`Chip renders correctly with variant filled and selected false 1`] = `
         "backgroundColor": "#ffffff",
         "borderColor": "transparent",
         "borderRadius": 999,
-        "borderWidth": 1,
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -1062,20 +873,16 @@ exports[`Chip renders correctly with variant filled and selected false 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={false}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
@@ -1146,10 +953,10 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
         "backgroundColor": "#ece8ef",
         "borderColor": "transparent",
         "borderRadius": 999,
-        "borderWidth": 1,
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": -2,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -1164,38 +971,6 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
     }
     testID="chip"
   >
-    <View
-      style={
-        [
-          {},
-          [
-            {
-              "marginRight": 8,
-            },
-            undefined,
-          ],
-        ]
-      }
-    >
-      <HeroIcon
-        name="checkmark"
-        style={
-          [
-            {
-              "color": "#001f23",
-              "fontSize": 16,
-            },
-            [
-              {},
-              undefined,
-            ],
-          ]
-        }
-        testID="chip-icon-checkmark"
-        themeIntent="text"
-        themeSize="xsmall"
-      />
-    </View>
     <Text
       allowFontScaling={false}
       style={
@@ -1203,20 +978,16 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={true}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
@@ -1284,12 +1055,13 @@ exports[`Chip renders correctly with variant outlined and selected false 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "transparent",
-        "borderColor": "#001f23",
+        "backgroundColor": "#ffffff",
+        "borderColor": "#bfc1c5",
         "borderRadius": 999,
         "borderWidth": 1,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -1304,20 +1076,16 @@ exports[`Chip renders correctly with variant outlined and selected false 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
+            "fontSize": 16,
             "letterSpacing": 0.48,
-            "lineHeight": 22,
+            "lineHeight": 24,
           },
-          [
-            {},
-            undefined,
-          ],
+          undefined,
         ]
       }
       themeIntent="body"
-      themeSelected={false}
       themeTypeface="neutral"
-      themeVariant="small"
+      themeVariant="regular"
     >
       Cover my bills
     </Text>
@@ -1385,12 +1153,13 @@ exports[`Chip renders correctly with variant outlined and selected true 1`] = `
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#001f23",
-        "borderColor": "transparent",
+        "backgroundColor": "#e8e9ea",
+        "borderColor": "#001f23",
         "borderRadius": 999,
-        "borderWidth": 1,
+        "borderWidth": 2,
         "flexDirection": "row",
         "justifyContent": "center",
+        "marginTop": -2,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -1398,66 +1167,53 @@ exports[`Chip renders correctly with variant outlined and selected true 1`] = `
     }
     testID="chip"
   >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Cover my bills
+    </Text>
     <View
+      marginLeft="small"
       style={
         [
-          {},
-          [
-            {
-              "marginRight": 8,
-            },
-            undefined,
-          ],
+          {
+            "marginLeft": 8,
+          },
+          undefined,
         ]
       }
     >
       <HeroIcon
-        name="checkmark"
+        name="cancel"
         style={
           [
             {
               "color": "#001f23",
               "fontSize": 16,
             },
-            [
-              {
-                "color": "#ffffff",
-              },
-              undefined,
-            ],
+            undefined,
           ]
         }
-        testID="chip-icon-checkmark"
+        testID="selected-chip-icon-cancel"
         themeIntent="text"
         themeSize="xsmall"
       />
     </View>
-    <Text
-      allowFontScaling={false}
-      style={
-        [
-          {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.48,
-            "lineHeight": 22,
-          },
-          [
-            {
-              "color": "#ffffff",
-            },
-            undefined,
-          ],
-        ]
-      }
-      themeIntent="body"
-      themeSelected={true}
-      themeTypeface="neutral"
-      themeVariant="small"
-    >
-      Cover my bills
-    </Text>
   </View>
   <View
     pointerEvents="box-none"