Merge branch 'main' into cookieyes

Author: Dantemss

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@openstax/os-webview",
-    "version": "2.138.0",
+    "version": "2.140.0",
     "description": "OpenStax webview",
     "scripts": {
         "test": "jest --coverage ./test/src",

src/app/components/contact-info/contact-info.js renamed to src/app/components/contact-info/contact-info.tsx

@@ -4,7 +4,9 @@ import {useIntl} from 'react-intl';
 import SchoolSelector from '~/components/school-selector/school-selector';
 import './contact-info.scss';
 
-export default function ContactInfo({children}) {
+export default function ContactInfo({
+    children
+}: React.PropsWithChildren<Record<never, never>>) {
     const {formatMessage} = useIntl();
 
     return (

src/app/components/dialog/dialog.d.ts

@@ -1,57 +1,44 @@
 import React from 'react';
-import ReactModal from 'react-modal';
+import ReactModal, {Aria} from 'react-modal';
 import RawHTML from '~/components/jsx-helpers/raw-html';
 import cn from 'classnames';
 import './dialog.scss';
 
-function PutAway({noTitle, onClick}) {
+function PutAway({
+    noTitle,
+    onClick
+}: {
+    noTitle?: boolean;
+    onClick?: () => void;
+}) {
     return (
         <button
             className={cn('put-away', {'no-title-bar': noTitle})}
             hidden={!onClick}
-            onClick={() => onClick()}
+            onClick={() => onClick?.()}
             aria-label="close"
         >
             ×
         </button>
     );
 }
 
-export function FooterDialog({isOpen, title, children, className}) {
-    React.useLayoutEffect(() => {
-        const footerEl = document.getElementById('footer');
-
-        footerEl?.style.setProperty('z-index', 1);
-
-        return () => footerEl?.style.removeProperty('z-index');
-    }, []);
-
-    if (!isOpen) {
-        return null;
-    }
-
-    return (
-        <dialog className={cn('footer-dialog', className)}>
-            {title && (
-                <div className="title-bar">
-                    <RawHTML Tag="span" html={title} />
-                </div>
-            )}
-            {children}
-        </dialog>
-    );
-}
-
-// eslint-disable-next-line complexity
 export default function Dialog({
     isOpen,
     title,
     onPutAway,
     children,
-    className = undefined,
+    className,
     closeOnOutsideClick = false,
     aria = title ? {labelledby: 'modal-dialog-title'} : {label: 'missing label'}
-}) {
+}: React.PropsWithChildren<{
+    isOpen: boolean;
+    title?: string;
+    onPutAway?: () => void;
+    className?: string;
+    closeOnOutsideClick?: boolean;
+    aria?: Aria & {label?: string};
+}>) {
     const overlayClassName = className ? `modal-overlay-${className}` : '';
 
     return (
@@ -94,7 +81,14 @@ export function useDialog(initiallyOpen = false) {
             afterClose = () => null,
             aria,
             ...otherProps
-        }) {
+        }: React.PropsWithChildren<{
+            title?: string;
+            modal?: boolean;
+            className?: string;
+            showPutAway?: boolean;
+            afterClose?: () => void;
+            aria?: Aria;
+        }>) {
             const Modal = modal ? ReactModal : React.Fragment;
             const closeAndAfterClose = () => {
                 close();
@@ -113,7 +107,7 @@ export function useDialog(initiallyOpen = false) {
                         title={title}
                         className={className}
                         isOpen={showDialog}
-                        onPutAway={showPutAway && closeAndAfterClose}
+                        onPutAway={showPutAway ? closeAndAfterClose : undefined}
                         aria={aria}
                     >
                         {children}
@@ -122,6 +116,6 @@ export function useDialog(initiallyOpen = false) {
             );
         }
 
-        return [BoundDialog, open, close, showDialog];
+        return [BoundDialog, open, close, showDialog] as const;
     }, [showDialog]);
 }

src/app/components/dialog/dialog.js renamed to src/app/components/dialog/dialog.tsx

@@ -1,9 +1,15 @@
 import React from 'react';
 import AccordionGroup from '~/components/accordion-group/accordion-group';
 
-export default function FAQ({heading, items}) {
+export default function FAQ({
+    heading,
+    items
+}: {
+    heading: string;
+    items: Parameters<typeof AccordionGroup>[0]['items'];
+}) {
     return (
-        <div className='boxed'>
+        <div className="boxed">
             <h1>{heading}</h1>
             <div className="articles">
                 <AccordionGroup items={items} noScroll />

src/app/components/faq-section/faq-section.js renamed to src/app/components/faq-section/faq-section.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+type Item = {
+    label: string;
+    value: string;
+};
+
+function Option({
+    item,
+    name,
+    onChange,
+    checked
+}: {
+    item: Item;
+    name: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    checked: boolean;
+}) {
+    const inputProps = item.value
+        ? {
+              name,
+              value: item.value
+          }
+        : {};
+
+    return (
+        <div className="checkbox-control-group">
+            <label>
+                <input
+                    type="checkbox"
+                    {...inputProps}
+                    checked={checked}
+                    onChange={onChange}
+                />
+                {item.label}
+            </label>
+        </div>
+    );
+}
+
+export default function FormCheckboxgroup({
+    name,
+    label,
+    longLabel,
+    instructions,
+    options,
+    onChange
+}: {
+    name: string;
+    label?: string;
+    longLabel?: string;
+    instructions?: string;
+    options: Item[];
+    onChange?: (arr: unknown[]) => void;
+}) {
+    const checkedItems = React.useMemo(() => new window.Set(), []);
+    const onItemChange = React.useCallback(
+        ({target: {value, checked}}: React.ChangeEvent<HTMLInputElement>) => {
+            const method = checked ? 'add' : 'delete';
+
+            checkedItems[method](value);
+            onChange?.(Array.from(checkedItems.values()));
+        },
+        [checkedItems, onChange]
+    );
+
+    return (
+        <div className="form-checkboxgroup">
+            {label && <label className="field-label">{label}</label>}
+            {longLabel && (
+                <label className="field-long-label">{longLabel}</label>
+            )}
+            {instructions && <label className="hint">{instructions}</label>}
+            {options.map((item) => (
+                <Option
+                    item={item}
+                    name={name}
+                    key={item.value}
+                    checked={checkedItems.has(item.value)}
+                    onChange={onItemChange}
+                />
+            ))}
+        </div>
+    );
+}