[NDS-629] Clean up console warnings

components-e2e/package.json

@@ -13,6 +13,7 @@
     "eslint:fix": "yarn run eslint --fix"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0",
     "@babel/preset-react": "7.0.0",
     "babel-loader": "8.0.5",
     "babel-plugin-macros": "2.5.1",
@@ -21,7 +22,8 @@
     "eslint-plugin-chai-friendly": "0.4.1",
     "eslint-plugin-cypress": "2.2.1",
     "react": "16.8.6",
-    "react-dom": "16.8.6"
+    "react-dom": "16.8.6",
+    "webpack": ">=2"
   },
   "dependencies": {
     "@nulogy/components": "^0.5.2"

components/package.json

@@ -15,7 +15,6 @@
     "watch": "yarn build --watch",
     "build-storybook": "build-storybook",
     "deploy-storybook": "storybook-to-ghpages",
-    "sketch": "story2sketch --url http://localhost:8080/iframe.html --output stories.asketch.json",
     "icons": "node scripts/collect-icon-svgs",
     "storyshots": "jest --testPathPattern='Storyshots.spec.js'",
     "storyshots:update": "yarn storyshots -u",
@@ -58,20 +57,26 @@
     "@storybook/addon-storysource": "^4.0.12",
     "@storybook/react": "^4.1.4",
     "babel-jest": "24.1.0",
+    "babel-loader": "8.0.0",
     "babel-plugin-require-context-hook": "1.0.0",
     "babel-plugin-styled-components": "1.10.0",
     "babel-preset-react": "6.24.1",
     "enzyme": "3.9.0",
     "enzyme-adapter-react-16": "1.10.0",
     "enzyme-to-json": "3.3.5",
+    "eslint": "5.3.0",
     "eslint-config-airbnb": "17.1.0",
     "eslint-import-resolver-webpack": "^0.11.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-react": "^7.11.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "24.1.0",
     "jest-styled-components": "6.3.1",
     "prop-types": "15.6.2",
+    "react": "*",
+    "react-dom": "*",
     "react-test-renderer": "~16.3",
-    "story2sketch": "^1.4.0",
     "webpack": "^4.8.3",
     "webpack-cli": "^3.1.0"
   },

components/src/Button/Button.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { space } from "styled-system";
 import React from "react";
 import PropTypes from "prop-types";
-import { Icon } from "ComponentsRoot";
+import Icon from "../Icon/Icon";
 import theme from "../theme";
 import icons from "../../icons/icons.json";
 import { subPx, omit } from "../Utils";

