@hero-design/rn 8.60.0 → 8.61.0

package/.turbo/turbo-build.log

@@ -2,4 +2,4 @@
 src/index.ts → lib/index.js, es/index.js...
 (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 57.4s
+created lib/index.js, es/index.js in 1m 0.6s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.61.0
+
+### Minor Changes
+
+- [#2786](https://github.com/Thinkei/hero-design/pull/2786) [`f5f4d1d55`](https://github.com/Thinkei/hero-design/commit/f5f4d1d55601f9ae3e37438f0928e9a6173ae260) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Radio.Group] Update indicator color and add inactiveIntent prop
+
 ## 8.60.0
 
 ### Minor Changes

package/es/index.js

@@ -2934,11 +2934,17 @@ var getProgressTheme = function getProgressTheme(theme) {
 
 var getRadioTheme = function getRadioTheme(theme) {
   var colors = {
-    circle: theme.colors.onDefaultGlobalSurface
+    circle: theme.colors.primary,
+    checked: theme.colors.highlightedSurface,
+    intents: {
+      light: theme.colors.defaultGlobalSurface,
+      dark: theme.colors.neutralGlobalSurface
+    }
   };
   var space = {
     circleLeftMargin: theme.space.small,
-    groupTopMargin: theme.space.xsmall
+    groupTopMarginSmall: theme.space.xsmall,
+    groupTopMarginMedium: theme.space.medium
   };
   var boundingBoxSize = theme.sizes.large;
   var innerPadding = theme.space.xsmall;
@@ -16145,9 +16151,18 @@ var InnerCircle = index$9(View)(function (_ref2) {
   };
 });
 var Spacer = index$9(View)(function (_ref3) {
-  var theme = _ref3.theme;
+  var theme = _ref3.theme,
+    themeIntent = _ref3.themeIntent;
+  return {
+    marginTop: themeIntent === 'light' ? theme.__hd__.radio.space.groupTopMarginSmall : theme.__hd__.radio.space.groupTopMarginMedium
+  };
+});
+var StyledRadio = index$9(List.Item)(function (_ref4) {
+  var theme = _ref4.theme,
+    themeIntent = _ref4.themeIntent,
+    themeChecked = _ref4.themeChecked;
   return {
-    marginTop: theme.__hd__.radio.space.groupTopMargin
+    backgroundColor: themeChecked ? theme.__hd__.radio.colors.checked : theme.__hd__.radio.colors.intents[themeIntent]
   };
 });
 
@@ -16164,17 +16179,23 @@ var Radio = function Radio(_ref2) {
     checked = _ref2$checked === void 0 ? false : _ref2$checked,
     onPress = _ref2.onPress,
     style = _ref2.style,
-    testID = _ref2.testID;
-  return /*#__PURE__*/React.createElement(List.BasicItem, {
+    subText = _ref2.subText,
+    testID = _ref2.testID,
+    _ref2$inactiveIntent = _ref2.inactiveIntent,
+    inactiveIntent = _ref2$inactiveIntent === void 0 ? 'light' : _ref2$inactiveIntent;
+  return /*#__PURE__*/React.createElement(StyledRadio, {
     onPress: onPress,
     selected: checked,
     title: text,
+    subtitle: subText,
     suffix: /*#__PURE__*/React.createElement(RadioCircle, {
       checked: checked,
       text: text
     }),
     style: style,
-    testID: testID
+    testID: testID,
+    themeIntent: inactiveIntent,
+    themeChecked: checked
   });
 };
 
@@ -16195,19 +16216,25 @@ var RadioGroup = function RadioGroup(_ref) {
     options = _ref.options,
     keyExtractor = _ref.keyExtractor,
     style = _ref.style,
-    testID = _ref.testID;
+    testID = _ref.testID,
+    _ref$inactiveIntent = _ref.inactiveIntent,
+    inactiveIntent = _ref$inactiveIntent === void 0 ? 'light' : _ref$inactiveIntent;
   return /*#__PURE__*/React.createElement(View, {
     style: style,
     testID: testID
   }, options.map(function (option, index) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: getKey(option, index, keyExtractor)
-    }, index !== 0 && /*#__PURE__*/React.createElement(Spacer, null), /*#__PURE__*/React.createElement(Radio, {
+    }, index !== 0 && /*#__PURE__*/React.createElement(Spacer, {
+      themeIntent: inactiveIntent
+    }), /*#__PURE__*/React.createElement(Radio, {
       text: option.text,
+      subText: option.subText,
       checked: option.value === value,
       onPress: function onPress() {
         return _onPress(option.value);
-      }
+      },
+      inactiveIntent: inactiveIntent
     }));
   }));
 };

package/lib/index.js

@@ -2964,11 +2964,17 @@ var getProgressTheme = function getProgressTheme(theme) {
 
 var getRadioTheme = function getRadioTheme(theme) {
   var colors = {
-    circle: theme.colors.onDefaultGlobalSurface
+    circle: theme.colors.primary,
+    checked: theme.colors.highlightedSurface,
+    intents: {
+      light: theme.colors.defaultGlobalSurface,
+      dark: theme.colors.neutralGlobalSurface
+    }
   };
   var space = {
     circleLeftMargin: theme.space.small,
-    groupTopMargin: theme.space.xsmall
+    groupTopMarginSmall: theme.space.xsmall,
+    groupTopMarginMedium: theme.space.medium
   };
   var boundingBoxSize = theme.sizes.large;
   var innerPadding = theme.space.xsmall;
@@ -16175,9 +16181,18 @@ var InnerCircle = index$9(reactNative.View)(function (_ref2) {
   };
 });
 var Spacer = index$9(reactNative.View)(function (_ref3) {
-  var theme = _ref3.theme;
+  var theme = _ref3.theme,
+    themeIntent = _ref3.themeIntent;
+  return {
+    marginTop: themeIntent === 'light' ? theme.__hd__.radio.space.groupTopMarginSmall : theme.__hd__.radio.space.groupTopMarginMedium
+  };
+});
+var StyledRadio = index$9(List.Item)(function (_ref4) {
+  var theme = _ref4.theme,
+    themeIntent = _ref4.themeIntent,
+    themeChecked = _ref4.themeChecked;
   return {
-    marginTop: theme.__hd__.radio.space.groupTopMargin
+    backgroundColor: themeChecked ? theme.__hd__.radio.colors.checked : theme.__hd__.radio.colors.intents[themeIntent]
   };
 });
 
@@ -16194,17 +16209,23 @@ var Radio = function Radio(_ref2) {
     checked = _ref2$checked === void 0 ? false : _ref2$checked,
     onPress = _ref2.onPress,
     style = _ref2.style,
-    testID = _ref2.testID;
-  return /*#__PURE__*/React__default["default"].createElement(List.BasicItem, {
+    subText = _ref2.subText,
+    testID = _ref2.testID,
+    _ref2$inactiveIntent = _ref2.inactiveIntent,
+    inactiveIntent = _ref2$inactiveIntent === void 0 ? 'light' : _ref2$inactiveIntent;
+  return /*#__PURE__*/React__default["default"].createElement(StyledRadio, {
     onPress: onPress,
     selected: checked,
     title: text,
+    subtitle: subText,
     suffix: /*#__PURE__*/React__default["default"].createElement(RadioCircle, {
       checked: checked,
       text: text
     }),
     style: style,
-    testID: testID
+    testID: testID,
+    themeIntent: inactiveIntent,
+    themeChecked: checked
   });
 };
 
@@ -16225,19 +16246,25 @@ var RadioGroup = function RadioGroup(_ref) {
     options = _ref.options,
     keyExtractor = _ref.keyExtractor,
     style = _ref.style,
-    testID = _ref.testID;
+    testID = _ref.testID,
+    _ref$inactiveIntent = _ref.inactiveIntent,
+    inactiveIntent = _ref$inactiveIntent === void 0 ? 'light' : _ref$inactiveIntent;
   return /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     style: style,
     testID: testID
   }, options.map(function (option, index) {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: getKey(option, index, keyExtractor)
-    }, index !== 0 && /*#__PURE__*/React__default["default"].createElement(Spacer, null), /*#__PURE__*/React__default["default"].createElement(Radio, {
+    }, index !== 0 && /*#__PURE__*/React__default["default"].createElement(Spacer, {
+      themeIntent: inactiveIntent
+    }), /*#__PURE__*/React__default["default"].createElement(Radio, {
       text: option.text,
+      subText: option.subText,
       checked: option.value === value,
       onPress: function onPress() {
         return _onPress(option.value);
-      }
+      },
+      inactiveIntent: inactiveIntent
     }));
   }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.60.0",
+  "version": "8.61.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

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();
   });
 });
 

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

