#3093: Programme Finder > FULL/PART-TIME toggle + Add 'ALL' option (#…

…1016) * Update the ToggleSwitch component to use checkboxes instead of a switch * Rename file and classes, Update study mode widget * Update UI, remove handleToggle * Fix handling of checkboxes * Fix FE code and add 'full-time' to known query params * Code cleanup, fix FE linting errors * Make checkboxes ticked by default * Rename css file for StudyModeCheckbox * Cleanup debug logs * Put back _toggle-switch.scss for pattern library * Make category chooser appear on results * Resolve console errors with types * Hide inactive categories on ProgrammesResults * Fix rendering of filter of mobile * Fix eslint errors * Make isFullTime and isPartTime checked by default * Add checkbox validation error message * Move ModeCheckbox component * Fix mobile view * Move ModeCheckbox component * Fix programmes results view * Put study mode variables in context, avoid prop drilling * Fix eslint errors * Cleanup * Return empty list when there both full-time and part-time are unselected * Cleanup * add borders around toggles * match status text colour line and font size * remove unused grid rules * make sure error text doesn't sit on top of the checkboxes * lint * make sure that grid lines can't be seen underneath the programme finder toggles * tidy up checkbox spacing * remove css already in toggle-switch.scss * lint spacing * reduce font size for subject on mobile * Update error wording --------- Co-authored-by: Chris Lawton <[email protected]> Co-authored-by: Simon Evans <[email protected]>
torchbox · Aug 14, 2024 · 004fd59 · 004fd59
1 parent a163dfd
commit 004fd59
Show file tree

Hide file tree

Showing 21 changed files with 461 additions and 153 deletions.
diff --git a/rca/static_src/javascript/programmes/components/ProgrammesCategories/CategoriesPanels.js b/rca/static_src/javascript/programmes/components/ProgrammesCategories/CategoriesPanels.js
@@ -10,7 +10,7 @@ import CategoryItem from './CategoryItem';
  * All tabs are rendered to the DOM so screen readers’ ARIA markup
  * is correct.
  */
