added more prop types to Toast, Tab, Panel, Page, ControlledTab, and EmptyState (#19)

Author: FIL1994

.eslintrc.json

@@ -18,6 +18,14 @@
     "no-plusplus": 0,
     "no-unused-expressions": 0,
     "babel/no-unused-expressions": 2,
-    "import/prefer-default-export": 0
+    "import/prefer-default-export": 0,
+    "jsx-a11y/anchor-is-valid": [
+      "error",
+      {
+        "components": ["Link"],
+        "specialLink": ["hrefLeft", "hrefRight"],
+        "aspects": ["noHref", "preferButton"]
+      }
+    ]
   }
 }

src/components/ControlledTab.js

@@ -1,6 +1,8 @@
 import React, { Component, Fragment } from "react";
 import PropTypes from "prop-types";
-import _ from "lodash";
+import Tab from "./Tab";
+
+import { onEnter } from "../helpers";
 
 class ControlledTab extends Component {
   state = {
@@ -22,14 +24,18 @@ class ControlledTab extends Component {
       <Fragment>
         <Tab block>
           {this.props.options.map(({ label, value }) => {
+            const onClick = () => {
+              this.setState({ active: value });
+            };
+
             return (
               <Fragment key={value}>
                 <Tab.Heading
                   active={this.state.active === value}
-                  onClick={() => {
-                    this.setState({ active: value });
-                  }}
-                  children={<a>{label}</a>}
+                  tabIndex="0"
+                  onClick={onClick}
+                  onKeyPress={onEnter(onClick)}
+                  children={<a href="#">{label}</a>}
                 />
               </Fragment>
             );
@@ -40,8 +46,10 @@ class ControlledTab extends Component {
     );
   }
 }
+
 ControlledTab.defaultProps = {
-  defaultActive: undefined
+  defaultActive: undefined,
+  options: []
 };
 
 ControlledTab.propTypes = {

src/components/EmptyState.js

@@ -28,4 +28,18 @@ const EmptyState = props => {
   );
 };
 
+EmptyState.defaultProps = {
+  className: "",
+  children: undefined,
+  title: undefined,
+  icon: undefined
+};
+
+EmptyState.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  title: PropTypes.node,
+  icon: PropTypes.node
+};
+
 export default EmptyState;

src/components/Page.js

@@ -25,4 +25,14 @@ const Page = props => {
   return <div {...myProps} className={className} />;
 };
 
+Page.defaultProps = {
+  className: "",
+  centered: false
+};
+
+Page.propTypes = {
+  className: PropTypes.string,
+  centered: PropTypes.bool
+};
+
 export default Page;

src/components/Panel.js

@@ -38,4 +38,18 @@ const Panel = props => {
   );
 };
 
+Panel.defaultProps = {
+  className: "",
+  children: undefined,
+  title: undefined,
+  footer: undefined
+};
+
+Panel.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  title: PropTypes.node,
+  footer: PropTypes.node
+};
+
 export default Panel;

src/components/Tab.js

@@ -28,6 +28,16 @@ const Tab = props => {
   return <ul {...myProps} className={className} />;
 };
 
+Tab.defaultProps = {
+  className: "",
+  block: false
+};
+
+Tab.propTypes = {
+  className: PropTypes.string,
+  block: PropTypes.bool
+};
+
 Tab.Heading = props => {
   const { active } = props;
   // add the className prop to the className
@@ -46,4 +56,14 @@ Tab.Heading = props => {
   return <li {...myProps} className={className} />;
 };
 
+Tab.Heading.defaultProps = {
+  className: "",
+  active: false
+};
+
+Tab.Heading.propTypes = {
+  className: PropTypes.string,
+  active: PropTypes.bool
+};
+
 export default Tab;

src/components/Toast.js

@@ -29,4 +29,16 @@ const Toast = props => {
   return <div {...myProps} className={className} />;
 };
 
+Toast.defaultProps = {
+  className: "",
+  primary: false,
+  centered: false
+};
+
+Toast.propTypes = {
+  className: PropTypes.string,
+  primary: PropTypes.bool,
+  centered: PropTypes.bool
+};
+
 export default Toast;