@@ -9,17 +9,50 @@ const options = [
   { text: 'Nothing', value: 'nothing' },
 ];
 
+const optionsWithSubtext = [
+  { text: 'On Demand', subText: 'InstaPay Now', value: 'on_demand' },
+  { text: 'Daily', subText: 'InstaPay Daily', value: 'daily' },
+];
+
 describe('rendering', () => {
-  it('renders correctly', () => {
-    const { getByText, toJSON, queryAllByTestId } = renderWithTheme(
-      <RadioGroup options={options} value="nothing" onPress={jest.fn()} />
+  it.each`
+    inactiveIntent
+    ${'light'}
+    ${'dark'}
+  `(
+    'renders correctly with inactiveIntent=$inactiveIntent',
+    ({ inactiveIntent }) => {
+      const { getByText, toJSON, queryAllByTestId } = renderWithTheme(
+        <RadioGroup
+          inactiveIntent={inactiveIntent}
+          options={options}
+          value="nothing"
+          onPress={jest.fn()}
+        />
+      );
+
+      expect(getByText('Everything')).toBeDefined();
+      expect(getByText('Direct mentions only')).toBeDefined();
+      expect(getByText('Nothing')).toBeDefined();
+      expect(queryAllByTestId('Nothing-selected-circle')).toHaveLength(1);
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it('renders correctly with subtext', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <RadioGroup
+        options={optionsWithSubtext}
+        value="nothing"
+        onPress={jest.fn()}
+      />
     );
 
-    expect(getByText('Everything')).toBeDefined();
-    expect(getByText('Direct mentions only')).toBeDefined();
-    expect(getByText('Nothing')).toBeDefined();
-    expect(queryAllByTestId('Nothing-selected-circle')).toHaveLength(1);
     expect(toJSON()).toMatchSnapshot();
+    expect(getByText('On Demand')).toBeDefined();
+    expect(getByText('InstaPay Now')).toBeDefined();
+    expect(getByText('Daily')).toBeDefined();
+    expect(getByText('InstaPay Daily')).toBeDefined();
   });
 });