tweak spacing

CDCgov · Nov 27, 2024 · 73267e5 · 73267e5
1 parent 1f4d506
commit 73267e5
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 36 deletions.
diff --git a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx
@@ -55,9 +55,8 @@ const CustomizeQueryAccordionBody: React.FC<
               <td className={styles.noBorderNoBackgroundNoPadding}>
                 <CustomizeQueryCheckbox
                   id={item.code}
-                  label=""
-                  checked={false}
-                  onClick={() => {
+                  checked={item.include}
+                  onChange={() => {
                     toggleInclude(groupIndex, item.vsIndex, conceptIndex);
                   }}
                 />

diff --git a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx
@@ -1,6 +1,7 @@
 import { Icon } from "@trussworks/react-uswds";
 import styles from "./customizeQuery.module.css";
 import { GroupedValueSet } from "./customizeQueryUtils";
+import CustomizeQueryCheckbox from "./vanityCheckbox/CustomizeQueryCheckbox";
 
 type CustomizeQueryAccordionProps = {
   handleSelectAllChange: (groupIndex: string, checked: boolean) => void;
@@ -36,30 +37,15 @@ const CustomizeQueryAccordionHeader: React.FC<CustomizeQueryAccordionProps> = ({
     <div
       className={`${styles.accordionHeader} display-flex flex-no-wrap flex-align-start customize-query-header`}
     >
-      <div
-        id="select-all"
-        className={`hide-checkbox-label ${styles.customizeQueryCheckbox}`}
-        onClick={(e) => {
-          e.stopPropagation();
-          handleSelectAllChange(groupIndex, selectedCount !== selectedTotal);
-        }}
-      >
-        {selectedCount === selectedTotal && (
-          <Icon.Check
-            className="usa-icon bg-base-lightest"
-            size={4}
-            color="#565C65"
-            aria-label="Checkmark icon indicating addition"
-          />
-        )}
-        {selectedCount > 0 && selectedCount < selectedTotal && (
-          <Icon.Remove
-            className="usa-icon bg-base-lightest"
-            size={4}
-            color="#565C65"
-            aria-label="Minus icon indicating removal"
-          />
-        )}
+      <div id="select-all">
+        <CustomizeQueryCheckbox
+          id={group.valueSetName}
+          checked={selectedCount === selectedTotal}
+          isHeader
+          onChange={() => {
+            handleSelectAllChange(groupIndex, selectedCount !== selectedTotal);
+          }}
+        />
       </div>
       <div className={`${styles.accordionButtonTitle}`}>
         {`${group.valueSetName}`}

diff --git a/...nnector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx b/...nnector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx
@@ -4,20 +4,28 @@ import Checkbox, {
 } from "../../../designSystem/checkbox/Checkbox";
 import styles from "./checkbox.module.css";
 
-const CustomizeQueryCheckbox: React.FC<CheckboxProps> = ({
+type VanityCheckboxProps = CheckboxProps & {
+  isHeader?: boolean;
+};
+const CustomizeQueryCheckbox: React.FC<VanityCheckboxProps> = ({
   id,
   label,
   checked,
-  onClick,
+  onChange,
   className,
+  isHeader,
 }) => {
   return (
     <Checkbox
       id={id}
       label={label}
       checked={checked}
-      onClick={onClick}
-      className={classNames(className, styles.vanity)}
+      onChange={onChange}
+      className={classNames(
+        className,
+        styles.vanity,
+        isHeader ? styles.vanityHeader : "",
+      )}
     />
   );
 };

diff --git a/...stomizeQuery/vanityCheckbox/checkmark.svg → ...izeQuery/vanityCheckbox/bodyCheckmark.svg b/...stomizeQuery/vanityCheckbox/checkmark.svg → ...izeQuery/vanityCheckbox/bodyCheckmark.svg
diff --git a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkbox.module.css b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkbox.module.css
@@ -1,8 +1,10 @@
 .vanity {
   background: inherit;
+  margin: 0.5rem;
 }
 
 .vanity label {
+  margin-top: 0;
   padding-left: 0;
 }
 
@@ -12,13 +14,17 @@
   background-color: #fff;
   box-shadow: 0 0 0 1px #a9aeb1 !important;
   border-radius: 0.25rem;
-  margin: 0.5rem;
+  margin: 0;
   padding: 0 !important;
   position: relative !important;
 }
 
 .vanity input:checked + label::before {
   background-color: #fff !important;
-  background-image: url("checkmark.svg") !important;
+  background-image: url("bodyCheckmark.svg") !important;
   background-size: cover !important;
 }
+
+.vanityHeader input:checked + label::before {
+  background-image: url("headerCheckbox.svg") !important;
+}
diff --git a/...ector/src/app/query/components/customizeQuery/vanityCheckbox/headerCheckbox.svg b/...ector/src/app/query/components/customizeQuery/vanityCheckbox/headerCheckbox.svg
diff --git a/query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx b/query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx
@@ -4,10 +4,11 @@ import styles from "./checkbox.module.css";
 
 export type CheckboxProps = {
   id: string;
-  label: string;
+  label?: string;
   className?: string;
   onClick?: () => void;
-  checked: boolean;
+  onChange?: () => void;
+  checked?: boolean;
 };
 
 /**
@@ -25,6 +26,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
   id,
   className,
   onClick,
+  onChange,
   checked,
 }) => {
   return (
@@ -34,7 +36,8 @@ const Checkbox: React.FC<CheckboxProps> = ({
       name={id}
       className={classNames(styles.checkbox, className)}
       onClick={onClick}
-      defaultChecked={checked}
+      onChange={onChange}
+      checked={checked}
     ></TrussCheckbox>
   );
 };