@hero-design/rn 8.59.0 → 8.60.1-alpha.0

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

@@ -28,58 +28,65 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      [
-        {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "elevation": 3,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "padding": 20,
-          "shadowColor": "#001f23",
-          "shadowOffset": {
-            "height": 2,
-            "width": 0,
-          },
-          "shadowOpacity": 0.12,
-          "shadowRadius": 4,
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#001f23",
+        "borderRadius": 999,
+        "bottom": undefined,
+        "elevation": 3,
+        "flexDirection": "row",
+        "height": 64,
+        "justifyContent": "center",
+        "padding": 20,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
         },
-        [
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+        "transform": [
           {
-            "backgroundColor": "#001f23",
-          },
-          {
-            "bottom": undefined,
+            "translateY": 0,
           },
         ],
-      ]
+      }
     }
   >
-    <HeroIcon
-      name="add"
+    <View
+      collapsable={false}
       style={
-        [
-          {
-            "color": "#001f23",
-            "fontSize": 24,
-          },
+        {
+          "flexDirection": "row",
+          "opacity": 1,
+        }
+      }
+    >
+      <HeroIcon
+        name="add"
+        style={
           [
             {
-              "color": "#ffffff",
-              "lineHeight": 24,
-              "textAlign": "center",
-              "textAlignVertical": "center",
+              "color": "#001f23",
+              "fontSize": 24,
             },
-            undefined,
-          ],
-        ]
-      }
-      testID="styled-fab-icon"
-      themeIntent="text"
-      themeSize="medium"
-    />
+            [
+              {
+                "color": "#ffffff",
+                "lineHeight": 24,
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="styled-fab-icon"
+        themeIntent="text"
+        themeSize="medium"
+      />
+    </View>
   </View>
   <View
     pointerEvents="box-none"
@@ -132,86 +139,93 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      [
-        {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "elevation": 3,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "padding": 20,
-          "shadowColor": "#001f23",
-          "shadowOffset": {
-            "height": 2,
-            "width": 0,
-          },
-          "shadowOpacity": 0.12,
-          "shadowRadius": 4,
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#001f23",
+        "borderRadius": 999,
+        "bottom": undefined,
+        "elevation": 3,
+        "flexDirection": "row",
+        "height": 64,
+        "justifyContent": "center",
+        "padding": 20,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
         },
-        [
-          {
-            "backgroundColor": "#001f23",
-          },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+        "transform": [
           {
-            "bottom": undefined,
+            "translateY": 0,
           },
         ],
-      ]
+      }
     }
   >
     <View
+      collapsable={false}
       style={
-        [
-          {},
-          [
-            {
-              "alignItems": "center",
-              "height": 24,
-              "justifyContent": "center",
-              "width": 24,
-            },
-            undefined,
-          ],
-        ]
+        {
+          "flexDirection": "row",
+          "opacity": 1,
+        }
       }
     >
       <View
-        collapsable={false}
         style={
-          {
-            "transform": [
+          [
+            {},
+            [
               {
-                "rotate": "0deg",
+                "alignItems": "center",
+                "height": 24,
+                "justifyContent": "center",
+                "width": 24,
               },
+              undefined,
             ],
-          }
+          ]
         }
       >
-        <HeroIcon
-          name="add"
+        <View
+          collapsable={false}
           style={
-            [
-              {
-                "color": "#001f23",
-                "fontSize": 16,
-              },
-              [
+            {
+              "transform": [
                 {
-                  "color": "#ffffff",
-                  "lineHeight": 24,
-                  "textAlign": "center",
-                  "textAlignVertical": "center",
+                  "rotate": "0deg",
                 },
-                {},
               ],
-            ]
+            }
           }
-          testID="animated-fab-icon"
-          themeIntent="text"
-          themeSize="xsmall"
-        />
+        >
+          <HeroIcon
+            name="add"
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontSize": 16,
+                },
+                [
+                  {
+                    "color": "#ffffff",
+                    "lineHeight": 24,
+                    "textAlign": "center",
+                    "textAlignVertical": "center",
+                  },
+                  {},
+                ],
+              ]
+            }
+            testID="animated-fab-icon"
+            themeIntent="text"
+            themeSize="xsmall"
+          />
+        </View>
       </View>
     </View>
   </View>
