Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DSD-1633: spacing for FeaturedContent #1469

Merged
merged 4 commits into from
Dec 1, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
52 changes: 35 additions & 17 deletions src/components/FeaturedContent/FeaturedContent.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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

Expand All @@ -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:

Expand All @@ -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} />

Expand Down
6 changes: 5 additions & 1 deletion src/components/FeaturedContent/FeaturedContent.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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={
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
28 changes: 18 additions & 10 deletions src/theme/components/featuredContent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading