npm - @hero-design/rn - Versions diffs - 9.0.0-0 → 9.0.0-alpha.0 - Mend

@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

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 (668) hide show

package/src/components/Carousel/__tests__/__snapshots__/CardCarousel.spec.tsx.snap CHANGED Viewed

@@ -3,126 +3,119 @@
 exports[`CardCarousel android should render correctly on iOS 1`] = `
 <View
   style={
-    Array [
-      Object {},
-      Object {
-        "height": 100,
-        "width": 100,
-      },
-    ]
+    {
+      "flex": 1,
+    }
   }
-  testID="cardCarousel"
 >
-  <RCTScrollView
-    bounces={false}
-    contentInset={
-      Object {
-        "bottom": 0,
-        "left": 24,
-        "right": 24,
-        "top": 0,
-      }
-    }
-    data={
-      Array [
-        <Text>
-           screen 1
-        </Text>,
-        <Text>
-           screen 2
-        </Text>,
-      ]
-    }
-    decelerationRate="fast"
-    getItem={[Function]}
-    getItemCount={[Function]}
-    getItemLayout={[Function]}
-    horizontal={true}
-    keyExtractor={[Function]}
-    onContentSizeChange={[Function]}
-    onLayout={[Function]}
-    onMomentumScrollBegin={[Function]}
-    onMomentumScrollEnd={[Function]}
-    onScroll={[Function]}
-    onScrollBeginDrag={[Function]}
-    onScrollEndDrag={[Function]}
-    onViewableItemsChanged={[Function]}
-    pagingEnabled={true}
-    removeClippedSubviews={true}
-    renderItem={[Function]}
-    renderToHardwareTextureAndroid={true}
-    scrollEventThrottle={32}
-    showsHorizontalScrollIndicator={false}
-    snapToAlignment="center"
-    snapToInterval={0}
-    stickyHeaderIndices={Array []}
-    viewabilityConfig={
-      Object {
-        "itemVisiblePercentThreshold": 80,
-      }
-    }
-    viewabilityConfigCallbackPairs={
-      Array [
-        Object {
-          "onViewableItemsChanged": [Function],
-          "viewabilityConfig": Object {
-            "itemVisiblePercentThreshold": 80,
-          },
+  <View
+    style={
+      [
+        {},
+        {
+          "height": 100,
+          "width": 100,
         },
       ]
     }
+    testID="cardCarousel"
   >
-    <View>
-      <View
-        style={
-          Array [
-            Object {
-              "flexDirection": "row",
-            },
-            null,
-          ]
+    <RCTScrollView
+      bounces={false}
+      contentInset={
+        {
+          "bottom": 0,
+          "left": 24,
+          "right": 24,
+          "top": 0,
         }
-      >
+      }
+      data={
+        [
+          <Body
+            variant="small"
+          >
+             screen 1
+          </Body>,
+          <Body
+            variant="small"
+          >
+             screen 2
+          </Body>,
+        ]
+      }
+      decelerationRate="fast"
+      getItem={[Function]}
+      getItemCount={[Function]}
+      getItemLayout={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      onViewableItemsChanged={[Function]}
+      pagingEnabled={true}
+      removeClippedSubviews={true}
+      renderItem={[Function]}
+      renderToHardwareTextureAndroid={true}
+      scrollEventThrottle={32}
+      showsHorizontalScrollIndicator={false}
+      snapToAlignment="center"
+      snapToInterval={0}
+      stickyHeaderIndices={[]}
+      viewabilityConfig={
+        {
+          "itemVisiblePercentThreshold": 80,
+        }
+      }
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "itemVisiblePercentThreshold": 80,
+            },
+          },
+        ]
+      }
+    >
+      <View>
         <View
+          onFocusCapture={[Function]}
           style={
-            Array [
-              Object {
-                "padding": 8,
-              },
-              Object {
-                "width": 0,
+            [
+              {
+                "flexDirection": "row",
               },
+              null,
             ]
           }
         >
           <View
             style={
-              Array [
-                Object {
-                  "borderRadius": 8,
-                  "elevation": 4,
-                  "flex": 1,
-                  "shadowColor": "#001f23",
-                  "shadowOffset": Object {
-                    "height": 2,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0.12,
-                  "shadowRadius": 8,
+              [
+                {
+                  "padding": 8,
+                },
+                {
+                  "width": 0,
                 },
-                undefined,
               ]
             }
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderRadius": 12,
                     "overflow": "hidden",
                   },
-                  Array [
-                    Object {
+                  [
+                    {
                       "borderRadius": 8,
                       "flex": 1,
                       "overflow": "hidden",
@@ -135,78 +128,58 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
               <Text
                 allowFontScaling={false}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.48,
                       "lineHeight": 22,
                     },
                     undefined,
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small"
               >
                  screen 1
               </Text>
             </View>
           </View>
         </View>
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "flexDirection": "row",
-            },
-            null,
-          ]
-        }
-      >
         <View
+          onFocusCapture={[Function]}
           style={
-            Array [
-              Object {
-                "padding": 8,
-              },
-              Object {
-                "width": 0,
+            [
+              {
+                "flexDirection": "row",
               },
+              null,
             ]
           }
         >
           <View
             style={
-              Array [
-                Object {
-                  "borderRadius": 8,
-                  "elevation": 4,
-                  "flex": 1,
-                  "shadowColor": "#001f23",
-                  "shadowOffset": Object {
-                    "height": 2,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0.12,
-                  "shadowRadius": 8,
+              [
+                {
+                  "padding": 8,
+                },
+                {
+                  "width": 0,
                 },
-                undefined,
               ]
             }
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderRadius": 12,
                     "overflow": "hidden",
                   },
-                  Array [
-                    Object {
+                  [
+                    {
                       "borderRadius": 8,
                       "flex": 1,
                       "overflow": "hidden",
@@ -219,21 +192,20 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
               <Text
                 allowFontScaling={false}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.48,
                       "lineHeight": 22,
                     },
                     undefined,
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small"
               >
                  screen 2
               </Text>
@@ -241,181 +213,204 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
           </View>
         </View>
       </View>
+    </RCTScrollView>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+          [
+            {
+              "alignSelf": "center",
+              "marginTop": 16,
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="pageControl"
+    >
+      <View
+        accessibilityState={
+          {
+            "selected": true,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="page-control-indicator0"
+      />
+      <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator1"
+      />
     </View>
-  </RCTScrollView>
+  </View>
   <View
+    pointerEvents="box-none"
+    position="bottom"
     style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "flexDirection": "row",
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        Array [
-          Object {
-            "alignSelf": "center",
-            "marginTop": 16,
-          },
-          undefined,
-        ],
+        undefined,
       ]
     }
-    testID="pageControl"
-  >
-    <View
-      collapsable={false}
-      style={
-        Object {
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "height": 8,
-          "marginHorizontal": 8,
-          "opacity": 1,
-          "width": 24,
-        }
-      }
-      testID="page-control-indicator0"
-    />
-    <View
-      collapsable={false}
-      style={
-        Object {
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "height": 8,
-          "marginHorizontal": 8,
-          "opacity": 0.5,
-          "width": 8,
-        }
-      }
-      testID="page-control-indicator1"
-    />
-  </View>
+  />
 </View>
 `;
 exports[`CardCarousel ios should render correctly on iOS 1`] = `
 <View
   style={
-    Array [
-      Object {},
-      Object {
-        "height": 100,
-        "width": 100,
-      },
-    ]
+    {
+      "flex": 1,
+    }
   }
-  testID="cardCarousel"
 >
-  <RCTScrollView
-    bounces={false}
-    contentInset={
-      Object {
-        "bottom": 0,
-        "left": 24,
-        "right": 24,
-        "top": 0,
-      }
-    }
-    data={
-      Array [
-        <Text>
-           screen 1
-        </Text>,
-        <Text>
-           screen 2
-        </Text>,
-      ]
-    }
-    decelerationRate="fast"
-    getItem={[Function]}
-    getItemCount={[Function]}
-    getItemLayout={[Function]}
-    horizontal={true}
-    keyExtractor={[Function]}
-    onContentSizeChange={[Function]}
-    onLayout={[Function]}
-    onMomentumScrollBegin={[Function]}
-    onMomentumScrollEnd={[Function]}
-    onScroll={[Function]}
-    onScrollBeginDrag={[Function]}
-    onScrollEndDrag={[Function]}
-    onViewableItemsChanged={[Function]}
-    pagingEnabled={true}
-    removeClippedSubviews={false}
-    renderItem={[Function]}
-    renderToHardwareTextureAndroid={true}
-    scrollEventThrottle={32}
-    showsHorizontalScrollIndicator={false}
-    snapToAlignment="center"
-    snapToInterval={0}
-    stickyHeaderIndices={Array []}
-    viewabilityConfig={
-      Object {
-        "itemVisiblePercentThreshold": 80,
-      }
-    }
-    viewabilityConfigCallbackPairs={
-      Array [
-        Object {
-          "onViewableItemsChanged": [Function],
-          "viewabilityConfig": Object {
-            "itemVisiblePercentThreshold": 80,
-          },
+  <View
+    style={
+      [
+        {},
+        {
+          "height": 100,
+          "width": 100,
         },
       ]
     }
+    testID="cardCarousel"
   >
-    <View>
-      <View
-        style={
-          Array [
-            Object {
-              "flexDirection": "row",
-            },
-            null,
-          ]
+    <RCTScrollView
+      bounces={false}
+      contentInset={
+        {
+          "bottom": 0,
+          "left": 24,
+          "right": 24,
+          "top": 0,
         }
-      >
+      }
+      data={
+        [
+          <Body
+            variant="small"
+          >
+             screen 1
+          </Body>,
+          <Body
+            variant="small"
+          >
+             screen 2
+          </Body>,
+        ]
+      }
+      decelerationRate="fast"
+      getItem={[Function]}
+      getItemCount={[Function]}
+      getItemLayout={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      onViewableItemsChanged={[Function]}
+      pagingEnabled={true}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      renderToHardwareTextureAndroid={true}
+      scrollEventThrottle={32}
+      showsHorizontalScrollIndicator={false}
+      snapToAlignment="center"
+      snapToInterval={0}
+      stickyHeaderIndices={[]}
+      viewabilityConfig={
+        {
+          "itemVisiblePercentThreshold": 80,
+        }
+      }
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "itemVisiblePercentThreshold": 80,
+            },
+          },
+        ]
+      }
+    >
+      <View>
         <View
+          onFocusCapture={[Function]}
           style={
-            Array [
-              Object {
-                "padding": 8,
-              },
-              Object {
-                "width": 0,
+            [
+              {
+                "flexDirection": "row",
               },
+              null,
             ]
           }
         >
           <View
             style={
-              Array [
-                Object {
-                  "borderRadius": 8,
-                  "elevation": 4,
-                  "flex": 1,
-                  "shadowColor": "#001f23",
-                  "shadowOffset": Object {
-                    "height": 2,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0.12,
-                  "shadowRadius": 8,
+              [
+                {
+                  "padding": 8,
+                },
+                {
+                  "width": 0,
                 },
-                undefined,
               ]
             }
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderRadius": 12,
                     "overflow": "hidden",
                   },
-                  Array [
-                    Object {
+                  [
+                    {
                       "borderRadius": 8,
                       "flex": 1,
                       "overflow": "hidden",
@@ -428,78 +423,58 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
               <Text
                 allowFontScaling={false}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.48,
                       "lineHeight": 22,
                     },
                     undefined,
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small"
               >
                  screen 1
               </Text>
             </View>
           </View>
         </View>
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "flexDirection": "row",
-            },
-            null,
-          ]
-        }
-      >
         <View
+          onFocusCapture={[Function]}
           style={
-            Array [
-              Object {
-                "padding": 8,
-              },
-              Object {
-                "width": 0,
+            [
+              {
+                "flexDirection": "row",
               },
+              null,
             ]
           }
         >
           <View
             style={
-              Array [
-                Object {
-                  "borderRadius": 8,
-                  "elevation": 4,
-                  "flex": 1,
-                  "shadowColor": "#001f23",
-                  "shadowOffset": Object {
-                    "height": 2,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0.12,
-                  "shadowRadius": 8,
+              [
+                {
+                  "padding": 8,
+                },
+                {
+                  "width": 0,
                 },
-                undefined,
               ]
             }
           >
             <View
               style={
-                Array [
-                  Object {
+                [
+                  {
                     "borderRadius": 12,
                     "overflow": "hidden",
                   },
-                  Array [
-                    Object {
+                  [
+                    {
                       "borderRadius": 8,
                       "flex": 1,
                       "overflow": "hidden",
@@ -512,21 +487,20 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
               <Text
                 allowFontScaling={false}
                 style={
-                  Array [
-                    Object {
+                  [
+                    {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.48,
                       "lineHeight": 22,
                     },
                     undefined,
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small"
               >
                  screen 2
               </Text>
@@ -534,54 +508,84 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
           </View>
         </View>
       </View>
+    </RCTScrollView>
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+          [
+            {
+              "alignSelf": "center",
+              "marginTop": 16,
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="pageControl"
+    >
+      <View
+        accessibilityState={
+          {
+            "selected": true,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="page-control-indicator0"
+      />
+      <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator1"
+      />
     </View>
-  </RCTScrollView>
+  </View>
   <View
+    pointerEvents="box-none"
+    position="bottom"
     style={
-      Array [
-        Object {
-          "alignItems": "center",
-          "flexDirection": "row",
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
-        Array [
-          Object {
-            "alignSelf": "center",
-            "marginTop": 16,
-          },
-          undefined,
-        ],
+        undefined,
       ]
     }
-    testID="pageControl"
-  >
-    <View
-      collapsable={false}
-      style={
-        Object {
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "height": 8,
-          "marginHorizontal": 8,
-          "opacity": 1,
-          "width": 24,
-        }
-      }
-      testID="page-control-indicator0"
-    />
-    <View
-      collapsable={false}
-      style={
-        Object {
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "height": 8,
-          "marginHorizontal": 8,
-          "opacity": 0.5,
-          "width": 8,
-        }
-      }
-      testID="page-control-indicator1"
-    />
-  </View>
+  />
 </View>
 `;