@hero-design/rn 7.18.1 → 7.20.0

package/src/components/Spinner/__tests__/__snapshots__/StyledSpinner.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StyledSpinnerContainer renders correctly 1`] = `
+exports[`StyledSpinnerContainer renders correctly in medium size 1`] = `
 <View
   style={
     Array [
@@ -39,6 +39,7 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         ]
       }
       themePosition="top"
+      themeSize="medium"
     >
       <View
         collapsable={false}
@@ -46,16 +47,16 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#8505a2",
-              "borderRadius": 8,
+              "backgroundColor": "#795e90",
+              "borderRadius": 999,
               "height": 16,
-              "opacity": 1,
               "width": 16,
             },
             Object {},
           ]
         }
         themePosition="topLeft"
+        themeSize="medium"
       />
       <View
         collapsable={false}
@@ -63,17 +64,17 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#8505a2",
-              "borderRadius": 8,
+              "backgroundColor": "#a08cb0",
+              "borderRadius": 999,
               "height": 16,
               "marginLeft": 8,
-              "opacity": 0.7,
               "width": 16,
             },
             Object {},
           ]
         }
         themePosition="topRight"
+        themeSize="medium"
       />
     </View>
     <View
@@ -89,6 +90,7 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         ]
       }
       themePosition="bottom"
+      themeSize="medium"
     >
       <View
         collapsable={false}
@@ -96,16 +98,16 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#8505a2",
-              "borderRadius": 8,
+              "backgroundColor": "#d9d1df",
+              "borderRadius": 999,
               "height": 16,
-              "opacity": 0.5,
               "width": 16,
             },
             Object {},
           ]
         }
         themePosition="bottomLeft"
+        themeSize="medium"
       />
       <View
         collapsable={false}
@@ -113,24 +115,156 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#8505a2",
-              "borderRadius": 8,
+              "backgroundColor": "#ece8ef",
+              "borderRadius": 999,
               "height": 16,
               "marginLeft": 8,
-              "opacity": 0.3,
               "width": 16,
             },
             Object {},
           ]
         }
         themePosition="bottomRight"
+        themeSize="medium"
       />
     </View>
   </View>
 </View>
 `;
 
-exports[`StyledSpinnerRow renders correctly when position is bottom 1`] = `
+exports[`StyledSpinnerContainer renders correctly in small size 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "height": "100%",
+        "justifyContent": "center",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "rotate": "0deg",
+          },
+        ],
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "marginBottom": 4,
+          },
+          Object {},
+        ]
+      }
+      themePosition="top"
+      themeSize="small"
+    >
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#795e90",
+              "borderRadius": 999,
+              "height": 8,
+              "width": 8,
+            },
+            Object {},
+          ]
+        }
+        themePosition="topLeft"
+        themeSize="small"
+      />
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#a08cb0",
+              "borderRadius": 999,
+              "height": 8,
+              "marginLeft": 4,
+              "width": 8,
+            },
+            Object {},
+          ]
+        }
+        themePosition="topRight"
+        themeSize="small"
+      />
+    </View>
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "marginBottom": 0,
+          },
+          Object {},
+        ]
+      }
+      themePosition="bottom"
+      themeSize="small"
+    >
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#d9d1df",
+              "borderRadius": 999,
+              "height": 8,
+              "width": 8,
+            },
+            Object {},
+          ]
+        }
+        themePosition="bottomLeft"
+        themeSize="small"
+      />
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#ece8ef",
+              "borderRadius": 999,
+              "height": 8,
+              "marginLeft": 4,
+              "width": 8,
+            },
+            Object {},
+          ]
+        }
+        themePosition="bottomRight"
+        themeSize="small"
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`StyledSpinnerRow renders correctly when position is bottom, and size is medium 1`] = `
 <View
   style={
     Array [
@@ -142,10 +276,27 @@ exports[`StyledSpinnerRow renders correctly when position is bottom 1`] = `
     ]
   }
   themePosition="bottom"
+  themeSize="medium"
 />
 `;
 
-exports[`StyledSpinnerRow renders correctly when position is top 1`] = `
+exports[`StyledSpinnerRow renders correctly when position is bottom, and size is small 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "marginBottom": 0,
+      },
+      undefined,
+    ]
+  }
+  themePosition="bottom"
+  themeSize="small"
+/>
+`;
+
+exports[`StyledSpinnerRow renders correctly when position is top, and size is medium 1`] = `
 <View
   style={
     Array [
@@ -157,79 +308,170 @@ exports[`StyledSpinnerRow renders correctly when position is top 1`] = `
     ]
   }
   themePosition="top"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledSpinnerRow renders correctly when position is top, and size is small 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "marginBottom": 4,
