Add atoms heading, heading-icon and paragraph

Author: wintondeshong

src/atoms/typography/heading-icon.stories.tsx

@@ -0,0 +1,37 @@
+import { HeadingPriority } from "../constants/heading-priority";
+import React from "react";
+import { CoreUtils } from "andculturecode-javascript-core";
+import { select } from "@storybook/addon-knobs";
+import { HeadingIcon } from "./heading-icon";
+import { Icons } from "../constants/icons";
+import { IconSizes } from "../constants/icon-sizes";
+
+export default {
+    component: HeadingIcon,
+    title: "Atoms | Typography / HeadingIcon",
+};
+
+export const headingIconDefault = () => (
+    <HeadingIcon type={Icons.Plus} priority={2} iconSize={IconSizes.Base}>
+        Voluptas Expedita Magnam
+    </HeadingIcon>
+);
+
+export const headingIconKnobs = () => {
+    const priorityOptions = CoreUtils.numericEnumToPojo(HeadingPriority);
+
+    return (
+        <HeadingIcon
+            type={select("type", Icons, Icons.Plus)}
+            priority={
+                select(
+                    "priority",
+                    priorityOptions,
+                    HeadingPriority.One
+                ) as HeadingPriority
+            }
+            iconSize={select("icon size", IconSizes, IconSizes.Large)}>
+            Voluptas Expedita Magnam
+        </HeadingIcon>
+    );
+};

src/atoms/typography/heading-icon.test.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+describe("HeadingIcon", () => {
+    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/14", () => {});
+});

src/atoms/typography/heading-icon.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { HeadingPriority } from "../constants/heading-priority";
+import { Heading } from "./heading";
+import { Icons } from "../constants/icons";
+import { IconSizes } from "../constants/icon-sizes";
+import { Icon } from "../icons/icon";
+
+// -------------------------------------------------------------------------------------------------
+// #region Interfaces
+// -------------------------------------------------------------------------------------------------
+
+export interface HeadingIconProps {
+    children?: any;
+    iconSize?: IconSizes;
+    priority?: HeadingPriority;
+    type: keyof typeof Icons;
+}
+
+// #endregion Interfaces
+
+// -------------------------------------------------------------------------------------------------
+// #region Component
+// -------------------------------------------------------------------------------------------------
+
+const HeadingIcon: React.FC<HeadingIconProps> = (props: HeadingIconProps) => {
+    return (
+        <div className="c-heading-icon">
+            <Icon type={props.type} size={props.iconSize} />
+            <Heading priority={props.priority}>{props.children}</Heading>
+        </div>
+    );
+};
+
+// #endregion Component
+
+// -------------------------------------------------------------------------------------------------
+// #region Exports
+// -------------------------------------------------------------------------------------------------
+
+export { HeadingIcon };
+
+// #endregion Exports

src/atoms/typography/heading.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Faker from "faker";
+import { select } from "@storybook/addon-knobs";
+import { HeadingPriority } from "../constants/heading-priority";
+import { Heading } from "./heading";
+import { CoreUtils } from "andculturecode-javascript-core";
+
+export default {
+    component: Heading,
+    title: "Atoms | Typography / Heading",
+};
+
+export const headingDefault = () => <Heading>{Faker.lorem.text()}</Heading>;
+
+export const headingKnobs = () => {
+    const options = CoreUtils.numericEnumToPojo(HeadingPriority);
+
+    return (
+        <Heading
+            priority={
+                select(
+                    "priority",
+                    options,
+                    HeadingPriority.One
+                ) as HeadingPriority
+            }>
+            Voluptas Expedita Magnam
+        </Heading>
+    );
+};

src/atoms/typography/heading.test.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+describe("Heading", () => {
+    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/14", () => {});
+});

src/atoms/typography/heading.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { HeadingPriority } from "../constants/heading-priority";
+
+// -----------------------------------------------------------------------------------------
+// #region Interfaces
+// -----------------------------------------------------------------------------------------
+
+export interface HeadingProps {
+    children?: any;
+    cssClassName?: string;
+    id?: string;
+    priority?: HeadingPriority;
+}
+
+// #endregion Interfaces
+
+// -----------------------------------------------------------------------------------------
+// #region Component
+// -----------------------------------------------------------------------------------------
+
+const Heading: React.FC<HeadingProps> = (props: HeadingProps) => {
+    let cssClassNames: Array<any> = [];
+
+    if (props.cssClassName) {
+        cssClassNames.push(props.cssClassName);
+    }
+
+    let componentProps = {
+        className: cssClassNames.join(" "),
+    };
+
+    return React.createElement(
+        `h${props.priority || HeadingPriority.Two}`,
+        componentProps,
+        props.children
+    );
+};
+
+// #endregion Component
+
+// -----------------------------------------------------------------------------------------
+// #region Exports
+// -----------------------------------------------------------------------------------------
+
+export { Heading };
+
+// #endregion Exports

src/atoms/typography/paragraph.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Paragraph, ParagraphSizes } from "./paragraph";
+import Faker from "faker";
+import { select } from "@storybook/addon-knobs";
+
+export default {
+    component: Paragraph,
+    title: "Atoms | Typography / Paragraph",
+};
+
+export const paragraphDefault = () => (
+    <Paragraph>{Faker.lorem.paragraph(10)}</Paragraph>
+);
+
+export const paragraphEmpty = () => <Paragraph></Paragraph>;
+
+export const paragraphWithStyles = () => (
+    <Paragraph cssClassName="-larger">{Faker.lorem.paragraph(4)}</Paragraph>
+);
+
+export const paragraphKnobs = () => (
+    <Paragraph size={select("size", ParagraphSizes, ParagraphSizes.Base)}>
+        {Faker.lorem.paragraph(10)}
+    </Paragraph>
+);

src/atoms/typography/paragraph.test.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+describe("Paragraph", () => {
+    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/15", () => {});
+});

src/atoms/typography/paragraph.tsx

@@ -0,0 +1,69 @@
+import React, { forwardRef } from "react";
+
+// -------------------------------------------------------------------------------------------------
+// #region Enums
+// -------------------------------------------------------------------------------------------------
+
+export enum ParagraphSizes {
+    XLarge = "-xlarge",
+    Large = "-large",
+    Base = "-base",
+    Small = "-small",
+    XSmall = "-xsmall",
+}
+
+// #endregion Enums
+
+// -------------------------------------------------------------------------------------------------
+// #region Interfaces
+// -------------------------------------------------------------------------------------------------
+
+export interface ParagraphProps {
+    children?: any;
+    cssClassName?: string;
+    dangerouslySetInnerHTML?: { __html: string };
+    id?: string;
+    ref?: React.RefObject<HTMLParagraphElement> | null;
+    size?: ParagraphSizes;
+}
+
+// #endregion Interfaces
+
+// -------------------------------------------------------------------------------------------------
+// #region Component
+// -------------------------------------------------------------------------------------------------
+
+const Paragraph: React.RefForwardingComponent<
+    HTMLParagraphElement,
+    ParagraphProps
+> = forwardRef(
+    (props: ParagraphProps, ref: React.Ref<HTMLParagraphElement>) => {
+        let cssClassNames: Array<any> = [];
+
+        if (props.cssClassName) {
+            cssClassNames.push(props.cssClassName);
+        }
+
+        if (props.size) {
+            cssClassNames.push(props.size);
+        }
+
+        return (
+            <p
+                className={cssClassNames.join(" ")}
+                dangerouslySetInnerHTML={props.dangerouslySetInnerHTML}
+                id={props.id}
+                ref={ref}>
+                {props.children}
+            </p>
+        );
+    }
+);
+
+// -------------------------------------------------------------------------------------------------
+// #region Exports
+// -------------------------------------------------------------------------------------------------
+
+export { Paragraph };
+
+// #endregion Exports

src/index.ts

@@ -19,6 +19,11 @@ export { TextArea } from "./atoms/forms/text-area";
 export { TextInput } from "./atoms/forms/text-input";
 export { TextInputIcon } from "./atoms/forms/text-input-icon";
 
+// Typography
+export { Heading } from "./atoms/typography/heading";
+export { HeadingIcon } from "./atoms/typography/heading-icon";
+export { Paragraph } from "./atoms/typography/paragraph";
+
 // #endregion Atoms
 
 // -----------------------------------------------------------------------------------------