@hero-design/rn 8.60.0 → 8.60.1-alpha.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 57.6s

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @hero-design/rn
 
+## 8.60.1-alpha.0
+
+### Patch Changes
+
+- [#2807](https://github.com/Thinkei/hero-design/pull/2807) [`391137af3`](https://github.com/Thinkei/hero-design/commit/391137af35cb9ae71da51d6863624da0251017aa) Thanks [@ttkien](https://github.com/ttkien)! - initial HDv9
+
+- Updated dependencies [[`5c76fdb0b`](https://github.com/Thinkei/hero-design/commit/5c76fdb0b3565456f30864c78e42cc9a589747c9), [`391137af3`](https://github.com/Thinkei/hero-design/commit/391137af35cb9ae71da51d6863624da0251017aa)]:
+  - @hero-design/colors@9.0.0-alpha.0
+
 ## 8.60.0
 
 ### Minor Changes

package/es/index.js

@@ -1292,7 +1292,9 @@ var BASE_COLORS = {
   theatreGold: '#a56822',
   uniformGreen: '#4d4628',
   yellow: '#fadb14',
-  windsorGrey: '#606065'
+  windsorGrey: '#606065',
+  mist: '#e8e9f8',
+  cloud: '#ccd9f5'
 };
 var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
   var _ref17 = _slicedToArray(_ref16, 2),
@@ -1301,15 +1303,17 @@ var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
   return Object.assign(Object.assign({}, acc), _defineProperty({}, key, createColorScales(value)));
 }, {});
 var blue$1 = colorScales.blue,
-  ultramarineBlue$2 = colorScales.ultramarineBlue,
+  cloud = colorScales.cloud,
+  deepSaffron$2 = colorScales.deepSaffron,
   green$1 = colorScales.green,
   grey$2 = colorScales.grey,
   grotesqueGreen = colorScales.grotesqueGreen,
-  deepSaffron$2 = colorScales.deepSaffron,
+  mist = colorScales.mist,
   pink$1 = colorScales.pink,
   purple$1 = colorScales.purple,
-  vermilion$2 = colorScales.vermilion,
   smalt = colorScales.smalt,
+  ultramarineBlue$2 = colorScales.ultramarineBlue,
+  vermilion$2 = colorScales.vermilion,
   violet$1 = colorScales.violet,
   yellow$1 = colorScales.yellow;
 var palette$b = {
@@ -1328,9 +1332,11 @@ var palette$b = {
   blueLight60: blue$1.lighten60,
   blueLight75: blue$1.lighten75,
   blueLight90: blue$1.lighten90,
+  cloudLight90: cloud.lighten90,
   dodgerBlue: ultramarineBlue$2.base,
   dodgerBlueDark15: ultramarineBlue$2.darken15,
   dodgerBlueDark30: ultramarineBlue$2.darken30,
+  dodgerBlueDark60: ultramarineBlue$2.darken60,
   dodgerBlueLight30: ultramarineBlue$2.lighten30,
   dodgerBlueLight45: ultramarineBlue$2.lighten45,
   dodgerBlueLight60: ultramarineBlue$2.lighten60,
@@ -1339,6 +1345,7 @@ var palette$b = {
   green: green$1.base,
   greenDark15: green$1.darken15,
   greenDark30: green$1.darken30,
+  greenDark60: green$1.darken60,
   greenDark75: green$1.darken75,
   greenLight30: green$1.lighten30,
   greenLight75: green$1.lighten75,
@@ -1349,6 +1356,7 @@ var palette$b = {
   greyDark45: grey$2.darken45,
   greyDark60: grey$2.darken60,
   greyDark75: grey$2.darken75,
+  greyLight30: grey$2.lighten30,
   greyLight45: grey$2.lighten45,
   greyLight60: grey$2.lighten60,
   greyLight75: grey$2.lighten75,
@@ -1362,20 +1370,27 @@ var palette$b = {
   grotesqueGreenLight60: grotesqueGreen.lighten60,
   grotesqueGreenLight75: grotesqueGreen.lighten75,
   grotesqueGreenLight90: grotesqueGreen.lighten90,
+  mistLight30: mist.lighten30,
+  mistLight60: mist.lighten60,
+  mistLight90: mist.lighten90,
   orange: deepSaffron$2.base,
   orangeDark15: deepSaffron$2.darken15,
   orangeDark30: deepSaffron$2.darken30,
+  orangeDark60: deepSaffron$2.darken60,
   orangeDark75: deepSaffron$2.darken75,
   orangeLight30: deepSaffron$2.lighten30,
+  orangeLight60: deepSaffron$2.lighten60,
   orangeLight75: deepSaffron$2.lighten75,
   orangeLight90: deepSaffron$2.lighten90,
   pink: pink$1.base,
   pinkDark15: pink$1.darken15,
   pinkDark30: pink$1.darken30,
   pinkDark45: pink$1.darken45,
+  pinkDark60: pink$1.darken60,
   pinkDark75: pink$1.darken75,
   pinkLight30: pink$1.lighten30,
   pinkLight45: pink$1.lighten45,
+  pinkLight60: pink$1.lighten60,
   pinkLight75: pink$1.lighten75,
   pinkLight90: pink$1.lighten90,
   purple: purple$1.base,
@@ -1418,6 +1433,7 @@ var palette$b = {
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
   yellowDark30: yellow$1.darken30,
+  yellowDark45: yellow$1.darken45,
   yellowDark75: yellow$1.darken75,
   yellowLight30: yellow$1.lighten30,
   yellowLight45: yellow$1.lighten45,
@@ -2934,11 +2950,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 +16167,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 +16195,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 +16232,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

@@ -1322,7 +1322,9 @@ var BASE_COLORS = {
   theatreGold: '#a56822',
   uniformGreen: '#4d4628',
   yellow: '#fadb14',
-  windsorGrey: '#606065'
+  windsorGrey: '#606065',
+  mist: '#e8e9f8',
+  cloud: '#ccd9f5'
 };
 var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
   var _ref17 = _slicedToArray(_ref16, 2),
@@ -1331,15 +1333,17 @@ var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
   return Object.assign(Object.assign({}, acc), _defineProperty({}, key, createColorScales(value)));
 }, {});
 var blue$1 = colorScales.blue,
-  ultramarineBlue$2 = colorScales.ultramarineBlue,
+  cloud = colorScales.cloud,
+  deepSaffron$2 = colorScales.deepSaffron,
   green$1 = colorScales.green,
   grey$2 = colorScales.grey,
   grotesqueGreen = colorScales.grotesqueGreen,
-  deepSaffron$2 = colorScales.deepSaffron,
+  mist = colorScales.mist,
   pink$1 = colorScales.pink,
   purple$1 = colorScales.purple,
-  vermilion$2 = colorScales.vermilion,
   smalt = colorScales.smalt,
+  ultramarineBlue$2 = colorScales.ultramarineBlue,
+  vermilion$2 = colorScales.vermilion,
   violet$1 = colorScales.violet,
   yellow$1 = colorScales.yellow;
 var palette$b = {
@@ -1358,9 +1362,11 @@ var palette$b = {
   blueLight60: blue$1.lighten60,
   blueLight75: blue$1.lighten75,
   blueLight90: blue$1.lighten90,
+  cloudLight90: cloud.lighten90,
   dodgerBlue: ultramarineBlue$2.base,
   dodgerBlueDark15: ultramarineBlue$2.darken15,
   dodgerBlueDark30: ultramarineBlue$2.darken30,
+  dodgerBlueDark60: ultramarineBlue$2.darken60,
   dodgerBlueLight30: ultramarineBlue$2.lighten30,
   dodgerBlueLight45: ultramarineBlue$2.lighten45,
   dodgerBlueLight60: ultramarineBlue$2.lighten60,
@@ -1369,6 +1375,7 @@ var palette$b = {
   green: green$1.base,
   greenDark15: green$1.darken15,
   greenDark30: green$1.darken30,
+  greenDark60: green$1.darken60,
   greenDark75: green$1.darken75,
   greenLight30: green$1.lighten30,
   greenLight75: green$1.lighten75,
@@ -1379,6 +1386,7 @@ var palette$b = {
   greyDark45: grey$2.darken45,
   greyDark60: grey$2.darken60,
   greyDark75: grey$2.darken75,
+  greyLight30: grey$2.lighten30,
   greyLight45: grey$2.lighten45,
   greyLight60: grey$2.lighten60,
   greyLight75: grey$2.lighten75,
@@ -1392,20 +1400,27 @@ var palette$b = {
   grotesqueGreenLight60: grotesqueGreen.lighten60,
   grotesqueGreenLight75: grotesqueGreen.lighten75,
   grotesqueGreenLight90: grotesqueGreen.lighten90,
+  mistLight30: mist.lighten30,
+  mistLight60: mist.lighten60,
+  mistLight90: mist.lighten90,
   orange: deepSaffron$2.base,
   orangeDark15: deepSaffron$2.darken15,
   orangeDark30: deepSaffron$2.darken30,
+  orangeDark60: deepSaffron$2.darken60,
   orangeDark75: deepSaffron$2.darken75,
   orangeLight30: deepSaffron$2.lighten30,
+  orangeLight60: deepSaffron$2.lighten60,
   orangeLight75: deepSaffron$2.lighten75,
   orangeLight90: deepSaffron$2.lighten90,
   pink: pink$1.base,
   pinkDark15: pink$1.darken15,
   pinkDark30: pink$1.darken30,
   pinkDark45: pink$1.darken45,
+  pinkDark60: pink$1.darken60,
   pinkDark75: pink$1.darken75,
   pinkLight30: pink$1.lighten30,
   pinkLight45: pink$1.lighten45,
+  pinkLight60: pink$1.lighten60,
   pinkLight75: pink$1.lighten75,
   pinkLight90: pink$1.lighten90,
   purple: purple$1.base,
@@ -1448,6 +1463,7 @@ var palette$b = {
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
   yellowDark30: yellow$1.darken30,
+  yellowDark45: yellow$1.darken45,
   yellowDark75: yellow$1.darken75,
   yellowLight30: yellow$1.lighten30,
   yellowLight45: yellow$1.lighten45,
@@ -2964,11 +2980,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 +16197,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 +16225,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 +16262,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.60.1-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.42.5",
+    "@hero-design/colors": "9.0.0-alpha.0",
     "date-fns": "^2.16.1",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"

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