flattened components folder structure

src/components/Tab/Tab.js

@@ -2,8 +2,8 @@ import React from "react";
 import propTypes from "prop-types";
 
 import styled from "styled-components";
-import { createBorderStyles, createBoxStyles } from "../../common";
-import { blockSizes, padding, colors } from "../../common/theme.variables";
+import { createBorderStyles, createBoxStyles } from "../common";
+import { blockSizes, padding, colors } from "../common/theme.variables";
 
 const StyledTab = styled.div`
   ${createBoxStyles()}

src/components/TabBody/TabBody.js

@@ -2,8 +2,8 @@ import React from "react";
 import propTypes from "prop-types";
 
 import styled from "styled-components";
-import { createBorderStyles, createBoxStyles } from "../../common";
-import { padding } from "../../common/theme.variables";
+import { createBorderStyles, createBoxStyles } from "../common";
+import { padding } from "../common/theme.variables";
 
 const StyledTabBody = styled.div`
   ${createBoxStyles()}

src/components/Table/Table.stories.js

@@ -2,11 +2,11 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 
 import Table from "./Table";
-import TableBody from "./TableBody/TableBody";
-import TableHead from "./TableHead/TableHead";
-import TableRow from "./TableRow/TableRow";
-import TableHeaderCell from "./TableHeaderCell/TableHeaderCell";
-import TableDataCell from "./TableDataCell/TableDataCell";
+import TableBody from "../TableBody/TableBody";
+import TableHead from "../TableHead/TableHead";
+import TableRow from "../TableRow/TableRow";
+import TableHeadCell from "../TableHeadCell/TableHeadCell";
+import TableDataCell from "../TableDataCell/TableDataCell";
 
 import Window from "../Window/Window";
 import WindowHeader from "../WindowHeader/WindowHeader";
@@ -21,9 +21,9 @@ class SimpleTable extends React.Component {
           <Table>
             <TableHead>
               <TableRow head>
-                <TableHeaderCell>Name</TableHeaderCell>
-                <TableHeaderCell>Swag</TableHeaderCell>
-                <TableHeaderCell>Ready</TableHeaderCell>
+                <TableHeadCell>Name</TableHeadCell>
+                <TableHeadCell>Swag</TableHeadCell>
+                <TableHeadCell>Ready</TableHeadCell>
               </TableRow>
             </TableHead>
             <TableBody>

src/components/TableBody/TableBody.js

@@ -2,8 +2,8 @@ import React from "react";
 import propTypes from "prop-types";
 
 import styled from "styled-components";
-import { colors } from "../../common/theme.variables";
-import { insetShadow } from "../../common";
+import { colors } from "../common/theme.variables";
+import { insetShadow } from "../common";
 
 const StyledTableBody = styled.tbody`
   background: ${colors.light};

src/components/TableDataCell/TableDataCell.js

@@ -2,7 +2,7 @@ import React from "react";
 import propTypes from "prop-types";
 
 import styled from "styled-components";
-import { padding } from "../../common/theme.variables";
+import { padding } from "../common/theme.variables";
 
 const StyledTd = styled.td`
   padding: 0 ${padding.sm};

src/components/TableHeadCell/TableHeadCell.js

@@ -2,8 +2,8 @@ import React from "react";
 import propTypes from "prop-types";
 
 import styled from "styled-components";
-import { createBorderStyles } from "../../common";
-import { padding } from "../../common/theme.variables";
+import { createBorderStyles } from "../common";
+import { padding } from "../common/theme.variables";
 
 // ⭕⭕⭕⭕ move text down on Click
 
@@ -22,7 +22,7 @@ const StyledHeadCell = styled.th`
   cursor: default;
 `;
 
-const TableHeaderCell = ({ className, children, style, ...otherProps }) => {
+const TableHeadCell = ({ className, children, style, ...otherProps }) => {
   return (
     <StyledHeadCell className={className} style={style} {...otherProps}>
       {children}
@@ -30,14 +30,14 @@ const TableHeaderCell = ({ className, children, style, ...otherProps }) => {
   );
 };
 
-TableHeaderCell.defaultProps = {
+TableHeadCell.defaultProps = {
   onClick: null
 };
 
-TableHeaderCell.propTypes = {
+TableHeadCell.propTypes = {
   children: propTypes.node,
   className: propTypes.string,
   style: propTypes.object
 };
 
-export default TableHeaderCell;
+export default TableHeadCell;

src/components/TableRow/TableRow.js

@@ -2,7 +2,7 @@ import React from "react";
 import propTypes from "prop-types";
 
 import styled from "styled-components";
-import { blockSizes, colors } from "../../common/theme.variables";
+import { blockSizes, colors } from "../common/theme.variables";
 
 const StyledTr = styled.tr`
   color: inherit;

src/components/Tabs/TabBody/TabBody.css

@@ -1,25 +0,0 @@
-.TabBody {
-  position: relative;
-  height: 100%;
-  padding: 2em 1em 1em 1em;
-  background: #ced0cf;
-  border-top: 2px solid #fff;
-  border-left: 2px solid #fff;
-  border-bottom: 2px solid #050608;
-  border-right: 2px solid #050608;
-}
-.TabBody:before {
-  padding: 0;
-  content: "";
-  display: inline-block;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  width: calc(100% - 4px);
-  height: calc(100% - 4px);
-
-  border-top: 2px solid #dfe0e3;
-  border-left: 2px solid #dfe0e3;
-  border-bottom: 2px solid #888c8f;
-  border-right: 2px solid #888c8f;
-}

src/components/Tabs/Tabs.stories.js

@@ -2,8 +2,8 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 
 import Tabs from "./Tabs";
-import Tab from "./Tab/Tab";
-import TabBody from "./TabBody/TabBody";
+import Tab from "../Tab/Tab";
+import TabBody from "../TabBody/TabBody";
 
 import Window from "../Window/Window";
 import WindowHeader from "../WindowHeader/WindowHeader";