From a36ff116f2ed99871322061f572b2309186a9dee Mon Sep 17 00:00:00 2001 From: Joe Smallwood Date: Wed, 20 Sep 2023 18:14:50 +0300 Subject: [PATCH 1/4] Truncate long category names in category badges --- components/actions/CategoryTags.tsx | 1 + components/common/BadgeTooltip.tsx | 70 ++++++++++++++--------------- 2 files changed, 36 insertions(+), 35 deletions(-) diff --git a/components/actions/CategoryTags.tsx b/components/actions/CategoryTags.tsx index 960cc8d5..941666a8 100644 --- a/components/actions/CategoryTags.tsx +++ b/components/actions/CategoryTags.tsx @@ -109,6 +109,7 @@ export const CategoryContent = (props: CategoryContentProps) => { size="md" color="neutralLight" isLink={!noLink} + maxLines={2} /> diff --git a/components/common/BadgeTooltip.tsx b/components/common/BadgeTooltip.tsx index cca9fcd5..e9170f6c 100644 --- a/components/common/BadgeTooltip.tsx +++ b/components/common/BadgeTooltip.tsx @@ -42,6 +42,13 @@ const StyledBadge = styled(({ isLink, ...rest }) => )<{ } `; +const TruncatedContent = styled.span<{ $maxLines: number }>` + display: -webkit-box; + -webkit-line-clamp: ${({ $maxLines }) => $maxLines}; + -webkit-box-orient: vertical; + overflow: hidden; +`; + const IconBadge = styled.div<{ color: string; isLink: boolean }>` display: flex; align-items: center; @@ -89,28 +96,44 @@ const IconName = styled.div` font-weight: ${(props) => props.theme.fontWeightBold}; `; -type BadgeContentProps = { - content: string; +interface BadgeContentProps { + content: string | React.ReactNode; size?: 'lg' | 'md' | 'sm'; ariaLabel?: string; iconSvg?: string; iconImage?: string; color?: 'brandDark' | 'brandLight' | 'neutralDark' | 'neutralLight'; isLink: boolean; -}; + maxLines?: number; +} const BadgeContent = (props: BadgeContentProps) => { - const { content, size, iconSvg, iconImage, ariaLabel, color, isLink } = props; - const hasIcon = iconSvg == null && iconImage == null; + const { + content, + size = 'md', + iconSvg, + iconImage, + ariaLabel, + color = 'brandDark', + isLink = false, + maxLines, + } = props; + const hasNoIcon = iconSvg == null && iconImage == null; - return hasIcon ? ( + const renderContent = maxLines ? ( + {content} + ) : ( + content + ); + + return hasNoIcon ? ( - {content} + {renderContent} ) : ( @@ -121,35 +144,18 @@ const BadgeContent = (props: BadgeContentProps) => { ) : ( )} - {content} + {renderContent} ); }; -export type BadgeTooltipProps = { - content: string; +export interface BadgeTooltipProps extends BadgeContentProps { tooltip?: string; - size?: 'lg' | 'md' | 'sm'; id: string; - ariaLabel?: string; - iconSvg?: string; - iconImage?: string; - color?: 'brandDark' | 'brandLight' | 'neutralDark' | 'neutralLight'; - isLink: boolean; -}; +} const BadgeTooltip = (props: BadgeTooltipProps) => { - const { - content, - tooltip, - size = 'md', - id, - ariaLabel, - iconSvg = null, - iconImage = null, - color = 'brandDark', - isLink = false, - } = props; + const { tooltip, id, ...badgeContentProps } = props; const badgeId = `btt${id.replace(/[: ]/g, '_')}`; const [tooltipOpen, setTooltipOpen] = useState(false); const toggle = () => setTooltipOpen(!tooltipOpen); @@ -157,14 +163,8 @@ const BadgeTooltip = (props: BadgeTooltipProps) => { return ( {tooltip && ( Date: Wed, 20 Sep 2023 18:15:01 +0300 Subject: [PATCH 2/4] Show identifier in category badges --- components/actions/CategoryTags.tsx | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/components/actions/CategoryTags.tsx b/components/actions/CategoryTags.tsx index 941666a8..d99dfda8 100644 --- a/components/actions/CategoryTags.tsx +++ b/components/actions/CategoryTags.tsx @@ -86,6 +86,10 @@ type CategoryContentProps = { noLink?: boolean; }; +const Identifier = styled.span` + color: ${(props) => props.theme.graphColors.grey060}; +`; + export const CategoryContent = (props: CategoryContentProps) => { const { categories, categoryType, noLink = false } = props; return ( @@ -100,12 +104,20 @@ export const CategoryContent = (props: CategoryContentProps) => { + {item.identifier}. {item.name} + + ) : ( + item.name + ) + } iconImage={ - item.iconImage?.rendition.src || - item.parent?.iconImage?.rendition.src + item.iconImage?.rendition?.src || + item.parent?.iconImage?.rendition?.src } - iconSvg={item.iconSvgUrl || item.parent?.iconSvgUrl} + iconSvg={item.iconSvgUrl || item.parent?.iconSvgUrl || undefined} size="md" color="neutralLight" isLink={!noLink} From 82fea80f8167e963c9f1a6d39a89a15a7c568102 Mon Sep 17 00:00:00 2001 From: Joe Smallwood Date: Thu, 21 Sep 2023 16:51:11 +0300 Subject: [PATCH 3/4] Truncate long category names in breadcrumbs --- components/actions/ActionHero.tsx | 138 +++++++++++++++++++----------- 1 file changed, 86 insertions(+), 52 deletions(-) diff --git a/components/actions/ActionHero.tsx b/components/actions/ActionHero.tsx index ba64e568..621bb0cb 100644 --- a/components/actions/ActionHero.tsx +++ b/components/actions/ActionHero.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Container, Row, Col } from 'reactstrap'; +import { Container, Row, Col, UncontrolledTooltip } from 'reactstrap'; import styled from 'styled-components'; import { useTheme } from 'common/theme'; import { getActionTermContext, useTranslation } from 'common/i18n'; @@ -13,6 +13,7 @@ import { usePlan } from 'context/plan'; import Icon from 'components/common/Icon'; import { getCategoryString } from 'common/categories'; +import { Category } from 'common/__generated__/graphql'; const Hero = styled.header<{ bgColor: string }>` position: relative; @@ -151,65 +152,98 @@ const ActionNumber = styled.span` } `; -function ActionCategories(props) { - const { categories } = props; - const theme = useTheme(); +const MAX_CRUMB_LENGTH = 90; + +const isIdentifierVisible = (category: Category, showIdentifiers: boolean) => + category.categoryPage && category.identifier && showIdentifiers; + +const getCategoryName = (category: Category, showIdentifiers: boolean) => + isIdentifierVisible(category, showIdentifiers) + ? `${category.identifier}. ${category.name}` + : category.name; + +const getCategoryUrl = (category: Category, primaryCategory) => { + if (category.categoryPage) { + return category.categoryPage.urlPath; + } + + if (primaryCategory) { + return `/actions?cat-${primaryCategory.identifier}=${category.id}`; + } + + return undefined; +}; + +type PartialCategory = Pick & { + url?: string; + parent?: PartialCategory; +}; + +function Crumb({ category }: { category: PartialCategory }) { + const id = `crumb-${category.id}`; + const ariaId = `tt-content-${category.id}`; + const isTruncated = category.name.length > MAX_CRUMB_LENGTH; + const name = isTruncated + ? `${category.name.slice(0, MAX_CRUMB_LENGTH).trim()}...` + : category.name; + + return ( + <> + + {category.url ? ( + + {name} + + ) : ( + name + )} + {` / `} + + + {isTruncated && ( + + {category.name} + + )} + + ); +} + +function ActionCategories({ categories }: { categories: Category[] }) { const plan = usePlan(); const showIdentifiers = !plan.primaryActionClassification?.hideCategoryIdentifiers; - const displayCategories = []; const primaryCT = plan.primaryActionClassification; const primaryCatId = primaryCT?.id; - categories.forEach((cat, indx) => { - if (cat.type.id !== primaryCatId) return; - displayCategories[indx] = {}; - let categoryTitle = cat.name; - if (cat.categoryPage) { - displayCategories[indx].url = cat.categoryPage.urlPath; - if (cat.identifier && showIdentifiers) - categoryTitle = `${cat.identifier}. ${cat.name}`; - } else if (primaryCT) { - displayCategories[indx].url = `/actions?${getCategoryString( - primaryCT.identifier - )}=${cat.id}`; - } - displayCategories[indx].name = categoryTitle; - displayCategories[indx].id = cat.id; - if (cat.parent) { - displayCategories[indx].parent = {}; - let categoryParentTitle = cat.parent.name; - if (cat.parent.categoryPage) { - displayCategories[indx].parent.url = cat.parent.categoryPage.urlPath; - if (cat.parent.identifier && showIdentifiers) { - categoryParentTitle = `${cat.parent.identifier}. ${cat.parent.name}`; - } - } else { - displayCategories[indx].parent.url = `/actions?${getCategoryString( - primaryCT.identifier - )}=${cat.parent.id}`; - } - displayCategories[indx].parent.name = categoryParentTitle; - displayCategories[indx].parent.id = cat.parent.id; - } - return true; - }); + const displayCategories: PartialCategory[] = categories + .filter((cat) => cat.type.id === primaryCatId) + .map((cat) => ({ + id: cat.id, + name: getCategoryName(cat, showIdentifiers), + url: getCategoryUrl(cat, primaryCT), + parent: cat.parent + ? { + id: cat.parent.id, + name: getCategoryName(cat.parent, showIdentifiers), + url: getCategoryUrl(cat.parent, primaryCT), + } + : undefined, + })); + return ( - {displayCategories.map((item) => ( -
- {item.parent && ( - - - {item.parent.name} - {' '} - /{' '} - - )} - - {item.name} - {' '} - /{' '} + {displayCategories.map((category) => ( +
+ {category.parent && } + +
))} From beb0964a10fc85b19b33b39bd143ff7f50148e4f Mon Sep 17 00:00:00 2001 From: Joe Smallwood Date: Fri, 22 Sep 2023 11:25:20 +0300 Subject: [PATCH 4/4] Fix missing breadcrumb categories and remove duplicates --- common/__generated__/graphql.ts | 886 ++++++++++++++++++++++++---- components/actions/ActionHero.tsx | 58 +- components/actions/CategoryTags.tsx | 31 +- 3 files changed, 814 insertions(+), 161 deletions(-) diff --git a/common/__generated__/graphql.ts b/common/__generated__/graphql.ts index 33f4f355..18e6be65 100644 --- a/common/__generated__/graphql.ts +++ b/common/__generated__/graphql.ts @@ -442,6 +442,7 @@ export type ActionIndicator = { indicator: Indicator; }; +/** An enumeration. */ export enum ActionIndicatorEffectType { /** decreases */ Decreases = 'DECREASES', @@ -678,6 +679,7 @@ export type ActionResponsiblePartyReporteportValue = ReportValueInterface & { responsibleParty?: Maybe; }; +/** An enumeration. */ export enum ActionResponsiblePartyRole { /** Collaborator */ Collaborator = 'COLLABORATOR', @@ -759,6 +761,7 @@ export type ActionStatusSummary = { sentiment: Sentiment; }; +/** An enumeration. */ export enum ActionStatusSummaryIdentifier { Cancelled = 'CANCELLED', Completed = 'COMPLETED', @@ -827,6 +830,7 @@ export type ActionTask = { state: ActionTaskState; }; +/** An enumeration. */ export enum ActionTaskState { /** cancelled */ Cancelled = 'CANCELLED', @@ -857,6 +861,7 @@ export type ActionTimeliness = { sentiment: Sentiment; }; +/** An enumeration. */ export enum ActionTimelinessIdentifier { Acceptable = 'ACCEPTABLE', Late = 'LATE', @@ -1071,6 +1076,7 @@ export type AttributeTypeChoiceOption = { name: Scalars['String']; }; +/** An enumeration. */ export enum AttributeTypeFormat { /** Category */ CategoryChoice = 'CATEGORY_CHOICE', @@ -1140,6 +1146,7 @@ export type CartographyProviderCredentials = { publicAccessToken: Scalars['String']; }; +/** An enumeration. */ export enum CartographyProviderCredentialsProvider { /** MapBox */ Mapbox = 'MAPBOX' @@ -1484,6 +1491,7 @@ export type CategoryTypePageSiblingsArgs = { searchQuery?: InputMaybe; }; +/** An enumeration. */ export enum CategoryTypeSelectWidget { /** Multiple */ Multiple = 'MULTIPLE', @@ -1587,6 +1595,7 @@ export type CommonIndicatorNormalization = { unit?: Maybe; }; +/** An enumeration. */ export enum Comparison { Gt = 'GT', Lte = 'LTE' @@ -2138,6 +2147,7 @@ export type IndicatorLevel = { plan: Plan; }; +/** An enumeration. */ export enum IndicatorLevelLevel { /** operational */ Operational = 'OPERATIONAL', @@ -2258,6 +2268,7 @@ export type IndicatorShowcaseBlock = StreamFieldInterface & { title?: Maybe; }; +/** An enumeration. */ export enum IndicatorTimeResolution { /** day */ Day = 'DAY', @@ -2941,6 +2952,7 @@ export type PlanFeatures = { showAdminLink: Scalars['Boolean']; }; +/** An enumeration. */ export enum PlanFeaturesContactPersonsPublicData { /** Show all information */ All = 'ALL', @@ -3184,6 +3196,7 @@ export type PrivacyPolicyPageSiblingsArgs = { searchQuery?: InputMaybe; }; +/** An enumeration. */ export enum PublicationStatus { Published = 'PUBLISHED', Scheduled = 'SCHEDULED', @@ -3363,6 +3376,7 @@ export type RelatedCommonIndicator = { id: Scalars['ID']; }; +/** An enumeration. */ export enum RelatedCommonIndicatorEffectType { /** decreases */ Decreases = 'DECREASES', @@ -3384,6 +3398,7 @@ export type RelatedIndicator = { id: Scalars['ID']; }; +/** An enumeration. */ export enum RelatedIndicatorConfidenceLevel { /** high */ High = 'HIGH', @@ -3393,6 +3408,7 @@ export enum RelatedIndicatorConfidenceLevel { Medium = 'MEDIUM' } +/** An enumeration. */ export enum RelatedIndicatorEffectType { /** decreases */ Decreases = 'DECREASES', @@ -3541,6 +3557,7 @@ export type SearchResults = { hits?: Maybe>>; }; +/** An enumeration. */ export enum Sentiment { Negative = 'NEGATIVE', Neutral = 'NEUTRAL', @@ -3564,6 +3581,7 @@ export type SiteGeneralContent = { siteTitle: Scalars['String']; }; +/** An enumeration. */ export enum SiteGeneralContentActionTerm { /** Action */ Action = 'ACTION', @@ -3904,6 +3922,7 @@ export type UserFeedbackNode = { url: Scalars['String']; }; +/** An enumeration. */ export enum UserFeedbackType { /** Accessibility */ Accessibility = 'ACCESSIBILITY', @@ -4042,7 +4061,52 @@ export type GetActionDetailsQuery = ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } ) | null, parent?: ( - { id: string, identifier: string, name: string, color?: string | null, iconSvgUrl?: string | null, image?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, parent?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } + ) | null } + & { __typename?: 'Category' } + ) | null, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( { id: string, width: number, height: number, src: string } & { __typename?: 'ImageRendition' } @@ -4057,12 +4121,6 @@ export type GetActionDetailsQuery = ( & { __typename?: 'ImageRendition' } ) | null } & { __typename?: 'Image' } - ) | null, iconImage?: ( - { rendition?: ( - { src: string } - & { __typename?: 'ImageRendition' } - ) | null } - & { __typename?: 'Image' } ) | null, categoryPage?: ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } @@ -4301,7 +4359,52 @@ export type GetActionDetailsQuery = ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } ) | null, parent?: ( - { id: string, identifier: string, name: string, color?: string | null, iconSvgUrl?: string | null, image?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, parent?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } + ) | null } + & { __typename?: 'Category' } + ) | null, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( { id: string, width: number, height: number, src: string } & { __typename?: 'ImageRendition' } @@ -4316,12 +4419,6 @@ export type GetActionDetailsQuery = ( & { __typename?: 'ImageRendition' } ) | null } & { __typename?: 'Image' } - ) | null, iconImage?: ( - { rendition?: ( - { src: string } - & { __typename?: 'ImageRendition' } - ) | null } - & { __typename?: 'Image' } ) | null, categoryPage?: ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } @@ -4480,7 +4577,52 @@ export type GetActionDetailsQuery = ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } ) | null, parent?: ( - { id: string, identifier: string, name: string, color?: string | null, iconSvgUrl?: string | null, image?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, parent?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } + ) | null } + & { __typename?: 'Category' } + ) | null, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( { id: string, width: number, height: number, src: string } & { __typename?: 'ImageRendition' } @@ -4495,12 +4637,6 @@ export type GetActionDetailsQuery = ( & { __typename?: 'ImageRendition' } ) | null } & { __typename?: 'Image' } - ) | null, iconImage?: ( - { rendition?: ( - { src: string } - & { __typename?: 'ImageRendition' } - ) | null } - & { __typename?: 'Image' } ) | null, categoryPage?: ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } @@ -4605,7 +4741,52 @@ export type GetActionDetailsQuery = ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } ) | null, parent?: ( - { id: string, identifier: string, name: string, color?: string | null, iconSvgUrl?: string | null, image?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, parent?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } + ) | null } + & { __typename?: 'Category' } + ) | null, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( { id: string, width: number, height: number, src: string } & { __typename?: 'ImageRendition' } @@ -4620,12 +4801,6 @@ export type GetActionDetailsQuery = ( & { __typename?: 'ImageRendition' } ) | null } & { __typename?: 'Image' } - ) | null, iconImage?: ( - { rendition?: ( - { src: string } - & { __typename?: 'ImageRendition' } - ) | null } - & { __typename?: 'Image' } ) | null, categoryPage?: ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } @@ -4786,7 +4961,52 @@ export type GetActionDetailsQuery = ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } ) | null, parent?: ( - { id: string, identifier: string, name: string, color?: string | null, iconSvgUrl?: string | null, image?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, parent?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } + ) | null } + & { __typename?: 'Category' } + ) | null, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( { id: string, width: number, height: number, src: string } & { __typename?: 'ImageRendition' } @@ -4801,12 +5021,6 @@ export type GetActionDetailsQuery = ( & { __typename?: 'ImageRendition' } ) | null } & { __typename?: 'Image' } - ) | null, iconImage?: ( - { rendition?: ( - { src: string } - & { __typename?: 'ImageRendition' } - ) | null } - & { __typename?: 'Image' } ) | null, categoryPage?: ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } @@ -4911,7 +5125,52 @@ export type GetActionDetailsQuery = ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } ) | null, parent?: ( - { id: string, identifier: string, name: string, color?: string | null, iconSvgUrl?: string | null, image?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, parent?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } + ) | null } + & { __typename?: 'Category' } + ) | null, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( { id: string, width: number, height: number, src: string } & { __typename?: 'ImageRendition' } @@ -4926,12 +5185,6 @@ export type GetActionDetailsQuery = ( & { __typename?: 'ImageRendition' } ) | null } & { __typename?: 'Image' } - ) | null, iconImage?: ( - { rendition?: ( - { src: string } - & { __typename?: 'ImageRendition' } - ) | null } - & { __typename?: 'Image' } ) | null, categoryPage?: ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } @@ -5179,7 +5432,52 @@ type ActionMainContentBlocksFragment_ActionContentSectionBlock_Fragment = ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } ) | null, parent?: ( - { id: string, identifier: string, name: string, color?: string | null, iconSvgUrl?: string | null, image?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, parent?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } + ) | null } + & { __typename?: 'Category' } + ) | null, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( { id: string, width: number, height: number, src: string } & { __typename?: 'ImageRendition' } @@ -5194,12 +5492,6 @@ type ActionMainContentBlocksFragment_ActionContentSectionBlock_Fragment = ( & { __typename?: 'ImageRendition' } ) | null } & { __typename?: 'Image' } - ) | null, iconImage?: ( - { rendition?: ( - { src: string } - & { __typename?: 'ImageRendition' } - ) | null } - & { __typename?: 'Image' } ) | null, categoryPage?: ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } @@ -5308,7 +5600,52 @@ type ActionMainContentBlocksFragment_ReportComparisonBlock_Fragment = ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } ) | null, parent?: ( - { id: string, identifier: string, name: string, color?: string | null, iconSvgUrl?: string | null, image?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, parent?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } + ) | null } + & { __typename?: 'Category' } + ) | null, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( { id: string, width: number, height: number, src: string } & { __typename?: 'ImageRendition' } @@ -5323,12 +5660,6 @@ type ActionMainContentBlocksFragment_ReportComparisonBlock_Fragment = ( & { __typename?: 'ImageRendition' } ) | null } & { __typename?: 'Image' } - ) | null, iconImage?: ( - { rendition?: ( - { src: string } - & { __typename?: 'ImageRendition' } - ) | null } - & { __typename?: 'Image' } ) | null, categoryPage?: ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } @@ -5432,7 +5763,52 @@ export type ReportComparisonBlockActionContentFragment = ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } ) | null, parent?: ( - { id: string, identifier: string, name: string, color?: string | null, iconSvgUrl?: string | null, image?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, parent?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } + ) | null } + & { __typename?: 'Category' } + ) | null, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( { id: string, width: number, height: number, src: string } & { __typename?: 'ImageRendition' } @@ -5447,12 +5823,6 @@ export type ReportComparisonBlockActionContentFragment = ( & { __typename?: 'ImageRendition' } ) | null } & { __typename?: 'Image' } - ) | null, iconImage?: ( - { rendition?: ( - { src: string } - & { __typename?: 'ImageRendition' } - ) | null } - & { __typename?: 'Image' } ) | null, categoryPage?: ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } @@ -5709,43 +6079,149 @@ export type GetActionListQuery = ( ) | null } & { __typename?: 'Image' } ) | null } - & { __typename?: 'Plan' } - ) } - & { __typename?: 'Action' } - )> | null } - & { __typename?: 'Query' } -); - -export type GetActionStatusesQueryVariables = Exact<{ - plan: Scalars['ID']; - actionCategory?: InputMaybe; -}>; - - -export type GetActionStatusesQuery = ( - { planActions?: Array<( - { id: string, identifier: string, color?: string | null, plan: ( - { id: string } - & { __typename?: 'Plan' } - ), status?: ( - { id: string, identifier: string, name: string } - & { __typename?: 'ActionStatus' } - ) | null, statusSummary: ( - { identifier: ActionStatusSummaryIdentifier } - & { __typename?: 'ActionStatusSummary' } - ), implementationPhase?: ( - { id: string, identifier: string, name: string } - & { __typename?: 'ActionImplementationPhase' } - ) | null, mergedWith?: ( - { id: string, identifier: string, plan: ( - { id: string, shortName?: string | null, viewUrl?: string | null } - & { __typename?: 'Plan' } - ) } - & { __typename?: 'Action' } + & { __typename?: 'Plan' } + ) } + & { __typename?: 'Action' } + )> | null } + & { __typename?: 'Query' } +); + +export type GetActionStatusesQueryVariables = Exact<{ + plan: Scalars['ID']; + actionCategory?: InputMaybe; +}>; + + +export type GetActionStatusesQuery = ( + { planActions?: Array<( + { id: string, identifier: string, color?: string | null, plan: ( + { id: string } + & { __typename?: 'Plan' } + ), status?: ( + { id: string, identifier: string, name: string } + & { __typename?: 'ActionStatus' } + ) | null, statusSummary: ( + { identifier: ActionStatusSummaryIdentifier } + & { __typename?: 'ActionStatusSummary' } + ), implementationPhase?: ( + { id: string, identifier: string, name: string } + & { __typename?: 'ActionImplementationPhase' } + ) | null, mergedWith?: ( + { id: string, identifier: string, plan: ( + { id: string, shortName?: string | null, viewUrl?: string | null } + & { __typename?: 'Plan' } + ) } + & { __typename?: 'Action' } + ) | null } + & { __typename?: 'Action' } + )> | null } + & { __typename?: 'Query' } +); + +export type CategoryFieldsFragmentFragment = ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } + ) | null } + & { __typename?: 'Category' } +); + +export type CategoriesRecursiveFragmentFragment = ( + { parent?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, parent?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } + ) | null } + & { __typename?: 'Category' } + ) | null, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } ) | null } - & { __typename?: 'Action' } - )> | null } - & { __typename?: 'Query' } + & { __typename?: 'Category' } + ) | null } + & { __typename?: 'Category' } ); export type CategoryTagsCategoryFragment = ( @@ -5780,7 +6256,52 @@ export type CategoryTagsCategoryFragment = ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } ) | null, parent?: ( - { id: string, identifier: string, name: string, color?: string | null, iconSvgUrl?: string | null, image?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, parent?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } + ) | null } + & { __typename?: 'Category' } + ) | null, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( { id: string, width: number, height: number, src: string } & { __typename?: 'ImageRendition' } @@ -5795,12 +6316,6 @@ export type CategoryTagsCategoryFragment = ( & { __typename?: 'ImageRendition' } ) | null } & { __typename?: 'Image' } - ) | null, iconImage?: ( - { rendition?: ( - { src: string } - & { __typename?: 'ImageRendition' } - ) | null } - & { __typename?: 'Image' } ) | null, categoryPage?: ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } @@ -5873,7 +6388,52 @@ type AttributesBlockAttribute_AttributeCategoryChoice_Fragment = ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } ) | null, parent?: ( - { id: string, identifier: string, name: string, color?: string | null, iconSvgUrl?: string | null, image?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, parent?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } + ) | null } + & { __typename?: 'Category' } + ) | null, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( { id: string, width: number, height: number, src: string } & { __typename?: 'ImageRendition' } @@ -5888,12 +6448,6 @@ type AttributesBlockAttribute_AttributeCategoryChoice_Fragment = ( & { __typename?: 'ImageRendition' } ) | null } & { __typename?: 'Image' } - ) | null, iconImage?: ( - { rendition?: ( - { src: string } - & { __typename?: 'ImageRendition' } - ) | null } - & { __typename?: 'Image' } ) | null, categoryPage?: ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } @@ -6002,7 +6556,52 @@ type AttributesBlockAttributeWithNestedType_AttributeCategoryChoice_Fragment = ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } ) | null, parent?: ( - { id: string, identifier: string, name: string, color?: string | null, iconSvgUrl?: string | null, image?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, parent?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } + ) | null } + & { __typename?: 'Category' } + ) | null, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( { id: string, width: number, height: number, src: string } & { __typename?: 'ImageRendition' } @@ -6017,12 +6616,6 @@ type AttributesBlockAttributeWithNestedType_AttributeCategoryChoice_Fragment = ( & { __typename?: 'ImageRendition' } ) | null } & { __typename?: 'Image' } - ) | null, iconImage?: ( - { rendition?: ( - { src: string } - & { __typename?: 'ImageRendition' } - ) | null } - & { __typename?: 'Image' } ) | null, categoryPage?: ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } @@ -8771,7 +9364,52 @@ export type GetPlanPageGeneralQuery = ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } ) | null, parent?: ( - { id: string, identifier: string, name: string, color?: string | null, iconSvgUrl?: string | null, image?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, parent?: ( + { id: string, identifier: string, name: string, leadParagraph: string, color?: string | null, iconSvgUrl?: string | null, helpText: string, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( + { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, small?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, social?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null, rendition?: ( + { id: string, width: number, height: number, src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, categoryPage?: ( + { title: string, urlPath: string } + & { __typename?: 'CategoryPage' } + ) | null } + & { __typename?: 'Category' } + ) | null, iconImage?: ( + { rendition?: ( + { src: string } + & { __typename?: 'ImageRendition' } + ) | null } + & { __typename?: 'Image' } + ) | null, type: ( + { id: string, identifier: string, hideCategoryIdentifiers: boolean } + & { __typename?: 'CategoryType' } + ), level?: ( + { id: string, name: string, namePlural?: string | null } + & { __typename?: 'CategoryLevel' } + ) | null, image?: ( { title: string, altText: string, imageCredit: string, width: number, height: number, focalPointX?: number | null, focalPointY?: number | null, large?: ( { id: string, width: number, height: number, src: string } & { __typename?: 'ImageRendition' } @@ -8786,12 +9424,6 @@ export type GetPlanPageGeneralQuery = ( & { __typename?: 'ImageRendition' } ) | null } & { __typename?: 'Image' } - ) | null, iconImage?: ( - { rendition?: ( - { src: string } - & { __typename?: 'ImageRendition' } - ) | null } - & { __typename?: 'Image' } ) | null, categoryPage?: ( { title: string, urlPath: string } & { __typename?: 'CategoryPage' } diff --git a/components/actions/ActionHero.tsx b/components/actions/ActionHero.tsx index 621bb0cb..4cfe0c7d 100644 --- a/components/actions/ActionHero.tsx +++ b/components/actions/ActionHero.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Container, Row, Col, UncontrolledTooltip } from 'reactstrap'; +import flatMapDeep from 'lodash/flatMapDeep'; import styled from 'styled-components'; import { useTheme } from 'common/theme'; import { getActionTermContext, useTranslation } from 'common/i18n'; @@ -174,9 +175,26 @@ const getCategoryUrl = (category: Category, primaryCategory) => { return undefined; }; +/** + * Check whether multiple categories at different levels of a single category type hierarchy + * have been added to an action. Required to filter duplicate categories from the breadcrumb. + */ +const isCategoryInSiblingsParentTree = ( + category: Category, + siblingParentCategory: Category +) => + category.id === siblingParentCategory.id || + (siblingParentCategory.parent && + isCategoryInSiblingsParentTree(category, siblingParentCategory.parent)); + +// Convert a category parent hierarchy to a flat array +const getDeepParents = (category: Category): Category[] => + !category.parent + ? [category] + : [...getDeepParents(category.parent), category]; + type PartialCategory = Pick & { url?: string; - parent?: PartialCategory; }; function Crumb({ category }: { category: PartialCategory }) { @@ -223,28 +241,32 @@ function ActionCategories({ categories }: { categories: Category[] }) { const primaryCatId = primaryCT?.id; const displayCategories: PartialCategory[] = categories - .filter((cat) => cat.type.id === primaryCatId) - .map((cat) => ({ - id: cat.id, - name: getCategoryName(cat, showIdentifiers), - url: getCategoryUrl(cat, primaryCT), - parent: cat.parent - ? { - id: cat.parent.id, - name: getCategoryName(cat.parent, showIdentifiers), - url: getCategoryUrl(cat.parent, primaryCT), - } - : undefined, + .filter( + (category) => + category.type.id === primaryCatId && + // Check whether this category is included in a sibling's parent + !categories.some( + (otherCategory) => + otherCategory.id !== category.id && + otherCategory.parent && + isCategoryInSiblingsParentTree(category, otherCategory.parent) + ) + ) + .reduce( + // Convert categories to a flat array representing the hierarchy + (categories, category) => [...getDeepParents(category), ...categories], + [] + ) + .map((category) => ({ + id: category.id, + name: getCategoryName(category, showIdentifiers), + url: getCategoryUrl(category, primaryCT), })); return ( {displayCategories.map((category) => ( -
- {category.parent && } - - -
+ ))} ); diff --git a/components/actions/CategoryTags.tsx b/components/actions/CategoryTags.tsx index d99dfda8..f6ca4d0e 100644 --- a/components/actions/CategoryTags.tsx +++ b/components/actions/CategoryTags.tsx @@ -164,7 +164,7 @@ function CategoryTags(props: CategoryTagsProps) { } export const categoryFragment = gql` - fragment CategoryTagsCategory on Category { + fragment CategoryFieldsFragment on Category { id identifier name @@ -194,26 +194,25 @@ export const categoryFragment = gql` title urlPath } + } + + # Support parent categories up to two levels deep + fragment CategoriesRecursiveFragment on Category { parent { - id - identifier - name - image { - ...MultiUseImageFragment - } - color - iconSvgUrl - iconImage { - rendition(size: "400x400", crop: false) { - src + ...CategoryFieldsFragment + parent { + ...CategoryFieldsFragment + parent { + ...CategoryFieldsFragment } } - categoryPage { - title - urlPath - } } } + + fragment CategoryTagsCategory on Category { + ...CategoryFieldsFragment + ...CategoriesRecursiveFragment + } `; export const categoryTypeFragment = gql`