@@ -266,63 +280,96 @@ exports[`FAB when title has value renders correctly 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      [
-        {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "elevation": 3,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "padding": 20,
-          "shadowColor": "#001f23",
-          "shadowOffset": {
-            "height": 2,
-            "width": 0,
-          },
-          "shadowOpacity": 0.12,
-          "shadowRadius": 4,
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#001f23",
+        "borderRadius": 999,
+        "bottom": undefined,
+        "elevation": 3,
+        "flexDirection": "row",
+        "height": 64,
+        "justifyContent": "center",
+        "padding": 20,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
         },
-        [
-          {
-            "backgroundColor": "#001f23",
-          },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+        "transform": [
           {
-            "bottom": undefined,
+            "translateY": 0,
           },
         ],
-      ]
+      }
     }
   >
     <View
+      collapsable={false}
       style={
-        [
-          {},
-          [
-            {
-              "alignItems": "center",
-              "height": 24,
-              "justifyContent": "center",
-              "width": 24,
-            },
-            undefined,
-          ],
-        ]
+        {
+          "flexDirection": "row",
+          "opacity": 1,
+        }
       }
     >
-      <HeroIcon
-        name="pencil"
+      <View
+        style={
+          [
+            {},
+            [
+              {
+                "alignItems": "center",
+                "height": 24,
+                "justifyContent": "center",
+                "width": 24,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        <HeroIcon
+          name="pencil"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 16,
+              },
+              [
+                {
+                  "color": "#ffffff",
+                  "lineHeight": 24,
+                  "textAlign": "center",
+                  "textAlignVertical": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="styled-fab-icon"
+          themeIntent="text"
+          themeSize="xsmall"
+        />
+      </View>
+      <Text
+        allowFontScaling={false}
         style={
           [
             {
               "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
             },
             [
               {
                 "color": "#ffffff",
-                "lineHeight": 24,
+                "marginHorizontal": 8,
                 "textAlign": "center",
                 "textAlignVertical": "center",
               },
@@ -330,39 +377,13 @@ exports[`FAB when title has value renders correctly 1`] = `
             ],
           ]
         }
-        testID="styled-fab-icon"
-        themeIntent="text"
-        themeSize="xsmall"
-      />
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="regular"
+      >
+        Shout out
+      </Text>
     </View>
-    <Text
-      allowFontScaling={false}
-      style={
-        [
-          {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
-            "letterSpacing": 0.48,
-            "lineHeight": 24,
-          },
-          [
-            {
-              "color": "#ffffff",
-              "marginHorizontal": 8,
-              "textAlign": "center",
-              "textAlignVertical": "center",
-            },
-            undefined,
-          ],
-        ]
-      }
-      themeIntent="body"
-      themeTypeface="neutral"
-      themeVariant="regular"
-    >
-      Shout out
-    </Text>
   </View>
   <View
     pointerEvents="box-none"

package/src/components/Radio/Radio.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
 import type { ReactElement } from 'react';
