chore: update prettier tab width for consistency (#175)

packages/design-system/atoms/button/Button.spec.tsx

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { Button } from './Button';
 
 it('fires an onClick callback when clicked', () => {
-    const mock = jest.fn();
-    const view = shallow(<Button onClick={mock}>Button</Button>);
+  const mock = jest.fn();
+  const view = shallow(<Button onClick={mock}>Button</Button>);
 
-    view.simulate('click');
-    expect(mock).toBeCalled();
+  view.simulate('click');
+  expect(mock).toBeCalled();
 });

packages/design-system/atoms/button/Button.stories.tsx

@@ -2,24 +2,24 @@ import * as React from 'react';
 import { Button as ButtonComponent } from './Button';
 
 export default {
-    title: 'Atoms/Button',
-    component: ButtonComponent,
-    argTypes: {
-        content: { control: 'text' },
-    },
-    args: {
-        content: 'Press me!',
-        size: 'large',
-    },
+  title: 'Atoms/Button',
+  component: ButtonComponent,
+  argTypes: {
+    content: { control: 'text' },
+  },
+  args: {
+    content: 'Press me!',
+    size: 'large',
+  },
 };
 
 export const Large = ({ content, ...args }) => (
-    <ButtonComponent {...args}>{content}</ButtonComponent>
+  <ButtonComponent {...args}>{content}</ButtonComponent>
 );
 
 export const Small = ({ content, ...args }) => (
-    <ButtonComponent {...args}>{content}</ButtonComponent>
+  <ButtonComponent {...args}>{content}</ButtonComponent>
 );
 Small.args = {
-    size: 'small',
+  size: 'small',
 };

packages/design-system/atoms/button/Button.styled.ts

@@ -4,105 +4,105 @@ import { text300, text400 } from '@roleypoly/design-system/atoms/typography';
 import styled, { css } from 'styled-components';
 
 export const IconContainer = styled.div`
-    margin-right: 0.6rem;
-    font-size: 1.75em;
+  margin-right: 0.6rem;
+  font-size: 1.75em;
 `;
 
 const base = css`
-    ${fontCSS}
+  ${fontCSS}
 
-    appearance: none;
-    display: block;
-    background-color: ${palette.taupe300};
-    color: ${palette.grey500};
-    border-radius: 3px;
-    border: 2px solid rgba(0, 0, 0, 0.55);
+  appearance: none;
+  display: block;
+  background-color: ${palette.taupe300};
+  color: ${palette.grey500};
+  border-radius: 3px;
+  border: 2px solid rgba(0, 0, 0, 0.55);
+  transition: all 0.15s ease-in-out;
+  outline: 0;
+  position: relative;
+  user-select: none;
+  cursor: pointer;
+  white-space: nowrap;
+
+  ::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #000;
+    opacity: 0;
     transition: all 0.15s ease-in-out;
-    outline: 0;
-    position: relative;
-    user-select: none;
-    cursor: pointer;
-    white-space: nowrap;
+  }
 
+  :hover {
+    transform: translateY(-1px);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  }
+
+  :active {
+    transform: translateY(1px);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
     ::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background-color: #000;
-        opacity: 0;
-        transition: all 0.15s ease-in-out;
-    }
-
-    :hover {
-        transform: translateY(-1px);
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-    }
-
-    :active {
-        transform: translateY(1px);
-        box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
-        ::after {
-            opacity: 0.1;
-        }
+      opacity: 0.1;
     }
+  }
 `;
 
 const colors = {
-    primary: css`
-        background-color: ${palette.green400};
-        color: ${palette.taupe100};
-    `,
-    secondary: css``,
-    discord: css`
-        background-color: ${palette.discord400};
-        border: 2px solid ${palette.discord200};
-    `,
-    muted: css`
-        border: 2px solid rgba(0, 0, 0, 0.15);
-        background: none;
-        :hover {
-            background-color: ${palette.taupe200};
-        }
-    `,
+  primary: css`
+    background-color: ${palette.green400};
+    color: ${palette.taupe100};
+  `,
+  secondary: css``,
+  discord: css`
+    background-color: ${palette.discord400};
+    border: 2px solid ${palette.discord200};
+  `,
+  muted: css`
+    border: 2px solid rgba(0, 0, 0, 0.15);
+    background: none;
+    :hover {
+      background-color: ${palette.taupe200};
+    }
+  `,
 };
 
 const sizes = {
-    small: css`
-        ${text300}
+  small: css`
+    ${text300}
 
-        padding: 4px 8px;
-    `,
-    large: css`
-        ${text400}
+    padding: 4px 8px;
+  `,
+  large: css`
+    ${text400}
 
-        padding: 12px 32px;
-        width: 100%;
-    `,
+    padding: 12px 32px;
+    width: 100%;
+  `,
 };
 
 const modifiers = {
-    withIcon: css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    `,
-    withLoading: css`
-        pointer-events: none;
-    `,
+  withIcon: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `,
+  withLoading: css`
+    pointer-events: none;
+  `,
 };
 
 export type ButtonComposerOptions = {
-    size: keyof typeof sizes;
-    color: keyof typeof colors;
-    modifiers?: Array<keyof typeof modifiers>;
+  size: keyof typeof sizes;
+  color: keyof typeof colors;
+  modifiers?: Array<keyof typeof modifiers>;
 };
 
 export const Button = styled.button<ButtonComposerOptions>`
-    ${base}
-    ${(props) => props.size in sizes && sizes[props.size]}
+  ${base}
+  ${(props) => props.size in sizes && sizes[props.size]}
     ${(props) => props.color in colors && colors[props.color]}
     ${(props) => props.modifiers?.map((m) => modifiers[m])}
 `;

packages/design-system/atoms/button/Button.tsx

@@ -1,38 +1,38 @@
 import * as React from 'react';
 import {
-    Button as StyledButton,
-    ButtonComposerOptions,
-    IconContainer,
+  Button as StyledButton,
+  ButtonComposerOptions,
+  IconContainer,
 } from './Button.styled';
 
 export type ButtonProps = Partial<ButtonComposerOptions> & {
-    children: React.ReactNode;
-    icon?: React.ReactNode;
-    loading?: boolean;
-    onClick?: () => void;
-    disabled?: boolean;
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+  loading?: boolean;
+  onClick?: () => void;
+  disabled?: boolean;
 };
 
 export const Button = (props: ButtonProps) => {
-    const modifiers: ButtonProps['modifiers'] = [];
-    if (props.loading) {
-        modifiers.push('withLoading');
-    }
+  const modifiers: ButtonProps['modifiers'] = [];
+  if (props.loading) {
+    modifiers.push('withLoading');
+  }
 
-    if (props.icon) {
-        modifiers.push('withIcon');
-    }
+  if (props.icon) {
+    modifiers.push('withIcon');
+  }
 
-    return (
-        <StyledButton
-            size={props.size || 'large'}
-            color={props.color || 'primary'}
-            modifiers={modifiers}
-            onClick={props.onClick}
-            disabled={props.disabled}
-        >
-            {props.icon && <IconContainer>{props.icon}</IconContainer>}
-            <div>{props.children}</div>
-        </StyledButton>
-    );
+  return (
+    <StyledButton
+      size={props.size || 'large'}
+      color={props.color || 'primary'}
+      modifiers={modifiers}
+      onClick={props.onClick}
+      disabled={props.disabled}
+    >
+      {props.icon && <IconContainer>{props.icon}</IconContainer>}
+      <div>{props.children}</div>
+    </StyledButton>
+  );
 };