Merge pull request #11 from MetadataWorks/NSDV-109-move-national-requ…

…irement-checkbox-to-left-hand-bar Nsdv 109 move national requirement checkbox to left hand bar
MetadataWorks · Apr 21, 2023 · 7ad3885 · 7ad3885
2 parents b844f9c + 095f023
commit 7ad3885
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 42 deletions.
diff --git a/ui/components/Dataset/index.js b/ui/components/Dataset/index.js
@@ -135,43 +135,6 @@ function SortMenu({ searchTerm }) {
   );
 }
 
-const CheckBox = () => {
-  const { getSelections, updateQuery } = useQueryContext();
-  const toggleMandated = (event) => {
-    const selections = getSelections();
-    const { name, checked } = event.target;
-    delete selections[name];
-    if (checked) {
-      selections[name] = checked;
-    }
-    updateQuery(selections, { replace: true });
-  };
-
-  return (
-    <div
-      className={classnames(
-        'nhsuk-checkboxes__item nhsuk-u-margin-bottom-4',
-        styles.checkboxItem
-      )}
-    >
-      <input
-        className="nhsuk-checkboxes__input nhsuk-u-font-size-16"
-        id="mandated"
-        name="mandated"
-        type="checkbox"
-        value="nationally mandated"
-        onChange={toggleMandated}
-      />
-      <label
-        className="nhsuk-label nhsuk-checkboxes__label nhsuk-u-font-size-16"
-        htmlFor="mandated"
-      >
-        National requirement
-      </label>
-    </div>
-  );
-};
-
 const NoResultsSummary = ({ searchTerm }) => (
   <>
     <h3>
@@ -237,7 +200,8 @@ export default function Dataset({
   useEffect(() => {
     const orderBy = 'name';
     const order = 'asc';
-    updateQuery({ ...query, orderBy, order });
+    const mandated = 'true';
+    updateQuery({ ...query, orderBy, order, mandated });
     setPageLoaded(true);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -255,9 +219,6 @@ export default function Dataset({
         <div className="nhsuk-grid-column-one-half">
           <SortMenu searchTerm={searchTerm} />
         </div>
-        <div className="nhsuk-grid-column-one-half">
-          <CheckBox />
-        </div>
       </div>
       {count > 0 ? (
         <ul className={styles.list} id="browse-results">

diff --git a/ui/components/Filters/Filters.module.scss b/ui/components/Filters/Filters.module.scss
@@ -34,3 +34,22 @@
 .clear {
   clear: both;
 }
+
+.requirementLabel {
+  margin-left: -8px;
+}
+
+.requirementLabel::before {
+  margin-top: 10px !important;
+  margin-left: 4px !important;
+  height: 24px !important;
+  width: 24px !important;
+}
+
+.requirementLabel::after {
+  left: 9px !important;
+  top: 17px !important;
+  width: 9px !important;
+  height: 3.5px !important;
+  border-width: 0 0 3px 3px !important;
+}
diff --git a/ui/components/Filters/index.js b/ui/components/Filters/index.js
@@ -8,6 +8,65 @@ import { CheckboxGroup, OptionSelect, Expander, Select } from '../';
 import styles from './Filters.module.scss';
 import { Radio } from '../Radio';
 
+const CheckBox = () => {
+  const { getSelections, updateQuery } = useQueryContext();
+
+  const selections = getSelections();
+
+  useEffect(() => {
+    const name = 'mandated';
+    delete selections[name];
+    selections[name] = true;
+    updateQuery(selections, { replace: true });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const toggleMandated = (event) => {
+    const { name, checked } = event.target;
+    delete selections[name];
+    if (checked) {
+      selections[name] = checked;
+    }
+    updateQuery(selections, { replace: true });
+  };
+
+  return (
+    <Expander
+      summary={'Requirement'}
+      className={classnames('nhsuk-filter', styles.filter)}
+      noBorderTop={false}
+      title="Requirement"
+    >
+      <div
+        className={classnames(
+          'nhsuk-checkboxes__item nhsuk-u-margin-bottom-4',
+          styles.checkboxItem
+        )}
+      >
+        <input
+          className="nhsuk-checkboxes__input nhsuk-u-font-size-16"
+          id="mandated"
+          name="mandated"
+          type="checkbox"
+          value="nationally mandated"
+          defaultChecked={true}
+          onChange={toggleMandated}
+        />
+        <label
+          className={classnames(
+            'nhsuk-label',
+            'nhsuk-checkboxes__label',
+            'nhsuk-u-font-size-16',
+            styles.requirementLabel
+          )}
+          htmlFor="mandated"
+        >
+          National requirement
+        </label>
+      </div>
+    </Expander>
+  );
+};
+
 export function Filter({
   label,
   choices,
@@ -240,7 +299,6 @@ export function Filters({
               }
               numActive={numActive}
               // TODO: this should be configured in schema
-              //useSelect={filter.field_name === 'standard_category'}
               useRadio={filter.field_name === 'standard_category'}
               onlyChild={filters.length === 1}
               fullHeight={fullHeight}
@@ -251,6 +309,7 @@ export function Filters({
             />
           );
         })}
+        <CheckBox />
       </div>
     </div>
   );