Added Molecules LinkCard and RootPortal

Author: wintondeshong

src/index.ts

@@ -40,6 +40,7 @@ export { HeadingPriority } from "./atoms/constants/heading-priority";
 export { IconSizes } from "./atoms/constants/icon-sizes";
 export { Icons } from "./atoms/constants/icons";
 export { InputTypes } from "./atoms/constants/input-types";
+export { LinkCardTypes } from "./molecules/constants/link-card-types";
 export { KeyboardKeys } from "./constants/keyboard-keys";
 export { ParagraphSizes } from "./atoms/constants/paragraph-sizes";
 export { SvgIcons } from "./atoms/constants/svg-icons";
@@ -65,7 +66,9 @@ export { Card } from "./molecules/cards/card";
 export { DropdownButton } from "./molecules/dropdown-button/dropdown-button";
 export { ErrorBanner } from "./molecules/errors/error-banner";
 export { Form } from "./molecules/forms/form";
+export { LinkCard } from "./molecules/link-card/link-card";
 export { RadioList } from "./molecules/lists/radio-list";
+export { RootPortal } from "./molecules/portals/root-portal";
 export { Tooltip } from "./molecules/tooltips/tooltip";
 export { UnorderedList } from "./molecules/lists/unordered-list";
 

src/molecules/constants/link-card-types.ts

@@ -0,0 +1,4 @@
+export enum LinkCardTypes {
+    Button = "button",
+    Link = "link",
+}

src/molecules/link-card/link-card.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+import { LinkCard } from "./link-card";
+import { LinkCardTypes } from "../constants/link-card-types";
+import { MemoryRouter } from "react-router-dom";
+
+export default {
+    component: LinkCard,
+    title: "Molecules | Cards / Link Cards",
+};
+
+export const linkCardButton = () => (
+    <LinkCard to="/" label="Link Card Label" type={LinkCardTypes.Button}>
+        {text("content", "Link Card Content")}
+    </LinkCard>
+);
+
+export const linkCardDefault = () => (
+    <MemoryRouter>
+        <LinkCard to="/" label="Link Card Label">
+            {text("content", "Link Card Content")}
+        </LinkCard>
+    </MemoryRouter>
+);

src/molecules/link-card/link-card.test.tsx

@@ -0,0 +1,3 @@
+describe("LinkCard", () => {
+    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/36", () => {});
+});

src/molecules/link-card/link-card.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { LinkCardTypes } from "../constants/link-card-types";
+import { StringUtils } from "andculturecode-javascript-core";
+import { Anchor } from "../../atoms/anchors/anchor";
+import { Button } from "../../atoms/buttons/button";
+import { Icon } from "../../atoms/icons/icon";
+import { Icons } from "../../atoms/constants/icons";
+import { Paragraph } from "../../atoms/typography/paragraph";
+import { ParagraphSizes } from "../../atoms/constants/paragraph-sizes";
+
+// -------------------------------------------------------------------------------------------------
+// #region Contants
+// -------------------------------------------------------------------------------------------------
+
+const COMPONENT_CLASS = "c-link-card";
+
+// #endregion Constants
+
+// -------------------------------------------------------------------------------------------------
+// #region Interfaces
+// -------------------------------------------------------------------------------------------------
+
+export interface LinkCardProps {
+    children: any;
+    includeIcon?: boolean;
+    label: string;
+    to?: any;
+    type?: LinkCardTypes;
+    onClick?: () => void;
+}
+
+// #endregion Interfaces
+
+// -------------------------------------------------------------------------------------------------
+// #region Component
+// -------------------------------------------------------------------------------------------------
+
+const LinkCard: React.FC<LinkCardProps> = (props: LinkCardProps) => {
+    const cssClassNames = [COMPONENT_CLASS];
+    if (props.includeIcon) {
+        cssClassNames.push("-with-icon");
+    }
+    const cssClassNamesFlat = cssClassNames.join(" ");
+
+    const type = props.type ?? LinkCardTypes.Link;
+
+    const renderChildren = () => (
+        <React.Fragment>
+            {// if
+            props.includeIcon && <Icon type={Icons.Lightbulb} />}
+            <div className={`${COMPONENT_CLASS}__content`}>
+                <Paragraph size={ParagraphSizes.Small}>
+                    {props.children}
+                </Paragraph>
+                {// if
+                StringUtils.hasValue(props.label) && (
+                    <div className={`${COMPONENT_CLASS}__label`}>
+                        <Paragraph size={ParagraphSizes.XSmall}>
+                            {props.label}
+                        </Paragraph>
+                    </div>
+                )}
+            </div>
+        </React.Fragment>
+    );
+
+    return (
+        <div>
+            {// if
+            type === LinkCardTypes.Button && (
+                <Button
+                    cssClassName={cssClassNamesFlat}
+                    onClick={props.onClick}>
+                    {renderChildren()}
+                </Button>
+            )}
+            {// if
+            type === LinkCardTypes.Link && (
+                <Anchor cssClassName={cssClassNamesFlat} to={props.to}>
+                    {renderChildren()}
+                </Anchor>
+            )}
+        </div>
+    );
+};
+
+// #endregion Component
+
+// -------------------------------------------------------------------------------------------------
+// #region Exports
+// -------------------------------------------------------------------------------------------------
+
+export { LinkCard };
+
+// #endregion Exports

src/molecules/portals/root-portal.tsx

@@ -0,0 +1,38 @@
+import React, { HTMLAttributes, PropsWithChildren } from "react";
+import ReactDOM from "react-dom";
+
+// -------------------------------------------------------------------------------------------------
+// #region Interfaces
+// -------------------------------------------------------------------------------------------------
+
+export interface RootPortalProps extends HTMLAttributes<HTMLDivElement> {}
+
+// #endregion Interfaces
+
+// -------------------------------------------------------------------------------------------------
+// #region Component
+// -------------------------------------------------------------------------------------------------
+
+/**
+ * Utility component to portal children to the root div.
+ * @param props any HTML div attributes, and children
+ */
+const RootPortal: React.FC<PropsWithChildren<RootPortalProps>> = (
+    props: PropsWithChildren<RootPortalProps>
+) => {
+    const root = ReactDOM.findDOMNode(
+        document.getElementById("root")
+    ) as Element;
+
+    return ReactDOM.createPortal(<div {...props}>{props.children}</div>, root);
+};
+
+// #endregion Component
+
+// -------------------------------------------------------------------------------------------------
+// #region Exports
+// -------------------------------------------------------------------------------------------------
+
+export { RootPortal };
+
+// #endregion Exports