From b3fef4df63f4a532e5f452ab209640a7dc4766e6 Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Thu, 30 Nov 2023 16:06:43 -0500 Subject: [PATCH 1/4] updated spacing in FeaturedContent --- CHANGELOG.md | 1 + .../FeaturedContent/FeaturedContent.mdx | 52 +++++++++++++------ .../FeaturedContent.stories.tsx | 3 +- .../featuredContentChangelogData.ts | 9 ++++ src/theme/components/featuredContent.ts | 28 ++++++---- 5 files changed, 65 insertions(+), 28 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5020b0cabf..227e291ba0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,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. ## Fixes diff --git a/src/components/FeaturedContent/FeaturedContent.mdx b/src/components/FeaturedContent/FeaturedContent.mdx index f54ef90b15..c05df8b87e 100644 --- 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. ## 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). ## 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`. ## 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. diff --git a/src/components/FeaturedContent/FeaturedContent.stories.tsx b/src/components/FeaturedContent/FeaturedContent.stories.tsx index 13d3401fea..e9b4b3f61d 100644 --- a/src/components/FeaturedContent/FeaturedContent.stories.tsx +++ b/src/components/FeaturedContent/FeaturedContent.stories.tsx @@ -97,7 +97,8 @@ export const WithControls: Story = { export const LayoutVariations: Story = { render: () => ( - + + The examples below are within a container with the max-width set to 1280px. Date: Thu, 30 Nov 2023 16:07:36 -0500 Subject: [PATCH 2/4] prettier --- src/components/FeaturedContent/FeaturedContent.stories.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/FeaturedContent/FeaturedContent.stories.tsx b/src/components/FeaturedContent/FeaturedContent.stories.tsx index e9b4b3f61d..b875ed4f60 100644 --- a/src/components/FeaturedContent/FeaturedContent.stories.tsx +++ b/src/components/FeaturedContent/FeaturedContent.stories.tsx @@ -98,7 +98,10 @@ export const WithControls: Story = { export const LayoutVariations: Story = { render: () => ( - The examples below are within a container with the max-width set to 1280px. + + The examples below are within a container with the max-width set to + 1280px. + Date: Thu, 30 Nov 2023 16:22:08 -0500 Subject: [PATCH 3/4] simplified styles --- src/theme/components/featuredContent.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/theme/components/featuredContent.ts b/src/theme/components/featuredContent.ts index d7880161c3..0bef5c5eb6 100644 --- a/src/theme/components/featuredContent.ts +++ b/src/theme/components/featuredContent.ts @@ -45,8 +45,8 @@ const FeaturedContent = { : { sm: "column", md: "row" }, maxWidth: full ? "1280px" : "100%", minHeight: "320px", - paddingLeft: full ? { base: null, md: "s" } : 0, - paddingRight: full ? { base: null, md: "s" } : 0, + paddingLeft: full ? { base: null, md: "s" } : null, + paddingRight: full ? { base: null, md: "s" } : null, }, text: { display: "flex", From 28c557613064ce8001be08645096cc9f18738501 Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Thu, 30 Nov 2023 18:24:02 -0500 Subject: [PATCH 4/4] better style attributes --- src/theme/components/featuredContent.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/components/featuredContent.ts b/src/theme/components/featuredContent.ts index 0bef5c5eb6..44bf5e4caa 100644 --- a/src/theme/components/featuredContent.ts +++ b/src/theme/components/featuredContent.ts @@ -59,7 +59,7 @@ const FeaturedContent = { * we opted to not adjust the spacing around the text when the image is * positioned at the start. * */ - paddingLeft: full && imageAtEnd ? { base: null, md: 0 } : null, + paddingStart: full && imageAtEnd ? { base: null, md: 0 } : null, }, imgWrapper: { backgroundPosition: "center",