Merged anchor-with-icon into base anchor component

Author: alexgetty

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

@@ -5,6 +5,9 @@
 \*------------------------------------*/
 
 a {
+    display: flex;
+    align-items: center;
+
     @include font-style(
         $font-primary,
         "small",
@@ -13,27 +16,15 @@ a {
         16px
     );
 
-    &.c-button {
-        display: inline-block;
-        text-decoration: none;
-
-        &.-icon {
-            text-align: center;
-
-            .c-icon {
-                margin-top: calc(50% - 6px);
-
-                &.-large {
-                    margin-top: calc(50% - 12px);
-                }
-            }
-        }
-    }
-
     &.-secondary {
         color: get-color("links", "secondary");
     }
+
     &.-disabled {
         cursor: not-allowed;
     }
+
+    .c-icon {
+        margin-right: .25em;
+    }
 }

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

@@ -3,14 +3,30 @@ import { Anchor } from "./anchor";
 import Faker from "faker";
 import { addDecorator } from "@storybook/react";
 import StoryRouter from "storybook-react-router";
+import { Icons } from "../constants/icons";
 
 addDecorator(StoryRouter());
 
 export default {
-    title: "Atoms | Anchors / Anchor",
+    title: "Atoms | Anchors",
     component: Anchor,
 };
 
-export const anchorDefault = () => (
+export const plain = () => (
     <Anchor to="/test">{Faker.lorem.words(5)}</Anchor>
 );
+
+export const icon = () => (
+    <Anchor
+        icon    = {Icons.Share}
+        to      = "/test"
+    >{Faker.lorem.words(5)}</Anchor>
+)
+
+export const external = () => (
+    <Anchor
+        external    = { true }
+        target      = "_blank"
+        to          = "https://www.humanetech.com/"
+    >Center For Humane Technology</Anchor>
+)

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

@@ -1,5 +1,7 @@
 import { Link } from "react-router-dom";
 import React, { forwardRef } from "react";
+import { Icons } from "../constants/icons";
+import { Icon } from "../icons/icon";
 import "./anchor.scss";
 
 /*
@@ -13,6 +15,7 @@ export interface AnchorProps {
     children?: any;
     cssClassName?: string;
     external?: boolean;
+    icon?: keyof typeof Icons;
     id?: string;
     onClick?: (e: React.MouseEvent<HTMLElement>, value?: any) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLAnchorElement>) => void;
@@ -49,7 +52,7 @@ const Anchor: React.RefForwardingComponent<Link, AnchorProps> = forwardRef(
             relAttribute = "noopener noreferrer";
         }
 
-        const commonProps = {
+        const attributes = {
             "aria-label": props.ariaLabel,
             className: cssClassNames.join(" "),
             id: props.id,
@@ -61,17 +64,27 @@ const Anchor: React.RefForwardingComponent<Link, AnchorProps> = forwardRef(
             onKeyDown: props.onKeyDown,
         };
 
+        const content = (
+            <React.Fragment>
+                {// if
+                    props.icon && (
+                        <Icon type={props.icon} />
+                )}
+                {props.children}
+            </React.Fragment>
+        )
+
         if (props.external === true) {
             return (
-                <a href={props.to} {...commonProps}>
-                    {props.children}
+                <a href={props.to} {...attributes}>
+                    {content}
                 </a>
             );
         }
 
         return (
-            <Link to={props.to} {...commonProps}>
-                {props.children}
+            <Link to={props.to} {...attributes}>
+                {content}
             </Link>
         );
     }

src/atoms/anchors/anchor.scss

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