@codecademy/brand 4.0.0-alpha.fb4adf2b4d.0 → 4.0.0

package/dist/Notifications/NotificationsContents.js

@@ -0,0 +1,85 @@
+import { Box, FlexBox, Text } from '@codecademy/gamut';
+import { CheckerDense } from '@codecademy/gamut-patterns';
+import { useEffect, useRef } from 'react';
+import * as React from 'react';
+import { useOnEscHandler } from '../AppHeader/shared';
+import { NotificationList } from '../NotificationList';
+import { NotificationDialog } from './elements';
+import { useNotificationButtons } from './useNotificationButtons';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const NotificationsContents = ({
+  actions,
+  handleClose,
+  notifications
+}) => {
+  const notificationListRef = useRef(null);
+  const {
+    clearAllButton,
+    closeButton,
+    showMoreButton,
+    notifications: visibleNotifications
+  } = useNotificationButtons({
+    actions,
+    handleClose,
+    notificationListRef,
+    notifications
+  });
+  const onKeyDown = useOnEscHandler(handleClose);
+  const onNotificationClick = notification => {
+    actions.click(notification);
+    if (notification.unread) {
+      actions.read([notification]);
+    }
+  };
+  useEffect(() => {
+    notificationListRef?.current?.focus();
+  }, [notificationListRef]);
+  useEffect(() => {
+    const unreadVisibleNotifications = visibleNotifications.filter(notification => notification.unread);
+    if (unreadVisibleNotifications.length) {
+      actions.read(unreadVisibleNotifications);
+    }
+  }, [actions, visibleNotifications]);
+  return /*#__PURE__*/_jsxs(NotificationDialog, {
+    "aria-label": visibleNotifications.length ? `${notifications.length} unread notifications` : `My Notifications`,
+    "aria-modal": "true",
+    bg: "background",
+    "data-autofocus": true,
+    onKeyDown: onKeyDown,
+    ref: notificationListRef,
+    role: "dialog",
+    tabIndex: -1,
+    children: [/*#__PURE__*/_jsxs(FlexBox, {
+      alignItems: "center",
+      flexDirection: "row",
+      height: "40",
+      justifyContent: "space-between",
+      mb: 16,
+      px: 32,
+      children: [/*#__PURE__*/_jsx(Text, {
+        as: "h1",
+        fontSize: 22,
+        children: "My Notifications"
+      }), /*#__PURE__*/_jsxs(FlexBox, {
+        children: [clearAllButton, closeButton]
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      px: 32,
+      children: /*#__PURE__*/_jsx(CheckerDense, {
+        height: "1px",
+        display: "flex"
+      })
+    }), /*#__PURE__*/_jsxs(Box, {
+      maxHeight: "520px",
+      overflow: "auto",
+      children: [/*#__PURE__*/_jsx(Box, {
+        pb: 16,
+        children: /*#__PURE__*/_jsx(NotificationList, {
+          notifications: visibleNotifications,
+          onDismiss: actions.dismiss,
+          onNotificationClick: onNotificationClick
+        })
+      }), showMoreButton]
+    })]
+  });
+};

package/dist/Notifications/NotificationsDropdown.d.ts

@@ -0,0 +1,2 @@
+import { NotificationsDropdownProps } from './types';
+export declare const NotificationsDropdown: React.FC<NotificationsDropdownProps>;

package/dist/Notifications/NotificationsDropdown.js

@@ -0,0 +1,25 @@
+import { Popover } from '@codecademy/gamut';
+import { NotificationsWrapper } from './elements';
+import { NotificationsContents } from './NotificationsContents';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const NotificationsDropdown = ({
+  bellRef,
+  handleClose,
+  isOpen,
+  ...props
+}) => {
+  return /*#__PURE__*/_jsx(Popover, {
+    align: "right",
+    verticalOffset: 1,
+    outline: true,
+    isOpen: isOpen,
+    targetRef: bellRef,
+    widthRestricted: false,
+    children: /*#__PURE__*/_jsx(NotificationsWrapper, {
+      children: /*#__PURE__*/_jsx(NotificationsContents, {
+        ...props,
+        handleClose: handleClose
+      })
+    })
+  });
+};

package/dist/Notifications/__fixtures__/NotificationTestComponent.d.ts

@@ -0,0 +1,2 @@
+import { HeaderNotificationProps } from '../useHeaderNotifications';
+export declare const NotificationTestComponent: React.FC<HeaderNotificationProps>;

package/dist/Notifications/__fixtures__/NotificationTestComponent.js

@@ -0,0 +1,12 @@
+import { AppHeaderListItem } from '../../AppHeader/AppHeaderElements/AppHeaderListItem';
+import { AppHeaderProvider } from '../../AppHeader/AppHeaderElements/AppHeaderProvider';
+import { useHeaderNotifications } from '../useHeaderNotifications';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const NotificationTestComponent = props => {
+  const [notificationsBell, notificationsView] = useHeaderNotifications(props);
+  return /*#__PURE__*/_jsxs(AppHeaderProvider, {
+    children: [/*#__PURE__*/_jsx(AppHeaderListItem, {
+      children: notificationsBell?.renderElement()
+    }), notificationsView]
+  });
+};

package/dist/Notifications/__fixtures__/stubs.d.ts

@@ -0,0 +1,2 @@
+import { Notification } from '../../NotificationList/typings';
+export declare const createStubNotification: (overrides?: Partial<Notification>) => Notification;

package/dist/Notifications/__fixtures__/stubs.js

@@ -0,0 +1,8 @@
+export const createStubNotification = overrides => ({
+  campaign: 'existence_is_pain',
+  date: '5 hours',
+  id: '1',
+  link: 'https://codecademy.com',
+  text: "Look at me! I'm Mr. Notification!",
+  ...overrides
+});

package/dist/Notifications/constants.d.ts

@@ -0,0 +1,4 @@
+/**
+ * How many notifications are visible in the list at once by default.
+ */
+export declare const defaultDisplayLimit = 3;

package/dist/Notifications/constants.js

@@ -0,0 +1,4 @@
+/**
+ * How many notifications are visible in the list at once by default.
+ */
+export const defaultDisplayLimit = 3;

package/dist/Notifications/elements.d.ts

@@ -0,0 +1,12 @@
+export declare const NotificationsWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@codecademy/gamut").BoxProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "content" | "translate" | "property" | "hidden" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | keyof import("react").ClassAttributes<HTMLDivElement>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const NotificationDialog: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@codecademy/gamut").BoxProps & Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "content" | "translate" | "property" | "hidden" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | keyof import("react").ClassAttributes<HTMLDivElement>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/dist/Notifications/elements.js

@@ -0,0 +1,21 @@
+import _styled from "@emotion/styled/base";
+import { Box, focusVisibleStyle } from '@codecademy/gamut';
+import { css } from '@codecademy/gamut-styles';
+export const NotificationsWrapper = /*#__PURE__*/_styled(Box, {
+  target: "eg81h671",
+  label: "NotificationsWrapper"
+})(css({
+  display: 'flex',
+  textAlign: 'left',
+  width: 400
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Ob3RpZmljYXRpb25zL2VsZW1lbnRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJb0MiLCJmaWxlIjoiLi4vLi4vc3JjL05vdGlmaWNhdGlvbnMvZWxlbWVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBmb2N1c1Zpc2libGVTdHlsZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25zV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICB0ZXh0QWxpZ246ICdsZWZ0JyxcbiAgICB3aWR0aDogNDAwLFxuICB9KVxuKTtcblxuY29uc3QgZm9jdXNTdHlsZSA9IGZvY3VzVmlzaWJsZVN0eWxlKCk7XG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25EaWFsb2cgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBwYjogMjQsXG4gICAgcHQ6IDMyLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgLi4uZm9jdXNTdHlsZSxcbiAgfSlcbik7XG4iXX0= */");
+const focusStyle = focusVisibleStyle();
+export const NotificationDialog = /*#__PURE__*/_styled(Box, {
+  target: "eg81h670",
+  label: "NotificationDialog"
+})(css({
+  pb: 24,
+  pt: 32,
+  width: '100%',
+  ...focusStyle
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Ob3RpZmljYXRpb25zL2VsZW1lbnRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFja0MiLCJmaWxlIjoiLi4vLi4vc3JjL05vdGlmaWNhdGlvbnMvZWxlbWVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBmb2N1c1Zpc2libGVTdHlsZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25zV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICB0ZXh0QWxpZ246ICdsZWZ0JyxcbiAgICB3aWR0aDogNDAwLFxuICB9KVxuKTtcblxuY29uc3QgZm9jdXNTdHlsZSA9IGZvY3VzVmlzaWJsZVN0eWxlKCk7XG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25EaWFsb2cgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBwYjogMjQsXG4gICAgcHQ6IDMyLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgLi4uZm9jdXNTdHlsZSxcbiAgfSlcbik7XG4iXX0= */");

package/dist/Notifications/types.d.ts

@@ -0,0 +1,24 @@
+import { ButtonBaseElements } from '@codecademy/gamut';
+import { Notification } from '../NotificationList/typings';
+export type NotificationActions = {
+    clear: () => void;
+    click: (notification: Notification) => void;
+    dismiss: (notification: Notification) => void;
+    read: (notifications: Notification[]) => void;
+    track: (target: string) => void;
+};
+export type AppHeaderNotificationSettings = {
+    actions: NotificationActions;
+    notifications: Notification[];
+    onEnable: () => void;
+};
+export interface NotificationsProps {
+    actions: NotificationActions;
+    handleClose: () => void;
+    notifications: Notification[];
+    notificationListRef?: React.RefObject<HTMLDivElement>;
+}
+export interface NotificationsDropdownProps extends NotificationsProps {
+    bellRef: React.RefObject<ButtonBaseElements>;
+    isOpen: boolean;
+}

package/dist/Notifications/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Notifications/useHeaderNotifications.d.ts

@@ -0,0 +1,10 @@
+import { AppHeaderNotificationSettings, NotificationsDropdownProps } from './types';
+export type HeaderNotificationProps = {
+    settings: AppHeaderNotificationSettings | undefined;
+    Renderer: React.ComponentType<NotificationsDropdownProps>;
+};
+export declare const useHeaderNotifications: ({ settings, Renderer, }: HeaderNotificationProps) => null[] | readonly [{
+    readonly id: "notifications";
+    readonly type: "render-element";
+    readonly renderElement: () => import("react/jsx-runtime").JSX.Element;
+}, import("react/jsx-runtime").JSX.Element];

package/dist/Notifications/useHeaderNotifications.js

@@ -0,0 +1,37 @@
+import { useRef, useState } from 'react';
+import { AnimatedHeaderZone } from '../AppHeader/shared';
+import { NotificationBell } from './NotificationBell';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const useHeaderNotifications = ({
+  settings,
+  Renderer
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const bellRef = useRef(null);
+  if (!settings) {
+    return [null, null];
+  }
+  const handleClose = async () => {
+    await setIsOpen(false);
+    await bellRef.current?.focus();
+  };
+  return [{
+    id: 'notifications',
+    type: 'render-element',
+    renderElement: () => /*#__PURE__*/_jsx(NotificationBell, {
+      bellRef: bellRef,
+      isOpen: isOpen,
+      notifications: settings.notifications,
+      setIsOpen: setIsOpen
+    })
+  }, /*#__PURE__*/_jsx(AnimatedHeaderZone, {
+    visible: isOpen,
+    children: /*#__PURE__*/_jsx(Renderer, {
+      actions: settings.actions,
+      bellRef: bellRef,
+      notifications: settings.notifications,
+      isOpen: isOpen,
+      handleClose: handleClose
+    })
+  }, "notifications-content")];
+};

package/dist/Notifications/useNotificationButtons.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { NotificationsProps } from './types';
+interface NotificationButtons extends Pick<NotificationsProps, 'notifications'> {
+    clearAllButton: ReactElement | null;
+    closeButton: ReactElement;
+    showMoreButton: ReactElement | null;
+}
+export declare const useNotificationButtons: ({ actions, handleClose, notifications, notificationListRef, }: NotificationsProps) => NotificationButtons;
+export {};

package/dist/Notifications/useNotificationButtons.js

@@ -0,0 +1,56 @@
+import { Box, IconButton, TextButton } from '@codecademy/gamut';
+import { MiniDeleteIcon } from '@codecademy/gamut-icons';
+import { useState } from 'react';
+import { defaultDisplayLimit } from './constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const useNotificationButtons = ({
+  actions,
+  handleClose,
+  notifications,
+  notificationListRef
+}) => {
+  const [showMore, setShowMore] = useState(false);
+  const [displayLimit, amountAdjective] = showMore ? [notifications.length, 'Less'] : [defaultDisplayLimit, 'More'];
+  const closeButton = /*#__PURE__*/_jsx(IconButton, {
+    icon: MiniDeleteIcon,
+    onClick: handleClose,
+    tip: "Close"
+  });
+  if (notifications.length === 0) {
+    return {
+      clearAllButton: null,
+      closeButton,
+      showMoreButton: null,
+      notifications
+    };
+  }
+  const clearAllButton = notifications.length > 0 && (notifications.length <= displayLimit || showMore) ? /*#__PURE__*/_jsx(TextButton, {
+    onClick: () => {
+      actions.clear();
+      actions.track('notification_clear_all');
+      notificationListRef?.current?.focus();
+    },
+    "aria-label": `Clear all ${notifications.length} notifications`,
+    mr: 8,
+    children: "Clear All"
+  }) : null;
+  const showMoreButton = notifications.length <= defaultDisplayLimit ? null : /*#__PURE__*/_jsx(Box, {
+    px: 32,
+    children: /*#__PURE__*/_jsxs(TextButton, {
+      onClick: () => {
+        setShowMore(!showMore);
+        if (!showMore) {
+          actions.track('notification_show_more');
+          actions.read(notifications.slice(defaultDisplayLimit));
+        }
+      },
+      children: ["Show ", amountAdjective]
+    })
+  });
+  return {
+    clearAllButton,
+    closeButton,
+    showMoreButton,
+    notifications: notifications.slice(0, displayLimit)
+  };
+};

package/dist/PageAlerts/PageAlerts.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { PageAlert } from './types';
+export type PageAlertsProps = {
+    extra?: PageAlert[];
+};
+export declare const AlertArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PageAlerts: React.FC<PageAlertsProps>;

package/dist/PageAlerts/PageAlerts.js

@@ -0,0 +1,75 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { Alert, BodyPortal, ContentContainer } from '@codecademy/gamut';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import * as React from 'react';
+import { PageAlertsContext } from './PageAlertsProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const AlertArea = /*#__PURE__*/_styled("div", {
+  target: "e1ctrpie1",
+  label: "AlertArea"
+})(process.env.NODE_ENV === "production" ? {
+  name: "pe9r4g",
+  styles: "display:grid;justify-content:center;width:100%;padding:1rem 0rem;grid-template-columns:1fr;row-gap:1rem;top:3.5rem;left:50%;z-index:15;position:fixed;transform:translate(-50%, 0)"
+} : {
+  name: "pe9r4g",
+  styles: "display:grid;justify-content:center;width:100%;padding:1rem 0rem;grid-template-columns:1fr;row-gap:1rem;top:3.5rem;left:50%;z-index:15;position:fixed;transform:translate(-50%, 0)/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QYWdlQWxlcnRzL1BhZ2VBbGVydHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVtQyIsImZpbGUiOiIuLi8uLi9zcmMvUGFnZUFsZXJ0cy9QYWdlQWxlcnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFsZXJ0LCBCb2R5UG9ydGFsLCBDb250ZW50Q29udGFpbmVyIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUNvbnRleHQsIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7XG4gIFBhZ2VBbGVydHNDb250ZXh0LFxuICBQYWdlQWxlcnRzQ29udGV4dFZhbHVlLFxufSBmcm9tICcuL1BhZ2VBbGVydHNQcm92aWRlcic7XG5pbXBvcnQgeyBQYWdlQWxlcnQgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IHR5cGUgUGFnZUFsZXJ0c1Byb3BzID0ge1xuICBleHRyYT86IFBhZ2VBbGVydFtdO1xufTtcblxuZXhwb3J0IGNvbnN0IEFsZXJ0QXJlYSA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB3aWR0aDogMTAwJTtcbiAgcGFkZGluZzogMXJlbSAwcmVtO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFmcjtcbiAgcm93LWdhcDogMXJlbTtcbiAgdG9wOiAzLjVyZW07XG4gIGxlZnQ6IDUwJTtcbiAgei1pbmRleDogMTU7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwgMCk7XG5gO1xuXG5jb25zdCBTdHlsZWRBbGVydCA9IHN0eWxlZChBbGVydClgXG4gIG1heC13aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQYWdlQWxlcnRzOiBSZWFjdC5GQzxQYWdlQWxlcnRzUHJvcHM+ID0gKHsgZXh0cmEgPSBbXSB9KSA9PiB7XG4gIGNvbnN0IHsgYWxlcnRzLCBjbG9zZUFsZXJ0LCBhZGRBbGVydCB9ID1cbiAgICB1c2VDb250ZXh0PFBhZ2VBbGVydHNDb250ZXh0VmFsdWU+KFBhZ2VBbGVydHNDb250ZXh0KTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGV4dHJhLmZvckVhY2goYWRkQWxlcnQpO1xuICB9LCBbZXh0cmEsIGFkZEFsZXJ0XSk7XG5cbiAgY29uc3QgW2FsZXJ0QXJlYSwgc2V0QWxlcnRBcmVhXSA9IHVzZVN0YXRlPEhUTUxEaXZFbGVtZW50PigpO1xuICBjb25zdCByZWZDYWxsYmFjayA9IHVzZUNhbGxiYWNrKFxuICAgIChhbGVydEFyZWE6IEhUTUxEaXZFbGVtZW50KSA9PiB7XG4gICAgICBzZXRBbGVydEFyZWEoYWxlcnRBcmVhKTtcbiAgICB9LFxuICAgIFtzZXRBbGVydEFyZWFdXG4gICk7XG5cbiAgY29uc3QgZm9jdXNBbGVydENsb3NlQnV0dG9uID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGNvbnN0IHJlZkJ1dHRvbiA9IGFsZXJ0QXJlYT8ucXVlcnlTZWxlY3RvcignYnV0dG9uJyk7XG4gICAgcmVmQnV0dG9uPy5mb2N1cygpO1xuICB9LCBbYWxlcnRBcmVhXSk7XG5cbiAgLy8gRm9jdXMgd2hlbiBhbGVydEFyZWEgaXMgZmlyc3QgcmVuZGVyZWQsIGFzIHdlbGwgYXMgd2hlbiBhbGVydHMgY2hhbmdlXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgZm9jdXNBbGVydENsb3NlQnV0dG9uKCk7XG4gIH0sIFthbGVydHMsIGZvY3VzQWxlcnRDbG9zZUJ1dHRvbiwgYWxlcnRBcmVhXSk7XG5cbiAgaWYgKCFhbGVydHM/Lmxlbmd0aCkgcmV0dXJuIG51bGw7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm9keVBvcnRhbD5cbiAgICAgIDxBbGVydEFyZWFcbiAgICAgICAgcm9sZT1cImFsZXJ0XCJcbiAgICAgICAgYXJpYS1saXZlPVwiYXNzZXJ0aXZlXCJcbiAgICAgICAga2V5PVwiYWxlcnRzXCJcbiAgICAgICAgcmVmPXtyZWZDYWxsYmFja31cbiAgICAgID5cbiAgICAgICAge2FsZXJ0cy5tYXAoKGFsZXJ0KSA9PiAoXG4gICAgICAgICAgPENvbnRlbnRDb250YWluZXIgc2l6ZT1cIm1lZGl1bVwiIGtleT17YWxlcnQubWVzc2FnZX0+XG4gICAgICAgICAgICA8U3R5bGVkQWxlcnRcbiAgICAgICAgICAgICAgY3RhPXthbGVydC5jdGF9XG4gICAgICAgICAgICAgIG9uQ2xvc2U9e1xuICAgICAgICAgICAgICAgIGFsZXJ0LnBlcm1hbmVudFxuICAgICAgICAgICAgICAgICAgPyB1bmRlZmluZWRcbiAgICAgICAgICAgICAgICAgIDogKCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgIGNsb3NlQWxlcnQoYWxlcnQubWVzc2FnZSk7XG4gICAgICAgICAgICAgICAgICAgICAgYWxlcnQ/Lm9uQ2xvc2U/LigpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgdHlwZT17YWxlcnQudHlwZX1cbiAgICAgICAgICAgICAgcGxhY2VtZW50PVwiZmxvYXRpbmdcIlxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICB7YWxlcnQubWVzc2FnZX1cbiAgICAgICAgICAgIDwvU3R5bGVkQWxlcnQ+XG4gICAgICAgICAgPC9Db250ZW50Q29udGFpbmVyPlxuICAgICAgICApKX1cbiAgICAgIDwvQWxlcnRBcmVhPlxuICAgIDwvQm9keVBvcnRhbD5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledAlert = /*#__PURE__*/_styled(Alert, {
+  target: "e1ctrpie0",
+  label: "StyledAlert"
+})(process.env.NODE_ENV === "production" ? {
+  name: "qhxz92",
+  styles: "max-width:100%"
+} : {
+  name: "qhxz92",
+  styles: "max-width:100%/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QYWdlQWxlcnRzL1BhZ2VBbGVydHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZCaUMiLCJmaWxlIjoiLi4vLi4vc3JjL1BhZ2VBbGVydHMvUGFnZUFsZXJ0cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBbGVydCwgQm9keVBvcnRhbCwgQ29udGVudENvbnRhaW5lciB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VDb250ZXh0LCB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge1xuICBQYWdlQWxlcnRzQ29udGV4dCxcbiAgUGFnZUFsZXJ0c0NvbnRleHRWYWx1ZSxcbn0gZnJvbSAnLi9QYWdlQWxlcnRzUHJvdmlkZXInO1xuaW1wb3J0IHsgUGFnZUFsZXJ0IH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCB0eXBlIFBhZ2VBbGVydHNQcm9wcyA9IHtcbiAgZXh0cmE/OiBQYWdlQWxlcnRbXTtcbn07XG5cbmV4cG9ydCBjb25zdCBBbGVydEFyZWEgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBncmlkO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgd2lkdGg6IDEwMCU7XG4gIHBhZGRpbmc6IDFyZW0gMHJlbTtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxZnI7XG4gIHJvdy1nYXA6IDFyZW07XG4gIHRvcDogMy41cmVtO1xuICBsZWZ0OiA1MCU7XG4gIHotaW5kZXg6IDE1O1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIDApO1xuYDtcblxuY29uc3QgU3R5bGVkQWxlcnQgPSBzdHlsZWQoQWxlcnQpYFxuICBtYXgtd2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgUGFnZUFsZXJ0czogUmVhY3QuRkM8UGFnZUFsZXJ0c1Byb3BzPiA9ICh7IGV4dHJhID0gW10gfSkgPT4ge1xuICBjb25zdCB7IGFsZXJ0cywgY2xvc2VBbGVydCwgYWRkQWxlcnQgfSA9XG4gICAgdXNlQ29udGV4dDxQYWdlQWxlcnRzQ29udGV4dFZhbHVlPihQYWdlQWxlcnRzQ29udGV4dCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBleHRyYS5mb3JFYWNoKGFkZEFsZXJ0KTtcbiAgfSwgW2V4dHJhLCBhZGRBbGVydF0pO1xuXG4gIGNvbnN0IFthbGVydEFyZWEsIHNldEFsZXJ0QXJlYV0gPSB1c2VTdGF0ZTxIVE1MRGl2RWxlbWVudD4oKTtcbiAgY29uc3QgcmVmQ2FsbGJhY2sgPSB1c2VDYWxsYmFjayhcbiAgICAoYWxlcnRBcmVhOiBIVE1MRGl2RWxlbWVudCkgPT4ge1xuICAgICAgc2V0QWxlcnRBcmVhKGFsZXJ0QXJlYSk7XG4gICAgfSxcbiAgICBbc2V0QWxlcnRBcmVhXVxuICApO1xuXG4gIGNvbnN0IGZvY3VzQWxlcnRDbG9zZUJ1dHRvbiA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBjb25zdCByZWZCdXR0b24gPSBhbGVydEFyZWE/LnF1ZXJ5U2VsZWN0b3IoJ2J1dHRvbicpO1xuICAgIHJlZkJ1dHRvbj8uZm9jdXMoKTtcbiAgfSwgW2FsZXJ0QXJlYV0pO1xuXG4gIC8vIEZvY3VzIHdoZW4gYWxlcnRBcmVhIGlzIGZpcnN0IHJlbmRlcmVkLCBhcyB3ZWxsIGFzIHdoZW4gYWxlcnRzIGNoYW5nZVxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGZvY3VzQWxlcnRDbG9zZUJ1dHRvbigpO1xuICB9LCBbYWxlcnRzLCBmb2N1c0FsZXJ0Q2xvc2VCdXR0b24sIGFsZXJ0QXJlYV0pO1xuXG4gIGlmICghYWxlcnRzPy5sZW5ndGgpIHJldHVybiBudWxsO1xuXG4gIHJldHVybiAoXG4gICAgPEJvZHlQb3J0YWw+XG4gICAgICA8QWxlcnRBcmVhXG4gICAgICAgIHJvbGU9XCJhbGVydFwiXG4gICAgICAgIGFyaWEtbGl2ZT1cImFzc2VydGl2ZVwiXG4gICAgICAgIGtleT1cImFsZXJ0c1wiXG4gICAgICAgIHJlZj17cmVmQ2FsbGJhY2t9XG4gICAgICA+XG4gICAgICAgIHthbGVydHMubWFwKChhbGVydCkgPT4gKFxuICAgICAgICAgIDxDb250ZW50Q29udGFpbmVyIHNpemU9XCJtZWRpdW1cIiBrZXk9e2FsZXJ0Lm1lc3NhZ2V9PlxuICAgICAgICAgICAgPFN0eWxlZEFsZXJ0XG4gICAgICAgICAgICAgIGN0YT17YWxlcnQuY3RhfVxuICAgICAgICAgICAgICBvbkNsb3NlPXtcbiAgICAgICAgICAgICAgICBhbGVydC5wZXJtYW5lbnRcbiAgICAgICAgICAgICAgICAgID8gdW5kZWZpbmVkXG4gICAgICAgICAgICAgICAgICA6ICgpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICBjbG9zZUFsZXJ0KGFsZXJ0Lm1lc3NhZ2UpO1xuICAgICAgICAgICAgICAgICAgICAgIGFsZXJ0Py5vbkNsb3NlPy4oKTtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIHR5cGU9e2FsZXJ0LnR5cGV9XG4gICAgICAgICAgICAgIHBsYWNlbWVudD1cImZsb2F0aW5nXCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge2FsZXJ0Lm1lc3NhZ2V9XG4gICAgICAgICAgICA8L1N0eWxlZEFsZXJ0PlxuICAgICAgICAgIDwvQ29udGVudENvbnRhaW5lcj5cbiAgICAgICAgKSl9XG4gICAgICA8L0FsZXJ0QXJlYT5cbiAgICA8L0JvZHlQb3J0YWw+XG4gICk7XG59O1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const PageAlerts = ({
+  extra = []
+}) => {
+  const {
+    alerts,
+    closeAlert,
+    addAlert
+  } = useContext(PageAlertsContext);
+  useEffect(() => {
+    extra.forEach(addAlert);
+  }, [extra, addAlert]);
+  const [alertArea, setAlertArea] = useState();
+  const refCallback = useCallback(alertArea => {
+    setAlertArea(alertArea);
+  }, [setAlertArea]);
+  const focusAlertCloseButton = useCallback(() => {
+    const refButton = alertArea?.querySelector('button');
+    refButton?.focus();
+  }, [alertArea]);
+
+  // Focus when alertArea is first rendered, as well as when alerts change
+  useEffect(() => {
+    focusAlertCloseButton();
+  }, [alerts, focusAlertCloseButton, alertArea]);
+  if (!alerts?.length) return null;
+  return /*#__PURE__*/_jsx(BodyPortal, {
+    children: /*#__PURE__*/_jsx(AlertArea, {
+      role: "alert",
+      "aria-live": "assertive",
+      ref: refCallback,
+      children: alerts.map(alert => /*#__PURE__*/_jsx(ContentContainer, {
+        size: "medium",
+        children: /*#__PURE__*/_jsx(StyledAlert, {
+          cta: alert.cta,
+          onClose: alert.permanent ? undefined : () => {
+            closeAlert(alert.message);
+            alert?.onClose?.();
+          },
+          type: alert.type,
+          placement: "floating",
+          children: alert.message
+        })
+      }, alert.message))
+    }, "alerts")
+  });
+};

package/dist/PageAlerts/PageAlertsProvider.d.ts

@@ -0,0 +1,11 @@
+import { WithChildrenProp } from '@codecademy/gamut';
+import * as React from 'react';
+import { PageAlert } from './types';
+export declare const usePageAlertsContext: () => PageAlertsContextValue;
+export type PageAlertsContextValue = {
+    alerts: PageAlert[];
+    addAlert: (alert: PageAlert) => void;
+    closeAlert: (alertMessage: string) => void;
+};
+export declare const PageAlertsContext: React.Context<PageAlertsContextValue>;
+export declare const PageAlertsProvider: React.FC<WithChildrenProp>;

package/dist/PageAlerts/PageAlertsProvider.js

@@ -0,0 +1,34 @@
+import noop from 'lodash/fp/noop';
+import { useCallback, useContext, useState } from 'react';
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const usePageAlertsContext = () => useContext(PageAlertsContext);
+export const PageAlertsContext = /*#__PURE__*/React.createContext({
+  alerts: [],
+  addAlert: noop,
+  closeAlert: noop
+});
+export const PageAlertsProvider = ({
+  children
+}) => {
+  const [alerts, setAlerts] = useState([]);
+  const addAlert = useCallback(newAlert => {
+    setAlerts(existingAlerts => {
+      if (!existingAlerts.some(alert => alert.message === newAlert.message)) return [...existingAlerts, newAlert];
+      return existingAlerts;
+    });
+  }, []);
+  const closeAlert = useCallback(message => {
+    setAlerts(existingAlerts => {
+      return existingAlerts.filter(alert => alert.message !== message);
+    });
+  }, []);
+  return /*#__PURE__*/_jsx(PageAlertsContext.Provider, {
+    value: {
+      alerts,
+      addAlert,
+      closeAlert
+    },
+    children: children
+  });
+};

package/dist/PageAlerts/index.d.ts

@@ -0,0 +1,3 @@
+export * from './PageAlerts';
+export * from './PageAlertsProvider';
+export * from './types';

package/dist/PageAlerts/index.js

@@ -0,0 +1,3 @@
+export * from './PageAlerts';
+export * from './PageAlertsProvider';
+export * from './types';

package/dist/PageAlerts/types.d.ts

@@ -0,0 +1,17 @@
+import { Alert } from '@codecademy/gamut';
+import { ComponentProps } from 'react';
+type AlertProps = Required<ComponentProps<typeof Alert>>;
+type LimitedCTAProps = 'target' | 'children' | 'onClick' | 'text';
+type ExtractableCTAProps = {
+    [Prop in Extract<keyof AlertProps['cta'], LimitedCTAProps>]?: AlertProps['cta'][Prop];
+};
+export type PageAlert = {
+    cta?: ExtractableCTAProps & {
+        href?: string;
+    };
+    onClose?: () => void;
+    type: Exclude<AlertProps['type'], 'subtle'>;
+    message: string;
+    permanent?: boolean;
+};
+export {};

package/dist/PageAlerts/types.js

@@ -0,0 +1 @@
+export {};

package/dist/PageLayoutWithSidebarMenu/PageLayoutWithSidebarMenu.d.ts

@@ -0,0 +1,19 @@
+import { WithChildrenProp } from '@codecademy/gamut';
+import { UserClickData } from '@codecademy/tracking';
+import React from 'react';
+type Cols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type PageLayoutWithSidebarMenuProps = WithChildrenProp & {
+    pageName: string;
+    leftSidebar: {
+        content: React.ReactNode;
+        cols: Cols;
+    };
+    rightSidebar?: {
+        content: React.ReactNode;
+        cols: Cols;
+    };
+    hasBackToTop?: boolean;
+    trackUserClick: (data: UserClickData) => void;
+};
+export declare const PageLayoutWithSidebarMenu: React.FC<PageLayoutWithSidebarMenuProps>;
+export {};

package/dist/PageLayoutWithSidebarMenu/PageLayoutWithSidebarMenu.js

@@ -0,0 +1,53 @@
+import { Column, ContentContainer, GridBox, LayoutGrid, SkipToContentTarget } from '@codecademy/gamut';
+import React from 'react';
+import { BackToTopAnchor } from '../BackToTopAnchor';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PageLayoutWithSidebarMenu = ({
+  children,
+  pageName,
+  leftSidebar,
+  rightSidebar,
+  hasBackToTop,
+  trackUserClick
+}) => {
+  return /*#__PURE__*/_jsx(ContentContainer, {
+    as: "main",
+    children: /*#__PURE__*/_jsxs(LayoutGrid, {
+      pb: 64,
+      columnGap: 24,
+      children: [/*#__PURE__*/_jsx(Column, {
+        size: {
+          lg: leftSidebar.cols
+        },
+        py: 16,
+        children: leftSidebar.content
+      }), /*#__PURE__*/_jsxs(Column, {
+        alignContent: "flex-start",
+        size: {
+          lg: 12 - leftSidebar.cols - (rightSidebar?.cols ?? 0)
+        },
+        height: "100%",
+        children: [/*#__PURE__*/_jsx(SkipToContentTarget, {
+          id: "heading"
+        }), children]
+      }), rightSidebar && /*#__PURE__*/_jsx(Column, {
+        size: {
+          lg: rightSidebar.cols
+        },
+        py: 16,
+        children: rightSidebar.content
+      }), hasBackToTop && /*#__PURE__*/_jsx(GridBox, {
+        gridColumnEnd: "span 12",
+        justifyContent: "center",
+        children: /*#__PURE__*/_jsx(BackToTopAnchor, {
+          targetId: `${pageName}_title`,
+          onClick: () => trackUserClick({
+            page_name: pageName,
+            context: 'back_to_top',
+            target: 'back_to_top'
+          })
+        })
+      })]
+    })
+  });
+};

package/dist/PageLayoutWithSidebarMenu/index.d.ts

@@ -0,0 +1 @@
+export * from './PageLayoutWithSidebarMenu';

package/dist/PageLayoutWithSidebarMenu/index.js

@@ -0,0 +1 @@
+export * from './PageLayoutWithSidebarMenu';