basic formatting revisions based on PR feedback

Author: alexgetty

src/atoms/anchors/anchor.stories.tsx

@@ -12,21 +12,16 @@ export default {
     component: Anchor,
 };
 
-export const plain = () => (
-    <Anchor to="/test">{Faker.lorem.words(5)}</Anchor>
-);
+export const Default = () => <Anchor to="/test">{Faker.lorem.words(5)}</Anchor>;
 
-export const icon = () => (
-    <Anchor
-        icon    = {Icons.Share}
-        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>
-)
+export const External = () => (
+    <Anchor external={true} target="_blank" to="https://www.humanetech.com/">
+        Center For Humane Technology
+    </Anchor>
+);

src/atoms/anchors/anchor.tsx

@@ -15,7 +15,7 @@ export interface AnchorProps {
     children?: any;
     cssClassName?: string;
     external?: boolean;
-    icon?: keyof typeof Icons;
+    icon?: Icons;
     id?: string;
     onClick?: (e: React.MouseEvent<HTMLElement>, value?: any) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLAnchorElement>) => void;
@@ -67,12 +67,10 @@ const Anchor: React.RefForwardingComponent<Link, AnchorProps> = forwardRef(
         const content = (
             <React.Fragment>
                 {// if
-                    props.icon && (
-                        <Icon type={props.icon} />
-                )}
+                props.icon != null && <Icon type={props.icon} />}
                 {props.children}
             </React.Fragment>
-        )
+        );
 
         if (props.external === true) {
             return (

src/atoms/forms/text-input.test.tsx

@@ -65,16 +65,20 @@ describe("TextInput", () => {
 
     test("when icon prop has value, renders input with icon tag", () => {
         // Arrange
+        const dataTestId = "dataTestId";
         const icon = Icons.Checkmark;
 
         // Act
-        const { container } = render(
-            <TextInput icon={icon} onChange={() => {}} id={uuid()} />
+        const { getByTestId } = render(
+            <TextInput
+                icon={icon}
+                id={uuid()}
+                onChange={() => {}}
+                testId={dataTestId}
+            />
         );
 
-        const result = container.getElementsByClassName("c-text-input")[0].firstChild.nodeName;
-
         // Assert
-        expect(result).toBe("I");
+        expect(getByTestId(dataTestId).firstChild.nodeName).toBe("I");
     });
 });

src/atoms/forms/text-input.tsx

@@ -47,16 +47,16 @@ const TextInput: React.FC<TextInputProps> = (props: TextInputProps) => {
 
     const maxLength = props.maxLength != null ? props.maxLength : 20;
 
-    if (icon) {
+    if (icon != null) {
         classNames.push("-icon");
     }
 
     return (
         <div className={classNames.join(" ")}>
             {// if
-                icon &&
+            icon != null && (
                 <Icon type={icon} size={iconSize ?? IconSizes.Large} />
-            }
+            )}
             <input
                 aria-labelledby={ariaLabelledBy}
                 data-testid={testId}

src/atoms/typography/heading.scss

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

src/atoms/typography/heading.stories.tsx

@@ -18,20 +18,8 @@ export const headingKnobs = () => {
 
     return (
         <Heading
-            icon={
-                select(
-                    "icon",
-                    Icons,
-                    Icons.Plus
-                ) as Icons
-            }
-            priority={
-                select(
-                    "priority",
-                    options,
-                    HeadingPriority.One
-                ) as HeadingPriority
-            }>
+            icon={select("icon", Icons, Icons.Plus)}
+            priority={select("priority", options, HeadingPriority.One)}>
             Voluptas Expedita Magnam
         </Heading>
     );

src/atoms/typography/heading.tsx

@@ -39,14 +39,10 @@ const Heading: React.FC<HeadingProps> = (
     const content = (
         <React.Fragment>
             {// if
-                props.icon && (
-                    <Icon type={props.icon} />
-            )}
-            <span>
-                {props.children}
-            </span>
+            props.icon != null && <Icon type={props.icon} />}
+            <span>{props.children}</span>
         </React.Fragment>
-    )
+    );
 
     return React.createElement(
         `h${props.priority ?? HeadingPriority.Two}`,

src/molecules/checkbox-button/checkbox-button.tsx

@@ -2,7 +2,7 @@ import { InputTypes } from "../../atoms/constants/input-types";
 import React from "react";
 import { Icon } from "../../atoms/icons/icon";
 import { Icons } from "../../atoms/constants/icons";
-import "../checkbox-input/checkbox-input.scss"; // Todo: Remove dependency on external styles
+import "../checkbox-input/checkbox-input.scss";
 import "./checkbox-button.scss";
 
 // -----------------------------------------------------------------------------------------

src/molecules/radio-input/radio-input.scss

@@ -1,5 +1,5 @@
 @import "../../assets/scss/6-components/_component-base";
-@import "../../Atoms/buttons/button.scss"; // Todo: Remove this dependency
+@import "../../atoms/buttons/button.scss";
 
 .c-radio {
     @include padding(16px);