@nypl/design-system-react-components 0.25.9 → 0.25.12

package/CHANGELOG.md

@@ -8,6 +8,101 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 0.25.12 (March 18, 2022)
+
+## Adds
+
+- Adds `Education` section colors to the color palette theme object.
+- Adds a `currentPage` prop to the `Pagination` component, a value that updates the selected page programmatically without the user explicitly requesting it.
+
+### Changes
+
+- Removes the margin from the global `.nypl p` CSS rule.
+- Updates the top and bottom margin of the `List`'s `Unordered` and `Ordered` types.
+- Updates the `Notification`'s icons to be decorative by default.
+- Updates the default placeholder value for the `SearchBar`'s `TextInput` component.
+- Updates the `SearchBar`'s `textInputProps` prop object to not require the `placeholder` property.
+- Updates the `Logo` component to include new variants for `FirstBook` and `Open eBooks`.
+- Updates the border and text styles for the `Select` component.
+- Updates the `Breadcrumbs` component to inlcude an `Education` color variant.
+- Updates the `Icon` component to include the `Education` color values.
+- Updates the default font stack to fix a typo that was disabling `sans-serif` in the stack.
+- Removes the `.nypl-ds` CSS class from the base SCSS file, from the `TemplateAppContainer` component, from the Storybook configuration, and from the entire repo.
+- Moves the base styles from the SCSS global file to the Chakra theme global JS object.
+- Updates the label font size for the `Radio` and `Checkbox` components to be "label.default".
+
+### Fixes
+
+- Fixes the styles for the `Slider` to better accomodate the slider thumbs and the width of the container.
+- Updates the alignment of the `Notifications`'s dismissible icon.
+- Fixes the border and padding from the `fieldset` HTML element by removing it.
+- Fixes alignment for long labels in the `Checkbox` and `Radio` components.
+- Fixes the line height for long labels in the `Toggle` component.
+
+## 0.25.11 (March 3, 2022)
+
+### Updates
+
+- Updates the `Logo` component to include new variants for `BPL`, `Clever`, `LPA`, `MLN`, `QPL`, `Schomburg`, `SimplyE` and `Treasures`.
+- Updates font size to "12px" and top margin to "4px" for `HelperErrorText` component.
+- Updates font size to "14px" for `TextInput` component.
+- Adds an `aria-label` attribute to the `Notification` component to use with its `aside` HTML landmark element. Added an "Accessibility" section in the `Notification` Storybook page to note that this component should not be used within a `header` or `footer` HTML landmark element.
+- Updates the `Notification` component to handle link color inside the content area, better styling for centering and the dismissible variation, and updated background color for the "Announcement" and "Warning" types.
+- Updates a log message in the `Icon` component to be more descriptive.
+- Updates the mobile styles for the image in the `StructuredContent` component.
+- Updates the prop type for the "Definition" `List` type so DOM elements can be passed in the definition.
+
+### Fixes
+
+- Updates the bottom margin of the `Select` in the `SearchBar` so that the helper text has standard gap between the main form components and itself.
+- Updates how `TabList` and `TabPanels` are returned in the `Tabs` component so no false log messages are consoled.
+- Updates `List` component styling for inline.
+
+## 0.25.10 (February 22, 2022)
+
+### Adds
+
+- Exports Chakra's `Flex` and `Spacer` components.
+- Adds `TemplateAboveHeader` component in the set of "template" components.
+- Adds the `aboveHeader` prop to the `TemplateAppContainer` component to render a `TemplateAboveHeader` component immediately before the `TemplateHeader` component.
+- Adds the `additionalStyles` prop to the `Select` component.
+
+### Breaking Changes
+
+- Renames the `Form` component's `"spacing"` prop to `"gap"` to be consistent with the `FormRow` and `FormField` components.
+- Renames the `FormSpacing` enum to `FormGaps`.
+
+### Changes
+
+- Passes an `onChange` prop to the `Select` component inside the `SearchBar` through its `selectProps` prop.
+- Adds snapshot tests for the `Tabs` component and better checks to warn the user that the `Tabs` is missing data if data wasn't passed as props or children.
+- Updates the `Form` component to warn developers when a child component in the `FormRow` component _is not_ a `FormField`.
+- Adds an `onSubmit` prop to the `Form` component.
+- Adds the `renderHeaderElement` prop to the `TemplateAppContainer` component. This prop is used to control whether the `TemplateAppContainer` component should render its own `<header>` HTML element through its `header` prop, or let the user pass in their own component that renders the `<header>` HTML element.
+- Updates the `Fieldset` and `RadioGroup` so the `children` prop is declared through `React.PropsWithChildren` rather than in their respective prop interfaces.
+- Adds snapshot tests for the `Accordion` component, as well as `id` props to the components within the `Accordion` so snapshot tests pass.
+- Passes an `id` to the `Icon` in the `Select` component.
+- Adds snapshot tests for the `Select` component.
+
+### Fixes
+
+- Fixes `id` propagation issues in the `SearchBar` component and its children DS components.
+- Fixing `Breadcrumbs` related logging issue with a CSS pseudo-selector and setting the `aria-label` to "Breadcrumbs". Adding an accessibility test that should fail when more than one `Breadcrumbs` component is rendered on a page since that landmark should only be rendered once on a web page.
+- Exports the `FullDateType` interface related to the `DatePicker` component.
+- Fixes and removes bad console logs from the `Pagination` and `List` components.
+- Fixes auto-generated `id`s in the `Tabs` component.
+- Fixes the Figma link for the `Hero` component.
+- Fixes `Card` component bug for passing styles to the `CardHeading` correctly.
+- Fixes the `Table` component so that a custom header text color of white does not visually hide row headers on a white background.
+
+### Updates
+
+- Updates the following packages: multiple `@storybook/...` packages, `autoprefixer`, `eslint-plugin-storybook`, `husky`, `lint-staged`, `semantic-release-slack-bot`, `storybook-addon-designs`.
+- Removed the following packages: `postcss`, `pretty-quick`.
+- Added `@chakra-ui/react`, `@chakra-ui/system`, `@emotion/react`, `@emotion/styled`, and `framer-motion` as "peerDependencies".
+- Updates the node version in Github Action workflows from Node v12 to Node v14.
+- Updates how `/dist/resources.scss` is created through gulp.
+
 ## 0.25.9 (February 3, 2022)
 
 ### Adds