+import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-import List from '../List';
-import { Circle, InnerCircle } from './StyledRadio';
+import { Circle, InnerCircle, StyledRadio } from './StyledRadio';
 
 export interface RadioProps {
   /**
@@ -22,10 +21,18 @@ export interface RadioProps {
    * Additional style.
    */
   style?: StyleProp<ViewStyle>;
+  /**
+   * Radio subtext.
+   */
+  subText?: string;
   /**
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Idle background color of the Radio.
+   */
+  inactiveIntent?: 'light' | 'dark';
 }
 
 const RadioCircle = ({
@@ -42,15 +49,20 @@ const Radio = ({
   checked = false,
   onPress,
   style,
+  subText,
   testID,
+  inactiveIntent = 'light',
 }: RadioProps): ReactElement => (
-  <List.BasicItem
+  <StyledRadio
     onPress={onPress}
     selected={checked}
     title={text}
+    subtitle={subText}
     suffix={<RadioCircle checked={checked} text={text} />}
     style={style}
     testID={testID}
+    themeIntent={inactiveIntent}
+    themeChecked={checked}
   />
 );
 

package/src/components/Radio/RadioGroup.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { View } from 'react-native';
 import type { ReactElement } from 'react';
+import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
 import Radio from './Radio';
 import { Spacer } from './StyledRadio';
 import type { OptionType } from './types';
@@ -32,6 +32,10 @@ export interface RadioGroupProps<T> {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Idle background color of the Radio.
+   */
+  inactiveIntent?: 'light' | 'dark';
 }
 
 function getKey<T>(
@@ -58,15 +62,18 @@ const RadioGroup = <T,>({
   keyExtractor,
   style,
   testID,
+  inactiveIntent = 'light',
 }: RadioGroupProps<T>): ReactElement => (
   <View style={style} testID={testID}>
     {options.map((option, index) => (
       <React.Fragment key={getKey(option, index, keyExtractor)}>
-        {index !== 0 && <Spacer />}
+        {index !== 0 && <Spacer themeIntent={inactiveIntent} />}
         <Radio
           text={option.text}
+          subText={option.subText}
           checked={option.value === value}
           onPress={() => onPress(option.value)}
+          inactiveIntent={inactiveIntent}
         />
       </React.Fragment>
     ))}

package/src/components/Radio/StyledRadio.tsx

@@ -1,5 +1,8 @@
 import { View } from 'react-native';
 import styled from '@emotion/native';
+import List from '../List';
+
+type RadioIntent = 'light' | 'dark';
 
 const Circle = styled(View)(({ theme }) => ({
   height: theme.__hd__.radio.sizes.circle,
@@ -18,8 +21,22 @@ const InnerCircle = styled(View)(({ theme }) => ({
   backgroundColor: theme.__hd__.radio.colors.circle,
 }));
 
-const Spacer = styled(View)(({ theme }) => ({
-  marginTop: theme.__hd__.radio.space.groupTopMargin,
+const Spacer = styled(View)<{ themeIntent: RadioIntent }>(
+  ({ theme, themeIntent }) => ({
+    marginTop:
+      themeIntent === 'light'
+        ? theme.__hd__.radio.space.groupTopMarginSmall
+        : theme.__hd__.radio.space.groupTopMarginMedium,
+  })
+);
+
+const StyledRadio = styled(List.Item)<{
+  themeIntent: RadioIntent;
+  themeChecked: boolean;
+}>(({ theme, themeIntent, themeChecked }) => ({
+  backgroundColor: themeChecked
+    ? theme.__hd__.radio.colors.checked
+    : theme.__hd__.radio.colors.intents[themeIntent],
 }));
 
-export { Circle, InnerCircle, Spacer };
+export { Circle, InnerCircle, Spacer, StyledRadio };

package/src/components/Radio/__tests__/Radio.spec.tsx

@@ -4,24 +4,57 @@ import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Radio from '../Radio';
 
 describe('rendering', () => {
-  it('renders correctly when checked', () => {
-    const { getByText, queryAllByTestId, toJSON } = renderWithTheme(
-      <Radio text="Option A" onPress={jest.fn} checked />
-    );
+  it.each`
+    inactiveIntent
+    ${'light'}
+    ${'dark'}
+  `(
+    'renders correctly when checked with inactiveIntent=$inactiveIntent',
+    ({ inactiveIntent }) => {
+      const { getByText, queryAllByTestId, toJSON } = renderWithTheme(
+        <Radio
+          inactiveIntent={inactiveIntent}
+          text="Option A"
+          onPress={jest.fn}
+          checked
+        />
+      );
 
-    expect(getByText('Option A')).toBeDefined();
-    expect(queryAllByTestId('Option A-selected-circle')).toHaveLength(1);
-    expect(toJSON()).toMatchSnapshot();
-  });
+      expect(getByText('Option A')).toBeDefined();
+      expect(queryAllByTestId('Option A-selected-circle')).toHaveLength(1);
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
 
-  it('renders correctly when not checked', () => {
-    const { getByText, toJSON, queryAllByTestId } = renderWithTheme(
-      <Radio text="Option A" onPress={jest.fn} checked={false} />
+  it.each`
+    inactiveIntent
+    ${'light'}
+    ${'dark'}
+  `(
+    'renders correctly when not checked with inactiveIntent=$inactiveIntent',
+    ({ inactiveIntent }) => {
+      const { getByText, toJSON, queryAllByTestId } = renderWithTheme(
+        <Radio
+          inactiveIntent={inactiveIntent}
+          text="Option A"
+          onPress={jest.fn}
+          checked={false}
+        />
+      );
+
+      expect(getByText('Option A')).toBeDefined();
+      expect(queryAllByTestId('Option A-selected-circle')).toHaveLength(0);
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it('allows rendering of subtext', () => {
+    const { getByText } = renderWithTheme(
+      <Radio text="Option A" subText="Option label" onPress={jest.fn} checked />
     );
 
     expect(getByText('Option A')).toBeDefined();
-    expect(queryAllByTestId('Option A-selected-circle')).toHaveLength(0);
-    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Option label')).toBeDefined();
   });
 });