diff --git a/src/app/components/body-units/body-units.tsx b/src/app/components/body-units/body-units.tsx
index 18c44ac9a..fd8afc2aa 100644
--- a/src/app/components/body-units/body-units.tsx
+++ b/src/app/components/body-units/body-units.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import RawHTML from '~/components/jsx-helpers/raw-html';
-import Quote from '~/components/quote/quote.js';
+import Quote from './quote';
 import JITLoad from '~/helpers/jit-load';
 
 function Unknown({data, type}: {data: unknown; type: string}) {
@@ -19,7 +19,7 @@ type CTAData = {
     description: string;
     button_href: string;
     button_text: string;
-}
+};
 
 function CTA({data}: {data: CTAData}) {
     const alignment = convertAlignment(data.alignment);
@@ -45,7 +45,7 @@ type AImageData = {
         original: {
             src: string;
             alt: string;
-        }
+        };
     };
     alignment: string;
     alt_text: string;
@@ -71,11 +71,10 @@ function AlignedImage({data}: {data: AImageData}) {
 type PQData = {
     quote: string;
     attribution: string;
-}
+};
 
 function PullQuote({data}: {data: PQData}) {
     const model = {
-        image: {},
         content: data.quote,
         attribution: data.attribution
     };
@@ -83,13 +82,14 @@ function PullQuote({data}: {data: PQData}) {
     return <Quote model={model} />;
 }
 
-
 export type DocumentData = {
     download_url: string;
-}
+};
 
 function Document({data}: {data: DocumentData}) {
-    return <JITLoad importFn={() => import('./import-pdf-unit.js')} data={data} />;
+    return (
+        <JITLoad importFn={() => import('./import-pdf-unit.js')} data={data} />
+    );
 }
 
 // Using CMS tags, which are not camel-case
@@ -105,25 +105,39 @@ const bodyUnits = {
 
 export type UnitType = {
     id: string;
-} & ({
-    type: 'paragraph' | 'aligned_html';
-    value: string;
-} | {
-    type: 'aligned_image';
-    value: AImageData;
-} | {
-    type: 'pullquote';
-    value: PQData;
-} | {
-    type: 'document';
-    value: DocumentData;
-} | {
-    type: 'blog_cta';
-    value: CTAData;
-})
+} & (
+    | {
+          type: 'paragraph' | 'aligned_html';
+          value: string;
+      }
+    | {
+          type: 'aligned_image';
+          value: AImageData;
+      }
+    | {
+          type: 'pullquote';
+          value: PQData;
+      }
+    | {
+          type: 'document';
+          value: DocumentData;
+      }
+    | {
+          type: 'blog_cta';
+          value: CTAData;
+      }
+);
 
 export default function BodyUnit({unit}: {unit: UnitType}) {
-    const Unit = bodyUnits[unit.type] as ({data}: {data: typeof unit.value}) => React.JSX.Element;
-
-    return Unit ? <Unit data={unit.value} /> : <Unknown data={unit.value} type={unit.type} />;
+    const Unit = bodyUnits[unit.type] as ({
+        data
+    }: {
+        data: typeof unit.value;
+    }) => React.JSX.Element;
+
+    return Unit ? (
+        <Unit data={unit.value} />
+    ) : (
+        <Unknown data={unit.value} type={unit.type} />
+    );
 }
