moving icon styles into variables

acl-services · Nov 27, 2019 · 297f960 · 297f960
1 parent 9d77e50
commit 297f960
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 31 deletions.
diff --git a/packages/Radio/src/Radio.js b/packages/Radio/src/Radio.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import nanoid from "nanoid";
 import { ShirtSizes } from "@paprika/helpers/lib/customPropTypes";
 import CheckIcon from "@paprika/icon/lib/Check";
-import radioStyles from "./Radio.styles";
+import { radioStyles, radioIconStyles } from "./Radio.styles";
 import Group from "./components/Group";
 
 const propTypes = {
@@ -72,9 +72,23 @@ function Radio(props) {
         {children}
 
         {canDeselect ? (
-          <CheckIcon className="radio-icon" aria-hidden data-pka-anchor="radio.icon.check" />
+          <CheckIcon
+            isChecked={isChecked}
+            css={radioIconStyles}
+            size={size}
+            isDisabled={isDisabled}
+            aria-hidden
+            data-pka-anchor="radio.icon.check"
+          />
         ) : (
-          <div className="radio-icon radio-solid-background" data-pka-anchor="radio.icon.check" />
+          <div
+            css={radioIconStyles}
+            size={size}
+            isChecked={isChecked}
+            isDisabled={isDisabled}
+            isSolidBackground
+            data-pka-anchor="radio.icon.check"
+          />
         )}
       </label>
     </div>

diff --git a/packages/Radio/src/Radio.styles.js b/packages/Radio/src/Radio.styles.js
@@ -101,7 +101,7 @@ const styles = {
   },
 };
 
-const radioStyles = css`
+export const radioStyles = css`
   ${boxSizingStyles};
   ${({ size }) => styles[size].baseFontSize};
   line-height: ${({ hasLabel }) => (hasLabel ? lineHeightValue(-1) : "0")};
@@ -124,17 +124,13 @@ const radioStyles = css`
       position: relative;
     }
 
-    & + label::before,
-    & + label > .radio-icon {
-      position: absolute;
-      top: 0;
-    }
-
     & + label::before {
       background: ${tokens.color.white};
       border: 2px solid ${tokens.border.color};
       content: "";
       left: 0;
+      position: absolute;
+      top: 0;
       ${z(1)};
       ${({ size }) => styles[size].radioStyles};
     }
@@ -143,21 +139,6 @@ const radioStyles = css`
       border: 2px solid ${tokens.color.black};
     }
 
-    & + label > .radio-icon {
-      color: ${tokens.color.black};
-      ${({ size }) => styles[size].radioIconStyles};
-      opacity: 0;
-      pointer-events: none;
-      transform: translateX(-50%);
-      transition: opacity 0.15s ease-out;
-      ${z(2)};
-    }
-
-    & + label > .radio-solid-background {
-      background-color: ${tokens.color.black};
-      ${({ size }) => styles[size].radioIconBackgroundStyles};
-    }
-
     &:checked {
       & + label.deselectable:hover:before {
         background: ${tokens.color.blackLighten60};
@@ -173,11 +154,6 @@ const radioStyles = css`
 
     &:disabled {
       & + label,
-      & ~ .radio-icon {
-        cursor: not-allowed;
-        opacity: 0.5;
-        transition: none;
-      }
       &:checked {
         & + label:hover::before {
           border: 2px solid ${tokens.color.black};
@@ -193,4 +169,41 @@ const radioStyles = css`
   }
 `;
 
-export default radioStyles;
+export const radioIconStyles = css`
+  color: ${tokens.color.black};
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  transition: opacity 0.15s ease-out;
+  ${({ size }) => styles[size].radioIconStyles};
+  ${z(2)};
+
+  /* ${({ isChecked }) => {
+    if (isChecked) {
+      return {
+        opacity: 1,
+      };
+    }
+  }} */
+
+  ${({ isDisabled }) => {
+    if (isDisabled) {
+      return {
+        cursor: "not-allowed",
+        opacity: 0.5,
+        transition: "none",
+      };
+    }
+  }}
+
+  ${({ isSolidBackground, size }) => {
+    if (isSolidBackground) {
+      return {
+        backgroundColor: `${tokens.color.black}`,
+        ...styles[size].radioIconBackgroundStyles,
+      };
+    }
+  }}
+`;