pr05 Typescript Migration: Update client/common folder to use the barrel folder structure

.eslintrc

@@ -133,7 +133,8 @@
         "no-use-before-define": "off",
         "import/no-extraneous-dependencies": "off",
         "no-unused-vars": "off",
-        "react/require-default-props": "off"
+        "react/require-default-props": "off",
+        "no-restricted-exports": "off"
       }
     },
     {

client/common/Button.stories.jsx → client/common/Button/Button.stories.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 
-import Button from './Button';
-import { GithubIcon, DropdownArrowIcon, PlusIcon } from './icons';
+import Button from './index';
+import { GithubIcon, DropdownArrowIcon, PlusIcon } from '../icons';
 
 export default {
   title: 'Common/Button',

client/common/Button/Button.styles.ts

@@ -0,0 +1,89 @@
+import styled from 'styled-components';
+import { remSize, prop } from '../../theme';
+import { StyledButtonProps } from './Button.types';
+
+export const StyledButton = styled.button<StyledButtonProps>`
+  &&& {
+    font-weight: bold;
+    display: ${({ display }) =>
+      display === 'inline' ? 'inline-flex' : 'flex'};
+    justify-content: center;
+    align-items: center;
+    width: max-content;
+    text-decoration: none;
+    color: ${({ kind }) => prop(`Button.${kind}.default.foreground`)};
+    background-color: ${({ kind }) =>
+      prop(`Button.${kind}.default.background`)};
+    cursor: pointer;
+    border: 2px solid ${({ kind }) => prop(`Button.${kind}.default.border`)};
+    border-radius: 2px;
+    padding: ${remSize(8)} ${remSize(25)};
+    line-height: 1;
+
+    svg * {
+      fill: ${({ kind }) => prop(`Button.${kind}.default.foreground`)};
+    }
+
+    &:hover:not(:disabled) {
+      color: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
+      background-color: ${({ kind }) =>
+        prop(`Button.${kind}.hover.background`)};
+      border-color: ${({ kind }) => prop(`Button.${kind}.hover.border`)};
+
+      svg * {
+        fill: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
+      }
+    }
+
+    &:active:not(:disabled) {
+      color: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
+      background-color: ${({ kind }) =>
+        prop(`Button.${kind}.active.background`)};
+
+      svg * {
+        fill: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
+      }
+    }
+
+    &:disabled {
+      color: ${({ kind }) => prop(`Button.${kind}.disabled.foreground`)};
+      background-color: ${({ kind }) =>
+        prop(`Button.${kind}.disabled.background`)};
+      border-color: ${({ kind }) => prop(`Button.${kind}.disabled.border`)};
+      cursor: not-allowed;
+
+      svg * {
+        fill: ${({ kind }) => prop(`Button.${kind}.disabled.foreground`)};
+      }
+    }
+
+    > * + * {
+      margin-left: ${remSize(8)};
+    }
+  }
+`;
+
+export const StyledInlineButton = styled.button`
+  &&& {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    color: ${prop('primaryTextColor')};
+    cursor: pointer;
+    border: none;
+    line-height: 1;
+
+    svg * {
+      fill: ${prop('primaryTextColor')};
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    > * + * {
+      margin-left: ${remSize(8)};
+    }
+  }
+`;

client/common/Button.test.tsx → client/common/Button/Button.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { render, screen, fireEvent } from '../test-utils';
-import Button from './Button';
+import { render, screen, fireEvent } from '../../test-utils';
+import Button from './index';
 
 const MockIcon = (props: React.SVGProps<SVGSVGElement>) => (
   <svg data-testid="mock-icon" {...props} />