refactor(ui): refactor Button and PlainButton

packages/ui/src/atoms/Button.js

 import React from 'react'
 import styled from 'styled-components'
 
-const BaseButton = styled.button.attrs({
+const BaseStandardButton = styled.button.attrs({
   type: 'button',
 })`
   background: #ddd;
@@ -25,19 +25,20 @@ const BaseButton = styled.button.attrs({
     transform: scale(0.8);
   }
 
-  & ::after {
+  &::after {
     animation: 1s warning;
     opacity: 1;
   }
 `
 
-const PrimaryButton = BaseButton.extend`
+const PrimaryStandardButton = BaseStandardButton.extend`
   background-color: var(--color-primary);
   border: 2px solid transparent;
   border-bottom: 4px solid var(--color-primary);
   color: white;
 
-  &:hover {
+  &:hover,
+  &:focus {
     background: white;
     border: 2px solid var(--color-primary);
     border-bottom: 4px solid var(--color-primary);
@@ -46,16 +47,11 @@ const PrimaryButton = BaseButton.extend`
   }
 
   &:focus {
-    background: white;
-    border: 2px solid var(--color-primary);
-    border-bottom: 4px solid var(--color-primary);
     box-shadow: 0 2px 0 0 var(--color-primary);
-    color: var(--color-primary);
-    outline: 1px solid transparent;
   }
 `
 
-const DisabledButton = BaseButton.extend.attrs({
+const DisabledStandardButton = BaseStandardButton.extend.attrs({
   disabled: true,
 })`
   background: white;
@@ -87,14 +83,51 @@ const DisabledButton = BaseButton.extend.attrs({
   }
 `
 
-const Button = ({ children, disabled, primary, ...props }) => {
-  if (disabled) {
-    return <DisabledButton {...props}>{children}</DisabledButton>
+const plainButtonOverrides = `
+  background: none;
+  border: 0;
+  border-bottom: 2px solid #777;
+  font-style: italic;
+  letter-spacing: 0;
+  padding: 0;
+  text-transform: none;
+
+  &:hover,
+  &:focus {
+    background: transparent;
+    border: 0;
+    border-bottom: 2px solid var(--color-primary);
+    color: var(--color-primary);
+  }
+
+  &:active {
+    transform: scale(0.99);
+  }
+`
+
+const DisabledPlainButton = DisabledStandardButton.extend`
+  ${plainButtonOverrides};
+`
+const BasePlainButton = BaseStandardButton.extend`
+  ${plainButtonOverrides};
+`
+
+const Button = ({ children, disabled, primary, plain, ...props }) => {
+  if (!plain && disabled) {
+    return (
+      <DisabledStandardButton {...props}>{children}</DisabledStandardButton>
+    )
   }
   if (primary) {
-    return <PrimaryButton {...props}>{children}</PrimaryButton>
+    return <PrimaryStandardButton {...props}>{children}</PrimaryStandardButton>
+  }
+  if (plain && disabled) {
+    return <DisabledPlainButton {...props}>{children}</DisabledPlainButton>
+  }
+  if (plain) {
+    return <BasePlainButton {...props}>{children}</BasePlainButton>
   }
-  return <BaseButton {...props}>{children}</BaseButton>
+  return <BaseStandardButton {...props}>{children}</BaseStandardButton>
 }
 
 export default Button

packages/ui/src/atoms/Button.md

-A button.
+A standard button.
 
 ```js
-
 <Button>Save</Button>
 ```
 
-A button can be disabled.
+A standard button can be disabled.
 
 ```js
 <Button disabled>Save</Button>
 ```
 
-A button can be marked as the "primary" action.
+A standard button can be marked as the "primary" action.
 
 ```js
 <Button primary>Save</Button>
 ```
+
+A button can also be "plain" style.
+
+```js
+<Button plain>Plain button</Button>
+```
+
+Or be "plain" style and "disabled".
+
+```js
+<Button plain disabled>
+  Plain button
+</Button>
+```

packages/ui/src/molecules/PlainButton.js

 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,
-}) => (
+const PlainButton = ({ className, children, type, disabled, onClick }) => (
   <Button
-    className={classnames(classes.root, className)}
+    className={className}
     disabled={disabled}
     onClick={onClick}
-    primary={primary}
+    plain
     type={type}
   >
     {children}

packages/ui/src/molecules/PlainButton.local.scss

-.root.root {
-  background: none;
-  border: 0;
-  border-bottom: 2px solid #777;
-  font-style: italic;
-  letter-spacing: 0;
-  padding: 0;
-  text-transform: none;
-}
-
-.root.root:hover,
-.root.root:focus {
-  background: transparent;
-  border: 0;
-  border-bottom: 2px solid var(--color-primary);
-  color: var(--color-primary);
-}
-
-.root.root:active {
-  transform: scale(0.99);
-}