@hero-design/rn 7.20.1 → 7.22.0

package/src/components/Switch/SelectorSwitch/__tests__/Option.spec.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import Icon from '../../../Icon';
+import Option, { OptionContent } from '../Option';
+
+describe('Option', () => {
+  it('renders correctly when selected', () => {
+    const wrapper = renderWithTheme(
+      <Option
+        text="My Dashboard"
+        icon="user"
+        badge={{ type: 'status' }}
+        selected
+      />
+    );
+
+    expect(wrapper.queryAllByText('My Dashboard')).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when not selected', () => {
+    const wrapper = renderWithTheme(
+      <Option
+        text="My Dashboard"
+        icon="user"
+        badge={{ type: 'status' }}
+        selected={false}
+      />
+    );
+
+    expect(wrapper.queryAllByText('My Dashboard')).toHaveLength(0);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('OptionContent', () => {
+  it('renders correctly there is no badge', () => {
+    const wrapper = renderWithTheme(
+      <OptionContent content={<Icon icon="user" />} />
+    );
+
+    expect(
+      wrapper.queryAllByTestId('selector-switch-status-badge')
+    ).toHaveLength(0);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when there is a badge', () => {
+    const wrapper = renderWithTheme(
+      <OptionContent
+        content={<Icon icon="user" />}
+        badge={{ type: 'status' }}
+      />
+    );
+
+    expect(
+      wrapper.queryAllByTestId('selector-switch-status-badge')
+    ).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -0,0 +1,195 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Option renders correctly when not selected 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="selector-switch-status-badge"
+  >
+    <HeroIcon
+      name="user"
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="medium"
+    />
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Object {
+          "backgroundColor": "#de350b",
+          "borderRadius": 999,
+          "height": 8,
+          "opacity": 1,
+          "position": "absolute",
+          "right": -2,
+          "top": -2,
+          "transform": Array [
+            Object {
+              "scale": 1,
+            },
+          ],
+          "width": 8,
+        }
+      }
+      themeIntent="danger"
+    />
+  </View>
+</View>
+`;
+
+exports[`Option renders correctly when selected 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "flex": 1,
+        "justifyContent": "center",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="selector-switch-status-badge"
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="large"
+      themeFontWeight="regular"
+      themeIntent="inverted"
+    >
+      My Dashboard
+    </Text>
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Object {
+          "backgroundColor": "#de350b",
+          "borderRadius": 999,
+          "height": 8,
+          "opacity": 1,
+          "position": "absolute",
+          "right": -2,
+          "top": -2,
+          "transform": Array [
+            Object {
+              "scale": 1,
+            },
+          ],
+          "width": 8,
+        }
+      }
+      themeIntent="danger"
+    />
+  </View>
+</View>
+`;
+
+exports[`OptionContent renders correctly there is no badge 1`] = `
+<HeroIcon
+  name="user"
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontSize": 24,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`OptionContent renders correctly when there is a badge 1`] = `
+<View
+  style={
+    Object {
+      "paddingHorizontal": 8,
+    }
+  }
+  testID="selector-switch-status-badge"
+>
+  <HeroIcon
+    name="user"
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Object {
+        "backgroundColor": "#de350b",
+        "borderRadius": 999,
+        "height": 8,
+        "opacity": 1,
+        "position": "absolute",
+        "right": -2,
+        "top": -2,
+        "transform": Array [
+          Object {
+            "scale": 1,
+          },
+        ],
+        "width": 8,
+      }
+    }
+    themeIntent="danger"
+  />
+</View>
+`;

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectorSwitch renders correctly 1`] = `
+<View
+  accessible={true}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#f6f6f7",
+        "borderRadius": 999,
+        "flexDirection": "row",
+        "height": 56,
+        "padding": 4,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "flex": 1,
+          "justifyContent": "center",
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="large"
+      themeFontWeight="regular"
+      themeIntent="inverted"
+    >
+      My Dashboard
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "paddingHorizontal": 8,
+        }
+      }
+      testID="selector-switch-status-badge"
+    >
+      <HeroIcon
+        name="multiple-users"
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontSize": 24,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="text"
+        themeSize="medium"
+      />
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Object {
+            "backgroundColor": "#de350b",
+            "borderRadius": 999,
+            "height": 8,
+            "opacity": 1,
+            "position": "absolute",
+            "right": -2,
+            "top": -2,
+            "transform": Array [
+              Object {
+                "scale": 1,
+              },
+            ],
+            "width": 8,
+          }
+        }
+        themeIntent="danger"
+      />
+    </View>
+  </View>
+</View>
+`;

package/src/components/Switch/SelectorSwitch/__tests__/index.spec.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import SelectorSwitch from '..';
+
+type PermissionType = 'employee' | 'manager';
+
+describe('SelectorSwitch', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <SelectorSwitch<PermissionType>
+        options={[
+          {
+            value: 'employee',
+            text: 'My Dashboard',
+            icon: 'user',
+          },
+          {
+            value: 'manager',
+            text: 'Manager Dashboard',
+            icon: 'multiple-users',
+            badge: { type: 'status' },
+          },
+        ]}
+        value="employee"
+      />
+    );
+
+    expect(wrapper.queryAllByText('My Dashboard')).toHaveLength(1);
+    expect(wrapper.queryAllByText('Manager Dashboard')).toHaveLength(0);
+    expect(
+      wrapper.queryAllByTestId('selector-switch-status-badge')
+    ).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('triggers onPress correctly', () => {
+    const onPress = jest.fn();
+    const wrapper = renderWithTheme(
+      <SelectorSwitch<PermissionType>
+        options={[
+          {
+            value: 'employee',
+            text: 'My Dashboard',
+            icon: 'user',
+          },
+          {
+            value: 'manager',
+            text: 'Manager Dashboard',
+            icon: 'multiple-users',
+            badge: { type: 'status' },
+          },
+        ]}
+        value="manager"
+        onPress={onPress}
+      />
+    );
+
+    fireEvent.press(wrapper.getByText('Manager Dashboard'));
+    expect(onPress).toBeCalledTimes(1);
+  });
+});

package/src/components/Switch/SelectorSwitch/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import { StyleProp, TouchableWithoutFeedback, ViewStyle } from 'react-native';
+import { StyledWrapper } from './StyledSelectorSwitch';
+import type { IconName } from '../../Icon';
+import Option from './Option';
+
+type StatusBadgeType = {
+  type: 'status';
+};
+export type BadgeConfigType = StatusBadgeType;
+
+export type OptionType<T> = {
+  value: T;
+  text: string;
+  icon: IconName;
+  badge?: BadgeConfigType;
+};
+
+export interface SelectorSwitchProps<T> {
+  /**
+   * Array of exactly TWO options to switch between.
+   */
+  options: [OptionType<T>, OptionType<T>];
+  /**
+   * Current selected value.
+   */
+  value: T;
+  /**
+   *  Callback called when an option is pressed.
+   */
+  onPress?: (value: T) => void;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const SelectorSwitch = <T,>({
+  options,
+  value,
+  onPress,
+  style,
+  testID,
+}: SelectorSwitchProps<T>): ReactElement => (
+  <TouchableWithoutFeedback onPress={() => onPress(value)} testID={testID}>
+    <StyledWrapper style={style}>
+      {options.map((opt, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Option {...opt} selected={opt.value === value} key={index} />
+      ))}
+    </StyledWrapper>
+  </TouchableWithoutFeedback>
+);
+
+export default SelectorSwitch;

package/src/components/Switch/StyledSwitch.tsx

@@ -13,8 +13,8 @@ const StyledWrapper = styled(View)<{
   themeVariant: Variant;
   themeSize: ThemeSize;
 }>(({ theme, themeVariant, themeSize }) => ({
-  height: theme.__hd__.switch.heights[themeSize],
-  width: theme.__hd__.switch.widths[themeSize],
+  height: theme.__hd__.switch.sizes.heights[themeSize],
+  width: theme.__hd__.switch.sizes.widths[themeSize],
   paddingHorizontal: theme.__hd__.switch.spaces[themeSize],
   borderRadius: theme.__hd__.switch.radii.rounded,
   backgroundColor: theme.__hd__.switch.colors.backgroundColors[themeVariant],
@@ -25,8 +25,8 @@ const StyledWrapper = styled(View)<{
 const StyledKnot = styled(Animated.View)<{
   themeSize: ThemeSize;
 }>(({ theme, themeSize }) => ({
-  width: theme.__hd__.switch.thumbSizes[themeSize],
-  height: theme.__hd__.switch.thumbSizes[themeSize],
+  width: theme.__hd__.switch.sizes.thumbs[themeSize],
+  height: theme.__hd__.switch.sizes.thumbs[themeSize],
   backgroundColor: theme.__hd__.switch.colors.thumb,
   borderRadius: theme.__hd__.switch.radii.rounded,
 }));

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

@@ -8,8 +8,8 @@ exports[`StyledKnot renders correct style 1`] = `
     Object {
       "backgroundColor": "#ffffff",
       "borderRadius": 999,
-      "height": 20.8,
-      "width": 20.8,
+      "height": 24,
+      "width": 24,
     }
   }
   themeSize="medium"
@@ -24,10 +24,10 @@ exports[`StyledWrapper renders correct style with variant checked 1`] = `
         "backgroundColor": "#8505a2",
         "borderRadius": 999,
         "display": "flex",
-        "height": 28.799999999999997,
+        "height": 32,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 56,
+        "width": 64,
       },
       undefined,
     ]
@@ -45,10 +45,10 @@ exports[`StyledWrapper renders correct style with variant disabled-checked 1`] =
         "backgroundColor": "#c282d1",
         "borderRadius": 999,
         "display": "flex",
-        "height": 28.799999999999997,
+        "height": 32,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 56,
+        "width": 64,
       },
       undefined,
     ]
@@ -66,10 +66,10 @@ exports[`StyledWrapper renders correct style with variant disabled-unchecked 1`]
         "backgroundColor": "#ccced1",
         "borderRadius": 999,
         "display": "flex",
-        "height": 28.799999999999997,
+        "height": 32,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 56,
+        "width": 64,
       },
       undefined,
     ]
@@ -87,10 +87,10 @@ exports[`StyledWrapper renders correct style with variant unchecked 1`] = `
         "backgroundColor": "#808f91",
         "borderRadius": 999,
         "display": "flex",
-        "height": 28.799999999999997,
+        "height": 32,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 56,
+        "width": 64,
       },
       undefined,
     ]

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

@@ -22,10 +22,10 @@ exports[`Switch renders correctly 1`] = `
         "backgroundColor": "#808f91",
         "borderRadius": 999,
         "display": "flex",
-        "height": 28.799999999999997,
+        "height": 32,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 56,
+        "width": 64,
       },
       undefined,
     ]
