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

package/src/components/VideoPlayer/VideoPlayer.stories.mdx

@@ -98,6 +98,7 @@ is `16:9`.
         {...args}
         aspectRatio={args.aspectRatio}
         embedCode={args.embedCode}
+        videoId={args.videoId && args.videoId}
         videoType={args.videoType && args.videoType}
       />
     )}

package/src/components/VideoPlayer/__snapshots__/VideoPlayer.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`VideoPlayer renders the UI snapshot correctly 1`] = `
 >
   <div
     className="css-1xdhyk6"
+    id="video-player-without-text-componentWrapper-wrapper"
   >
     <div
       className="css-0"
@@ -33,6 +34,7 @@ exports[`VideoPlayer renders the UI snapshot correctly 2`] = `
 >
   <div
     className="css-1xdhyk6"
+    id="video-player-with-text-componentWrapper-wrapper"
   >
     <h2
       className="chakra-heading css-1xdhyk6"
@@ -81,6 +83,7 @@ exports[`VideoPlayer renders the UI snapshot correctly 3`] = `
 >
   <div
     className="css-1xdhyk6"
+    id="video-player-with-text-componentWrapper-wrapper"
   >
     <h2
       className="chakra-heading css-1xdhyk6"
@@ -144,6 +147,7 @@ exports[`VideoPlayer renders the UI snapshot correctly 5`] = `
 >
   <div
     className="css-1xdhyk6"
+    id="chakra-componentWrapper-wrapper"
   >
     <div
       className="css-0"
@@ -169,6 +173,7 @@ exports[`VideoPlayer renders the UI snapshot correctly 6`] = `
 >
   <div
     className="css-1xdhyk6"
+    id="props-componentWrapper-wrapper"
   >
     <div
       className="css-0"

package/src/docs/Chakra.stories.mdx

@@ -444,13 +444,13 @@ In the following example, the `Button` component has been passed `p` and `maxW`
 props which are shorthand for "padding" and "max-width", respectively.
 
 ```jsx
-<Button id="styleprops" p="s" maxW="200px">
+<Button id="styled-button" p="s" maxH="none" maxW="200px">
   Button
 </Button>
 ```
 
 <DSProvider>
-  <Button id="styleprops" p="s" maxW="200px">
+  <Button id="styled-button" p="s" maxH="none" maxW="200px">
     Button
   </Button>
 </DSProvider>

package/src/theme/components/button.ts

@@ -88,6 +88,7 @@ const iconOnly = {
   color: "inherit",
   _hover: {
     bg: "ui.gray.xx-light-cool",
+    borderColor: "ui.gray.medium",
   },
   paddingInlineStart: "inset.narrow",
   paddingInlineEnd: "inset.narrow",

package/src/theme/components/card.ts

@@ -1,6 +1,7 @@
 interface CardBaseStyleProps {
   hasImage: boolean;
   imageIsAtEnd: boolean;
+  isAlignedRightActions: boolean;
   isBordered: boolean;
   isCentered: boolean;
   layout: string;
@@ -69,6 +70,7 @@ const Card = {
   baseStyle: ({
     hasImage,
     imageIsAtEnd,
+    isAlignedRightActions,
     isBordered,
     isCentered,
     layout,
@@ -112,15 +114,19 @@ const Card = {
       flexFlow: "column wrap",
       textAlign: isCentered ? "center" : null,
       actions: {
-        width: ["100%", "100%", "180px"],
-        marginLeft: ["0", "0", "m"],
-        marginTop: ["xs", "xs", "0"],
+        flexShrink: { base: isAlignedRightActions ? "0" : null, md: "0" },
+        marginLeft: { base: "0", md: "m" },
+        marginTop: { base: "xs", md: "0" },
+        maxWidth: { base: "100%", md: "180px" },
+        width: "100%",
       },
       body: {
         display: { md: "block" },
+        flexBasis: { sm: isRow ? "100%" : null },
         flexFlow: { md: "row nowrap" },
         margin: bodyMargin,
         padding: bodyPadding,
+        width: { base: "100%", md: "auto" },
       },
       heading: {
         marginBottom: "xs",

package/src/theme/components/componentWrapper.ts

@@ -6,7 +6,7 @@ const ComponentWrapper = {
   parts: ["helperErrorText"],
   baseStyle: ({ hasChildren }: ComponentWrapperProps) => ({
     helperErrorText: {
-      marginTop: hasChildren ? "xs" : "0",
+      marginTop: hasChildren ? null : "0",
     },
   }),
 };

package/src/theme/components/global.ts

@@ -45,7 +45,7 @@ const checkboxRadioGroupStyles = (isFullWidth = false) => ({
   helperErrorText: {
     marginTop: "xs",
   },
-  stack: {
+  label: {
     width: isFullWidth ? "100%" : "fit-content",
   },
 });

package/src/theme/components/heading.ts

@@ -4,7 +4,6 @@ const margins = {
   marginTop: "0",
   marginLeft: "0",
   marginRight: "0",
-  marginBottom: "s",
 };
 
 // Heading Styles
@@ -62,11 +61,12 @@ const variants = {
 };
 
 const Heading = {
-  baseStyle: {
+  baseStyle: ({ noSpace }) => ({
     // This is to help target custom anchor elements
     // passed as children to the Heading component.
     a: baseLinkStyles,
-  },
+    marginBottom: noSpace ? "0" : "s",
+  }),
   // Available variants:
   // h1, h2, h3, h4, h5, h6,
   // primary, secondary, tertiary, callout

package/src/theme/components/image.ts

@@ -86,6 +86,7 @@ const CustomImage = {
   baseStyle: ({ size = "default" }: CustomImageBaseStyle) => ({
     figure: {
       margin: "auto",
+      width: "100%",
       ...imageSizes[size],
       img: {
         marginBottom: "xxs",

package/src/theme/components/skipNavigation.ts

@@ -1,5 +1,8 @@
 const SkipNavigation = {
   baseStyle: {
+    ul: {
+      margin: "0",
+    },
     // Don't display links by default...
     a: {
       backgroundColor: "ui.white",

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

package/src/utils/utils.ts

@@ -1,3 +1,6 @@
+import { HelperErrorTextType } from "../components/HelperErrorText/HelperErrorText";
+import { AriaAttributes } from "./interfaces";
+
 // Utility functions to use throughout the codebase
 
 /**
@@ -42,3 +45,40 @@ export const getStorybookHrefProps = (pageCount: number) => {
 
   return { computedCurrentPage, getPageHref };
 };
+
+interface GetAriaAttrsProps {
+  footnote: HelperErrorTextType;
+  id: string;
+  labelText: HelperErrorTextType;
+  name: string;
+  showLabel: boolean;
+}
+/**
+ * Get aria-* attributes for input components. This sets the `aria-label` and
+ * `aria-describedby` attributes, based on the label and footnote values.
+ */
+export const getAriaAttrs = ({
+  footnote,
+  id,
+  labelText,
+  name,
+  showLabel,
+}: GetAriaAttrsProps): AriaAttributes => {
+  let ariaAttributes: AriaAttributes = {};
+
+  if (!showLabel) {
+    if (typeof labelText !== "string") {
+      console.warn(
+        `NYPL Reservoir ${name}: \`labelText\` must be a string when \`showLabel\` is false.`
+      );
+    }
+    ariaAttributes["aria-label"] =
+      labelText && footnote
+        ? `${labelText} - ${footnote}`
+        : (labelText as string);
+  } else if (footnote) {
+    ariaAttributes["aria-describedby"] = `${id}-helperText`;
+  }
+
+  return ariaAttributes;
+};