Added Molecules / Card

Author: wintondeshong

src/index.ts

@@ -54,6 +54,15 @@ export * from "./atoms/interfaces/svg-icon";
 
 // #endregion Interfaces
 
+// -----------------------------------------------------------------------------------------
+// #region Molecules
+// -----------------------------------------------------------------------------------------
+
+export { AccessibleList } from "./molecules/accessible-list/accessible-list";
+export { Card } from "./molecules/cards/card";
+
+// #endregion Molecules
+
 // -----------------------------------------------------------------------------------------
 // #region Types
 // -----------------------------------------------------------------------------------------

src/molecules/cards/card.stories.tsx

@@ -0,0 +1,12 @@
+import { Card } from "./card";
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+
+export default {
+    component: Card,
+    title: "Molecules | Cards / Cards",
+};
+
+export const cardDefault = () => (
+    <Card label="Card Label">{text("content", "Card Content")}</Card>
+);

src/molecules/cards/card.test.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Card } from "./card";
+import faker from "faker";
+
+describe("Card", () => {
+    test("when default props, renders card", () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { getByText } = render(<Card label={expected} />);
+
+        // Assert
+        expect(getByText(expected)).not.toBeNull();
+    });
+
+    test("when default props with children, renders card", () => {
+        // Arrange
+        const label = faker.random.words();
+        const expected = faker.random.words();
+
+        // Act
+        const { getByText } = render(<Card label={label}>{expected}</Card>);
+
+        // Assert
+        expect(getByText(expected)).not.toBeNull();
+    });
+});

src/molecules/cards/card.tsx

@@ -0,0 +1,45 @@
+import React, { PropsWithChildren } from "react";
+import { Paragraph } from "../../atoms/typography/paragraph";
+
+// -------------------------------------------------------------------------------------------------
+// #region Constants
+// -------------------------------------------------------------------------------------------------
+
+const COMPONENT_CLASS = "c-card";
+
+// #endregion Constants
+
+// -------------------------------------------------------------------------------------------------
+// #region Interfaces
+// -------------------------------------------------------------------------------------------------
+
+export interface CardProps {
+    label: string;
+}
+
+// #endregion Interfaces
+
+// -------------------------------------------------------------------------------------------------
+// #region Components
+// -------------------------------------------------------------------------------------------------
+
+const Card: React.FC<CardProps> = (props: PropsWithChildren<CardProps>) => (
+    <div className={COMPONENT_CLASS}>
+        <div className={`${COMPONENT_CLASS}__content`}>
+            <Paragraph>{props.children}</Paragraph>
+        </div>
+        <div className={`${COMPONENT_CLASS}__label`}>
+            <Paragraph>{props.label}</Paragraph>
+        </div>
+    </div>
+);
+
+// #endregion Components
+
+// -------------------------------------------------------------------------------------------------
+// #region Exports
+// -------------------------------------------------------------------------------------------------
+
+export { Card };
+
+// #endregion Exports