@@ -43,6 +138,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 - Updates the `Template` component to use `s` (16px) spacing on the left and right sides of the main content area.
 - Updates the `HelperErrorText` component to allow HTML to be passed in as a string or HTML.
 - Updates how the `HelperErrorText` component renders text in the following components: `Checkbox`, `CheckboxGroup`, `ComponentWrapper`, `DatePicker`, `Radio`, `RadioGroup`, `SearchBar`, `Select`, `Slider`, `TextInput`, `Toggle`, `VideoPlayer`.
+- Updates the `HorizontalRule` component to use "100%" as the default value for the `width` prop.
 
 ### Fixes
 

package/README.md

@@ -116,17 +116,7 @@ $ npm install @nypl/design-system-react-components
 @import "~@nypl/design-system-react-components/dist/styles.css";
 ```
 
-3. Add the `nypl-ds` CSS class
-
-Some CSS rules in the Design System, such as the universal focus styling and the box-model, are namespaced to the `.nypl-ds` class. To include those in your app, add `.nypl-ds` to whichever wrapper tag makes sense in your application (e.g., `<div class="app">` or `<div class="container">`).
-
-```jsx
-<div class="app nypl-ds">
-  <!-- your code here -->
-</div>
-```
-
-4. Import the `DSProvider` component
+3. Import the `DSProvider` component
 
 In order to use DS components in a consuming application, there is a necessary step that must be done for component styles to properly render. Consuming applications need to wrap all the DS components with a simple provider component. Fortunately, this only needs to be done once at the top level of the consuming application.
 
@@ -141,7 +131,7 @@ const ApplicationContainer = (props) => {
   // ...
   return (
     <DSProvider>
-      <div className="my-app nypl-ds">
+      <div className="my-app">
         // ...
         {children}
       </div>
@@ -150,7 +140,7 @@ const ApplicationContainer = (props) => {
 };
 ```
 
-5. Use DS components!
+4. Use DS components!
 
 Consult Storybook for the list of available components and props that they require.
 
