added propTypes for layaout

src/__tests__/__snapshots__/index.test.ts.snap

@@ -883,6 +883,30 @@ Object {
     "defaultProps": Object {
       "as": "div",
     },
+    "propTypes": Object {
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+    },
     "render": [Function],
   },
   "Generic": Object {
@@ -986,25 +1010,124 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Foot": Object {
       "$$typeof": Symbol(react.forward_ref),
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Head": Object {
       "$$typeof": Symbol(react.forward_ref),
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "defaultProps": Object {
       "as": "section",
     },
+    "propTypes": Object {
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "color": [Function],
+      "gradient": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "size": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+    },
     "render": [Function],
   },
   "Highlight": Object {
@@ -1725,6 +1848,31 @@ Object {
     "defaultProps": Object {
       "as": "section",
     },
+    "propTypes": Object {
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "size": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+    },
     "render": [Function],
   },
   "Select": Object {

src/layout/footer/__tests__/footer.test.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import { Footer } from "../footer";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("Footer component", () => {
   hasProperties(Footer, {
@@ -46,4 +46,9 @@ describe("Footer component", () => {
     const wrapper = Enzyme.shallow(<Footer className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = Footer;
+    testGenericPropTypes(propTypes);
+  });
 });

src/layout/footer/footer.tsx

@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type FooterModifierProps = Partial<{ className: string }>;
+export type FooterProps = HelpersProps;
 
-export type FooterProps = HelpersProps & FooterModifierProps;
-
-export const Footer = forwardRefAs<FooterProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("footer", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const Footer = Object.assign(
+  forwardRefAs<FooterProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("footer", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );

src/layout/hero/__tests__/hero-body.test.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import { HeroBody } from "../hero-body";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("HeroBody component", () => {
   hasProperties(HeroBody, {
@@ -46,4 +46,9 @@ describe("HeroBody component", () => {
     const wrapper = Enzyme.shallow(<HeroBody className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = HeroBody;
+    testGenericPropTypes(propTypes);
+  });
 });

src/layout/hero/__tests__/hero-foot.test.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import { HeroFoot } from "../hero-foot";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("HeroFoot component", () => {
   hasProperties(HeroFoot, {
@@ -46,4 +46,9 @@ describe("HeroFoot component", () => {
     const wrapper = Enzyme.shallow(<HeroFoot className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = HeroFoot;
+    testGenericPropTypes(propTypes);
+  });
 });

src/layout/hero/__tests__/hero-head.test.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import { HeroHead } from "../hero-head";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("HeroHead component", () => {
   hasProperties(HeroHead, {
@@ -46,4 +46,9 @@ describe("HeroHead component", () => {
     const wrapper = Enzyme.shallow(<HeroHead className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = HeroHead;
+    testGenericPropTypes(propTypes);
+  });
 });

src/layout/hero/__tests__/hero.test.tsx

@@ -7,7 +7,12 @@ import { HeroBody } from "../hero-body";
 import { HeroFoot } from "../hero-foot";
 import { HeroHead } from "../hero-head";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+  validateOneOfPropType,
+} from "@/__tests__/testing";
 
 describe("Hero component", () => {
   hasProperties(Hero, {
@@ -74,4 +79,12 @@ describe("Hero component", () => {
       expect(wrapper.hasClass(`is-${size}`)).toBe(true);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = Hero;
+    testGenericPropTypes(propTypes);
+    validateOneOfPropType(propTypes, "color", COLORS);
+    validateBoolPropType(propTypes, "gradient");
+    validateOneOfPropType(propTypes, "size", HERO_SIZES);
+  });
 });

src/layout/hero/hero-body.tsx

@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type HeroBodyModifierProps = Partial<{ className: string }>;
+export type HeroBodyProps = HelpersProps;
 
-export type HeroBodyProps = HelpersProps & HeroBodyModifierProps;
-
-export const HeroBody = forwardRefAs<HeroBodyProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("hero-body", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const HeroBody = Object.assign(
+  forwardRefAs<HeroBodyProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("hero-body", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );

src/layout/hero/hero-foot.tsx

@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type HeroFootModifierProps = Partial<{ className: string }>;
+export type HeroFootProps = HelpersProps;
 
-export type HeroFootProps = HelpersProps & HeroFootModifierProps;
-
-export const HeroFoot = forwardRefAs<HeroFootProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("hero-foot", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const HeroFoot = Object.assign(
+  forwardRefAs<HeroFootProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("hero-foot", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );