Skip to content

Commit e48464f

Browse files
wintondeshongwintondeshong
authored
Merge pull request #37 from wintondeshong/master
Molecules > LinkCard and RootPortal
2 parents 2167920 + ac62926 commit e48464f

File tree

6 files changed

+169
-0
lines changed

6 files changed

+169
-0
lines changed

‎src/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export { HeadingPriority } from "./atoms/constants/heading-priority";
4040
export { IconSizes } from "./atoms/constants/icon-sizes";
4141
export { Icons } from "./atoms/constants/icons";
4242
export { InputTypes } from "./atoms/constants/input-types";
43+
export { LinkCardTypes } from "./molecules/constants/link-card-types";
4344
export { KeyboardKeys } from "./constants/keyboard-keys";
4445
export { ParagraphSizes } from "./atoms/constants/paragraph-sizes";
4546
export { SvgIcons } from "./atoms/constants/svg-icons";
@@ -65,7 +66,9 @@ export { Card } from "./molecules/cards/card";
6566
export { DropdownButton } from "./molecules/dropdown-button/dropdown-button";
6667
export { ErrorBanner } from "./molecules/errors/error-banner";
6768
export { Form } from "./molecules/forms/form";
69+
export { LinkCard } from "./molecules/link-card/link-card";
6870
export { RadioList } from "./molecules/lists/radio-list";
71+
export { RootPortal } from "./molecules/portals/root-portal";
6972
export { Tooltip } from "./molecules/tooltips/tooltip";
7073
export { UnorderedList } from "./molecules/lists/unordered-list";
7174

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export enum LinkCardTypes {
2+
Button = "button",
3+
Link = "link",
4+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from "react";
2+
import { text } from "@storybook/addon-knobs";
3+
import { LinkCard } from "./link-card";
4+
import { LinkCardTypes } from "../constants/link-card-types";
5+
import { MemoryRouter } from "react-router-dom";
6+
7+
export default {
8+
component: LinkCard,
9+
title: "Molecules | Cards / Link Cards",
10+
};
11+
12+
export const linkCardButton = () => (
13+
<LinkCard to="/" label="Link Card Label" type={LinkCardTypes.Button}>
14+
{text("content", "Link Card Content")}
15+
</LinkCard>
16+
);
17+
18+
export const linkCardDefault = () => (
19+
<MemoryRouter>
20+
<LinkCard to="/" label="Link Card Label">
21+
{text("content", "Link Card Content")}
22+
</LinkCard>
23+
</MemoryRouter>
24+
);

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
describe("LinkCard", () => {
2+
test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/36", () => {});
3+
});

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

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React from "react";
2+
import { LinkCardTypes } from "../constants/link-card-types";
3+
import { StringUtils } from "andculturecode-javascript-core";
4+
import { Anchor } from "../../atoms/anchors/anchor";
5+
import { Button } from "../../atoms/buttons/button";
6+
import { Icon } from "../../atoms/icons/icon";
7+
import { Icons } from "../../atoms/constants/icons";
8+
import { Paragraph } from "../../atoms/typography/paragraph";
9+
import { ParagraphSizes } from "../../atoms/constants/paragraph-sizes";
10+
11+
// -------------------------------------------------------------------------------------------------
12+
// #region Contants
13+
// -------------------------------------------------------------------------------------------------
14+
15+
const COMPONENT_CLASS = "c-link-card";
16+
17+
// #endregion Constants
18+
19+
// -------------------------------------------------------------------------------------------------
20+
// #region Interfaces
21+
// -------------------------------------------------------------------------------------------------
22+
23+
export interface LinkCardProps {
24+
children: any;
25+
iconType?: Icons;
26+
includeIcon?: boolean;
27+
label: string;
28+
onClick?: () => void;
29+
to?: any;
30+
type?: LinkCardTypes;
31+
}
32+
33+
// #endregion Interfaces
34+
35+
// -------------------------------------------------------------------------------------------------
36+
// #region Component
37+
// -------------------------------------------------------------------------------------------------
38+
39+
const LinkCard: React.FC<LinkCardProps> = (props: LinkCardProps) => {
40+
const cssClassNames = [COMPONENT_CLASS];
41+
if (props.includeIcon) {
42+
cssClassNames.push("-with-icon");
43+
}
44+
45+
const cssClassNamesFlat = cssClassNames.join(" ");
46+
const iconType = props.iconType ?? Icons.Lightbulb;
47+
const type = props.type ?? LinkCardTypes.Link;
48+
49+
const renderChildren = () => (
50+
<React.Fragment>
51+
{// if
52+
props.includeIcon && <Icon type={iconType} />}
53+
<div className={`${COMPONENT_CLASS}__content`}>
54+
<Paragraph size={ParagraphSizes.Small}>
55+
{props.children}
56+
</Paragraph>
57+
{// if
58+
StringUtils.hasValue(props.label) && (
59+
<div className={`${COMPONENT_CLASS}__label`}>
60+
<Paragraph size={ParagraphSizes.XSmall}>
61+
{props.label}
62+
</Paragraph>
63+
</div>
64+
)}
65+
</div>
66+
</React.Fragment>
67+
);
68+
69+
return (
70+
<div>
71+
{// if
72+
type === LinkCardTypes.Button && (
73+
<Button
74+
cssClassName={cssClassNamesFlat}
75+
onClick={props.onClick}>
76+
{renderChildren()}
77+
</Button>
78+
)}
79+
{// if
80+
type === LinkCardTypes.Link && (
81+
<Anchor cssClassName={cssClassNamesFlat} to={props.to}>
82+
{renderChildren()}
83+
</Anchor>
84+
)}
85+
</div>
86+
);
87+
};
88+
89+
// #endregion Component
90+
91+
// -------------------------------------------------------------------------------------------------
92+
// #region Exports
93+
// -------------------------------------------------------------------------------------------------
94+
95+
export { LinkCard };
96+
97+
// #endregion Exports

‎src/molecules/portals/root-portal.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React, { HTMLAttributes, PropsWithChildren } from "react";
2+
import ReactDOM from "react-dom";
3+
4+
// -------------------------------------------------------------------------------------------------
5+
// #region Interfaces
6+
// -------------------------------------------------------------------------------------------------
7+
8+
export interface RootPortalProps extends HTMLAttributes<HTMLDivElement> {}
9+
10+
// #endregion Interfaces
11+
12+
// -------------------------------------------------------------------------------------------------
13+
// #region Component
14+
// -------------------------------------------------------------------------------------------------
15+
16+
/**
17+
* Utility component to portal children to the root div.
18+
* @param props any HTML div attributes, and children
19+
*/
20+
const RootPortal: React.FC<PropsWithChildren<RootPortalProps>> = (
21+
props: PropsWithChildren<RootPortalProps>
22+
) => {
23+
const root = ReactDOM.findDOMNode(
24+
document.getElementById("root")
25+
) as Element;
26+
27+
return ReactDOM.createPortal(<div {...props}>{props.children}</div>, root);
28+
};
29+
30+
// #endregion Component
31+
32+
// -------------------------------------------------------------------------------------------------
33+
// #region Exports
34+
// -------------------------------------------------------------------------------------------------
35+
36+
export { RootPortal };
37+
38+
// #endregion Exports

0 commit comments

Comments
 (0)