Merge pull request #60 from luizbaldi/eslint-prettier-improvements

ESLint and Prettier improvements
2026-04-26 03:00:18 -04:00 · 2019-10-29 09:22:44 +01:00
parent 6010eab067 5cb3abefd6
commit d28194908a
68 changed files with 579 additions and 658 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,7 +1,7 @@
 module.exports = {
-  extends: ['airbnb', 'prettier'],
+  extends: ['airbnb', 'plugin:prettier/recommended', 'prettier/react'],
  parser: 'babel-eslint',
-  plugins: ['prettier'],
+  plugins: ['react', 'prettier'],
  env: {
    browser: true,
    es6: true,
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
-    "lint": "eslint src",
+    "lint": "eslint src --ext .js",
    "lint:fix": "npm run lint -- --fix"
  },
  "peerDependencies": {
--- a/src/components/Anchor/Anchor.js
+++ b/src/components/Anchor/Anchor.js
@@ -13,32 +13,22 @@ const StyledAnchor = styled.a`
  }
 `;

-const Anchor = ({
-  className, style, href, children, ...otherProps
-}) => (
-  <StyledAnchor
-    href={href}
-    className={className}
-    style={style}
-    {...otherProps}
-  >
+const Anchor = ({ className, style, href, children, ...otherProps }) => (
+  <StyledAnchor href={href} className={className} style={style} {...otherProps}>
    {children}
  </StyledAnchor>
 );

 Anchor.defaultProps = {
  className: '',
-  style: {},
+  style: {}
 };

 Anchor.propTypes = {
  className: propTypes.string,
  href: propTypes.string.isRequired,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
-  children: propTypes.node.isRequired,
+  style: propTypes.shape([propTypes.string, propTypes.number]),
+  children: propTypes.node.isRequired
 };

 export default Anchor;
--- a/src/components/Anchor/Anchor.spec.js
+++ b/src/components/Anchor/Anchor.spec.js
@@ -5,33 +5,32 @@ import Anchor from './Anchor';

 const defaultProps = {
  children: '',
-  href: '',
+  href: ''
 };

 describe('<Anchor />', () => {
  it('should render href', () => {
-    const { container } = render((
-      <Anchor {...defaultProps} href="http://yoda.com" />
-    ));
+    const { container } = render(
+      <Anchor {...defaultProps} href='http://yoda.com' />
+    );
    const anchorEl = container.firstChild;

    expect(anchorEl).toHaveAttribute('href', 'http://yoda.com');
  });

  it('should render children', () => {
-    const { container } = render(<Anchor {...defaultProps}>You shall pass</Anchor>);
+    const { container } = render(
+      <Anchor {...defaultProps}>You shall pass</Anchor>
+    );
    const anchorEl = container.firstChild;

    expect(anchorEl).toHaveTextContent('You shall pass');
  });

  it('should render custom style', () => {
-    const { container } = render((
-      <Anchor
-        {...defaultProps}
-        style={{ color: 'papayawhip' }}
-      />
-    ));
+    const { container } = render(
+      <Anchor {...defaultProps} style={{ color: 'papayawhip' }} />
+    );
    const anchorEl = container.firstChild;

    expect(anchorEl).toHaveAttribute('style', 'color: papayawhip;');
--- a/src/components/Anchor/Anchor.stories.js
+++ b/src/components/Anchor/Anchor.stories.js
@@ -8,22 +8,21 @@ storiesOf('Anchor', module)
    <div
      style={{
        padding: '5rem',
-        background: '#ced0cf',
+        background: '#ced0cf'
      }}
    >
      {story()}
    </div>
  ))
  .add('default', () => (
-    <Anchor href="https://expensive.toys" target="_blank">
+    <Anchor href='https://expensive.toys' target='_blank'>
      Expensive Toys
-      {' '}
    </Anchor>
  ))
  .add('within text', () => (
    <h1>
-      {'Everybody needs '}
-      <Anchor href="https://expensive.toys" target="_blank">
+      Everybody needs
+      <Anchor href='https://expensive.toys' target='_blank'>
        Expensive Toys
      </Anchor>
    </h1>
--- a/src/components/AppBar/AppBar.js
+++ b/src/components/AppBar/AppBar.js
@@ -39,18 +39,15 @@ AppBar.defaultProps = {
  shadow: true,
  fixed: true,
  style: {},
-  className: '',
+  className: ''
 };

 AppBar.propTypes = {
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number]),
  shadow: propTypes.bool,
  className: propTypes.string,
  children: propTypes.node.isRequired,
-  fixed: propTypes.bool,
+  fixed: propTypes.bool
 };

 export default AppBar;
--- a/src/components/AppBar/AppBar.spec.js
+++ b/src/components/AppBar/AppBar.spec.js
@@ -32,12 +32,9 @@ describe('<AppBar />', () => {
  });

  it('should custom style', () => {
-    const { container } = render((
-      <AppBar
-        {...defaultProps}
-        style={{ backgroundColor: 'papayawhip' }}
-      />
-    ));
+    const { container } = render(
+      <AppBar {...defaultProps} style={{ backgroundColor: 'papayawhip' }} />
+    );
    const headerEl = container.firstChild;

    expect(headerEl).toHaveAttribute('style', 'background-color: papayawhip;');
--- a/src/components/AppBar/AppBar.stories.js
+++ b/src/components/AppBar/AppBar.stories.js
@@ -17,7 +17,7 @@ storiesOf('AppBar', module)
    <div
      style={{
        padding: '5rem',
-        background: 'teal',
+        background: 'teal'
      }}
    >
      {story()}
@@ -28,7 +28,7 @@ storiesOf('AppBar', module)
      <Toolbar style={{ justifyContent: 'space-between' }}>
        <Menu />
        <TextField
-          placeholder="Search..."
+          placeholder='Search...'
          width={150}
          style={{ marginLeft: 4 }}
        />
@@ -51,22 +51,28 @@ function Menu() {
    <div style={{ position: 'relative', display: 'inline-block' }}>
      {open && (
        <List
-          horizontalAlign="left"
-          verticalAlign="bottom"
+          horizontalAlign='left'
+          verticalAlign='bottom'
          open={open}
          onClick={handleClose}
        >
          <ListItem>
-            <span role="img" aria-label="👨‍💻">👨‍💻</span>
+            <span role='img' aria-label='👨‍💻'>
+              👨‍💻
+            </span>
            Profile
          </ListItem>
          <ListItem>
-            <span role="img" aria-label="📁">📁</span>
+            <span role='img' aria-label='📁'>
+              📁
+            </span>
            My account
          </ListItem>
          <Divider />
          <ListItem disabled>
-            <span role="img" aria-label="🔙">🔙</span>
+            <span role='img' aria-label='🔙'>
+              🔙
+            </span>
            Logout
          </ListItem>
        </List>
--- a/src/components/Avatar/Avatar.js
+++ b/src/components/Avatar/Avatar.js
@@ -11,16 +11,18 @@ const StyledAvatar = styled.div`
  width: calc(${() => blockSizes.md} - 2px);
  border-radius: ${({ square }) => (square ? 0 : '50%')};
  overflow: hidden;
-  ${({ noBorder, theme }) => !noBorder
-    && `
+  ${({ noBorder, theme }) =>
+    !noBorder &&
+    `
    border-top: 2px solid ${theme.borderDark};
    border-left: 2px solid ${theme.borderDark};
    border-bottom: 2px solid ${theme.borderLightest};
    border-right: 2px solid ${theme.borderLightest};
    background: ${theme.material};
  `}
-  ${({ src }) => !src
-    && `
+  ${({ src }) =>
+    !src &&
+    `
    display: flex;
    align-items: center;
    justify-content: space-around;
@@ -36,9 +38,7 @@ const SlyledAvatarIMG = styled.img`
  height: 100%;
 `;

-const Avatar = ({
-  children, noBorder, square, src, alt, ...otherProps
-}) => (
+const Avatar = ({ children, noBorder, square, src, alt, ...otherProps }) => (
  <StyledAvatar noBorder={noBorder} square={square} {...otherProps}>
    {src ? <SlyledAvatarIMG src={src} alt={alt} /> : children}
  </StyledAvatar>
@@ -49,7 +49,7 @@ Avatar.defaultProps = {
  noBorder: false,
  src: undefined,
  children: null,
-  alt: '',
+  alt: ''
 };

 Avatar.propTypes = {
@@ -57,7 +57,7 @@ Avatar.propTypes = {
  noBorder: propTypes.bool,
  children: propTypes.node,
  src: propTypes.string,
-  alt: propTypes.string,
+  alt: propTypes.string
 };

 export default Avatar;
--- a/src/components/Avatar/Avatar.spec.js
+++ b/src/components/Avatar/Avatar.spec.js
@@ -20,10 +20,15 @@ describe('<Avatar />', () => {
  });

  it('should handle border properly', () => {
-    const { container, rerender } = renderWithTheme(<Avatar noBorder={false} />);
+    const { container, rerender } = renderWithTheme(
+      <Avatar noBorder={false} />
+    );
    const avatarEl = container.firstChild;

-    expect(avatarEl).toHaveStyleRule('border-top', `2px solid ${theme.borderDark}`);
+    expect(avatarEl).toHaveStyleRule(
+      'border-top',
+      `2px solid ${theme.borderDark}`
+    );

    rerender(<Avatar noBorder />);

@@ -43,9 +48,7 @@ describe('<Avatar />', () => {

  it('should render with source', async () => {
    const catGif = 'https://cdn2.thecatapi.com/images/1ac.gif';
-    const { findByAltText } = render((
-      <Avatar src={catGif} alt="cat avatar" />
-    ));
+    const { findByAltText } = render(<Avatar src={catGif} alt='cat avatar' />);
    const imageEl = await findByAltText('cat avatar');

    expect(imageEl.src).toBe(catGif);
@@ -53,11 +56,11 @@ describe('<Avatar />', () => {

  it('should render source with priority over children', async () => {
    const catGif = 'https://cdn2.thecatapi.com/images/1ac.gif';
-    const { queryByText } = render((
-      <Avatar src={catGif} alt="cat avatar">
+    const { queryByText } = render(
+      <Avatar src={catGif} alt='cat avatar'>
        Cats are cool
      </Avatar>
-    ));
+    );
    const content = await queryByText(/cats are cool/i);

    expect(content).toBeNull();
--- a/src/components/Avatar/Avatar.stories.js
+++ b/src/components/Avatar/Avatar.stories.js
@@ -11,7 +11,7 @@ storiesOf('Avatar', module)
    <div
      style={{
        padding: '5rem',
-        background: 'teal',
+        background: 'teal'
      }}
    >
      {story()}
@@ -25,7 +25,7 @@ storiesOf('Avatar', module)
        <Button flat accent>
          Menu
        </Button>
-        <Avatar src="https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1" />
+        <Avatar src='https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1' />
      </Toolbar>
    </AppBar>
  ))
@@ -38,7 +38,7 @@ storiesOf('Avatar', module)
          Menu
        </Button>
        <Avatar
-          src="https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1"
+          src='https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1'
          noBorder
        />
      </Toolbar>
@@ -65,7 +65,9 @@ storiesOf('Avatar', module)
          Menu
        </Button>
        <Avatar square>
-          <span role="img" aria-label="🚀">🚀</span>
+          <span role='img' aria-label='🚀'>
+            🚀
+          </span>
        </Avatar>
      </Toolbar>
    </AppBar>
--- a/src/components/Bar/Bar.js
+++ b/src/components/Bar/Bar.js
@@ -15,28 +15,18 @@ const StyledBar = styled.div`
  background: ${({ theme }) => theme.material};
 `;

-const Bar = ({
-  size, className, style, ...otherProps
-}) => (
-  <StyledBar
-    size={size}
-    className={className}
-    style={style}
-    {...otherProps}
-  />
+const Bar = ({ size, className, style, ...otherProps }) => (
+  <StyledBar size={size} className={className} style={style} {...otherProps} />
 );

 Bar.defaultProps = {
  size: 'md',
  className: '',
-  style: {},
+  style: {}
 };
 Bar.propTypes = {
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
-  size: propTypes.oneOf(['sm', 'md', 'lg']),
+  style: propTypes.shape([propTypes.string, propTypes.number]),
+  size: propTypes.oneOf(['sm', 'md', 'lg'])
 };
 export default Bar;
--- a/src/components/Bar/Bar.spec.js
+++ b/src/components/Bar/Bar.spec.js
@@ -13,18 +13,20 @@ describe('<Bar />', () => {
  });

  it('should handle bar with correct size', () => {
-    const { container, rerender } = render(<Bar size="sm" />);
+    const { container, rerender } = render(<Bar size='sm' />);
    const barEl = container.firstChild;

    expect(barEl).toHaveStyleRule('height', blockSizes.sm);

-    rerender(<Bar size="lg" />);
+    rerender(<Bar size='lg' />);

    expect(barEl).toHaveStyleRule('height', blockSizes.lg);
  });

  it('should handle custom style', () => {
-    const { container } = render(<Bar style={{ backgroundColor: 'papayawhip' }} />);
+    const { container } = render(
+      <Bar style={{ backgroundColor: 'papayawhip' }} />
+    );
    const barEl = container.firstChild;

    expect(barEl).toHaveAttribute('style', 'background-color: papayawhip;');
--- a/src/components/Bar/Bar.stories.js
+++ b/src/components/Bar/Bar.stories.js
@@ -11,7 +11,7 @@ storiesOf('Bar', module)
    <div
      style={{
        padding: '5rem',
-        background: 'teal',
+        background: 'teal'
      }}
    >
      {story()}
@@ -21,8 +21,8 @@ storiesOf('Bar', module)
    <AppBar>
      <Toolbar>
        <Bar />
-        <Button variant="menu">Edit</Button>
-        <Button variant="menu" disabled>
+        <Button variant='menu'>Edit</Button>
+        <Button variant='menu' disabled>
          Save
        </Button>
        <Bar />
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -9,7 +9,7 @@ import {
  createWellBorderStyles,
  createBoxStyles,
  createFlatBoxStyles,
-  createDisabledTextStyles,
+  createDisabledTextStyles
 } from '../common';
 import { blockSizes, fontSizes, padding } from '../common/system';

@@ -19,7 +19,8 @@ const commonButtonStyles = css`
  align-items: center;
  justify-content: center;
  height: ${({ size }) => blockSizes[size]};
-  width: ${({ fullWidth, square, size }) => (fullWidth ? '100%' : square ? blockSizes[size] : 'auto')};
+  width: ${({ fullWidth, square, size }) =>
+    fullWidth ? '100%' : square ? blockSizes[size] : 'auto'};
  padding: ${({ square }) => (square ? 0 : `0 ${padding.sm}`)};
  font-size: ${fontSizes.md};
  &:active {
@@ -29,16 +30,18 @@ const commonButtonStyles = css`
 `;

 const StyledButton = styled.button`
-  ${({ variant }) => (variant === 'flat'
-    ? css`
-      ${createFlatBoxStyles()} /* background: none; */
-    `
-    : variant === 'menu'
+  ${({ variant }) =>
+    variant === 'flat'
+      ? css`
+          ${createFlatBoxStyles()} /* background: none; */
+        `
+      : variant === 'menu'
      ? css`
          ${createBoxStyles()};
          border: 2px solid transparent;
          &:hover {
-            ${({ isDisabled, active }) => !isDisabled && !active && createWellBorderStyles(false)}
+            ${({ isDisabled, active }) =>
+              !isDisabled && !active && createWellBorderStyles(false)}
          }
          &:active {
            ${({ isDisabled }) => !isDisabled && createWellBorderStyles(true)}
@@ -48,17 +51,17 @@ const StyledButton = styled.button`
        `
      : css`
          ${createBoxStyles()};
-          ${({ active }) => (active ? createBorderStyles(true) : createBorderStyles(false))}
-          ${({ active, theme }) => active
-            && `background-image: ${
-              theme.hatchedBackground
-            };`}
+          ${({ active }) =>
+            active ? createBorderStyles(true) : createBorderStyles(false)}
+          ${({ active, theme }) =>
+            active &&
+            `background-image: ${theme.hatchedBackground};`}

          &:active {
            ${({ isDisabled }) => !isDisabled && createBorderStyles(true)}
          }
          ${({ isDisabled }) => isDisabled && createDisabledTextStyles()}
-        `)}
+        `}
  ${commonButtonStyles}
 `;

@@ -87,7 +90,7 @@ const Button = ({
    square={square}
    active={active}
    className={className}
-      // onTouchStart below to enable button :active style on iOS
+    // onTouchStart below to enable button :active style on iOS
    onTouchStart={() => ''}
    {...otherProps}
  >
@@ -105,16 +108,13 @@ Button.defaultProps = {
  square: false,
  active: false,
  variant: 'default',
-  className: '',
+  className: ''
 };

 Button.propTypes = {
  type: propTypes.string,
  onClick: propTypes.func,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number]),
  disabled: propTypes.bool,
  fullWidth: propTypes.bool,
  size: propTypes.oneOf(['sm', 'md', 'lg']),
@@ -122,7 +122,7 @@ Button.propTypes = {
  active: propTypes.bool,
  variant: propTypes.oneOf(['default', 'menu', 'flat']),
  className: propTypes.string,
-  children: propTypes.node.isRequired,
+  children: propTypes.node.isRequired
 };

 export default Button;
--- a/src/components/Button/Button.spec.js
+++ b/src/components/Button/Button.spec.js
@@ -7,7 +7,7 @@ import { blockSizes } from '../common/system';
 import Button from './Button';

 const defaultProps = {
-  children: 'click me',
+  children: 'click me'
 };

 describe('<Button />', () => {
@@ -20,7 +20,7 @@ describe('<Button />', () => {
  });

  it('should handle different types', () => {
-    const { getByRole } = render(<Button {...defaultProps} type="submit" />);
+    const { getByRole } = render(<Button {...defaultProps} type='submit' />);
    const button = getByRole('button');

    expect(button).toHaveAttribute('type', 'submit');
@@ -28,7 +28,9 @@ describe('<Button />', () => {

  it('should handle click properly', () => {
    const onButtonClick = jest.fn();
-    const { getByRole } = render(<Button {...defaultProps} onClick={onButtonClick} />);
+    const { getByRole } = render(
+      <Button {...defaultProps} onClick={onButtonClick} />
+    );
    const button = getByRole('button');

    fireEvent.click(button);
@@ -37,24 +39,28 @@ describe('<Button />', () => {
  });

  it('should handle disabled for all variants', () => {
-    const { getByRole, rerender } = renderWithTheme(<Button {...defaultProps} disabled />);
+    const { getByRole, rerender } = renderWithTheme(
+      <Button {...defaultProps} disabled />
+    );
    const button = getByRole('button');
    const disabledTextShadow = `1px 1px ${theme.textDisabledShadow}`;

    expect(button).toHaveStyleRule('color', theme.textDisabled);
    expect(button).toHaveStyleRule('text-shadow', disabledTextShadow);

-    rerender(<Button {...defaultProps} variant="menu" />);
+    rerender(<Button {...defaultProps} variant='menu' />);
    expect(button).toHaveStyleRule('color', theme.textDisabled);
    expect(button).toHaveStyleRule('text-shadow', disabledTextShadow);

-    rerender(<Button {...defaultProps} variant="flat" />);
+    rerender(<Button {...defaultProps} variant='flat' />);
    expect(button).toHaveStyleRule('color', theme.textDisabled);
    expect(button).toHaveStyleRule('text-shadow', disabledTextShadow);
  });

  it('should handle fullWidth prop', () => {
-    const { getByRole, rerender } = render(<Button {...defaultProps} fullWidth />);
+    const { getByRole, rerender } = render(
+      <Button {...defaultProps} fullWidth />
+    );
    const button = getByRole('button');

    expect(button).toHaveStyleRule('width', '100%');
@@ -65,18 +71,20 @@ describe('<Button />', () => {
  });

  it('should handle button sizes properly', () => {
-    const { getByRole, rerender } = render(<Button {...defaultProps} size="sm" />);
+    const { getByRole, rerender } = render(
+      <Button {...defaultProps} size='sm' />
+    );
    const button = getByRole('button');

    expect(button).toHaveStyleRule('height', blockSizes.sm);

-    rerender(<Button {...defaultProps} size="lg" />);
+    rerender(<Button {...defaultProps} size='lg' />);

    expect(button).toHaveStyleRule('height', blockSizes.lg);
  });

  it('should handle square prop', () => {
-    const { getByRole } = render(<Button {...defaultProps} square size="md" />);
+    const { getByRole } = render(<Button {...defaultProps} square size='md' />);
    const button = getByRole('button');

    expect(button).toHaveStyleRule('padding', '0');
--- a/src/components/Button/Button.stories.js
+++ b/src/components/Button/Button.stories.js
@@ -13,7 +13,7 @@ import {
  ListItem,
  Divider,
  Cutout,
-  Toolbar,
+  Toolbar
 } from '..';

 const actions = { onClick: action('onClick') };
@@ -27,7 +27,7 @@ storiesOf('Button', module)
    <div
      style={{
        padding: '5rem',
-        background: 'teal',
+        background: 'teal'
      }}
    >
      {story()}
@@ -51,7 +51,9 @@ storiesOf('Button', module)
  ))
  .add('square', () => (
    <Button {...actions} square>
-      <span role="img" aria-label="🎂">🎂</span>
+      <span role='img' aria-label='🎂'>
+        🎂
+      </span>
    </Button>
  ))
  .add('sizes', () => (
@@ -60,16 +62,16 @@ storiesOf('Button', module)
        alignItems: 'center',
        display: 'flex',
        width: 200,
-        justifyContent: 'space-between',
+        justifyContent: 'space-between'
      }}
    >
-      <Button {...actions} size="sm">
+      <Button {...actions} size='sm'>
        small
      </Button>
-      <Button {...actions} size="md">
+      <Button {...actions} size='md'>
        medium
      </Button>
-      <Button {...actions} size="lg">
+      <Button {...actions} size='lg'>
        large
      </Button>
    </div>
@@ -85,14 +87,14 @@ storiesOf('Button', module)
          </p>
          <div
            style={{
-              marginTop: '1.5rem',
+              marginTop: '1.5rem'
            }}
          >
            <Toolbar>
-              <Button {...actions} variant="flat" fullWidth accent>
+              <Button {...actions} variant='flat' fullWidth accent>
                OK
              </Button>
-              <Button {...actions} variant="flat" disabled fullWidth accent>
+              <Button {...actions} variant='flat' disabled fullWidth accent>
                Cancel
              </Button>
            </Toolbar>
@@ -116,43 +118,45 @@ function MenuButtonExample() {
  return (
    <Window style={{ maxWidth: '250px' }}>
      <WindowHeader>
-        <span role="img" aria-label="🥝">🥝</span>
+        <span role='img' aria-label='🥝'>
+          🥝
+        </span>
        Kiwi.app
      </WindowHeader>
      <Toolbar noPadding>
-        <Button variant="menu" disabled>
+        <Button variant='menu' disabled>
          Upload
        </Button>
-        <Button variant="menu" disabled>
+        <Button variant='menu' disabled>
          Save
        </Button>
        <div
          style={{
            position: 'relative',
            display: 'inline-block',
-            alignSelf: 'left',
+            alignSelf: 'left'
          }}
        >
          {open && (
            <List
              style={{ zIndex: '9999' }}
-              horizontalAlign="right"
-              verticalAlign="bottom"
+              horizontalAlign='right'
+              verticalAlign='bottom'
              open={open}
              onClick={handleClose}
            >
-              <ListItem size="sm">Copy link</ListItem>
+              <ListItem size='sm'>Copy link</ListItem>
              <Divider />
-              <ListItem size="sm">Facebook</ListItem>
-              <ListItem size="sm">Twitter</ListItem>
-              <ListItem size="sm">Instagram</ListItem>
+              <ListItem size='sm'>Facebook</ListItem>
+              <ListItem size='sm'>Twitter</ListItem>
+              <ListItem size='sm'>Instagram</ListItem>
              <Divider />
-              <ListItem size="sm" disabled>
+              <ListItem size='sm' disabled>
                MySpace
              </ListItem>
            </List>
          )}
-          <Button variant="menu" onClick={handleClick} size="sm" active={open}>
+          <Button variant='menu' onClick={handleClick} size='sm' active={open}>
            Share
          </Button>
        </div>
@@ -161,8 +165,8 @@ function MenuButtonExample() {
        <Cutout>
          <img
            style={{ width: '100%', height: '1uto', display: 'block' }}
-            src="https://image.freepik.com/foto-gratuito/la-frutta-fresca-del-kiwi-tagliata-a-meta-con-la-decorazione-completa-del-pezzo-e-bella-sulla-tavola-di-legno_47436-1.jpg"
-            alt="kiwi"
+            src='https://image.freepik.com/foto-gratuito/la-frutta-fresca-del-kiwi-tagliata-a-meta-con-la-decorazione-completa-del-pezzo-e-bella-sulla-tavola-di-legno_47436-1.jpg'
+            alt='kiwi'
          />
        </Cutout>
      </WindowContent>
--- a/src/components/Checkbox/Checkbox.js
+++ b/src/components/Checkbox/Checkbox.js
@@ -29,10 +29,11 @@ const StyledInput = styled.input`
  z-index: -99;
 `;

-const createCheckmarkSymbol = ({ checked }) => checked
-  && css`
+const createCheckmarkSymbol = ({ checked }) =>
+  checked &&
+  css`
    &:after {
-      content: "";
+      content: '';
      display: block;
      position: absolute;
      left: 50%;
@@ -56,8 +57,10 @@ const sharedCheckmarkStyles = css`
 `;
 const StyledCheckmark = styled(Cutout)`
  ${sharedCheckmarkStyles}
-  background: ${({ theme, isDisabled }) => (isDisabled ? theme.material : theme.canvas)};
-  box-shadow: ${({ shadow }) => (shadow ? 'inset 3px 3px 10px rgba(0, 0, 0, 0.1)' : 'none')};
+  background: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.material : theme.canvas};
+  box-shadow: ${({ shadow }) =>
+    shadow ? 'inset 3px 3px 10px rgba(0, 0, 0, 0.1)' : 'none'};
  &:before {
    box-shadow: none;
  }
@@ -65,7 +68,8 @@ const StyledCheckmark = styled(Cutout)`
 const StyledFlatCheckmark = styled.div`
  ${createFlatBoxStyles()}
  ${sharedCheckmarkStyles}
-  background: ${({ theme, isDisabled }) => (isDisabled ? theme.flatLight : theme.canvas)};
+  background: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.flatLight : theme.canvas};

 `;
 const Checkbox = ({
@@ -89,7 +93,7 @@ const Checkbox = ({
  if (defaultChecked || checked === undefined) {
    const [state, setState] = useState(defaultChecked || false);

-    const handleChange = (e) => {
+    const handleChange = e => {
      const newState = e.target.checked;
      setState(newState);
      if (onChange) onChange(e);
@@ -100,7 +104,7 @@ const Checkbox = ({
        <StyledInput
          onChange={disabled ? undefined : handleChange}
          readOnly={disabled}
-          type="checkbox"
+          type='checkbox'
          value={value}
          checked={state}
          name={name}
@@ -115,7 +119,7 @@ const Checkbox = ({
        <StyledInput
          onChange={disabled ? undefined : onChange}
          readOnly={disabled}
-          type="checkbox"
+          type='checkbox'
          value={value}
          checked={checked}
          name={name}
@@ -142,7 +146,7 @@ Checkbox.defaultProps = {
  checked: false,
  style: {},
  defaultChecked: false,
-  className: '',
+  className: ''
 };

 Checkbox.propTypes = {
@@ -151,19 +155,16 @@ Checkbox.propTypes = {
  value: propTypes.oneOfType([
    propTypes.string,
    propTypes.number,
-    propTypes.bool,
+    propTypes.bool
  ]).isRequired,
  label: propTypes.oneOfType([propTypes.string, propTypes.number]),
  checked: propTypes.bool,
  disabled: propTypes.bool,
  variant: propTypes.oneOf(['default', 'flat']),
  shadow: propTypes.bool,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number]),
  defaultChecked: propTypes.bool,
-  className: propTypes.string,
+  className: propTypes.string
 };

 export default Checkbox;
--- a/src/components/Checkbox/Checkbox.stories.js
+++ b/src/components/Checkbox/Checkbox.stories.js
@@ -2,12 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import styled from 'styled-components';

-import {
-  Checkbox,
-  Fieldset,
-  Button,
-  Cutout,
-} from '..';
+import { Checkbox, Fieldset, Button, Cutout } from '..';

 const StyledCutout = styled(Cutout)`
  background: ${({ theme }) => theme.canvas};
@@ -21,8 +16,8 @@ storiesOf('Checkbox', module)
  .add('controlled group', () => <ControlledCheckboxGroupExample />)
  .add('uncontrolled', () => (
    <Checkbox
-      name="single"
-      value="single"
+      name='single'
+      value='single'
      label="I'm single 😥 ...and no one's controlling me 😎"
      defaultChecked
    />
@@ -35,18 +30,18 @@ storiesOf('Checkbox', module)
      </p>
      <div style={{ marginTop: '1rem' }}>
        <Checkbox
-          name="conspirancy"
-          variant="flat"
-          value="single"
-          label="Earth is flat 🌍"
+          name='conspirancy'
+          variant='flat'
+          value='single'
+          label='Earth is flat 🌍'
          defaultChecked
        />
        <Checkbox
-          name="conspirancy"
-          variant="flat"
+          name='conspirancy'
+          variant='flat'
          defaultChecked={false}
-          value="single"
-          label="Reptilians rule the world 🦎"
+          value='single'
+          label='Reptilians rule the world 🦎'
          disabled
        />
      </div>
@@ -57,13 +52,15 @@ class ControlledCheckboxGroupExample extends React.Component {
  state = {
    steak: true,
    tortilla: false,
-    pizza: false,
+    pizza: false
  };

-  handleChange = (e) => {
-    const { target: { value } } = e;
+  handleChange = e => {
+    const {
+      target: { value }
+    } = e;
    this.setState(prevState => ({
-      [value]: !prevState[value],
+      [value]: !prevState[value]
    }));
  };

@@ -71,38 +68,38 @@ class ControlledCheckboxGroupExample extends React.Component {
    this.setState({
      steak: false,
      tortilla: false,
-      pizza: false,
+      pizza: false
    });
-  }
+  };

  render() {
    const { steak, tortilla, pizza } = this.state;

    return (
      <div style={{ maxWidth: '250px' }}>
-        <Fieldset label="Party food">
+        <Fieldset label='Party food'>
          <Checkbox
            checked={steak}
            onChange={this.handleChange}
-            value="steak"
-            label="Steak 🥩"
-            name="food"
+            value='steak'
+            label='Steak 🥩'
+            name='food'
          />
          <br />
          <Checkbox
            checked={tortilla}
            onChange={this.handleChange}
-            value="tortilla"
-            label="Tortilla 🌯"
-            name="food"
+            value='tortilla'
+            label='Tortilla 🌯'
+            name='food'
          />
          <br />
          <Checkbox
            checked={pizza}
            onChange={this.handleChange}
-            value="pizza"
-            label="Pizza 🍕"
-            name="food"
+            value='pizza'
+            label='Pizza 🍕'
+            name='food'
            disabled
          />
        </Fieldset>
--- a/src/components/Cutout/Cutout.js
+++ b/src/components/Cutout/Cutout.js
@@ -20,7 +20,7 @@ const StyledCutout = styled.div`
    left: 0;
    top: 0;
    z-index: 1;
-    content: "";
+    content: '';
    width: calc(100% - 4px);
    height: calc(100% - 4px);

@@ -37,9 +37,7 @@ const StyledCutout = styled.div`
 `;
 // add padding prop ?

-const Cutout = ({
-  className, style, children, shadow, ...otherProps
-}) => (
+const Cutout = ({ className, style, children, shadow, ...otherProps }) => (
  <StyledCutout
    shadow={shadow}
    className={className}
@@ -54,17 +52,14 @@ Cutout.defaultProps = {
  shadow: true,
  className: '',
  children: null,
-  style: {},
+  style: {}
 };

 Cutout.propTypes = {
  className: propTypes.string,
  shadow: propTypes.bool,
  children: propTypes.node,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number])
 };

 export default Cutout;
--- a/src/components/Cutout/Cutout.spec.js
+++ b/src/components/Cutout/Cutout.spec.js
@@ -12,18 +12,20 @@ describe('<Cutout />', () => {
  });

  it('should render custom styles', () => {
-    const { container } = render(<Cutout style={{ backgroundColor: 'papayawhip' }} />);
+    const { container } = render(
+      <Cutout style={{ backgroundColor: 'papayawhip' }} />
+    );
    const cutout = container.firstChild;

    expect(cutout).toHaveAttribute('style', 'background-color: papayawhip;');
  });

  it('should render children', async () => {
-    const { findByText } = render((
+    const { findByText } = render(
      <Cutout>
        <span>Cool cutout</span>
      </Cutout>
-    ));
+    );
    const content = await findByText(/cool cutout/i);

    expect(content).toBeInTheDocument();
--- a/src/components/Cutout/Cutout.stories.js
+++ b/src/components/Cutout/Cutout.stories.js
@@ -12,7 +12,7 @@ storiesOf('Cutout', module).add('default', () => (
            fontFamily: 'times new roman',
            textAlign: 'center',
            fontSize: '3rem',
-            marginTop: '0.5rem',
+            marginTop: '0.5rem'
          }}
        >
          React95
--- a/src/components/DatePicker/DatePicker.js
+++ b/src/components/DatePicker/DatePicker.js
@@ -39,7 +39,8 @@ const DateItem = styled.div`
 const DateItemContent = styled.span`
  cursor: pointer;

-  background: ${({ active, theme }) => (active ? theme.hoverBackground : 'transparent')};
+  background: ${({ active, theme }) =>
+    active ? theme.hoverBackground : 'transparent'};
  color: ${({ active, theme }) => (active ? theme.textInvert : 'initial')};

  &:hover {
@@ -62,7 +63,7 @@ class DatePicker extends Component {
    shadow: propTypes.bool,
    onAccept: propTypes.func,
    onCancel: propTypes.func,
-    date: propTypes.instanceOf(Date),
+    date: propTypes.instanceOf(Date)
  };

  static defaultProps = {
@@ -70,7 +71,7 @@ class DatePicker extends Component {
    className: '',
    onAccept: null,
    onCancel: null,
-    date: null,
+    date: null
  };

  constructor(props) {
@@ -80,7 +81,7 @@ class DatePicker extends Component {
    this.state = initialDate;
  }

-  convertDateToState = (date) => {
+  convertDateToState = date => {
    const day = date.getDate();
    const month = date.getMonth();
    const year = date.getFullYear();
@@ -105,12 +106,7 @@ class DatePicker extends Component {
  render() {
    let { day } = this.state;
    const { month, year } = this.state;
-    const {
-      shadow,
-      className,
-      onAccept,
-      onCancel,
-    } = this.props;
+    const { shadow, className, onAccept, onCancel } = this.props;

    const months = [
      { value: 0, label: 'January' },
@@ -124,7 +120,7 @@ class DatePicker extends Component {
      { value: 8, label: 'September' },
      { value: 9, label: 'October' },
      { value: 10, label: 'November' },
-      { value: 11, label: 'December' },
+      { value: 11, label: 'December' }
    ];

    // eslint-disable-next-line
@@ -163,7 +159,9 @@ class DatePicker extends Component {
    return (
      <Window style={{ margin: 20 }} className={className} shadow={shadow}>
        <WindowHeader>
-          <span role="img" aria-label="📆">📆</span>
+          <span role='img' aria-label='📆'>
+            📆
+          </span>
          Date
        </WindowHeader>
        <WindowContent>
--- a/src/components/DatePicker/DatePicker.stories.js
+++ b/src/components/DatePicker/DatePicker.stories.js
@@ -8,7 +8,7 @@ storiesOf('DatePicker', module)
    <div
      style={{
        padding: '5rem',
-        background: 'teal',
+        background: 'teal'
      }}
    >
      {story()}
--- a/src/components/Divider/Divider.js
+++ b/src/components/Divider/Divider.js
@@ -4,24 +4,23 @@ import styled from 'styled-components';
 import { blockSizes } from '../common/system';

 const StyledDivider = styled.hr`
-  ${({ vertical, theme, size }) => (vertical
-    ? `
+  ${({ vertical, theme, size }) =>
+    vertical
+      ? `
    height: ${blockSizes[size]};
    border-left: 2px solid ${theme.borderDark};
    border-right: 2px solid ${theme.borderLightest};
    margin: 0;
    `
-    : `
+      : `
    width: 100%;
    border-bottom: 2px solid ${theme.borderLightest};
    border-top: 2px solid ${theme.borderDark};
    margin: 0;
-    `)}
+    `}
 `;

-const Divider = ({
-  vertical, className, style, ...otherProps
-}) => (
+const Divider = ({ vertical, className, style, ...otherProps }) => (
  <StyledDivider
    vertical={vertical}
    as={vertical ? 'div' : 'hr'}
@@ -35,17 +34,14 @@ Divider.defaultProps = {
  size: 'md',
  vertical: false,
  className: '',
-  style: {},
+  style: {}
 };

 Divider.propTypes = {
  vertical: propTypes.bool,
  size: propTypes.oneOf(['sm', 'md', 'lg']),
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number])
 };

 export default Divider;
--- a/src/components/Divider/Divider.stories.js
+++ b/src/components/Divider/Divider.stories.js
@@ -10,7 +10,7 @@ storiesOf('Divider', module)
    <div
      style={{
        padding: '5rem',
-        background: 'teal',
+        background: 'teal'
      }}
    >
      {story()}
@@ -28,9 +28,9 @@ storiesOf('Divider', module)
  .add('vertical', () => (
    <List inline>
      <ListItem>Item 1</ListItem>
-      <Divider vertical size="lg" />
+      <Divider vertical size='lg' />
      <ListItem>Item 2</ListItem>
-      <Divider vertical size="lg" />
+      <Divider vertical size='lg' />
      <ListItem>Item 3</ListItem>
    </List>
  ));
--- a/src/components/Fieldset/Fieldset.js
+++ b/src/components/Fieldset/Fieldset.js
@@ -8,13 +8,15 @@ import { fontSizes, padding } from '../common/system';
 const StyledFieldset = styled.fieldset`
  position: relative;
  border: 2px solid
-    ${({ theme, variant }) => (variant === 'flat' ? theme.flatDark : theme.borderLightest)};
+    ${({ theme, variant }) =>
+      variant === 'flat' ? theme.flatDark : theme.borderLightest};
  padding: ${padding.md};
  margin-top: ${padding.sm};
  font-size: ${fontSizes.md};
  color: ${({ theme }) => theme.text};
-  ${({ variant }) => variant !== 'flat'
-    && css`
+  ${({ variant }) =>
+    variant !== 'flat' &&
+    css`
      box-shadow: -1px -1px 0 1px ${({ theme }) => theme.borderDark},
        inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
    `}
@@ -27,7 +29,8 @@ const StyledLegend = styled.legend`
  padding: 0 ${padding.sm};

  font-size: ${fontSizes.md};
-  background: ${({ theme, variant }) => (variant === 'flat' ? theme.canvas : theme.material)};
+  background: ${({ theme, variant }) =>
+    variant === 'flat' ? theme.canvas : theme.material};
 `;

 const StyledFieldsetContent = styled.div`
@@ -63,23 +66,20 @@ Fieldset.defaultProps = {
  label: null,
  className: '',
  style: {},
-  children: null,
+  children: null
 };

 Fieldset.propTypes = {
  label: propTypes.oneOfType([
    propTypes.string,
    propTypes.number,
-    propTypes.node,
+    propTypes.node
  ]),
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number]),
  children: propTypes.node,
  disabled: propTypes.bool,
-  variant: propTypes.oneOf(['default', 'flat']),
+  variant: propTypes.oneOf(['default', 'flat'])
 };

 export default Fieldset;
--- a/src/components/Fieldset/Fieldset.stories.js
+++ b/src/components/Fieldset/Fieldset.stories.js
@@ -1,16 +1,14 @@
 import React, { useState } from 'react';
 import { storiesOf } from '@storybook/react';

-import {
-  Checkbox, Cutout, Fieldset, Window, WindowContent,
-} from '..';
+import { Checkbox, Cutout, Fieldset, Window, WindowContent } from '..';

 storiesOf('Fieldset', module)
  .addDecorator(story => (
    <div
      style={{
        padding: '5rem',
-        background: 'teal',
+        background: 'teal'
      }}
    >
      {story()}
@@ -21,7 +19,9 @@ storiesOf('Fieldset', module)
      <WindowContent>
        <Fieldset>
          Some content here
-          <span role="img" aria-label="😍">😍</span>
+          <span role='img' aria-label='😍'>
+            😍
+          </span>
        </Fieldset>
      </WindowContent>
    </Window>
@@ -29,9 +29,11 @@ storiesOf('Fieldset', module)
  .add('with label', () => (
    <Window>
      <WindowContent>
-        <Fieldset label="Label here">
+        <Fieldset label='Label here'>
          Some content here
-          <span role="img" aria-label="😍">😍</span>
+          <span role='img' aria-label='😍'>
+            😍
+          </span>
        </Fieldset>
      </WindowContent>
    </Window>
@@ -53,25 +55,27 @@ const FlatFieldset = () => {
          </p>
          <div
            style={{
-              marginTop: '1.5rem',
+              marginTop: '1.5rem'
            }}
          >
            <Fieldset
-              variant="flat"
-              label={(
+              variant='flat'
+              label={
                <Checkbox
-                  variant="flat"
+                  variant='flat'
                  style={{ margin: 0 }}
-                  label="Enable"
+                  label='Enable'
                  checked={!state}
                  value={!state}
                  onChange={() => setState(!state)}
                />
-)}
+              }
              disabled={state}
            >
              Some content here
-              <span role="img" aria-label="😍">😍</span>
+              <span role='img' aria-label='😍'>
+                😍
+              </span>
            </Fieldset>
          </div>
        </Cutout>
@@ -85,19 +89,21 @@ const DisabledFieldset = () => {
    <Window>
      <WindowContent>
        <Fieldset
-          label={(
+          label={
            <Checkbox
              style={{ margin: 0 }}
-              label="Enable"
+              label='Enable'
              checked={!state}
              value={!state}
              onChange={() => setState(!state)}
            />
-          )}
+          }
          disabled={state}
        >
          Some content here
-          <span role="img" aria-label="😍">😍</span>
+          <span role='img' aria-label='😍'>
+            😍
+          </span>
        </Fieldset>
      </WindowContent>
    </Window>
--- a/src/components/Hourglass/Hourglass.js
+++ b/src/components/Hourglass/Hourglass.js
@@ -16,15 +16,13 @@ const StyledHourglass = styled.span`
  width: 100%;
  height: 100%;
 `;
-const Hourglass = ({
-  size, className, style, ...otherProps
-}) => (
+const Hourglass = ({ size, className, style, ...otherProps }) => (
  <StyledContainer
    className={className}
    style={{
      ...style,
      width: size || '30px',
-      height: size || '30px',
+      height: size || '30px'
    }}
    {...otherProps}
  >
@@ -35,15 +33,12 @@ const Hourglass = ({
 Hourglass.defaultProps = {
  size: '30px',
  className: '',
-  style: {},
+  style: {}
 };

 Hourglass.propTypes = {
  size: propTypes.oneOfType([propTypes.string, propTypes.number]),
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number])
 };
 export default Hourglass;
--- a/src/components/Hourglass/Hourglass.stories.js
+++ b/src/components/Hourglass/Hourglass.stories.js
@@ -8,7 +8,7 @@ storiesOf('Hourglass', module)
    <div
      style={{
        padding: '5rem',
-        background: '#008080',
+        background: '#008080'
      }}
    >
      {story()}
--- a/src/components/Hourglass/base64hourglass.js
+++ b/src/components/Hourglass/base64hourglass.js
@@ -1,2 +1,3 @@
-const base64hourglass = 'url(\'data:image/gif;base64,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\')';
+const base64hourglass =
+  "url('data:image/gif;base64,R0lGODlhPAA8APQAADc3N6+vr4+Pj05OTvn5+V1dXZ+fn29vby8vLw8PD/X19d/f37S0tJSUlLq6und3d39/f9XV1c/Pz+bm5qamphkZGWZmZsbGxr+/v+rq6tra2u/v7yIiIv///wAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBAAfACH+I1Jlc2l6ZWQgb24gaHR0cHM6Ly9lemdpZi5jb20vcmVzaXplACwAAAAAPAA8AAAF/+AnjmRpnmiqrmzrvnAsz3Rt37jr7Xzv/8BebhQsGn1D0XFZTH6YUGQySvU4fYKAdsvtdi1Cp3In6ZjP6HTawBMTyWbFYk6v18/snXvsKXciUApmeVZ7PH6ATIIdhHtPcB0TDQ1gQBCTBINthpBnAUEaa5tuh2mfQKFojZx9aRMSEhA7FLAbonqsfmoUOxFqmriknWm8Hr6/q8IeCAAAx2cTERG2aBTNHMGOj8a/v8WF2m/c3cSj4SQ8C92n4Ocm6evm7ui9CosdBPbs8yo8E2YO5PE74Q+gwIElCnYImA3hux3/Fh50yCciw3YUt2GQtiiDtGQO4f3al1GkGpIDeXlg0KDhXpoMLBtMVPaMnJlv/HjUtIkzHA8HEya4tLkhqICGV4bZVAMyaaul3ZpOUQoVz8wbpaoyvWojq1ZVXGt4/QoM49SnZMs6GktW6hC2X93mgKtVbtceWbzo9VIJKdYqUJwCPiJ4cJOzhg+/TWwko+PHkCNLdhgCACH5BAUEAB8ALAAAAAABAAEAAAUD4BcCACH5BAUEAB8ALBYADAAQAA0AAAVFYCeOZPmVaKqimeO+MPxFXv3d+F17Cm3nuJ1ic7lAdroapUjABZCfnQb4ef6k1OHGULtsNk3qjVKLiIFkj/mMIygU4VwIACH5BAUEAB8ALAAAAAABAAEAAAUD4BcCACH5BAUEAB8ALBkAIwAKAAcAAAUp4CdehrGI6Ed5XpSKa4teguBoGlVPAXuJBpam5/l9gh7NZrFQiDJMRQgAIfkEBQQAHwAsAAAAAAEAAQAABQPgFwIAIfkEBQQAHwAsFgAPABAAIQAABVBgJ45kaZ5oakZB67bZ+M10bd94ru987//AoHBILNYYAsGlR/F4IkwnlLeZTBQ9UlaWwzweERHjuzAKFZkMYYZWm4mOw0ETfdanO8Vms7aFAAAh+QQFBAAfACwAAAAAAQABAAAFA+AXAgAh+QQFBAAfACwZABIACgAeAAAFUGAnjmRpnij5rerqtu4Hx3Rt33iu758iZrUZa1TDCASLGsXjiSiZzmFnM5n4TNJSdmREElfL5lO8cgwGACbgrAkwPat3+x1naggKRS+f/4QAACH5BAUEAB8ALAAAAAABAAEAAAUD4BcCACH5BAUEAB8ALBYAIwAQAA0AAAVE4CeOXdmNaGqeabu27SUIC5xSnifZKK7zl8djkCsIaylGziNaakaEzcbH/Cwl0k9kuWxyPYptzrZULA7otFpNIK1eoxAAIfkEBQQAHwAsAAAAAAEAAQAABQPgFwIAIfkEBQQAHwAsAAAAAAEAAQAABQPgFwIAIfkEBQQAHwAsAAAAAAEAAQAABQPgFwIAIfkEBQQAHwAsAAAAAAEAAQAABQPgFwIAIfkEBQQAHwAsAAAAAAEAAQAABQPgFwIAIfkEBQQAHwAsAAAAAAEAAQAABQPgFwIAIfkEBQQAHwAsAAAAAAEAAQAABQPgFwIAIfkEBQQAHwAsAAAAAAEAAQAABQPgFwIAIfkEBQQAHwAsAAAAAAEAAQAABQPgFwIAIfkECQQAHwAsDgAEACAANAAABTHgJ45kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/Y7CoEACH5BAUEAB8ALAAAAAA8ADwAAAX/4CeOZGmeaKqubFt6biy3Xj3fuFjveU/vPJ/wBAQOj6RiEClUGpk9IMAJxQEdmQK1Grt2OhutkvurOb7f8JaM8qLT4iKbuDu/0erxfOS+4+NPex9mfn55coIfCAuFhoBLbDUAjI1vh4FkOxSVd5eQXB4GnI5rXAAbo6R6VTUFqKmWjzasNaKwsaVIHhAEt3cLTjBQA6++XwoHuUM1vMYdyMorwoN8wkC2t9A8s102204Wxana3DNAAQO1FjUCEDXhvuTT5nUdEwOiGxa8BBDwXxKaLTiAKoMFRvJy9CmmoFcHAgrQSEiwKwICDwU0pAMQIdmnboR8TfwWrJyMPrAiz1DkNs2aSRbe6hnr99LEvDJ9IB5DQ8Dhm36glNh5COGBAmQNHrbz+WXBFChOTqFx5+GBxwYCmL1ZcPHmMiWuvkTgECzBBUvrvH4tErbDWCcYDB2IBPbV2yJJ72SZ46TtXSB5v2RIp1ZXXbFkgWxCc68mk752E3tY/OZeIsiIaxi9o+BBokGH3SZ+4FPbZ8yiPQxNeDl0hNUeHWcKjYb1Zx20bd/GzRaV7t28gRSYELvw7pIfgVcLplwF8+bOo0Ffjmm6zerWrxvPzoe79w8hAAAh+QQJBAAfACwBAAEAOgA6AAAFRuAnjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJbDqf0Kh0Sq1ar9isdsvter/gsHhMLpvP6LR6zW673/D4MgQAIfkEBQQAHwAsAAAAADwAPAAABf/gJ45kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyJxnyTQym6nn0ilVSa9XGHY7jXKx2m/WK36Gy1CUVCBpu9+OtNqDeNslgip5Gej4/4ATcidLAICHHQF6c0x9iH+CXV6Gj36KZnsejgsREQSACp0Yg0ydEZWWi4RPjgdLG48apEuogJeDJVKtr7GzHrV/t5KrjX6uHhQMF4cKCwujTxHOwKmYjHzGTw+VEVIK1MGqJrrZTNuP3U/f4IniuazlSwMUFMugE/j47NW4JOQdx9bsoybMgxV4ALEIGAis4MFiCZkUaLPgUAYHGDF+Yucw0y5z3Lzt63hNUzwP5xCRpWOyDhxJYtgiStBQEVCGAAEM6MLp0p0/hMdgIZI17AOTntZgmowo9BBRgz9/EfQ54h8BBS39bKDXwBc9CrVejkNYKRLUSWGpivhXtt9PSpXEvmNiwYDdu3jzFB3LAa9fAxbUGkXjtmSZh4TPJM4kRgbhvVEL9xhTEongJJgza97MubPnz6BDix5NurTp0yJCAAAh+QQJBAAfACwEAA4ANAAgAAAFMeAnjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJbDqf0Kh0Sq1ar9jsKgQAIfkEBQQAHwAsAAAAADwAPAAABf/gJ45kaZ5oqq5s6bVwLHu0bN8uXeM8rP+9YOoHFBpHRN1xmSwue02A82lrFjaOKbVl3XQ6WeWWm7x+v+HdeFj2ntHaNbL9jUAI5/RLTurWOR53eXFbfh0RgB4PCm9hfCKGiDSLb18Bjx+RiR4HjG8TA3trmkSdZxuhalSkRA2VBqpPrD+ulR0Go3SHmz8CeG8bFqJMupJNHr5nCsKxQccTg4oUNA0YCYG/HQQQYsSlnmCUFLUXgm8EAsPeP6Zf2baV2+rEmTrt8PDyzS7O9uD4b5YV2VGjGw52/wB+CaYjlQcpNBAQioHwy4QMCxe4i3BKGIQN3K7AArBATz8anUDADcgQDMGCbQkknDKAh4ABNxQ0gpnoQ8eDVAUO0ADAzUNMhbZMQiG4R4mOo0gb8eTCQgeEqJVM7juCDWvWJnI4ev2aZIwHl2PfZIBIZBXKtAsLgC1kJu0GuWXNaoB7d67ZlWP75jVLw4JXwW35PNSJFPFUrmIb402smFNCW44N5kJ5+dTkx+vuAfus+VHF0X4xzeHsObXq1ZY7ZN76mt0C0rRf1zuWW/du175PHAu+YjhxFcCPm6CsHHnv5kig6w4BACH5BAkEAB8ALAEAAQA6ADoAAAVG4CeOZGmeaKqubOu+cCzPdG3feK7vfO//wKBwSCwaj8ikcslsOp/QqHRKrVqv2Kx2y+16v+CweEwum8/otHrNbrvf8PgyBAAh+QQFBAAfACwAAAAAPAA8AAAF/+AnjmRpnmiqrmzrvnAsz3Rt37jr7Xzv/8BebhQsGn1D0XFZTH6YUGQySvU4fYKAdsvtdi1Cp3In6ZjP6HTawBMTyWbFYk6v18/snXvsKXciUApmeVZ7PH6ATIIdhHtPcB0TDQ1gQBCTBINthpBnAUEaa5tuh2mfQKFojZx9aRMSEhA7FLAbonqsfmoUOxFqmriknWm8Hr6/q8IeCAAAx2cTERG2aBTNHMGOj8a/v8WF2m/c3cSj4SQ8C92n4Ocm6evm7ui9CosdBPbs8yo8E2YO5PE74Q+gwIElCnYImA3hux3/Fh50yCciw3YUt2GQtiiDtGQO4f3al1GkGpIDeXlg0KDhXpoMLBtMVPaMnJlv/HjUtIkzHA8HEya4tLkhqICGV4bZVAMyaaul3ZpOUQoVz8wbpaoyvWojq1ZVXGt4/QoM49SnZMs6GktW6hC2X93mgKtVbtceWbzo9VIJKdYqUJwCPiJ4cJOzhg+/TWwko+PHkCNLdhgCACH5BAUEAB8ALAAAAAABAAEAAAUD4BcCADs=')";
 export default base64hourglass;
--- a/src/components/Icon/LogoIcon.js
+++ b/src/components/Icon/LogoIcon.js
@@ -11,7 +11,7 @@ const LogoIcon = ({ style }) => {
    >
      <img
        src={logoIMG}
-        alt="react95 logo"
+        alt='react95 logo'
        style={{ height: '100%', width: 'auto' }}
      />
    </span>
@@ -19,14 +19,11 @@ const LogoIcon = ({ style }) => {
 };

 LogoIcon.defaultProps = {
-  style: {},
+  style: {}
 };

 LogoIcon.propTypes = {
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number])
 };

 export default LogoIcon;
--- a/src/components/List/List.js
+++ b/src/components/List/List.js
@@ -6,7 +6,7 @@ import { createBorderStyles, createBoxStyles } from '../common';

 const createListPositionStyles = ({
  verticalAlign = 'bottom',
-  horizontalAlign = 'left',
+  horizontalAlign = 'left'
 }) => `
    position: absolute;
    ${verticalAlign === 'bottom' ? 'bottom: 0;' : 'top: 0;'}
@@ -23,15 +23,17 @@ const StyledList = styled.ul`
  ${createBorderStyles()}
  ${createBoxStyles()}
  /* display: ${props => (props.inline ? 'inline-flex' : 'inline-block')}; */
-  ${props => props.inline
-    && `
+  ${props =>
+    props.inline &&
+    `
    align-items: center;
    display: inline-flex;
  `}
  list-style: none;
  position: relative;

-  ${props => (props.horizontalAlign || props.verticalAlign) && createListPositionStyles}
+  ${props =>
+    (props.horizontalAlign || props.verticalAlign) && createListPositionStyles}
 `;

 const List = ({
@@ -67,7 +69,7 @@ List.defaultProps = {
  className: '',
  children: null,
  verticalAlign: undefined,
-  horizontalAlign: undefined,
+  horizontalAlign: undefined
 };

 List.propTypes = {
@@ -78,7 +80,7 @@ List.propTypes = {
  shadow: propTypes.bool,
  children: propTypes.node,
  verticalAlign: propTypes.oneOf(['top', 'bottom']),
-  horizontalAlign: propTypes.oneOf(['left', 'right']),
+  horizontalAlign: propTypes.oneOf(['left', 'right'])
 };

 export default List;
--- a/src/components/List/List.stories.js
+++ b/src/components/List/List.stories.js
@@ -10,7 +10,7 @@ storiesOf('List', module)
    <div
      style={{
        padding: '5rem',
-        background: 'teal',
+        background: 'teal'
      }}
    >
      {story()}
@@ -26,7 +26,9 @@ storiesOf('List', module)
  .add('inline', () => (
    <List inline>
      <ListItem square disabled>
-        <span role="img" aria-label="🌿">🌿</span>
+        <span role='img' aria-label='🌿'>
+          🌿
+        </span>
      </ListItem>
      <Bar />
      <ListItem>Tackle</ListItem>
--- a/src/components/ListItem/ListItem.js
+++ b/src/components/ListItem/ListItem.js
@@ -20,8 +20,9 @@ const StyledListItem = styled.li`
  color: ${({ theme }) => theme.text};

  &:hover {
-    ${({ theme, isDisabled }) => !isDisabled
-      && `
+    ${({ theme, isDisabled }) =>
+      !isDisabled &&
+      `
        color: ${theme.textInvert};
        background: ${theme.hoverBackground};
      `}
@@ -61,20 +62,17 @@ ListItem.defaultProps = {
  square: false,
  onClick: null,
  className: '',
-  children: null,
+  children: null
 };

 ListItem.propTypes = {
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number]),
  size: propTypes.oneOf(['sm', 'md', 'lg']),
  disabled: propTypes.bool,
  square: propTypes.bool,
  children: propTypes.node,
-  onClick: propTypes.func,
+  onClick: propTypes.func
 };

 export default ListItem;
--- a/src/components/ListItem/ListItem.stories.js
+++ b/src/components/ListItem/ListItem.stories.js
@@ -11,7 +11,7 @@ storiesOf('ListItem', module)
    <div
      style={{
        padding: '5rem',
-        background: 'teal',
+        background: 'teal'
      }}
    >
      {story()}
@@ -40,25 +40,31 @@ storiesOf('ListItem', module)
  .add('square', () => (
    <List>
      <ListItem {...actions} square>
-        <span role="img" aria-label="😎">😎</span>
+        <span role='img' aria-label='😎'>
+          😎
+        </span>
      </ListItem>
      <ListItem {...actions} square>
-        <span role="img" aria-label="🤖">🤖</span>
+        <span role='img' aria-label='🤖'>
+          🤖
+        </span>
      </ListItem>
      <ListItem {...actions} square>
-        <span role="img" aria-label="🎁">🎁</span>
+        <span role='img' aria-label='🎁'>
+          🎁
+        </span>
      </ListItem>
    </List>
  ))
  .add('size small', () => (
    <List>
-      <ListItem size="sm">View</ListItem>
+      <ListItem size='sm'>View</ListItem>
      <Divider />
-      <ListItem size="sm">Paste</ListItem>
-      <ListItem size="sm">Paste Shortcut</ListItem>
-      <ListItem size="sm">Undo Copy</ListItem>
+      <ListItem size='sm'>Paste</ListItem>
+      <ListItem size='sm'>Paste Shortcut</ListItem>
+      <ListItem size='sm'>Undo Copy</ListItem>
      <Divider />
-      <ListItem size="sm">Properties</ListItem>
+      <ListItem size='sm'>Properties</ListItem>
    </List>
  ))
  .add('render as link', () => (
@@ -66,11 +72,13 @@ storiesOf('ListItem', module)
      <ListItem {...actions}>Normal item</ListItem>
      <ListItem
        {...actions}
-        as="a"
-        href="https://expensive.toys"
-        target="_blank"
+        as='a'
+        href='https://expensive.toys'
+        target='_blank'
      >
-        <span role="img" aria-label="🔗">🔗</span>
+        <span role='img' aria-label='🔗'>
+          🔗
+        </span>
        Link!
      </ListItem>
    </List>
--- a/src/components/NumberField/NumberField.js
+++ b/src/components/NumberField/NumberField.js
@@ -29,12 +29,14 @@ const StyledButton = styled(Button)`
  padding: 0;
  flex-shrink: 0;

-  ${({ 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};
-  `}
+  ${({ 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 StyledButtonIcon = styled.span`
@@ -54,17 +56,6 @@ const StyledButtonIcon = styled.span`
 `;

 class NumberField extends React.Component {
-  static defaultProps = {
-    variant: 'default',
-    disabled: false,
-    min: null,
-    max: null,
-    width: null,
-    disableKeyboardInput: false,
-    className: '',
-    style: {},
-  };
-
  static propTypes = {
    variant: propTypes.oneOf(['default', 'flat']),
    onChange: propTypes.func.isRequired,
@@ -75,10 +66,18 @@ class NumberField extends React.Component {
    disabled: propTypes.bool,
    disableKeyboardInput: propTypes.bool,
    className: propTypes.string,
-    style: propTypes.shape([
-      propTypes.string,
-      propTypes.number,
-    ]),
+    style: propTypes.shape([propTypes.string, propTypes.number])
+  };
+
+  static defaultProps = {
+    variant: 'default',
+    disabled: false,
+    min: null,
+    max: null,
+    width: null,
+    disableKeyboardInput: false,
+    className: '',
+    style: {}
  };

  state = {
@@ -86,7 +85,7 @@ class NumberField extends React.Component {
    value: parseInt(this.props.value, 10) || 0
  };

-  add = (addValue) => {
+  add = addValue => {
    const { value } = this.state;
    const { onChange } = this.props;

@@ -95,10 +94,11 @@ class NumberField extends React.Component {
    this.setState({ value: newValue });
  };

-  handleChange = (e) => {
-    let newValue = e.target.value === '-' ? '-' : this.normalize(e.target.value);
+  handleChange = e => {
+    let newValue =
+      e.target.value === '-' ? '-' : this.normalize(e.target.value);
    // eslint-disable-next-line
-    newValue = newValue ? newValue : newValue === 0 ? 0 : "";
+    newValue = newValue ? newValue : newValue === 0 ? 0 : '';

    if (e.target.validity.valid) {
      const { onChange } = this.props;
@@ -107,7 +107,7 @@ class NumberField extends React.Component {
    }
  };

-  normalize = (value) => {
+  normalize = value => {
    const { min, max } = this.props;

    if (min && value < min) return min;
@@ -123,7 +123,7 @@ class NumberField extends React.Component {
      className,
      variant,
      width,
-      style,
+      style
    } = this.props;
    const { value } = this.state;
    return (
@@ -139,9 +139,9 @@ class NumberField extends React.Component {
          }
          readOnly={disabled || disableKeyboardInput}
          disabled={disabled}
-          type="tel"
-          pattern="^-?[0-9]\d*\.?\d*$"
-          width="100%"
+          type='tel'
+          pattern='^-?[0-9]\d*\.?\d*$'
+          width='100%'
        />
        <StyledButtonWrapper>
          <StyledButton
--- a/src/components/NumberField/NumberField.stories.js
+++ b/src/components/NumberField/NumberField.stories.js
@@ -48,7 +48,7 @@ storiesOf('NumberField', module)
        content), just use the flat variant:
      </p>
      <NumberField
-        variant="flat"
+        variant='flat'
        shadow={false}
        value={1991}
        onChange={value => console.log(value)}
--- a/src/components/Progress/Progress.js
+++ b/src/components/Progress/Progress.js
@@ -43,18 +43,10 @@ const BlueBar = styled.div`
  );
 `;

-const ProgressBar = ({
-  width, percent, shadow, style,
-}) => (
+const ProgressBar = ({ width, percent, shadow, style }) => (
  <Wrapper style={{ ...style, width }} shadow={shadow}>
-    <WhiteBar>
-      {percent}
-      %
-    </WhiteBar>
-    <BlueBar percent={percent}>
-      {percent}
-      %
-    </BlueBar>
+    <WhiteBar>{percent}%</WhiteBar>
+    <BlueBar percent={percent}>{percent}%</BlueBar>
  </Wrapper>
 );

@@ -62,17 +54,14 @@ ProgressBar.defaultProps = {
  width: '100%',
  percent: 0,
  shadow: true,
-  style: {},
+  style: {}
 };

 ProgressBar.propTypes = {
  width: propTypes.oneOfType([propTypes.string, propTypes.number]),
  percent: propTypes.number,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
-  shadow: propTypes.bool,
+  style: propTypes.shape([propTypes.string, propTypes.number]),
+  shadow: propTypes.bool
 };

 export default ProgressBar;
--- a/src/components/Radio/Radio.js
+++ b/src/components/Radio/Radio.js
@@ -28,11 +28,12 @@ const StyledInput = styled.input`
  opacity: 0;
 `;

-const createCheckmarkSymbol = ({ checked }) => checked
-  && css`
+const createCheckmarkSymbol = ({ checked }) =>
+  checked &&
+  css`
    &:after {
      position: absolute;
-      content: "";
+      content: '';
      display: inline-block;
      top: 50%;
      left: 50%;
@@ -58,9 +59,11 @@ const sharedCheckmarkStyles = css`
 const StyledCheckmark = styled(Cutout)`

  ${sharedCheckmarkStyles}
-  background: ${({ theme, isDisabled }) => (isDisabled ? theme.material : theme.canvas)};
+  background: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.material : theme.canvas};

-  box-shadow: ${({ shadow }) => (shadow ? 'inset 3px 3px 10px rgba(0, 0, 0, 0.1)' : 'none')};
+  box-shadow: ${({ shadow }) =>
+    shadow ? 'inset 3px 3px 10px rgba(0, 0, 0, 0.1)' : 'none'};

  &:before {
    content: "";
@@ -78,9 +81,10 @@ const StyledFlatCheckmark = styled.div`
  ${createFlatBoxStyles()}
  ${sharedCheckmarkStyles}
  outline: none;
-  background: ${({ theme, isDisabled }) => (isDisabled ? theme.flatLight : theme.canvas)};
+  background: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.flatLight : theme.canvas};
  &:before {
-    content: "";
+    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
@@ -112,7 +116,7 @@ const Radio = ({
      <StyledInput
        onChange={disabled ? undefined : onChange}
        readOnly={disabled}
-        type="radio"
+        type='radio'
        value={value}
        checked={checked}
        name={name}
@@ -130,7 +134,7 @@ Radio.defaultProps = {
  variant: 'default',
  shadow: true,
  className: '',
-  style: {},
+  style: {}
 };

 Radio.propTypes = {
@@ -139,18 +143,15 @@ Radio.propTypes = {
  value: propTypes.oneOfType([
    propTypes.string,
    propTypes.number,
-    propTypes.bool,
+    propTypes.bool
  ]).isRequired,
  label: propTypes.oneOfType([propTypes.string, propTypes.number]),
  checked: propTypes.bool,
  disabled: propTypes.bool,
  shadow: propTypes.bool,
  variant: propTypes.oneOf(['default', 'flat']),
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
-  className: propTypes.string,
+  style: propTypes.shape([propTypes.string, propTypes.number]),
+  className: propTypes.string
 };

 export default Radio;
--- a/src/components/Radio/Radio.stories.js
+++ b/src/components/Radio/Radio.stories.js
@@ -1,20 +1,14 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import styled from 'styled-components';
-import {
-  Radio,
-  Cutout,
-  Fieldset,
-  Window,
-  WindowContent,
-} from '..';
+import { Radio, Cutout, Fieldset, Window, WindowContent } from '..';

 storiesOf('Radio', module)
  .addDecorator(story => (
    <div
      style={{
        padding: '5rem',
-        background: 'teal',
+        background: 'teal'
      }}
    >
      {story()}
@@ -25,7 +19,7 @@ storiesOf('Radio', module)

 class RadioGroup extends React.Component {
  state = {
-    checkedValue: 'Pear',
+    checkedValue: 'Pear'
  };

  handleChange = e => this.setState({ checkedValue: e.target.value });
@@ -35,37 +29,37 @@ class RadioGroup extends React.Component {
    return (
      <Window>
        <WindowContent>
-          <Fieldset label="Fruits">
+          <Fieldset label='Fruits'>
            <Radio
              checked={checkedValue === 'Pear'}
              onChange={this.handleChange}
-              value="Pear"
-              label="🍐 Pear"
-              name="fruits"
+              value='Pear'
+              label='🍐 Pear'
+              name='fruits'
            />
            <br />
            <Radio
              checked={checkedValue === 'Orange'}
              onChange={this.handleChange}
-              value="Orange"
-              label="🍊 Orange"
-              name="fruits"
+              value='Orange'
+              label='🍊 Orange'
+              name='fruits'
            />
            <br />
            <Radio
              checked={checkedValue === 'Kiwi'}
              onChange={this.handleChange}
-              value="Kiwi"
-              label="🥝 Kiwi"
-              name="fruits"
+              value='Kiwi'
+              label='🥝 Kiwi'
+              name='fruits'
            />
            <br />
            <Radio
              checked={checkedValue === 'Grape'}
              onChange={this.handleChange}
-              value="Grape"
-              label="🍇 Grape"
-              name="fruits"
+              value='Grape'
+              label='🍇 Grape'
+              name='fruits'
              disabled
            />
          </Fieldset>
@@ -77,7 +71,7 @@ class RadioGroup extends React.Component {

 class FlatRadioGroup extends React.Component {
  state = {
-    checkedValue: 'Pear',
+    checkedValue: 'Pear'
  };

  handleChange = e => this.setState({ checkedValue: e.target.value });
@@ -95,43 +89,43 @@ class FlatRadioGroup extends React.Component {
            </p>
            <div
              style={{
-                marginTop: '1rem',
+                marginTop: '1rem'
              }}
            >
              <Radio
-                variant="flat"
+                variant='flat'
                checked={checkedValue === 'Pear'}
                onChange={this.handleChange}
-                value="Pear"
-                label="🍐 Pear"
-                name="fruits"
+                value='Pear'
+                label='🍐 Pear'
+                name='fruits'
              />
              <br />
              <Radio
-                variant="flat"
+                variant='flat'
                checked={checkedValue === 'Orange'}
                onChange={this.handleChange}
-                value="Orange"
-                label="🍊 Orange"
-                name="fruits"
+                value='Orange'
+                label='🍊 Orange'
+                name='fruits'
              />
              <br />
              <Radio
-                variant="flat"
+                variant='flat'
                checked={checkedValue === 'Kiwi'}
                onChange={this.handleChange}
-                value="Kiwi"
-                label="🥝 Kiwi"
-                name="fruits"
+                value='Kiwi'
+                label='🥝 Kiwi'
+                name='fruits'
              />
              <br />
              <Radio
-                variant="flat"
+                variant='flat'
                checked={checkedValue === 'Grape'}
                onChange={this.handleChange}
-                value="Grape"
-                label="🍇 Grape"
-                name="fruits"
+                value='Grape'
+                label='🍇 Grape'
+                name='fruits'
                disabled
              />
            </div>
--- a/src/components/Select/Select.js
+++ b/src/components/Select/Select.js
@@ -35,19 +35,20 @@ const StyledDropdownButton = styled(Button)`
  padding: 0;
  z-index: 1;
  flex-shrink: 0;
-  ${({ variant }) => (variant === 'flat'
-    ? css`
+  ${({ variant }) =>
+    variant === 'flat'
+      ? css`
          height: calc(100% - 4px);
          margin-right: 2px;
        `
-    : css`
+      : 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;
@@ -78,18 +79,19 @@ const StyledDropdownList = styled.ul`
  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 ? commonShadow : 'none')};
-      bottom: -2px;
-      width: calc(100% - 2px);
-      border: 2px solid ${({ theme }) => theme.borderDarkest};
-    `)}
+  ${({ variant }) =>
+    variant === 'flat'
+      ? css`
+          bottom: 2px;
+          width: 100%;
+          border: 2px solid ${({ theme }) => theme.flatDark};
+        `
+      : css`
+          box-shadow: ${props => (props.shadow ? commonShadow : 'none')};
+          bottom: -2px;
+          width: calc(100% - 2px);
+          border: 2px solid ${({ theme }) => theme.borderDarkest};
+        `}
 `;
 const StyledDropdownListItem = styled.li`
  box-sizing: border-box;
@@ -124,12 +126,13 @@ const Select = ({
  const [index, setIndex] = useState(selectedIndex);
  const [open, setOpen] = useState(false);

-  const handleSelect = (i) => {
+  const handleSelect = i => {
    if (onChange) onChange(items[i].value);
    setIndex(i);
  };

-  const Wrapper = variant === 'flat' ? StyledFlatSelectWrapper : StyledSelectWrapper;
+  const Wrapper =
+    variant === 'flat' ? StyledFlatSelectWrapper : StyledSelectWrapper;
  return (
    <Wrapper
      className={className}
@@ -173,7 +176,7 @@ Select.defaultProps = {
  className: '',
  width: null,
  height: null,
-  onChange: null,
+  onChange: null
 };

 Select.propTypes = {
@@ -184,11 +187,8 @@ Select.propTypes = {
  selectedIndex: propTypes.number,
  shadow: propTypes.bool,
  variant: propTypes.oneOf(['default', 'flat']),
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
-  onChange: propTypes.func,
+  style: propTypes.shape([propTypes.string, propTypes.number]),
+  onChange: propTypes.func
 };

 export default Select;
--- a/src/components/Select/Select.stories.js
+++ b/src/components/Select/Select.stories.js
@@ -2,9 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import styled from 'styled-components';

-import {
-  Select, Window, WindowContent, Cutout,
-} from '..';
+import { Select, Window, WindowContent, Cutout } from '..';

 const items = [
  { value: 1, label: '⚡ Pikachu' },
@@ -13,7 +11,7 @@ const items = [
  { value: 4, label: '🔥 Charizard' },
  { value: 5, label: '🎤 Jigglypuff' },
  { value: 6, label: '🛌🏻 Snorlax' },
-  { value: 7, label: '⛰ Geodude' },
+  { value: 7, label: '⛰ Geodude' }
 ];

 const Wrapper = styled.div`
@@ -42,7 +40,7 @@ storiesOf('Select', module)
            padding: '1rem',
            paddingBottom: '3rem',
            background: 'white',
-            width: '300px',
+            width: '300px'
          }}
        >
          <p style={{ lineHeight: 1.3 }}>
@@ -51,11 +49,11 @@ storiesOf('Select', module)
          </p>
          <div
            style={{
-              marginTop: '1.5rem',
+              marginTop: '1.5rem'
            }}
          >
            <Select
-              variant="flat"
+              variant='flat'
              items={items}
              onChange={onChange}
              height={100}
--- a/src/components/Tab/Tab.js
+++ b/src/components/Tab/Tab.js
@@ -18,8 +18,9 @@ const StyledTab = styled.div`
  margin-bottom: -2px;
  cursor: default;
  color: ${({ theme }) => theme.text};
-  ${props => props.active
-    && `
+  ${props =>
+    props.active &&
+    `
    z-index: 1;
    height: calc(${blockSizes.md} + 4px);
    top: -4px;
@@ -29,7 +30,7 @@ const StyledTab = styled.div`
    margin-right: -8px;
  `}
  &:after {
-    content: "";
+    content: '';
    position: absolute;
    width: calc(100% - 4px);
    height: 4px;
@@ -64,7 +65,7 @@ Tab.defaultProps = {
  active: false,
  children: null,
  className: '',
-  style: {},
+  style: {}
 };

 Tab.propTypes = {
@@ -73,9 +74,6 @@ Tab.propTypes = {
  active: propTypes.bool,
  children: propTypes.node,
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number])
 };
 export default Tab;
--- a/src/components/TabBody/TabBody.js
+++ b/src/components/TabBody/TabBody.js
@@ -14,9 +14,7 @@ const StyledTabBody = styled.div`
  padding: ${padding.md};
  padding-top: calc(1.5 * ${padding.md});
 `;
-const TabBody = ({
-  children, className, style, ...otherProps
-}) => (
+const TabBody = ({ children, className, style, ...otherProps }) => (
  <StyledTabBody className={className} style={style} {...otherProps}>
    {children}
  </StyledTabBody>
@@ -25,15 +23,12 @@ const TabBody = ({
 TabBody.defaultProps = {
  children: null,
  className: '',
-  style: {},
+  style: {}
 };

 TabBody.propTypes = {
  children: propTypes.node,
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number])
 };
 export default TabBody;
--- a/src/components/Table/Table.js
+++ b/src/components/Table/Table.js
@@ -17,9 +17,7 @@ const StyledCutout = styled(Cutout)`
  }
 `;

-const Table = ({
-  className, children, style, ...otherProps
-}) => (
+const Table = ({ className, children, style, ...otherProps }) => (
  <StyledCutout>
    <StyledTable className={className} style={style} {...otherProps}>
      {children}
@@ -30,16 +28,13 @@ const Table = ({
 Table.defaultProps = {
  children: null,
  className: '',
-  style: {},
+  style: {}
 };

 Table.propTypes = {
  children: propTypes.node,
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number])
 };

 export default Table;
--- a/src/components/Table/Table.stories.js
+++ b/src/components/Table/Table.stories.js
@@ -27,21 +27,27 @@ const SimpleTable = () => (
        <TableBody>
          <TableRow>
            <TableDataCell style={{ textAlign: 'center' }}>
-              <span role="img" aria-label="🌿">🌿</span>
+              <span role='img' aria-label='🌿'>
+                🌿
+              </span>
            </TableDataCell>
            <TableDataCell>Bulbasaur</TableDataCell>
            <TableDataCell>64</TableDataCell>
          </TableRow>
          <TableRow>
            <TableDataCell style={{ textAlign: 'center' }}>
-              <span role="img" aria-label="🔥">🔥</span>
+              <span role='img' aria-label='🔥'>
+                🔥
+              </span>
            </TableDataCell>
            <TableDataCell>Charizard</TableDataCell>
            <TableDataCell>209</TableDataCell>
          </TableRow>
          <TableRow>
            <TableDataCell style={{ textAlign: 'center' }}>
-              <span role="img" aria-label="⚡">⚡</span>
+              <span role='img' aria-label='⚡'>
+                ⚡
+              </span>
            </TableDataCell>
            <TableDataCell>Pikachu</TableDataCell>
            <TableDataCell>82</TableDataCell>
@@ -57,7 +63,7 @@ storiesOf('Table', module)
    <div
      style={{
        padding: '5rem',
-        background: 'teal',
+        background: 'teal'
      }}
    >
      {story()}
--- a/src/components/TableBody/TableBody.js
+++ b/src/components/TableBody/TableBody.js
@@ -10,9 +10,7 @@ const StyledTableBody = styled.tbody`
  box-shadow: ${insetShadow};
 `;

-const TableBody = ({
-  className, children, style, ...otherProps
-}) => (
+const TableBody = ({ className, children, style, ...otherProps }) => (
  <StyledTableBody className={className} style={style} {...otherProps}>
    {children}
  </StyledTableBody>
@@ -21,16 +19,13 @@ const TableBody = ({
 TableBody.defaultProps = {
  children: null,
  className: '',
-  style: {},
+  style: {}
 };

 TableBody.propTypes = {
  children: propTypes.node,
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number])
 };

 export default TableBody;
--- a/src/components/TableDataCell/TableDataCell.js
+++ b/src/components/TableDataCell/TableDataCell.js
@@ -7,9 +7,7 @@ import { padding } from '../common/system';
 const StyledTd = styled.td`
  padding: 0 ${padding.sm};
 `;
-const TableDataCell = ({
-  className, children, style, ...otherProps
-}) => (
+const TableDataCell = ({ className, children, style, ...otherProps }) => (
  <StyledTd className={className} style={style} {...otherProps}>
    {children}
  </StyledTd>
@@ -18,16 +16,13 @@ const TableDataCell = ({
 TableDataCell.defaultProps = {
  children: null,
  className: '',
-  style: {},
+  style: {}
 };

 TableDataCell.propTypes = {
  children: propTypes.node,
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number])
 };

 export default TableDataCell;
--- a/src/components/TableHead/TableHead.js
+++ b/src/components/TableHead/TableHead.js
@@ -5,9 +5,7 @@ import styled from 'styled-components';
 const StyledTableHead = styled.thead`
  display: table-header-group;
 `;
-const TableHead = ({
-  className, children, style, ...otherProps
-}) => (
+const TableHead = ({ className, children, style, ...otherProps }) => (
  <StyledTableHead className={className} style={style} {...otherProps}>
    {children}
  </StyledTableHead>
@@ -16,16 +14,13 @@ const TableHead = ({
 TableHead.defaultProps = {
  children: null,
  className: '',
-  style: {},
+  style: {}
 };

 TableHead.propTypes = {
  children: propTypes.node,
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number])
 };

 export default TableHead;
--- a/src/components/TableHeadCell/TableHeadCell.js
+++ b/src/components/TableHeadCell/TableHeadCell.js
@@ -45,17 +45,14 @@ TableHeadCell.defaultProps = {
  onClick: () => {},
  children: null,
  className: '',
-  style: {},
+  style: {}
 };

 TableHeadCell.propTypes = {
  onClick: propTypes.func,
  children: propTypes.node,
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number])
 };

 export default TableHeadCell;
--- a/src/components/TableRow/TableRow.js
+++ b/src/components/TableRow/TableRow.js
@@ -13,16 +13,15 @@ const StyledTr = styled.tr`
  outline: none;

  color: ${({ theme }) => theme.text};
-  ${({ theme, head }) => !head
-    && `&:hover {
+  ${({ theme, head }) =>
+    !head &&
+    `&:hover {
      background: ${theme.hoverBackground};
      color: ${theme.textInvert}
    }`}
 `;

-const TableRow = ({
-  className, children, style, head, ...otherProps
-}) => (
+const TableRow = ({ className, children, style, head, ...otherProps }) => (
  <StyledTr head={head} className={className} style={style} {...otherProps}>
    {children}
  </StyledTr>
@@ -32,17 +31,14 @@ TableRow.defaultProps = {
  head: false,
  children: null,
  className: '',
-  style: {},
+  style: {}
 };

 TableRow.propTypes = {
  children: propTypes.node,
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
-  head: propTypes.bool,
+  style: propTypes.shape([propTypes.string, propTypes.number]),
+  head: propTypes.bool
 };

 export default TableRow;
--- a/src/components/Tabs/Tabs.js
+++ b/src/components/Tabs/Tabs.js
@@ -17,10 +17,10 @@ const Tabs = ({
  style,
  ...otherProps
 }) => {
-  const childrenWithProps = React.Children.map(children, (child) => {
+  const childrenWithProps = React.Children.map(children, child => {
    const tabProps = {
      active: child.props.value === value,
-      onClick: onChange,
+      onClick: onChange
    };
    return React.cloneElement(child, tabProps);
  });
@@ -36,7 +36,7 @@ Tabs.defaultProps = {
  onChange: () => {},
  children: null,
  className: '',
-  style: {},
+  style: {}
 };

 Tabs.propTypes = {
@@ -44,9 +44,6 @@ Tabs.propTypes = {
  onChange: propTypes.func,
  children: propTypes.node,
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number])
 };
 export default Tabs;
--- a/src/components/Tabs/Tabs.stories.js
+++ b/src/components/Tabs/Tabs.stories.js
@@ -17,7 +17,7 @@ storiesOf('Tabs', module)
    <div
      style={{
        padding: '5rem',
-        background: '#008080',
+        background: '#008080'
      }}
    >
      {story()}
@@ -27,7 +27,7 @@ storiesOf('Tabs', module)

 class TabsDemo extends React.Component {
  state = {
-    activeTab: 0,
+    activeTab: 0
  };

  handleChange = value => this.setState({ activeTab: value });
@@ -37,7 +37,9 @@ class TabsDemo extends React.Component {
    return (
      <Window style={{ width: 350 }}>
        <WindowHeader>
-          <span role="img" aria-label="👗">👗</span>
+          <span role='img' aria-label='👗'>
+            👗
+          </span>
          store.exe
        </WindowHeader>
        <WindowContent>
@@ -49,19 +51,19 @@ class TabsDemo extends React.Component {
          <div style={{ height: 300 }}>
            {activeTab === 0 && (
              <TabBody>
-                <Fieldset label="Order:">
+                <Fieldset label='Order:'>
                  <div style={{ padding: '0.5em 0 0.5em 0' }}>Amount:</div>
                  <NumberField
-                    width="100%"
+                    width='100%'
                    min={0}
                    value={0}
                    onChange={() => null}
                  />
                  <Checkbox
                    style={{ marginTop: '1rem' }}
-                    name="shipping"
-                    value="fast"
-                    label="Fast shipping"
+                    name='shipping'
+                    value='fast'
+                    label='Fast shipping'
                    onChange={() => null}
                    defaultChecked
                  />
--- a/src/components/TextArea/TextArea.js
+++ b/src/components/TextArea/TextArea.js
@@ -3,16 +3,15 @@ import propTypes from 'prop-types';

 import styled from 'styled-components';
 import { createDisabledTextStyles, createFlatBoxStyles } from '../common';
-import {
-  blockSizes, fontSizes, padding, fontFamily,
-} from '../common/system';
+import { blockSizes, fontSizes, padding, fontFamily } from '../common/system';
 import Cutout from '../Cutout/Cutout';

 const StyledTextAreaWrapper = styled(Cutout)`
  display: inline-block;
  min-height: ${blockSizes.md};
  padding: 0;
-  background: ${({ theme, isDisabled }) => (isDisabled ? theme.material : theme.canvas)};
+  background: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.material : theme.canvas};
 `;
 const StyledFlatTextAreaWrapper = styled.div`
  position: relative;
@@ -31,7 +30,8 @@ const StyledTextArea = styled.textarea`
  font-size: ${fontSizes.md};
  font-family: ${fontFamily};

-  ${({ disabled, variant }) => variant !== 'flat' && disabled && createDisabledTextStyles()}
+  ${({ disabled, variant }) =>
+    variant !== 'flat' && disabled && createDisabledTextStyles()}
 `;

 const TextArea = ({
@@ -45,13 +45,14 @@ const TextArea = ({
  shadow,
  ...otherProps
 }) => {
-  const Wrapper = variant === 'flat' ? StyledFlatTextAreaWrapper : StyledTextAreaWrapper;
+  const Wrapper =
+    variant === 'flat' ? StyledFlatTextAreaWrapper : StyledTextAreaWrapper;
  return (
    <Wrapper
      style={{
        ...style,
        width: width || '100%',
-        height: height || 'auto',
+        height: height || 'auto'
      }}
      className={className}
      isDisabled={disabled}
@@ -78,7 +79,7 @@ TextArea.defaultProps = {
  height: null,
  onChange: () => {},
  disabled: false,
-  className: '',
+  className: ''
 };

 TextArea.propTypes = {
@@ -89,10 +90,7 @@ TextArea.propTypes = {
  variant: propTypes.oneOf(['default', 'flat']),
  className: propTypes.string,
  shadow: propTypes.bool,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number])
 };

 export default TextArea;
--- a/src/components/TextArea/TextArea.stories.js
+++ b/src/components/TextArea/TextArea.stories.js
@@ -19,26 +19,26 @@ storiesOf('TextArea', module)
  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
  .add('default', () => (
    <TextArea
-      defaultValue="User ReactGirl was the first one to find 🐛 here."
-      placeholder="Type in here.."
+      defaultValue='User ReactGirl was the first one to find 🐛 here.'
+      placeholder='Type in here..'
      onChange={onChange}
    />
  ))
  .add('controlled', () => <ControlledTextAreaExample />)
  .add('disabled', () => (
-    <TextArea disabled placeholder="Typing disabled " onChange={onChange} />
+    <TextArea disabled placeholder='Typing disabled ' onChange={onChange} />
  ))

  .add('fixed size', () => (
    <TextArea
      width={200}
      height={200}
-      placeholder="Type in here.."
+      placeholder='Type in here..'
      onChange={onChange}
    />
  ))
  .add('no shadow', () => (
-    <TextArea shadow={false} placeholder="Type in here.." onChange={onChange} />
+    <TextArea shadow={false} placeholder='Type in here..' onChange={onChange} />
  ))
  .add('flat', () => (
    <StyledCutout style={{ padding: '2rem', width: '300px' }}>
@@ -48,10 +48,10 @@ storiesOf('TextArea', module)
      </p>
      <div style={{ display: 'flex', alignItems: 'center', marginTop: '1rem' }}>
        <TextArea
-          variant="flat"
-          width="100%"
+          variant='flat'
+          width='100%'
          height={200}
-          placeholder="Type in here.."
+          placeholder='Type in here..'
          onChange={onChange}
        />
      </div>
@@ -65,11 +65,11 @@ storiesOf('TextArea', module)
      </p>
      <div style={{ display: 'flex', alignItems: 'center', marginTop: '1rem' }}>
        <TextArea
-          variant="flat"
+          variant='flat'
          disabled
-          width="100%"
+          width='100%'
          height={200}
-          placeholder="Type in here.."
+          placeholder='Type in here..'
          onChange={onChange}
        />
      </div>
@@ -77,7 +77,7 @@ storiesOf('TextArea', module)
  ));
 class ControlledTextAreaExample extends React.Component {
  state = {
-    value: 'default value',
+    value: 'default value'
  };

  handleChange = e => this.setState({ value: e.target.value });
--- a/src/components/TextField/TextField.js
+++ b/src/components/TextField/TextField.js
@@ -3,14 +3,13 @@ import propTypes from 'prop-types';

 import styled from 'styled-components';
 import { createDisabledTextStyles, createFlatBoxStyles } from '../common';
-import {
-  blockSizes, fontSizes, padding, fontFamily,
-} from '../common/system';
+import { blockSizes, fontSizes, padding, fontFamily } from '../common/system';
 import Cutout from '../Cutout/Cutout';

 const StyledWrapper = styled(Cutout)`
  height: ${blockSizes.md};
-  background: ${({ theme, isDisabled }) => (isDisabled ? theme.material : theme.canvas)};
+  background: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.material : theme.canvas};
 `;
 const StyledFlatWrapper = styled.div`
  position: relative;
@@ -27,7 +26,8 @@ export const StyledTextInput = styled.input`
  background: none;
  font-size: ${fontSizes.md};
  font-family: ${fontFamily};
-  ${({ disabled, variant }) => variant !== 'flat' && disabled && createDisabledTextStyles()}
+  ${({ disabled, variant }) =>
+    variant !== 'flat' && disabled && createDisabledTextStyles()}
 `;
 const TextField = ({
  onChange,
@@ -68,7 +68,7 @@ TextField.defaultProps = {
  style: {},
  width: null,
  onChange: () => {},
-  className: '',
+  className: ''
 };

 TextField.propTypes = {
@@ -79,9 +79,6 @@ TextField.propTypes = {
  shadow: propTypes.bool,
  type: propTypes.string,
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number])
 };
 export default TextField;
--- a/src/components/TextField/TextField.stories.js
+++ b/src/components/TextField/TextField.stories.js
@@ -3,12 +3,7 @@ import { storiesOf } from '@storybook/react';

 import styled from 'styled-components';

-import {
-  TextField,
-  Button,
-  Toolbar,
-  Cutout,
-} from '..';
+import { TextField, Button, Toolbar, Cutout } from '..';

 const onChange = e => console.log(e.target.value);

@@ -23,16 +18,16 @@ const Wrapper = styled.div`

 storiesOf('TextField', module)
  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
-  .add('default', () => <TextField defaultValue="" onChange={onChange} />)
+  .add('default', () => <TextField defaultValue='' onChange={onChange} />)
  .add('controlled', () => <ControlledTextFieldExample />)
  .add('no shadow', () => (
-    <TextField defaultValue="No shadow" shadow={false} onChange={onChange} />
+    <TextField defaultValue='No shadow' shadow={false} onChange={onChange} />
  ))
  .add('disabled', () => (
    <TextField defaultValue="Can't type 😥" disabled onChange={onChange} />
  ))
  .add('custom width', () => (
-    <TextField defaultValue="Custom width" width={150} onChange={onChange} />
+    <TextField defaultValue='Custom width' width={150} onChange={onChange} />
  ))
  .add('flat', () => (
    <StyledCutout style={{ padding: '2rem', width: '300px' }}>
@@ -43,14 +38,14 @@ storiesOf('TextField', module)
      <div style={{ display: 'flex', alignItems: 'center', marginTop: '1rem' }}>
        <label
          style={{ paddingRight: '0.5rem', fontSize: '1rem' }}
-          htmlFor="name"
+          htmlFor='name'
        >
          Name:
        </label>
        <TextField
-          id="name"
-          variant="flat"
-          placeholder="type here..."
+          id='name'
+          variant='flat'
+          placeholder='type here...'
          width={150}
          onChange={onChange}
        />
@@ -66,13 +61,13 @@ storiesOf('TextField', module)
      <div style={{ display: 'flex', alignItems: 'center', marginTop: '1rem' }}>
        <label
          style={{ paddingRight: '0.5rem', fontSize: '1rem' }}
-          htmlFor="name"
+          htmlFor='name'
        >
          Name:
        </label>
        <TextField
-          id="name"
-          variant="flat"
+          id='name'
+          variant='flat'
          defaultValue="Can't type 😥"
          width={150}
          onChange={onChange}
@@ -84,7 +79,7 @@ storiesOf('TextField', module)

 class ControlledTextFieldExample extends React.Component {
  state = {
-    value: 'default value',
+    value: 'default value'
  };

  handleChange = e => this.setState({ value: e.target.value });
--- a/src/components/Toolbar/Toolbar.js
+++ b/src/components/Toolbar/Toolbar.js
@@ -9,9 +9,7 @@ const StyledToolbar = styled.div`
  padding: ${props => (props.noPadding ? '0px' : '4px')};
 `;

-const Toolbar = ({
-  children, className, style, noPadding, ...otherProps
-}) => (
+const Toolbar = ({ children, className, style, noPadding, ...otherProps }) => (
  <StyledToolbar
    noPadding={noPadding}
    className={className}
@@ -25,17 +23,14 @@ const Toolbar = ({
 Toolbar.defaultProps = {
  noPadding: false,
  style: {},
-  className: '',
+  className: ''
 };

 Toolbar.propTypes = {
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
+  style: propTypes.shape([propTypes.string, propTypes.number]),
  className: propTypes.string,
  children: propTypes.node.isRequired,
-  noPadding: propTypes.bool,
+  noPadding: propTypes.bool
 };

 export default Toolbar;
--- a/src/components/Tooltip/Tooltip.js
+++ b/src/components/Tooltip/Tooltip.js
@@ -61,18 +61,15 @@ const Tooltip = ({
 Tooltip.defaultProps = {
  delay: 1000,
  className: '',
-  style: {},
+  style: {}
 };

 Tooltip.propTypes = {
  children: propTypes.node.isRequired,
  text: propTypes.string.isRequired,
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
-  delay: propTypes.number,
+  style: propTypes.shape([propTypes.string, propTypes.number]),
+  delay: propTypes.number
 };

 export default Tooltip;
--- a/src/components/Tooltip/Tooltip.stories.js
+++ b/src/components/Tooltip/Tooltip.stories.js
@@ -9,14 +9,14 @@ storiesOf('Tooltip', module)
    <div
      style={{
        padding: '5rem',
-        background: '#008080',
+        background: '#008080'
      }}
    >
      {story()}
    </div>
  ))
  .add('default', () => (
-    <Tooltip text="Nothing really 🤷‍">
+    <Tooltip text='Nothing really 🤷‍'>
      <Button>Whad do I do?</Button>
    </Tooltip>
  ));
--- a/src/components/Window/Window.js
+++ b/src/components/Window/Window.js
@@ -11,9 +11,7 @@ const StyledWindow = styled.div`
  ${createBoxStyles()}
 `;

-const Window = ({
-  shadow, className, children, ...otherProps
-}) => (
+const Window = ({ shadow, className, children, ...otherProps }) => (
  <StyledWindow shadow={shadow} className={className} {...otherProps} swag>
    {children}
  </StyledWindow>
@@ -22,13 +20,13 @@ const Window = ({
 Window.defaultProps = {
  shadow: true,
  className: '',
-  children: null,
+  children: null
 };

 Window.propTypes = {
  shadow: propTypes.bool,
  className: propTypes.string,
-  children: propTypes.node,
+  children: propTypes.node
 };

 export default Window;
--- a/src/components/Window/Window.stories.js
+++ b/src/components/Window/Window.stories.js
@@ -12,7 +12,7 @@ storiesOf('Window', module)
    <div
      style={{
        padding: '5rem',
-        background: 'teal',
+        background: 'teal'
      }}
    >
      {story()}
@@ -24,13 +24,13 @@ storiesOf('Window', module)
        style={{
          display: 'flex',
          alignItems: 'center',
-          justifyContent: 'space-between',
+          justifyContent: 'space-between'
        }}
      >
        <span>react95.exe</span>
        <Button
          style={{ marginRight: '-6px', marginTop: '1px' }}
-          size="sm"
+          size='sm'
          square
        >
          <span style={{ fontWeight: 'bold', transform: 'translateY(-1px)' }}>
@@ -39,13 +39,13 @@ storiesOf('Window', module)
        </Button>
      </WindowHeader>
      <Toolbar>
-        <Button variant="menu" size="sm">
+        <Button variant='menu' size='sm'>
          File
        </Button>
-        <Button variant="menu" size="sm">
+        <Button variant='menu' size='sm'>
          Edit
        </Button>
-        <Button variant="menu" size="sm" disabled>
+        <Button variant='menu' size='sm' disabled>
          Save
        </Button>
      </Toolbar>
--- a/src/components/WindowContent/WindowContent.js
+++ b/src/components/WindowContent/WindowContent.js
@@ -9,9 +9,7 @@ const StyledWindowContent = styled.div`
  margin-right: 2px;
 `;

-const WindowContent = ({
-  className, children, style, ...otherProps
-}) => (
+const WindowContent = ({ className, children, style, ...otherProps }) => (
  <StyledWindowContent className={className} style={style} {...otherProps}>
    {children}
  </StyledWindowContent>
@@ -20,16 +18,13 @@ const WindowContent = ({
 WindowContent.defaultProps = {
  className: '',
  style: {},
-  children: null,
+  children: null
 };

 WindowContent.propTypes = {
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
-  children: propTypes.node,
+  style: propTypes.shape([propTypes.string, propTypes.number]),
+  children: propTypes.node
 };

 export default WindowContent;
--- a/src/components/WindowHeader/WindowHeader.js
+++ b/src/components/WindowHeader/WindowHeader.js
@@ -21,9 +21,7 @@ const SlyledWindowHeader = styled.div`
  );
 `;

-const WindowHeader = ({
-  className, style, children, ...otherProps
-}) => (
+const WindowHeader = ({ className, style, children, ...otherProps }) => (
  <SlyledWindowHeader className={className} style={style} {...otherProps}>
    {children}
  </SlyledWindowHeader>
@@ -32,16 +30,13 @@ const WindowHeader = ({
 WindowHeader.defaultProps = {
  className: '',
  style: {},
-  children: null,
+  children: null
 };

 WindowHeader.propTypes = {
  className: propTypes.string,
-  style: propTypes.shape([
-    propTypes.string,
-    propTypes.number,
-  ]),
-  children: propTypes.node,
+  style: propTypes.shape([propTypes.string, propTypes.number]),
+  children: propTypes.node
 };

 export default WindowHeader;
--- a/src/components/common/index.js
+++ b/src/components/common/index.js
@@ -9,24 +9,26 @@ export const createDisabledTextStyles = () => css`
  /* filter: grayscale(100%); */
 `;
 export const createBoxStyles = () => css`
-    box-sizing: border-box;
-    display: inline-block;
-    background-color: ${({ theme }) => theme.material};
-    color: ${({ theme }) => theme.text};
-  `;
+  box-sizing: border-box;
+  display: inline-block;
+  background-color: ${({ theme }) => theme.material};
+  color: ${({ theme }) => theme.text};
+`;
 // TODO for flat box styles add checkered background when disabled (not solid color)
 export const createFlatBoxStyles = () => css`
-    position: relative;
-    box-sizing: border-box;
-    display: inline-block;
-    color: ${({ theme }) => theme.text};
-    background: ${({ theme, isDisabled }) => (isDisabled ? theme.flatLight : theme.canvas)};
-    border: 2px solid ${({ theme }) => theme.canvas};
-    outline: 2px solid ${({ theme }) => theme.flatDark};
-    outline-offset: -4px;
-  `;
-export const createBorderStyles = (invert = false) => (invert
-  ? css`
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  color: ${({ theme }) => theme.text};
+  background: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.flatLight : theme.canvas};
+  border: 2px solid ${({ theme }) => theme.canvas};
+  outline: 2px solid ${({ theme }) => theme.flatDark};
+  outline-offset: -4px;
+`;
+export const createBorderStyles = (invert = false) =>
+  invert
+    ? css`
        border-style: solid;
        border-width: 2px;
        border-left-color: ${({ theme }) => theme.borderDarkest};
@@ -37,7 +39,7 @@ export const createBorderStyles = (invert = false) => (invert
            1px ${({ theme }) => theme.borderDark},
          inset -1px -1px 0 1px ${({ theme }) => theme.borderLight};
      `
-  : css`
+    : css`
        border-style: solid;
        border-width: 2px;
        border-left-color: ${({ theme }) => theme.borderLightest};
@@ -47,9 +49,10 @@ export const createBorderStyles = (invert = false) => (invert
        box-shadow: ${props => props.shadow && `${shadow}, `} inset 1px 1px 0px
            1px ${({ theme }) => theme.borderLight},
          inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
-      `);
-export const createWellBorderStyles = (invert = false) => (invert
-  ? css`
+      `;
+export const createWellBorderStyles = (invert = false) =>
+  invert
+    ? css`
        border-style: solid;
        border-width: 2px;
        border-left-color: ${({ theme }) => theme.borderDark};
@@ -57,11 +60,11 @@ export const createWellBorderStyles = (invert = false) => (invert
        border-right-color: ${({ theme }) => theme.borderLightest};
        border-bottom-color: ${({ theme }) => theme.borderLightest};
      `
-  : css`
+    : css`
        border-style: solid;
        border-width: 2px;
        border-left-color: ${({ theme }) => theme.borderLightest};
        border-top-color: ${({ theme }) => theme.borderLightest};
        border-right-color: ${({ theme }) => theme.borderDark};
        border-bottom-color: ${({ theme }) => theme.borderDark};
-      `);
+      `;
--- a/src/components/common/system.js
+++ b/src/components/common/system.js
@@ -3,18 +3,18 @@
 export const fontSizes = {
  sm: '15px',
  md: '16px',
-  lg: '17px',
+  lg: '17px'
 };

 export const blockSizes = {
  sm: '27px',
  md: '35px',
-  lg: '43px',
+  lg: '43px'
 };
 export const padding = {
  sm: '0.5rem',
  md: '1rem',
-  lg: '1.25rem',
+  lg: '1.25rem'
 };

 export const fontFamily = 'sans-serif';
--- a/src/components/common/themes.js
+++ b/src/components/common/themes.js
@@ -37,7 +37,7 @@ themes.default = {
  progress: '#000080',

  flatLight: '#d8d8d8',
-  flatDark: '#9e9e9e',
+  flatDark: '#9e9e9e'
 };

 themes.water = {
@@ -77,7 +77,7 @@ themes.water = {
  progress: '#72b3b4',

  flatLight: '#d8d8d8',
-  flatDark: '#9e9e9e',
+  flatDark: '#9e9e9e'
 };

 themes.coldGray = {
@@ -121,7 +121,7 @@ themes.coldGray = {
  progress: '#8d88c2',

  flatLight: '#a4a7c8',
-  flatDark: '#5b57a1',
+  flatDark: '#5b57a1'
 };

 themes.lilacRoseDark = {
@@ -163,7 +163,7 @@ themes.lilacRoseDark = {
  progress: '#713259',

  flatLight: '#E597C9',
-  flatDark: '#7F3163',
+  flatDark: '#7F3163'
 };

 themes.violetDark = {
@@ -201,6 +201,6 @@ themes.violetDark = {
  progress: '#000080',

  flatLight: '#945b9b',
-  flatDark: '#3c1f3e',
+  flatDark: '#3c1f3e'
 };
 export default themes;