Merge branch 'develop' into addFocus

src/js/common/stories/Button.jsx

@@ -0,0 +1,50 @@
+// import React from 'react';
+// import PropTypes from 'prop-types';
+// import './button.css';
+
+// /**
+//  * Primary UI component for user interaction
+//  */
+// export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
+//   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+//   return (
+//     <button
+//       type="button"
+//       className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+//       style={backgroundColor && { backgroundColor }}
+//       {...props}
+//     >
+//       {label}
+//     </button>
+//   );
+// };
+
+// Button.propTypes = {
+//   /**
+//    * Is this the principal call to action on the page?
+//    */
+//   primary: PropTypes.bool,
+//   /**
+//    * What background color to use
+//    */
+//   backgroundColor: PropTypes.string,
+//   /**
+//    * How large should the button be?
+//    */
+//   size: PropTypes.oneOf(['small', 'medium', 'large']),
+//   /**
+//    * Button contents
+//    */
+//   label: PropTypes.string.isRequired,
+//   /**
+//    * Optional click handler
+//    */
+//   onClick: PropTypes.func,
+// };
+
+// Button.defaultProps = {
+//   backgroundColor: null,
+//   primary: false,
+//   size: 'medium',
+//   onClick: undefined,
+// };

src/js/common/stories/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

src/js/components/Buttons/BaseButton.jsx

@@ -80,10 +80,7 @@ const Button = ({ primary, size, label, onClick, ...props }) => (
     onClick={onClick}
     {...props}
   >
-    {label}
-  </StyledButton>
-);
-
+
 export default Button;
 Button.propTypes = {
   primary: PropTypes.bool,