Changes per PR review from brandon

Author: wintondeshong

src/assets/scss/6-components/molecules/_card.scss

@@ -31,7 +31,7 @@
             @include font-style(
                 $font-primary,
                 "small",
-                get-color("neutral", "dark-text")
+                get-color-neutral("dark-text")
             );
             @include padding(0, 16px);
             @include margin(0);

src/atoms/forms/radio-button-input.tsx

@@ -6,7 +6,6 @@ const COMPONENT_CLASS = "c-radio";
 export interface RadioButtonProps {
     autofocus?: boolean;
     checked: boolean;
-    children?: React.ReactNode;
     cssClassName?: string;
     id: string;
     label: string;
@@ -20,45 +19,50 @@ export interface RadioButtonProps {
 const RadioButton: React.RefForwardingComponent<
     HTMLInputElement,
     RadioButtonProps
-> = forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {
-    const {
-        autofocus,
-        checked,
-        children,
-        cssClassName,
-        id,
-        label,
-        name,
-        onCheck,
-        onClick,
-        value,
-    } = props;
+> = forwardRef(
+    (
+        props: React.PropsWithChildren<RadioButtonProps>,
+        ref: React.Ref<HTMLInputElement>
+    ) => {
+        const {
+            autofocus,
+            checked,
+            children,
+            cssClassName,
+            id,
+            label,
+            name,
+            onCheck,
+            onClick,
+            value,
+        } = props;
 
-    const handleChecked = (e: React.ChangeEvent<HTMLInputElement>): void =>
-        onCheck?.(e);
-    const handleClick = (): void => onClick?.();
+        const handleChecked = (e: React.ChangeEvent<HTMLInputElement>): void =>
+            onCheck?.(e);
+        const handleClick = (): void => onClick?.();
 
-    const cssChecked = checked ? "-selected" : "";
+        const cssChecked = checked ? "-selected" : "";
 
-    return (
-        <div className={`${COMPONENT_CLASS} ${cssChecked} ${cssClassName}`}>
-            <input
-                autoFocus={autofocus}
-                checked={checked}
-                id={id}
-                name={name}
-                onChange={handleChecked}
-                onClick={handleClick}
-                ref={ref}
-                type="radio"
-                value={value}
-            />
-            <label htmlFor={id}>
-                {label}
-                {children}
-            </label>
-        </div>
-    );
-});
+        return (
+            <div className={`${COMPONENT_CLASS} ${cssChecked} ${cssClassName}`}>
+                <input
+                    autoFocus={autofocus}
+                    checked={checked}
+                    id={id}
+                    name={name}
+                    onChange={handleChecked}
+                    onClick={handleClick}
+                    ref={ref}
+                    type="radio"
+                    value={value}
+                />
+                <label htmlFor={id}>
+                    {label}
+                    {children}
+                </label>
+            </div>
+        );
+    }
+);
 
 export { RadioButton };

src/molecules/dropdown-button/dropdown-button.tsx

@@ -8,8 +8,10 @@ import { ButtonStyles } from "../../atoms/constants/button-styles";
 // #region Constants
 // -------------------------------------------------------------------------------------------------
 
+const BUTTON_CLASS = "c-button";
 const COMPONENT_CLASS = "c-dropdown-button";
 const COMPONENT_LIST_CLASS = `${COMPONENT_CLASS}__list`;
+const COMPONENT_LIST_ITEM_CLASS = `${COMPONENT_LIST_CLASS}__item`;
 
 // #endregion Constants
 
@@ -24,10 +26,10 @@ export interface DropdownItem {
 
 export interface DropdownButtonProps {
     buttonClassName?: string;
+    buttonContents: string | React.ReactNode | React.ReactNodeArray;
     menuItems: Array<DropdownItem>;
     size?: ButtonSizes;
     style?: ButtonStyles;
-    buttonContents: string | React.ReactNode | React.ReactNodeArray;
 }
 
 // #endregion Interfaces
@@ -41,7 +43,7 @@ const DropdownButton: React.FC<DropdownButtonProps> = (
 ) => {
     const { buttonClassName, menuItems, buttonContents, size, style } = props;
 
-    const classNames = ["c-button", COMPONENT_CLASS];
+    const classNames = [BUTTON_CLASS, COMPONENT_CLASS];
 
     if (buttonClassName != null) {
         classNames.push(buttonClassName);
@@ -63,9 +65,9 @@ const DropdownButton: React.FC<DropdownButtonProps> = (
             <MenuList className={COMPONENT_LIST_CLASS}>
                 {menuItems.map((item: DropdownItem) => (
                     <MenuItem
+                        className={COMPONENT_LIST_ITEM_CLASS}
                         key={uuid.v4()}
-                        onSelect={item.onSelect}
-                        className={`${COMPONENT_LIST_CLASS}__item`}>
+                        onSelect={item.onSelect}>
                         {item.component}
                     </MenuItem>
                 ))}

src/molecules/form-fields/checkbox-form-field.stories.tsx

@@ -10,8 +10,8 @@ export default {
 export const checkboxFormFieldKnobs = () => (
     <CheckboxFormField
         checked={boolean("Checked", false)}
-        label={text("Label", "Remember Me")}
         disabled={boolean("Disabled", false)}
+        label={text("Label", "Remember Me")}
         onChange={() => {}}
     />
 );

src/molecules/form-fields/password-form-field.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import uuid from "uuid";
 import { InputProperties } from "../../atoms/interfaces/input-properties";
 import { PasswordInput } from "../../atoms/forms/password-input";
+import { StringUtils } from "andculturecode-javascript-core";
 
 // -----------------------------------------------------------------------------------------
 // #region Constants
@@ -50,7 +51,7 @@ const PasswordFormField: React.FC<PasswordFormFields> = (
 
     const [isVisible, setIsVisible] = useState<boolean>(false);
     const cssIsValid = isValid ? "" : "-invalid";
-    const disableShowHide = value == null || value === "" || disabled;
+    const disableShowHide = StringUtils.isEmpty(value) || disabled;
     const fieldId = uuid.v4();
     const passwordShowHideLabel = isVisible ? "Hide" : "Show";
 

src/molecules/lists/unordered-list.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Icons } from "../../atoms/constants/icons";
+import { StringUtils } from "andculturecode-javascript-core";
 
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
@@ -8,8 +9,8 @@ import { Icons } from "../../atoms/constants/icons";
 export interface UnorderedListProps {
     cssClassName?: string;
     id?: string;
+    listIcon?: Icons;
     listItems: Array<any>;
-    listIcon?: keyof typeof Icons;
 }
 
 // #endregion Interfaces
@@ -21,15 +22,15 @@ export interface UnorderedListProps {
 const UnorderedList: React.FC<UnorderedListProps> = (
     props: UnorderedListProps
 ) => {
-    let cssClassNames: Array<any> = [];
+    let cssClassNames: string[] = [];
 
-    if (props.cssClassName) {
-        cssClassNames.push(props.cssClassName);
+    if (StringUtils.hasValue(props.cssClassName)) {
+        cssClassNames.push(props.cssClassName!);
     }
 
-    if (props.listIcon) {
+    if (props.listIcon != null) {
         cssClassNames.push("-has-icon");
-        cssClassNames.push(`${props.listIcon}`);
+        cssClassNames.push(props.listIcon);
     }
 
     return (