@@ -41,9 +41,9 @@ exports[`Switch renders correctly 1`] = `
       Object {
         "backgroundColor": "#ffffff",
         "borderRadius": 999,
-        "height": 20.8,
+        "height": 24,
         "left": 0,
-        "width": 20.8,
+        "width": 24,
       }
     }
     themeSize="medium"
@@ -73,10 +73,10 @@ exports[`Switch trigger press function correctly 1`] = `
         "backgroundColor": "#808f91",
         "borderRadius": 999,
         "display": "flex",
-        "height": 28.799999999999997,
+        "height": 32,
         "justifyContent": "center",
         "paddingHorizontal": 4,
-        "width": 56,
+        "width": 64,
       },
       undefined,
     ]
@@ -92,9 +92,9 @@ exports[`Switch trigger press function correctly 1`] = `
       Object {
         "backgroundColor": "#ffffff",
         "borderRadius": 999,
-        "height": 20.8,
+        "height": 24,
         "left": 0,
-        "width": 20.8,
+        "width": 24,
       }
     }
     themeSize="medium"

package/src/components/Switch/index.tsx

@@ -6,6 +6,7 @@ import { Animated, Easing, TouchableWithoutFeedback } from 'react-native';
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { StyledKnot, StyledWrapper, Variant } from './StyledSwitch';
+import SelectorSwitch from './SelectorSwitch';
 
 export interface SwitchProps {
   /**
@@ -60,10 +61,11 @@ const Switch = ({
   const variant = getVariant({ disabled, checked });
 
   const offset = checked
-    ? theme.__hd__.switch.widths[size] -
-      theme.__hd__.switch.thumbSizes[size] -
-      theme.__hd__.switch.spaces[size] * 2
-    : theme.__hd__.switch.spaces.inactive;
+    ? (theme.__hd__.switch.sizes.widths[size] -
+        theme.__hd__.switch.sizes.thumbs[size]) /
+        2 +
+      theme.__hd__.switch.sizes.thumbs[size] / 2
+    : 0;
 
   const [animatedOffset] = useState(() => new Animated.Value(offset));
 
@@ -87,4 +89,6 @@ const Switch = ({
   );
 };
 
-export default Switch;
+export default Object.assign(Switch, {
+  Selector: SelectorSwitch,
+});