-const CategoriesPanels = ({ categories, activeCategory, activeLength }) => {
+const CategoriesPanels = ({ categories, activeCategory }) => {
     return (
         <div className="categories-panels bg bg--light">
             {categories.map((c) => (
@@ -27,7 +27,6 @@ const CategoriesPanels = ({ categories, activeCategory, activeLength }) => {
                             key={item.id}
                             category={item}
                             parentId={c.id}
-                            activeLength={activeLength}
                         />
                     ))}
                 </div>
@@ -39,7 +38,6 @@ const CategoriesPanels = ({ categories, activeCategory, activeLength }) => {
 CategoriesPanels.propTypes = {
     categories: programmeCategories.isRequired,
     activeCategory: PropTypes.string.isRequired,
-    activeLength: PropTypes.bool.isRequired,
 };
 
 export default CategoriesPanels;
diff --git a/...static_src/javascript/programmes/components/ProgrammesCategories/CategoriesPanels.test.js b/...static_src/javascript/programmes/components/ProgrammesCategories/CategoriesPanels.test.js
@@ -9,7 +9,8 @@ describe('CategoriesPanels', () => {
                 <CategoriesPanels
                     categories={[]}
                     activeCategory=""
-                    activeLength={false}
+                    isFullTime
+                    isPartTime={false}
                 />,
             ),
         ).toMatchInlineSnapshot(`
@@ -37,7 +38,8 @@ describe('CategoriesPanels', () => {
                     },
                 ]}
                 activeCategory="test"
-                activeLength={false}
+                isFullTime
+                isPartTime={false}
             />,
         );
         expect(wrapper.find('#test').prop('aria-expanded')).toBe(true);

diff --git a/rca/static_src/javascript/programmes/components/ProgrammesCategories/CategoriesTablist.js b/rca/static_src/javascript/programmes/components/ProgrammesCategories/CategoriesTablist.js
@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 
 import { programmeCategories } from '../../programmes.types';
 import { getCategoryURL, pushState } from '../../programmes.routes';
-import ToggleSwitch from '../StudyModeToggleSwitch';
+import { useStudyMode } from '../../context/StudyModeContext';
 
 /**
  * A list of tabs, one per category. The active tab is underlined.
  * Tabs can be moved through with the arrow keys.
  */
-const CategoriesTablist = ({ categories, activeCategory, activeLength }) => {
+const CategoriesTablist = ({ categories, activeCategory }) => {
+    const { isFullTime, isPartTime } = useStudyMode();
     return (
         <nav
             className="categories-tablist categories-tablist--no-padding-x"
@@ -21,11 +22,15 @@ const CategoriesTablist = ({ categories, activeCategory, activeLength }) => {
             <div className="categories-tablist__list">
                 <div className="categories-tablist__tabs" role="tablist">
                     {categories.map((c) => {
-                        const href = getCategoryURL(c.id, activeLength);
+                        const href = getCategoryURL(
+                            c.id,
+                            String(isFullTime),
+                            String(isPartTime),
+                        );
 
                         return (
                             <a
-                                key={c.id}
+                                key={`category-${c.id}`}
                                 id={`${c.id}-tab`}
                                 href={href}
                                 className="categories-tablist__tab body body--one"
@@ -64,10 +69,6 @@ const CategoriesTablist = ({ categories, activeCategory, activeLength }) => {
                         );
                     })}
                 </div>
-                <ToggleSwitch
-                    ariaLabel="Programme study mode"
-                    activeLength={activeLength}
-                />
             </div>
         </nav>
     );
@@ -76,7 +77,6 @@ const CategoriesTablist = ({ categories, activeCategory, activeLength }) => {
 CategoriesTablist.propTypes = {
     categories: programmeCategories.isRequired,
     activeCategory: PropTypes.string.isRequired,
-    activeLength: PropTypes.bool.isRequired,
 };
 
 export default CategoriesTablist;
diff --git a/rca/static_src/javascript/programmes/components/ProgrammesCategories/CategoryItem.js b/rca/static_src/javascript/programmes/components/ProgrammesCategories/CategoryItem.js
@@ -5,13 +5,15 @@ import { programmeCategoryItemShape } from '../../programmes.types';
 
 import Icon from '../Icon/Icon';
 import { getCategoryItemURL, pushState } from '../../programmes.routes';
+import { useStudyMode } from '../../context/StudyModeContext';
 
 /**
  * A single instance from a category, leading to a filtered view of matching programmes.
  */
-const CategoryItem = ({ category, parentId, activeLength }) => {
+const CategoryItem = ({ category, parentId }) => {
     const { id, title, description, slug } = category;
-    const href = getCategoryItemURL(parentId, id, slug, activeLength);
+    const { isFullTime, isPartTime } = useStudyMode();
+    const href = getCategoryItemURL(parentId, id, slug, isFullTime, isPartTime);
 
     return (
         <div className="category-item__wrapper grid">
@@ -40,7 +42,6 @@ const CategoryItem = ({ category, parentId, activeLength }) => {
 CategoryItem.propTypes = {
     category: programmeCategoryItemShape.isRequired,
     parentId: PropTypes.string.isRequired,
-    activeLength: PropTypes.bool.isRequired,
 };
 
 export default CategoryItem;
diff --git a/rca/static_src/javascript/programmes/components/ProgrammesCategories/ProgrammesCategories.js b/rca/static_src/javascript/programmes/components/ProgrammesCategories/ProgrammesCategories.js
@@ -5,12 +5,13 @@ import { programmeCategories } from '../../programmes.types';
 
 import CategoriesTablist from './CategoriesTablist';
 import CategoriesPanels from './CategoriesPanels';
+import ModeCheckbox from '../StudyModeCheckbox';
 
 /**
  * Filter-based navigation to programmes, displayed as tabs.
  * If one of the categories is active, the corresponding tab is displayed.
  */
-const ProgrammesCategories = ({ categories, activeCategory, activeLength }) => {
+const ProgrammesCategories = ({ categories, activeCategory }) => {
     return (
         <div className="programmes-categories">
             <div className="section section--above-grid bg bg--dark">
@@ -22,15 +23,18 @@ const ProgrammesCategories = ({ categories, activeCategory, activeLength }) => {
                         <CategoriesTablist
                             categories={categories}
                             activeCategory={activeCategory}
-                            activeLength={activeLength}
                         />
                     </div>
                 </div>
             </div>
+            <div className="section section--above-grid section--programme-toggles bg bg--light">
+                <div className="section__notch">
+                    <ModeCheckbox ariaLabel="Programme study mode" />
+                </div>
+            </div>
             <CategoriesPanels
                 categories={categories}
                 activeCategory={activeCategory}
-                activeLength={activeLength}
             />
         </div>
     );
@@ -39,7 +43,6 @@ const ProgrammesCategories = ({ categories, activeCategory, activeLength }) => {
 ProgrammesCategories.propTypes = {
     categories: programmeCategories.isRequired,
     activeCategory: PropTypes.string.isRequired,
-    activeLength: PropTypes.bool.isRequired,
 };
 
 export default ProgrammesCategories;
diff --git a/rca/static_src/javascript/programmes/components/ProgrammesExplorer.js b/rca/static_src/javascript/programmes/components/ProgrammesExplorer.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { useLocation } from 'react-use';
 
@@ -8,6 +8,7 @@ import { programmeCategories } from '../programmes.types';
 import ProgrammesCategories from './ProgrammesCategories/ProgrammesCategories';
 import ProgrammesResults from './ProgrammesResults/ProgrammesResults';
 import SearchForm from './SearchForm';
+import { StudyModeContext } from '../context/StudyModeContext';
 
 /**
  * Programmes and short courses listing, with a search form, filters, and a results view.
@@ -21,13 +22,32 @@ const ProgrammesExplorer = ({ searchLabel, categories }) => {
     const activeValue = filterValue.split('-')[0];
     const hasActiveCategoryFilter = !!activeValue;
     const searchQuery = params.get('search') || '';
-    const activeLength = params.get('part-time') || '';
     const hasActiveSearch = !!searchQuery;
     const showCategories = !hasActiveCategoryFilter && !hasActiveSearch;
     const showResults = hasActiveCategoryFilter || hasActiveSearch;
 
+    const [isFullTime, setIsFullTime] = useState(params.get('full-time') || '');
+    const [isPartTime, setIsPartTime] = useState(params.get('part-time') || '');
+
+    /* eslint-disable react-hooks/exhaustive-deps */
+    useEffect(() => {
+        // Only do this on initial load
+        if (isFullTime === '' && isPartTime === '') {
+            setIsFullTime('true');
+            setIsPartTime('true');
+        }
+    }, []);
+
     return (
-        <>
+        <StudyModeContext.Provider
+            value={{
+                params,
+                isFullTime,
+                setIsFullTime,
+                isPartTime,
+                setIsPartTime,
+            }}
+        >
             <SearchForm searchQuery={searchQuery} label={searchLabel} />
             <TransitionGroup className="explorer-transitions">
                 {showCategories ? (
@@ -42,7 +62,8 @@ const ProgrammesExplorer = ({ searchLabel, categories }) => {
                         <ProgrammesCategories
                             categories={categories}
                             activeCategory={activeCategory}
-                            activeLength={activeLength}
+                            isFullTime={isFullTime === 'true'}
+                            isPartTime={isPartTime === 'true'}
                         />
                     </CSSTransition>
                 ) : null}
@@ -60,12 +81,13 @@ const ProgrammesExplorer = ({ searchLabel, categories }) => {
                             activeCategory={activeCategory}
                             activeValue={activeValue}
                             searchQuery={searchQuery}
-                            activeLength={activeLength}
+                            isFullTime={isFullTime === 'true'}
+                            isPartTime={isPartTime === 'true'}
                         />
                     </CSSTransition>
                 ) : null}
             </TransitionGroup>
-        </>
+        </StudyModeContext.Provider>
     );
 };