components/src/Button/DangerButton.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { darken } from "polished";
-import { Button } from "ComponentsRoot";
+import Button from "./Button";
 import theme from "../theme";
 
 const DangerButton = styled(Button)(({ disabled }) => ({

components/src/Button/IconicButton.js

@@ -2,7 +2,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { space } from "styled-system";
-import { Icon, Text } from "ComponentsRoot";
+import Icon from "../Icon/Icon";
+import Text from "../Type/Text";
 import theme from "../theme";
 import icons from "../../icons/icons.json";
 

components/src/Button/PrimaryButton.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { darken } from "polished";
-import { Button } from "ComponentsRoot";
+import Button from "./Button";
 import theme from "../theme";
 
 const PrimaryButton = styled(Button)(({ disabled }) => ({

components/src/Button/QuietButton.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Button } from "ComponentsRoot";
+import Button from "./Button";
 import theme from "../theme";
 
 const QuietButton = styled(Button)({

components/src/Checkbox/Checkbox.js

@@ -1,7 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import { Box, Text } from "ComponentsRoot";
+import Box from "../Box/Box";
+import Text from "../Type/Text";
 import theme from "../theme";
 import { ClickInputLabel } from "../Utils";
 

components/src/Checkbox/CheckboxGroup.js

@@ -1,13 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import {
-  Box,
-  Checkbox,
-  HelpText,
-  InlineValidation,
-  RequirementText,
-} from "ComponentsRoot";
+import Box from "../Box/Box";
+import Checkbox from "./Checkbox";
+import HelpText from "../FieldLabel/HelpText";
+import InlineValidation from "../Validation/InlineValidation";
+import RequirementText from "../FieldLabel/RequirementText";
 import Fieldset from "../Form/Fieldset";
 
 const getCheckboxButtons = props => {

components/src/DemoPage/DemoPage.js

@@ -1,29 +1,27 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import {
-  Title,
-  PrimaryButton,
-  QuietButton,
-  IconicButton,
-  Box,
-  Flex,
-  Input,
-  Form,
-  FormSection,
-  Checkbox,
-  CheckboxGroup,
-  Radio,
-  RadioGroup,
-  Toggle,
-  HeaderValidation,
-  List,
-  ListItem,
-  Select,
-  Text,
-  Link,
-  NavBar,
-} from "ComponentsRoot";
+import Title from "../Type/Headings";
+import PrimaryButton from "../Button/PrimaryButton";
+import QuietButton from "../Button/QuietButton";
+import IconicButton from "../Button/IconicButton";
+import Box from "../Box/Box";
+import Flex from "../Flex/Flex";
+import Input from "../Input/Input";
+import Form from "../Form/Form";
+import FormSection from "../Form/FormSection";
+import Checkbox from "../Checkbox/Checkbox";
+import CheckboxGroup from "../Checkbox/CheckboxGroup";
+import Radio from "../Radio/Radio";
+import RadioGroup from "../Radio/RadioGroup";
+import Toggle from "../Toggle/Toggle";
+import HeaderValidation from "../Validation/HeaderValidation";
+import List from "../List/List";
+import ListItem from "../List/ListItem";
+import Select from "../Select/Select";
+import Text from "../Type/Text";
+import Link from "../Link/Link";
+import NavBar from "../NavBar/NavBar";
 import theme from "../theme";
 
 const menuData = {

components/src/FieldLabel/FieldLabel.js

@@ -2,7 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import { space } from "styled-system";
 import PropTypes from "prop-types";
-import { Box, RequirementText, HelpText } from "ComponentsRoot";
+import Box from "../Box/Box";
+import RequirementText from "./RequirementText";
+import HelpText from "./HelpText";
 import theme from "../theme";
 
 const Label = styled.label(

components/src/FieldLabel/HelpText.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Text } from "ComponentsRoot";
+import Text from "../Type/Text";
 import theme from "../theme";
 
 const HelpText = props => (

components/src/FieldLabel/MaybeFieldLabel.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { FieldLabel } from "ComponentsRoot";
+import FieldLabel from "./FieldLabel";
 
 const MaybeFieldLabel = ({
   labelText,

components/src/FieldLabel/RequirementText.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Text } from "ComponentsRoot";
+import Text from "../Type/Text";
 
 const RequirementText = props => (
   <Text

components/src/Flex/Flex.js

@@ -5,7 +5,7 @@ import {
   flexWrap,
   flexDirection,
 } from "styled-system";
-import { Box } from "ComponentsRoot";
+import Box from "../Box/Box";
 
 const Flex = styled(Box)(
   {

components/src/Form/Field.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Box } from "ComponentsRoot";
+import Box from "../Box/Box";
 
 const Field = styled(Box)({
   width: "100%",

components/src/Form/Form.js

@@ -2,11 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import { space } from "styled-system";
 import PropTypes from "prop-types";
-import {
-  SectionTitle,
-  Field,
-  HeaderValidation,
-} from "ComponentsRoot";
+import SectionTitle from "../Type/Headings";
+import Field from "./Field";
+import HeaderValidation from "../Validation/HeaderValidation";
 import Fieldset from "./Fieldset";
 import FormSection from "./FormSection";
 import theme from "../theme";

components/src/Form/FormSection.js

@@ -1,10 +1,8 @@
 import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
-import {
-  SubsectionTitle,
-  Field,
-} from "ComponentsRoot";
+import SubsectionTitle from "../Type/Headings";
+import Field from "./Field";
 import Fieldset from "./Fieldset";
 import theme from "../theme";
 

components/src/Input/Input.js

@@ -3,7 +3,9 @@ import styled from "styled-components";
 import PropTypes from "prop-types";
 import { transparentize } from "polished";
 import { space } from "styled-system";
-import { Field, MaybeFieldLabel, InlineValidation } from "ComponentsRoot";
+import Field from "../Form/Field";
+import MaybeFieldLabel from "../FieldLabel/MaybeFieldLabel";
+import InlineValidation from "../Validation/InlineValidation";
 import theme from "../theme";
 import { subPx } from "../Utils";
 

components/src/List/List.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import {
   space, color, fontSize, fontWeight, lineHeight,
 } from "styled-system";
-import { ListItem } from "ComponentsRoot";
+import ListItem from "./ListItem";
 import theme from "../theme";
 
 const List = styled.ul(

components/src/NavBar/Branding.js

@@ -1,9 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import {
-  Box,
-} from "ComponentsRoot";
+import Box from "../Box/Box";
 import theme from "../theme";
 
 const BaseBranding = ({

components/src/NavBar/DesktopMenu.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import { Flex } from "ComponentsRoot";
+import Flex from "../Flex/Flex";
 import MenuTrigger from "./MenuTrigger";
 import MenuLink from "./MenuLink";
 import theme from "../theme";

components/src/NavBar/MenuTrigger.js

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import { Manager, Reference, Popper } from "react-popper";
-import theme from "ComponentsRoot/theme";
+import theme from "../theme";
 import Icon from "../Icon/Icon";
 import SubMenu from "./SubMenu";
 import SubMenuTrigger from "./SubMenuTrigger";

components/src/NavBar/MobileMenu.js

@@ -1,12 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import {
-  Box,
-  Icon,
-  SubsectionTitle,
-  Text,
-} from "ComponentsRoot";
+import Box from "../Box/Box";
+import Icon from "../Icon/Icon";
+import SubsectionTitle from "../Type/Headings";
+import Text from "../Type/Text";
 import SubMenuLink from "./SubMenuLink";
 import MenuLink from "./MenuLink";
 import theme from "../theme";

components/src/NavBar/NavBar.js

@@ -1,11 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import {
-  Box,
-  Flex,
-  NavBarSearch,
-} from "ComponentsRoot";
+import Box from "../Box/Box";
+import Flex from "../Flex/Flex";
+import NavBarSearch from "../NavBarSearch/NavBarSearch";
 import Branding from "./Branding";
 import DesktopMenu from "./DesktopMenu";
 import MobileMenu from "./MobileMenu";

components/src/NavBar/SubMenu.js

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
-import theme from "ComponentsRoot/theme";
+import theme from "../theme";
 
 const subMenuStyles = {
   backgroundColor: theme.colors.whiteGrey,

components/src/NavBar/SubMenuTrigger.js

@@ -2,8 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import { Manager, Reference, Popper } from "react-popper";
-import theme from "ComponentsRoot/theme";
-import { Text, Icon } from "ComponentsRoot";
+import theme from "../theme";
+import Text from "../Type/Text";
+import Icon from "../Icon/Icon";
 import SubMenu from "./SubMenu";
 import SubMenuLink from "./SubMenuLink";
 

components/src/NavBarSearch/NavBarSearch.js

@@ -2,11 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import { darken, transparentize } from "polished";
-import {
-  Flex,
-  Input,
-  Icon,
-} from "ComponentsRoot";
+import Flex from "../Flex/Flex";
+import Input from "../Input/Input";
+import Icon from "../Icon/Icon";
 import theme from "../theme";
 
 class BaseNavBarSearch extends React.Component {

components/src/Radio/Radio.js

@@ -1,7 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import { Box, Text } from "ComponentsRoot";
+import Box from "../Box/Box";
+import Text from "../Type/Text";
 import theme from "../theme";
 import { ClickInputLabel } from "../Utils";