Ux 603 New Radio component

packages/Radio/src/Radio.js

@@ -7,24 +7,36 @@ import radioStyles from "./Radio.styles";
 import Group from "./components/Group";
 
 const propTypes = {
+  /** Used for aria-label on the radio input  */
   a11yText: PropTypes.string,
+  /** Used for label contents */
   children: PropTypes.node,
+  /** Describe if the radio is checked or not */
   isChecked: PropTypes.bool,
+  /** Describe if the radio is disabled or not */
   isDisabled: PropTypes.bool,
+  /* Controls if the radio is selected or not, never combine it with defaultIsSelected */
+  isSelected: PropTypes.bool,
+  /** Describe if the radio started as selected or not */
+  defaultIsSelected: PropTypes.bool,
+  /** Describe if the radio started as selected or not */
   canDeselect: PropTypes.bool,
+  /** On click prop added by Group component */
   onClick: PropTypes.func,
+  /** On click prop added by Group component */
   size: PropTypes.oneOf(ShirtSizes.DEFAULT),
-  value: PropTypes.shape({ id: PropTypes.string }).isRequired,
 };
 
 const defaultProps = {
   a11yText: null,
-  isChecked: false,
   canDeselect: false,
   children: null,
+  isChecked: false,
   isDisabled: false,
-  size: ShirtSizes.MEDIUM,
+  isSelected: false,
+  defaultIsSelected: false,
   onClick: () => {},
+  size: ShirtSizes.MEDIUM,
 };
 
 function Radio(props) {

packages/Radio/src/components/Group/Group.js

@@ -10,9 +10,6 @@ const propTypes = {
   /** Can deselect any radio */
   canDeselect: PropTypes.bool,
 
-  /** Function used to evaluate which radio is selected by default. */
-  defaultCheck: PropTypes.func,
-
   /** The individual radio items. */
   children: PropTypes.node,
 
@@ -30,21 +27,33 @@ const defaultProps = {
   a11yText: "",
   canDeselect: false,
   children: null,
-  defaultCheck: () => {},
   isDisabled: false,
   size: ShirtSizes.MEDIUM,
 };
 
 function Group(props) {
-  const { a11yText, canDeselect, children, defaultCheck, onChange, ...moreGroupProps } = props;
-  const defaultCheckedId = React.Children.toArray(children).find(defaultCheck).props.value.id;
-  const [checkedId, setCheckedId] = React.useState(defaultCheckedId || null);
-  const deselectableId = id => (checkedId === id ? null : id);
+  const { a11yText, canDeselect, children, onChange, ...moreGroupProps } = props;
+  const defaultCheckedIndex = React.Children.toArray(children).findIndex(child => child.props.defaultIsSelected);
+  const selectedIndex = React.Children.toArray(children).findIndex(child => child.props.isSelected);
+
+  const defaultIndex = () => {
+    if (defaultCheckedIndex !== -1) {
+      return defaultCheckedIndex;
+    }
+
+    return false;
+  };
+
+  const [checkedIndex, setCheckedIndex] = React.useState(defaultIndex());
+  if (selectedIndex !== -1 && selectedIndex !== checkedIndex) {
+    setCheckedIndex(selectedIndex);
+  }
+
+  const deselectableIndex = index => (checkedIndex === index ? null : index);
   const name = nanoid();
-  const handleRadioClick = child => {
-    const id = child.props.value.id;
-    onChange(id);
-    setCheckedId(canDeselect ? deselectableId(id) : id);
+  const handleRadioClick = index => {
+    onChange(index);
+    setCheckedIndex(canDeselect ? deselectableIndex(index) : index);
   };
 
   return (
@@ -53,8 +62,8 @@ function Group(props) {
         if (child && child.type && child.type.displayName === "Radio") {
           const childKey = { key: `Radio${index}` };
           return React.cloneElement(child, {
-            onClick: () => handleRadioClick(child),
-            isChecked: checkedId === child.props.value.id,
+            onClick: () => handleRadioClick(index),
+            isChecked: checkedIndex === index,
             canDeselect,
             name,
             ...childKey,

packages/Radio/stories/Radio.stories.js

@@ -1,7 +1,9 @@
 import { storiesOf } from "@storybook/react";
 import { withKnobs } from "@storybook/addon-knobs";
 import ShowcaseStory from "./examples/Showcase";
+import ControlledStory from "./examples/Controlled";
 
 storiesOf("Radio", module)
   .addDecorator(withKnobs)
-  .add("Showcase", ShowcaseStory);
+  .add("Showcase", ShowcaseStory)
+  .add("Controlled", ControlledStory);

packages/Radio/stories/examples/Controlled.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { Rule } from "storybook/assets/styles/common.styles";
+import Heading from "@paprika/heading";
+import { RadioStory } from "../Radio.stories.styles";
+import Radio from "../../src/Radio";
+
+export const radioItems = ["Radio 1", "Radio 2 label", "Radio 3 option"];
+
+const ExampleStory = props => {
+  const [selectedIndex, setSelectedIndex] = React.useState(1);
+  const handleIndexChange = e => {
+    setSelectedIndex(Number(e.target.value));
+  };
+  return (
+    <RadioStory>
+      <Heading level={2} displayLevel={3} isLight>
+        Setting a item as default selected
+      </Heading>
+      <Rule />
+      <Radio.Group
+        onChange={activeIndex => {
+          action("Radio selection changed to index ")(activeIndex);
+        }}
+        {...props}
+      >
+        {radioItems.map((item, index) => {
+          return (
+            <Radio key={item} defaultIsSelected={index === 2}>
+              {item}
+            </Radio>
+          );
+        })}
+      </Radio.Group>
+      <Rule />
+      <Heading level={2} displayLevel={3} isLight>
+        Controlling which item is selected
+      </Heading>
+      <Rule />
+      <Radio.Group
+        onChange={activeIndex => {
+          setSelectedIndex(activeIndex);
+          action("Radio selection changed to index ")(activeIndex);
+        }}
+        {...props}
+      >
+        {radioItems.map((item, index) => {
+          return (
+            <Radio key={item} isSelected={index === selectedIndex}>
+              {item}
+            </Radio>
+          );
+        })}
+      </Radio.Group>
+      <br />
+      Set Selected Index
+      <br />
+      <select onChange={handleIndexChange}>
+        {radioItems.map((item, index) => (
+          <option selected={index === selectedIndex} value={index}>
+            {item}
+          </option>
+        ))}
+      </select>
+    </RadioStory>
+  );
+};
+
+export default () => <ExampleStory />;

packages/Radio/stories/examples/Showcase.js

@@ -23,16 +23,15 @@ const ExampleStory = props => {
       <Tagline>Use the knobs to tinker with the props.</Tagline>
       <Rule />
       <Radio.Group
-        defaultCheck={check => check.props.value.id === "value 1"}
-        onChange={value => {
-          action("Radio selection changed to ")(value);
+        onChange={activeIndex => {
+          action("Radio selection changed to index ")(activeIndex);
         }}
         {...props}
       >
-        <Radio value={{ id: "value 1" }}>Radio 1</Radio>
-        <Radio value={{ id: "value 2" }}>Radio 2</Radio>
-        <Radio value={{ id: "value 3" }}>Radio 3</Radio>
-        <Radio value={{ id: "value 4" }}>Radio 4</Radio>
+        <Radio defaultIsSelected>Radio 1</Radio>
+        <Radio>Radio 2</Radio>
+        <Radio>Radio 3</Radio>
+        <Radio>Radio 4</Radio>
       </Radio.Group>
       <Rule />
     </RadioStory>