@@ -181,13 +171,11 @@ function NewComponent(props) {
 
 ### NYPL DS, NYPL Header, and NYPL Footer
 
-Please note that, if used, the NYPL Header and Footer components should be _outside_ of the `.nypl-ds` wrapper class.
-
 ```jsx
 <body>
   <NYPLHeader />
 
-  <div class="app nypl-ds">
+  <div class="app">
     <!-- your code here -->
   </div>
 

package/dist/components/Breadcrumbs/BreadcrumbsTypes.d.ts

@@ -1,6 +1,7 @@
 export declare enum ColorVariants {
     Blogs = "blogs",
     BooksAndMore = "booksAndMore",
+    Education = "education",
     Locations = "locations",
     Research = "research",
     WhatsOn = "whatsOn"

package/dist/components/DatePicker/DatePicker.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { DatePickerTypes } from "./DatePickerTypes";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { TextInputRefType } from "../TextInput/TextInput";
-interface FullDateType {
+export interface FullDateType {
     /** Date object that gets returned for the onChange
      * function only for date ranges. */
     endDate?: Date;

package/dist/components/Fieldset/Fieldset.d.ts

@@ -1,7 +1,5 @@
 import React from "react";
 interface FieldsetProps {
-    /** Children to render. Typically form-related components are used. */
-    children: React.ReactNode;
     /** Additional class name to add. */
     className?: string;
     /** ID that other components can cross reference for accessibility purposes */
@@ -21,5 +19,5 @@ interface FieldsetProps {
  * A wrapper component that renders a `fieldset` element along with a `legend`
  * element as its first child. Commonly used to wrap form components.
  */
-declare const Fieldset: React.FC<FieldsetProps>;
+declare const Fieldset: ({ children, className, id, isLegendHidden, isRequired, legendText, optReqFlag, }: React.PropsWithChildren<FieldsetProps>) => JSX.Element;
 export default Fieldset;

package/dist/components/Form/Form.d.ts

@@ -1,24 +1,24 @@
 import * as React from "react";
-import { FormSpacing } from "./FormTypes";
-export interface FormChildProps {
-    /** className to be applied to FormRow */
+import { FormGaps } from "./FormTypes";
+interface FormBaseProps {
+    /** className to be applied to FormRow, FormField, and Form */
     className?: string;
-    /** Spacing size (internal use) */
-    gap?: FormSpacing;
+    /** Optional spacing size; if omitted, the default `large` (2rem / 32px)
+     * spacing will be used; ```IMPORTANT: for general form layout, this prop
+     * should not be used``` */
+    gap?: FormGaps;
     /** ID that other components can cross reference (internal use) */
     id?: string;
 }
-export interface FormProps {
+export interface FormChildProps extends FormBaseProps {
+}
+export interface FormProps extends FormBaseProps {
     /** Optional form `action` attribute */
     action?: string;
-    /** Optional className you can add in addition to `form` */
-    className?: string;
-    /** Optional ID that other components can cross reference */
-    id?: string;
     /** Optional form `method` attribute */
     method?: "get" | "post";
-    /** Optional spacing size; if omitted, the default `large` (2rem / 32px) spacing will be used; ```IMPORTANT: for general form layout, this prop should not be used``` */
-    spacing?: FormSpacing;
+    /** Function to call for the `onSubmit` form event. */
+    onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
 }
 /** FormRow child-component */
 export declare function FormRow(props: React.PropsWithChildren<FormChildProps>): JSX.Element;
@@ -26,3 +26,4 @@ export declare function FormRow(props: React.PropsWithChildren<FormChildProps>):
 export declare function FormField(props: React.PropsWithChildren<FormChildProps>): JSX.Element;
 /** Main Form component */
 export default function Form(props: React.PropsWithChildren<FormProps>): JSX.Element;
+export {};

package/dist/components/Form/FormTypes.d.ts

@@ -1,2 +1,2 @@
-import { GridGaps as FormSpacing } from "../Grid/GridTypes";
-export { FormSpacing };
+import { GridGaps as FormGaps } from "../Grid/GridTypes";
+export { FormGaps };

package/dist/components/HorizontalRule/HorizontalRule.d.ts

@@ -13,7 +13,7 @@ export interface HorizontalRuleProps {
     height?: string;
     /** Optional width value. This value should be entered with the same
      * formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`). If
