-
-
- First Value
-
-
-
- Second Value
-
-
-
- Third Value
+
+
+
+
+
+
+
+
+
+
+ RadioButtonGroup
+
+
+ selected minimal usage
+
+
+
+
+
+ Story Source
+
+
+
+
+
+ <
+ RadioButtonGroup
+
+
+
+
+
+
+
+
+ name
+
+
+ =
+
+
+ "
+ rbg
+ "
+
+
+
+
+
+
+
+
+
+
+ label
+
+
+ =
+
+
+ "
+ Radio Button Group
+ "
+
+
+
+
+
+
+
+
+
+
+ onBlur
+
+
+ =
+
+
+ {
+
+ Radio Button Blur()
+
+ }
+
+
+
+
+
+
+
+
+
+
+ onChange
+
+
+ =
+
+
+ {
+
+ onChange()
+
+ }
+
+
+
+
+
+
+
+
+
+
+ onClick
+
+
+ =
+
+
+ {
+
+ onClick()
+
+ }
+
+
+
+
+
+
+
+
+
+
+ onFocus
+
+
+ =
+
+
+ {
+
+ onFocus()
+
+ }
+
+
+
+
+
+
+
+
+
+
+ onKeyDown
+
+
+ =
+
+
+ {
+
+ onKeyDown()
+
+ }
+
+
+
+
+
+
+
+
+
+
+ selectedIndex
+
+
+ =
+
+
+ {
+
+ 1
+
+ }
+
+
+
+
+
+
+
+ >
+
+
+
+
+
+ <
+ RadioButton
+
+
+
+
+
+ value
+
+
+ =
+
+
+ "
+ jaebaebae
+ "
+
+
+
+
+
+
+
+ >
+
+
+
+
+ First Value
+
+
+
+
+ </
+ RadioButton
+ >
+
+
+
+
+
+
+ <
+ RadioButton
+
+
+
+
+
+ value
+
+
+ =
+
+
+ "
+ value2
+ "
+
+
+
+
+
+
+
+ >
+
+
+
+
+ Second Value
+
+
+
+
+ </
+ RadioButton
+ >
+
+
+
+
+
+
+ <
+ RadioButton
+
+
+
+
+
+ value
+
+
+ =
+
+
+ "
+ value3
+ "
+
+
+
+
+
+
+
+ >
+
+
+
+
+ Third Value
+
+
+
+
+ </
+ RadioButton
+ >
+
+
+
+
+
+ </
+ RadioButtonGroup
+ >
+
+
+
+
+
+
+ Prop Types
+
+
+
+ "
+ RadioButton
+ " Component
+
+
+
+
+ |
+ property
+ |
+
+ propType
+ |
+
+ required
+ |
+
+ default
+ |
+
+ description
+ |
+
+
+
+
+ |
+ children
+ |
+
+
+ |
+
+ -
+ |
+
+ -
+ |
+ |
+
+
+ |
+ index
+ |
+
+
+ |
+
+ -
+ |
+
+ -
+ |
+ |
+
+
+ |
+ isChecked
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ false
+
+ }
+
+ |
+ |
+
+
+ |
+ name
+ |
+
+
+ |
+
+ -
+ |
+
+ -
+ |
+ |
+
+
+ |
+ onBlur
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onBlur()
+
+ }
+
+ |
+ |
+
+
+ |
+ onClick
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onClick()
+
+ }
+
+ |
+ |
+
+
+ |
+ onFocus
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onFocus()
+
+ }
+
+ |
+ |
+
+
+ |
+ onKeyDown
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onKeyDown()
+
+ }
+
+ |
+ |
+
+
+ |
+ value
+ |
+
+
+ |
+
+ yes
+ |
+
+ -
+ |
+ |
+
+
+
+
+
+
+ "
+ RadioButtonGroup
+ " Component
+
+
+
+
+ |
+ property
+ |
+
+ propType
+ |
+
+ required
+ |
+
+ default
+ |
+
+ description
+ |
+
+
+
+
+ |
+ children
+ |
+
+
+ |
+
+ yes
+ |
+
+ -
+ |
+ |
+
+
+ |
+ label
+ |
+
+
+ |
+
+ yes
+ |
+
+ -
+ |
+ |
+
+
+ |
+ name
+ |
+
+
+ |
+
+ yes
+ |
+
+ -
+ |
+ |
+
+
+ |
+ onBlur
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onBlur()
+
+ }
+
+ |
+ |
+
+
+ |
+ onChange
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onChange()
+
+ }
+
+ |
+ |
+
+
+ |
+ onClick
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onClick()
+
+ }
+
+ |
+ |
+
+
+ |
+ onFocus
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onFocus()
+
+ }
+
+ |
+ |
+
+
+ |
+ onKeyDown
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onKeyDown()
+
+ }
+
+ |
+ |
+
+
+ |
+ selectedIndex
+ |
+
+
+ |
+
+ -
+ |
+
+ -
+ |
+ |
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots RadioButtonGroup unselected minimal usage 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+ RadioButtonGroup
+
+
+ unselected minimal usage
+
+
+
+
+
+ Story Source
+
+
+
+
+
+ <
+ RadioButtonGroup
+
+
+
+
+
+
+
+
+ name
+
+
+ =
+
+
+ "
+ rbg
+ "
+
+
+
+
+
+
+
+
+
+
+ label
+
+
+ =
+
+
+ "
+ Radio Button Group
+ "
+
+
+
+
+
+
+
+
+
+
+ onBlur
+
+
+ =
+
+
+ {
+
+ Radio Button Blur()
+
+ }
+
+
+
+
+
+
+
+
+
+
+ onChange
+
+
+ =
+
+
+ {
+
+ onChange()
+
+ }
+
+
+
+
+
+
+
+
+
+
+ onClick
+
+
+ =
+
+
+ {
+
+ onClick()
+
+ }
+
+
+
+
+
+
+
+
+
+
+ onFocus
+
+
+ =
+
+
+ {
+
+ onFocus()
+
+ }
+
+
+
+
+
+
+
+
+
+
+ onKeyDown
+
+
+ =
+
+
+ {
+
+ onKeyDown()
+
+ }
+
+
+
+
+
+
+
+ >
+
+
+
+
+
+ <
+ RadioButton
+
+
+
+
+
+ value
+
+
+ =
+
+
+ "
+ jaebaebae
+ "
+
+
+
+
+
+
+
+ >
+
+
+
+
+ First Value
+
+
+
+
+ </
+ RadioButton
+ >
+
+
+
+
+
+
+ <
+ RadioButton
+
+
+
+
+
+ value
+
+
+ =
+
+
+ "
+ value2
+ "
+
+
+
+
+
+
+
+ >
+
+
+
+
+ Second Value
+
+
+
+
+ </
+ RadioButton
+ >
+
+
+
+
+
+
+ <
+ RadioButton
+
+
+
+
+
+ value
+
+
+ =
+
+
+ "
+ value3
+ "
+
+
+
+
+
+
+
+ >
+
+
+
+
+ Third Value
+
+
+
+
+ </
+ RadioButton
+ >
+
+
+
+
+
+ </
+ RadioButtonGroup
+ >
+
+
+
+
+
+
+ Prop Types
+
+
+
+ "
+ RadioButton
+ " Component
+
+
+
+
+ |
+ property
+ |
+
+ propType
+ |
+
+ required
+ |
+
+ default
+ |
+
+ description
+ |
+
+
+
+
+ |
+ children
+ |
+
+
+ |
+
+ -
+ |
+
+ -
+ |
+ |
+
+
+ |
+ index
+ |
+
+
+ |
+
+ -
+ |
+
+ -
+ |
+ |
+
+
+ |
+ isChecked
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ false
+
+ }
+
+ |
+ |
+
+
+ |
+ name
+ |
+
+
+ |
+
+ -
+ |
+
+ -
+ |
+ |
+
+
+ |
+ onBlur
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onBlur()
+
+ }
+
+ |
+ |
+
+
+ |
+ onClick
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onClick()
+
+ }
+
+ |
+ |
+
+
+ |
+ onFocus
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onFocus()
+
+ }
+
+ |
+ |
+
+
+ |
+ onKeyDown
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onKeyDown()
+
+ }
+
+ |
+ |
+
+
+ |
+ value
+ |
+
+
+ |
+
+ yes
+ |
+
+ -
+ |
+ |
+
+
+
+
+
+
+ "
+ RadioButtonGroup
+ " Component
+
+
+
+
+ |
+ property
+ |
+
+ propType
+ |
+
+ required
+ |
+
+ default
+ |
+
+ description
+ |
+
+
+
+
+ |
+ children
+ |
+
+
+ |
+
+ yes
+ |
+
+ -
+ |
+ |
+
+
+ |
+ label
+ |
+
+
+ |
+
+ yes
+ |
+
+ -
+ |
+ |
+
+
+ |
+ name
+ |
+
+
+ |
+
+ yes
+ |
+
+ -
+ |
+ |
+
+
+ |
+ onBlur
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onBlur()
+
+ }
+
+ |
+ |
+
+
+ |
+ onChange
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onChange()
+
+ }
+
+ |
+ |
+
+
+ |
+ onClick
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onClick()
+
+ }
+
+ |
+ |
+
+
+ |
+ onFocus
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onFocus()
+
+ }
+
+ |
+ |
+
+
+ |
+ onKeyDown
+ |
+
+
+ |
+
+ -
+ |
+
+
+ {
+
+ onKeyDown()
+
+ }
+
+ |
+ |
+
+
+ |
+ selectedIndex
+ |
+
+
+ |
+
+ -
+ |
+
+ -
+ |
+ |
+
+
+
+
+
+
+
+
+
`;
diff --git a/src/RadioButtonGroup/RadioButtonGroup.stories.jsx b/src/RadioButtonGroup/RadioButtonGroup.stories.jsx
index 41133268ab..b5bc803629 100644
--- a/src/RadioButtonGroup/RadioButtonGroup.stories.jsx
+++ b/src/RadioButtonGroup/RadioButtonGroup.stories.jsx
@@ -1,8 +1,12 @@
/* eslint-disable import/no-extraneous-dependencies, no-console */
import React from 'react';
import { storiesOf } from '@storybook/react';
+import centered from '@storybook/addon-centered';
+import { checkA11y } from '@storybook/addon-a11y';
import { action } from '@storybook/addon-actions';
import { setConsoleOptions } from '@storybook/addon-console';
+import { withInfo } from '@storybook/addon-info';
+import README from './README.md';
import RadioButtonGroup, { RadioButton } from './index';
@@ -38,6 +42,9 @@ const onKeyDown = (event) => {
};
storiesOf('RadioButtonGroup', module)
+ .addDecorator((story, context) => withInfo({}, README)(story)(context))
+ .addDecorator(centered)
+ .addDecorator(checkA11y)
.add('unselected minimal usage', () => (