Issue #84 Standardize Atom & Molecule classification

Reclassifies numerous Atoms as Molecules based on their HTML structure. All Atoms with more than 1 HTML element, with the exception of icons and wrappers for icon positioning, have been moved to the Molecules layer. Additionally, there were a handful of icon-variant components that were merged into their base component with the ability to optionally add an icon prop.

Author: brandongregoryscott

docs/interfaces/radioinputprops.md

@@ -0,0 +1,102 @@
+[andculturecode-javascript-react-components](../README.md) › [RadioInputProps](radioinputprops.md)
+
+# Interface: RadioInputProps
+
+## Hierarchy
+
+* **RadioInputProps**
+
+## Index
+
+### Properties
+
+* [autofocus](radioinputprops.md#optional-autofocus)
+* [checked](radioinputprops.md#checked)
+* [cssClassName](radioinputprops.md#optional-cssclassname)
+* [id](radioinputprops.md#id)
+* [label](radioinputprops.md#label)
+* [name](radioinputprops.md#name)
+* [onCheck](radioinputprops.md#optional-oncheck)
+* [onClick](radioinputprops.md#optional-onclick)
+* [ref](radioinputprops.md#optional-ref)
+* [value](radioinputprops.md#optional-value)
+
+## Properties
+
+### `Optional` autofocus
+
+• **autofocus**? : *undefined | false | true*
+
+*Defined in [src/molecules/radio-input/radio-input.tsx:9](https://github.com/phess101/AndcultureCode.JavaScript.React.Components/blob/5fd6ba2/src/molecules/radio-input/radio-input.tsx#L9)*
+
+___
+
+###  checked
+
+• **checked**: *boolean*
+
+*Defined in [src/molecules/radio-input/radio-input.tsx:10](https://github.com/phess101/AndcultureCode.JavaScript.React.Components/blob/5fd6ba2/src/molecules/radio-input/radio-input.tsx#L10)*
+
+___
+
+### `Optional` cssClassName
+
+• **cssClassName**? : *undefined | string*
+
+*Defined in [src/molecules/radio-input/radio-input.tsx:11](https://github.com/phess101/AndcultureCode.JavaScript.React.Components/blob/5fd6ba2/src/molecules/radio-input/radio-input.tsx#L11)*
+
+___
+
+###  id
+
+• **id**: *string*
+
+*Defined in [src/molecules/radio-input/radio-input.tsx:12](https://github.com/phess101/AndcultureCode.JavaScript.React.Components/blob/5fd6ba2/src/molecules/radio-input/radio-input.tsx#L12)*
+
+___
+
+###  label
+
+• **label**: *string*
+
+*Defined in [src/molecules/radio-input/radio-input.tsx:13](https://github.com/phess101/AndcultureCode.JavaScript.React.Components/blob/5fd6ba2/src/molecules/radio-input/radio-input.tsx#L13)*
+
+___
+
+###  name
+
+• **name**: *string*
+
+*Defined in [src/molecules/radio-input/radio-input.tsx:14](https://github.com/phess101/AndcultureCode.JavaScript.React.Components/blob/5fd6ba2/src/molecules/radio-input/radio-input.tsx#L14)*
+
+___
+
+### `Optional` onCheck
+
+• **onCheck**? : *undefined | function*
+
+*Defined in [src/molecules/radio-input/radio-input.tsx:15](https://github.com/phess101/AndcultureCode.JavaScript.React.Components/blob/5fd6ba2/src/molecules/radio-input/radio-input.tsx#L15)*
+
+___
+
+### `Optional` onClick
+
+• **onClick**? : *undefined | function*
+
+*Defined in [src/molecules/radio-input/radio-input.tsx:16](https://github.com/phess101/AndcultureCode.JavaScript.React.Components/blob/5fd6ba2/src/molecules/radio-input/radio-input.tsx#L16)*
+
+___
+
+### `Optional` ref
+
+• **ref**? : *RefObject‹HTMLInputElement› | null*
+
+*Defined in [src/molecules/radio-input/radio-input.tsx:17](https://github.com/phess101/AndcultureCode.JavaScript.React.Components/blob/5fd6ba2/src/molecules/radio-input/radio-input.tsx#L17)*
+
+___
+
+### `Optional` value
+
+• **value**? : *string | string[] | number*
+
+*Defined in [src/molecules/radio-input/radio-input.tsx:18](https://github.com/phess101/AndcultureCode.JavaScript.React.Components/blob/5fd6ba2/src/molecules/radio-input/radio-input.tsx#L18)*

package.json

@@ -24,7 +24,6 @@
         "@reach/menu-button": "0.11.2",
         "@tippyjs/react": "4.0.2",
         "@types/react": "16.9.11",
-        "@types/react-beautiful-dnd": "13.0.0",
         "@types/react-dom": "16.9.3",
         "@types/react-router-dom": "5.1.5",
         "andculturecode-javascript-core": "0.1.5",
@@ -35,7 +34,6 @@
         "i18next": "19.4.5",
         "immutable": "4.0.0-rc.12",
         "react": "16.13.1",
-        "react-beautiful-dnd": "13.0.0",
         "react-dom": "16.13.1",
         "react-i18next": "11.6.0",
         "react-router-dom": "5.1.2",

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,25 @@ 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 = () => (
-    <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 External = () => (
+    <Anchor external={true} target="_blank" to="https://www.humanetech.com/">
+        Center For Humane Technology
+    </Anchor>
 );

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

@@ -3,6 +3,7 @@ import { act, render, wait, fireEvent } from "@testing-library/react";
 import { Anchor } from "./anchor";
 import faker from "faker";
 import { MemoryRouter } from "react-router-dom";
+import { Icons } from "../constants/icons";
 
 describe("Anchor", () => {
     it("when default props, renders link with correct url", async () => {
@@ -105,4 +106,24 @@ describe("Anchor", () => {
             ).not.toBeNull();
         });
     });
+
+    it("when icon prop is set, renders link with icon tag", async () => {
+        // Arrange
+        const expected = `/some/random/path/${faker.random.word()}`;
+        const icon = Icons.Close;
+
+        // Act
+        const { container } = render(
+            <MemoryRouter>
+                <Anchor icon={icon} to={expected}>Link</Anchor>
+            </MemoryRouter>
+        );
+
+        const result = container.getElementsByTagName("a")[0].firstChild.nodeName;
+
+        // Assert
+        await wait(() => {
+            expect(result).toBe("I");
+        });
+    });
 });