@nypl/design-system-react-components 0.26.1 → 0.27.0

package/dist/index.d.ts

@@ -34,7 +34,7 @@ export { default as List } from "./components/List/List";
 export { ListTypes } from "./components/List/ListTypes";
 export { default as Logo } from "./components/Logo/Logo";
 export { LogoColors, LogoNames, LogoSizes } from "./components/Logo/LogoTypes";
-export { default as Modal } from "./components/Modal/Modal";
+export { ModalTrigger, useModal } from "./components/Modal/Modal";
 export { default as Notification } from "./components/Notification/Notification";
 export { NotificationTypes } from "./components/Notification/NotificationTypes";
 export { default as Pagination } from "./components/Pagination/Pagination";

package/dist/styles.css

@@ -1,3 +1,3 @@
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */@import "~react-datepicker/dist/react-datepicker.css";html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}
 
-/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */@font-face{font-family:system-ui;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Segoe UI Light"),local("Ubuntu Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Segoe UI Light Italic"),local("Ubuntu Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Segoe UI"),local("Ubuntu"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Segoe UI Italic"),local("Ubuntu Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Segoe UI Semibold"),local("Ubuntu Medium"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Segoe UI Semibold Italic"),local("Ubuntu Medium Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Segoe UI Bold"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Segoe UI Bold Italic"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}:root{--nypl-breakpoint-small:320px;--nypl-breakpoint-medium:600px;--nypl-breakpoint-large:960px;--nypl-breakpoint-xl:1280px}.container{padding:var(--nypl-space-s)}.placeholder{--color-place-holder:var(--nypl-colors-ui-gray-dark);align-items:center;border:4px dashed var(--color-place-holder);color:var(--color-place-holder);display:flex;font-size:3rem;justify-content:center;line-height:1.4;margin-bottom:var(--nypl-space-l);padding:4rem 1rem;width:100%}@media (min-width:960px){.placeholder{margin-bottom:var(--nypl-space-l)}}.placeholder--full{margin-bottom:var(--nypl-space-xxl)}@media (min-width:960px){.placeholder--full{margin-bottom:var(--nypl-space-xxxl)}}.placeholder--short{padding:1rem}.react-autosuggest__container{display:inline;position:relative;width:100%}.react-autosuggest__input--focused{outline:none}.react-autosuggest__input--open{border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.react-autosuggest__suggestions-container{display:none;width:100%}.react-autosuggest__suggestions-container--open{background-color:var(--nypl-colors-ui-white);display:block;font-weight:300;margin-top:1px;outline:1px solid var(--nypl-colors-ui-gray-light-cool);position:relative;width:100%;z-index:2}.react-autosuggest__suggestions-list{list-style-type:none;margin:0;padding:0}.react-autosuggest__suggestion{cursor:pointer;padding:var(--nypl-space-xs)}.react-autosuggest__suggestion--highlighted{background-color:var(--nypl-colors-ui-gray-light-cool)}.auto-suggest-bottom{padding:var(--nypl-space-xs)}.date-picker-calendar{font-family:var(--nypl-fonts-body)}.date-picker-calendar .react-datepicker{border-color:var(--nypl-colors-ui-gray-medium)}.date-picker-calendar .react-datepicker__triangle{transform:translate(32px)!important}.date-picker-calendar .react-datepicker__triangle:before{border-bottom-color:var(--nypl-colors-ui-gray-medium)!important}.date-picker-calendar .react-datepicker__triangle:after{border-bottom-color:var(--nypl-colors-ui-gray-x-light-cool)!important}.date-picker-calendar .react-datepicker__navigation-icon{top:5px;width:0}.date-picker-calendar .react-datepicker__navigation-icon:before{border-color:var(--nypl-colors-ui-gray-medium)}.date-picker-calendar .react-datepicker__navigation:hover .react-datepicker__navigation-icon:before{border-color:var(--nypl-colors-ui-gray-dark)}.date-picker-calendar .react-datepicker__header{background-color:var(--nypl-colors-ui-gray-x-light-cool);border-color:var(--nypl-colors-ui-gray-medium)}.date-picker-calendar .react-datepicker__year-wrapper{max-width:220px}.date-picker-calendar .react-datepicker__day--keyboard-selected,.date-picker-calendar .react-datepicker__day:hover,.date-picker-calendar .react-datepicker__month-text:hover,.date-picker-calendar .react-datepicker__year-text:not(.react-datepicker__year-text--disabled):hover{background-color:var(--nypl-colors-ui-gray-x-light-cool);border-radius:0;color:var(--nypl-colors-ui-black)}.date-picker-calendar .react-datepicker__day--in-range.react-datepicker__day--in-range,.date-picker-calendar .react-datepicker__day--keyboard-selected,.date-picker-calendar .react-datepicker__month--in-range.react-datepicker__day--in-range,.date-picker-calendar .react-datepicker__year--in-range.react-datepicker__day--in-range{opacity:1}.date-picker-calendar .react-datepicker__day--in-range,.date-picker-calendar .react-datepicker__day--in-selecting-range,.date-picker-calendar .react-datepicker__day--keyboard-selected,.date-picker-calendar .react-datepicker__day-text--keyboard-selected,.date-picker-calendar .react-datepicker__month--in-range,.date-picker-calendar .react-datepicker__month--in-selecting-range,.date-picker-calendar .react-datepicker__month--keyboard-selected,.date-picker-calendar .react-datepicker__month-text--keyboard-selected,.date-picker-calendar .react-datepicker__year--in-range,.date-picker-calendar .react-datepicker__year--in-selecting-range,.date-picker-calendar .react-datepicker__year--keyboard-selected,.date-picker-calendar .react-datepicker__year-text--keyboard-selected{background-color:var(--nypl-colors-ui-gray-x-light-cool);border-radius:0;color:var(--nypl-colors-ui-black)}.date-picker-calendar .react-datepicker__day--today,.date-picker-calendar .react-datepicker__day--today:hover,.date-picker-calendar .react-datepicker__day-text--today,.date-picker-calendar .react-datepicker__day-text--today:hover,.date-picker-calendar .react-datepicker__month--today,.date-picker-calendar .react-datepicker__month--today:hover,.date-picker-calendar .react-datepicker__month-text--today,.date-picker-calendar .react-datepicker__month-text--today:hover,.date-picker-calendar .react-datepicker__year--today,.date-picker-calendar .react-datepicker__year--today:hover,.date-picker-calendar .react-datepicker__year-text--today,.date-picker-calendar .react-datepicker__year-text--today:hover{background-color:var(--nypl-colors-ui-gray-light-cool);color:var(--nypl-colors-ui-black)}.date-picker-calendar .react-datepicker__day--selected,.date-picker-calendar .react-datepicker__day-text--selected,.date-picker-calendar .react-datepicker__month--selected,.date-picker-calendar .react-datepicker__month-text--selected,.date-picker-calendar .react-datepicker__year--selected,.date-picker-calendar .react-datepicker__year-text--selected{background-color:var(--nypl-colors-ui-focus);border-radius:0;color:var(--nypl-colors-ui-white);font-weight:700;opacity:1}.date-picker-calendar .react-datepicker__day--selected:hover,.date-picker-calendar .react-datepicker__day-text--selected:hover,.date-picker-calendar .react-datepicker__month--selected:hover,.date-picker-calendar .react-datepicker__month-text--selected:hover,.date-picker-calendar .react-datepicker__year--selected:hover,.date-picker-calendar .react-datepicker__year-text--selected:hover{background-color:var(--nypl-colors-ui-focus);color:var(--nypl-colors-ui-white)}.no-scroll{overflow:hidden;position:fixed;top:-100vh}.modal{background-color:var(--nypl-colors-ui-gray-x-light-warm);height:100vh;left:0;overflow-y:auto;padding:var(--nypl-space-s);position:fixed;top:0;width:100vw;z-index:999}
+/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */@font-face{font-family:system-ui;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Segoe UI Light"),local("Ubuntu Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Segoe UI Light Italic"),local("Ubuntu Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Segoe UI"),local("Ubuntu"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Segoe UI Italic"),local("Ubuntu Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Segoe UI Semibold"),local("Ubuntu Medium"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Segoe UI Semibold Italic"),local("Ubuntu Medium Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Segoe UI Bold"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Segoe UI Bold Italic"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}:root{--nypl-breakpoint-small:320px;--nypl-breakpoint-medium:600px;--nypl-breakpoint-large:960px;--nypl-breakpoint-xl:1280px}.container{padding:var(--nypl-space-s)}.placeholder{--color-place-holder:var(--nypl-colors-ui-gray-dark);align-items:center;border:4px dashed var(--color-place-holder);color:var(--color-place-holder);display:flex;font-size:3rem;justify-content:center;line-height:1.4;margin-bottom:var(--nypl-space-l);padding:4rem 1rem;width:100%}@media (min-width:960px){.placeholder{margin-bottom:var(--nypl-space-l)}}.placeholder--full{margin-bottom:var(--nypl-space-xxl)}@media (min-width:960px){.placeholder--full{margin-bottom:var(--nypl-space-xxxl)}}.placeholder--short{padding:1rem}.react-autosuggest__container{display:inline;position:relative;width:100%}.react-autosuggest__input--focused{outline:none}.react-autosuggest__input--open{border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.react-autosuggest__suggestions-container{display:none;width:100%}.react-autosuggest__suggestions-container--open{background-color:var(--nypl-colors-ui-white);display:block;font-weight:300;margin-top:1px;outline:1px solid var(--nypl-colors-ui-gray-light-cool);position:relative;width:100%;z-index:2}.react-autosuggest__suggestions-list{list-style-type:none;margin:0;padding:0}.react-autosuggest__suggestion{cursor:pointer;padding:var(--nypl-space-xs)}.react-autosuggest__suggestion--highlighted{background-color:var(--nypl-colors-ui-gray-light-cool)}.auto-suggest-bottom{padding:var(--nypl-space-xs)}.date-picker-calendar{font-family:var(--nypl-fonts-body)}.date-picker-calendar .react-datepicker{border-color:var(--nypl-colors-ui-gray-medium)}.date-picker-calendar .react-datepicker__triangle{transform:translate(32px)!important}.date-picker-calendar .react-datepicker__triangle:before{border-bottom-color:var(--nypl-colors-ui-gray-medium)!important}.date-picker-calendar .react-datepicker__triangle:after{border-bottom-color:var(--nypl-colors-ui-gray-x-light-cool)!important}.date-picker-calendar .react-datepicker__navigation-icon{top:5px;width:0}.date-picker-calendar .react-datepicker__navigation-icon:before{border-color:var(--nypl-colors-ui-gray-medium)}.date-picker-calendar .react-datepicker__navigation:hover .react-datepicker__navigation-icon:before{border-color:var(--nypl-colors-ui-gray-dark)}.date-picker-calendar .react-datepicker__header{background-color:var(--nypl-colors-ui-gray-x-light-cool);border-color:var(--nypl-colors-ui-gray-medium)}.date-picker-calendar .react-datepicker__year-wrapper{max-width:220px}.date-picker-calendar .react-datepicker__day--keyboard-selected,.date-picker-calendar .react-datepicker__day:hover,.date-picker-calendar .react-datepicker__month-text:hover,.date-picker-calendar .react-datepicker__year-text:not(.react-datepicker__year-text--disabled):hover{background-color:var(--nypl-colors-ui-gray-x-light-cool);border-radius:0;color:var(--nypl-colors-ui-black)}.date-picker-calendar .react-datepicker__day--in-range.react-datepicker__day--in-range,.date-picker-calendar .react-datepicker__day--keyboard-selected,.date-picker-calendar .react-datepicker__month--in-range.react-datepicker__day--in-range,.date-picker-calendar .react-datepicker__year--in-range.react-datepicker__day--in-range{opacity:1}.date-picker-calendar .react-datepicker__day--in-range,.date-picker-calendar .react-datepicker__day--in-selecting-range,.date-picker-calendar .react-datepicker__day--keyboard-selected,.date-picker-calendar .react-datepicker__day-text--keyboard-selected,.date-picker-calendar .react-datepicker__month--in-range,.date-picker-calendar .react-datepicker__month--in-selecting-range,.date-picker-calendar .react-datepicker__month--keyboard-selected,.date-picker-calendar .react-datepicker__month-text--keyboard-selected,.date-picker-calendar .react-datepicker__year--in-range,.date-picker-calendar .react-datepicker__year--in-selecting-range,.date-picker-calendar .react-datepicker__year--keyboard-selected,.date-picker-calendar .react-datepicker__year-text--keyboard-selected{background-color:var(--nypl-colors-ui-gray-x-light-cool);border-radius:0;color:var(--nypl-colors-ui-black)}.date-picker-calendar .react-datepicker__day--today,.date-picker-calendar .react-datepicker__day--today:hover,.date-picker-calendar .react-datepicker__day-text--today,.date-picker-calendar .react-datepicker__day-text--today:hover,.date-picker-calendar .react-datepicker__month--today,.date-picker-calendar .react-datepicker__month--today:hover,.date-picker-calendar .react-datepicker__month-text--today,.date-picker-calendar .react-datepicker__month-text--today:hover,.date-picker-calendar .react-datepicker__year--today,.date-picker-calendar .react-datepicker__year--today:hover,.date-picker-calendar .react-datepicker__year-text--today,.date-picker-calendar .react-datepicker__year-text--today:hover{background-color:var(--nypl-colors-ui-gray-light-cool);color:var(--nypl-colors-ui-black)}.date-picker-calendar .react-datepicker__day--selected,.date-picker-calendar .react-datepicker__day-text--selected,.date-picker-calendar .react-datepicker__month--selected,.date-picker-calendar .react-datepicker__month-text--selected,.date-picker-calendar .react-datepicker__year--selected,.date-picker-calendar .react-datepicker__year-text--selected{background-color:var(--nypl-colors-ui-focus);border-radius:0;color:var(--nypl-colors-ui-white);font-weight:700;opacity:1}.date-picker-calendar .react-datepicker__day--selected:hover,.date-picker-calendar .react-datepicker__day-text--selected:hover,.date-picker-calendar .react-datepicker__month--selected:hover,.date-picker-calendar .react-datepicker__month-text--selected:hover,.date-picker-calendar .react-datepicker__year--selected:hover,.date-picker-calendar .react-datepicker__year-text--selected:hover{background-color:var(--nypl-colors-ui-focus);color:var(--nypl-colors-ui-white)}

package/dist/theme/components/select.d.ts

@@ -1,18 +1,12 @@
 declare const Select: {
     parts: string[];
-    baseStyle: ({ labelPosition, labelWidth }: {
+    baseStyle: ({ labelPosition }: {
         labelPosition: any;
-        labelWidth: any;
     }) => {
         marginBottom: string;
         ".chakra-select__icon-wrapper": {
             zIndex: string;
         };
-        helperText: {
-            marginLeft: {
-                md: string;
-            };
-        };
         inline: {
             display: {
                 md: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.26.1",
+  "version": "0.27.0",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -57,27 +57,28 @@
     }
   ],
   "dependencies": {
-    "@chakra-ui/react": ">=1.7.1",
-    "@chakra-ui/system": ">=1.8.1",
-    "@emotion/react": "11.4.1",
-    "@emotion/styled": "11.3.0",
-    "framer-motion": "4.1.17",
+    "@chakra-ui/react": ">=1.8.5",
+    "@chakra-ui/system": ">=1.11.0",
+    "@emotion/react": ">=11.4.1",
+    "@emotion/styled": ">=11.3.0",
+    "framer-motion": "^4.1.17",
     "he": "1.2.0",
     "react-datepicker": "4.1.1",
     "system-font-css": "2.0.2",
     "typescript": "4.3.5"
   },
   "peerDependencies": {
-    "@chakra-ui/react": ">=1.7.1",
-    "@chakra-ui/system": ">=1.8.1",
+    "@chakra-ui/react": ">=1.8.0",
+    "@chakra-ui/system": ">=1.10.0",
     "@emotion/react": ">=11.4.1",
     "@emotion/styled": ">=11.3.0",
-    "framer-motion": ">=4.1.17",
+    "framer-motion": "^4.1.17",
     "react": ">=16.13.0",
     "react-dom": ">=16.13.0"
   },
   "devDependencies": {
     "@babel/core": "7.14.6",
+    "@chakra-ui/storybook-addon": "1.0.3",
     "@mdx-js/react": "1.6.22",
     "@size-limit/preset-small-lib": "5.0.1",
     "@storybook/addon-a11y": "6.4.19",
@@ -86,7 +87,6 @@
     "@storybook/addon-essentials": "6.4.19",
     "@storybook/addon-jest": "6.4.19",
     "@storybook/addon-links": "6.4.19",
-    "@storybook/addon-queryparams": "6.2.9",
     "@storybook/addons": "6.4.19",
     "@storybook/react": "6.4.19",
     "@svgr/rollup": "5.5.0",
@@ -124,12 +124,11 @@
     "node-sass-glob-importer": "5.3.2",
     "normalize.css": "8.0.1",
     "prettier": "2.4.1",
-    "react": "16.14.0",
+    "react": "17.0.2",
     "react-autosuggest": "10.0.2",
     "react-docgen-typescript-loader": "3.1.0",
-    "react-dom": "16.14.0",
-    "react-router-dom": "5.2.0",
-    "react-test-renderer": "16.14.0",
+    "react-dom": "17.0.2",
+    "react-test-renderer": "17.0.2",
     "rollup-plugin-postcss": "4.0.0",
     "rollup-plugin-svg": "2.0.0",
     "sass": "1.35.1",

package/src/components/Link/Link.stories.mdx

@@ -6,10 +6,6 @@ import {
   Meta,
   Story,
 } from "@storybook/addon-docs";
-import {
-  BrowserRouter as Router,
-  Link as ReactRouterLink,
-} from "react-router-dom";
 import { withDesign } from "storybook-addon-designs";
 
 import Link from "./Link";
@@ -258,16 +254,6 @@ import DS from "@nypl/design-system-react-components";
 </DS.Link>;
 ```
 
-<Canvas>
-  <DSProvider>
-    <Router>
-      <Link type={LinkTypes.Action}>
-        <ReactRouterLink to="#">Next Page</ReactRouterLink>
-      </Link>
-    </Router>
-  </DSProvider>
-</Canvas>
-
 ### NextJS
 
 NextJS's `Link` component should wrap the Design System's `Link` component.

package/src/components/Link/Link.test.tsx

@@ -1,10 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import * as React from "react";
-import {
-  BrowserRouter as Router,
-  Link as ReactRouterLink,
-} from "react-router-dom";
 import renderer from "react-test-renderer";
 
 import Link from "./Link";
@@ -106,24 +102,6 @@ describe("Link", () => {
     expect(screen.getByRole("link")).toBeInTheDocument();
   });
 
-  it("Can pass in a ReactRouter Link", () => {
-    render(
-      <Router>
-        <Link type={LinkTypes.Action}>
-          <ReactRouterLink to="#">
-            <Icon
-              name={IconNames.Download}
-              align={IconAlign.Left}
-              iconRotation={IconRotationTypes.Rotate0}
-            />
-            Download
-          </ReactRouterLink>
-        </Link>
-      </Router>
-    );
-    expect(screen.getByRole("link")).toBeInTheDocument();
-  });
-
   it("throws an error if text is passed but no url is passed", () => {
     expect(() => render(<Link>Test</Link>)).toThrowError(
       "`Link` needs the `href` prop."

package/src/components/Modal/Modal.stories.mdx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { ButtonGroup } from "@chakra-ui/react";
 import {
   ArgsTable,
   Canvas,
@@ -6,22 +6,18 @@ import {
   Meta,
   Story,
 } from "@storybook/addon-docs";
+import { useState } from "react";
 
-import Modal from "./Modal";
 import Button from "../Button/Button";
+import { ButtonTypes } from "../Button/ButtonTypes";
+import Heading from "../Heading/Heading";
+import Link from "../Link/Link";
+import { ModalTrigger, useModal } from "./Modal";
 import { getCategory } from "../../utils/componentCategories";
 
 <Meta
   title={getCategory("Modal")}
   component={Modal}
-  argTypes={{
-    blockName: { control: false },
-    children: { table: { disable: true } },
-    className: { control: false },
-    id: { control: false },
-    modifiers: { control: false },
-    open: { description: "Only used in Storybook." },
-  }}
   parameters={{
     jest: ["Modal.test.tsx"],
   }}
@@ -32,164 +28,275 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `0.3.5`    |
+| Latest            | `0.27.0`   |
 
 ## Table of Contents
 
 - [Overview](#overview)
-- [Component Props](#component-props)
-- [Code Implementation](#code-implementation)
+- [Accessibility](#accessibility)
+- [ModalTrigger](#modaltrigger)
+- [ModalTrigger Component Props](#modaltrigger-component-props)
+- [useModal](#usemodal)
+- [useModal Component Props](#usemodal-component-props)
+- [Content Window Scrolling](#content-window-scrolling)
 
 ## Overview
 
 _Note: This component is going through an accessibility review and is not
 recommended for use until it is updated._
 
-<Description of={Modal} />
+## Accessibility
 
-export const ModalStory = (args) => {
-  const [isModalOpen, setIsModalOpen] = React.useState(args.open);
-  const openModal = () => setIsModalOpen(true);
-  const closeModal = () => setIsModalOpen(false);
-  return (
-    <>
-      <Button id="1" onClick={openModal}>
-        Open Modal
-      </Button>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Tempus quam
-        pellentesque nec nam. Sit amet purus gravida quis blandit turpis cursus.
-        Est ante in nibh mauris. Ut faucibus pulvinar elementum integer. Mattis
-        ullamcorper velit sed ullamcorper morbi tincidunt ornare massa.
-        Consectetur purus ut faucibus pulvinar elementum integer enim. Accumsan
-        sit amet nulla facilisi morbi. Sagittis vitae et leo duis. Elit
-        scelerisque mauris pellentesque pulvinar pellentesque. Ullamcorper velit
-        sed ullamcorper morbi. Tellus in hac habitasse platea dictumst.
-        Fermentum leo vel orci porta non. Pulvinar mattis nunc sed blandit
-        libero volutpat sed. Cras semper auctor neque vitae tempus. Turpis
-        egestas sed tempus urna et pharetra pharetra massa. Metus aliquam
-        eleifend mi in nulla posuere sollicitudin aliquam. Sit amet risus nullam
-        eget felis eget nunc. Pharetra et ultrices neque ornare.
-      </p>
-      <p>
-        Pellentesque massa placerat duis ultricies. Viverra suspendisse potenti
-        nullam ac tortor vitae purus faucibus ornare. Pulvinar neque laoreet
-        suspendisse interdum consectetur libero. Amet mauris commodo quis
-        imperdiet massa tincidunt nunc pulvinar sapien. Quisque sagittis purus
-        sit amet. Duis ut diam quam nulla porttitor massa id. Quis enim lobortis
-        scelerisque fermentum dui faucibus in ornare. At lectus urna duis
-        convallis. In mollis nunc sed id semper risus. Dolor sed viverra ipsum
-        nunc aliquet bibendum enim facilisis.
-      </p>
-      {isModalOpen && (
-        <Modal>
-          <Button id="2" onClick={closeModal}>
-            Close Modal
-          </Button>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus
-            quam pellentesque nec nam. Sit amet purus gravida quis blandit
-            turpis cursus. Est ante in nibh mauris. Ut faucibus pulvinar
-            elementum integer. Mattis ullamcorper velit sed ullamcorper morbi
-            tincidunt ornare massa. Consectetur purus ut faucibus pulvinar
-            elementum integer enim. Accumsan sit amet nulla facilisi morbi.
-            Sagittis vitae et leo duis. Elit scelerisque mauris pellentesque
-            pulvinar pellentesque. Ullamcorper velit sed ullamcorper morbi.
-            Tellus in hac habitasse platea dictumst. Fermentum leo vel orci
-            porta non. Pulvinar mattis nunc sed blandit libero volutpat sed.
-            Cras semper auctor neque vitae tempus. Turpis egestas sed tempus
-            urna et pharetra pharetra massa. Metus aliquam eleifend mi in nulla
-            posuere sollicitudin aliquam. Sit amet risus nullam eget felis eget
-            nunc. Pharetra et ultrices neque ornare.
-          </p>
-          <p>
-            Pellentesque massa placerat duis ultricies. Viverra suspendisse
-            potenti nullam ac tortor vitae purus faucibus ornare. Pulvinar neque
-            laoreet suspendisse interdum consectetur libero. Amet mauris commodo
-            quis imperdiet massa tincidunt nunc pulvinar sapien. Quisque
-            sagittis purus sit amet. Duis ut diam quam nulla porttitor massa id.
-            Quis enim lobortis scelerisque fermentum dui faucibus in ornare. At
-            lectus urna duis convallis. In mollis nunc sed id semper risus.
-            Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis.
-          </p>
-          <p>
-            Eget felis eget nunc lobortis mattis aliquam faucibus. Orci dapibus
-            ultrices in iaculis nunc sed. Vel elit scelerisque mauris
-            pellentesque pulvinar. Ultrices neque ornare aenean euismod
-            elementum nisi. Sollicitudin ac orci phasellus egestas tellus rutrum
-            tellus pellentesque. Lorem ipsum dolor sit amet. Tempus imperdiet
-            nulla malesuada pellentesque elit eget gravida cum. Pellentesque
-            massa placerat duis ultricies lacus sed turpis tincidunt. Donec et
-            odio pellentesque diam volutpat. Augue ut lectus arcu bibendum at
-            varius vel pharetra vel. Sit amet justo donec enim diam vulputate ut
-            pharetra sit. Felis eget nunc lobortis mattis aliquam faucibus.
-            Tincidunt praesent semper feugiat nibh sed pulvinar proin. Facilisi
-            nullam vehicula ipsum a. Ut sem nulla pharetra diam sit amet nisl
-            suscipit adipiscing.
-          </p>
-        </Modal>
-      )}
-    </>
-  );
-};
+TBD
+
+## ModalTrigger
 
-## Component Props
+<Description of={ModalTrigger} />
+
+```jsx
+import { ModalTrigger } from "@nypl/design-system-react-components";
+
+//...
+<ModalTrigger
+  buttonText="Button Text"
+  id="modal-trigger"
+  modalProps={{
+    bodyContent="body text"
+    closeButtonLabel="Close Button"
+    headingText="Modal Heading Text"
+    onClose={() => {
+      console.log("custom close");
+    }}
+  }}
+/>;
+```
+
+## ModalTrigger Component Props
 
 <Canvas withToolbar>
   <Story
-    name="Modal"
+    name="ModalTrigger"
     args={{
-      blockName: undefined,
-      className: undefined,
-      id: "modal-id",
-      modifiers: undefined,
-      open: false,
+      buttonText: "Button Text",
+      id: "modal-trigger",
+      modalProps: {
+        bodyContent: "body text",
+        closeButtonLabel: "Close Button",
+        headingText: "Modal Heading Text",
+        onClose: () => {
+          console.log("custom close");
+        },
+      },
     }}
   >
-    {(args) => <ModalStory {...args} />}
+    {(args) => <ModalTrigger {...args} />}
   </Story>
 </Canvas>
 
-<ArgsTable story="Modal" />
+<ArgsTable story="ModalTrigger" />
+
+## useModal
 
-## Code Implementation
+<Description of={useModal} />
 
-The `Modal` component displays a pop-up on the page whenever it is rendered. This
-means that the `Modal` component itself does not control or have state for when
-the pop-up should display. Controlling the state for when to render the `Modal`
-component should be contained in the parent component.
+You can retrieve the DS `Modal` component and the `onOpen` and `onClose` function
+handlers when calling the `useModal` function. The `onOpen` function handler is
+used to open the `Modal` React component. This function can be passed to any
+number of elements that use the `onClick` attribute. The `onClose` function can
+be used on any element that uses the `onClick` attribute.
 
-Typically, a `Button` is used to trigger the action to render the `Modal`. The
-`Button` to deactivate the modal MUST be a child of the `Modal` component.
+**NOTE: in this case, the `buttonText` prop is not necessary since you have to
+create and render your own button.**
 
-For a wrapper component implementation, we suggest the following template:
+```jsx
+import { useModal } from "@nypl/design-system-react-components";
 
-```tsx
-export const PageComponent = () => {
-  // Don't render the Modal by default.
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  // Event handlers that update the local state for rendering the `Modal`.
-  const openModal = () => setIsModalOpen(true);
-  const closeModal = () => setIsModalOpen(false);
+// ...
+export const ModalStory = (args) => {
+  const { onClose, onOpen, Modal } = useModal();
+  const modalProps = {
+    bodyContent: (
+      <>
+        <Button id="custom-close" onClick={onClose}>
+          Go back
+        </Button>
+        <p>This is the body content.</p>
+        <Button id="custom-close2" onClick={onClose}>
+          This is a custom close button.
+        </Button>
+      </>
+    ),
+    closeButtonLabel: "Close Button",
+    headingText: "Modal Heading Text",
+    onClose: () => {
+      console.log("custom close");
+      onClose();
+    },
+  };
   return (
     <>
-      <Button id="1" onClick={openModal}>
-        Open Modal
-      </Button>
-      <p>Some content this component renders</p>
-      {isModalOpen && (
-        <Modal>
-          <Button id="2" onClick={closeModal}>
-            Close Modal
-          </Button>
-          <p>This is the content that displays inside the `Modal` component.
-            Make sure that there is a child `Button` component in the `Modal`
-            component that "closes" it or removes it from the DOM.
-        </Modal>
-      )}
+      <ButtonGroup>
+        <Button id="1" onClick={onOpen}>
+          Open Modal
+        </Button>
+        <Button buttonType={ButtonTypes.Secondary} id="2" onClick={onOpen}>
+          I can open the modal, too
+        </Button>
+      </ButtonGroup>
+      <div onClick={onOpen}>
+        I'm just a div and shouldn't be used in production but this is just an
+        example
+      </div>
+      <Modal {...modalProps} />
     </>
   );
 };
 ```
+
+export const ModalStory = (args) => {
+  const { onClose, onOpen, Modal } = useModal();
+  const modalProps = {
+    bodyContent: (
+      <>
+        <Button id="custom-close" onClick={onClose}>
+          Go back
+        </Button>
+        <p>This is the body content.</p>
+        <Button id="custom-close2" onClick={onClose}>
+          This is a custom close button.
+        </Button>
+      </>
+    ),
+    closeButtonLabel: "Close Button",
+    headingText: "Modal Heading Text",
+    onClose: () => {
+      console.log("custom close");
+      onClose();
+    },
+  };
+  return (
+    <>
+      <ButtonGroup>
+        <Button id="1" onClick={onOpen}>
+          Open Modal
+        </Button>
+        <Button buttonType={ButtonTypes.Secondary} id="2" onClick={onOpen}>
+          I can open the modal, too
+        </Button>
+      </ButtonGroup>
+      <div onClick={onOpen}>
+        I'm just a div and shouldn't be used in production but this is just an
+        example
+      </div>
+      <Modal {...modalProps} />
+    </>
+  );
+};
+
+## useModal Component Props
+
+<Canvas withToolbar>
+  <Story name="Modal">
+    <ModalStory />
+  </Story>
+</Canvas>
+
+## Content Window Scrolling
+
+In either `Modal` pattern, the main content inside the `Modal` component will
+scroll while the `Modal`'s header and footer still stay static. Check the
+example below with a lot of content inside the `Modal`.
+
+<Canvas withToolbar>
+  <Story
+    name="Content Window Scrolling"
+    args={{
+      buttonText: "Button Text",
+      id: "modal-scrolling",
+      modalProps: {
+        bodyContent: (
+          <>
+            <Heading text="Content Title" />
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Pellentesque massa placerat duis ultricies lacus sed turpis
+              tincidunt.
+              <Link href="http://nypl.org">Porttitor eget dolor</Link> morbi non
+              arcu risus quis varius. Faucibus in ornare quam viverra orci sagittis.
+            </p>
+            <p>
+              Nisl vel pretium lectus quam id leo in. Etiam dignissim diam quis
+              enim lobortis scelerisque fermentum. Diam maecenas sed enim ut sem
+              viverra. Diam quam nulla porttitor massa id neque. Sed faucibus
+              turpis in eu mi.
+            </p>
+            <p>
+              Ornare lectus sit amet est placerat in. Quis blandit turpis cursus
+              in. Aliquam ut porttitor leo a diam sollicitudin tempor id eu.
+              Pellentesque eu tincidunt tortor aliquam nulla facilisi cras
+              fermentum. Porttitor leo a diam sollicitudin tempor id eu nisl
+              nunc. Feugiat nisl pretium fusce id velit ut tortor. Porttitor leo
+              a diam sollicitudin tempor id eu nisl nunc.
+            </p>
+            <p>
+              Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Purus
+              gravida quis blandit turpis cursus in hac. Morbi tempus iaculis
+              urna id volutpat. Lectus nulla at volutpat diam ut venenatis.
+              Donec ac odio tempor orci dapibus ultrices in iaculis. Dui vivamus
+              arcu felis bibendum ut tristique. Cras semper auctor neque vitae
+              tempus quam pellentesque. Placerat orci nulla pellentesque
+              dignissim enim sit amet. Feugiat pretium nibh ipsum consequat.
+              Placerat orci nulla pellentesque dignissim. Suspendisse faucibus
+              interdum posuere lorem. Nullam non nisi est sit. Turpis egestas
+              integer eget aliquet nibh praesent. Tortor at risus 'viverra
+              adipiscing at. Eu augue ut lectus arcu bibendum at varius vel'
+              pharetra.
+            </p>
+            <Heading text="Another Title" />
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Pellentesque massa placerat duis ultricies lacus sed turpis
+              tincidunt.
+              <Link href="http://nypl.org">Porttitor eget dolor</Link> morbi non
+              arcu risus quis varius. Faucibus in ornare quam viverra orci sagittis.
+            </p>
+            <p>
+              Nisl vel pretium lectus quam id leo in. Etiam dignissim diam quis
+              enim lobortis scelerisque fermentum. Diam maecenas sed enim ut sem
+              viverra. Diam quam nulla porttitor massa id neque. Sed faucibus
+              turpis in eu mi.
+            </p>
+            <p>
+              Ornare lectus sit amet est placerat in. Quis blandit turpis cursus
+              in. Aliquam ut porttitor leo a diam sollicitudin tempor id eu.
+              Pellentesque eu tincidunt tortor aliquam nulla facilisi cras
+              fermentum. Porttitor leo a diam sollicitudin tempor id eu nisl
+              nunc. Feugiat nisl pretium fusce id velit ut tortor. Porttitor leo
+              a diam sollicitudin tempor id eu nisl nunc.
+            </p>
+            <p>
+              Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Purus
+              gravida quis blandit turpis cursus in hac. Morbi tempus iaculis
+              urna id volutpat. Lectus nulla at volutpat diam ut venenatis.
+              Donec ac odio tempor orci dapibus ultrices in iaculis. Dui vivamus
+              arcu felis bibendum ut tristique. Cras semper auctor neque vitae
+              tempus quam pellentesque. Placerat orci nulla pellentesque
+              dignissim enim sit amet. Feugiat pretium nibh ipsum consequat.
+              Placerat orci nulla pellentesque dignissim. Suspendisse faucibus
+              interdum posuere lorem. Nullam non nisi est sit. Turpis egestas
+              integer eget aliquet nibh praesent. Tortor at risus 'viverra
+              adipiscing at. Eu augue ut lectus arcu bibendum at varius vel'
+              pharetra.
+            </p>
+          </>
+        ),
+        closeButtonLabel: "Close Button",
+        headingText: "Modal Heading Text",
+      },
+    }}
+  >
+    {(args) => <ModalTrigger {...args} />}
+  </Story>
+</Canvas>