diff --git a/package.json b/package.json index a0bcac44..77d8cc97 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "1.4.2", + "version": "1.5.0", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", diff --git a/src/radio/RadioGroup.tsx b/src/radio/RadioGroup.tsx index 1c9906dc..515e5ebe 100644 --- a/src/radio/RadioGroup.tsx +++ b/src/radio/RadioGroup.tsx @@ -24,6 +24,10 @@ export interface RadioGroupProps { * (Optional) For labelling the radio options */ label?: string; + /** + * The controlled value of the radio group + */ + value?: string | null; /** * Matches the `value` option of one of the Radio Children components */ diff --git a/stories/Radio.stories.tsx b/stories/Radio.stories.tsx index 99922a44..8af051be 100644 --- a/stories/Radio.stories.tsx +++ b/stories/Radio.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Meta, Story } from '@storybook/react'; import { Radio, RadioGroup, RadioGroupProps } from '../src/radio'; import { Card, Text, ActionButton } from '../src'; @@ -12,24 +12,25 @@ const meta: Meta = { }, design: { type: 'figma', - url: 'https://www.figma.com/file/Gs8BthCViFvipFh0gknwgg/Drift-Monitors?node-id=90%3A44', + url: + 'https://www.figma.com/file/Gs8BthCViFvipFh0gknwgg/Drift-Monitors?node-id=90%3A44', }, }, }; export default meta; const DefaultChildren = [ - , - , - , + , + , + , ]; -const Template: Story = (args) => { +const Template: Story = args => { return ( alert('clicked radio option ' + value)} + onChange={value => alert('clicked radio option ' + value)} > {args.children || DefaultChildren} @@ -38,11 +39,11 @@ const Template: Story = (args) => { ); }; -const SelectorExample: Story = (args) => ( +const SelectorExample: Story = args => ( alert('clicked radio option ' + value)} + onChange={value => alert('clicked radio option ' + value)} > Dogs @@ -86,18 +87,48 @@ const SomeChildren = () => ( ); -export const Gallery: Story = (args) => { +export const Gallery: Story = args => { return ( - - - {args.children || DefaultChildren} - -
-
- - {args.children || DefaultChildren} - -
+ + + + {args.children || DefaultChildren} + +
+
+ + {args.children || DefaultChildren} + +
+
+ ); +}; + +/** + * Controlled Radio Group + * Use this to control the selected value of the radio group via props + */ +export const Controlled: Story = args => { + const [value, setValue] = useState('cats'); + return ( + + Controlled Radio Group + + + {args.children || DefaultChildren} + +
+
+ + {args.children || DefaultChildren} + +
+
); };