Merge pull request #48 from YurisCodingClub/button

Create default button

stories/Button.jsx

@@ -1,22 +1,34 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './button.css';
+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';
+export const Button = ({
+  primary,
+  backgroundColor,
+  boxShadow,
+  size,
+  label,
+  ...props
+}) => {
+  const mode = primary
+    ? "storybook-button--primary"
+    : "storybook-button--secondary";
   return (
     <button
       type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={["storybook-button", `storybook-button--${size}`, mode].join(
+        " ",
+      )}
       {...props}
     >
       {label}
       <style jsx>{`
         button {
           background-color: ${backgroundColor};
+          box-shadow: ${boxShadow};
         }
       `}</style>
     </button>
@@ -35,7 +47,7 @@ Button.propTypes = {
   /**
    * How large should the button be?
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.oneOf(["medium", "large"]),
   /**
    * Button contents
    */
@@ -49,6 +61,6 @@ Button.propTypes = {
 Button.defaultProps = {
   backgroundColor: null,
   primary: false,
-  size: 'medium',
+  size: "medium",
   onClick: undefined,
 };

stories/Button.stories.js

@@ -13,6 +13,7 @@ export default {
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: "color" },
+    boxShadow: { control: "box-shadow" },
   },
 };
 
@@ -30,16 +31,16 @@ export const Secondary = {
   },
 };
 
-export const Large = {
+export const Text = {
   args: {
-    size: "large",
     label: "Button",
+    boxShadow: "unset",
   },
 };
 
-export const Small = {
+export const Large = {
   args: {
-    size: "small",
+    size: "large",
     label: "Button",
   },
 };

stories/button.css

@@ -1,29 +1,31 @@
 .storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 500;
   border: 0;
-  border-radius: 3em;
+  border-radius: 0.5em;
   cursor: pointer;
   display: inline-block;
+  letter-spacing: 0.08em;
   line-height: 1;
+  text-transform: uppercase;
 }
+
 .storybook-button--primary {
   color: white;
-  background-color: #1ea7fd;
+  background-color: #333;
 }
+
 .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;