Self-review - clean up card, and radio-list styles; Clean up dropdown button

Author: wintondeshong

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

@@ -3,10 +3,10 @@
     box-shadow: 0px 3px 10px rgba(0, 26, 57, 0.2);
 
     &__content {
+        @include padding(16px);
         background-color: #425163;
         height: 147px;
         border-radius: 5px 5px 0 0;
-        @include padding(16px);
         position: relative;
 
         p {

src/assets/scss/6-components/molecules/_radio-list.scss

@@ -44,17 +44,8 @@
                     border-radius: $border-radius-large;
                     border: 1px solid get-color-neutral("30");
 
-                    // Styles for native implmentation of :focus-within.
-                    &:focus-within {
-                        @include c-radio-focus-hover;
-                    }
-
-                    // Styles for polyfill implementation to support IE. When grouping selectors
-                    // together, IE doesn't display desired styles.
-                    &.focus-within {
-                        @include c-radio-focus-hover;
-                    }
-
+                    &:focus-within, // Styles for native implmentation of :focus-within.
+                    &.focus-within, // Styles for polyfill implementation to support IE. When grouping selectors together, IE doesn't display desired styles.
                     &:hover {
                         @include c-radio-focus-hover;
                     }

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

@@ -4,6 +4,15 @@ import uuid from "uuid";
 import { ButtonSizes } from "../../atoms/constants/button-sizes";
 import { ButtonStyles } from "../../atoms/constants/button-styles";
 
+// -------------------------------------------------------------------------------------------------
+// #region Constants
+// -------------------------------------------------------------------------------------------------
+
+const COMPONENT_CLASS = "c-dropdown-button";
+const COMPONENT_LIST_CLASS = `${COMPONENT_CLASS}__list`;
+
+// #endregion Constants
+
 // -------------------------------------------------------------------------------------------------
 // #region Interfaces
 // -------------------------------------------------------------------------------------------------
@@ -32,7 +41,7 @@ const DropdownButton: React.FC<DropdownButtonProps> = (
 ) => {
     const { buttonClassName, menuItems, buttonContents, size, style } = props;
 
-    const classNames = ["c-button", "c-dropdown-button"];
+    const classNames = ["c-button", COMPONENT_CLASS];
 
     if (buttonClassName != null) {
         classNames.push(buttonClassName);
@@ -51,12 +60,12 @@ const DropdownButton: React.FC<DropdownButtonProps> = (
             <MenuButton className={classNames.join(" ")}>
                 {buttonContents}
             </MenuButton>
-            <MenuList className="c-dropdown-button__list">
+            <MenuList className={COMPONENT_LIST_CLASS}>
                 {menuItems.map((item: DropdownItem) => (
                     <MenuItem
                         key={uuid.v4()}
                         onSelect={item.onSelect}
-                        className={"c-dropdown-button__list__item"}>
+                        className={`${COMPONENT_LIST_CLASS}__item`}>
                         {item.component}
                     </MenuItem>
                 ))}