Merge branch 'DSD-1634/campaign-hero-spacing' of https://github.com/N…

…YPL/nypl-design-system into DSD-1634/campaign-hero-spacing
NYPL · Dec 4, 2023 · 3cce2df · 3cce2df
2 parents 324e5cb + 9771074
commit 3cce2df
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 - Updates the `Notification` component to accept `JSX.Element` type values into its `"notificationHeading"` prop.
 - Updates the `StructuredContent` component to accept `JSX.Element` type values into its `"headingText"` and `"calloutText"` props.
 - Adds z-index to the `DatePicker`'s calendar container so that the helper text does not shift when the calendar opens.
+- Updates the `FeaturedContent` component by adjusting the spacing in the `"fullScreen"` variant to better align the component text content with the page text content.
 - Updates the `"campaign"` variant of the `Hero` component to improve the spacing around the component.
 
 ## Fixes

diff --git a/src/components/FeaturedContent/FeaturedContent.mdx b/src/components/FeaturedContent/FeaturedContent.mdx
@@ -8,10 +8,10 @@ import Link from "../Link/Link";
 
 # Featured Content
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `2.1.0`    |
-| Latest            | `2.1.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `2.1.0`      |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 
@@ -25,7 +25,8 @@ import Link from "../Link/Link";
 
 ## Overview
 
-The `FeaturedContent` component provides a method to visually emphasize a text block with an image, within a full page layout.
+The `FeaturedContent` component provides a method to visually emphasize a text
+block with an image, within a full page layout.
 
 ## Component Props
 
@@ -35,9 +36,14 @@ The `FeaturedContent` component provides a method to visually emphasize a text b
 
 ## Accessibility
 
-The `FeaturedContent` component combines a text block and an image. The text block (`textContent`) can be any JSX element, so accessibility for child input elements should follow the accessibility requirements specified for each input component (for example, [Button](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-button--docs)).
-All images must have an `alt` attribute, even if it's empty. The `alt` prop should be used to concisely describe the image.
-If the image is decorative, then the `alt` prop should be an empty string `""`.
+The `FeaturedContent` component combines a text block and an image. The text
+block (`textContent`) can be any JSX element, so accessibility for child input
+elements should follow the accessibility requirements specified for each input
+component (for example,
+[Button](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/docs/components-form-elements-button--docs)).
+All images must have an `alt` attribute, even if it's empty. The `alt` prop
+should be used to concisely describe the image. If the image is decorative, then
+the `alt` prop should be an empty string `""`.
 
 Resources for text accessibility:
 
@@ -51,31 +57,43 @@ Resources for image accessibility:
 
 ## Component Width Variations
 
-The width variations of the `FeaturedContent` component can be rendered through the `isFullWidth` prop.
-The default is `isFullWidth = false`, and the component will fill only its parent. If `isFullWidth = true`, component will fill the screen's width (max 1280px), breaking out of its parent container.
-This full layout is best viewed on a full screen, not as shown below.
+The width variations of the `FeaturedContent` component can be rendered through
+the `isFullWidth` prop. The default is `isFullWidth = false`, and the component
+will fill only its parent. If `isFullWidth = true`, component will fill the
+screen's width (max 1280px), breaking out of its parent container. This full
+layout is best viewed on a full screen, not as shown below.
 
 <Canvas of={FeaturedContentStories.LayoutVariations} />
 
 ## Image Position Variations
 
-The image position variations of the `FeaturedContent` component can be rendered through the `imageProps.position` prop. The default is `end`, and the image will appear after the text block in a row (on mobile, it will appear below).
-The other option is `start`, where the image will appear before the text block in the row on desktop (and above it on mobile).
+The image position variations of the `FeaturedContent` component can be rendered
+through the `imageProps.position` prop. The default is `end`, and the image will
+appear after the text block in a row (on mobile, it will appear below). The
+other option is `start`, where the image will appear before the text block in
+the row on desktop (and above it on mobile).
 
 <Canvas of={FeaturedContentStories.ImagePositionVariations} />
 
 ## Image Width Variations
 
-The image width variations of the `FeaturedContent` component can be rendered through the `imageProps.width` prop.
-The options for width are `oneQuarter`, `oneThird`, `oneHalf`, `twoThirds`, and `threeQuarters`. The default width is `oneHalf`.
+The image width variations of the `FeaturedContent` component can be rendered
+through the `imageProps.width` prop. The options for width are `oneQuarter`,
+`oneThird`, `oneHalf`, `twoThirds`, and `threeQuarters`. The default width is
+`oneHalf`.
 
 <Canvas of={FeaturedContentStories.imageWidthVariations} />
 
 ## Text Content
 
-`textContent` is a string or JSX element passed into `FeaturedContent`, so accessibility standards and spacing should be considered independently of the `FeaturedContent` styling.
+`textContent` is a string or JSX element passed into `FeaturedContent`, so
+accessibility standards and spacing should be considered independently of the
+`FeaturedContent` styling.
 
-The above example with an overline, a heading, a short paragraph of body text, and a CTA button is the recommended usage. While other configurations are possible, keep in mind that the minimum height of the component is 320px and it is best to avoid excessive white space.
+The above example with an overline, a heading, a short paragraph of body text,
+and a CTA button is the recommended usage. While other configurations are
+possible, keep in mind that the minimum height of the component is 320px and it
+is best to avoid excessive white space.
 
 <Canvas of={FeaturedContentStories.textContentVariations} />
 

diff --git a/src/components/FeaturedContent/FeaturedContent.stories.tsx b/src/components/FeaturedContent/FeaturedContent.stories.tsx
@@ -97,7 +97,11 @@ export const WithControls: Story = {
 
 export const LayoutVariations: Story = {
   render: () => (
-    <SimpleGrid columns={1} maxWidth="1280px">
+    <SimpleGrid columns={1} maxWidth="1280px" margin="auto">
+      <Text noSpace>
+        The examples below are within a container with the max-width set to
+        1280px.
+      </Text>
       <FeaturedContent
         isFullWidth={true}
         textContent={

diff --git a/src/components/FeaturedContent/featuredContentChangelogData.ts b/src/components/FeaturedContent/featuredContentChangelogData.ts
@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      'Updated the spacing in the "fullScreen" variant to better align the component text content with the page text content.',
+    ],
+  },
   {
     date: "2023-10-18",
     version: "2.1.0",

diff --git a/src/theme/components/featuredContent.ts b/src/theme/components/featuredContent.ts
@@ -27,31 +27,39 @@ const FeaturedContent = {
     }
     return {
       bgColor: "ui.bg.default",
-      _dark: {
-        bgColor: "dark.ui.bg.default",
-      },
-      width: full ? "100vw" : "100%",
       left: full ? "50%" : "auto",
-      right: full ? "50%" : "auto",
-      position: "relative",
       marginLeft: full ? "-50vw" : "auto",
       marginRight: full ? "-50vw" : "auto",
+      position: "relative",
+      right: full ? "50%" : "auto",
+      width: full ? "100vw" : "100%",
+      _dark: {
+        bgColor: "dark.ui.bg.default",
+      },
       wrapper: {
         ...wrapperStyles,
-        minHeight: "320px",
-        maxWidth: full ? "1280px" : "100%",
-        display: "flex",
         alignItems: "stretch",
+        display: "flex",
         flexDirection: imageAtEnd
           ? { sm: "column-reverse", md: "row-reverse" }
           : { sm: "column", md: "row" },
+        maxWidth: full ? "1280px" : "100%",
+        minHeight: "320px",
+        paddingLeft: full ? { base: null, md: "s" } : null,
+        paddingRight: full ? { base: null, md: "s" } : null,
       },
       text: {
         display: "flex",
-        padding: "l",
         flex: 1,
         flexDirection: "column",
         justifyContent: "center",
+        padding: "l",
+        /** The `paddingLeft` attribute is used to adjust the spacing around the
+         * text when the image is positioned at the end. For aesthetic reasons,
+         * we opted to not adjust the spacing around the text when the image is
+         * positioned at the start.
+         * */
+        paddingStart: full && imageAtEnd ? { base: null, md: 0 } : null,
       },
       imgWrapper: {
         backgroundPosition: "center",