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

package/CHANGELOG.md

@@ -8,6 +8,50 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 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.
+
+### 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` componnet.
+
+### 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 +87,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/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/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,14 +1,14 @@
 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;
+export interface TextInputProps extends BaseProps {
     placeholder: string;
     value?: string;
 }

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. */
@@ -31,11 +38,23 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
  * components. For backwards compatibility, this renders a `nypl-ds` CSS class.
  */
 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, };