-     * omitted, the horizontal rule will have a default width of "auto". */
+     * omitted, the horizontal rule will have a default width of "100%". */
     width?: string;
 }
 export default function HorizontalRule(props: HorizontalRuleProps): JSX.Element;

package/dist/components/Icons/IconTypes.d.ts

@@ -18,19 +18,21 @@ export declare enum IconColors {
     UiWhite = "ui.white",
     BrandPrimary = "brand.primary",
     BrandSecondary = "brand.secondary",
-    SectionWhatsOnPrimary = "section.whats-on.primary",
-    SectionWhatsOnSecondary = "section.whats-on.secondary",
+    SectionBlogsPrimary = "section.blogs.primary",
+    SectionBlogsSecondary = "section.blogs.secondary",
     SectionBooksAndMorePrimary = "section.books-and-more.primary",
     SectionBooksAndMoreSecondary = "section.books-and-more.secondary",
-    SectionResearchPrimary = "section.research.primary",
-    SectionResearchSecondary = "section.research.secondary",
+    SectionEducationPrimary = "section.education.primary",
+    SectionEducationSecondary = "section.education.secondary",
     SectionLocationsPrimary = "section.locations.primary",
     SectionLocationsSecondary = "section.locations.secondary",
-    SectionBlogsPrimary = "section.blogs.primary",
-    SectionBlogsSecondary = "section.blogs.secondary",
+    SectionResearchPrimary = "section.research.primary",
+    SectionResearchSecondary = "section.research.secondary",
     SectionResearchLibraryLpa = "section.research-library.lpa",
     SectionResearchLibrarySchomburg = "section.research-library.schomburg",
-    SectionResearchLibrarySchwartzman = "section.research-library.schwartzman"
+    SectionResearchLibrarySchwartzman = "section.research-library.schwartzman",
+    SectionWhatsOnPrimary = "section.whats-on.primary",
+    SectionWhatsOnSecondary = "section.whats-on.secondary"
 }
 export declare enum IconSizes {
     Small = "small",

package/dist/components/List/List.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { ListTypes } from "./ListTypes";
 interface DefinitionProps {
     term: string;
-    definition: string;
+    definition: string | JSX.Element;
 }
 export interface ListProps {
     /** Optionally pass in additional Chakra-based styles. */

package/dist/components/Logo/LogoSvgs.d.ts

@@ -1,18 +1,40 @@
 declare const _default: {
     logo_bpl_black: string;
+    logo_bpl_white: string;
+    logo_clever_color: string;
+    logo_clever_white: string;
+    logo_firstbook_color: string;
+    logo_firstbook_color_negative: string;
+    logo_lpa_black: string;
     logo_lpa_color: string;
     logo_lpa_white: string;
+    logo_mln_black: string;
+    logo_mln_white: string;
     logo_nypl_full_black: string;
     logo_nypl_full_white: string;
-    logo_nypl_lion_white: string;
     logo_nypl_lion_black: string;
+    logo_nypl_lion_white: string;
+    logo_openebooks_color: string;
+    logo_openebooks_negative: string;
+    logo_openebooks_wtext_color: string;
+    logo_openebooks_wtext_negative: string;
     logo_qpl_alt_black: string;
+    logo_qpl_alt_white: string;
+    logo_qpl_black: string;
     logo_qpl_color: string;
+    logo_qpl_white: string;
+    logo_schomburg_black: string;
+    logo_schomburg_circle_black: string;
     logo_schomburg_circle_color: string;
+    logo_schomburg_circle_white: string;
     logo_schomburg_color: string;
+    logo_schomburg_white: string;
     logo_simplye_black: string;
+    logo_simplye_white: string;
     logo_simplye_color: string;
     logo_snfl_black: string;
     logo_snfl_white: string;
+    logo_treasures_color: string;
+    logo_treasures_color_negative: string;
 };
 export default _default;

package/dist/components/Logo/LogoTypes.d.ts

@@ -13,18 +13,40 @@ export declare enum LogoSizes {
 }
 export declare enum LogoNames {
     BrooklynPublicLibraryBlack = "logo_bpl_black",
+    BrooklynPublicLibraryWhite = "logo_bpl_white",
+    CleverColor = "logo_clever_color",
+    CleverWhite = "logo_clever_white",
+    FirstBookColor = "logo_firstbook_color",
+    FirstBookColorNegative = "logo_firstbook_color_negative",
     LPAColor = "logo_lpa_color",
+    LPABlack = "logo_lpa_black",
     LPAWhite = "logo_lpa_white",
+    MyLibraryNYCBlack = "logo_mln_black",
+    MyLibraryNYCWhite = "logo_mln_white",
     NYPLBlack = "logo_nypl_full_black",
     NYPLWhite = "logo_nypl_full_white",
     NYPLLionBlack = "logo_nypl_lion_black",
     NYPLLionWhite = "logo_nypl_lion_white",
+    OpenEBooksColor = "logo_openebooks_color",
+    OpenEBooksNegative = "logo_openebooks_negative",
+    OpenEBooksWithTextColor = "logo_openebooks_wtext_color",
+    OpenEBooksWithTextNegative = "logo_openebooks_wtext_negative",
     QueensPublicLibraryColor = "logo_qpl_color",
+    QueensPublicLibraryBlack = "logo_qpl_black",
+    QueensPublicLibraryWhite = "logo_qpl_white",
     QueensPublicLibraryAltBlack = "logo_qpl_alt_black",
+    QueensPublicLibraryAltWhite = "logo_qpl_alt_white",
     SchomburgColor = "logo_schomburg_color",
+    SchomburgBlack = "logo_schomburg_black",
+    SchomburgWhite = "logo_schomburg_white",
     SchomburgCircleColor = "logo_schomburg_circle_color",
+    SchomburgCircleBlack = "logo_schomburg_circle_black",
+    SchomburgCircleWhite = "logo_schomburg_circle_white",
     SimplyEColor = "logo_simplye_color",
     SimplyEBlack = "logo_simplye_black",
+    SimplyEWhite = "logo_simplye_white",
     SNFLBlack = "logo_snfl_black",
-    SNFLWhite = "logo_snfl_white"
+    SNFLWhite = "logo_snfl_white",
+    TreasuresColor = "logo_treasures_color",
+    TreasuresColorNegative = "logo_treasures_color_negative"
 }

package/dist/components/Notification/Notification.d.ts

@@ -16,6 +16,8 @@ interface BaseProps {
 declare type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
 declare type BasePropsWithoutCentered = Omit<BaseProps, "centered">;
 export interface NotificationProps extends BasePropsWithoutAlignText {
+    /** Label used to describe the `Notification`'s aside HTML element. */
+    ariaLabel?: string;
     /** Additional `className` to add.  */
     className?: string;
     /** Optional prop to control whether a `Notification` can be dismissed

package/dist/components/Pagination/Pagination.d.ts

@@ -2,14 +2,18 @@ import React from "react";
 export interface PaginationProps {
     /** Additional className. */
     className?: string;
+    /** The currentPage can be used to programatically force the selected page to change
+     * without the user explicitly requesting it – for example, if the user should be
+     * brought back to the first page of a set of results after a new search. */
+    currentPage?: number;
     /** The callback function that takes a page number and returns a string
      * to use for a link's `href` attribute. This is used when the current
      * page should refresh when navigating. */
     getPageHref?: undefined | ((pageNumber: number) => string);
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
-    /** The current page selected. */
-    initialPage: number;
+    /** The initially selected page (default value is 1). */
+    initialPage?: number;
     /** The callback function called when an item is selected and the current
      * page should not refresh. */
     onPageChange?: (selected: number) => void;

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -2,8 +2,6 @@ import * as React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { RadioGroupLayoutTypes } from "./RadioGroupLayoutTypes";
 export interface RadioGroupProps {
-    /** Any child node passed to the component. */
-    children: React.ReactNode;
     /** Additional class name. */
     className?: string;
     /** Populates the initial value of the input */
@@ -39,5 +37,7 @@ export interface RadioGroupProps {
     showLabel?: boolean;
 }
 export declare const onChangeDefault: () => void;
-declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLInputElement>>;
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
 export default RadioGroup;

package/dist/components/SearchBar/SearchBar.d.ts

@@ -1,15 +1,15 @@
 import * as React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-interface SelectProps {
+interface BaseProps {
     labelText: string;
     name: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+export interface SelectProps extends BaseProps {
     optionsData: string[];
 }
-interface TextInputProps {
-    labelText: string;
-    name: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
-    placeholder: string;
+export interface TextInputProps extends BaseProps {
+    placeholder?: string;
     value?: string;
 }
 export interface SearchBarProps {

package/dist/components/Select/Select.d.ts

@@ -2,6 +2,10 @@ import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { SelectTypes } from "./SelectTypes";
 export interface SelectProps {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
+        [key: string]: any;
+    };
     /** A class name for the `div` parent element. */
     className?: string;
     /** Optional string to populate the `HelperErrorText` for the standard state. */

package/dist/components/Table/Table.d.ts

@@ -10,14 +10,20 @@ export interface TableProps {
     columnHeadersTextColor?: string;
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
-    /** If true, the first cell of each row in the `Table` component will be visually styled as a header.  The default value is false */
-    useRowHeaders?: boolean;
-    /** If true, a border will be displayed between each row in the `Table` component.  The default value is false. */
+    /** If true, a border will be displayed between each row in the `Table`
+     * component. The default value is false. */
     showRowDividers?: boolean;
     /** Two-dimensional array used to populate the table rows. */
     tableData: string[][];
     /** Displays `Table` title element. */
     titleText?: string;
+    /** If true, the first cell of each row in the `Table` component will be
+     * visually styled as a header. The default value is false */
+    useRowHeaders?: boolean;
 }
+/**
+ * Basic `Table` component used to organize and display tabular data in
+ * rows and columns.
+ */
 declare function Table(props: React.PropsWithChildren<TableProps>): JSX.Element;
 export default Table;

package/dist/components/Template/Template.d.ts

@@ -1,6 +1,10 @@
 import * as React from "react";
 export interface TemplateProps {
 }
+export interface TemplateHeaderProps {
+    /** Flag to render an HTML header element. True by default. */
+    renderHeaderElement?: boolean;
+}
 export interface TemplateFooterProps {
     /** Flag to render an HTML footer element. True by default. */
     renderFooterElement?: boolean;
@@ -12,7 +16,10 @@ export interface TemplateSidebarProps {
 }
 export interface TemplateContentProps extends TemplateSidebarProps {
 }
-export interface TemplateAppContainerProps extends TemplateFooterProps, TemplateSidebarProps {
+export interface TemplateAppContainerProps extends TemplateFooterProps, TemplateHeaderProps, TemplateSidebarProps {
+    /** DOM that will be rendered before the rest of the components in
+     * `TemplateAppContainer` and immediately before the `TemplateHeader` component. */
+    aboveHeader?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateBreakout` component section. */
     breakout?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
@@ -28,14 +35,26 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
 }
 /**
  * The main top-level parent component that wraps all template-related
- * components. For backwards compatibility, this renders a `nypl-ds` CSS class.
+ * components.
  */
 declare const Template: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+/**
+ * This optional component renders its children from edge-to-edge and should
+ * be used for alerts or notifications that are typically site-wide. This must
+ * be rendered immediately before the `TemplateHeader` component. This is meant
+ * for components that render an `aside` HTML element or HTML element with the
+ * `role="complementary"` attribute. These elements should *not* be rendered
+ * in the `header` HTML section since that's an accessibility violation.
+ */
+declare const TemplateAboveHeader: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
 /**
  * This optional component should be the first child of the `Template`
- * component. This is rendered as an HTML `<header>` element.
+ * component. This is rendered as an HTML `<header>` element. If an HTML
+ * `<header>` element is already passed in a custom component as the children,
+ * set `renderFooterElement` to `false`. Otherwise, the parent wrapper will
+ * render an HTML `<header>` element.
  */
-declare const TemplateHeader: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+declare const TemplateHeader: ({ children, renderHeaderElement, }: React.PropsWithChildren<TemplateHeaderProps>) => JSX.Element;
 /**
  * This optional component should be used inside the `TemplateHeader` component.
  * This is meant to render its children from edge to edge and is most useful
@@ -93,4 +112,4 @@ declare const TemplateFooter: ({ children, renderFooterElement, }: React.PropsWi
  * `TemplateContentPrimary` section, then pass it as a prop to `contentPrimary`.
  */
 declare const TemplateAppContainer: (props: React.PropsWithChildren<TemplateAppContainerProps>) => JSX.Element;
-export { TemplateAppContainer, Template, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, };
+export { TemplateAppContainer, Template, TemplateAboveHeader, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, };