feat(checkable-input): describe checkable-input component using desig…

…n tokens, update tests
Sage · Mar 7, 2022 · 14b924c · 14b924c
1 parent a65fa6b
commit 14b924c
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 20 deletions.
diff --git a/src/__internal__/checkable-input/checkable-input.spec.js b/src/__internal__/checkable-input/checkable-input.spec.js
@@ -17,7 +17,6 @@ import {
   StyledCheckableInputWrapper,
 } from "./checkable-input.style";
 import StyledHelp from "../../components/help/help.style";
-import baseTheme from "../../style/themes/base";
 import guid from "../utils/helpers/guid";
 
 jest.mock("../utils/helpers/guid");
@@ -210,7 +209,7 @@ describe("StyledCheckableInputWrapper", () => {
     it("applies the correct base Help styles", () => {
       assertStyleMatch(
         {
-          color: baseTheme.help.color,
+          color: "var(--colorsUtilityYin065)",
           verticalAlign: "middle",
         },
         wrapper,
@@ -223,7 +222,7 @@ describe("StyledCheckableInputWrapper", () => {
     });
 
     it.each(states)("applies the correct Help %s styles", (state) => {
-      assertStyleMatch({ color: baseTheme.text.color }, wrapper, {
+      assertStyleMatch({ color: "var(--colorsUtilityYin090)" }, wrapper, {
         modifier: css`
           ${`${StyledLabelContainer} ${StyledHelp}:${state}`}
         `,

diff --git a/src/__internal__/checkable-input/checkable-input.style.js b/src/__internal__/checkable-input/checkable-input.style.js
@@ -5,7 +5,6 @@ import { FieldLineStyle } from "../form-field/form-field.style";
 import HiddenCheckableInputStyle from "./hidden-checkable-input.style";
 import LabelStyle, { StyledLabelContainer } from "../label/label.style";
 import StyledHelp from "../../components/help/help.style";
-import baseTheme from "../../style/themes/base";
 import StyledValidationIcon from "../validations/validation-icon.style";
 
 const StyledCheckableInput = styled.div`
@@ -21,7 +20,6 @@ const StyledCheckableInputWrapper = styled.div`
     labelWidth,
     labelInline,
     reverse,
-    theme,
   }) => css`
     ${FieldLineStyle} {
       display: flex;
@@ -36,12 +34,12 @@ const StyledCheckableInputWrapper = styled.div`
       width: auto;
 
       & ${StyledHelp}, & ${StyledValidationIcon} {
-        color: ${theme.help.color};
+        color: var(--colorsUtilityYin065);
         vertical-align: middle;
 
         &:hover,
         &:focus {
-          color: ${theme.text.color};
+          color: var(--colorsUtilityYin090);
         }
       }
     }
@@ -116,11 +114,6 @@ StyledCheckableInputWrapper.propTypes = {
   fieldHelpInline: PropTypes.bool,
   inputWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   labelWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  theme: PropTypes.object,
-};
-
-StyledCheckableInputWrapper.defaultProps = {
-  theme: baseTheme,
 };
 
 export { StyledCheckableInput, StyledCheckableInputWrapper };
diff --git a/src/components/radio-button/__snapshots__/radio-button-group.spec.js.snap b/src/components/radio-button/__snapshots__/radio-button-group.spec.js.snap
@@ -43,15 +43,15 @@ exports[`RadioButtonGroup renders as expected 1`] = `
 
 .c5 .c16 .c17,
 .c5 .c16 .c18 {
-  color: rgba(0,0,0,0.65);
+  color: var(--colorsUtilityYin065);
   vertical-align: middle;
 }
 
 .c5 .c16 .c17:hover,
 .c5 .c16 .c18:hover,
 .c5 .c16 .c17:focus,
 .c5 .c16 .c18:focus {
-  color: rgba(0,0,0,0.9);
+  color: var(--colorsUtilityYin090);
 }
 
 .c5 .c15 {

diff --git a/src/components/radio-button/__snapshots__/radio-button-mapper.spec.js.snap b/src/components/radio-button/__snapshots__/radio-button-mapper.spec.js.snap
@@ -44,15 +44,15 @@ Array [
 
 .c1 .c12 .c13,
 .c1 .c12 .c14 {
-  color: rgba(0,0,0,0.65);
+  color: var(--colorsUtilityYin065);
   vertical-align: middle;
 }
 
 .c1 .c12 .c13:hover,
 .c1 .c12 .c14:hover,
 .c1 .c12 .c13:focus,
 .c1 .c12 .c14:focus {
-  color: rgba(0,0,0,0.9);
+  color: var(--colorsUtilityYin090);
 }
 
 .c1 .c11 {
@@ -267,15 +267,15 @@ Array [
 
 .c1 .c12 .c13,
 .c1 .c12 .c14 {
-  color: rgba(0,0,0,0.65);
+  color: var(--colorsUtilityYin065);
   vertical-align: middle;
 }
 
 .c1 .c12 .c13:hover,
 .c1 .c12 .c14:hover,
 .c1 .c12 .c13:focus,
 .c1 .c12 .c14:focus {
-  color: rgba(0,0,0,0.9);
+  color: var(--colorsUtilityYin090);
 }
 
 .c1 .c11 {

diff --git a/src/components/radio-button/__snapshots__/radio-button.spec.js.snap b/src/components/radio-button/__snapshots__/radio-button.spec.js.snap
@@ -58,15 +58,15 @@ exports[`RadioButton base renders as expected 1`] = `
 
 .c3 .c19 .c20,
 .c3 .c19 .c21 {
-  color: rgba(0,0,0,0.65);
+  color: var(--colorsUtilityYin065);
   vertical-align: middle;
 }
 
 .c3 .c19 .c20:hover,
 .c3 .c19 .c21:hover,
 .c3 .c19 .c20:focus,
 .c3 .c19 .c21:focus {
-  color: rgba(0,0,0,0.9);
+  color: var(--colorsUtilityYin090);
 }
 
 .c3 .c18 {