added propTypes for components

src/__tests__/testing.tsx

@@ -145,3 +145,12 @@ export const validateOneOfPropType = (
     ...choices.map(value => ({ value, valid: true })),
     { value: "__UNKNOWN", valid: false },
   ]);
+
+export const validateStringPropType = (
+  propTypes: { [k: string]: PropTypes.Requireable<any> },
+  propName: string,
+) =>
+  validatePropType(propTypes, propName, [
+    { value: "string", valid: true },
+    { value: 1, valid: false },
+  ]);

src/components/breadcrumb/__tests__/breadcrumb-item.test.tsx

@@ -3,7 +3,11 @@ import React from "react";
 
 import { BreadcrumbItem } from "../breadcrumb-item";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+} from "@/__tests__/testing";
 
 describe("BreadcrumbItem component", () => {
   hasProperties(BreadcrumbItem, {
@@ -54,4 +58,10 @@ describe("BreadcrumbItem component", () => {
     const wrapper = Enzyme.shallow(<BreadcrumbItem active />);
     expect(wrapper.hasClass("is-active")).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = BreadcrumbItem;
+    testGenericPropTypes(propTypes);
+    validateBoolPropType(propTypes, "active");
+  });
 });

src/components/breadcrumb/__tests__/breadcrumb.test.tsx

@@ -9,7 +9,11 @@ import {
 } from "../breadcrumb";
 import { BreadcrumbItem } from "../breadcrumb-item";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateOneOfPropType,
+} from "@/__tests__/testing";
 
 describe("Breadcrumb component", () => {
   hasProperties(Breadcrumb, {
@@ -78,4 +82,12 @@ describe("Breadcrumb component", () => {
       expect(wrapper.find(".breadcrumb").hasClass(`is-${size}`)).toBe(true);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = Breadcrumb;
+    testGenericPropTypes(propTypes);
+    validateOneOfPropType(propTypes, "align", BREADCRUMB_ALIGNMENTS);
+    validateOneOfPropType(propTypes, "separator", BREADCRUMB_SEPARATORS);
+    validateOneOfPropType(propTypes, "size", BREADCRUMB_SIZES);
+  });
 });

src/components/breadcrumb/breadcrumb-item.tsx

@@ -1,22 +1,36 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
 export interface BreadcrumbItemModifierProps {
   active?: boolean;
 }
 
 export type BreadcrumbItemProps = HelpersProps & BreadcrumbItemModifierProps;
 
-export const BreadcrumbItem = forwardRefAs<BreadcrumbItemProps, "a">(
-  (props, ref) => {
-    const { as, active, ...rest } = transformHelpers(props);
-    return (
-      <li className={classNames({ "is-active": active }) || undefined}>
-        {React.createElement(as!, { ref, ...rest })}
-      </li>
-    );
-  },
-  { as: "a" },
+const propTypes = {
+  ...genericPropTypes,
+  active: PropTypes.bool,
+};
+
+export const BreadcrumbItem = Object.assign(
+  forwardRefAs<BreadcrumbItemProps, "a">(
+    (props, ref) => {
+      const { as, active, ...rest } = transformHelpers(props);
+      return (
+        <li className={classNames({ "is-active": active }) || undefined}>
+          {React.createElement(as!, { ref, ...rest })}
+        </li>
+      );
+    },
+    { as: "a" },
+  ),
+  { propTypes },
 );

src/components/breadcrumb/breadcrumb.tsx

@@ -1,7 +1,13 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { tuple } from "../../utils";
 import { BreadcrumbItem } from "./breadcrumb-item";
 
@@ -30,6 +36,13 @@ export type BreadcrumbProps = Prefer<
   React.HTMLAttributes<HTMLElement>
 >;
 
+const propTypes = {
+  ...genericPropTypes,
+  align: PropTypes.oneOf(BREADCRUMB_ALIGNMENTS),
+  separator: PropTypes.oneOf(BREADCRUMB_SEPARATORS),
+  size: PropTypes.oneOf(BREADCRUMB_SIZES),
+};
+
 export const Breadcrumb = Object.assign(
   forwardRefAs<BreadcrumbProps, "nav">(
     (props, ref) => {
@@ -55,5 +68,8 @@ export const Breadcrumb = Object.assign(
     },
     { as: "nav" },
   ),
-  { Item: BreadcrumbItem },
+  {
+    Item: BreadcrumbItem,
+    propTypes,
+  },
 );

src/components/card/__tests__/card-content.test.tsx

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

src/components/card/__tests__/card-footer-item.test.tsx

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

src/components/card/__tests__/card-footer.test.tsx

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

src/components/card/__tests__/card-header-icon.test.tsx

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

src/components/card/__tests__/card-header-title.test.tsx

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

src/components/card/__tests__/card-header.test.tsx

@@ -5,7 +5,7 @@ import { CardHeader } from "../card-header";
 import { CardHeaderIcon } from "../card-header-icon";
 import { CardHeaderTitle } from "../card-header-title";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("CardHeader component", () => {
   hasProperties(CardHeader, {
@@ -50,4 +50,9 @@ describe("CardHeader component", () => {
     const wrapper = Enzyme.shallow(<CardHeader className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = CardHeader;
+    testGenericPropTypes(propTypes);
+  });
 });

src/components/card/__tests__/card-image.test.tsx

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

src/components/card/__tests__/card.test.tsx

@@ -7,7 +7,7 @@ import { CardFooter } from "../card-footer";
 import { CardHeader } from "../card-header";
 import { CardImage } from "../card-image";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("Card component", () => {
   hasProperties(Card, {
@@ -54,4 +54,9 @@ describe("Card component", () => {
     const wrapper = Enzyme.shallow(<Card className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = Card;
+    testGenericPropTypes(propTypes);
+  });
 });

src/components/card/card-content.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 CardContentModifierProps = Partial<{ className: string }>;
+export type CardContentProps = HelpersProps;
 
-export type CardContentProps = HelpersProps & CardContentModifierProps;
-
-export const CardContent = forwardRefAs<CardContentProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("card-content", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const CardContent = Object.assign(
+  forwardRefAs<CardContentProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("card-content", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );

src/components/card/card-footer-item.tsx

@@ -1,16 +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 CardFooterItemModifierProps = Partial<{ className: string }>;
-export type CardFooterItemProps = HelpersProps & CardFooterItemModifierProps;
+export type CardFooterItemProps = HelpersProps;
 
-export const CardFooterItem = forwardRefAs<CardFooterItemProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("card-footer-item", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const CardFooterItem = Object.assign(
+  forwardRefAs<CardFooterItemProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("card-footer-item", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );