Merged heading-icon into heading component

Author: alexgetty

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

@@ -0,0 +1,16 @@
+@import "../../assets/scss/6-components/_component-base";
+
+/*------------------------------------*\
+  ANCHORS
+\*------------------------------------*/
+
+.c-heading {
+    display: flex;
+    align-items: center;
+
+    .c-icon {
+        margin-right: .25em;
+        width: 1em;
+        height: 1em;
+    }
+}

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

@@ -4,6 +4,7 @@ import { select } from "@storybook/addon-knobs";
 import { HeadingPriority } from "../constants/heading-priority";
 import { Heading } from "./heading";
 import { CoreUtils } from "andculturecode-javascript-core";
+import { Icons } from "../constants/icons";
 
 export default {
     component: Heading,
@@ -17,6 +18,13 @@ export const headingKnobs = () => {
 
     return (
         <Heading
+            icon={
+                select(
+                    "icon",
+                    Icons,
+                    Icons.Plus
+                ) as Icons
+            }
             priority={
                 select(
                     "priority",

src/atoms/typography/heading-icon.tsx

@@ -1,12 +1,18 @@
 import React, { PropsWithChildren } from "react";
 import { HeadingPriority } from "../constants/heading-priority";
+import { IconSizes } from "../constants/icon-sizes";
+import { Icons } from "../constants/icons";
+import { Icon } from "../icons/icon";
+import "./heading.scss";
 
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
 // -----------------------------------------------------------------------------------------
 
 export interface HeadingProps {
     cssClassName?: string;
+    icon?: Icons;
+    iconSize?: IconSizes;
     id?: string;
     priority?: HeadingPriority;
 }
@@ -20,7 +26,7 @@ export interface HeadingProps {
 const Heading: React.FC<HeadingProps> = (
     props: PropsWithChildren<HeadingProps>
 ) => {
-    let cssClassNames: Array<any> = [];
+    let cssClassNames: Array<any> = ["c-heading"];
 
     if (props.cssClassName) {
         cssClassNames.push(props.cssClassName);
@@ -30,10 +36,22 @@ const Heading: React.FC<HeadingProps> = (
         className: cssClassNames.join(" "),
     };
 
+    const content = (
+        <React.Fragment>
+            {// if
+                props.icon && (
+                    <Icon type={props.icon} />
+            )}
+            <span>
+                {props.children}
+            </span>
+        </React.Fragment>
+    )
+
     return React.createElement(
         `h${props.priority ?? HeadingPriority.Two}`,
         componentProps,
-        props.children
+        content
     );
 };
 

src/atoms/typography/heading.scss

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