+      },
+      undefined,
+    ]
+  }
+  themePosition="top"
+  themeSize="small"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is bottomLeft 1`] = `
+exports[`StyledSpinnerText renders correctly when position is bottomLeft, size is medium 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#8505a2",
-        "borderRadius": 8,
+        "backgroundColor": "#d9d1df",
+        "borderRadius": 999,
         "height": 16,
-        "opacity": 0.5,
         "width": 16,
       },
       undefined,
     ]
   }
   themePosition="bottomLeft"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledSpinnerText renders correctly when position is bottomLeft, size is small 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#d9d1df",
+        "borderRadius": 999,
+        "height": 8,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themePosition="bottomLeft"
+  themeSize="small"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is bottomRight 1`] = `
+exports[`StyledSpinnerText renders correctly when position is bottomRight, size is medium 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#8505a2",
-        "borderRadius": 8,
+        "backgroundColor": "#ece8ef",
+        "borderRadius": 999,
         "height": 16,
         "marginLeft": 8,
-        "opacity": 0.3,
         "width": 16,
       },
       undefined,
     ]
   }
   themePosition="bottomRight"
+  themeSize="medium"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is topLeft 1`] = `
+exports[`StyledSpinnerText renders correctly when position is bottomRight, size is small 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#8505a2",
-        "borderRadius": 8,
+        "backgroundColor": "#ece8ef",
+        "borderRadius": 999,
+        "height": 8,
+        "marginLeft": 4,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themePosition="bottomRight"
+  themeSize="small"
+/>
+`;
+
+exports[`StyledSpinnerText renders correctly when position is topLeft, size is medium 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#795e90",
+        "borderRadius": 999,
         "height": 16,
-        "opacity": 1,
         "width": 16,
       },
       undefined,
     ]
   }
   themePosition="topLeft"
+  themeSize="medium"
 />
 `;
 
-exports[`StyledSpinnerText renders correctly when position is topRight 1`] = `
+exports[`StyledSpinnerText renders correctly when position is topLeft, size is small 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#8505a2",
-        "borderRadius": 8,
+        "backgroundColor": "#795e90",
+        "borderRadius": 999,
+        "height": 8,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themePosition="topLeft"
+  themeSize="small"
+/>
+`;
+
+exports[`StyledSpinnerText renders correctly when position is topRight, size is medium 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#a08cb0",
+        "borderRadius": 999,
         "height": 16,
         "marginLeft": 8,
-        "opacity": 0.7,
         "width": 16,
       },
       undefined,
     ]
   }
   themePosition="topRight"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledSpinnerText renders correctly when position is topRight, size is small 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#a08cb0",
+        "borderRadius": 999,
+        "height": 8,
+        "marginLeft": 4,
+        "width": 8,
+      },
+      undefined,
+    ]
+  }
+  themePosition="topRight"
+  themeSize="small"
 />
 `;

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

@@ -48,6 +48,7 @@ exports[`Spinner renders correctly 1`] = `
           ]
         }
         themePosition="top"
+        themeSize="medium"
       >
         <View
           collapsable={false}
@@ -55,16 +56,16 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#8505a2",
-                "borderRadius": 8,
+                "backgroundColor": "#795e90",
+                "borderRadius": 999,
                 "height": 16,
-                "opacity": 1,
                 "width": 16,
               },
               Object {},
             ]
           }
           themePosition="topLeft"
+          themeSize="medium"
         />
         <View
           collapsable={false}
@@ -72,17 +73,17 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#8505a2",
-                "borderRadius": 8,
+                "backgroundColor": "#a08cb0",
+                "borderRadius": 999,
                 "height": 16,
                 "marginLeft": 8,
-                "opacity": 0.7,
                 "width": 16,
               },
               Object {},
             ]
           }
           themePosition="topRight"
+          themeSize="medium"
         />
       </View>
       <View
