diff --git a/sites/public/src/components/listing/ListingViewSeeds.module.scss b/sites/public/src/components/listing/ListingViewSeeds.module.scss index 57ba535b85..904ad9478e 100644 --- a/sites/public/src/components/listing/ListingViewSeeds.module.scss +++ b/sites/public/src/components/listing/ListingViewSeeds.module.scss @@ -11,7 +11,8 @@ --subheading-margin: var(--seeds-s1); --subheading-margin-sm: var(--seeds-spacer-header); - &, p { + &, + p { overflow-wrap: anywhere; } } @@ -134,3 +135,16 @@ .link-no-gap { --link-interior-gap: 0; } + +.two-column-list { + columns: 2; + column-gap: var(--seeds-spacer-section); + @media (--md-down) { + columns: 1; + } +} + +.list-item { + list-style: disc; + margin-inline-start: var(--seeds-s5); +} diff --git a/sites/public/src/components/listing/ListingViewSeedsHelpers.tsx b/sites/public/src/components/listing/ListingViewSeedsHelpers.tsx index 347937dd28..66ab6d79df 100644 --- a/sites/public/src/components/listing/ListingViewSeedsHelpers.tsx +++ b/sites/public/src/components/listing/ListingViewSeedsHelpers.tsx @@ -34,6 +34,7 @@ import { CardList, ContentCardProps } from "../../patterns/CardList" import { OrderedCardList } from "../../patterns/OrderedCardList" import { ReadMore } from "../../patterns/ReadMore" import { DateSectionFlyer } from "./listing_sections/DateSection" +import styles from "./ListingViewSeeds.module.scss" export const getFilteredMultiselectQuestions = ( multiselectQuestions: ListingMultiselectQuestion[], @@ -140,15 +141,24 @@ export const getAccessibilityFeatures = (listing: Listing) => { const enabledFeatures = Object.entries(listing?.listingFeatures ?? {}) .filter(([_, value]) => value) .map((item) => item[0]) + const COLUMN_BREAKPOINT = 6 if (enabledFeatures.length > 0) { - return enabledFeatures.map((feature, index) => { - return `${t(`eligibility.accessibility.${feature}`)}${ - index < enabledFeatures.length - 1 ? ", " : "" - }` - }) + return ( + + ) } - return [] + return null } export const getUtilitiesIncluded = (listing: Listing) => { @@ -194,8 +204,11 @@ export const getFeatures = ( const enableAccessibilityFeatures = jurisdiction?.featureFlags?.some( (flag) => flag.name === "enableAccessibilityFeatures" && flag.active ) - if (!!accessibilityFeatures.length && enableAccessibilityFeatures) { - features.push({ heading: t("t.accessibility"), subheading: accessibilityFeatures }) + if (!!accessibilityFeatures && enableAccessibilityFeatures) { + features.push({ + heading: t("t.accessibility"), + content: accessibilityFeatures, + }) } if (listing.accessibility) { features.push({ heading: t("t.additionalAccessibility"), subheading: listing.accessibility }) diff --git a/sites/public/src/components/listing/listing_sections/Features.tsx b/sites/public/src/components/listing/listing_sections/Features.tsx index cdb5f4d18d..57014780be 100644 --- a/sites/public/src/components/listing/listing_sections/Features.tsx +++ b/sites/public/src/components/listing/listing_sections/Features.tsx @@ -8,7 +8,8 @@ type FeaturesProps = { children: React.ReactNode features: { heading: string - subheading: string + subheading?: string + content?: React.ReactNode }[] } @@ -22,13 +23,18 @@ export const Features = ({ children, features }: FeaturesProps) => {
{features.map((feature, index) => { return ( - + <> + +
{feature.content}
+ ) })} {children}