From d0235076944d4a87e3cd0d173f4589e56e8a3e8c Mon Sep 17 00:00:00 2001 From: Blake Mason Date: Tue, 21 Nov 2023 14:22:43 -0800 Subject: [PATCH] [F] Callouts use new DAM plugin Includes: - Main Callout Image - TwoTone Callout Background Image - Glossary Term Image - Investigation Hero Images --- .../Tile/patterns/InvestigationTile/index.js | 8 ++-- .../content-blocks/Callout/CalloutMain.js | 9 ++-- .../content-blocks/Callout/CalloutTwoTone.js | 8 ++-- components/layout/InvestigationHero/index.js | 7 +-- components/templates/GlossaryPage/index.js | 8 ++-- lib/api/fragments/content-blocks.js | 38 +++------------- lib/api/fragments/glossary-term.js | 10 +---- lib/api/fragments/image.js | 21 +++++++++ lib/api/fragments/investigation.js | 12 ++---- lib/api/investigation.js | 10 +---- lib/utils.js | 43 +++++++++++-------- 11 files changed, 78 insertions(+), 96 deletions(-) diff --git a/components/atomic/Tile/patterns/InvestigationTile/index.js b/components/atomic/Tile/patterns/InvestigationTile/index.js index 8a9be253..2195fc78 100644 --- a/components/atomic/Tile/patterns/InvestigationTile/index.js +++ b/components/atomic/Tile/patterns/InvestigationTile/index.js @@ -3,15 +3,15 @@ import { useUID } from "react-uid"; import { Image } from "@rubin-epo/epo-react-lib"; import * as Styled from "./styles"; import { useTranslation } from "react-i18next"; -import { useDamAssetAsImage } from "@/lib/utils"; +import { imageShaper } from "@/lib/utils"; const InvestigationTile = ({ investigation, useExternalLink }) => { const uid = useUID(); const { t } = useTranslation(); - const { damAsset, status, title, externalUrl, landingPage } = + const { cantoAssetSingle, status, title, externalUrl, landingPage } = investigation || {}; - const image = useDamAssetAsImage(damAsset?.[0]); + const image = imageShaper("EN", cantoAssetSingle?.[0]); const url = useExternalLink ? externalUrl : landingPage?.[0]?.uri; const isInactive = status === "inactive"; @@ -43,7 +43,7 @@ InvestigationTile.propTypes = { investigation: PropTypes.shape({ uri: PropTypes.string, title: PropTypes.string, - damAsset: PropTypes.array, + cantoAssetSingle: PropTypes.array, externalUrl: PropTypes.string, status: PropTypes.string, landingPage: PropTypes.arrayOf( diff --git a/components/content-blocks/Callout/CalloutMain.js b/components/content-blocks/Callout/CalloutMain.js index dab55d96..2c395d24 100644 --- a/components/content-blocks/Callout/CalloutMain.js +++ b/components/content-blocks/Callout/CalloutMain.js @@ -2,25 +2,24 @@ import PropTypes from "prop-types"; import classNames from "classnames"; -import imageShape from "@/shapes/image"; import { linksShape } from "@/shapes/link"; import Wrapper from "./Wrapper"; import { Header, Text, StyledMixedLink, StyledImage } from "./styles"; import TempList from "@/components/dynamic/TempList"; -import { useDamAssetAsImage } from "@/lib/utils"; +import { imageShaper } from "@/lib/utils"; export default function CalloutMain({ callout }) { const { dynamicComponent, header, - damAsset, + cantoAssetSingle, links, padImage, text, ...wrapperProps } = callout; - const calloutImage = useDamAssetAsImage(damAsset[0]); + const calloutImage = imageShaper("EN", cantoAssetSingle[0]); return ( @@ -73,10 +73,10 @@ export default function CalloutTwoTone({ callout }) { CalloutTwoTone.propTypes = { callout: PropTypes.shape({ backgroundColor: PropTypes.string, - backgroundImage: PropTypes.arrayOf(imageShape).isRequired, + backgroundImage: PropTypes.array, captionRichText: PropTypes.node, header: PropTypes.string, - image: PropTypes.arrayOf(imageShape).isRequired, + image: PropTypes.arrayOf(imageShape), links: linksShape, text: PropTypes.node, }).isRequired, diff --git a/components/layout/InvestigationHero/index.js b/components/layout/InvestigationHero/index.js index a656de27..2457abee 100644 --- a/components/layout/InvestigationHero/index.js +++ b/components/layout/InvestigationHero/index.js @@ -2,12 +2,12 @@ import PropTypes from "prop-types"; import * as Styled from "./styles"; import { Button, Image, IconComposer } from "@rubin-epo/epo-react-lib"; import T from "@/page/Translate"; -import { useDamAssetAsImage } from "@/lib/utils"; +import { imageShaper } from "@/lib/utils"; export default function InvestigationHero({ investigation }) { - const { damAsset, title, externalUrl, duration, status } = + const { cantoAssetSingle, title, externalUrl, duration, status } = investigation || {}; - const image = useDamAssetAsImage(damAsset?.[0]); + const image = imageShaper("EN", cantoAssetSingle?.[0]); if (!investigation) return null; @@ -52,5 +52,6 @@ InvestigationHero.propTypes = { title: PropTypes.string, }) ), + cantoAssetSingle: PropTypes.array, }), }; diff --git a/components/templates/GlossaryPage/index.js b/components/templates/GlossaryPage/index.js index a46d3503..10bf1def 100644 --- a/components/templates/GlossaryPage/index.js +++ b/components/templates/GlossaryPage/index.js @@ -1,7 +1,7 @@ import PropTypes from "prop-types"; import Body from "@/global/Body"; import Breadcrumbs from "@/page/Breadcrumbs"; -import { useCustomBreadcrumbs, useDamAssetAsImage } from "@/lib/utils"; +import { useCustomBreadcrumbs, imageShaper } from "@/lib/utils"; import { Container, ResponsiveImage, @@ -13,7 +13,7 @@ import { useTranslation } from "react-i18next"; export default function GlossaryPage({ data }) { const { t } = useTranslation(); - const { id, title, description, uri, text, damAsset, caption } = data; + const { id, title, description, uri, text, cantoAssetSingle, caption } = data; const customBreadcrumbs = useCustomBreadcrumbs("Glossary"); @@ -21,7 +21,7 @@ export default function GlossaryPage({ data }) { b.uri.includes("glossary") ); - const image = useDamAssetAsImage(damAsset); + const image = imageShaper("EN", cantoAssetSingle[0]); const bodyProps = { description, @@ -68,7 +68,7 @@ GlossaryPage.propTypes = { description: PropTypes.string, uri: PropTypes.string, text: PropTypes.node, - damAsset: PropTypes.array, + cantoAssetSingle: PropTypes.array, caption: PropTypes.string, }), }; diff --git a/lib/api/fragments/content-blocks.js b/lib/api/fragments/content-blocks.js index 74e89465..d3fa7216 100644 --- a/lib/api/fragments/content-blocks.js +++ b/lib/api/fragments/content-blocks.js @@ -1,4 +1,4 @@ -import { getImageFields } from "@/api/fragments/image"; +import { getImageFields, cantoSingleAsset } from "@/api/fragments/image"; import { getLinkFields } from "@/api/fragments/link"; /// /////////////////////////////////////////// @@ -31,14 +31,7 @@ export const calloutBlockFragment = ` backgroundColor dynamicComponent header - damAsset { - height - width - damMetadata { - metadataKey - metadataValue - } - } + ${cantoSingleAsset} links { ...links } @@ -51,14 +44,7 @@ export const calloutBlockFragment = ` } ...on callouts_calloutTwoTone_Entry { backgroundColor - backgroundImage: damAsset { - height - width - damMetadata { - metadataKey - metadataValue - } - } + backgroundImage: ${cantoSingleAsset} captionRichText header image: contentImage { @@ -277,14 +263,7 @@ export const investigationGridBlockFragment = ` title externalUrl: externalUrlTranslatable status: investigationStatus - damAsset { - height - width - damMetadata { - metadataKey - metadataValue - } - } + ${cantoSingleAsset} landingPage { uri title @@ -381,14 +360,7 @@ export const relatedContentFragment = ` uri status: investigationStatus description: investigationDescription - damAsset { - height - width - damMetadata { - metadataKey - metadataValue - } - } + ${cantoSingleAsset} landingPage { uri } diff --git a/lib/api/fragments/glossary-term.js b/lib/api/fragments/glossary-term.js index a40aaf6d..0018ac33 100644 --- a/lib/api/fragments/glossary-term.js +++ b/lib/api/fragments/glossary-term.js @@ -1,4 +1,5 @@ import { fullBaseFields } from "@/lib/api/fragments/shared"; +import { cantoSingleAsset } from "@/api/fragments/image"; export const glossaryTermFragment = ` fragment glossaryTermFragment on glossaryTerms_glossaryTerm_Entry { @@ -10,14 +11,7 @@ export const glossaryTermFragmentFull = ` fragment glossaryTermFragmentFull on glossaryTerms_glossaryTerm_Entry { ...on glossaryTerms_glossaryTerm_Entry { text - damAsset { - height - width - damMetadata { - metadataKey - metadataValue - } - } + ${cantoSingleAsset} caption } ancestors { diff --git a/lib/api/fragments/image.js b/lib/api/fragments/image.js index 56cafed4..0ae71545 100644 --- a/lib/api/fragments/image.js +++ b/lib/api/fragments/image.js @@ -18,3 +18,24 @@ export function getImageFields(mode = "fit", width = 900, height) { url ${transform(mode, width, height)} `; } + +export const cantoSingleAsset = gql` +cantoAssetSingle { + url { + directUrlPreview + directUrlOriginal + PNG + HighJPG + LowJPG + preview + } + width + height + metadata: additional { + AltTextEN + AltTextES + CaptionEN + CaptionES + Credit + } +}`; diff --git a/lib/api/fragments/investigation.js b/lib/api/fragments/investigation.js index cb335811..461d3f72 100644 --- a/lib/api/fragments/investigation.js +++ b/lib/api/fragments/investigation.js @@ -1,3 +1,5 @@ +import { cantoSingleAsset } from "@/api/fragments/image"; + export const investigationFragment = ` fragment investigationFragment on investigations_investigation_Entry { id @@ -5,15 +7,7 @@ export const investigationFragment = ` uri ...on investigations_investigation_Entry { date: dateUpdated - # description - damAsset { - height - width - damMetadata { - metadataKey - metadataValue - } - } + ${cantoSingleAsset} } } `; diff --git a/lib/api/investigation.js b/lib/api/investigation.js index b40b4651..e563f3b2 100644 --- a/lib/api/investigation.js +++ b/lib/api/investigation.js @@ -1,5 +1,6 @@ import { gql } from "graphql-request"; import { queryAPI } from "@/lib/fetch"; +import { cantoSingleAsset } from "@/api/fragments/image"; export async function addRelatedInvestigation(entryData, site) { if (!entryData || !entryData.id) return null; @@ -36,14 +37,7 @@ export async function getRelatedInvestigation(entryData, site = "default") { title } } - damAsset { - height - width - damMetadata { - metadataKey - metadataValue - } - } + ${cantoSingleAsset} } } } diff --git a/lib/utils.js b/lib/utils.js index 452e87af..f19f8bd1 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -408,29 +408,36 @@ export function getLocaleString(siteString) { } // DAM METADATA -export const useDamAssetAsImage = (damAsset) => { - if (!damAsset || damAsset.length === 0) { - return null; - } +export const imageShaper = (site, data, className) => { + if (!data) return undefined; + + const localeKeys = { + default: "EN", + es: "ES", + }; - const { height, width, damMetadata: rawMetadata } = damAsset; + const key = localeKeys[site]; - const damMetadata = rawMetadata.reduce((previous, current) => { - const { metadataKey, metadataValue } = current; - previous[metadataKey] = metadataValue; + const { metadata, url, width, height } = data; + const { directUrlPreview = "", directUrlOriginal = "", preview = "" } = url; - return previous; - }, {}); + const urlWithoutConstraint = directUrlPreview.slice(0, -3); + const constraint = Math.max(width, height); - const { directImageUrl: url, altText, thumbnailUrl: thumb } = damMetadata; + const altText = metadata[`AltText${key}`]; + const caption = metadata[`Caption${key}`]; + const credit = metadata.Credit; return { - url, - url2x: url, - url3x: url, - height, - width, - altText, - thumb, + url: `${urlWithoutConstraint}${Math.floor(constraint / 3)}`, + url2x: `${urlWithoutConstraint}${Math.floor(constraint / 2)}`, + url3x: directUrlOriginal, + thumb: preview, + width: Number(width), + height: Number(height), + className, + altText: altText === null ? undefined : altText, + caption: caption === null ? undefined : caption, + credit: credit === null ? undefined : credit, }; };