From dc7809d7289996e1bf5f1227672b65c2fab28fc1 Mon Sep 17 00:00:00 2001 From: Jaden Lemmon Date: Wed, 21 Aug 2019 17:53:28 -0500 Subject: [PATCH] feat(Button): Icon support and default style updates (#51) --- docs/wrapper.js | 42 +++-- package-lock.json | 71 ++++---- package.json | 2 +- src/Alert/Alert.js | 8 +- src/Alert/Alert.mdx | 2 +- src/Badge/Badge.js | 16 +- src/Badge/Badge.mdx | 10 + src/Badge/__snapshots__/Badge.spec.js.snap | 8 +- src/Button/Button.js | 132 +++++++++----- src/Button/Button.mdx | 82 ++++++--- src/Card/__snapshots__/Card.spec.js.snap | 2 +- src/Dropdown/Dropdown.mdx | 92 +++++----- .../__snapshots__/Dropdown.spec.js.snap | 120 ++++++++---- src/Form/Switch.js | 4 +- src/Form/Switch.mdx | 6 +- src/Form/__snapshots__/DateInput.spec.js.snap | 6 +- .../__snapshots__/PhoneInput.spec.js.snap | 6 +- src/theme.js | 172 +++++++++++++++--- src/utils.js | 3 + 19 files changed, 522 insertions(+), 262 deletions(-) diff --git a/docs/wrapper.js b/docs/wrapper.js index 11935e2..223407f 100644 --- a/docs/wrapper.js +++ b/docs/wrapper.js @@ -1,22 +1,30 @@ -import React, { Component } from 'react'; +import React from 'react'; import { createGlobalStyle } from 'styled-components'; import { ThemeProvider } from '../src'; -const GlobalStyle = createGlobalStyle ` - * { - box-sizing: border-box; - } -` +const GlobalStyle = createGlobalStyle` + @font-face { + font-family: "Tiempos"; + font-weight: 500; + font-style: normal; + src: url(//cdn.heydoctor.com/fonts/TiemposHeadlineWeb-Semibold.woff2) format('woff2'); + } -class App extends Component { - render() { - return ( - <> - - {this.props.children} - - ); - } -} + * { + font-family: "Avenir", sans-serif !important; + } -export default App; + h1 { + font-family: "Tiempos", serif !important; + font-size: 38px; + } +`; + +export default ({ children }) => ( + + <> + + {children} + + +); diff --git a/package-lock.json b/package-lock.json index 886931a..4566ffb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9799,8 +9799,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -9821,14 +9820,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -9843,20 +9840,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -9973,8 +9967,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -9986,7 +9979,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -10001,7 +9993,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -10009,14 +10000,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -10035,7 +10024,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -10116,8 +10104,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -10129,7 +10116,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -10215,8 +10201,7 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -10252,7 +10237,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -10272,7 +10256,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -10316,14 +10299,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -18799,14 +18780,28 @@ } }, "rollup": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.2.2.tgz", - "integrity": "sha512-fsn5KJcfSuejjrv8GV7kZNciElqxyzZdUq8rA3e528JsR3ccxrWwoptyUY8GGLlgMFAQMB3dZW8nWF2I1/xrZA==", + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.17.0.tgz", + "integrity": "sha512-k/j1m0NIsI4SYgCJR4MWPstGJOWfJyd6gycKoMhyoKPVXxm+L49XtbUwZyFsrSU2YXsOkM4u1ll9CS/ZgJBUpw==", "dev": true, "requires": { "@types/estree": "0.0.39", - "@types/node": "*", - "acorn": "^6.1.0" + "@types/node": "^12.6.2", + "acorn": "^6.2.0" + }, + "dependencies": { + "@types/node": { + "version": "12.6.8", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.8.tgz", + "integrity": "sha512-aX+gFgA5GHcDi89KG5keey2zf0WfZk/HAQotEamsK2kbey+8yGKcson0hbK8E+v0NArlCJQCqMP161YhV6ZXLg==", + "dev": true + }, + "acorn": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.1.tgz", + "integrity": "sha512-JD0xT5FCRDNyjDda3Lrg/IxFscp9q4tiYtxE1/nOzlKCk7hIRuYjhq1kCNkbPjMRMZuFq20HNQn1I9k8Oj0E+Q==", + "dev": true + } } }, "rollup-plugin-babel": { @@ -20121,7 +20116,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -20207,7 +20202,7 @@ }, "load-json-file": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=", "dev": true, "requires": { @@ -20284,7 +20279,7 @@ }, "wrap-ansi": { "version": "2.1.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", + "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", "dev": true, "requires": { diff --git a/package.json b/package.json index 0f5673d..7436fcc 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,7 @@ "react-router-dom": "^4.2.2", "react-testing-library": "^6.0.0", "rimraf": "^2.6.3", - "rollup": "^1.2.2", + "rollup": "^1.17.0", "rollup-plugin-babel": "^4.3.2", "rollup-plugin-commonjs": "^9.2.0", "rollup-plugin-filesize": "^6.0.1", diff --git a/src/Alert/Alert.js b/src/Alert/Alert.js index 818a731..019d253 100644 --- a/src/Alert/Alert.js +++ b/src/Alert/Alert.js @@ -7,7 +7,7 @@ import { getComponentVariant, createComponent } from '../utils'; const StyledAlert = createComponent({ name: 'Alert', style: ({ variant, theme }) => { - const { backgroundColor, fontColor } = getComponentVariant(theme, 'Alert', variant); + const variantStyles = getComponentVariant(theme, 'Alert', variant); return css` padding: 1rem; @@ -15,16 +15,14 @@ const StyledAlert = createComponent({ border: 0; font-size: 14px; font-family: ${theme.typography.fontFamily || 'inherit'}; - border-radius: ${theme.elementRadius}px; - border-left: 4px solid ${fontColor}; - background: ${backgroundColor}; - color: ${fontColor}; + border-radius: ${theme.radius}px; a { color: inherit; text-decoration: underline; } + ${variantStyles} ${space}; `; }, diff --git a/src/Alert/Alert.mdx b/src/Alert/Alert.mdx index abdc94a..7bc9c8e 100644 --- a/src/Alert/Alert.mdx +++ b/src/Alert/Alert.mdx @@ -14,7 +14,7 @@ Alerts are typically used to display meaningful copy to users - typically notify -## Exammples +## Examples diff --git a/src/Badge/Badge.js b/src/Badge/Badge.js index e193964..d725b7c 100644 --- a/src/Badge/Badge.js +++ b/src/Badge/Badge.js @@ -2,23 +2,21 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css } from 'styled-components'; import { space } from 'styled-system'; -import { getComponentVariant, createComponent } from '../utils'; +import { getComponentVariant, createComponent, getComponentSize } from '../utils'; const StyledBadge = createComponent({ name: 'Badge', tag: 'span', style: ({ variant, theme, size }) => { - const { backgroundColor, fontColor } = getComponentVariant(theme, 'Badge', variant); - const fontSize = theme.fontSizes[size]; + const variantStyles = getComponentVariant(theme, 'Badge', variant); + const sizeStyles = getComponentSize(theme, 'Badge', size); return css` - padding: ${fontSize / 3}px ${fontSize / 1.5}px; - font-size: ${theme.fontSizes[size]}px; - font-family: ${theme.typography.fontFamily || 'inherit'}; + font-family: inherit; font-weight: bold; - border-radius: ${fontSize}px; - background: ${backgroundColor}; - color: ${fontColor}; + + ${variantStyles}; + ${sizeStyles}; ${space}; `; }, diff --git a/src/Badge/Badge.mdx b/src/Badge/Badge.mdx index 58fa284..7a7a12b 100644 --- a/src/Badge/Badge.mdx +++ b/src/Badge/Badge.mdx @@ -16,9 +16,19 @@ Documentation and examples for badges, our small count and labeling component. ## Examples +### Variants + I'm Ze Best I'm So Successful I'm So Dangerous 💁‍♀️ Caution + +### Sizes + + + Small + Medium + Large + diff --git a/src/Badge/__snapshots__/Badge.spec.js.snap b/src/Badge/__snapshots__/Badge.spec.js.snap index 97f2e67..1e940af 100644 --- a/src/Badge/__snapshots__/Badge.spec.js.snap +++ b/src/Badge/__snapshots__/Badge.spec.js.snap @@ -3,13 +3,13 @@ exports[`Badge 1`] = ` .c0 { - padding: 4px 8px; - font-size: 12px; font-family: inherit; font-weight: bold; - border-radius: 12px; - background: #CADCFF; + background-color: #CADCFF; color: #0958F3; + font-size: 14px; + border-radius: 14px; + padding: 5px 10px; } css` +const loadingCss = (height, color) => css` color: transparent !important; pointer-events: none; position: relative; @@ -25,11 +25,9 @@ const loadingCss = ({ height, fontColor, outline, backgroundColor }) => css` &::after { display: block; content: ''; - border-color: ${outline ? backgroundColor : fontColor}; animation: ${spinKeyframes} 820ms infinite linear; - border-width: ${height * 0.05}px; - border-style: solid; border-radius: 100%; + border: 2px solid ${color}; border-right-color: transparent; border-top-color: transparent; left: 50%; @@ -45,60 +43,67 @@ const loadingCss = ({ height, fontColor, outline, backgroundColor }) => css` const StyledButton = createComponent({ name: 'Button', tag: 'button', - style: ({ - variant, - size, - theme, - outline = false, - block = false, - disabled = false, - loading = false, - transparent = false, - height = theme.heights[size], - fontSize = theme.fontSizes[size], - borderRadius = theme.radius || 2, - }) => { - const { backgroundColor, fontColor } = getComponentVariant(theme, 'Button', variant); + style: ({ hasText, leftIcon, rightIcon, variant, size, theme, block, disabled, loading, borderRadius }) => { + const variantStyles = getComponentVariant(theme, 'Button', variant); + const sizeStyles = getComponentSize(theme, 'Button', size); return css` - font-family: inherit; display: inline-block; - text-align: center; cursor: pointer; text-transform: capitalize; - font-weight: bold; + text-align: center; text-decoration: none; + font-family: inherit; + font-weight: bold; appearance: none; - border-radius: ${borderRadius}px; + border-radius: ${borderRadius || theme.radius}px; pointer-events: ${disabled ? 'none' : 'auto'}; - opacity: ${disabled ? 0.65 : 1}; - color: ${outline ? backgroundColor : fontColor}; - height: ${height}px; - padding: 0 ${height * 0.5}px; - font-size: ${fontSize}px; width: ${block ? '100%' : 'auto'}; - background: ${outline || transparent ? 'transparent' : backgroundColor}; - border: ${transparent ? 'none' : `1px solid ${backgroundColor}`}; + border: 1px solid transparent; transition: 175ms; - - ${loading && loadingCss({ height, fontColor, outline, backgroundColor })}; - - &:hover { - background: ${outline ? 'transparent' : lighten(0.05, backgroundColor)}; - border-color: ${lighten(0.05, backgroundColor)}; - } - - &:active { - background: ${outline ? 'transparent' : lighten(0.075, backgroundColor)}; - border-color: ${lighten(0.075, backgroundColor)}; + white-space: nowrap; + user-select: none; + + ${leftIcon && + hasText && + css` + i { + padding-right: 4px; + } + `} + + ${rightIcon && + hasText && + css` + i { + padding-left: 4px; + } + `} + + &[disabled] { + pointer-events: none; + opacity: 0.75; } + ${loading && loadingCss(sizeStyles.height, variantStyles.color)}; + ${variantStyles} + ${sizeStyles}; ${space}; `; }, }); -const Button = React.forwardRef((props, ref) => ); +const renderIcon = (icon, props) => ; + +const Button = React.forwardRef(({ children, leftIcon, leftIconProps, rightIcon, rightIconProps, ...rest }, ref) => ( + + + {leftIcon && renderIcon(leftIcon, leftIconProps)} + {children} + {rightIcon && renderIcon(rightIcon, rightIconProps)} + + +)); Button.propTypes = { variant: PropTypes.string, @@ -107,7 +112,10 @@ Button.propTypes = { block: PropTypes.bool, disabled: PropTypes.bool, loading: PropTypes.bool, - transparent: PropTypes.bool, + leftIcon: PropTypes.string, + leftIconProps: PropTypes.shape(), + rightIcon: PropTypes.string, + rightIconProps: PropTypes.shape(), }; Button.defaultProps = { @@ -117,10 +125,9 @@ Button.defaultProps = { block: false, disabled: false, loading: false, - transparent: false, }; -const verticalCss = ({ sizes, vertical }) => { +const verticalCss = ({ sizes, vertical, borderRadius }) => { const maybeNumber = parseInt(vertical, 10); const fallback = sizes[vertical] || sizes.sm; const breakpoint = Number.isInteger(maybeNumber) ? `${maybeNumber}px` : `${fallback}px`; @@ -129,7 +136,14 @@ const verticalCss = ({ sizes, vertical }) => { @media (max-width: ${breakpoint}) { flex-direction: column; - & > *:not(:first-child) { + &&& { + & > button { + border-radius: ${borderRadius}px; + margin-right: 0; + } + } + + & > button:not(:first-child) { margin: 1rem 0 0; } } @@ -142,14 +156,34 @@ Button.Group = createComponent({ style: ({ vertical = false, theme: { + radius, grid: { sizes }, }, + borderRadius = radius || 2, + connected = false, }) => css` - & > *:not(:first-child) { + & > button:not(:first-child) { margin-left: 1rem; } - ${vertical && verticalCss({ sizes, vertical })}; + ${connected && + css` + & > button:not(:first-child) { + margin-left: 0; + } + & > button:first-child { + border-radius: ${borderRadius}px 0 0 ${borderRadius}px; + } + & > button:last-child { + border-radius: 0 ${borderRadius}px ${borderRadius}px 0; + } + + & > :not(:first-child):not(:last-child) { + border-radius: 0; + } + `} + + ${vertical && verticalCss({ sizes, vertical, borderRadius })}; `, }); diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx index bb7348a..00017b3 100644 --- a/src/Button/Button.mdx +++ b/src/Button/Button.mdx @@ -5,45 +5,77 @@ menu: Core import { Playground, PropsTable } from 'docz'; import Button from './Button'; +import Flex from '../Flex'; +import Box from '../Box'; +import Icon from '../Icon'; # Button Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. We include several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. -## Properties +## Props ## Basic usage - + - + + + + + + +## With Icon + +Buttons may contain a `leftIcon` or `rightIcon` prop. Additional props may be passed via `leftIconProps` or `rightIconProps`. + + + + ## Groups Button groups provide an easy way to horizontally layout a row of buttons. - - - - - + + + + + + + + + + + + + ### Vertical Layout Use the `vertical` prop to pass a predefined or custom breakpoint size. - + - + @@ -56,11 +88,13 @@ Buttons can come in several different shapes and colors Use the `variant` prop for predefined button variants. More colors may be added to `theme.colors` if the defaults are not enough or need to be overridden. - - - - - + + + + + + + @@ -69,9 +103,9 @@ Use the `variant` prop for predefined button variants. More colors may be added Use the `size` prop to change the size of your button. - - - + + + @@ -83,7 +117,13 @@ Use the `size` prop to change the size of your button. Add the `disabled` prop for disabled button state style. - + + + + + + + ### Loading @@ -91,8 +131,8 @@ Add the `disabled` prop for disabled button state style. Add the `loading` prop for loading button state style. - + - + diff --git a/src/Card/__snapshots__/Card.spec.js.snap b/src/Card/__snapshots__/Card.spec.js.snap index 30095b3..3758017 100644 --- a/src/Card/__snapshots__/Card.spec.js.snap +++ b/src/Card/__snapshots__/Card.spec.js.snap @@ -5,7 +5,7 @@ exports[`Card 1`] = ` .c0 { background: white; box-shadow: 0 3px 6px hsla(0,0%,60%,.1),0 3px 6px hsla(0,0%,60%,.15),0 -1px 2px hsla(0,0%,60%,.02); - border-radius: 4px; + border-radius: 8px; overflow: hidden; } diff --git a/src/Dropdown/Dropdown.mdx b/src/Dropdown/Dropdown.mdx index c397ece..4436afb 100644 --- a/src/Dropdown/Dropdown.mdx +++ b/src/Dropdown/Dropdown.mdx @@ -26,7 +26,7 @@ Easily display contextual overlays using custom trigger elements. Dropdown's pos const [placement, setPlacement] = useState('top'); return ( <> - + Placement} value={placement} @@ -36,47 +36,51 @@ Easily display contextual overlays using custom trigger elements. Dropdown's pos }))} onChange={(_, val) => setPlacement(val)} /> - Open Dropdown} - > - - - - Section One - I don't close when clicked - Item Two - - Section Two - Item One - Item Two - - - Footer - - - Open Other Dropdown} - > - - - - - Section One - Item One - Item Two - - Section Two - Item One - Item Two - - - Footer - - -
+ + Open Dropdown} + > + + + + Section One + I don't close when clicked + Item Two + + Section Two + Item One + Item Two + + + Footer + + + + + Open Other Dropdown} + > + + + + + Section One + Item One + Item Two + + Section Two + Item One + Item Two + + + Footer + + + + Footer -
+ Footer - + ); } diff --git a/src/Dropdown/__snapshots__/Dropdown.spec.js.snap b/src/Dropdown/__snapshots__/Dropdown.spec.js.snap index c5b6579..cdc66bb 100644 --- a/src/Dropdown/__snapshots__/Dropdown.spec.js.snap +++ b/src/Dropdown/__snapshots__/Dropdown.spec.js.snap @@ -10,40 +10,62 @@ exports[` only renders trigger on mount 1`] = ` outline: none; } +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + .c1 { - font-family: inherit; display: inline-block; - text-align: center; cursor: pointer; text-transform: capitalize; - font-weight: bold; + text-align: center; -webkit-text-decoration: none; text-decoration: none; + font-family: inherit; + font-weight: bold; -webkit-appearance: none; -moz-appearance: none; appearance: none; - border-radius: 4px; + border-radius: 8px; pointer-events: auto; - opacity: 1; - color: #FFFFFF; - height: 36px; - padding: 0 18px; - font-size: 12px; width: auto; - background: #226EFF; - border: 1px solid #226EFF; + border: 1px solid transparent; -webkit-transition: 175ms; transition: 175ms; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: #226EFF; + color: #FFFFFF; + font-size: 16px; + height: 40px; + padding: 0 16px; +} + +.c1[disabled] { + pointer-events: none; + opacity: 0.75; } .c1:hover { - background: #3c7fff; - border-color: #3c7fff; + background-color: #4D89FF; } .c1:active { - background: #4887ff; - border-color: #4887ff; + background-color: #0958F3; +} + +.c1:disabled { + background-color: #CADCFF; }
only renders trigger on mount 1`] = ` style="cursor: pointer;" tabindex="0" > - Trigger +
+ Trigger +
@@ -74,40 +100,62 @@ exports[` opens menu with focus when trigger is clicked 1`] = ` outline: none; } +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + .c1 { - font-family: inherit; display: inline-block; - text-align: center; cursor: pointer; text-transform: capitalize; - font-weight: bold; + text-align: center; -webkit-text-decoration: none; text-decoration: none; + font-family: inherit; + font-weight: bold; -webkit-appearance: none; -moz-appearance: none; appearance: none; - border-radius: 4px; + border-radius: 8px; pointer-events: auto; - opacity: 1; - color: #FFFFFF; - height: 36px; - padding: 0 18px; - font-size: 12px; width: auto; - background: #226EFF; - border: 1px solid #226EFF; + border: 1px solid transparent; -webkit-transition: 175ms; transition: 175ms; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: #226EFF; + color: #FFFFFF; + font-size: 16px; + height: 40px; + padding: 0 16px; +} + +.c1[disabled] { + pointer-events: none; + opacity: 0.75; } .c1:hover { - background: #3c7fff; - border-color: #3c7fff; + background-color: #4D89FF; } .c1:active { - background: #4887ff; - border-color: #4887ff; + background-color: #0958F3; +} + +.c1:disabled { + background-color: #CADCFF; }
opens menu with focus when trigger is clicked 1`] = ` style="cursor: pointer;" tabindex="0" > - Trigger +
+ Trigger +
opens menu with focus when trigger is clicked 1`] = ` .c0 { z-index: 10; background: white; - border-radius: 4px; + border-radius: 8px; border: 1px solid #F4F4F4; outline: none; box-shadow: 0 0 3px 0 rgba(178,194,212,0.3); @@ -206,7 +258,7 @@ exports[` opens menu with focus when trigger is clicked 1`] = ` .c5 { background: #F8F8F9; padding: 0.75rem 1rem; - border-radius: 0 0 4px 4px; + border-radius: 0 0 8px 8px; }
+ ## Examples diff --git a/src/Form/__snapshots__/DateInput.spec.js.snap b/src/Form/__snapshots__/DateInput.spec.js.snap index 6870afc..59436b2 100644 --- a/src/Form/__snapshots__/DateInput.spec.js.snap +++ b/src/Form/__snapshots__/DateInput.spec.js.snap @@ -18,17 +18,17 @@ exports[` snapshot 1`] = ` .c3 { border: 1px solid #E8E9EA; - height: 36px; + height: 32px; display: block; outline: none; width: 100%; padding: 8px; - border-radius: 4px; + border-radius: 8px; -webkit-transition: 250ms all; transition: 250ms all; -webkit-appearance: none; font-family: inherit; - font-size: 12px; + font-size: 14px; } .c3:hover, diff --git a/src/Form/__snapshots__/PhoneInput.spec.js.snap b/src/Form/__snapshots__/PhoneInput.spec.js.snap index 69b9c76..7a0d07f 100644 --- a/src/Form/__snapshots__/PhoneInput.spec.js.snap +++ b/src/Form/__snapshots__/PhoneInput.spec.js.snap @@ -18,17 +18,17 @@ exports[` snapshot 1`] = ` .c3 { border: 1px solid #E8E9EA; - height: 36px; + height: 32px; display: block; outline: none; width: 100%; padding: 8px; - border-radius: 4px; + border-radius: 8px; -webkit-transition: 250ms all; transition: 250ms all; -webkit-appearance: none; font-family: inherit; - font-size: 12px; + font-size: 14px; } .c3:hover, diff --git a/src/theme.js b/src/theme.js index 58e1da0..77defdc 100644 --- a/src/theme.js +++ b/src/theme.js @@ -63,77 +63,159 @@ export default (overrides = {}) => { const typography = { fontSize: 12, + bodyFontFamily: 'Avenir', + headerFontFamily: 'Tiempos', }; const buttonVariants = { primary: { backgroundColor: colors.primary, - fontColor: colors.white, + color: colors.white, + '&:hover': { + backgroundColor: colors.primaryLight, + }, + '&:active': { + backgroundColor: colors.primaryDark, + }, + '&:disabled': { + backgroundColor: colors.primaryLightest, + }, }, - success: { - backgroundColor: colors.green, - fontColor: colors.white, + primaryText: { + backgroundColor: 'transparent', + borderColor: 'transparent', + color: colors.primary, + '&:hover': { + color: colors.primaryDark, + }, }, - danger: { - backgroundColor: colors.red, - fontColor: colors.white, + secondary: { + backgroundColor: colors.white, + borderColor: colors.primary, + color: colors.primary, + '&:hover': { + backgroundColor: colors.primary, + color: colors.white, + }, + '&:active': { + backgroundColor: colors.primaryDark, + color: colors.white, + }, + '&:disabled': { + borderColor: colors.primaryLightest, + color: colors.primaryLightest, + }, + }, + grey: { + backgroundColor: colors.white, + borderColor: colors.grey, + color: colors.greyDarkest, + '&:hover': { + borderColor: colors.greyDark, + }, + '&:active': { + backgroundColor: colors.greyLight, + }, + '&:disabled': { + borderColor: colors.grey, + color: colors.grey, + }, + }, + greyText: { + backgroundColor: 'transparent', + borderColor: 'transparent', + color: colors.grey, + '&:hover': { + color: colors.greyDark, + }, + }, + success: { + color: colors.white, + backgroundColor: colors.secondary, + '&:hover': { + backgroundColor: colors.secondaryLight, + }, + '&:active': { + backgroundColor: colors.secondaryDark, + }, + '&:disabled': { + backgroundColor: colors.secondaryLightest, + }, }, warning: { backgroundColor: colors.orange, - fontColor: colors.white, + color: colors.white, + '&:hover': { + backgroundColor: colors.orangeLight, + }, + '&:active': { + backgroundColor: colors.orangeDark, + }, + '&:disabled': { + backgroundColor: colors.orangeLightest, + }, + }, + danger: { + backgroundColor: colors.red, + color: colors.white, + '&:hover': { + backgroundColor: colors.redLight, + }, + '&:active': { + backgroundColor: colors.redDark, + }, + '&:disabled': { + backgroundColor: colors.redLightest, + }, }, info: { backgroundColor: colors.blue, - fontColor: colors.white, - }, - grey: { - backgroundColor: colors.greyLight, - fontColor: colors.greyDarkest, + color: colors.white, }, }; const badgeVariants = { primary: { backgroundColor: colors.primaryLightest, - fontColor: colors.primaryDark, + color: colors.primaryDark, }, success: { backgroundColor: colors.greenLightest, - fontColor: colors.greenDark, + color: colors.greenDark, }, danger: { backgroundColor: colors.redLightest, - fontColor: colors.redDark, + color: colors.redDark, }, warning: { backgroundColor: colors.orangeLightest, - fontColor: colors.orangeDark, + color: colors.orangeDark, }, info: { backgroundColor: colors.blueLightest, - fontColor: colors.blueDark, + color: colors.blueDark, }, grey: { backgroundColor: colors.greyLight, - fontColor: colors.greyDarker, + color: colors.greyDarker, }, }; const alertVariants = badgeVariants; const heights = { - xs: 28, - sm: 32, - md: 36, + xs: 24, + sm: 28, + md: 32, lg: 40, - xl: 44, + xl: 48, }; const fontSizes = { xs: 8, - sm: 10, - md: 12, - lg: 14, + sm: 12, + md: 14, + lg: 16, xl: 16, }; @@ -159,10 +241,46 @@ export default (overrides = {}) => { grid, heights, radii, - radius: 4, + radius: 8, shadow, shadowHover, typography, + sizes: { + Button: { + sm: { + fontSize: 14, + height: 32, + padding: '0 12px', + }, + md: { + fontSize: 16, + height: 40, + padding: '0 16px', + }, + lg: { + fontSize: 16, + height: 48, + padding: '0 20px', + }, + }, + Badge: { + sm: { + fontSize: 12, + borderRadius: 12, + padding: '4px 8px', + }, + md: { + fontSize: 14, + borderRadius: 14, + padding: '5px 10px', + }, + lg: { + fontSize: 16, + borderRadius: 16, + padding: '6px 12px', + }, + }, + }, variants: { Alert: alertVariants, Badge: badgeVariants, diff --git a/src/utils.js b/src/utils.js index 38bcb21..a01f929 100644 --- a/src/utils.js +++ b/src/utils.js @@ -12,6 +12,9 @@ export const getComponentVariant = (theme, componentName, variant) => { return config; }; +export const getComponentSize = (theme, componentName, size) => + themeGet(`sizes.${componentName}.${size}`, {})({ theme }); + export const getComponentStyle = componentName => themeGet(`styles.${componentName}`, {}); export const getVariantStyles = (componentName, variant) => themeGet(`variants.${componentName}.${variant}.style`, {});