Anchors, Buttons and Icon handling

package.json

@@ -84,6 +84,11 @@
         "dist"
     ],
     "jest": {
+        "collectCoverageFrom": [
+            "src/**/*.ts*",
+            "!src/**/*.stories.ts*",
+            "!src/tests/**/*"
+        ],
         "moduleNameMapper": {
             "react-spring": "<rootDir>/node_modules/react-spring/web.cjs",
             "react-spring/renderprops": "<rootDir>/node_modules/react-spring/renderprops.cjs"

src/atoms/buttons/button.test.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { act, render, wait, fireEvent } from "@testing-library/react";
+import { Button } from "./button";
+import faker from "faker";
+import { MemoryRouter } from "react-router-dom";
+import { ButtonSizes } from "../constants/button-sizes";
+import { ButtonStyles } from "../constants/button-styles";
+
+describe("button", () => {
+    it("when default props, renders button children", async () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { getByText } = render(<Button>{expected}</Button>);
+
+        // Assert
+        await wait(() => {
+            expect(getByText(expected)).not.toBeNull();
+        });
+    });
+
+    it("when cssClassName provided, adds provided className to button", () => {
+        // Arrange
+        const expected = faker.random.word();
+
+        // Act
+        const { container } = render(<Button cssClassName={expected}></Button>);
+
+        // Assert
+        expect(container.firstChild.className).toContain(expected);
+    });
+
+    it("when size provided, adds size className to button", () => {
+        // Arrange
+        const expected = ButtonSizes.Large;
+
+        // Act
+        const { container } = render(<Button size={expected}></Button>);
+
+        // Assert
+        expect(container.firstChild.className).toContain(`-${expected}`);
+    });
+
+    it(`when style of '${ButtonStyles.None}', has className of only 'none'`, () => {
+        // Arrange
+        const expected = ButtonStyles.None;
+
+        // Act
+        const { container } = render(<Button style={expected}></Button>);
+
+        // Assert
+        expect(container.firstChild.className).toBe(`-${expected}`);
+    });
+
+    it("when style provided, adds style className to button", () => {
+        // Arrange
+        const expected = ButtonStyles.Destructive;
+
+        // Act
+        const { container } = render(<Button style={expected}></Button>);
+
+        // Assert
+        expect(container.firstChild.className).toContain(`-${expected}`);
+    });
+});

src/atoms/buttons/button.tsx

@@ -2,6 +2,7 @@ import { ButtonSizes } from "../constants/button-sizes";
 import { ButtonStyles } from "../constants/button-styles";
 import { ButtonTypes } from "../constants/button-types";
 import React, { forwardRef } from "react";
+import { StringUtils } from "andculturecode-javascript-core";
 
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
@@ -54,22 +55,18 @@ const Button: React.RefForwardingComponent<
         value,
     } = props;
 
-    const classNames = ["c-button"];
-
-    if (style === ButtonStyles.None) {
-        classNames[0] = "";
-    }
+    let classNames = style === ButtonStyles.None ? [] : ["c-button"];
 
     if (size != null) {
-        classNames.push(size);
+        classNames.push(`-${size}`);
     }
 
     if (style != null) {
-        classNames.push(style);
+        classNames.push(`-${style}`);
     }
 
-    if (cssClassName != null && cssClassName.length > 0) {
-        classNames.push(cssClassName);
+    if (StringUtils.hasValue(cssClassName)) {
+        classNames.push(cssClassName!);
     }
 
     return (

src/atoms/constants/svg-icons.tsx → src/atoms/constants/svg-icons.ts

@@ -25,6 +25,10 @@ import { ReactComponent as Share } from "../../assets/icons/16px/Share.svg";
 import { ReactComponent as Trashcan } from "../../assets/icons/16px/Trashcan.svg";
 import { ReactComponent as WarningLarge } from "../../assets/icons/24px/Warning.svg";
 
+// -----------------------------------------------------------------------------------------
+// #region Constants
+// -----------------------------------------------------------------------------------------
+
 const SvgIcons: SvgIcon[] = [
     { type: Icons.Checkmark, base: Checkmark, large: CheckmarkLarge },
     { type: Icons.ChevronDown, base: ChevronDown, large: ChevronDownLarge },
@@ -44,4 +48,20 @@ const SvgIcons: SvgIcon[] = [
     { type: Icons.Warning, base: WarningLarge, large: WarningLarge },
 ];
 
-export { SvgIcons };
+// #endregion Constants
+
+// -----------------------------------------------------------------------------------------
+// #region Functions
+// -----------------------------------------------------------------------------------------
+
+const getSvgIconByType = (type: Icons) => SvgIcons.find((i) => i.type === type);
+
+// #endregion Functions
+
+// -----------------------------------------------------------------------------------------
+// #region Exports
+// -----------------------------------------------------------------------------------------
+
+export { getSvgIconByType, SvgIcons };
+
+// #endregion Exports