feat(radio): radio button added

Alyssa · Alyssa · commit 2bcc56659771 · 2019-05-02T14:15:50.000+02:00
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,30 +1,3 @@
 {
-  "extends": [
-    "eslint:recommended",
-    "airbnb-base",
-    "plugin:prettier/recommended",
-    "plugin:react/recommended",
-    "plugin:jest/recommended"
-  ],
-  "rules": {
-    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
-  },
-  "env": {
-    "es6": true,
-    "browser": true,
-    "node": true
-  },
-  "settings": {
-    "react": {
-      "createClass": "createReactClass",
-      "pragma": "React",
-      "version": "detect"
-    },
-    "propWrapperFunctions": [
-      "forbidExtraProps",
-      { "property": "freeze", "object": "Object" },
-      { "property": "myFavoriteWrapper" }
-    ],
-    "linkComponents": ["Hyperlink", { "name": "Link", "linkAttribute": "to" }]
-  }
+  "extends": ["react-app"]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "themify"
+    ]
+}
diff --git a/package.json b/package.json
@@ -79,21 +79,13 @@
     ]
   },
   "devDependencies": {
-    "@babel/polyfill": "^7.4.3",
-    "@babel/preset-env": "^7.4.2",
     "@commitlint/cli": "^7.5.2",
     "@commitlint/config-conventional": "^7.5.0",
     "@semantic-release/changelog": "^3.0.2",
     "@semantic-release/git": "^7.0.8",
     "babel-preset-es2015-rollup": "^3.0.0",
     "commitizen": "^3.0.7",
     "cz-conventional-changelog": "^2.1.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-config-prettier": "^4.1.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jest": "^22.4.1",
-    "eslint-plugin-prettier": "^3.0.1",
-    "eslint-plugin-react": "^7.12.4",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.5",
     "mdx": "^0.3.1",
diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import elements from './elements/elements';
-import ButtonPage from './elements/button/ButtonPage.jsx';
-import TagPage from './elements/tag/TagPage.jsx';
-import CheckboxPage from './elements/checkbox/CheckboxPage.jsx';
-import InputPage from './elements/input/InputPage.jsx';
-import NumberInputPage from './elements/numberinput/NumberInputPage.jsx';
-import ListPage from './elements/list/ListPage.jsx';
+import ButtonPage from './elements/button/ButtonPage';
+import TagPage from './elements/tag/TagPage';
+import CheckboxPage from './elements/checkbox/CheckboxPage';
+import InputPage from './elements/input/InputPage';
+import NumberInputPage from './elements/numberinput/NumberInputPage';
+import ListPage from './elements/list/ListPage';
+import RadioPage from './elements/radio/RadioPage';
 import './base_bundle_entry.scss';
 
 /* TODO: remove this import, the css itself and the icont font files,
@@ -53,12 +54,11 @@ function App() {
             ))}
           </div>
           <div
-            className="zep-grid__col zep-grid__col--9-12"
+            className="zep-grid__col zep-grid__col--xs-5-6"
             style={{ paddingTop: 45 }}
           >
             {content === 'welcome' && (
-              // <p>Welcome to the Zeppelin Element Library</p>
-              <ListPage />
+              <p>Welcome to the Zeppelin Element Library</p>
             )}
             {content === 'button' && <ButtonPage />}
             {content === 'tabs' && <p>This element is not ready</p>}
@@ -67,19 +67,7 @@ function App() {
             {content === 'input' && <InputPage />}
             {content === 'numberInput' && <NumberInputPage />}
             {content === 'list' && <ListPage />}
-          </div>
-        </div>
-        <div className="zep-grid__row--cards">
-          <div
-            className="zep-grid__col--cards zep-grid__col--cards-2-3"
-            style={{ paddingTop: 45 }}
-          >
-            {content === 'welcome' && (
-              <p>Welcome to the Zeppelin Element Library</p>
-            )}
-            {content === 'button' && <ButtonPage />}
-            {content === 'tabs' && <p>This element is not ready</p>}
-            {content === 'tag' && <TagPage />}
+            {content === 'radio' && <RadioPage />}
           </div>
         </div>
       </div>
diff --git a/src/base_bundle_entry.scss b/src/base_bundle_entry.scss
@@ -31,3 +31,4 @@ $include-typography: true !default;
 @import './elements/checkbox/checkbox';
 @import './elements/input/input';
 @import './elements/list/list';
+@import './elements/radio/radio';
diff --git a/src/elements/button/__tests__/Button.spec.js b/src/elements/button/__tests__/Button.spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ButtonPage from '../ButtonPage.jsx';
+import ButtonPage from '../ButtonPage';
 import Button from '../button';
 
 it('renders without crashing', () => {
diff --git a/src/elements/checkbox/_checkbox.scss b/src/elements/checkbox/_checkbox.scss
@@ -64,7 +64,6 @@
           font-size: 1.125rem;
           text-align: center;
           transform: scale(1);
-
           color: themed('primary');
         }
         &:checked:focus + .#{$prefix}checkbox__label:before {
diff --git a/src/elements/elements.js b/src/elements/elements.js
@@ -23,7 +23,11 @@ module.exports = {
     isReady: true
   },
   list: {
-    name: 'List',
+    name: 'list',
+    isReady: true
+  },
+  radio: {
+    name: 'radio',
     isReady: true
   }
 };
diff --git a/src/elements/input/__tests__/InputPage.spec.js b/src/elements/input/__tests__/InputPage.spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import InputPage from '../InputPage.jsx';
+import InputPage from '../InputPage';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
diff --git a/src/elements/list/__tests__/ListPage.spec.js b/src/elements/list/__tests__/ListPage.spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ListPage from '../ListPage.jsx';
+import ListPage from '../ListPage';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
diff --git a/src/elements/numberinput/__tests__/NumberInput.spec.js b/src/elements/numberinput/__tests__/NumberInput.spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import NumberInputPage from '../NumberInputPage.jsx';
+import NumberInputPage from '../NumberInputPage';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
diff --git a/src/elements/radio/RadioPage.jsx b/src/elements/radio/RadioPage.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+function RadioPage() {
+  return (
+    <>
+      <span className="theme-zeppelin">
+        <label className="zep-radio" style={{ marginBottom: 15 }}>
+          <input type="radio" name="radio" className="zep-radio__input" />
+          <span className="zep-radio__indicator" />
+          <span className="zep-radio__label">Radio Zeppelin</span>
+        </label>
+      </span>
+      <span className="theme-cat">
+        <label className="zep-radio" style={{ marginBottom: 15 }}>
+          Radio Cat
+          <input type="radio" name="radio" className="zep-radio__input" />
+          <span className="zep-radio__indicator" />
+        </label>
+      </span>
+      <span className="theme-rental">
+        <label className="zep-radio" style={{ marginBottom: 15 }}>
+          Radio Rental
+          <input type="radio" name="radio" className="zep-radio__input" />
+          <span className="zep-radio__indicator" />
+        </label>
+      </span>
+    </>
+  );
+}
+
+export default RadioPage;
diff --git a/src/elements/radio/__tests__/Radio.spec.js b/src/elements/radio/__tests__/Radio.spec.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import RadioPage from '../RadioPage';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<RadioPage />, div);
+});
diff --git a/src/elements/radio/_radio.scss b/src/elements/radio/_radio.scss
@@ -0,0 +1,64 @@
+//Radio - base style
+
+@mixin radio {
+  .#{$prefix}radio {
+    @extend %typo-normal-3;
+    display: block;
+    position: relative;
+    padding-left: 34px;
+    min-height: 1.5;
+    cursor: pointer;
+    user-select: none;
+    color: map-get($colormap-base, grey-dark);
+  }
+
+  .#{$prefix}radio .#{$prefix}radio__input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .#{$prefix}radio__indicator {
+    position: absolute;
+    top: 1px;
+    left: 0;
+    height: 22px;
+    width: 22px;
+    background-color: map-get($colormap-base, white);
+    border: 2px solid map-get($colormap-base, gray-dark);
+    border-radius: 50%;
+  }
+
+  .#{$prefix}radio:hover .#{$prefix}radio__input ~ .#{$prefix}radio__indicator {
+    @include themify($themes) {
+      box-shadow: 0 0 5px 1px themed('primary');
+    }
+  }
+
+  .#{$prefix}radio__indicator:after {
+    content: '';
+    position: absolute;
+    display: none;
+  }
+
+  .#{$prefix}radio
+    .#{$prefix}radio__input:checked
+    ~ .#{$prefix}radio__indicator:after {
+    display: block;
+  }
+
+  .#{$prefix}radio .#{$prefix}radio__indicator:after {
+    top: 4px;
+    left: 4.1px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    @include themify($themes) {
+      background: themed('primary');
+    }
+  }
+}
+
+@include exports('radio') {
+  @include radio;
+}
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,3 @@
-import '@babel/polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +    "cSpell.words": [
 +        "themify"
 +    ]
 +}
Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,6 @@`
`64`	`64`	`font-size: 1.125rem;`
`65`	`65`	`text-align: center;`
`66`	`66`	`transform: scale(1);`
`67`		`-`
`68`	`67`	`color: themed('primary');`
`69`	`68`	`}`
`70`	`69`	`&:checked:focus + .#{$prefix}checkbox__label:before {`