My Ada Sidebar

src/app/components/elements/AdaNewsSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Row, Button, Container } from "reactstrap";
+import { Row, Button } from "reactstrap";
 import { useDeviceSize } from "../../services";
 import { IconCard } from "./cards/IconCard";
 import { NewsCard } from "./cards/NewsCard";
@@ -14,7 +14,7 @@ export const AdaNewsSection = ({isHomepage}: {isHomepage?: boolean}) => {
     const showNewsletterPrompts = !userPreferences?.EMAIL_PREFERENCE?.NEWS_AND_UPDATES;
     const {setLinkedSetting} = useLinkableSetting();
 
-    return ((news && news.length > 0) || showNewsletterPrompts) && <Container className={isHomepage ? "homepage-padding mw-1600" : "overview-padding mw-1600"}>
+    return ((news && news.length > 0) || showNewsletterPrompts) && <>
         <h2 className={classNames({"font-size-1-75 mb-4": isHomepage})}>Tips, tools & support</h2>
         {news && news.length > 0 &&
             <>
@@ -40,6 +40,6 @@ export const AdaNewsSection = ({isHomepage}: {isHomepage?: boolean}) => {
                 />
             </Row>
         }
-    </Container>;
+    </>;
 };
 

src/app/components/elements/SidebarButton.tsx

@@ -3,6 +3,8 @@ import { AffixButton } from './AffixButton';
 import { ButtonProps } from 'reactstrap';
 import { sidebarSlice, useAppDispatch } from '../../state';
 import classNames from 'classnames';
+import { siteSpecific } from '../../services';
+import { Spacer } from './Spacer';
 
 interface SidebarButtonProps extends ButtonProps {
     buttonTitle?: string;
@@ -28,23 +30,35 @@ export const SidebarButton = ({ buttonTitle, absolute, ...rest }: SidebarButtonP
         };
     }, [isSticky]);
 
-    const button = <AffixButton 
-        {...rest} 
-        data-testid="sidebar-toggle" 
-        innerRef={absolute ? undefined : elementRef as React.RefObject<HTMLButtonElement>}
-        className={classNames("sidebar-toggle no-print", {"sidebar-toggle-top": !absolute, "stuck": sticky}, rest.className)} 
-        color="keyline" 
-        onClick={toggleMenu} 
-        affix={{
-            affix: "icon-sidebar",
-            position: "prefix",
-            type: "icon",
-            affixClassName: "icon-inline me-2"
-        }}
-        style={{maxWidth: textRef?.current ? `${(!sticky ? textRef.current.clientWidth + 8 : 0) + 61}px` : "max-content"}}
-    >
-        <span ref={textRef}>{buttonTitle ?? "Search and filter"}</span>
-    </AffixButton>;
+    const button = siteSpecific(
+        <AffixButton 
+            {...rest} 
+            data-testid="sidebar-toggle" 
+            innerRef={absolute ? undefined : elementRef as React.RefObject<HTMLButtonElement>}
+            className={classNames("sidebar-toggle no-print", {"sidebar-toggle-top": !absolute, "stuck": sticky}, rest.className)} 
+            color="keyline" 
+            onClick={toggleMenu} 
+            affix={{
+                affix: "icon-sidebar",
+                position: "prefix",
+                type: "icon",
+                affixClassName: "icon-inline me-2"
+            }}
+            style={{maxWidth: textRef?.current ? `${(!sticky ? textRef.current.clientWidth + 8 : 0) + 61}px` : "max-content"}}
+        >
+            <span ref={textRef}>{buttonTitle ?? "Search and filter"}</span>
+        </AffixButton>,
+        <button
+            {...rest}
+            data-testid="sidebar-toggle"
+            className={classNames("sidebar-toggle w-100 d-flex no-print", rest.className)}
+            onClick={toggleMenu}
+        >
+            <span ref={textRef}>{buttonTitle}</span>
+            <Spacer />
+            <i className="icon icon-chevron-right icon-inline-sm" />
+        </button>
+    );
 
     return absolute
         ? <div className="sidebar-toggle-top" ref={elementRef as React.RefObject<HTMLDivElement>}>