@@ -98,6 +99,7 @@ exports[`Spinner renders correctly 1`] = `
           ]
         }
         themePosition="bottom"
+        themeSize="medium"
       >
         <View
           collapsable={false}
@@ -105,16 +107,16 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#8505a2",
-                "borderRadius": 8,
+                "backgroundColor": "#d9d1df",
+                "borderRadius": 999,
                 "height": 16,
-                "opacity": 0.5,
                 "width": 16,
               },
               Object {},
             ]
           }
           themePosition="bottomLeft"
+          themeSize="medium"
         />
         <View
           collapsable={false}
@@ -122,17 +124,17 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#8505a2",
-                "borderRadius": 8,
+                "backgroundColor": "#ece8ef",
+                "borderRadius": 999,
                 "height": 16,
                 "marginLeft": 8,
-                "opacity": 0.3,
                 "width": 16,
               },
               Object {},
             ]
           }
           themePosition="bottomRight"
+          themeSize="medium"
         />
       </View>
     </View>

package/src/components/Spinner/index.tsx

@@ -1,20 +1,28 @@
-import React, { ReactElement } from 'react';
-import { ViewProps } from 'react-native';
-
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { ViewProps } from 'react-native';
 import { StyledSpinnerContainer, StyledView } from './StyledSpinner';
 import { AnimatedSpinner } from './AnimatedSpinner';
 
 interface SpinnerProps extends ViewProps {
+  /**
+   * Size of Spinner.
+   */
+  size?: 'small' | 'medium';
   /**
    * Testing id of the component.
    */
   testID?: string;
 }
 
-const Spinner = ({ testID, ...nativeProps }: SpinnerProps): ReactElement => (
+const Spinner = ({
+  testID,
+  size = 'medium',
+  ...nativeProps
+}: SpinnerProps): ReactElement => (
   <StyledView {...nativeProps}>
     <StyledSpinnerContainer testID={testID}>
-      <AnimatedSpinner />
+      <AnimatedSpinner size={size} />
     </StyledSpinnerContainer>
   </StyledView>
 );

package/src/components/Switch/StyledSwitch.tsx

@@ -3,37 +3,21 @@ import { Animated, View } from 'react-native';
 
 type ThemeSize = 'small' | 'medium';
 
+export type Variant =
+  | 'checked'
+  | 'unchecked'
+  | 'disabled-checked'
+  | 'disabled-unchecked';
+
 const StyledWrapper = styled(View)<{
-  themeChecked: boolean | undefined;
+  themeVariant: Variant;
   themeSize: ThemeSize;
-}>(({ theme, themeChecked, themeSize }) => ({
+}>(({ theme, themeVariant, themeSize }) => ({
   height: theme.__hd__.switch.heights[themeSize],
   width: theme.__hd__.switch.widths[themeSize],
   paddingHorizontal: theme.__hd__.switch.spaces[themeSize],
   borderRadius: theme.__hd__.switch.radii.rounded,
-  backgroundColor: themeChecked
-    ? theme.__hd__.switch.colors.active
-    : theme.__hd__.switch.colors.inactive,
-}));
-
-const StyledDisabledWrapper = styled(View)<{
-  themeSize: ThemeSize;
-}>(({ theme, themeSize }) => ({
-  position: 'absolute',
-  height: theme.__hd__.switch.heights[themeSize],
-  width: theme.__hd__.switch.widths[themeSize],
-  borderRadius: theme.__hd__.switch.radii.rounded,
-  backgroundColor: theme.__hd__.switch.colors.thumb,
-  zIndex: 9999,
-  opacity: 0.8,
-}));
-
-const StyledThumbWrapper = styled(View)<{
-  themeSize: ThemeSize;
-}>(({ theme, themeSize }) => ({
-  height: theme.__hd__.switch.heights[themeSize],
-  width: theme.__hd__.switch.widths[themeSize],
-  borderRadius: theme.__hd__.switch.radii.rounded,
+  backgroundColor: theme.__hd__.switch.colors.backgroundColors[themeVariant],
   display: 'flex',
   justifyContent: 'center',
 }));
@@ -47,4 +31,4 @@ const StyledKnot = styled(Animated.View)<{
   borderRadius: theme.__hd__.switch.radii.rounded,
 }));
 
-export { StyledWrapper, StyledDisabledWrapper, StyledThumbWrapper, StyledKnot };
+export { StyledWrapper, StyledKnot };

package/src/components/Switch/__tests__/StyledSwitch.spec.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { StyledWrapper, StyledKnot } from '../StyledSwitch';
+
+describe('StyledWrapper', () => {
+  it.each`
+    variant
+    ${'checked'}
+    ${'unchecked'}
+    ${'disabled-unchecked'}
+    ${'disabled-checked'}
+  `('renders correct style with variant $variant', ({ variant }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledWrapper themeVariant={variant} themeSize="medium" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledKnot', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(<StyledKnot themeSize="medium" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});