diff --git a/common/__generated__/graphql.ts b/common/__generated__/graphql.ts index 554453c9..2c8efb4e 100644 --- a/common/__generated__/graphql.ts +++ b/common/__generated__/graphql.ts @@ -2143,13 +2143,14 @@ export type EmptyPageSiblingsArgs = { searchQuery?: InputMaybe; }; -export type EndDateColumnBlock = DashboardColumnInterface & StreamFieldInterface & { +export type EndDateColumnBlock = DashboardColumnInterface & FieldBlockMetaInterface & StreamFieldInterface & { __typename?: 'EndDateColumnBlock'; blockType: Scalars['String']; blocks: Array; columnLabel?: Maybe; field: Scalars['String']; id?: Maybe; + meta?: Maybe; rawValue: Scalars['String']; }; @@ -2242,13 +2243,14 @@ export type FrontPageHeroBlock = StreamFieldInterface & { rawValue: Scalars['String']; }; -export type IdentifierColumnBlock = DashboardColumnInterface & StreamFieldInterface & { +export type IdentifierColumnBlock = DashboardColumnInterface & FieldBlockMetaInterface & StreamFieldInterface & { __typename?: 'IdentifierColumnBlock'; blockType: Scalars['String']; blocks: Array; columnLabel?: Maybe; field: Scalars['String']; id?: Maybe; + meta?: Maybe; rawValue: Scalars['String']; }; @@ -2291,13 +2293,14 @@ export type ImageRendition = { width: Scalars['Int']; }; -export type ImpactColumnBlock = DashboardColumnInterface & StreamFieldInterface & { +export type ImpactColumnBlock = DashboardColumnInterface & FieldBlockMetaInterface & StreamFieldInterface & { __typename?: 'ImpactColumnBlock'; blockType: Scalars['String']; blocks: Array; columnLabel?: Maybe; field: Scalars['String']; id?: Maybe; + meta?: Maybe; rawValue: Scalars['String']; }; @@ -2421,13 +2424,14 @@ export type ImpactGroupPageSiblingsArgs = { searchQuery?: InputMaybe; }; -export type ImplementationPhaseColumnBlock = DashboardColumnInterface & StreamFieldInterface & { +export type ImplementationPhaseColumnBlock = DashboardColumnInterface & FieldBlockMetaInterface & StreamFieldInterface & { __typename?: 'ImplementationPhaseColumnBlock'; blockType: Scalars['String']; blocks: Array; columnLabel?: Maybe; field: Scalars['String']; id?: Maybe; + meta?: Maybe; rawValue: Scalars['String']; }; @@ -2735,13 +2739,14 @@ export type IndicatorValue = { value: Scalars['Float']; }; -export type IndicatorsColumnBlock = DashboardColumnInterface & StreamFieldInterface & { +export type IndicatorsColumnBlock = DashboardColumnInterface & FieldBlockMetaInterface & StreamFieldInterface & { __typename?: 'IndicatorsColumnBlock'; blockType: Scalars['String']; blocks: Array; columnLabel?: Maybe; field: Scalars['String']; id?: Maybe; + meta?: Maybe; rawValue: Scalars['String']; }; @@ -2844,13 +2849,14 @@ export type MutationUpdatePlanArgs = { input: UpdatePlanMutationInput; }; -export type NameColumnBlock = DashboardColumnInterface & StreamFieldInterface & { +export type NameColumnBlock = DashboardColumnInterface & FieldBlockMetaInterface & StreamFieldInterface & { __typename?: 'NameColumnBlock'; blockType: Scalars['String']; blocks: Array; columnLabel?: Maybe; field: Scalars['String']; id?: Maybe; + meta?: Maybe; rawValue: Scalars['String']; }; @@ -2908,13 +2914,14 @@ export type OrganizationClass = { name: Scalars['String']; }; -export type OrganizationColumnBlock = DashboardColumnInterface & StreamFieldInterface & { +export type OrganizationColumnBlock = DashboardColumnInterface & FieldBlockMetaInterface & StreamFieldInterface & { __typename?: 'OrganizationColumnBlock'; blockType: Scalars['String']; blocks: Array; columnLabel?: Maybe; field: Scalars['String']; id?: Maybe; + meta?: Maybe; rawValue: Scalars['String']; }; @@ -3996,13 +4003,14 @@ export type ReportValueInterface = { field: ReportFieldBlock; }; -export type ResponsiblePartiesColumnBlock = DashboardColumnInterface & StreamFieldInterface & { +export type ResponsiblePartiesColumnBlock = DashboardColumnInterface & FieldBlockMetaInterface & StreamFieldInterface & { __typename?: 'ResponsiblePartiesColumnBlock'; blockType: Scalars['String']; blocks: Array; columnLabel?: Maybe; field: Scalars['String']; id?: Maybe; + meta?: Maybe; rawValue: Scalars['String']; }; @@ -4169,13 +4177,14 @@ export type SiteObjectTypePagesArgs = { searchQuery?: InputMaybe; }; -export type StartDateColumnBlock = DashboardColumnInterface & StreamFieldInterface & { +export type StartDateColumnBlock = DashboardColumnInterface & FieldBlockMetaInterface & StreamFieldInterface & { __typename?: 'StartDateColumnBlock'; blockType: Scalars['String']; blocks: Array; columnLabel?: Maybe; field: Scalars['String']; id?: Maybe; + meta?: Maybe; rawValue: Scalars['String']; }; @@ -4290,13 +4299,14 @@ export type StaticPageSiblingsArgs = { searchQuery?: InputMaybe; }; -export type StatusColumnBlock = DashboardColumnInterface & StreamFieldInterface & { +export type StatusColumnBlock = DashboardColumnInterface & FieldBlockMetaInterface & StreamFieldInterface & { __typename?: 'StatusColumnBlock'; blockType: Scalars['String']; blocks: Array; columnLabel?: Maybe; field: Scalars['String']; id?: Maybe; + meta?: Maybe; rawValue: Scalars['String']; }; @@ -4340,13 +4350,14 @@ export type TagObjectType = { name: Scalars['String']; }; -export type TasksColumnBlock = DashboardColumnInterface & StreamFieldInterface & { +export type TasksColumnBlock = DashboardColumnInterface & FieldBlockMetaInterface & StreamFieldInterface & { __typename?: 'TasksColumnBlock'; blockType: Scalars['String']; blocks: Array; columnLabel?: Maybe; field: Scalars['String']; id?: Maybe; + meta?: Maybe; rawValue: Scalars['String']; }; @@ -4465,13 +4476,14 @@ export type UpdatePlanMutationPayload = { plan?: Maybe; }; -export type UpdatedAtColumnBlock = DashboardColumnInterface & StreamFieldInterface & { +export type UpdatedAtColumnBlock = DashboardColumnInterface & FieldBlockMetaInterface & StreamFieldInterface & { __typename?: 'UpdatedAtColumnBlock'; blockType: Scalars['String']; blocks: Array; columnLabel?: Maybe; field: Scalars['String']; id?: Maybe; + meta?: Maybe; rawValue: Scalars['String']; }; @@ -7296,7 +7308,7 @@ type StreamFieldFragment_IndicatorShowcaseBlock_Fragment = ( type StreamFieldFragment_LargeImageBlock_Fragment = ( { width?: string | null, id?: string | null, blockType: string, field: string, image?: ( - { title: string, altText: string, width: number, height: number, renditionUncropped?: ( + { title: string, altText: string, width: number, height: number, imageCredit: string, renditionUncropped?: ( { src: string } & { __typename?: 'ImageRendition' } ) | null } @@ -10637,7 +10649,7 @@ export type GetContentPageQuery = ( & { __typename?: 'IndicatorShowcaseBlock' } ) | ( { width?: string | null, id?: string | null, blockType: string, field: string, image?: ( - { title: string, altText: string, width: number, height: number, renditionUncropped?: ( + { title: string, altText: string, width: number, height: number, imageCredit: string, renditionUncropped?: ( { src: string } & { __typename?: 'ImageRendition' } ) | null } @@ -11348,7 +11360,7 @@ export type GetContentPageQuery = ( & { __typename?: 'IndicatorShowcaseBlock' } ) | ( { width?: string | null, id?: string | null, blockType: string, field: string, image?: ( - { title: string, altText: string, width: number, height: number, renditionUncropped?: ( + { title: string, altText: string, width: number, height: number, imageCredit: string, renditionUncropped?: ( { src: string } & { __typename?: 'ImageRendition' } ) | null } @@ -11753,7 +11765,7 @@ export type GetContentPageQuery = ( & { __typename?: 'IndicatorShowcaseBlock' } ) | ( { width?: string | null, id?: string | null, blockType: string, field: string, image?: ( - { title: string, altText: string, width: number, height: number, renditionUncropped?: ( + { title: string, altText: string, width: number, height: number, imageCredit: string, renditionUncropped?: ( { src: string } & { __typename?: 'ImageRendition' } ) | null } @@ -12173,7 +12185,7 @@ export type GetHomePageQuery = ( & { __typename?: 'IndicatorShowcaseBlock' } ) | ( { id?: string | null, width?: string | null, blockType: string, field: string, image?: ( - { title: string, altText: string, width: number, height: number, renditionUncropped?: ( + { title: string, altText: string, width: number, height: number, imageCredit: string, renditionUncropped?: ( { src: string } & { __typename?: 'ImageRendition' } ) | null } diff --git a/common/__generated__/possible_types.json b/common/__generated__/possible_types.json index 2269cbbf..012c9f6a 100644 --- a/common/__generated__/possible_types.json +++ b/common/__generated__/possible_types.json @@ -120,7 +120,19 @@ "ActionResponsiblePartiesBlock", "ActionScheduleBlock", "ActionTasksBlock", - "IndicatorCausalChainBlock" + "EndDateColumnBlock", + "IdentifierColumnBlock", + "ImpactColumnBlock", + "ImplementationPhaseColumnBlock", + "IndicatorCausalChainBlock", + "IndicatorsColumnBlock", + "NameColumnBlock", + "OrganizationColumnBlock", + "ResponsiblePartiesColumnBlock", + "StartDateColumnBlock", + "StatusColumnBlock", + "TasksColumnBlock", + "UpdatedAtColumnBlock" ], "MenuItem": [ "ExternalLinkMenuItem", diff --git a/components/common/StreamField.tsx b/components/common/StreamField.tsx index a4021a8a..8d1b4941 100644 --- a/components/common/StreamField.tsx +++ b/components/common/StreamField.tsx @@ -22,6 +22,8 @@ import IndicatorShowcaseBlock from 'components/contentblocks/IndicatorShowcaseBl import QuestionAnswerBlock from 'components/contentblocks/QuestionAnswerBlock'; import RelatedIndicatorsBlock from 'components/contentblocks/RelatedIndicatorsBlock'; import RelatedPlanListBlock from 'components/contentblocks/RelatedPlanListBlock'; +import { ImageCredit } from 'components/contentblocks/ContentPageHeaderBlock'; +import { useTranslations } from 'next-intl'; import { usePlan } from 'context/plan'; import { Col, ColProps, Container, Row } from 'reactstrap'; import { ColumnProps } from 'reactstrap/types/lib/Col'; @@ -123,6 +125,7 @@ function StreamFieldBlock(props: StreamFieldBlockProps) { const { __typename } = block; const plan = usePlan(); const theme = useTheme(); + const t = useTranslations(); switch (__typename) { case 'RichTextBlock': { @@ -254,6 +257,7 @@ function StreamFieldBlock(props: StreamFieldBlockProps) { * fit_to_column: image is limited to text block width * Image keeps it original ratio and doesn't crop */ + const getColSize = (breakpoint) => { if (block.width === 'maximum') return {}; switch (breakpoint) { @@ -274,16 +278,31 @@ function StreamFieldBlock(props: StreamFieldBlockProps) { xl={getColSize('xl')} lg={getColSize('lg')} md={getColSize('md')} + style={{ + position: 'relative', + }} > - {block.image?.altText} + > + {block.image?.altText} + {block.image?.imageCredit && ( + + {`${t('image-credit')}: ${block.image.imageCredit}`} + + )} + diff --git a/components/contentblocks/ContentPageHeaderBlock.js b/components/contentblocks/ContentPageHeaderBlock.js index 2cf3894f..af7168a2 100644 --- a/components/contentblocks/ContentPageHeaderBlock.js +++ b/components/contentblocks/ContentPageHeaderBlock.js @@ -47,7 +47,7 @@ const ContentHeader = styled.header` } `; -const ImageCredit = styled.span` +export const ImageCredit = styled.span` position: absolute; top: 0; right: 0; diff --git a/fragments/stream-field.fragment.ts b/fragments/stream-field.fragment.ts index a4ce01ac..2b85829f 100644 --- a/fragments/stream-field.fragment.ts +++ b/fragments/stream-field.fragment.ts @@ -129,6 +129,7 @@ export const STREAM_FIELD_FRAGMENT = gql` renditionUncropped: rendition(size: "1320x1320", crop: false) { src } + imageCredit } width }