1 files changed, 84 insertions, 0 deletions
diff --git a/stories/angular/radio-button-group.stories.ts b/stories/angular/radio-button-group.stories.ts
new file mode 100644
index 0000000..97f1ce9
--- /dev/null
+++ b/stories/angular/radio-button-group.stories.ts
@@ -0,0 +1,84 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, text, number, boolean, array, select, color, date, button } from '@storybook/addon-knobs';
+import { withNotes } from '@storybook/addon-notes';
+import { action, configureActions } from '@storybook/addon-actions';
+import { moduleMetadata } from '@storybook/angular';
+import { RadioGroupComponent } from '../../src/angular/components';
+import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module';
+
+let stories = storiesOf('Form elements|Radio button group', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+      
+      ],
+      imports: [
+          FormElementsModule
+      ]
+    })
+  )
+  let containsLegend = true;
+  let containsDisabled = true;
+  let containsDirection = true;
+  createStory(stories, "All options", containsLegend, containsDisabled, containsDirection, "Radio buttons group", "Full example of radio buttons.");
+  createStory(stories, "With legend", containsLegend, !containsDisabled, !containsDirection, "Radio buttons group", "Example of radio buttons with legend.");
+  createStory(stories, "With disabled", !containsLegend, containsDisabled, !containsDirection, "Radio buttons group", "Example of radio buttons with disabled.");
+  createStory(stories, "With direction", !containsLegend, !containsDisabled, containsDirection, "Radio buttons group", "Example of radio buttons with direction.");
+  function createStory(stories, title, containsLegend, containsDisabled, containsDirection, notesTitle, notesText){
+    stories.add(title, () => {
+        const _legend = containsLegend ? text('legend','Radio Buttons Group legend') : null;
+        const _options = {
+            items: [{
+                value:'val1',
+                name: 'radio8',
+                label: 'Label of Radio1'
+            }, {
+                value:'val2',
+                name: 'radio8',
+                label: 'Label of Radio2'
+            }]
+        };
+        const _disabled = containsDisabled ? boolean('disabled', false) : null;
+        const _direction = containsDirection ? text('direction','horizontal') : null;
+        const _selectedValue = text('selected value', 'val1');
+
+        const _selectedValueChange = text('*(valueChange)', 'Event throws when selected radio button, see in Action logger tab.');
+
+        return {
+            props: {
+                selectRadioButton: action('select radio button'),
+                _legend, _disabled, _direction, _options, _selectedValue
+            },
+            template: `
+            <sdc-radio-group
+                [legend]="_legend"
+                [(value)]="_selectedValue"
+                [options] = "{
+                    items: [
+                        {
+                            value: 'val1',
+                            name: 'radio5',
+                            label: 'Label of Radio 1',
+                            disabled: 'false'
+                        },
+                        {
+                            value: 'val2',
+                            name: 'radio5',
+                            label: 'Label of Radio 2',
+                            disabled: 'false'
+                        }
+                    ]}"
+                [disabled]="_disabled"
+                [direction]="_direction"
+                (valueChange)= "selectRadioButton($event)"
+                ></sdc-radio-group>
+            <br><div>Selected Radio: {{_selectedValue}}</div>
+            `
+        }
+        },
+        { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
+        }
+    )
+  }