@nypl/design-system-react-components 1.0.7 → 1.0.8

package/CHANGELOG.md

@@ -8,6 +8,27 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 1.0.8 (August 11, 2022)
+
+### Adds
+
+- Adds new color values under ui:
+  - `bg.default`, `bg.hover`, `bg.active`, `border.default`, `border.hover`, `typography.heading`, and `typography.body`.
+- Adds new colors values under ui.gray:
+  - `xxxx-dark` and `xxx-dark`.
+- Adds UI fills colors for dark mode in the codebase and also exported in the `useNYPLTheme` hook.
+- Adds an optional `panelMaxHeight` prop to the `Accordion` component that determines the height of the panel and displays a scrollbar if content exceeds it.
+
+### Updates
+
+- Updates color value for `xx-dark`.
+- Updates the style of the TOC on the `Style Guide` pages to match the style of the TOC on the component pages.
+- Updates the `Template` components to use CSS grid instead of flexbox.
+- Updates the `Template` documentation with the new pattern for using individual `Template` components that go above the main `TemplateContent` component.
+- Updates the `Placeholder` component's CSS to better display in the `Template` components.
+- Updates how HTML attributes are passed down in the `Image` component to the HTML `img` element.
+- Updates the `Accordion` so that its panel content only renders when the `Accordion` is open.
+
 ## 1.0.7 (July 29, 2022)
 
 ### Updates

package/dist/components/Accordion/Accordion.d.ts

@@ -12,6 +12,11 @@ export interface AccordionProps {
     id?: string;
     /** Whether the accordion is open by default only on its initial rendering */
     isDefaultOpen?: boolean;
+    /** Sets max height of accordion panel. This value should be entered with the
+     * formatting of a CSS height attribute (ex. 100px, 8rem). If height of content
+     * within accordion panel is greater than height set by panelMaxHeight, a
+     * scrollbar will appear for accordion panel. */
+    panelMaxHeight?: string;
 }
 /**
  * Accordion component that shows content on toggle. Can be used to display

package/dist/components/Image/Image.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { ImgHTMLAttributes } from "react";
 export declare type ImageRatios = "fourByThree" | "oneByTwo" | "original" | "sixteenByNine" | "square" | "threeByFour" | "threeByTwo" | "twoByOne";
 export declare type ImageSizes = "default" | "xxsmall" | "xsmall" | "small" | "medium" | "large";
 export declare type ImageTypes = "default" | "circle";
-export interface ComponentImageProps {
+export interface ComponentImageProps extends Partial<HTMLImageElement> {
     /** String value used to populate the `alt` attribute of the internal `Image`
      * component's `img` element. @NOTE if an image is used, this value must be passed. */
     alt?: string;
@@ -37,7 +37,7 @@ interface ImageWrapperProps {
     /** Optional value to control the size of the image */
     size?: ImageSizes;
 }
-export interface ImageProps extends ImageWrapperProps {
+export interface ImageProps extends ImageWrapperProps, ImgHTMLAttributes<HTMLImageElement> {
     /** Optionally pass in additional Chakra-based styles only for the figure. */
     additionalFigureStyles?: {
         [key: string]: any;

package/dist/components/StyleGuide/ColorCard.d.ts

@@ -1,29 +1,33 @@
 import * as React from "react";
-export interface ColorCardProps {
-    /** The backgroundColor of the color card. */
-    backgroundColor: string;
-    /** The name of a color's javascript theme object. */
-    colorName: string;
-    /** The name of the color that the current color is based on. */
-    colorSource: string;
+export interface DataTableProps {
+    /** Contrast and WCAG compliance data related to the color gray.xxxx-dark when
+     * used with the current color. */
+    dataBgPageColor: string[];
+    /** Contrast and WCAG compliance data related to the color gray.xxx-dark when
+     * used with the current color. */
+    dataBgDefaultColor: string[];
     /** Contrast and WCAG compliance data related to the color black when used
      * with the current color. */
-    dataBlack: string[];
+    dataBlackColor: string[];
+    /** Contrast and WCAG compliance data related to the default color for
+     * heading elements when used with the current color. */
+    dataHeadingColor?: string[];
+    /** Contrast and WCAG compliance data related to the default color for basic
+     * text elements when used with the current color. */
+    dataBodyColor?: string[];
     /** Contrast and WCAG compliance data related to the color white when used
      * with the current color. */
-    dataWhite: string[];
+    dataWhiteColor: string[];
     /** The color to use for text in the color card. */
     textColor: string;
 }
-export interface DataTableProps {
-    /** Contrast and WCAG compliance data related to the color black when used
-     * with the current color. */
-    dataBlack: string[];
-    /** Contrast and WCAG compliance data related to the color white when used
-     * with the current color. */
-    dataWhite: string[];
-    /** color to use for text in color card */
-    textColor: string;
+export interface ColorCardProps extends DataTableProps {
+    /** The backgroundColor of the color card. */
+    backgroundColor: string;
+    /** The name of a color's javascript theme object. */
+    colorName: string;
+    /** The name of the color that the current color is based on. */
+    colorSource: string;
 }
 export declare const DataTable: (props: React.PropsWithChildren<DataTableProps>) => JSX.Element;
 export declare const ColorCard: (props: React.PropsWithChildren<ColorCardProps>) => JSX.Element;

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

@@ -28,6 +28,8 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
     /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
      * anchor for the application skip navigation. */
     contentId?: string;
+    /** DOM that will be rendered in the `TemplateContentBottom` component section. */
+    contentBottom?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
     contentPrimary?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateContentSidebar` component section. */
@@ -66,9 +68,10 @@ declare const TemplateAboveHeader: (props: React.PropsWithChildren<TemplateProps
  */
 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
- * for the `Breadcrumbs` and `Hero` components, and other banner-like components.
+ * This component should be used inside the `Template` component to contain both
+ * the `TemplateAboveHeader` and `TemplateHeader` components. This is meant to
+ * render its children from edge to edge and is most useful for the headers,
+ * `Breadcrumbs`, and `Hero` components or other banner-like components.
  */
 declare const TemplateBreakout: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
 /**
@@ -88,6 +91,13 @@ declare const TemplateContent: (props: React.PropsWithChildren<TemplateContentPr
  * above the primary component and the sidebar component (if any).
  */
 declare const TemplateContentTop: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+/**
+ * This optional component must be used inside the `TemplateContent` component
+ * and after the `TemplateContentPrimary` or `TemplateContentSidebar` component.
+ * This renders content in the main width of the container and should always
+ * render below the primary component and the sidebar component (if any).
+ */
+declare const TemplateContentBottom: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
 /**
  * This component is used to render content in a column when there must be a
  * sidebar component on either its left or right side. It must go inside the
@@ -126,5 +136,5 @@ declare const TemplateFooter: ({ children, renderFooterElement, }: React.PropsWi
 export declare const TemplateAppContainer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TemplateAppContainerProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>, {}>;
-export { Template, TemplateAboveHeader, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, };
+export { Template, TemplateAboveHeader, TemplateBreakout, TemplateContent, TemplateContentBottom, TemplateContentPrimary, TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, };
 export default TemplateAppContainer;