enabled displaying Node as Fieldset label

src/components/AppBar/AppBar.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import styled from "styled-components";
 import { createBorderStyles, createBoxStyles } from "../common";
 
@@ -42,11 +42,11 @@ AppBar.defaultProps = {
 };
 
 AppBar.propTypes = {
-  style: PropTypes.object,
-  shadow: PropTypes.bool,
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  fixed: PropTypes.bool
+  style: propTypes.object,
+  shadow: propTypes.bool,
+  className: propTypes.string,
+  children: propTypes.node.isRequired,
+  fixed: propTypes.bool
 };
 
 export default AppBar;

src/components/Bar/Bar.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import styled from "styled-components";
 import { blockSizes, colors } from "../common/theme.variables";
 
@@ -28,8 +28,8 @@ Bar.defaultProps = {
   size: "md"
 };
 Bar.propTypes = {
-  className: PropTypes.string,
-  style: PropTypes.object,
-  size: PropTypes.oneOf(["sm", "md", "lg"])
+  className: propTypes.string,
+  style: propTypes.object,
+  size: propTypes.oneOf(["sm", "md", "lg"])
 };
 export default Bar;

src/components/Button/Button.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 
 import styled from "styled-components";
 import {
@@ -102,17 +102,17 @@ Button.defaultProps = {
 };
 
 Button.propTypes = {
-  type: PropTypes.string,
-  onClick: PropTypes.func,
-  style: PropTypes.object,
-  disabled: PropTypes.bool,
-  fullWidth: PropTypes.bool,
-  size: PropTypes.oneOf(["sm", "md", "lg"]),
-  square: PropTypes.bool,
-  active: PropTypes.bool,
-  flat: PropTypes.bool,
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired
+  type: propTypes.string,
+  onClick: propTypes.func,
+  style: propTypes.object,
+  disabled: propTypes.bool,
+  fullWidth: propTypes.bool,
+  size: propTypes.oneOf(["sm", "md", "lg"]),
+  square: propTypes.bool,
+  active: propTypes.bool,
+  flat: propTypes.bool,
+  className: propTypes.string,
+  children: propTypes.node.isRequired
 };
 
 export default Button;

src/components/Checkbox/Checkbox.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 
 import styled from "styled-components";
 import { StyledCutout, createDisabledTextStyles } from "../common";
@@ -98,17 +98,17 @@ Checkbox.defaultProps = {
 };
 
 Checkbox.propTypes = {
-  onChange: PropTypes.func,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.bool
+  onChange: propTypes.func,
+  name: propTypes.string.isRequired,
+  value: propTypes.oneOfType([
+    propTypes.string,
+    propTypes.number,
+    propTypes.bool
   ]).isRequired,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  style: PropTypes.object
+  label: propTypes.oneOfType([propTypes.string, propTypes.number]),
+  checked: propTypes.bool,
+  disabled: propTypes.bool,
+  style: propTypes.object
 };
 
 export default Checkbox;

src/components/Chip/Chip.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import cx from "classnames";
 
 import "./Chip.css";
@@ -20,6 +20,6 @@ const Chip = ({ className, disabled, children }) => {
 Chip.defaultProps = {};
 
 Chip.propTypes = {
-  className: PropTypes.string
+  className: propTypes.string
 };
 export default Chip;

src/components/Cutout/Cutout.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 
 import { StyledCutout } from "../common";
 
@@ -18,10 +18,10 @@ Cutout.defaultProps = {
 };
 
 Cutout.propTypes = {
-  className: PropTypes.string,
-  shadow: PropTypes.bool,
-  children: PropTypes.node,
-  style: PropTypes.object
+  className: propTypes.string,
+  shadow: propTypes.bool,
+  children: propTypes.node,
+  style: propTypes.object
 };
 
 export default Cutout;

src/components/DatePicker/DatePicker.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import cx from "classnames";
 
 import "./DatePicker.css";
@@ -20,10 +20,10 @@ function dayIndex(year, month, day) {
 }
 class DatePicker extends Component {
   static propTypes = {
-    className: PropTypes.string,
-    noShadow: PropTypes.bool,
-    onChange: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired
+    className: propTypes.string,
+    noShadow: propTypes.bool,
+    onChange: propTypes.func.isRequired,
+    onCancel: propTypes.func.isRequired
   };
   static defaultProps = {
     style: {}

src/components/Divider/Divider.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import styled from "styled-components";
 
 const StyledDivider = styled.hr`
@@ -15,8 +15,8 @@ const Divider = ({ className, style, ...otherProps }) => {
 
 Divider.defaultProps = {};
 Divider.propTypes = {
-  className: PropTypes.string,
-  style: PropTypes.object
+  className: propTypes.string,
+  style: propTypes.object
 };
 
 export default Divider;

src/components/Fab/Fab.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import cx from "classnames";
 
 import "./Fab.css";
@@ -49,15 +49,15 @@ Fab.defaultProps = {
 };
 
 Fab.propTypes = {
-  type: PropTypes.string,
-  size: PropTypes.oneOf(["s", "m", "l", "xl"]),
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  disabled: PropTypes.bool,
-  active: PropTypes.bool,
-  square: PropTypes.bool,
-  children: PropTypes.node
+  type: propTypes.string,
+  size: propTypes.oneOf(["s", "m", "l", "xl"]),
+  onClick: propTypes.func,
+  className: propTypes.string,
+  style: propTypes.object,
+  disabled: propTypes.bool,
+  active: propTypes.bool,
+  square: propTypes.bool,
+  children: propTypes.node
 };
 
 export default Fab;

src/components/Fieldset/Fieldset.js

@@ -13,8 +13,6 @@ const StyledFieldset = styled.fieldset`
   padding: ${padding.md};
 
   font-size: ${fontSizes.md};
-
-  ${props => props.isDisabled && createDisabledTextStyles()}
 `;
 const StyledLegend = styled.legend`
   position: absolute;
@@ -27,8 +25,12 @@ const StyledLegend = styled.legend`
   background: ${colors.bg};
 `;
 
+const StyledFieldsetContent = styled.div`
+  ${props => props.isDisabled && createDisabledTextStyles()}
+`;
+
 const Fieldset = ({
-  title,
+  label,
   disabled,
   children,
   className,
@@ -42,8 +44,10 @@ const Fieldset = ({
       className={className}
       {...otherProps}
     >
-      {title && <StyledLegend>{title}</StyledLegend>}
-      {children}
+      {label && <StyledLegend>{label}</StyledLegend>}
+      <StyledFieldsetContent isDisabled={disabled}>
+        {children}
+      </StyledFieldsetContent>
     </StyledFieldset>
   );
 };
@@ -53,7 +57,11 @@ Fieldset.defaultProps = {
 };
 
 Fieldset.propTypes = {
-  title: propTypes.string,
+  label: propTypes.oneOfType([
+    propTypes.string,
+    propTypes.number,
+    propTypes.node
+  ]),
   className: propTypes.string,
   style: propTypes.object,
   children: propTypes.node,

src/components/Fieldset/Fieldset.stories.js

@@ -1,15 +1,11 @@
-import React from "react";
+import React, { useState } from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
 import Fieldset from "./Fieldset";
 import Window from "../Window/Window";
 import WindowContent from "../WindowContent/WindowContent";
-
-const props = {
-  title: "Title here",
-  disabled: false
-};
+import Checkbox from "../Checkbox/Checkbox";
 
 storiesOf("Fieldset", module)
   .addDecorator(story => (
@@ -29,19 +25,35 @@ storiesOf("Fieldset", module)
       </WindowContent>
     </Window>
   ))
-  .add("withTitle", () => (
+  .add("with label", () => (
     <Window>
       <WindowContent>
-        <Fieldset title="Title here">Some content here 😍</Fieldset>
+        <Fieldset label="Label here">Some content here 😍</Fieldset>
       </WindowContent>
     </Window>
   ))
-  .add("disabled", () => (
+  .add("disabled", () => <DisabledFieldset />);
+
+const DisabledFieldset = () => {
+  const [state, setState] = useState(true);
+  return (
     <Window>
       <WindowContent>
-        <Fieldset title="Disabled" disabled>
+        <Fieldset
+          label={
+            <Checkbox
+              style={{ margin: 0 }}
+              label="Enable"
+              checked={!state}
+              value={!state}
+              onChange={() => setState(!state)}
+            />
+          }
+          disabled={state}
+        >
           Some content here 😍
         </Fieldset>
       </WindowContent>
     </Window>
-  ));
+  );
+};

src/components/List/List.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 
 import styled from "styled-components";
 import { createBorderStyles, createBoxStyles } from "../common";
@@ -69,14 +69,14 @@ List.defaultProps = {
 };
 
 List.propTypes = {
-  className: PropTypes.string,
-  style: PropTypes.object,
-  fullWidth: PropTypes.bool,
-  inline: PropTypes.bool,
-  shadow: PropTypes.bool,
-  children: PropTypes.node,
-  verticalAlign: PropTypes.oneOf(["top", "bottom"]),
-  horizontalAlign: PropTypes.oneOf(["left", "right"])
+  className: propTypes.string,
+  style: propTypes.object,
+  fullWidth: propTypes.bool,
+  inline: propTypes.bool,
+  shadow: propTypes.bool,
+  children: propTypes.node,
+  verticalAlign: propTypes.oneOf(["top", "bottom"]),
+  horizontalAlign: propTypes.oneOf(["left", "right"])
 };
 
 export default List;

src/components/ListItem/ListItem.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 
 import styled from "styled-components";
 import { createDisabledTextStyles } from "../common";
@@ -59,15 +59,15 @@ ListItem.defaultProps = {
 };
 
 ListItem.propTypes = {
-  className: PropTypes.string,
-  href: PropTypes.string,
-  style: PropTypes.object,
-  size: PropTypes.oneOf(["sm", "md", "lg"]),
-  disabled: PropTypes.bool,
-  fullWidth: PropTypes.bool,
-  square: PropTypes.bool,
-  children: PropTypes.node,
-  onClick: PropTypes.func
+  className: propTypes.string,
+  href: propTypes.string,
+  style: propTypes.object,
+  size: propTypes.oneOf(["sm", "md", "lg"]),
+  disabled: propTypes.bool,
+  fullWidth: propTypes.bool,
+  square: propTypes.bool,
+  children: propTypes.node,
+  onClick: propTypes.func
 };
 
 export default ListItem;

src/components/Material/Material.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 
 import { StyledMaterial } from "../common";
 
@@ -12,10 +12,10 @@ Material.defaultProps = {
 };
 
 Material.propTypes = {
-  hollow: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  style: PropTypes.object
+  hollow: propTypes.bool,
+  children: propTypes.node,
+  className: propTypes.string,
+  style: propTypes.object
 };
 
 export default Material;

src/components/NumberField/NumberField.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import cx from "classnames";
 
 import "./NumberField.css";
@@ -13,13 +13,13 @@ class NumberField extends Component {
     width: null
   };
   static propTypes = {
-    onChange: PropTypes.func.isRequired,
-    value: PropTypes.number.isRequired,
-    min: PropTypes.number,
-    max: PropTypes.number,
-    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    disabled: PropTypes.bool,
-    className: PropTypes.string
+    onChange: propTypes.func.isRequired,
+    value: propTypes.number.isRequired,
+    min: propTypes.number,
+    max: propTypes.number,
+    width: propTypes.oneOfType([propTypes.string, propTypes.number]),
+    disabled: propTypes.bool,
+    className: propTypes.string
   };
   state = {
     value: parseInt(this.props.value) || 0

src/components/Progress/Progress.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 
 import styled from "styled-components";
 
@@ -56,8 +56,8 @@ const ProgressBar = ({ width, percent }) => (
 );
 
 ProgressBar.propTypes = {
-  width: PropTypes.number,
-  percent: PropTypes.number
+  width: propTypes.number,
+  percent: propTypes.number
 };
 
 ProgressBar.defaultProps = {

src/components/Radio/Radio.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 
 import styled from "styled-components";
 import { StyledCutout, createDisabledTextStyles } from "../common";
@@ -103,17 +103,17 @@ Radio.defaultProps = {
 };
 
 Radio.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.bool
+  onChange: propTypes.func.isRequired,
+  name: propTypes.string.isRequired,
+  value: propTypes.oneOfType([
+    propTypes.string,
+    propTypes.number,
+    propTypes.bool
   ]).isRequired,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  style: PropTypes.object
+  label: propTypes.oneOfType([propTypes.string, propTypes.number]),
+  checked: propTypes.bool,
+  disabled: propTypes.bool,
+  style: propTypes.object
 };
 
 export default Radio;

src/components/Select/Select.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 
 import Button from "../Button/Button";
 
@@ -131,14 +131,14 @@ const Select = ({
 };
 
 Select.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  className: PropTypes.string,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  selectedIndex: PropTypes.number,
-  shadow: PropTypes.bool,
-  style: PropTypes.object,
-  onSelect: PropTypes.func.isRequired
+  items: propTypes.arrayOf(propTypes.object).isRequired,
+  className: propTypes.string,
+  width: propTypes.number,
+  height: propTypes.number,
+  selectedIndex: propTypes.number,
+  shadow: propTypes.bool,
+  style: propTypes.object,
+  onSelect: propTypes.func.isRequired
 };
 Select.defaultProps = {
   style: {},

src/components/Table/Table.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import cx from "classnames";
 
 import "./Table.css";
@@ -20,9 +20,9 @@ const Table = ({ className, children, style, ...otherProps }) => {
 Table.defaultProps = {};
 
 Table.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  style: PropTypes.object
+  children: propTypes.node,
+  className: propTypes.string,
+  style: propTypes.object
 };
 
 export default Table;

src/components/Table/TableBody/TableBody.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import cx from "classnames";
 
 import "./TableBody.css";
@@ -17,9 +17,9 @@ const TableBody = ({ className, children, style, ...otherProps }) => {
 TableBody.defaultProps = {};
 
 TableBody.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  style: PropTypes.object
+  children: propTypes.node,
+  className: propTypes.string,
+  style: propTypes.object
 };
 
 export default TableBody;

src/components/Table/TableDataCell/TableDataCell.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import cx from "classnames";
 
 import "./TableDataCell.css";
@@ -17,9 +17,9 @@ const TableDataCell = ({ className, children, style, ...otherProps }) => {
 TableDataCell.defaultProps = {};
 
 TableDataCell.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  style: PropTypes.object
+  children: propTypes.node,
+  className: propTypes.string,
+  style: propTypes.object
 };
 
 export default TableDataCell;

src/components/Table/TableHead/TableHead.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import cx from "classnames";
 
 import "./TableHead.css";
@@ -17,9 +17,9 @@ const TableHead = ({ className, children, style, ...otherProps }) => {
 TableHead.defaultProps = {};
 
 TableHead.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  style: PropTypes.object
+  children: propTypes.node,
+  className: propTypes.string,
+  style: propTypes.object
 };
 
 export default TableHead;

src/components/Table/TableHeaderCell/TableHeaderCell.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import cx from "classnames";
 
 import "./TableHeaderCell.css";
@@ -25,10 +25,10 @@ TableHeaderCell.defaultProps = {
 };
 
 TableHeaderCell.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  onClick: PropTypes.func
+  children: propTypes.node,
+  className: propTypes.string,
+  style: propTypes.object,
+  onClick: propTypes.func
 };
 
 export default TableHeaderCell;

src/components/Table/TableRow/TableRow.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import cx from "classnames";
 
 import "./TableRow.css";
@@ -17,9 +17,9 @@ const TableRow = ({ className, children, style, ...otherProps }) => {
 TableRow.defaultProps = {};
 
 TableRow.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  style: PropTypes.object
+  children: propTypes.node,
+  className: propTypes.string,
+  style: propTypes.object
 };
 
 export default TableRow;

src/components/Tabs/Tab/Tab.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import cx from "classnames";
 
 import "./Tab.css";
@@ -37,11 +37,11 @@ const Tab = ({
 Tab.defaultProps = {};
 
 Tab.propTypes = {
-  value: PropTypes.number,
-  active: PropTypes.bool,
-  first: PropTypes.bool,
-  last: PropTypes.bool,
-  onClick: PropTypes.func,
-  children: PropTypes.node
+  value: propTypes.number,
+  active: propTypes.bool,
+  first: propTypes.bool,
+  last: propTypes.bool,
+  onClick: propTypes.func,
+  children: propTypes.node
 };
 export default Tab;

src/components/Tabs/TabBody/TabBody.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import cx from "classnames";
 import "./TabBody.css";
 
@@ -18,6 +18,6 @@ const TabBody = ({ children, className, style, ...otherProps }) => {
 TabBody.defaultProps = {};
 
 TabBody.propTypes = {
-  children: PropTypes.node
+  children: propTypes.node
 };
 export default TabBody;

src/components/Tabs/Tabs.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import cx from "classnames";
 
 import "./Tabs.css";
@@ -37,8 +37,8 @@ Tabs.defaultProps = {
 };
 
 Tabs.propTypes = {
-  value: PropTypes.number,
-  onChange: PropTypes.func,
-  children: PropTypes.node
+  value: propTypes.number,
+  onChange: propTypes.func,
+  children: propTypes.node
 };
 export default Tabs;

src/components/TextField/TextField.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 
 import styled from "styled-components";
 import { StyledCutout } from "../common";
@@ -77,14 +77,14 @@ TextField.defaultProps = {
   onChange: undefined
 };
 TextField.propTypes = {
-  className: PropTypes.string,
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  disabled: PropTypes.bool,
-  shadow: PropTypes.bool,
-  rows: PropTypes.number,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  type: PropTypes.oneOf(["text", "number"])
+  className: propTypes.string,
+  name: propTypes.string,
+  onChange: propTypes.func,
+  value: propTypes.oneOfType([propTypes.string, propTypes.number]).isRequired,
+  disabled: propTypes.bool,
+  shadow: propTypes.bool,
+  rows: propTypes.number,
+  width: propTypes.oneOfType([propTypes.string, propTypes.number]),
+  type: propTypes.oneOf(["text", "number"])
 };
 export default TextField;

src/components/Toolbar/Toolbar.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 import styled from "styled-components";
 
 const StyledToolbar = styled.div`
@@ -27,10 +27,10 @@ Toolbar.defaultProps = {
 };
 
 Toolbar.propTypes = {
-  style: PropTypes.object,
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  disablePadding: PropTypes.bool
+  style: propTypes.object,
+  className: propTypes.string,
+  children: propTypes.node.isRequired,
+  disablePadding: propTypes.bool
 };
 
 export default Toolbar;

src/components/Window/Window.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 
 import styled from "styled-components";
 import { createBorderStyles, createBoxStyles } from "../common";
@@ -24,9 +24,9 @@ Window.defaultProps = {
 };
 
 Window.propTypes = {
-  shadow: PropTypes.bool,
-  className: PropTypes.bool,
-  children: PropTypes.node
+  shadow: propTypes.bool,
+  className: propTypes.bool,
+  children: propTypes.node
 };
 
 export default Window;

src/components/WindowContent/WindowContent.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 
 import styled from "styled-components";
 import { padding } from "../common/theme.variables";
@@ -19,9 +19,9 @@ const WindowContent = ({ className, children, style, ...otherProps }) => {
 WindowContent.defaultProps = {};
 
 WindowContent.propTypes = {
-  className: PropTypes.string,
-  style: PropTypes.object,
-  children: PropTypes.node
+  className: propTypes.string,
+  style: propTypes.object,
+  children: propTypes.node
 };
 
 export default WindowContent;

src/components/WindowHeader/WindowHeader.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PropTypes from "prop-types";
+import propTypes from "prop-types";
 
 import styled from "styled-components";
 import { blockSizes, padding, colors } from "../common/theme.variables";
@@ -25,9 +25,9 @@ const WindowHeader = ({ className, style, children, ...otherProps }) => {
 };
 
 WindowHeader.propTypes = {
-  className: PropTypes.string,
-  style: PropTypes.object,
-  children: PropTypes.node
+  className: propTypes.string,
+  style: propTypes.object,
+  children: propTypes.node
 };
 
 export default WindowHeader;