@nypl/design-system-react-components 1.0.4 → 1.0.5

package/CHANGELOG.md

@@ -8,6 +8,22 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 1.0.5 (July 7, 2022)
+
+### Adds
+
+- Exports `ColorCard`.
+
+### Updates
+
+- Updates the `Icon` component to include variants for `actionCheckCircleFilled`, `actionRegistration`, `decorativeEnvelope`, `decorativeLibraryCard` and `decorativeShoppingBag`.
+- Updates the docs for the `Colors` Style Guide to include additional data related to contrast and WCAG compliance.
+- Updates the `Checkbox` and `Radio` components to use `ui.gray.dark` for the default border color.
+
+### Fixes
+
+- Fixes `useNYPLBreakpoints` hook so it internally controls its own state. This eliminates server/client rendering issues on its initial load.
+
 ## 1.0.4 (June 23, 2022)
 
 ### Adds

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 export declare type IconAlign = "left" | "right" | "none";
 export declare type IconColors = "ui.black" | "ui.white" | "brand.primary" | "brand.secondary" | "section.blogs.primary" | "section.blogs.secondary" | "section.books-and-more.primary" | "section.books-and-more.secondary" | "section.education.primary" | "section.education.secondary" | "section.locations.primary" | "section.locations.secondary" | "section.research.primary" | "section.research.secondary" | "section.research-library.lpa" | "section.research-library.schomburg" | "section.research-library.schwartzman" | "section.whats-on.primary" | "section.whats-on.secondary";
-export declare type IconNames = "accessibilityFull" | "accessibilityPartial" | "actionCheckCircle" | "actionExit" | "actionHelpDefault" | "actionHelpOutline" | "actionLaunch" | "actionPower" | "actionSettings" | "alertNotificationImportant" | "arrow" | "building" | "check" | "clock" | "close" | "download" | "errorFilled" | "errorOutline" | "fileTypeAudio" | "fileTypeDoc" | "fileTypeGenericDoc" | "fileTypeImage" | "fileTypePdf" | "fileTypeSpreadsheet" | "fileTypeVideo" | "headset" | "locator" | "minus" | "plus" | "search" | "socialFacebook" | "socialInstagram" | "socialTumblr" | "socialTwitter" | "socialYoutube" | "speakerNotes" | "utilityAccountFilled" | "utilityAccountUnfilled" | "utilityHamburger" | "utilitySearch";
+export declare type IconNames = "accessibilityFull" | "accessibilityPartial" | "actionCheckCircle" | "actionCheckCircleFilled" | "actionExit" | "actionHelpDefault" | "actionHelpOutline" | "actionLaunch" | "actionPower" | "actionRegistration" | "actionSettings" | "alertNotificationImportant" | "arrow" | "building" | "check" | "clock" | "close" | "decorativeEnvelope" | "decorativeLibraryCard" | "decorativeShoppingBag" | "download" | "errorFilled" | "errorOutline" | "fileTypeAudio" | "fileTypeDoc" | "fileTypeGenericDoc" | "fileTypeImage" | "fileTypePdf" | "fileTypeSpreadsheet" | "fileTypeVideo" | "headset" | "locator" | "minus" | "plus" | "search" | "socialFacebook" | "socialInstagram" | "socialTumblr" | "socialTwitter" | "socialYoutube" | "speakerNotes" | "utilityAccountFilled" | "utilityAccountUnfilled" | "utilityHamburger" | "utilitySearch";
 export declare type IconRotationTypes = "rotate0" | "rotate90" | "rotate180" | "rotate270";
 export declare type IconSizes = "default" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
 export declare type IconTypes = "default" | "breadcrumbs";

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

@@ -2,11 +2,13 @@ declare const _default: {
     accessibilityFull: string;
     accessibilityPartial: string;
     actionCheckCircle: string;
+    actionCheckCircleFilled: string;
     actionExit: string;
     actionHelpDefault: string;
     actionHelpOutline: string;
     actionLaunch: string;
     actionPower: string;
+    actionRegistration: string;
     actionSettings: string;
     alertNotificationImportant: string;
     arrow: string;
@@ -14,6 +16,9 @@ declare const _default: {
     check: string;
     clock: string;
     close: string;
+    decorativeEnvelope: string;
+    decorativeLibraryCard: string;
+    decorativeShoppingBag: string;
     download: string;
     errorFilled: string;
     errorOutline: string;

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

@@ -1,12 +1,30 @@
 import * as React from "react";
 export interface ColorCardProps {
-    /** backgroundColor of the color card */
+    /** The backgroundColor of the color card. */
     backgroundColor: string;
-    /** name of the CSS var */
+    /** 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;
+    /** 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[];
+    /** The color to use for text in the color card. */
+    textColor: string;
 }
-/**
- * ColorCard
- * Component only used for Storybook.
- */
-export default function ColorCard(props: React.PropsWithChildren<ColorCardProps>): JSX.Element;
+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 declare const DataTable: (props: React.PropsWithChildren<DataTableProps>) => JSX.Element;
+export declare const ColorCard: (props: React.PropsWithChildren<ColorCardProps>) => JSX.Element;
+export default ColorCard;