diff --git a/src/components/Bar/Bar.stories.js b/src/components/Bar/Bar.stories.js index 5499f236..24cfc0a4 100644 --- a/src/components/Bar/Bar.stories.js +++ b/src/components/Bar/Bar.stories.js @@ -21,10 +21,8 @@ storiesOf("Bar", module) - - + diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index 76f39480..1a8f0e7d 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -1,41 +1,61 @@ import React from "react"; import propTypes from "prop-types"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { createBorderStyles, + createWellBorderStyles, createBoxStyles, + createFlatBoxStyles, createDisabledTextStyles } from "../common"; import { blockSizes, fontSizes, padding } from "../common/system"; -const StyledButton = styled.button` - ${createBoxStyles()}; +const commonButtonStyles = css` position: relative; display: inline-flex; align-items: center; justify-content: center; - ${props => - props.flat - ? null - : props.active - ? createBorderStyles(true) - : createBorderStyles(false)} - height: ${props => blockSizes[props.size]}; - width: ${props => - props.fullWidth ? "100%" : props.square ? blockSizes[props.size] : "auto"}; - padding: ${props => (props.square ? 0 : "0 " + padding.sm)}; + height: ${({ size }) => blockSizes[size]}; + width: ${({ fullWidth, square, size }) => + fullWidth ? "100%" : square ? blockSizes[size] : "auto"}; + padding: ${({ square }) => (square ? 0 : "0 " + padding.sm)}; font-size: ${fontSizes.md}; - - ${props => props.isDisabled && createDisabledTextStyles()} &:active { - ${props => !props.isDisabled && !props.flat && createBorderStyles(true)} - - padding-top: ${props => !props.isDisabled && "2px"}; - + padding-top: ${({ isDisabled }) => !isDisabled && "2px"}; } - padding-top: ${props => props.active && !props.isDisabled && "2px"}; - ${props => props.flat && "border: none;"} + padding-top: ${({ active, isDisabled }) => active && !isDisabled && "2px"}; +`; + +const StyledButton = styled.button` + ${({ variant }) => + variant === "flat" + ? css` + ${createFlatBoxStyles()} /* background: none; */ + ` + : variant === "menu" + ? css` + ${createBoxStyles()}; + border: 2px solid transparent; + &:hover { + ${({ isDisabled }) => !isDisabled && createWellBorderStyles(false)} + } + &:active { + ${({ isDisabled }) => !isDisabled && createWellBorderStyles(true)} + } + ${({ active }) => active && createBorderStyles(true)} + ${({ isDisabled }) => isDisabled && createDisabledTextStyles()} + ` + : css` + ${createBoxStyles()}; + ${({ active }) => + active ? createBorderStyles(true) : createBorderStyles(false)} + &:active { + ${({ isDisabled }) => !isDisabled && createBorderStyles(true)} + } + ${({ isDisabled }) => isDisabled && createDisabledTextStyles()} + `} + ${commonButtonStyles} `; const Button = ({ @@ -47,7 +67,7 @@ const Button = ({ size, square, active, - flat, + variant, className, children, ...otherProps @@ -55,6 +75,7 @@ const Button = ({ return ( theme.canvas}; +`; + storiesOf("Button", module) .addDecorator(story => (
)) - .add("flat", () => ( - + )) + .add("flat button", () => ( + + + +

+ When you want to use Buttons on a light background (like scrollable + content), just use the flat variant: +

+
+ + + + +
+ + + )); diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js index ef5c78b2..d2a8e748 100644 --- a/src/components/Checkbox/Checkbox.js +++ b/src/components/Checkbox/Checkbox.js @@ -2,7 +2,8 @@ import React, { useState } from "react"; import propTypes from "prop-types"; import styled, { css } from "styled-components"; -import { createDisabledTextStyles } from "../common"; +import { createDisabledTextStyles, createFlatBoxStyles } from "../common"; + import { padding, fontSizes } from "../common/system"; import Cutout from "../Cutout/Cutout"; @@ -44,27 +45,37 @@ const createCheckmarkSymbol = ({ checked }) => transform: translate(-50%, -50%) rotate(45deg); } `; -const StyledCheckmark = styled(Cutout)` +const sharedCheckmarkStyles = css` position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; + ${props => createCheckmarkSymbol(props)} +`; +const StyledCheckmark = styled(Cutout)` + ${sharedCheckmarkStyles} background: ${({ theme, isDisabled }) => isDisabled ? theme.material : theme.canvas}; - ${props => createCheckmarkSymbol(props)}; box-shadow: ${({ shadow }) => shadow ? `inset 3px 3px 10px rgba(0, 0, 0, 0.1)` : "none"}; &:before { box-shadow: none; } `; - +const StyledFlatCheckmark = styled.div` + ${createFlatBoxStyles()} + ${sharedCheckmarkStyles} + background: ${({ theme, isDisabled }) => + isDisabled ? theme.flatLight : theme.canvas}; + +`; const Checkbox = ({ onChange, label, disabled, + variant, value, checked, defaultChecked, @@ -74,8 +85,9 @@ const Checkbox = ({ shadow, ...otherProps }) => { - let Input, isChecked; + let Input; + const Checkmark = variant === "flat" ? StyledFlatCheckmark : StyledCheckmark; if (defaultChecked || checked === undefined) { const [state, setState] = useState(defaultChecked || false); @@ -95,11 +107,7 @@ const Checkbox = ({ name={name} {...otherProps} /> - + ); } else { @@ -114,11 +122,7 @@ const Checkbox = ({ name={name} {...otherProps} /> - + ); } @@ -135,6 +139,7 @@ Checkbox.defaultProps = { value: null, label: "", disabled: false, + variant: "default", shadow: true }; @@ -149,6 +154,7 @@ Checkbox.propTypes = { label: propTypes.oneOfType([propTypes.string, propTypes.number]), checked: propTypes.bool, disabled: propTypes.bool, + variant: propTypes.oneOf(["default", "flat"]), shadow: propTypes.bool, style: propTypes.object }; diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js index 49869171..29ff1131 100644 --- a/src/components/Checkbox/Checkbox.stories.js +++ b/src/components/Checkbox/Checkbox.stories.js @@ -1,19 +1,18 @@ import React from "react"; import { storiesOf } from "@storybook/react"; +import styled from "styled-components"; -import Checkbox from "./Checkbox"; -import { Fieldset, Toolbar, Button } from "../"; +import { Checkbox, Fieldset, Toolbar, Button, Cutout } from "../"; + +const StyledCutout = styled(Cutout)` + background: ${({ theme }) => theme.canvas}; +`; +const Wrapper = styled.div` + background: ${({ theme }) => theme.material}; + padding: 5rem; +`; storiesOf("Checkbox", module) - .addDecorator(story => ( -
- {story()} -
- )) + .addDecorator(story => {story()}) .add("controlled group", () => ) .add("uncontrolled", () => ( + )) + .add("flat", () => ( + +

+ When you want to add input field on a light background (like scrollable + content), just use the flat variant: +

+
+ + +
+ )); class ControlledCheckboxGroupExample extends React.Component { diff --git a/src/components/Cutout/Cutout.stories.js b/src/components/Cutout/Cutout.stories.js index 514f6747..b97d2c37 100644 --- a/src/components/Cutout/Cutout.stories.js +++ b/src/components/Cutout/Cutout.stories.js @@ -1,21 +1,23 @@ import React from "react"; import { storiesOf } from "@storybook/react"; -import Cutout from "./Cutout"; +import { Cutout, Window, WindowContent } from "../"; -storiesOf("Cutout", module) - .addDecorator(story => ( -
- {story()} -
- )) - .add("default", () => ( - -

swag

- - )); +storiesOf("Cutout", module).add("default", () => ( + + + +

+ React95 +

+ + + +)); diff --git a/src/components/Fieldset/Fieldset.js b/src/components/Fieldset/Fieldset.js index f4522b22..ba00dd42 100644 --- a/src/components/Fieldset/Fieldset.js +++ b/src/components/Fieldset/Fieldset.js @@ -1,19 +1,24 @@ import React from "react"; import propTypes from "prop-types"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { createDisabledTextStyles } from "../common"; import { fontSizes, padding } from "../common/system"; const StyledFieldset = styled.fieldset` position: relative; - border: 2px solid ${({ theme }) => theme.borderLightest}; - box-shadow: -1px -1px 0 1px ${({ theme }) => theme.borderDark}, - inset -1px -1px 0 1px ${({ theme }) => theme.borderDark}; + border: 2px solid + ${({ theme, variant }) => + variant === "flat" ? theme.flatDark : theme.borderLightest}; padding: ${padding.md}; - font-size: ${fontSizes.md}; color: ${({ theme }) => theme.text}; + ${({ variant }) => + variant !== "flat" && + css` + box-shadow: -1px -1px 0 1px ${({ theme }) => theme.borderDark}, + inset -1px -1px 0 1px ${({ theme }) => theme.borderDark}; + `} `; const StyledLegend = styled.legend` position: absolute; @@ -23,7 +28,8 @@ const StyledLegend = styled.legend` padding: 0 ${padding.sm}; font-size: ${fontSizes.md}; - background: ${({ theme }) => theme.material}; + background: ${({ theme, variant }) => + variant === "flat" ? theme.canvas : theme.material}; `; const StyledFieldsetContent = styled.div` @@ -33,6 +39,7 @@ const StyledFieldsetContent = styled.div` const Fieldset = ({ label, disabled, + variant, children, className, style, @@ -41,11 +48,12 @@ const Fieldset = ({ return ( - {label && {label}} + {label && {label}} {children} @@ -54,7 +62,8 @@ const Fieldset = ({ }; Fieldset.defaultProps = { - disabled: false + disabled: false, + variant: "default" }; Fieldset.propTypes = { @@ -66,7 +75,8 @@ Fieldset.propTypes = { className: propTypes.string, style: propTypes.object, children: propTypes.node, - disabled: propTypes.bool + disabled: propTypes.bool, + variant: propTypes.oneOf(["default", "flat"]) }; export default Fieldset; diff --git a/src/components/Fieldset/Fieldset.stories.js b/src/components/Fieldset/Fieldset.stories.js index 9b59790f..c066ceb1 100644 --- a/src/components/Fieldset/Fieldset.stories.js +++ b/src/components/Fieldset/Fieldset.stories.js @@ -2,11 +2,7 @@ import React, { useState } from "react"; import { storiesOf } from "@storybook/react"; import { action } from "@storybook/addon-actions"; -import Fieldset from "./Fieldset"; -import Window from "../Window/Window"; -import WindowContent from "../WindowContent/WindowContent"; -import Checkbox from "../Checkbox/Checkbox"; - +import { Checkbox, Cutout, Fieldset, Window, WindowContent } from "../"; storiesOf("Fieldset", module) .addDecorator(story => (
)) - .add("disabled", () => ); + .add("disabled", () => ) + .add("flat", () => ); +const FlatFieldset = () => { + const [state, setState] = useState(true); + return ( + + + +

+ When you want to use Fieldset on a light background (like scrollable + content), just use the flat variant: +

+
+
setState(!state)} + /> + } + disabled={state} + > + Some content here 😍 +
+
+ + + + ); +}; const DisabledFieldset = () => { const [state, setState] = useState(true); return ( diff --git a/src/components/ListItem/ListItem.stories.js b/src/components/ListItem/ListItem.stories.js index f42d9246..707df011 100644 --- a/src/components/ListItem/ListItem.stories.js +++ b/src/components/ListItem/ListItem.stories.js @@ -2,10 +2,9 @@ import React from "react"; import { storiesOf } from "@storybook/react"; import { action } from "@storybook/addon-actions"; -import ListItem from "./ListItem"; -import List from "../List/List"; +import { ListItem, List, Divider } from "../"; -export const actions = { onClick: action("onClick") }; +const actions = { onClick: action("onClick") }; storiesOf("ListItem", module) .addDecorator(story => ( @@ -51,6 +50,17 @@ storiesOf("ListItem", module) )) + .add("size small", () => ( + + View + + Paste + Paste Shortcut + Undo Copy + + Properties + + )) .add("render as link", () => ( Normal item diff --git a/src/components/NumberField/NumberField.js b/src/components/NumberField/NumberField.js index 6c6a2ca8..45883300 100644 --- a/src/components/NumberField/NumberField.js +++ b/src/components/NumberField/NumberField.js @@ -3,7 +3,7 @@ import propTypes from "prop-types"; import Button from "../Button/Button"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { blockSizes } from "../common/system"; import TextField from "../TextField/TextField"; @@ -20,18 +20,30 @@ const StyledButtonWrapper = styled.div` flex-direction: column; flex-wrap: nowrap; margin-left: 2px; - margin-top: -2px; + margin-top: ${({ variant }) => (variant === "default" ? "-2px" : "0")}; `; const StyledButton = styled(Button)` height: 50%; width: 30px; padding: 0; flex-shrink: 0; - border-left-color: ${({ theme }) => theme.borderLight}; - border-top-color: ${({ theme }) => theme.borderLight}; - box-shadow: inset 1px 1px 0px 1px ${({ theme }) => theme.borderLightest}, - inset -1px -1px 0 1px ${({ theme }) => theme.borderDark}; + + ${({ theme, isFlat }) => + !isFlat && + css` + border-left-color: ${({ theme }) => theme.borderLight}; + border-top-color: ${({ theme }) => theme.borderLight}; + box-shadow: inset 1px 1px 0px 1px ${({ theme }) => theme.borderLightest}, + inset -1px -1px 0 1px ${({ theme }) => theme.borderDark}; + `} `; +const StyledFlatButton = styled(Button)` + height: 50%; + width: 30px; + padding: 0; + flex-shrink: 0; +`; + const StyledButtonIcon = styled.span` position: absolute; left: 50%; @@ -50,10 +62,12 @@ const StyledButtonIcon = styled.span` class NumberField extends React.Component { static defaultProps = { + variant: "default", value: 0, disabled: false }; static propTypes = { + variant: propTypes.oneOf(["default", "flat"]), onChange: propTypes.func.isRequired, value: propTypes.number.isRequired, min: propTypes.number, @@ -95,6 +109,7 @@ class NumberField extends React.Component { disabled, disableKeyboardInput, className, + variant, width, style, shadow @@ -107,6 +122,7 @@ class NumberField extends React.Component { > - this.add(1)}> + this.add(1)} + > - this.add(-1)}> + this.add(-1)} + > diff --git a/src/components/NumberField/NumberField.stories.js b/src/components/NumberField/NumberField.stories.js index 126e5ef2..23c0821d 100644 --- a/src/components/NumberField/NumberField.stories.js +++ b/src/components/NumberField/NumberField.stories.js @@ -1,19 +1,19 @@ import React from "react"; import { storiesOf } from "@storybook/react"; +import styled from "styled-components"; -import NumberField from "./NumberField"; +import { NumberField, Cutout } from "../"; + +const StyledCutout = styled(Cutout)` + background: ${({ theme }) => theme.canvas}; +`; +const Wrapper = styled.div` + background: ${({ theme }) => theme.material}; + padding: 5rem; +`; storiesOf("NumberField", module) - .addDecorator(story => ( -
- {story()} -
- )) + .addDecorator(story => {story()}) .add("default", () => ( console.log(value)} /> )) @@ -40,4 +40,18 @@ storiesOf("NumberField", module) value={1991} onChange={value => console.log(value)} /> + )) + .add("flat", () => ( + +

+ When you want to use NumberField on a light background (like scrollable + content), just use the flat variant: +

+ console.log(value)} + /> + )); diff --git a/src/components/Progress/Progress.stories.js b/src/components/Progress/Progress.stories.js index ce47728e..a9664eaa 100644 --- a/src/components/Progress/Progress.stories.js +++ b/src/components/Progress/Progress.stories.js @@ -1,18 +1,15 @@ import React from "react"; import { storiesOf } from "@storybook/react"; -import Progress from "./Progress"; +import styled from "styled-components"; +import { Progress } from "../"; + +const Wrapper = styled.div` + background: ${({ theme }) => theme.material}; + padding: 5rem; +`; storiesOf("Progress", module) - .addDecorator(story => ( -
- {story()} -
- )) + .addDecorator(story => {story()}) .add("default", () => ) .add("no shadow", () => ); diff --git a/src/components/Radio/Radio.js b/src/components/Radio/Radio.js index aea3bc15..6839ae26 100644 --- a/src/components/Radio/Radio.js +++ b/src/components/Radio/Radio.js @@ -2,7 +2,7 @@ import React from "react"; import propTypes from "prop-types"; import styled, { css } from "styled-components"; -import { createDisabledTextStyles } from "../common"; +import { createDisabledTextStyles, createFlatBoxStyles } from "../common"; import { padding, fontSizes } from "../common/system"; import Cutout from "../Cutout/Cutout"; @@ -43,8 +43,8 @@ const createCheckmarkSymbol = ({ checked }) => background: ${({ theme }) => theme.checkmark}; } `; -// had to overwrite box-shadow for StyledCheckmark since the default made checkbox too dark -const StyledCheckmark = styled(Cutout)` + +const sharedCheckmarkStyles = css` position: absolute; top: 50%; left: 0; @@ -52,7 +52,12 @@ const StyledCheckmark = styled(Cutout)` width: 20px; height: 20px; border-radius: 50%; - + ${props => createCheckmarkSymbol(props)} +`; +// had to overwrite box-shadow for StyledCheckmark since the default made checkbox too dark +const StyledCheckmark = styled(Cutout)` + + ${sharedCheckmarkStyles} background: ${({ theme, isDisabled }) => isDisabled ? theme.material : theme.canvas}; @@ -70,13 +75,30 @@ const StyledCheckmark = styled(Cutout)` box-shadow: none; } - ${props => createCheckmarkSymbol(props)} `; - +const StyledFlatCheckmark = styled.div` + ${createFlatBoxStyles()} + ${sharedCheckmarkStyles} + outline: none; + background: ${({ theme, isDisabled }) => + isDisabled ? theme.flatLight : theme.canvas}; + &:before { + content: ""; + display: inline-block; + position: absolute; + top: 0; + left: 0; + width: calc(100% - 4px); + height: calc(100% - 4px); + border: 2px solid ${({ theme }) => theme.flatDark}; + border-radius: 50%; + } +`; const Radio = ({ onChange, label, disabled, + variant, value, checked, name, @@ -85,6 +107,8 @@ const Radio = ({ shadow, ...otherProps }) => { + const Checkmark = variant === "flat" ? StyledFlatCheckmark : StyledCheckmark; + return ( {label} @@ -97,11 +121,7 @@ const Radio = ({ name={name} {...otherProps} /> - + ); }; @@ -112,6 +132,7 @@ Radio.defaultProps = { value: null, label: "", disabled: false, + variant: "default", shadow: true }; @@ -127,6 +148,7 @@ Radio.propTypes = { checked: propTypes.bool, disabled: propTypes.bool, shadow: propTypes.bool, + variant: propTypes.oneOf(["default", "flat"]), style: propTypes.object }; diff --git a/src/components/Radio/Radio.stories.js b/src/components/Radio/Radio.stories.js index 4024bb0b..321cfa35 100644 --- a/src/components/Radio/Radio.stories.js +++ b/src/components/Radio/Radio.stories.js @@ -1,10 +1,7 @@ import React from "react"; import { storiesOf } from "@storybook/react"; - -import Radio from "./Radio"; -import Fieldset from "../Fieldset/Fieldset"; -import Window from "../Window/Window"; -import WindowContent from "../WindowContent/WindowContent"; +import styled from "styled-components"; +import { Radio, Cutout, Fieldset, Window, WindowContent } from "../"; storiesOf("Radio", module) .addDecorator(story => (
)) - .add("default", () => ); + .add("default", () => ) + .add("flat", () => ); class RadioGroup extends React.Component { state = { @@ -69,3 +67,75 @@ class RadioGroup extends React.Component { ); } } + +class FlatRadioGroup extends React.Component { + state = { + checkedValue: "Pear" + }; + + handleChange = e => this.setState({ checkedValue: e.target.value }); + + render() { + const { checkedValue } = this.state; + return ( + + + +

+ When you want to use radio buttons on a light background (like + scrollable content), just use the flat variant: +

+
+ +
+ +
+ +
+ +
+ + + + ); + } +} +let StyledCutout = styled(Cutout)` + background: ${({ theme }) => theme.canvas}; + color: ${({ theme }) => theme.text}; + padding: 2rem; + width: 300px; +`; diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js index 110f8ab4..a94be16e 100644 --- a/src/components/Select/Select.js +++ b/src/components/Select/Select.js @@ -3,12 +3,12 @@ import propTypes from "prop-types"; import Button from "../Button/Button"; -import styled from "styled-components"; -import { shadow } from "../common"; +import styled, { css } from "styled-components"; +import { shadow, createFlatBoxStyles } from "../common"; import { blockSizes, fontSizes, padding } from "../common/system"; import Cutout from "../Cutout/Cutout"; -const StyledSelectWrapper = styled(Cutout)` +const sharedWrapperStyles = css` height: ${blockSizes.md}; display: flex; align-items: center; @@ -17,6 +17,13 @@ const StyledSelectWrapper = styled(Cutout)` color: ${({ theme }) => theme.inputText}; font-size: ${fontSizes.md}; `; +const StyledSelectWrapper = styled(Cutout)` + ${sharedWrapperStyles} +`; +const StyledFlatSelectWrapper = styled.div` + ${createFlatBoxStyles()} + ${sharedWrapperStyles} +`; const StyledSelectContent = styled.div` width: 100%; padding-left: ${padding.sm}; @@ -24,15 +31,24 @@ const StyledSelectContent = styled.div` white-space: nowrap; `; const StyledDropdownButton = styled(Button)` - height: 100%; width: 30px; padding: 0; z-index: 1; flex-shrink: 0; - border-left-color: ${({ theme }) => theme.borderLight}; - border-top-color: ${({ theme }) => theme.borderLight}; - box-shadow: inset 1px 1px 0px 1px ${({ theme }) => theme.borderLightest}, - inset -1px -1px 0 1px ${({ theme }) => theme.borderDark}; + ${({ variant }) => + variant === "flat" + ? css` + height: calc(100% - 4px); + margin-right: 2px; + ` + : css` + height: 100%; + border-left-color: ${({ theme }) => theme.borderLight}; + border-top-color: ${({ theme }) => theme.borderLight}; + box-shadow: inset 1px 1px 0px 1px + ${({ theme }) => theme.borderLightest}, + inset -1px -1px 0 1px ${({ theme }) => theme.borderDark}; + `} `; const StyledDropdownIcon = styled.span` position: absolute; @@ -55,16 +71,27 @@ const StyledDropdownList = styled.ul` font-size: ${fontSizes.md}; position: absolute; - bottom: -2px; - width: calc(100% - 2px); transform: translateY(100%); left: 0px; background: ${({ theme }) => theme.canvas}; - border: 2px solid ${({ theme }) => theme.borderDarkest}; + padding: 2px; border-top: none; - box-shadow: ${props => (props.shadow ? shadow : "none")}; cursor: default; z-index: 99; + + ${({ variant }) => + variant === "flat" + ? css` + bottom: 2px; + width: 100%; + border: 2px solid ${({ theme }) => theme.flatDark}; + ` + : css` + box-shadow: ${props => (props.shadow ? shadow : "none")}; + bottom: -2px; + width: calc(100% - 2px); + border: 2px solid ${({ theme }) => theme.borderDarkest}; + `} `; const StyledDropdownListItem = styled.li` box-sizing: border-box; @@ -86,6 +113,7 @@ const Select = ({ items, selectedIndex, shadow, + variant, width, height, otherProps, @@ -100,8 +128,11 @@ const Select = ({ if (onChange) onChange(items[i].value); setIndex(i); }; + + const Wrapper = + variant === "flat" ? StyledFlatSelectWrapper : StyledSelectWrapper; return ( - setOpen(!open)} style={{ ...style, width }} @@ -111,12 +142,13 @@ const Select = ({ {items.length ? items[index].label : ""} - + {open && ( {items.map((item, i) => ( @@ -131,7 +163,7 @@ const Select = ({ ))} )} - + ); }; @@ -142,12 +174,14 @@ Select.propTypes = { height: propTypes.number, selectedIndex: propTypes.number, shadow: propTypes.bool, + variant: propTypes.oneOf(["default", "flat"]), style: propTypes.object, onChange: propTypes.func }; Select.defaultProps = { style: {}, shadow: true, + variant: "default", selectedIndex: 0 }; export default Select; diff --git a/src/components/Select/Select.stories.js b/src/components/Select/Select.stories.js index dfc2db6b..af49dfc6 100644 --- a/src/components/Select/Select.stories.js +++ b/src/components/Select/Select.stories.js @@ -1,8 +1,9 @@ import React from "react"; import { storiesOf } from "@storybook/react"; import { action } from "@storybook/addon-actions"; +import styled from "styled-components"; -import Select from "./Select"; +import { Select, Window, WindowContent, Cutout } from "../"; export const actions = { onClick: action("onClick") }; @@ -15,18 +16,13 @@ const items = [ { value: 6, label: "🛌🏻 Snorlax" }, { value: 7, label: "⛰ Geodude" } ]; +const Wrapper = styled.div` + background: ${({ theme }) => theme.material}; + padding: 5rem; +`; const onChange = value => console.log(value); storiesOf("Select", module) - .addDecorator(story => ( -
- {story()} -
- )) + .addDecorator(story => {story()}) .add("fixed width", () => ( + )) + .add("flat", () => ( + + + +

+ When you want to use Buttons on a light background (like scrollable + content), just use the flat variant: +

+
+