diff --git a/stories/Button.jsx b/stories/Button.jsx index 7c613bb..6a7733d 100644 --- a/stories/Button.jsx +++ b/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 ( @@ -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, }; diff --git a/stories/Button.stories.js b/stories/Button.stories.js index c768628..2dabef8 100644 --- a/stories/Button.stories.js +++ b/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", }, }; diff --git a/stories/button.css b/stories/button.css index dc91dc7..21f0229 100644 --- a/stories/button.css +++ b/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;