src/app/components/elements/TitleAndBreadcrumb.tsx

@@ -57,7 +57,7 @@ type TitleAndBreadcrumbProps = BreadcrumbTrailProps & PageTitleProps & TitleMeta
 };
 
 export const TitleAndBreadcrumb = ({children, breadcrumbTitleOverride, currentPageTitle, displayTitleOverride, subTitle, disallowLaTeX, className, audienceViews, help, collectionType, intermediateCrumbs, preview, icon}: TitleAndBreadcrumbProps) => {
-    return <div id="page-title" className={classNames(className, {"title-breadcrumb-container": isPhy, "pt-4 pt-md-7": isAda})}>
+    return <div id="page-title" className={classNames(className, "title-breadcrumb-container")}>
         {isPhy && <div className="title-graphics"/>}
         <BreadcrumbTrail
             currentPageTitle={breadcrumbTitleOverride ?? currentPageTitle}

src/app/components/elements/inputs/HorizontalScroller.tsx

@@ -57,7 +57,7 @@ export const HorizontalScroller = ({ children, enabled, className }: HorizontalS
     }, [handleResize]);
 
     return (
-        <div className={className}>
+        <div className={classNames(className, "d-grid")}>
             <div className={classNames("top-scrollbar-container", {"closed": !displayScroll || !enabled})} 
                 onScroll={() => syncScroll("top")} ref={topScrollbarRef} style={{ height: scrollbarSize }} 
             >

src/app/components/elements/inputs/StyledTabPicker.tsx

@@ -4,6 +4,7 @@ import { Label, Input } from "reactstrap";
 import { isDefined } from "../../../services";
 import { Spacer } from "../Spacer";
 import classNames from "classnames";
+import { Link } from "react-router-dom";
 
 /**
  * @typedef {Object} StyledTabPickerProps
@@ -13,20 +14,40 @@ import classNames from "classnames";
  * @property {React.ChangeEventHandler<HTMLInputElement>} [onInputChange] - The function to call when the tab is clicked.
  * @property {ReactNode} checkboxTitle - The title of the tab.
  * @property {number} [count] - The number to display on the tab.
+ * @property {"left" | "right"} [indicatorPosition] - The position of the indicator.
+ * @property {Object} [suffix] - An optional suffix to display on the tab.
+ * @property {"checkbox" | "radio" | "link"} type - The type of the tab picker.
+ * @property {string} [to] - The URL to navigate to when the tab is clicked (only for type "link").
  */
 
-interface StyledTabPickerProps extends React.HTMLAttributes<HTMLLabelElement> {
+type StyledTabPickerProps = React.HTMLAttributes<HTMLElement> & {
     checked?: boolean;
     disabled?: boolean;
     onInputChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
     checkboxTitle: ReactNode;
     count?: number;
+    indicatorPosition?: "left" | "right";
     suffix?: {
         icon: string;
         action?: (e: React.MouseEvent<HTMLButtonElement>) => void;
         info: string;
     }
-}
+} & ({
+    type?: "checkbox" | "radio";
+    to?: never;
+} | {
+    type: "link";
+    to: string;
+})
+
+const PickerContents = ({checkboxTitle, count, suffix, disabled}: Pick<StyledTabPickerProps, "checkboxTitle" | "count" | "suffix" | "disabled">) => <>
+    <span className="ms-3">{checkboxTitle}</span>
+    {isDefined(count) && <span className="badge rounded-pill ms-2">{count}</span>}
+    <Spacer/>
+    {suffix && <button type="button" className="px-2 py-1 bg-transparent" onClick={suffix.action} aria-label={suffix.info} title={suffix.info} disabled={disabled}>
+        <i className={`${suffix.icon} d-block`}/>
+    </button>}
+</>;
 
 /**
  * A StyledTabPicker component, used to render a list of selectable tabs, each with a title and optional counter (as to indicate how many options selecting that would provide).
@@ -38,13 +59,18 @@ interface StyledTabPickerProps extends React.HTMLAttributes<HTMLLabelElement> {
 export const StyledTabPicker = (props: StyledTabPickerProps): JSX.Element => {
     const { checked, disabled, onInputChange, checkboxTitle, count, suffix, ...rest } = props;
     const id = checkboxTitle?.toString().replace(" ", "-");
-    return <Label {...rest} id={id} tabIndex={-1} className={classNames("d-flex align-items-center tab-picker py-2 my-1 w-100", rest.className, {"checked": checked})}>
-        <Input type="checkbox" checked={checked ?? false} onChange={onInputChange} readOnly={onInputChange === undefined} disabled={disabled} aria-labelledby={id} />
-        <span className="ms-3">{checkboxTitle}</span>
-        {isDefined(count) && <span className="badge rounded-pill ms-2">{count}</span>}
-        <Spacer/>
-        {suffix && <button type="button" className="px-2 py-1 bg-transparent" onClick={suffix.action} aria-label={suffix.info} title={suffix.info} disabled={disabled}>
-            <i className={`${suffix.icon} d-block`}/>
-        </button>}
+    const type = props.type ?? "checkbox";
+
+    if (type === "link") {
+        return <Link {...rest} id={props.id ?? id} className={classNames("d-flex align-items-center py-2 w-100 tab-picker", rest.className, {"checked": checked})}
+            to={rest.to as string}
+        >
+            <PickerContents checkboxTitle={checkboxTitle} count={count} suffix={suffix} disabled={disabled} />
+        </Link>;
+    }
+
+    return <Label {...rest} id={props.id ?? id} tabIndex={-1} className={classNames("d-flex align-items-center py-2 my-1 w-100 tab-picker", rest.className, {"checked": checked})}>
+        <Input type={type} checked={checked ?? false} onChange={onInputChange} readOnly={onInputChange === undefined} disabled={disabled} aria-labelledby={props.id ?? id} />
+        <PickerContents checkboxTitle={checkboxTitle} count={count} suffix={suffix} disabled={disabled} />
     </Label>;
 };

src/app/components/elements/layout/PageContainer.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { Container, ContainerProps } from "reactstrap";
-import { siteSpecific } from "../../../services";
+import { isAda, siteSpecific } from "../../../services";
 import { MainContent, SidebarLayout } from "./SidebarLayout";
 import classNames from "classnames";
+import { FeatureFlag, useFeatureFlag } from "../../../services/featureFlag";
 
 interface PageContainerProps extends Omit<ContainerProps, "pageTitle"> {
     pageTitle?: React.ReactNode;
@@ -19,7 +20,10 @@ interface PageContainerProps extends Omit<ContainerProps, "pageTitle"> {
  */
 export const PageContainer = (props: PageContainerProps) => {
     const { children, sidebar, pageTitle, id, ...rest } = props;
-    if (!sidebar) {
+
+    const useAdaSidebars = useFeatureFlag(FeatureFlag.ENABLE_ADA_SIDEBARS);
+
+    if (!sidebar || (isAda && !useAdaSidebars)) {
         return <Container {...rest} id={id} className={classNames("mb-7", rest.className)}>
             {pageTitle}
             {children}

src/app/components/elements/layout/SidebarLayout.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect } from "react";
-import { Col, ColProps, RowProps, Offcanvas, OffcanvasBody, OffcanvasHeader } from "reactstrap";
+import { Col, ColProps, RowProps, Offcanvas, OffcanvasBody, OffcanvasHeader, Container, Accordion, AccordionItem, AccordionHeader, AccordionBody } from "reactstrap";
 import classNames from "classnames";
 import { above, siteSpecific, useDeviceSize } from "../../../services";
 import { mainContentIdSlice, selectors, sidebarSlice, useAppDispatch, useAppSelector } from "../../../state";
@@ -64,15 +64,20 @@ export const ContentSidebar = (props: ContentSidebarProps) => {
     const sidebarContext = useContext(SidebarContext);
     if (!sidebarContext?.sidebarPresent) return <></>;
 
+    const breakpoint = siteSpecific("lg", "md");
+
     const { className, buttonTitle, hideButton, optionBar, ...rest } = props;
-    return <>
-        {above['lg'](deviceSize)
-            ? <Col tag="aside" data-testid="sidebar" aria-label="Sidebar" lg={4} xl={3} {...rest} className={classNames("d-none d-lg-flex flex-column sidebar no-print p-4 order-0", className)} />
-            : <>
+    return above[breakpoint](deviceSize)
+        ? siteSpecific(
+            <Col tag="aside" data-testid="sidebar" aria-label="Sidebar" lg={4} xl={3} {...rest} className={classNames("d-none d-lg-flex flex-column sidebar no-print p-4 order-0", className)} />,
+            <Col tag="aside" data-testid="sidebar" aria-label="Sidebar" {...rest} className={classNames("flex-column sidebar no-print order-0", className)} />
+        )
+        : siteSpecific(
+            <>
                 {optionBar && <div className="d-flex align-items-center no-print flex-wrap py-3 gap-3">
                     <div className="flex-grow-1 d-inline-grid align-items-end">{optionBar}</div>
                 </div>}
-                {!hideButton && <SidebarButton buttonTitle={buttonTitle} className="my-3"/>}
+                {!hideButton && <SidebarButton buttonTitle={buttonTitle} className="my-3" />}
                 <Offcanvas id="content-sidebar-offcanvas" direction="start" isOpen={sidebarOpen} toggle={toggleMenu} container="#root" data-bs-theme={pageTheme ?? "neutral"}>
                     <OffcanvasHeader toggle={toggleMenu} close={
                         <div className="d-flex w-100 justify-content-end align-items-center flex-wrap p-3">
@@ -91,7 +96,18 @@ export const ContentSidebar = (props: ContentSidebarProps) => {
                         </ContentSidebarContext.Provider>
                     </OffcanvasBody>
                 </Offcanvas>
-            </>
-        }
-    </>;
+            </>,
+            !hideButton && <Container fluid className="w-100">
+                <Accordion open={sidebarOpen ? ["myAda"] : []} toggle={toggleMenu} className="position-relative mx-lg-3 my-3" tag="aside" data-testid="sidebar" aria-label="Sidebar">
+                    <AccordionItem className="border">
+                        <AccordionHeader targetId="myAda">
+                            <span className="fw-bold">{buttonTitle}</span>
+                        </AccordionHeader>
+                        <AccordionBody accordionId="myAda" className="accordion-flush-body">
+                            <Col {...rest} className={classNames("flex-column", className)} />
+                        </AccordionBody>
+                    </AccordionItem>
+                </Accordion>
+            </Container>
+        );
 };

src/app/components/elements/panels/GetStartedWithAda.tsx

@@ -22,7 +22,7 @@ export const GetStartedWithAda = () => {
         <AccordionItem>
             <AccordionHeader targetId="1">
                 <span className="fw-bold">Get started with Ada CS</span>
-                {getStartedTasks && Object.values(getStartedTasks).every(Boolean) && <i className="icon icon-tick icon-md mx-3" />}
+                {getStartedTasks && Object.values(getStartedTasks).every(Boolean) && <i className="icon icon-tick icon-sm mx-3" />}
             </AccordionHeader>
             <AccordionBody accordionId="1">
                 <ShowLoading

src/app/components/elements/sidebar/MyAccountSidebar.tsx

@@ -21,11 +21,12 @@ export const MyAccountSidebar = (props: MyAccountSidebarProps) => {
                     <ContentSidebarContext.Consumer>
                         {(context) =>
                             <StyledTabPicker id={title} tabIndex={0} checkboxTitle={title} checked={activeTab === tab}
-                                onClick={() => { setActiveTab(tab); context?.close(); }} onKeyDown={ifKeyIsEnter(() => { setActiveTab(tab); context?.close(); })}/>
+                                onClick={() => { setActiveTab(tab); context?.close(); }} onKeyDown={ifKeyIsEnter(() => { setActiveTab(tab); context?.close(); })}
+                            />
                         }
                     </ContentSidebarContext.Consumer>
                 </li>
             )}
         </ul>
     </ContentSidebar>;
-};
+};