diff --git a/src/atoms/Button.js b/src/atoms/Button.js index 70419e58c3bd7f99db79a1a09c3c3d9bb43ad46b..6c39aad8b862d8b8e6c6666ff0e71be7916015a6 100644 --- a/src/atoms/Button.js +++ b/src/atoms/Button.js @@ -2,14 +2,12 @@ import React from 'react' import classnames from 'classnames' import classes from './Button.local.scss' -const Button = ({ children, type = 'button', back, disabled, addFile, primary, onClick}) => ( +const Button = ({ className, children, type = 'button', disabled, primary, onClick}) => ( <button className={classnames(classes.root, { [classes.disabled]: disabled, - [classes.back]: back, - [classes.addFile]: addFile, [classes.primary]: primary - })} + }, className)} type={type} disabled={disabled} onClick={onClick}>{children}</button> diff --git a/src/atoms/Button.local.scss b/src/atoms/Button.local.scss index 922affb747435b7e639884d6f1b7110d3f6b6810..8eaf7dca68de16f63713bded88980e27efe05720 100644 --- a/src/atoms/Button.local.scss +++ b/src/atoms/Button.local.scss @@ -7,6 +7,7 @@ padding: 10px 20px; position: relative; background: #ddd; + cursor: pointer; } .root:hover, @@ -16,7 +17,7 @@ outline: 1px solid transparent; } -// this will be added to the button that need a feedback to the user. +// this will be added to the button that need a feedback to the user. // &::after { // content: "Saved!"; // top: 20%; @@ -92,28 +93,6 @@ opacity: 1; } -.back { - background: none; - font-style: italic; - text-transform: none; - padding: 0; - letter-spacing: 0; - border: 0; - border-bottom: 2px solid #777; -} - -.back:hover, -.back:focus { - border: 0; - background: transparent; - border-bottom: 2px solid var(--color-primary); - color: var(--color-primary); -} - -.back:active { - transform: scale(0.99); -} - .addFile { background: none; font-style: normal; diff --git a/src/atoms/Button.md b/src/atoms/Button.md index d58c639513c2a50302e6e0a9f8a7056daaa5eb17..a7871d1b755b82b856d71378e689454757dacaeb 100644 --- a/src/atoms/Button.md +++ b/src/atoms/Button.md @@ -16,9 +16,3 @@ A button can be marked as the "primary" action. ```js <Button primary>Save</Button> ``` - -A button can be marked as the "go back" action, as an alternative to the primary button. - -```js -<Button back>Take me back to where i was.</Button> -``` diff --git a/src/atoms/Radio.js b/src/atoms/Radio.js index 24bdae79e4a638347c39ae21de7f779b274b1baf..48e34fddd5416f87a9c8fb539b33807761e3af1f 100644 --- a/src/atoms/Radio.js +++ b/src/atoms/Radio.js @@ -2,11 +2,13 @@ import React from 'react' import classnames from 'classnames' import classes from './Radio.local.scss' -const Radio = ({ color, inline, name, value, label, checked, required, onChange }) => ( +const inputGradient = color => `radial-gradient(closest-corner at center, ${color} 0%, ${color} 45%, white 45%, white 100%)` + +const Radio = ({ className, color = 'black', inline, name, value, label, checked, required, onChange }) => ( <label className={classnames(classes.root, { [classes.inline]: inline, [classes.checked]: checked - })} style={{color}}> + }, className)} style={{color}}> <input className={classes.input} type="radio" @@ -15,6 +17,9 @@ const Radio = ({ color, inline, name, value, label, checked, required, onChange checked={checked} required={required} onChange={onChange}/> + <span + className={classes.pseudoInput} + style={{ background: checked ? inputGradient(color) : 'transparent' }}> </span> <span className={classes.label}>{label}</span> </label> ) diff --git a/src/index.js b/src/index.js index 48aa242dcda7afcdf2be3db210ad81da429145ef..699a30066e284dfea5a98d1645c10b6dbb4c74ef 100644 --- a/src/index.js +++ b/src/index.js @@ -17,6 +17,7 @@ export { default as AppBar } from './molecules/AppBar' export { default as Attachments } from './molecules/Attachments' export { default as CheckboxGroup } from './molecules/CheckboxGroup' export { default as Files } from './molecules/Files' +export { default as PlainButton } from './molecules/PlainButton' export { default as Supplementary } from './molecules/Supplementary' export { default as RadioGroup } from './molecules/RadioGroup' export { default as YesOrNo } from './molecules/YesOrNo' diff --git a/src/molecules/PlainButton.js b/src/molecules/PlainButton.js new file mode 100644 index 0000000000000000000000000000000000000000..7156db0734bca3760957bba8228ce2549252d340 --- /dev/null +++ b/src/molecules/PlainButton.js @@ -0,0 +1,16 @@ +import React from 'react' +import classnames from 'classnames' +import Button from '../atoms/Button' +import classes from './PlainButton.local.scss' + +const PlainButton = ({ className, children, type, disabled, primary, onClick }) => ( + <Button + className={classnames(className, classes.root)} + type={type} + primary={primary} + disabled={disabled} + onClick={onClick}>{children}</Button> +) + +export default PlainButton + diff --git a/src/molecules/PlainButton.local.scss b/src/molecules/PlainButton.local.scss new file mode 100644 index 0000000000000000000000000000000000000000..2779dbfcca449a8ceeffd6efc03daaceccdb36b4 --- /dev/null +++ b/src/molecules/PlainButton.local.scss @@ -0,0 +1,21 @@ +.root { + background: none; + font-style: italic; + text-transform: none; + padding: 0; + letter-spacing: 0; + border: 0; + border-bottom: 2px solid #777; +} + +.root:hover, +.root:focus { + border: 0; + background: transparent; + border-bottom: 2px solid var(--color-primary); + color: var(--color-primary); +} + +.root:active { + transform: scale(0.99); +} diff --git a/src/molecules/PlainButton.md b/src/molecules/PlainButton.md new file mode 100644 index 0000000000000000000000000000000000000000..97f05703cedc8b627544470e8ca68473a8d682dd --- /dev/null +++ b/src/molecules/PlainButton.md @@ -0,0 +1,5 @@ +A button that is styled as a link. + +```js +<PlainButton>Take me back.</PlainButton> +```