Adds bold prop to RadioGroup (#1928)

* WIP

* update generated stories

* test chromatic

---------

Co-authored-by: Adam Thompson <[email protected]>

Author: bruugey

.changeset/lemon-phones-check.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/radio-group': minor
+---
+
+Adds `bold` prop to RadioGroup, such that you can change whether the label is displayed with a bold font weight.

packages/radio-group/src/Radio/Radio.stories.tsx

@@ -17,6 +17,7 @@ const meta: StoryMetaType<typeof Radio> = {
         checked: [false, true],
         size: Object.values(Size),
         disabled: [false, true],
+        bold: [false, true],
       },
       args: {
         children: 'Radio',

packages/radio-group/src/Radio/Radio.tsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { fontWeights } from '@leafygreen-ui/tokens';
 import { Description, Label } from '@leafygreen-ui/typography';
 
 import { Size } from '../types';
@@ -55,6 +56,7 @@ function Radio({
   checked,
   size = Size.Default,
   description,
+  bold,
   ...rest
 }: RadioProps) {
   const { darkMode } = useDarkMode(darkModeProp);
@@ -75,6 +77,9 @@ function Radio({
             [css`
               font-size: 12px;
             `]: size === Size.XSmall, // TODO: keeping this style until XS is deprecated
+            [css`
+              font-weight: ${fontWeights.regular};
+            `]: !bold,
           },
           className,
         )}

packages/radio-group/src/Radio/Radio.types.ts

@@ -4,7 +4,7 @@ import { RadioGroupProps } from '..';
 
 export interface RadioProps
   extends Omit<HTMLElementProps<'input'>, 'size'>,
-    Pick<RadioGroupProps, 'darkMode' | 'size'> {
+    Pick<RadioGroupProps, 'darkMode' | 'size' | 'bold'> {
   /**
    * Used to determine what Radio is active.
    */

packages/radio-group/src/RadioGroup.story.tsx

@@ -20,6 +20,7 @@ const meta: StoryMetaType<typeof RadioGroup> = {
     generate: {
       combineArgs: {
         darkMode: [false, true],
+        bold: [false, true],
         size: Object.values(Size),
       },
     },
@@ -41,6 +42,7 @@ const meta: StoryMetaType<typeof RadioGroup> = {
   },
   argTypes: {
     children: { control: false },
+    bold: { control: 'boolean' },
     darkMode: storybookArgTypes.darkMode,
     size: {
       control: 'radio',
@@ -50,23 +52,50 @@ const meta: StoryMetaType<typeof RadioGroup> = {
 };
 export default meta;
 
-export const LiveExample: StoryFn<RadioGroupProps> = (
-  args: RadioGroupProps,
-) => <RadioGroup name="radio-group-default" {...args} />;
+export const LiveExample: StoryFn<RadioGroupProps> = ({
+  children,
+  ...args
+}: RadioGroupProps) => (
+  <RadioGroup name="radio-group-default" {...args}>
+    <Radio value="1">Radio Input 1</Radio>
+    <Radio default value="2" description="This is a description">
+      Radio Input 2
+    </Radio>
+    <Radio disabled value="Selection-4">
+      Disabled Option
+    </Radio>
+  </RadioGroup>
+);
 LiveExample.parameters = {
   chromatic: {
     disableSnapshot: true,
   },
 };
 
 export const Controlled: StoryFn<RadioGroupProps> = (args: RadioGroupProps) => {
-  const [activeRadio, setActiveRadio] = useState<string>('test1');
+  const [activeRadio, setActiveRadio] = useState<string>('1');
 
   const handleChange = (e: React.ChangeEvent) => {
     setActiveRadio((e.target as HTMLInputElement).value);
   };
 
-  return <RadioGroup {...args} onChange={handleChange} value={activeRadio} />;
+  return (
+    <RadioGroup {...args} onChange={handleChange} value={activeRadio}>
+      <Radio checked={activeRadio === '1'} value="1">
+        Radio Input 1
+      </Radio>
+      <Radio
+        checked={activeRadio === '2'}
+        value="2"
+        description="This is a description"
+      >
+        Radio Input 2
+      </Radio>
+      <Radio checked={activeRadio === '3'} disabled value="3">
+        Disabled Option
+      </Radio>
+    </RadioGroup>
+  );
 };
 Controlled.parameters = {
   chromatic: {

packages/radio-group/src/RadioGroup/RadioGroup.tsx

@@ -37,6 +37,7 @@ function RadioGroup({
   children,
   value: controlledValue,
   name: nameProp,
+  bold = true,
   ...rest
 }: RadioGroupProps) {
   let isControlled = controlledValue != null ? true : false,
@@ -87,6 +88,7 @@ function RadioGroup({
       darkMode,
       name,
       size,
+      bold,
     });
   });
 

packages/radio-group/src/RadioGroup/RadioGroup.types.ts

@@ -41,4 +41,11 @@ export interface RadioGroupProps extends HTMLElementProps<'div'> {
    * @default default
    */
   size?: Size;
+
+  /**
+   * Whether the label's font-weight is bold or regular.
+   * If left `undefined` this prop will default to `true` if a description is provided,
+   * otherwise defaults to `false`
+   */
+  bold?: boolean;
 }