Merge pull request #14 from sebgroup/develop

Fixed few bugs related to RadioGroup component

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.travis.yml

@@ -3,10 +3,10 @@ sudo: false
 addons:
   chrome: stable
 language: node_js
-node_js: node
+node_js: lts/*
 
 install:
-- npm install
+- npm ci
 cache:
   directories:
   - $HOME/.npm

README.md

@@ -4,7 +4,7 @@
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
-This is a set of react components which some of them are based on SEB's bootstrap. The plan for this project is to increase and improve components for future usages.
+This is a set of react components which some of them are based on SEB's bootstrap. The plan for this project is to increase and improve components for future usages
 
 -     The package name: `@sebgroup/react-components`
 -     The package documentation: [Documentation](https://sebgroup.github.io/react-components) 

src/RadioGroup/RadioGroup.tsx

@@ -31,25 +31,26 @@ export const RadioGroup: React.FunctionComponent<RadioGroupProps> = (props: Radi
             <div className={inputFieldClass}>
                 {props.label && <label className="radio-group-label" htmlFor={props.name}>{props.label}</label>}
 
-                {props.list && props.list.map((item, index) =>
-                    <div key={index} className="radio-item">
-
-                        <label className="radio-label" htmlFor={item.label}>{item.label}</label>
-                        <input
-                            className="radio-input"
-                            type="radio"
-                            value={item.value}
-                            name={item.group}
-                            id={item.label}
-                            checked={props.value === item.value}
-                            disabled={props.disableAll || item.disabled}
-                            onChange={(e) => { props.onChange(item.value); }}
-                        />
-
-                        <span className="checkmark" />
-                        {item.description && <span className="radio-description">{item.description}</span>}
-                    </div>
-                )}
+                {props.list && props.list.map((item, index) => {
+                    const identifier: string = item.label.replace(" ", "_") + Math.floor(Math.random() * 100) + (new Date()).getTime();
+                    return (
+                        <div key={index} className="radio-item">
+                            <label className="radio-label" htmlFor={identifier}>{item.label}</label>
+                            <input
+                                className="radio-input"
+                                type="radio"
+                                value={item.value}
+                                name={item.group}
+                                id={identifier}
+                                checked={props.value === item.value}
+                                disabled={props.disableAll || item.disabled}
+                                onChange={(e) => { props.onChange(item.value); }}
+                            />
+                            <span className="checkmark" />
+                            {item.description && <span className="radio-description">{item.description}</span>}
+                        </div>
+                    );
+                })}
                 {props.error && <div className={"alert alert-danger"}>{props.error}</div>}
             </div>
         </div>

src/RadioGroup/radio-group-style.scss

@@ -15,6 +15,7 @@ $red: #F03529;
         user-select: none;
         transition: all $transition-time;
         .radio-item {
+            vertical-align: top;
             position: relative;
             margin-bottom: 5px;
             input[type=radio] {