FieldCheckbox: add useSuccessColor prop

src/components/FieldCheckbox/FieldCheckbox.css

@@ -17,6 +17,13 @@
     stroke: var(--marketplaceColor);
   }
 
+  /* successColor version */
+  &:hover + label .boxSuccess,
+  &:focus + label .boxSuccess,
+  &:checked + label .boxSuccess {
+    stroke: var(--successColor);
+  }
+
   /* Display the "check" when checked */
   &:checked + label .checked {
     display: inline;
@@ -24,6 +31,13 @@
     stroke-width: 1px;
   }
 
+  /* Display the "check" when checked */
+  &:checked + label .checkedSuccess {
+    display: inline;
+    stroke: var(--successColor);
+    stroke-width: 1px;
+  }
+
   /* Hightlight the text on checked, hover and focus */
   &:focus + label .text,
   &:hover + label .text,
@@ -54,12 +68,19 @@
   display: none;
   fill: var(--marketplaceColor);
 }
+.checkedSuccess {
+  display: none;
+  fill: var(--successColor);
+}
 
+.boxSuccess,
 .box {
   stroke: var(--matterColorAnti);
 }
 
 .text {
+}
+.textRoot {
   @apply --marketplaceListingAttributeFontStyles;
   color: var(--matterColor);
   margin-top: -1px;

src/components/FieldCheckbox/FieldCheckbox.js

@@ -6,16 +6,17 @@ import { Field } from 'react-final-form';
 import css from './FieldCheckbox.css';
 
 const IconCheckbox = props => {
+  const { className, checkedClassName, boxClassName } = props;
   return (
-    <svg className={props.className} width="14" height="14" xmlns="http://www.w3.org/2000/svg">
+    <svg className={className} width="14" height="14" xmlns="http://www.w3.org/2000/svg">
       <g fill="none" fillRule="evenodd">
         <g transform="translate(2 2)">
           <path
-            className={css.checked}
+            className={checkedClassName || css.checked}
             d="M9.9992985 1.5048549l-.0194517 6.9993137C9.977549 9.3309651 9.3066522 10 8.4798526 10H1.5001008c-.8284271 0-1.5-.6715729-1.5-1.5l-.000121-7c0-.8284271.6715728-1.5 1.5-1.5h.000121l6.9993246.0006862c.8284272.000067 1.4999458.671694 1.499879 1.5001211a1.5002208 1.5002208 0 0 1-.0000059.0040476z"
           />
           <path
-            className={css.box}
+            className={boxClassName || css.box}
             strokeWidth="2"
             d="M10.9992947 1.507634l-.0194518 6.9993137C10.9760133 9.8849417 9.8578519 11 8.4798526 11H1.5001008c-1.3807119 0-2.5-1.1192881-2.5-2.4999827L-1.0000202 1.5c0-1.3807119 1.119288-2.5 2.500098-2.5l6.9994284.0006862c1.3807118.0001115 2.4999096 1.11949 2.4997981 2.5002019-.0000018.003373-.0000018.003373-.0000096.0067458z"
           />
@@ -29,12 +30,21 @@ const IconCheckbox = props => {
   );
 };
 
-IconCheckbox.defaultProps = { className: null };
+IconCheckbox.defaultProps = { className: null, checkedClassName: null, boxClassName: null };
 
-IconCheckbox.propTypes = { className: string };
+IconCheckbox.propTypes = { className: string, checkedClassName: string, boxClassName: string };
 
 const FieldCheckboxComponent = props => {
-  const { rootClassName, className, svgClassName, id, label, ...rest } = props;
+  const {
+    rootClassName,
+    className,
+    svgClassName,
+    textClassName,
+    id,
+    label,
+    useSuccessColor,
+    ...rest
+  } = props;
 
   const classes = classNames(rootClassName || css.root, className);
   const checkboxProps = {
@@ -45,14 +55,21 @@ const FieldCheckboxComponent = props => {
     ...rest,
   };
 
+  const successColorVariantMaybe = useSuccessColor
+    ? {
+        checkedClassName: css.checkedSuccess,
+        boxClassName: css.boxSuccess,
+      }
+    : {};
+
   return (
     <span className={classes}>
       <Field {...checkboxProps} />
       <label htmlFor={id} className={css.label}>
         <span className={css.checkboxWrapper}>
-          <IconCheckbox className={svgClassName} />
+          <IconCheckbox className={svgClassName} {...successColorVariantMaybe} />
         </span>
-        <span className={css.text}>{label}</span>
+        <span className={classNames(css.text, textClassName || css.textRoot)}>{label}</span>
       </label>
     </span>
   );
@@ -62,6 +79,7 @@ FieldCheckboxComponent.defaultProps = {
   className: null,
   rootClassName: null,
   svgClassName: null,
+  textClassName: null,
   label: null,
 };
 
@@ -69,6 +87,7 @@ FieldCheckboxComponent.propTypes = {
   className: string,
   rootClassName: string,
   svgClassName: string,
+  textClassName: string,
 
   // Id is needed to connect the label with input.
   id: string.isRequired,