Add AnchorWithIcon component

Author: wintondeshong

src/atoms/anchors/anchor-with-icon.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import Faker from "faker";
+import { addDecorator } from "@storybook/react";
+import StoryRouter from "storybook-react-router";
+import { AnchorWithIcon } from "./anchor-with-icon";
+import { select, text } from "@storybook/addon-knobs";
+import { ButtonSizes } from "../constants/button-sizes";
+import { ButtonStyles } from "../constants/button-styles";
+import { Icons } from "../constants/icons";
+import { IconUtils } from "../../utilities/icon-utils";
+import { SvgIcons } from "../constants/svg-icons";
+
+addDecorator(StoryRouter());
+
+export default {
+    component: AnchorWithIcon,
+    title: "Atoms | Anchors / AnchorWithIcon",
+};
+
+export const anchorIconWithChevronDownIcon = () => {
+    IconUtils.register(SvgIcons);
+
+    return (
+        <AnchorWithIcon
+            accessibleText="Text for screen reader"
+            size={ButtonSizes.Medium}
+            style={ButtonStyles.Primary}
+            icon={Icons.Checkmark}
+            to="/test">
+            {Faker.lorem.words(5)}
+        </AnchorWithIcon>
+    );
+};
+
+export const anchorIconKnobs = () => {
+    IconUtils.register(SvgIcons);
+
+    return (
+        <AnchorWithIcon
+            accessibleText={text("accessibleText", "Text for screen reader")}
+            size={select("size", ButtonSizes, ButtonSizes.Medium)}
+            style={select("style", ButtonStyles, ButtonStyles.Primary)}
+            icon={select("icon", Icons, Icons.Checkmark)}
+            to="/test">
+            {text("text", "Anchor text")}
+        </AnchorWithIcon>
+    );
+};

src/atoms/anchors/anchor-with-icon.test.tsx

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

src/atoms/anchors/anchor-with-icon.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { ButtonSizes } from "../constants/button-sizes";
+import { ButtonStyles } from "../constants/button-styles";
+import { Icons } from "../constants/icons";
+import { Anchor } from "../anchors/anchor";
+import { Icon } from "../icons/icon";
+
+export interface AnchorWithIconProps {
+    accessibleText?: string;
+    children: any;
+    icon: keyof typeof Icons;
+    size?: ButtonSizes;
+    style?: ButtonStyles;
+    to: string;
+}
+
+const AnchorWithIcon: React.FC<AnchorWithIconProps> = (
+    props: AnchorWithIconProps
+) => {
+    const size: ButtonSizes =
+        props.size != null ? props.size : ButtonSizes.Medium;
+    const { accessibleText, icon, to } = props;
+
+    // Defaulting all AnchorWithIcon components to be styled as a button for now.
+    const cssClassNames = ["c-button", "-icon-left", size];
+
+    if (props.style != null) {
+        cssClassNames.push(props.style);
+    }
+
+    return (
+        <Anchor cssClassName={cssClassNames.join(" ")} to={to}>
+            <Icon type={icon} /> {props.children}
+            {// if
+            accessibleText != null && (
+                <span className="sr-only">{accessibleText}</span>
+            )}
+        </Anchor>
+    );
+};
+
+export { AnchorWithIcon };

src/index.ts

@@ -3,6 +3,7 @@
 // -----------------------------------------------------------------------------------------
 
 export { Anchor } from "./atoms/anchors/anchor";
+export { AnchorWithIcon } from "./atoms/anchors/anchor-with-icon";
 export { Button } from "./atoms/buttons/button";
 
 // Icons