@nypl/design-system-react-components 0.28.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.28.0",
+  "version": "1.0.0",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "analyze": "size-limit --why",
     "generate-sass-resources": "gulp",
     "storybook": "start-storybook -p 6006 -s ./.storybook/public",
-    "build-storybook:v0": "npm run prebuild:storybook && build-storybook -c .storybook -o ./reservoir/v0",
+    "build-storybook:v1": "npm run prebuild:storybook && build-storybook -c .storybook -o ./reservoir/v1",
     "prebuild:storybook": "npm run test:generate-output"
   },
   "lint-staged": {

package/src/components/ButtonGroup/ButtonGroup.stories.mdx

@@ -83,7 +83,7 @@ width.
 
 This component is a wrapper around the `Button` component. For accessibility
 information on the `Button` component, see the
-[Button Accessibility](https://nypl.github.io/nypl-design-system/reservoir/v0/?path=/docs/components-form-elements-button--button-with-controls#accessibility)
+[Button Accessibility](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-button--button-with-controls#accessibility)
 documentation.
 
 ## Button Width

package/src/components/Card/Card.stories.mdx

@@ -107,7 +107,7 @@ grouped together and displayed in some type of grid layout.
 ### CardHeading
 
 The `CardHeading` component mirrors the standard Reservoir Design System (DS)
-`Heading` component and accepts the [same props](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/components-typography-styles-heading--heading-with-controls).
+`Heading` component and accepts the [same props](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/components-typography-styles-heading--heading-with-controls).
 
 ### CardActions
 

package/src/components/Chakra/Box.stories.mdx

@@ -14,7 +14,7 @@ import DSProvider from "../../theme/provider";
 | Added             | `0.24.0`   |
 
 Note: This needs the use of the `DSProvider` component. See the
-[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
+[README](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/chakra-ui--page#dsprovider)
 for more information.
 
 This component is directly exported from Chakra UI. The `Box` is a simple and

package/src/components/Chakra/Center.stories.mdx

@@ -15,7 +15,7 @@ import DSProvider from "../../theme/provider";
 | Added             | `0.24.0`   |
 
 Note: This needs the use of the `DSProvider` component. See the
-[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
+[README](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/chakra-ui--page#dsprovider)
 for more information.
 
 These components are directly exported from Chakra UI. The `Center`, `Circle`,

package/src/components/Chakra/Flex.stories.mdx

@@ -16,7 +16,7 @@ import DSProvider from "../../theme/provider";
 | Latest            | `0.25.10`  |
 
 Note: This needs the use of the `DSProvider` component. See the
-[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
+[README](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/chakra-ui--page#dsprovider)
 for more information.
 
 This component is directly exported from Chakra UI. The `Flex` component is

package/src/components/Chakra/Grid.stories.mdx

@@ -14,7 +14,7 @@ import DSProvider from "../../theme/provider";
 | Latest            | `0.25.1`   |
 
 Note: This needs the use of the `DSProvider` component. See the
-[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
+[README](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/chakra-ui--page#dsprovider)
 for more information.
 
 This component is directly exported from Chakra UI. The `Grid` component is

package/src/components/Chakra/Stack.stories.mdx

@@ -14,7 +14,7 @@ import DSProvider from "../../theme/provider";
 | Added             | `0.24.0`   |
 
 Note: This needs the use of the `DSProvider` component. See the
-[README](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page#dsprovider)
+[README](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/chakra-ui--page#dsprovider)
 for more information.
 
 These components are directly exported from Chakra UI. The `Stack`, `HStack`,

package/src/components/SearchBar/SearchBar.stories.mdx

@@ -164,8 +164,8 @@ screenreaders to pick up this entire search form.
 
 Resources:
 
-- [Reservoir Select](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/components-form-elements-select--select-with-controls)
-- [Reservoir TextInput](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/components-form-elements-textinput--text-input-with-controls)
+- [Reservoir Select](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-select--select-with-controls)
+- [Reservoir TextInput](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-textinput--text-input-with-controls)
 - [a11ymatters Accessible Search Form](https://www.a11ymatters.com/pattern/accessible-search/)
 - [MDN ARIA: search role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/search_role)
 
@@ -310,7 +310,7 @@ const helperText = "";
 While the Design System does not implement an `Autosuggest` or `Autocomplete`
 component, it does show a pattern for using the `react-autosuggest` package.
 In this example, we're using the `react-autosuggest` example found in the
-[Basic Autosuggest story](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/autosuggest--autosuggest-library)
+[Basic Autosuggest story](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/development-guide-autosuggest--autosuggest-library)
 as the main component inside the `SearchBar` component.
 
 In order to render this custom input element in the `SearchBar` component, pass

package/src/components/StyleGuide/Buttons.stories.mdx

@@ -21,7 +21,7 @@ import DSProvider from "../../theme/provider";
 
 ## General Information
 
-Use the [Button](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/form-elements-button--basic)
+Use the [Button](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-button--button-with-controls)
 component to render form buttons.
 
 ```jsx

package/src/components/StyleGuide/Colors.stories.mdx

@@ -197,5 +197,5 @@ Section colors are branding colors only in use at NYPL.
 
 For additional spacing information, please refer to the Figma Main file.
 
-- [NYPL Brand Colors](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=15454%3A47007)
-- [NYPL UI Colors](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=14989%3A37)
+- [NYPL Brand Colors](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=15454%3A47007)
+- [NYPL UI Colors](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=47083%3A27674)

package/src/components/StyleGuide/Forms.stories.mdx

@@ -18,7 +18,8 @@ import { getCategory } from "../../utils/componentCategories";
 
 ## General Information
 
-Use the [Form](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/form-elements-form--form) component to control the placement and spacing for standard HTML forms.
+Use the [Form](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-form--form-with-controls)
+component to control the placement and spacing for standard HTML forms.
 
 ## Form Layout
 

package/src/components/StyleGuide/Iconography.stories.mdx

@@ -20,7 +20,7 @@ import DSProvider from "../../theme/provider";
 
 ## General Information
 
-Use the Reservoir Design System (DS) [Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props)
+Use the Reservoir Design System (DS) [Icon](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-media-icons-icon--icon-with-controls)
 component to render and control icons as `<svg>` elements within consuming apps.
 
 The DS utilizes the `Filled` icons available in the [Material UI Design System](https://material-ui.com/components/material-icons/).
@@ -28,7 +28,7 @@ The DS utilizes the `Filled` icons available in the [Material UI Design System](
 ## Icon Examples
 
 The graphic of the `Icon` component is handled through the `name` prop. To see
-all graphic options for `Icon`, please refer to the [Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props)
+all graphic options for `Icon`, please refer to the [Icon](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-media-icons-icon--icon-with-controls)
 Storybook page.
 
 <Canvas>

package/src/components/StyleGuide/Spacing.stories.mdx

@@ -68,7 +68,7 @@ between elements, both horizontal and vertical, should be `2rem`.
 
 Form input components should have a `2rem` space between each form input
 component. This includes both vertical (column) and horizontal (row) stacking.
-The DS [Form](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/components-form-elements-form--form-with-controls)
+The DS [Form](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-form--form-with-controls)
 component has correct spacing incorporated into its UI structure and should
 always be used when building forms. Please note that the spacing in the `Form`
 component is identical to the spacing in the `Grid` component.

package/src/components/StyleGuide/Typography.stories.mdx

@@ -205,7 +205,7 @@ black on a white background.
 
 In cases where specific colors must be applied to text elements, the DS
 provides CSS variables for the full NYPL color palette. Refer to the
-[Colors](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/style-guide-colors--colors-brand)
+[Colors](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/style-guide-colors--page)
 section of the Style Guide for details.
 
 ## Font Weight

package/src/theme/foundations/colors.ts

@@ -1,17 +1,14 @@
 import { Colors } from "@chakra-ui/react";
 
 /**
- * Colors taken from "../../styles/01-colors/*.scss"
+ * All colors can be found in Storybook:
+ *   https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/style-guide-colors--page
  *
- * All UI colors can be found in Storybook:
- *   https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/documentation-style-guide-colors--colors-utility
- * and in Figma:
- *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=14989%3A37
+ * All UI colors can be found in Figma:
+ *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=47083%3A27674
  *
- * All Brand colors can be found in Storybook:
- *   https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/documentation-style-guide-colors--colors-brand
- * and in Figma:
- *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=15454%3A47007
+ * All Brand colors can be found in Figma:
+ *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=15454%3A47007
  *
  * At the end of this file, there are objects that extend Chakra's default
  * color shade palette for individual colors. WE DO NOT RECOMMEND to use them