diff --git a/src/app/components/body-units/pdf-unit.tsx b/src/app/components/body-units/pdf-unit.tsx
index 67b13e9c7..3a5cd8a9f 100644
--- a/src/app/components/body-units/pdf-unit.tsx
+++ b/src/app/components/body-units/pdf-unit.tsx
@@ -66,7 +66,9 @@ function toggleFullscreen(
     if (!fsFn) {
         return;
     }
-    elem.requestFullscreen = elem[fsFn as keyof typeof elem] as () => Promise<void>;
+    elem.requestFullscreen = elem[
+        fsFn as keyof typeof elem
+    ] as () => Promise<void>;
 
     if (!document.fullscreenElement) {
         elem.requestFullscreen().catch((err) => {
@@ -123,7 +125,9 @@ export default function Document({data}: {data: DocumentData}) {
         >
             <PDF
                 file={data.download_url}
-                onLoadSuccess={({numPages: n}: {numPages: number}) => setNumPages(n)}
+                onLoadSuccess={({numPages: n}: {numPages: number}) =>
+                    setNumPages(n)
+                }
                 inputRef={ref}
             >
                 <div className="pages-side-by-side">
diff --git a/src/app/components/body-units/quote.tsx b/src/app/components/body-units/quote.tsx
new file mode 100644
index 000000000..5d0de2c07
--- /dev/null
+++ b/src/app/components/body-units/quote.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import RawHTML from '~/components/jsx-helpers/raw-html';
+
+export default function Quote({
+    model
+}: {
+    model: {
+        content: string;
+        attribution: string;
+    };
+}) {
+    return (
+        <div className="quote">
+            <blockquote>
+                <RawHTML html={model.content} />
+                {Boolean(model.attribution) && (
+                    <div className="attribution">— {model.attribution}</div>
+                )}
+            </blockquote>
+        </div>
+    );
+}
diff --git a/src/app/components/form-select/form-select.tsx b/src/app/components/form-select/form-select.tsx
index 057f31066..04f2fc977 100644
--- a/src/app/components/form-select/form-select.tsx
+++ b/src/app/components/form-select/form-select.tsx
@@ -1,21 +1,28 @@
 import React from 'react';
 import DropdownSelect from '~/components/select/drop-down/drop-down';
+import {SelectItem} from '../select/select-context';
 
 export default function FormSelect({
-    label, name, selectAttributes, options=[], onValueUpdate
+    label,
+    name,
+    selectAttributes,
+    options = [],
+    onValueUpdate
 }: {
     label: string;
     name: string;
     selectAttributes: object;
-    options: unknown[];
-    onValueUpdate?: unknown;
+    options: SelectItem[];
+    onValueUpdate?: (v: string) => void;
 }) {
     return (
         <div className="control-group">
             {label && <label className="field-label">{label}</label>}
             <DropdownSelect
-                name={name} {...selectAttributes}
-                options={options} onValueUpdate={onValueUpdate}
+                name={name}
+                {...selectAttributes}
+                options={options}
+                onValueUpdate={onValueUpdate}
             />
         </div>
     );
diff --git a/src/app/components/paginator/paginator-context.js b/src/app/components/paginator/paginator-context.js
deleted file mode 100644
index 71371f93e..000000000
--- a/src/app/components/paginator/paginator-context.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import {useState, useCallback} from 'react';
-import buildContext from '~/components/jsx-helpers/build-context';
-
-function useContextValue(params={}) {
-    const {resultsPerPage=1, initialPage=1} = params;
-    const [currentPage, setCurrentPage] = useState(initialPage);
-    const firstOnPage = (currentPage - 1) * resultsPerPage;
-    const lastOnPage = firstOnPage + resultsPerPage - 1;
-    const isVisible = useCallback(
-        (childIndex) => childIndex >= firstOnPage && childIndex <= lastOnPage,
-        [firstOnPage, lastOnPage]
-    );
-    const visibleChildren = useCallback(
-        (children) => children.slice(firstOnPage, lastOnPage + 1),
-        [firstOnPage, lastOnPage]
-    );
-
-    return {currentPage, setCurrentPage, resultsPerPage, firstOnPage, lastOnPage, isVisible, visibleChildren};
-}
-
-const {useContext, ContextProvider} = buildContext({useContextValue});
-
-export {
-    useContext as default,
-    ContextProvider as PaginatorContextProvider
-};
diff --git a/src/app/components/paginator/paginator-context.ts b/src/app/components/paginator/paginator-context.ts
new file mode 100644
index 000000000..1c24bd796
--- /dev/null
+++ b/src/app/components/paginator/paginator-context.ts
@@ -0,0 +1,38 @@
+import {useState, useCallback} from 'react';
+import buildContext from '~/components/jsx-helpers/build-context';
+
+type ContextParams = {
+    resultsPerPage?: number;
+    initialPage?: number;
+};
+
+function useContextValue(params: ContextParams = {}) {
+    const {resultsPerPage = 1, initialPage = 1} = params;
+    const [currentPage, setCurrentPage] = useState(initialPage);
+    const firstOnPage = (currentPage - 1) * resultsPerPage;
+    const lastOnPage = firstOnPage + resultsPerPage - 1;
+    const isVisible = useCallback(
+        (childIndex: number) =>
+            childIndex >= firstOnPage && childIndex <= lastOnPage,
+        [firstOnPage, lastOnPage]
+    );
+    const visibleChildren = useCallback(
+        (children: React.ReactNode[]) =>
+            children.slice(firstOnPage, lastOnPage + 1),
+        [firstOnPage, lastOnPage]
+    );
+
+    return {
+        currentPage,
+        setCurrentPage,
+        resultsPerPage,
+        firstOnPage,
+        lastOnPage,
+        isVisible,
+        visibleChildren
+    };
+}
+
+const {useContext, ContextProvider} = buildContext({useContextValue});
+
+export {useContext as default, ContextProvider as PaginatorContextProvider};
diff --git a/src/app/components/paginator/search-results/paginator.js b/src/app/components/paginator/search-results/paginator.tsx
similarity index 62%
rename from src/app/components/paginator/search-results/paginator.js
rename to src/app/components/paginator/search-results/paginator.tsx
index 5f7810a65..3cad8131d 100644
--- a/src/app/components/paginator/search-results/paginator.js
+++ b/src/app/components/paginator/search-results/paginator.tsx
@@ -2,28 +2,28 @@ import React from 'react';
 import usePaginatorContext from '../paginator-context';
 import './paginator.scss';
 
-function getPageIndicators(pages, currentPage) {
+function getPageIndicators(pages: number, currentPage: number) {
     const indicatorCount = Math.min(pages, 5);
-    const propsFor = (label) => ({
+    const propsFor = (label: number) => ({
         label,
         page: `page ${label}`,
         disabled: label === currentPage,
         selected: label === currentPage
     });
-    const result = Array(indicatorCount).fill();
+    const result = Array(indicatorCount).fill(0);
 
     if (pages - currentPage < 3) {
         result[0] = pages - indicatorCount + 1;
     } else {
-        result[0] = (currentPage > 3) ? currentPage - 2 : 1;
+        result[0] = currentPage > 3 ? currentPage - 2 : 1;
     }
     for (let i = 1; i < indicatorCount; ++i) {
-        result[i] = result[i-1] + 1;
+        result[i] = result[i - 1] + 1;
     }
     return result.map(propsFor);
 }
 
-function PageButtonBar({pages}) {
+function PageButtonBar({pages}: {pages: number}) {
     const {currentPage, setCurrentPage} = usePaginatorContext();
     const disablePrevious = currentPage === 1;
     const disableNext = currentPage === pages;
@@ -37,32 +37,44 @@ function PageButtonBar({pages}) {
     }
 
     return (
-        <nav aria-label='pagination'>
-            <ul className='no-bullets button-bar'>
-                <li><button disabled={disablePrevious} onClick={prevPage}>Previous</button></li>
-                {
-                    pageIndicators.map((indicator) =>
-                        <li key={indicator.page}><button
+        <nav aria-label="pagination">
+            <ul className="no-bullets button-bar">
+                <li>
+                    <button disabled={disablePrevious} onClick={prevPage}>
+                        Previous
+                    </button>
+                </li>
+                {pageIndicators.map((indicator) => (
+                    <li key={indicator.page}>
+                        <button
                             disabled={indicator.disabled}
                             aria-current={indicator.selected ? 'page' : 'false'}
                             aria-label={indicator.page}
                             onClick={() => setCurrentPage(indicator.label)}
-                        >{indicator.label}</button></li>
-                    )
-                }
-                <li><button disabled={disableNext} onClick={nextPage}>Next</button></li>
+                        >
+                            {indicator.label}
+                        </button>
+                    </li>
+                ))}
+                <li>
+                    <button disabled={disableNext} onClick={nextPage}>
+                        Next
+                    </button>
+                </li>
             </ul>
         </nav>
     );
 }
 
-export function PaginatorControls({items}) {
+export function PaginatorControls({items}: {items: number}) {
     const {currentPage, resultsPerPage} = usePaginatorContext();
     const pages = Math.ceil(items / resultsPerPage);
     const firstIndex = (currentPage - 1) * resultsPerPage;
     const endBefore = Math.min(firstIndex + resultsPerPage, items);
     const resultRange = `${firstIndex + 1}-${endBefore}`;
-    const searchTerm = new window.URLSearchParams(window.location.search).get('q');
+    const searchTerm = new window.URLSearchParams(window.location.search).get(
+        'q'
+    );
 
     return (
         <div className="paginator">
diff --git a/src/app/components/paginator/simple-paginator.js b/src/app/components/paginator/simple-paginator.tsx
similarity index 68%
rename from src/app/components/paginator/simple-paginator.js
rename to src/app/components/paginator/simple-paginator.tsx
index 742418a29..3c072d6f5 100644
--- a/src/app/components/paginator/simple-paginator.js
+++ b/src/app/components/paginator/simple-paginator.tsx
@@ -5,17 +5,28 @@ import {faChevronRight} from '@fortawesome/free-solid-svg-icons/faChevronRight';
 import range from 'lodash/range';
 import './simple-paginator.scss';
 
-function ControlButton({active, icon, onClick}) {
+type Direction = 'next' | 'previous';
+
+function ControlButton({active, direction, onClick}: {
+    active?: boolean;
+    direction: Direction;
+    onClick: React.MouseEventHandler
+}) {
+    const icon = direction === 'next' ? faChevronRight : faChevronLeft;
+
     return (
-        <button disabled={!active} onClick={onClick}>
+        <button disabled={!active} onClick={onClick} aria-label={direction}>
             <FontAwesomeIcon icon={icon} />
         </button>
     );
 }
 
-function PageLink({page, setPage}) {
+function PageLink({page, setPage}: {
+    page: number;
+    setPage: (p: number) => void;
+}) {
     const onClick = React.useCallback(
-        (e) => {
+        (e: React.MouseEvent<HTMLAnchorElement>) => {
             e.preventDefault();
             setPage(page);
         },
@@ -23,11 +34,17 @@ function PageLink({page, setPage}) {
     );
 
     return (
-        <a href={page} onClick={onClick}>{page}</a>
+        <a href={page.toString()} onClick={onClick}>{page}</a>
     );
 }
 
-function PagesBeforeCurrent({currentPage, totalPages, setPage}) {
+type PaginatorArgs = {
+    currentPage: number;
+    setPage: (p: number) => void;
+    totalPages: number;
+}
+
+function PagesBeforeCurrent({currentPage, totalPages, setPage}: PaginatorArgs) {
     if (currentPage === 1) {
         return null;
     }
@@ -53,7 +70,7 @@ function PagesBeforeCurrent({currentPage, totalPages, setPage}) {
     );
 }
 
-function PagesAfterCurrent({currentPage, totalPages, setPage}) {
+function PagesAfterCurrent({currentPage, totalPages, setPage}: PaginatorArgs) {
     if (currentPage === totalPages) {
         return null;
     }
@@ -82,29 +99,34 @@ function PagesAfterCurrent({currentPage, totalPages, setPage}) {
     );
 }
 
-export default function SimplePaginator({currentPage, setPage, totalPages}) {
+export default function SimplePaginator({currentPage, setPage, totalPages}: PaginatorArgs) {
     const nextPage = () => setPage(currentPage + 1);
     const prevPage = () => setPage(currentPage - 1);
 
     return (
-        <div className="simple-paginator">
-            <ControlButton active={currentPage > 1} icon={faChevronLeft} onClick={prevPage} />
+        <nav className="simple-paginator">
+            <ControlButton active={currentPage > 1} direction='previous' onClick={prevPage} />
             <PagesBeforeCurrent {...{currentPage, totalPages, setPage}} />
             <span className="current-page">{currentPage}</span>
             <PagesAfterCurrent {...{currentPage, totalPages, setPage}} />
-            <ControlButton active={currentPage < totalPages} icon={faChevronRight} onClick={nextPage} />
-        </div>
+            <ControlButton active={currentPage < totalPages} direction='next' onClick={nextPage} />
+        </nav>
     );
 }
 
-export function itemRangeOnPage(page, perPage, totalCount) {
+export function itemRangeOnPage(page: number, perPage: number, totalCount: number) {
     const end = Math.min(totalCount, page * perPage);
     const start = (page - 1) * perPage + 1;
 
     return [start, end];
 }
 
-export function Showing({page, perPage=9, totalCount, ofWhat}) {
+export function Showing({page, perPage, totalCount, ofWhat}: {
+    page: number;
+    perPage: number;
+    totalCount: number;
+    ofWhat: string;
+}) {
     const [start, end] = itemRangeOnPage(page, perPage, totalCount);
     const countMessage = totalCount <= perPage ? 'all' : `${start}-${end} of`;
 
diff --git a/src/app/components/progress-ring/progress-ring.js b/src/app/components/progress-ring/progress-ring.js
deleted file mode 100644
index aca753828..000000000
--- a/src/app/components/progress-ring/progress-ring.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import './progress-ring.scss';
-
-function Circle({basicProps, className, strokeDashoffset=0}) {
-    return (
-        <circle
-            {...basicProps}
-            className={className}
-            strokeDashoffset={strokeDashoffset}
-        />
-    );
-}
-
-export default function ProgressRing({message, radius, progress, stroke}) {
-    const normalizedRadius = radius - stroke * 2;
-    const circumference = normalizedRadius * 2 * Math.PI;
-    const basicCircleProps = React.useMemo(
-        () => {
-            return ({
-                cx: radius,
-                cy: radius,
-                fill: 'transparent',
-                r: normalizedRadius,
-                strokeDasharray: circumference,
-                strokeWidth: stroke
-            });
-        },
-        [radius, normalizedRadius, circumference, stroke]
-    );
-    const strokeDashoffset = circumference - progress / 100 * circumference;
-
-    return (
-        <div className="progress-ring">
-            <div className="message">
-                {message} min read
-            </div>
-            <svg height={radius * 2} width={radius * 2}>
-                <Circle
-                    basicProps={basicCircleProps}
-                    className="unfinished" />
-                <Circle
-                    basicProps={basicCircleProps}
-                    className="finished"
-                    strokeDashoffset={strokeDashoffset} />
-            </svg>
-        </div>
-    );
-}
diff --git a/src/app/components/progress-ring/progress-ring.tsx b/src/app/components/progress-ring/progress-ring.tsx
new file mode 100644
index 000000000..52ba307ea
--- /dev/null
+++ b/src/app/components/progress-ring/progress-ring.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import './progress-ring.scss';
+
+export default function ProgressRing({
+    message,
+    radius,
+    progress,
+    stroke
+}: {
+    message?: number;
+    radius: number;
+    progress: number;
+    stroke: number;
+}) {
+    const normalizedRadius = radius - stroke * 2;
+    const circumference = normalizedRadius * 2 * Math.PI;
+    const basicCircleProps = React.useMemo(() => {
+        return {
+            cx: radius,
+            cy: radius,
+            fill: 'transparent',
+            r: normalizedRadius,
+            strokeDasharray: circumference,
+            strokeWidth: stroke
+        };
+    }, [radius, normalizedRadius, circumference, stroke]);
+    const strokeDashoffset = circumference - (progress / 100) * circumference;
+
+    return (
+        <div className="progress-ring">
+            <div className="message">{message} min read</div>
+            <svg height={radius * 2} width={radius * 2}>
+                <circle {...basicCircleProps} className="unfinished" />
+                <circle
+                    {...basicCircleProps}
+                    className="finished"
+                    strokeDashoffset={strokeDashoffset}
+                />
+            </svg>
+        </div>
+    );
+}
diff --git a/src/app/components/quote/quote.js b/src/app/components/quote/quote.js
deleted file mode 100644
index 439fb872f..000000000
--- a/src/app/components/quote/quote.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import RawHTML from '~/components/jsx-helpers/raw-html';
-
-// eslint-disable-next-line complexity
-export default function Quote({model}) {
-    const classList = ['quote-bucket', model.image.image && model.image.alignment || 'full']
-        .join(' ');
-    const styleSpecs = [`background-image: url(${model.image.image})`];
-
-    if (model.height) {
-        styleSpecs.push(`height: ${model.height}px`);
-    }
-
-    return (
-        <div className={classList}>
-            {
-                model.image.image &&
-                    <div
-                        className="image"
-                        style={styleSpecs.join(';')}
-                    />
-            }
-            <div className={`quote ${model.colorScheme || ''}`}>
-                <blockquote>
-                    <RawHTML html={model.content} />
-                    {
-                        Boolean(model.attribution) &&
-                            <div className="attribution">— {model.attribution}</div>
-                    }
-                </blockquote>
-                {
-                    Boolean(model.overlay) &&
-                        <img className="overlay" src={model.overlay} alt={model.alt_text} />
-                }
-                {
-                    Boolean(model.cta) &&
-                        <a className="btn default" href={model.link}>{model.cta}</a>
-                }
-            </div>
-        </div>
-    );
-}
diff --git a/src/app/components/radio-panel/radio-panel.js b/src/app/components/radio-panel/radio-panel.js
deleted file mode 100644
index 32d9f8607..000000000
--- a/src/app/components/radio-panel/radio-panel.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, {useState} from 'react';
-import RawHTML from '~/components/jsx-helpers/raw-html';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faChevronDown} from '@fortawesome/free-solid-svg-icons/faChevronDown';
-import cn from 'classnames';
-
-function RadioButton({item, isSelected, onChange}) {
-    const onClick = () => {
-        onChange(item.value);
-    };
-    const onKeyDown = (event) => {
-        if ([' ', 'Enter'].includes(event.key)) {
-            onClick();
-        }
-    };
-
-    return (
-        <div
-            className="filter-button" tabIndex="0"
-            role="radio" aria-checked={isSelected(item.value)}
-            onClick={onClick}
-            onKeyDown={onKeyDown}
-        >
-            {
-                isSelected(item.value) &&
-                    <span className="on-mobile filter-by">
-                        Filter by:
-                    </span>
-            }
-            <RawHTML Tag="span" html={item.html} />
-            {
-                isSelected(item.value) &&
-                    <span className="on-mobile">
-                        <FontAwesomeIcon icon={faChevronDown} />
-                    </span>
-            }
-        </div>
-    );
-}
-
-function RadioPanelJsx({items, selectedValue, onChange}) {
-    const isSelected = (val) => {
-        return val === selectedValue;
-    };
-
-    return (
-        <React.Fragment>
-            {
-                items && items.map((item) => (
-                    <RadioButton key={item.value} {...{item, isSelected, onChange}} />
-                ))
-            }
-        </React.Fragment>
-    );
-}
-
-export function RadioPanel({selectedItem, items, onChange}) {
-    const [active, setActive] = useState(false);
-
-    function toggleActive() {
-        setActive(!active);
-    }
-
-    return (
-        <div
-            role="radiogroup"
-            className={cn('filter-buttons', {active})}
-            onClick={toggleActive}
-        >
-            <RadioPanelJsx items={items} selectedValue={selectedItem} onChange={onChange} />
-        </div>
-    );
-}
diff --git a/src/app/components/radio-panel/radio-panel.tsx b/src/app/components/radio-panel/radio-panel.tsx
new file mode 100644
index 000000000..10c110b6a
--- /dev/null
+++ b/src/app/components/radio-panel/radio-panel.tsx
@@ -0,0 +1,108 @@
+import React, {useState} from 'react';
+import RawHTML from '~/components/jsx-helpers/raw-html';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faChevronDown} from '@fortawesome/free-solid-svg-icons/faChevronDown';
+import cn from 'classnames';
+
+type Item = {
+    value: string;
+    html: string;
+};
+
+type OnChange = (v: string) => void;
+
+function RadioButton({
+    item,
+    isSelected,
+    onChange
+}: {
+    item: Item;
+    isSelected: (v: string) => boolean;
+    onChange: OnChange;
+}) {
+    const onClick = () => {
+        onChange(item.value);
+    };
+    const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if ([' ', 'Enter'].includes(event.key)) {
+            onClick();
+        }
+    };
+
+    return (
+        <div
+            className="filter-button"
+            tabIndex={0}
+            role="radio"
+            aria-checked={isSelected(item.value)}
+            onClick={onClick}
+            onKeyDown={onKeyDown}
+        >
+            {isSelected(item.value) && (
+                <span className="on-mobile filter-by">Filter by:</span>
+            )}
+            <RawHTML Tag="span" html={item.html} />
+            {isSelected(item.value) && (
+                <span className="on-mobile">
+                    <FontAwesomeIcon icon={faChevronDown} />
+                </span>
+            )}
+        </div>
+    );
+}
+
+function RadioPanelJsx({
+    items,
+    selectedValue,
+    onChange
+}: {
+    items: Item[];
+    selectedValue: string;
+    onChange: OnChange;
+}) {
+    const isSelected = (val: string) => {
+        return val === selectedValue;
+    };
+
+    return (
+        <React.Fragment>
+            {items &&
+                items.map((item) => (
+                    <RadioButton
+                        key={item.value}
+                        {...{item, isSelected, onChange}}
+                    />
+                ))}
+        </React.Fragment>
+    );
+}
+
+export function RadioPanel({
+    selectedItem,
+    items,
+    onChange
+}: {
+    selectedItem: string;
+    items: Item[];
+    onChange: OnChange;
+}) {
+    const [active, setActive] = useState(false);
+
+    function toggleActive() {
+        setActive(!active);
+    }
+
+    return (
+        <div
+            role="radiogroup"
+            className={cn('filter-buttons', {active})}
+            onClick={toggleActive}
+        >
+            <RadioPanelJsx
+                items={items}
+                selectedValue={selectedItem}
+                onChange={onChange}
+            />
+        </div>
+    );
+}
diff --git a/src/app/components/role-selector/role-selector.js b/src/app/components/role-selector/role-selector.tsx
similarity index 54%
rename from src/app/components/role-selector/role-selector.js
rename to src/app/components/role-selector/role-selector.tsx
index 5ee75f0b0..e26ce225b 100644
--- a/src/app/components/role-selector/role-selector.js
+++ b/src/app/components/role-selector/role-selector.tsx
@@ -5,8 +5,21 @@ import {FormattedMessage, useIntl} from 'react-intl';
 import useLanguageContext from '~/contexts/language';
 import './role-selector.scss';
 
-export function RoleDropdown({ options, setValue, name = 'subject' }) {
-    const optionsAsOptions = options.map((opt) => ({
+export type Option = {
+    displayName: string;
+    salesforceName: string;
+};
+
+export function RoleDropdown({
+    options,
+    setValue,
+    name = 'subject'
+}: {
+    options: Option[];
+    setValue: (v: string) => void;
+    name?: string;
+}) {
+    const optionsAsOptions = options.map((opt: Option) => ({
         label: opt.displayName,
         value: opt.salesforceName
     }));
@@ -23,34 +36,49 @@ export function RoleDropdown({ options, setValue, name = 'subject' }) {
     );
 }
 
-/* eslint-disable */
+type Props = {
+    value: string;
+    setValue: (v: string) => void;
+    hidden?: boolean;
+    children: React.ReactNode[];
+};
+
 function RoleSelector({
     data: options,
     value,
     setValue,
     children,
-    hidden = false
-}) {
+    hidden
+}: {
+    data: Option[];
+} & Props) {
     const [studentContent, facultyContent] = children;
 
     return (
         <div className="role-selector">
             <form data-region="selector">
                 <label hidden={hidden}>
-                    <FormattedMessage id="role-selector.i-am" defaultMessage='I am a' />
+                    <FormattedMessage
+                        id="role-selector.i-am"
+                        defaultMessage="I am a"
+                    />
                     <RoleDropdown options={options} setValue={setValue} />
                 </label>
             </form>
-            {value === "Student" && studentContent}
-            {!["", undefined, "Student"].includes(value) && facultyContent}
+            {value === 'Student' && studentContent}
+            {!['', undefined, 'Student'].includes(value) && facultyContent}
         </div>
     );
 }
 
-export default function RoleSelectorLoader(props) {
+export default function RoleSelectorLoader(props: Props) {
     const {language} = useLanguageContext();
 
     return (
-        <LoaderPage slug={`snippets/roles?locale=${language}`} props={props} Child={RoleSelector} />
+        <LoaderPage
+            slug={`snippets/roles?locale=${language}`}
+            props={props}
+            Child={RoleSelector}
+        />
     );
 }
diff --git a/src/app/components/salesforce-form/salesforce-form.js b/src/app/components/salesforce-form/salesforce-form.js
deleted file mode 100644
index 228ec12b6..000000000
--- a/src/app/components/salesforce-form/salesforce-form.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-import useSalesforceContext from '~/contexts/salesforce';
-
-export function HiddenFields({leadSource}) {
-    const {oid, debug} = useSalesforceContext();
-
-    if (!oid) {
-        return (<div>Loading...</div>);
-    }
-    return (
-        <React.Fragment>
-            <input name="utf8" type="hidden" value="✓" />
-            <input type="hidden" name="Application_Source__c" value="OS Web" />
-            <input type="hidden" name="oid" value={oid} />
-            {
-                debug && <input type="hidden" name="debug" value="1" />
-            }
-            <input type="hidden" name="lead_source" value={leadSource} />
-        </React.Fragment>
-    );
-}
-
-function SfForm({children, postTo, afterSubmit}) {
-    const [listening, setListening] = React.useState(false);
-    const {webtocaseUrl, debug, oid} = useSalesforceContext();
-    const onSubmit = React.useCallback(
-        () => setListening(true),
-        []
-    );
-    const onLoad = React.useCallback(
-        () => {
-            if (listening && afterSubmit) {
-                setListening(false);
-                afterSubmit();
-            }
-        },
-        [listening, afterSubmit]
-    );
-
-    return (
-        <React.Fragment>
-            <iframe
-                name="form-response" id="form-response" className="hidden"
-                src="" width="0" height="0" tabIndex="-1" onLoad={onLoad}
-            />
-            <form
-                acceptCharset="UTF-8" className="form"
-                target={debug ? undefined : 'form-response'}
-                action={postTo || webtocaseUrl} method="post"
-                onSubmit={onSubmit}
-                encType="multipart/form-data"
-            >
-                <input type="hidden" name="orgid" value={oid} />
-                {
-                    debug &&
-                        <input type="hidden" name="debug" value="1" />
-                }
-                <div className="form-content">
-                    {children}
-                </div>
-            </form>
-        </React.Fragment>
-    );
-}
-
-export default function SfFormOrLoading(formParams) {
-    const {webtocaseUrl} = useSalesforceContext();
-
-    if (!webtocaseUrl) {
-        return (<div>Loading...</div>);
-    }
-
-    return (<SfForm {...formParams} />);
-}
diff --git a/src/app/components/salesforce-form/salesforce-form.tsx b/src/app/components/salesforce-form/salesforce-form.tsx
new file mode 100644
index 000000000..58f66c323
--- /dev/null
+++ b/src/app/components/salesforce-form/salesforce-form.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import useSalesforceContext from '~/contexts/salesforce';
+
+type FormParams = React.PropsWithChildren<{
+    postTo: string;
+    afterSubmit: () => void;
+}>;
+
+function SfForm({children, postTo, afterSubmit}: FormParams) {
+    const [listening, setListening] = React.useState(false);
+    const {debug, oid} = useSalesforceContext();
+    const onSubmit = React.useCallback(() => setListening(true), []);
+    const onLoad = React.useCallback(() => {
+        if (listening) {
+            setListening(false);
+            afterSubmit();
+        }
+    }, [listening, afterSubmit]);
+
+    return (
+        <React.Fragment>
+            <iframe
+                name="form-response"
+                id="form-response"
+                className="hidden"
+                src=""
+                width="0"
+                height="0"
+                tabIndex={-1}
+                onLoad={onLoad}
+            />
+            <form
+                acceptCharset="UTF-8"
+                className="form"
+                target={debug ? undefined : 'form-response'}
+                action={postTo}
+                method="post"
+                onSubmit={onSubmit}
+                encType="multipart/form-data"
+                name="salesforce-form"
+            >
+                <input type="hidden" name="orgid" value={oid} />
+                {debug && <input type="hidden" name="debug" value="1" />}
+                <div className="form-content">{children}</div>
+            </form>
+        </React.Fragment>
+    );
+}
+
+export default function SfFormOrLoading(formParams: FormParams) {
+    const {oid} = useSalesforceContext();
+
+    if (!oid) {
+        return <div>Loading...</div>;
+    }
+
+    return <SfForm {...formParams} />;
+}
diff --git a/src/app/components/select/drop-down/drop-down.js b/src/app/components/select/drop-down/drop-down.tsx
similarity index 60%
rename from src/app/components/select/drop-down/drop-down.js
rename to src/app/components/select/drop-down/drop-down.tsx
index e1816f505..06ca5c046 100644
--- a/src/app/components/select/drop-down/drop-down.js
+++ b/src/app/components/select/drop-down/drop-down.tsx
@@ -1,14 +1,25 @@
 import React from 'react';
 import Select from '../select';
-import useSelectContext from '../select-context';
-import useToggleContext, {ToggleContextProvider} from '~/components/toggle/toggle-context';
+import useSelectContext, {SelectItem} from '../select-context';
+import useToggleContext, {
+    ToggleContextProvider
+} from '~/components/toggle/toggle-context';
 import ToggleControlBar from '~/components/toggle/toggle-control-bar';
 import ArrowToggle from '~/components/toggle/arrow-toggle';
 import VerticalList from '~/components/vertical-list/vertical-list';
 import './drop-down.scss';
 
-/* eslint-disable  */
-function RenderItem({item, current, onMouseEnter, onClick}) {
+function RenderItem({
+    item,
+    current,
+    onMouseEnter,
+    onClick
+}: {
+    item: SelectItem;
+    current: boolean;
+    onMouseEnter: React.MouseEventHandler;
+    onClick: React.MouseEventHandler;
+}) {
     const {item: selectedItem} = useSelectContext();
 
     return (
@@ -19,37 +30,37 @@ function RenderItem({item, current, onMouseEnter, onClick}) {
             onMouseEnter={onMouseEnter}
             onClick={onClick}
         >
-            {item.label || item.text}
+            {item.label}
         </div>
     );
 }
 
-function SelectedItem({placeholder}) {
+function SelectedItem({placeholder}: {placeholder: string}) {
     const {item} = useSelectContext();
 
     return (
         <div className="selected-item">
-            {
-                item ?
-                (item.label || item.text) :
+            {item ? (
+                item.label
+            ) : (
                 <span className="placeholder">{placeholder}</span>
-            }
+            )}
         </div>
     );
 }
 
-function AutoFocusVerticalList({options}) {
+function AutoFocusVerticalList({options}: {options: SelectItem[]}) {
     const {isOpen, close} = useToggleContext();
     const {select} = useSelectContext();
-    const vListRef = React.useRef();
-    const onSelect = (value) => {
+    const vListRef = React.useRef<HTMLDivElement>(null);
+    const onSelect = (value: SelectItem) => {
         select(value);
         close();
     };
 
     React.useEffect(() => {
         if (isOpen) {
-            vListRef.current.focus();
+            vListRef.current?.focus();
         }
     }, [isOpen]);
 
@@ -59,20 +70,29 @@ function AutoFocusVerticalList({options}) {
         if (initialSelection) {
             select(initialSelection);
         }
-    }, [options, select])
+    }, [options, select]);
 
     return (
         <div className="vl-wrapper" hidden={!isOpen} role="presentation">
             <VerticalList
-                items={options} RenderItem={RenderItem}
-                onSelect={onSelect} onCancel={close}
+                items={options}
+                RenderItem={RenderItem}
+                onSelect={onSelect}
+                onCancel={close}
                 vListRef={vListRef}
             />
         </div>
     );
 }
 
-export default function DropDownSelect({options, placeholder='Please select', ...passThruProps}) {
+export default function DropDownSelect({
+    options,
+    placeholder = 'Please select',
+    ...passThruProps
+}: {
+    options: SelectItem[];
+    placeholder?: string;
+} & Omit<Parameters<typeof Select>[0], 'children'>) {
     return (
         <Select {...passThruProps}>
             <ToggleContextProvider>
diff --git a/src/app/components/select/select-context.js b/src/app/components/select/select-context.js
deleted file mode 100644
index 6dfabd119..000000000
--- a/src/app/components/select/select-context.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import {useState, useEffect} from 'react';
-import buildContext from '~/components/jsx-helpers/build-context';
-
-function useContextValue({onValueUpdate}) {
-    const [item, setItem] = useState();
-
-    useEffect(() => onValueUpdate && onValueUpdate(item?.value), [item, onValueUpdate]);
-
-    return {
-        select: setItem,
-        clear: () => setItem(),
-        item
-    };
-}
-
-const {useContext, ContextProvider} = buildContext({useContextValue});
-
-export {
-    useContext as default,
-    ContextProvider as SelectContextProvider
-};
diff --git a/src/app/components/select/select-context.tsx b/src/app/components/select/select-context.tsx
new file mode 100644
index 000000000..3041a61d7
--- /dev/null
+++ b/src/app/components/select/select-context.tsx
@@ -0,0 +1,27 @@
+import {useState, useEffect} from 'react';
+import buildContext from '~/components/jsx-helpers/build-context';
+
+export type SelectItem = {
+    value: string;
+    label: string;
+    selected?: boolean;
+};
+
+function useContextValue({
+    onValueUpdate
+}: {
+    onValueUpdate?: (v: string) => void;
+}) {
+    const [item, setItem] = useState<SelectItem>();
+
+    useEffect(() => item && onValueUpdate?.(item.value), [item, onValueUpdate]);
+
+    return {
+        select: setItem,
+        item
+    };
+}
+
+const {useContext, ContextProvider} = buildContext({useContextValue});
+
+export {useContext as default, ContextProvider as SelectContextProvider};
diff --git a/src/app/components/select/select.js b/src/app/components/select/select.tsx
similarity index 56%
rename from src/app/components/select/select.js
rename to src/app/components/select/select.tsx
index 6af81617c..ec9cf4d4c 100644
--- a/src/app/components/select/select.js
+++ b/src/app/components/select/select.tsx
@@ -2,7 +2,15 @@ import React from 'react';
 import useSelectContext, {SelectContextProvider} from './select-context';
 import ValidationMessage from '~/components/validation-message/validation-message';
 
-function HiddenSelect({name, required, elementRef}) {
+function HiddenSelect({
+    name,
+    required,
+    elementRef
+}: {
+    name: string;
+    required?: boolean;
+    elementRef: React.RefObject<HTMLSelectElement>;
+}) {
     const {item} = useSelectContext();
 
     return (
@@ -12,16 +20,27 @@ function HiddenSelect({name, required, elementRef}) {
     );
 }
 
-function SValidationMessage({elementRef}) {
+function SValidationMessage({
+    elementRef
+}: {
+    elementRef: React.RefObject<HTMLSelectElement>;
+}) {
     const {item} = useSelectContext();
 
-    return (
-        <ValidationMessage watchValue={item} elementRef={elementRef} />
-    );
+    return <ValidationMessage watchValue={item} elementRef={elementRef} />;
 }
 
-export default function Select({name, required, onValueUpdate, children}) {
-    const elementRef = React.useRef();
+export default function Select({
+    name,
+    required,
+    onValueUpdate,
+    children
+}: React.PropsWithChildren<{
+    name: string;
+    required?: boolean;
+    onValueUpdate?: (v: string) => void;
+}>) {
+    const elementRef = React.useRef<HTMLSelectElement>(null);
 
     return (
         <SelectContextProvider contextValueParameters={{onValueUpdate}}>
diff --git a/src/app/components/share/facebook-script.js b/src/app/components/share/facebook-script.js
new file mode 100644
index 000000000..bc0dd08cd
--- /dev/null
+++ b/src/app/components/share/facebook-script.js
@@ -0,0 +1,9 @@
+/* eslint-disable */
+(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id) || !fjs) return;
+  js = d.createElement(s); js.id = id;
+  js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8';
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));
+/* eslint-enable */
diff --git a/src/app/components/share/share.scss b/src/app/components/share/share.scss
index 49113647d..93a9aab4f 100644
--- a/src/app/components/share/share.scss
+++ b/src/app/components/share/share.scss
@@ -6,18 +6,16 @@ $linkedin-blue: #0077b5;
 
 .share-buttons {
     .buttons {
-        display: flex;
+        display: grid;
+        grid-gap: 1rem;
         justify-content: center;
-        margin: 1rem 0;
-
-        &:not(.minimal) {
-            width: 100%;
-        }
+        margin: 0;
 
         @include width-up-to($phone-max) {
             flex-direction: column;
             width: auto;
         }
+        $button-size: 3.2rem;
 
         .btn {
             @extend %button;
@@ -25,12 +23,15 @@ $linkedin-blue: #0077b5;
 
             align-items: center;
             background-image: none;
-            display: flex;
+            border-radius: 50%;
+            display: grid;
             font-weight: normal;
-            justify-content: flex-start;
-            margin: 1rem 0.5rem;
-            padding-left: 1.5rem;
+            height: $button-size;
+            justify-content: center;
+            margin: 0;
+            padding: 0;
             text-transform: none;
+            width: $button-size;
 
             &.facebook {
                 background-color: $facebook-blue;
@@ -46,32 +47,8 @@ $linkedin-blue: #0077b5;
 
             .social-icon {
                 color: text-color(white);
-                margin-right: 1rem;
-                transform: scale(1.5);
-            }
-        }
-
-        &.minimal {
-            display: grid;
-            grid-gap: 1rem;
-            justify-content: center;
-            margin: 0;
-
-            $button-size: 3.2rem;
-            .btn {
-                align-items: center;
-                border-radius: 50%;
-                display: grid;
-                height: $button-size;
-                justify-content: center;
                 margin: 0;
-                padding: 0;
-                width: $button-size;
-
-                .social-icon {
-                    margin: 0;
-                    transform: none;
-                }
+                transform: none;
             }
         }
     }
diff --git a/src/app/components/share/share.js b/src/app/components/share/share.tsx
similarity index 61%
rename from src/app/components/share/share.js
rename to src/app/components/share/share.tsx
index d18dc492e..8d7ac2956 100644
--- a/src/app/components/share/share.js
+++ b/src/app/components/share/share.tsx
@@ -1,32 +1,34 @@
 import React from 'react';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {IconDefinition} from '@fortawesome/fontawesome-svg-core';
 import {faFacebookF} from '@fortawesome/free-brands-svg-icons/faFacebookF';
 import {faXTwitter} from '@fortawesome/free-brands-svg-icons/faXTwitter';
 import {faLinkedinIn} from '@fortawesome/free-brands-svg-icons/faLinkedinIn';
+import './facebook-script';
 import './share.scss';
 
-/* eslint-disable */
-(function(d, s, id) {
-  var js, fjs = d.getElementsByTagName(s)[0];
-  if (d.getElementById(id) || !fjs) return;
-  js = d.createElement(s); js.id = id;
-  js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8';
-  fjs.parentNode.insertBefore(js, fjs);
-}(document, 'script', 'facebook-jssdk'));
-/* eslint-enable */
+type ButtonData = {
+    aClass: string;
+    url: string;
+    icon: IconDefinition;
+    iconLabel: string;
+    target?: string;
+};
 
-function SocialLink({minimal, aClass, url, icon, iconLabel, target}) {
+function SocialLink({aClass, url, icon, iconLabel, target}: ButtonData) {
     return (
-        <a className={aClass} target={target} href={url}>
+        <a className={aClass} target={target} href={url} aria-label={iconLabel}>
             <FontAwesomeIcon className="social-icon" icon={icon} />
-            {
-                !minimal && <span>{iconLabel}</span>
-            }
         </a>
     );
 }
 
-function ShareInterior({pageUrl, message, minimal}) {
+type Props = {
+    pageUrl: string;
+    message: string;
+};
+
+function ShareInterior({pageUrl, message}: Props) {
     const buttonData = [
         {
             aClass: 'fb-xfbml-parse-ignore facebook btn',
@@ -50,27 +52,25 @@ function ShareInterior({pageUrl, message, minimal}) {
     ];
 
     return (
-        <div className={`buttons ${minimal ? 'minimal' : ''}`}>
+        <div className="buttons">
             <div
                 className="fb-share-button"
                 data-href="https://developers.facebook.com/docs/plugins/"
                 data-layout="link"
                 data-mobile-iframe="true"
             >
-                <SocialLink {...buttonData[0]} minimal={minimal} />
+                <SocialLink {...buttonData[0]} />
             </div>
-            {
-                buttonData.slice(1).map((data) =>
-                    <SocialLink {...data} minimal={minimal} key={data} />
-                )
-            }
+            {buttonData.slice(1).map((data) => (
+                <SocialLink {...data} key={data.url} />
+            ))}
         </div>
     );
 }
 
-export function ShareJsx(props) {
+export function ShareJsx(props: Props) {
     return (
-        <div className='share-buttons'>
+        <div className="share-buttons">
             <ShareInterior {...props} />
         </div>
     );
diff --git a/src/app/layouts/default/microsurvey-popup/microsurvey-popup.tsx b/src/app/layouts/default/microsurvey-popup/microsurvey-popup.tsx
index 658e7888f..742ce5635 100644
--- a/src/app/layouts/default/microsurvey-popup/microsurvey-popup.tsx
+++ b/src/app/layouts/default/microsurvey-popup/microsurvey-popup.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {PutAway} from '../shared';
-import useMSQueue from './queue.js';
+import useMSQueue from './queue';
 import useSharedDataContext from '~/contexts/shared-data';
 import './microsurvey-popup.scss';
 
diff --git a/src/app/models/blog-entries.ts b/src/app/models/blog-entries.ts
index c4fcf0339..ac8adcbcf 100644
--- a/src/app/models/blog-entries.ts
+++ b/src/app/models/blog-entries.ts
@@ -1,5 +1,5 @@
 import {useDataFromSlug, camelCaseKeys} from '~/helpers/page-data-utils';
-import {ArticleSummary} from '~pages/blog/blog-context';
+import {ArticleSummary} from '~/pages/blog/blog-context';
 
 const fields = [
     'title',
diff --git a/src/app/pages/blog/article/article.tsx b/src/app/pages/blog/article/article.tsx
index 3789a2154..442b31ad9 100644
--- a/src/app/pages/blog/article/article.tsx
+++ b/src/app/pages/blog/article/article.tsx
@@ -220,7 +220,6 @@ function ShareButtons() {
             message={encodeURIComponent(
                 'Check out this OpenStax blog article!'
             )}
-            minimal={true}
         />
     );
 }
@@ -229,16 +228,16 @@ function FloatingSideBar({
     readTime,
     progress
 }: {
-    readTime: number | undefined;
-    progress: number | React.MutableRefObject<undefined>;
+    readTime?: number;
+    progress: number;
 }) {
     return (
         <div className="floater">
             <div className="sticky-bit">
                 <ProgressRing
-                    radius="45"
+                    radius={45}
                     progress={progress}
-                    stroke="4"
+                    stroke={4}
                     message={readTime}
                 />
                 <ShareButtons />
diff --git a/src/app/pages/blog/gated-content-dialog/gated-content-dialog.tsx b/src/app/pages/blog/gated-content-dialog/gated-content-dialog.tsx
index 12e00bc96..b710723ce 100644
--- a/src/app/pages/blog/gated-content-dialog/gated-content-dialog.tsx
+++ b/src/app/pages/blog/gated-content-dialog/gated-content-dialog.tsx
@@ -4,7 +4,7 @@ import linkHelper from '~/helpers/link';
 import useUserContext from '~/contexts/user';
 import {useDataFromSlug, camelCaseKeys} from '~/helpers/page-data-utils';
 import ContactInfo from '~/components/contact-info/contact-info';
-import {RoleDropdown} from '~/components/role-selector/role-selector';
+import {RoleDropdown, Option} from '~/components/role-selector/role-selector';
 import FormInput from '~/components/form-input/form-input';
 import DropdownSelect from '~/components/select/drop-down/drop-down';
 import useFormTarget from '~/components/form-target/form-target';
@@ -73,16 +73,13 @@ function GatedContentBody({
 function SubjectSelector() {
     const {subjectSnippet: data} = useBlogContext();
     const options = React.useMemo(
-        () =>
-            camelCaseKeys(
-                data.map((obj) => ({
-                    label: obj.name,
-                    value: obj.name
-                }))
-            ),
+        () => data.map((obj) => ({
+            label: obj.name,
+            value: obj.name
+        })),
         [data]
     );
-    const [value, setValue] = React.useState();
+    const [value, setValue] = React.useState<string>();
     const message = value ? '' : 'Please select one';
 
     return (
@@ -170,7 +167,7 @@ function RoleSelector({
             <div className="control-group">
                 <label className="field-label">Your role</label>
                 <RoleDropdown
-                    options={roleOptions}
+                    options={roleOptions as Option[]}
                     setValue={setValue}
                     name="role"
                 />
diff --git a/src/app/pages/blog/search-results/search-results.tsx b/src/app/pages/blog/search-results/search-results.tsx
index 31fb560f8..6f66ef730 100644
--- a/src/app/pages/blog/search-results/search-results.tsx
+++ b/src/app/pages/blog/search-results/search-results.tsx
@@ -7,7 +7,7 @@ import ArticleSummary, {
 import usePaginatorContext, {
     PaginatorContextProvider
 } from '~/components/paginator/paginator-context';
-import {PaginatorControls} from '~/components/paginator/search-results/paginator.js';
+import {PaginatorControls} from '~/components/paginator/search-results/paginator';
 import NoResults from './no-results';
 import useAllArticles from './use-all-articles';
 import './search-results.scss';
diff --git a/src/app/pages/errata-form/form/ErrorSourceSelector.js b/src/app/pages/errata-form/form/ErrorSourceSelector.js
index 17aa279a5..68fd6b231 100644
--- a/src/app/pages/errata-form/form/ErrorSourceSelector.js
+++ b/src/app/pages/errata-form/form/ErrorSourceSelector.js
@@ -1,6 +1,6 @@
 import React, {useState, useRef, useMemo} from 'react';
 import useErrataFormContext from '../errata-form-context';
-import managedInvalidMessage from './InvalidMessage.js';
+import managedInvalidMessage from './InvalidMessage';
 import getFields from '~/models/errata-fields';
 
 const sourceNames = {
diff --git a/src/app/pages/errata-form/form/ErrorTypeSelector.js b/src/app/pages/errata-form/form/ErrorTypeSelector.js
index 67b2cc8f7..6efcc195b 100644
--- a/src/app/pages/errata-form/form/ErrorTypeSelector.js
+++ b/src/app/pages/errata-form/form/ErrorTypeSelector.js
@@ -1,5 +1,5 @@
 import React, {useState, useRef} from 'react';
-import managedInvalidMessage from './InvalidMessage.js';
+import managedInvalidMessage from './InvalidMessage';
 
 function OtherErrorInput() {
     const inputRef = useRef();
diff --git a/src/app/pages/errata-form/form/form.js b/src/app/pages/errata-form/form/form.js
index bf62aad8b..049b645d0 100644
--- a/src/app/pages/errata-form/form/form.js
+++ b/src/app/pages/errata-form/form/form.js
@@ -5,7 +5,7 @@ import ErrorTypeSelector from './ErrorTypeSelector';
 import ErrorSourceSelector from './ErrorSourceSelector';
 import ErrorLocationSelector from './ErrorLocationSelector/ErrorLocationSelector';
 import FileUploader from './FileUploader';
-import managedInvalidMessage from './InvalidMessage.js';
+import managedInvalidMessage from './InvalidMessage';
 import $ from '~/helpers/$';
 import Dialog from '~/components/dialog/dialog';
 import {useNavigate} from 'react-router-dom';
diff --git a/src/app/pages/renewal-form/renewal-form.tsx b/src/app/pages/renewal-form/renewal-form.tsx
index bf127440a..2a48eefca 100644
--- a/src/app/pages/renewal-form/renewal-form.tsx
+++ b/src/app/pages/renewal-form/renewal-form.tsx
@@ -5,7 +5,7 @@ import useUserContext from '~/contexts/user';
 import useAdoptions, {Adoption} from '~/models/renewals';
 import YearSelector from '~/components/year-selector/year-selector';
 import TrackingParameters from '~/components/tracking-parameters/tracking-parameters';
-import {WindowWithSettings} from '~helpers/window-settings';
+import {WindowWithSettings} from '~/helpers/window-settings';
 // -- We'll be trying to do this for the next release.
 // import _adoptionsPromise from './salesforce-data';
 import BookTagsMultiselect, {
diff --git a/src/styles/components/bucket.scss b/src/styles/components/bucket.scss
deleted file mode 100644
index 885aa9f46..000000000
--- a/src/styles/components/bucket.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.quote-bucket .image {
-    background-repeat: no-repeat;
-}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index ab3ec5ae1..c7bee738f 100755
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -358,7 +358,6 @@ a:not([href]) {
 }
 
 @import 'components/animations';
-@import 'components/bucket';
 @import 'components/buttons';
 @import 'components/filter-buttons';
 @import 'components/forms';
diff --git a/test/src/components/paginator.test.js b/test/src/components/paginator.test.js
deleted file mode 100644
index 880312d11..000000000
--- a/test/src/components/paginator.test.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/preact';
-import userEvent from '@testing-library/user-event';
-import {PaginatorContextProvider} from '~/components/paginator/paginator-context';
-import {PaginatorControls} from '~/components/paginator/search-results/paginator.js';
-import {test, expect} from '@jest/globals';
-
-function activePage() {
-    const activeButton = screen.getByRole('button', {current: 'page'});
-
-    return activeButton.textContent;
-}
-
-test('operates by button clicks', async () => {
-    const user = userEvent.setup();
-
-    render(
-        <PaginatorContextProvider contextValueParameters={{initialPage: 2}}>
-            <PaginatorControls items="33" />
-        </PaginatorContextProvider>
-    );
-    await user.click(screen.getByText('Next'));
-    expect(activePage()).toBe('3');
-    await user.click(screen.getByText('4'));
-    expect(activePage()).toBe('4');
-    await user.click(screen.getByText('Previous'));
-    expect(activePage()).toBe('3');
-});
diff --git a/test/src/components/paginator.test.tsx b/test/src/components/paginator.test.tsx
new file mode 100644
index 000000000..8bf336ab7
--- /dev/null
+++ b/test/src/components/paginator.test.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import {render, screen} from '@testing-library/preact';
+import userEvent from '@testing-library/user-event';
+import {PaginatorContextProvider} from '~/components/paginator/paginator-context';
+import {PaginatorControls} from '~/components/paginator/search-results/paginator';
+import SimplePaginator from '~/components/paginator/simple-paginator';
+
+function activePage() {
+    const activeButton = screen.getByRole('button', {current: 'page'});
+
+    return activeButton.textContent;
+}
+
+describe('paginator', () => {
+    const user = userEvent.setup();
+
+    it('operates by button clicks', async () => {
+        render(
+            <PaginatorContextProvider contextValueParameters={{initialPage: 2}}>
+                <PaginatorControls items={33} />
+            </PaginatorContextProvider>
+        );
+        await user.click(screen.getByText('Next'));
+        expect(activePage()).toBe('3');
+        await user.click(screen.getByText('4'));
+        expect(activePage()).toBe('4');
+        await user.click(screen.getByText('Previous'));
+        expect(activePage()).toBe('3');
+    });
+    it('does ellipses when beyond page 4', async () => {
+        const setPage = jest.fn();
+
+        render(
+            <SimplePaginator
+                currentPage={9}
+                setPage={setPage}
+                totalPages={10}
+            />
+        );
+
+        screen.getByText('…', {exact: false});
+        await user.click(screen.getByRole('link', {name: '10'}));
+        expect(setPage).toHaveBeenCalledWith(10);
+    });
+});
diff --git a/test/src/components/role-selector.test.tsx b/test/src/components/role-selector.test.tsx
new file mode 100644
index 000000000..0a8ed850a
--- /dev/null
+++ b/test/src/components/role-selector.test.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import {render, screen} from '@testing-library/preact';
+import RoleSelector from '~/components/role-selector/role-selector';
+import {MemoryRouter} from 'react-router-dom';
+import {LanguageContextProvider} from '~/contexts/language';
+
+// @ts-expect-error does not exist on
+const {routerFuture} = global;
+
+describe('role-selector', () => {
+    it('renders student content', async () => {
+        render(
+            <LanguageContextProvider>
+                <MemoryRouter future={routerFuture}>
+                    <RoleSelector value="Student" setValue={jest.fn()}>
+                        <h1>Student stuff</h1>
+                        <h1>Instructor stuff</h1>
+                    </RoleSelector>
+                </MemoryRouter>
+            </LanguageContextProvider>
+        );
+        expect(
+            (await screen.findByRole('heading', {level: 1})).textContent
+        ).toBe('Student stuff');
+    });
+});
diff --git a/test/src/components/salesforce-form.test.tsx b/test/src/components/salesforce-form.test.tsx
new file mode 100644
index 000000000..c147c2959
--- /dev/null
+++ b/test/src/components/salesforce-form.test.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import {fireEvent, render, screen} from '@testing-library/preact';
+import SalesforceForm from '~/components/salesforce-form/salesforce-form';
+import * as SFC from '~/contexts/salesforce';
+import userEvent from '@testing-library/user-event';
+
+const {SalesforceContextProvider} = SFC;
+const afterSubmit = jest.fn();
+
+function Component() {
+    return (
+        <SalesforceForm postTo="foo" afterSubmit={afterSubmit}>
+            <input type="submit" />
+        </SalesforceForm>
+    );
+}
+
+describe('salesforce-form', () => {
+    it('shows loading until oid is populated', () => {
+        render(<Component />);
+        screen.getByText('Loading...');
+    });
+    it('shows form, submits', async () => {
+        jest.spyOn(SFC, 'default').mockReturnValue({
+            debug: true,
+            oid: 'something'
+        } as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+        render(
+            <SalesforceContextProvider>
+                <Component />
+            </SalesforceContextProvider>
+        );
+        // Can't actually submit in jest
+        screen.getByRole('form').onsubmit = (e) => {
+            e.preventDefault();
+        };
+        await userEvent.click(screen.getByRole('button'));
+        const iframe = document.querySelector('iframe') as HTMLIFrameElement;
+
+        fireEvent.load(iframe);
+        expect(afterSubmit).toHaveBeenCalled();
+    });
+});
diff --git a/test/src/pages/blog/article.test.tsx b/test/src/pages/blog/article.test.tsx
index 2f2efb5fa..ac48694f9 100644
--- a/test/src/pages/blog/article.test.tsx
+++ b/test/src/pages/blog/article.test.tsx
@@ -33,9 +33,9 @@ describe('blog/article', () => {
 
         expect(onload).toHaveBeenCalled();
         screen.getByText('2 min read');
-        expect(document.body.querySelector('.quote-bucket .quote .attribution')).toBeTruthy();
+        expect(document.body.querySelector('.quote .attribution')).toBeTruthy();
         // Bottom-aligned stuff comes at the end
-        expect(document.body.querySelector('.quote-bucket ~ figure.bottom')).toBeTruthy();
+        expect(document.body.querySelector('.quote ~ figure.bottom')).toBeTruthy();
         // CTA should be there
         screen.getByRole('link', {name: 'click me'});
     });
diff --git a/test/src/pages/errata/errata-summary.test.js b/test/src/pages/errata/errata-summary.test.js
deleted file mode 100644
index 133e2780e..000000000
--- a/test/src/pages/errata/errata-summary.test.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/preact';
-import {within} from '@testing-library/dom';
-import userEvent from '@testing-library/user-event';
-import ErrataSummaryLoader from '~/pages/errata-summary/errata-summary';
-import {MemoryRouter} from 'react-router-dom';
-import {test, expect} from '@jest/globals';
-
-const searchStr = '/errata/?book=Anatomy%20and%20Physiology';
-
-window.history.pushState('', '', searchStr);
-
-// This is complicated by the fact that there are two versions that
-// display at once, but one is hidden depending on screen resolution
-// which testing knows nothing about.
-// The desktop version is the last table; there are multiple tables
-// (one for each row) in the mobile version
-async function getTableRows() {
-    const tables = await screen.findAllByRole('table');
-
-    return within(tables.pop()).getAllByRole('row');
-}
-
-test('shows all items in table', async () => {
-    render(
-        <MemoryRouter>
-            <ErrataSummaryLoader />
-        </MemoryRouter>
-    );
-    expect(await getTableRows()).toHaveLength(54);
-});
-test('filters', async () => {
-    render(
-        <MemoryRouter>
-            <ErrataSummaryLoader />
-        </MemoryRouter>
-    );
-    const filters = await screen.findByRole('radiogroup');
-    const user = userEvent.setup({delay: null});
-    const reviewButton = within(filters).queryByText('In Review');
-
-    await user.click(reviewButton);
-    expect(await getTableRows()).toHaveLength(19);
-});
diff --git a/test/src/pages/errata/errata-summary.test.tsx b/test/src/pages/errata/errata-summary.test.tsx
new file mode 100644
index 000000000..43a3c9ff9
--- /dev/null
+++ b/test/src/pages/errata/errata-summary.test.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import {render, screen, fireEvent} from '@testing-library/preact';
+import {within} from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import ErrataSummaryLoader from '~/pages/errata-summary/errata-summary';
+import {MemoryRouter} from 'react-router-dom';
+
+// @ts-expect-error does not exist on
+const {routerFuture} = global;
+
+const searchStr = '/errata/?book=Anatomy%20and%20Physiology';
+
+window.history.pushState('', '', searchStr);
+
+// This is complicated by the fact that there are two versions that
+// display at once, but one is hidden depending on screen resolution
+// which testing knows nothing about.
+// The desktop version is the last table; there are multiple tables
+// (one for each row) in the mobile version
+async function getTableRows() {
+    const tables = await screen.findAllByRole('table');
+
+    return within(tables.pop() as HTMLElement).getAllByRole('row');
+}
+
+describe('errata-summary', () => {
+    test('shows all items in table', async () => {
+        render(
+            <MemoryRouter future={routerFuture}>
+                <ErrataSummaryLoader />
+            </MemoryRouter>
+        );
+        expect(await getTableRows()).toHaveLength(54);
+    });
+    test('filters', async () => {
+        render(
+            <MemoryRouter future={routerFuture}>
+                <ErrataSummaryLoader />
+            </MemoryRouter>
+        );
+        const user = userEvent.setup({delay: null});
+        const reviewButton = await screen.findByRole('radio', {
+            name: 'In Review'
+        });
+
+        await user.click(reviewButton);
+        expect(await getTableRows()).toHaveLength(19);
+        const allButton = screen.getByRole('radio', {name: 'View All'});
+
+        expect(screen.getAllByRole('table')).toHaveLength(19);
+        // Ignores anything but space or enter
+        fireEvent.keyDown(allButton, {key: 'a'});
+        expect(screen.getAllByRole('table')).toHaveLength(19);
+
+        // Acts on Enter
+        fireEvent.keyDown(allButton, {key: 'Enter'});
+        expect(screen.getAllByRole('table')).toHaveLength(54);
+    });
+});
diff --git a/test/src/pages/webinars/explore-page.test.tsx b/test/src/pages/webinars/explore-page.test.tsx
index fa4ed962c..623a938ed 100644
--- a/test/src/pages/webinars/explore-page.test.tsx
+++ b/test/src/pages/webinars/explore-page.test.tsx
@@ -1,15 +1,19 @@
 import React from 'react';
 import {describe, it} from '@jest/globals';
 import {render, screen} from '@testing-library/preact';
+import userEvent from '@testing-library/user-event';
 import {MemoryRouter, Routes, Route} from 'react-router-dom';
 import ExplorePage from '~/pages/webinars/explore-page/explore-page';
 import useWebinarContext from '~/pages/webinars/webinar-context';
 import {pastWebinar} from '../../data/webinars';
 import type {Webinar} from '~/pages/webinars/types';
 
+// @ts-expect-error does not exist on
+const {routerFuture} = global;
+
 function Component({path}: {path: string}) {
     return (
-        <MemoryRouter basename='/webinars' initialEntries={[path]}>
+        <MemoryRouter basename='/webinars' initialEntries={[path]} future={routerFuture}>
             <Routes>
                 <Route
                     path='explore/:exploreType/:topic'
@@ -21,6 +25,7 @@ function Component({path}: {path: string}) {
 }
 
 jest.mock('~/pages/webinars/webinar-context', () => jest.fn());
+jest.mock('~/helpers/use-document-head', () => jest.fn());
 
 const webinars: Webinar[] = [0, 1, 2, 3, 4]
     .map(() => JSON.parse(JSON.stringify(pastWebinar)))
@@ -48,6 +53,8 @@ webinars[4].subjects.push({
 });
 
 describe('webinars explore page', () => {
+    const user = userEvent.setup();
+
     (useWebinarContext as jest.Mock).mockImplementation(() => {
         return {
             latestWebinars: webinars,
@@ -93,7 +100,7 @@ describe('webinars explore page', () => {
             2
         );
     });
-    it('paginates if there are more than 9', () => {
+    it('paginates if there are more than 9', async () => {
         (useWebinarContext as jest.Mock).mockImplementation(() => {
             return {
                 latestWebinars: webinars.concat(Array(15).fill(webinars[3])),
@@ -105,6 +112,14 @@ describe('webinars explore page', () => {
         expect(screen.getAllByText('Showing 1-9 of 16 webinars')).toHaveLength(
             1
         );
+        await user.click(screen.getByRole('button', {name: 'next'}));
+        expect(screen.getAllByText('Showing 10-16 of 16 webinars')).toHaveLength(
+            1
+        );
+        await user.click(screen.getByRole('button', {name: 'previous'}));
+        expect(screen.getAllByText('Showing 1-9 of 16 webinars')).toHaveLength(
+            1
+        );
     });
     it('shows no results with invalid explore type', () => {
         render(<Component path='/webinars/explore/invalid/asubject' />);
diff --git a/tsconfig.json b/tsconfig.json
index c71c65cb1..9ccaaaad3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,7 @@
       "esModuleInterop": true,
       "moduleResolution": "bundler",
       "paths": {
-        "~*": ["./src/app/*"]
+        "~/*": ["./src/app/*"]
       }
     },
     "include": [