feat(radio): radio button added

Author: Alyssa

.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"]
 }

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "themify"
+    ]
+}

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",

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>

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';

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', () => {

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 {

src/elements/elements.js

@@ -23,7 +23,11 @@ module.exports = {
     isReady: true
   },
   list: {
-    name: 'List',
+    name: 'list',
+    isReady: true
+  },
+  radio: {
+    name: 'radio',
     isReady: true
   }
 };

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');

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');