diff --git a/sanityv3/helpers/formatters.ts b/sanityv3/helpers/formatters.ts new file mode 100644 index 000000000..c783d7aa5 --- /dev/null +++ b/sanityv3/helpers/formatters.ts @@ -0,0 +1,3 @@ +export function capitalizeFirstLetter(string: string): string { + return string.charAt(0).toUpperCase() + string.slice(1) +} diff --git a/sanityv3/icons/customIcons.tsx b/sanityv3/icons/customIcons.tsx index 77a0712b6..861586e9b 100644 --- a/sanityv3/icons/customIcons.tsx +++ b/sanityv3/icons/customIcons.tsx @@ -88,6 +88,71 @@ export const LeftAlignedImage = (): JSX.Element => ( ) +export const ContentCenterImage = (): JSX.Element => ( + + + + +) +export const ContentLeftImage = (): JSX.Element => ( + + + + +) + +export const ContentRightImage = (): JSX.Element => ( + + + + +) + export const RightAlignedImage = (): JSX.Element => ( { return route(name, title) @@ -178,6 +180,8 @@ const RemainingSchemas = [ keyValue, card, cardsList, + backgroundOptions, + imageBackground, ] // Then we give our schema to the builder and provide the result to Sanity diff --git a/sanityv3/schemas/objects/background/backgroundOptions.tsx b/sanityv3/schemas/objects/background/backgroundOptions.tsx new file mode 100644 index 000000000..400b22d91 --- /dev/null +++ b/sanityv3/schemas/objects/background/backgroundOptions.tsx @@ -0,0 +1,36 @@ +import { defineType, defineField, Rule } from 'sanity' + +export default defineType({ + type: 'object', + name: 'backgroundOptions', + + fields: [ + defineField({ + type: 'array', + name: 'background', + description: 'Select what type of background you want to apply', + title: 'Background', + of: [ + { name: 'backgroundImage', type: 'imageBackground', title: 'Image' }, + { + title: 'Color', + description: 'Default is white.', + name: 'backgroundColor', + type: 'colorlist', + }, + ].filter((e) => e), + options: { sortable: false }, + validation: (Rule) => [ + Rule.custom((background, context) => { + return background?.length > 1 ? 'Only 1 background item' : true + }), + Rule.custom((background, context) => { + if (background?.[0]._type === 'backgroundImage') { + return background[0]?.image?.asset ? true : 'Image required' + } + return true + }), + ], + }), + ], +}) diff --git a/sanityv3/schemas/objects/background/imageBackground.tsx b/sanityv3/schemas/objects/background/imageBackground.tsx new file mode 100644 index 000000000..31f57cb23 --- /dev/null +++ b/sanityv3/schemas/objects/background/imageBackground.tsx @@ -0,0 +1,81 @@ +import { defineType, defineField, Image } from 'sanity' +import { RadioIconSelector } from '../../components' +import { ContentRightImage, ContentLeftImage, ContentCenterImage } from '../../../icons' +import { capitalizeFirstLetter } from '../../../helpers/formatters' + +export type ColorType = { + title: string + value: string +} + +const contentAlignmentOptions = [ + { value: 'left', icon: ContentLeftImage }, + { value: 'center', icon: ContentCenterImage }, + { value: 'right', icon: ContentRightImage }, +] + +export default defineType({ + name: 'imageBackground', + title: 'Image background', + type: 'object', + fields: [ + defineField({ + title: 'Image', + name: 'image', + type: 'image', + options: { + hotspot: true, + collapsed: false, + }, + }), + defineField({ + title: 'Apply scroll animation', + name: 'useAnimation', + type: 'boolean', + description: 'Animates content over the background image.', + }), + defineField({ + title: 'Apply light gradient', + name: 'useLight', + type: 'boolean', + description: 'Applies a white gradient over semi transparent background image.', + }), + defineField({ + name: 'contentAlignment', + title: 'Content Alignment', + description: 'Select the content alignment on larger screens.', + type: 'string', + initialValue: 'left', + components: { + input: function ({ onChange, value }: { onChange: any; value: string }) { + return ( + + ) + }, + }, + }), + ], + + preview: { + select: { + image: 'image', + useAnimation: 'useAnimation', + contentAlignment: 'contentAlignment', + }, + prepare({ image, useAnimation, contentAlignment }) { + return { + title: `Image background`, + subtitle: `${capitalizeFirstLetter(contentAlignment) + ' aligned '} ${ + useAnimation ? ' | Animated ' : '' + } content`, + media: image.asset, + } + }, + }, +}) diff --git a/sanityv3/schemas/objects/colorList.tsx b/sanityv3/schemas/objects/colorList.tsx index ba6b0c687..3481ef95a 100644 --- a/sanityv3/schemas/objects/colorList.tsx +++ b/sanityv3/schemas/objects/colorList.tsx @@ -34,4 +34,24 @@ export default defineType({ return }, }, + preview: { + select: { + value: 'value', + title: 'title', + }, + prepare({ value, title }: { value: string; title: string }) { + return { + title: `Color '${title}'`, + media: ( + + ), + } + }, + }, }) diff --git a/sanityv3/schemas/objects/textBlock.tsx b/sanityv3/schemas/objects/textBlock.tsx index 7b424c65c..b844c8367 100644 --- a/sanityv3/schemas/objects/textBlock.tsx +++ b/sanityv3/schemas/objects/textBlock.tsx @@ -59,6 +59,7 @@ export default { name: 'textBlock', title: 'Text block', type: 'object', + fieldsets: [ { title: 'Thumbnail Image', @@ -88,10 +89,6 @@ export default { collapsed: false, }, }, - { - name: 'design', - title: 'Design options', - }, { name: 'anchor', title: 'Additional anchor point reference (Deprecated)', @@ -205,11 +202,15 @@ export default { }, }, { - title: 'Background', - description: 'Pick a colour for the background. Default is white.', + name: 'designOptions', + type: 'backgroundOptions', + }, + { + title: 'Background (Deprecated)', + description: 'This field will be phased out over time. Please use Design options above. Default is white', name: 'background', + readOnly: true, type: 'colorlist', - fieldset: 'design', }, ].filter((e) => e), preview: { diff --git a/sanityv3/src/lib/structure/items/AssetLibrary.js b/sanityv3/src/lib/structure/items/AssetLibrary.js index 0ea71f2b3..c12041780 100644 --- a/sanityv3/src/lib/structure/items/AssetLibrary.js +++ b/sanityv3/src/lib/structure/items/AssetLibrary.js @@ -1,7 +1,5 @@ import { play_circle_outlined } from '@equinor/eds-icons' - import { EdsIcon, FileIcon, LibraryIcon, TagMoreIcon } from '../../../../icons' -import { Flags } from '../../datasetHelpers' import { AssetExtensionFilters } from './AssetExtensionFilters' import { AssetTagFilters } from './AssetTagFilters' import { UnusedAssetFilters } from './UnusedAssetFilters' diff --git a/web/components/src/Backgrounds/BackgroundContainer.test.tsx b/web/components/src/Backgrounds/BackgroundContainer.test.tsx index 6f12448d3..595350a16 100644 --- a/web/components/src/Backgrounds/BackgroundContainer.test.tsx +++ b/web/components/src/Backgrounds/BackgroundContainer.test.tsx @@ -10,27 +10,27 @@ describe(`The background container supports different colours from Sanity's colo expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-default)`) }) it('it can be white (default)', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-default)`) }) it('it can be Moss green ', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-moss-green)`) }) it('it can be light mint blue (default)', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-moss-green-light)`) }) it('it can be spruce wood (default)', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-spruce-wood)`) }) it('it can be mist blue (default)', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-mist-blue)`) }) it('it can be slate blue (default)', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-mid-blue)`) }) }) diff --git a/web/components/src/Backgrounds/BackgroundContainer.tsx b/web/components/src/Backgrounds/BackgroundContainer.tsx index d981a3a04..22149f05b 100644 --- a/web/components/src/Backgrounds/BackgroundContainer.tsx +++ b/web/components/src/Backgrounds/BackgroundContainer.tsx @@ -1,49 +1,71 @@ -import { forwardRef, HTMLAttributes, CSSProperties } from 'react' +import { forwardRef, HTMLAttributes } from 'react' import styled from 'styled-components' -import { getColorOnContainer, getContainerColor, isInvertedStyle } from '../../utils/backgroundColours' -import type { BackgroundColours } from '../../../types/types' import { normal, inverted } from '../../../styles/themes' +import type { BackgroundColours, BackgroundTypes, ImageBackground } from '../../../types/types' +import { ColouredContainer } from './ColouredContainer' +import { ImageBackgroundContainer } from './ImageBackgroundContainer' +import { ColorKeyTokens } from '../../../styles/colorKeyToUtilityMap' + +const StyledImageBackground = styled(ImageBackgroundContainer)<{ $isInverted: boolean }>` + ${({ $isInverted }) => ($isInverted ? inverted : normal)} +` export type BackgroundContainerProps = { - background?: BackgroundColours + background?: { + type?: BackgroundTypes + backgroundColor?: BackgroundColours + backgroundImage?: ImageBackground + backgroundUtility?: keyof ColorKeyTokens + dark?: boolean + } + /** Render fragment if true and background color + * is white and no id/anchor is set on it + * @default false + */ + renderFragmentWhenPossible?: boolean /** Extended tailwind styling */ twClassName?: string } & HTMLAttributes -type ColourContainerProps = { - isInverted: boolean -} & HTMLAttributes - -const ColourContainer = styled.div` - background-color: var(--background-color); - color: var(--color-on-background); - ${({ isInverted }) => (isInverted ? inverted : normal)} -` - export const BackgroundContainer = forwardRef(function BackgroundContainer( - { background = 'White', style, children, className, twClassName = '', ...rest }, + { background, style, children, className, twClassName = '', id, renderFragmentWhenPossible = false, ...rest }, ref, ) { - // @TODO: Find a better way with task #334 - const styleVariant = getContainerColor(background) - const textColor = getColorOnContainer(background) - const isInverted = isInvertedStyle(styleVariant) + const { backgroundImage, type, ...restBackground } = background || {} return ( - - {children} - + <> + {type === 'backgroundImage' && backgroundImage && ( + + {children} + + )} + {(type === 'backgroundColor' || !type) && ( + <> + {renderFragmentWhenPossible && + (restBackground?.backgroundColor === 'White' || restBackground?.backgroundUtility === 'white-100') && + !id ? ( + <>{children} + ) : ( + + {children} + + )} + + )} + ) }) diff --git a/web/components/src/Backgrounds/ColouredContainer.tsx b/web/components/src/Backgrounds/ColouredContainer.tsx new file mode 100644 index 000000000..cdb596b41 --- /dev/null +++ b/web/components/src/Backgrounds/ColouredContainer.tsx @@ -0,0 +1,60 @@ +import styled from 'styled-components' +import { normal, inverted } from '../../../styles/themes' +import { getContainerColor, isInvertedStyle } from '../../utils/backgroundColours' +import { forwardRef, HTMLAttributes, CSSProperties } from 'react' +import { BackgroundColours } from '../../../types/types' +import { ColorKeyTokens, colorKeyToUtilityMap } from '../../../styles/colorKeyToUtilityMap' +import { twMerge } from 'tailwind-merge' + +type ColouredContainerProps = { + backgroundColor?: BackgroundColours + backgroundUtility?: keyof ColorKeyTokens + dark?: boolean +} & HTMLAttributes + +type ColourContainerProps = { + $isInverted: boolean + $hasUtility: boolean +} & HTMLAttributes + +const ColourContainer = styled.div` + container: size; + color: var(--color-on-background); + ${({ $isInverted }) => ($isInverted ? inverted : normal)} + ${({ $hasUtility }) => ($hasUtility ? '' : 'background-color: var(--background-color);')} +` + +export const ColouredContainer = forwardRef(function BackgroundContainer( + { backgroundColor = 'White', backgroundUtility, dark, style, children, className, ...rest }, + ref, +) { + const styleVariant = getContainerColor(backgroundColor) + const isInverted = isInvertedStyle(styleVariant) + // After a while with TW, this isDark should be removed and only use dark from designOptions for dark + const isDark = + dark || backgroundColor === 'Mid Blue' || backgroundColor === 'Slate Blue' || backgroundColor === 'Slate Blue 95' + const textColor = isDark ? '--inverted-text' : '--default-text' + + return ( + + {children} + + ) +}) diff --git a/web/components/src/Backgrounds/ImageBackgroundContainer.tsx b/web/components/src/Backgrounds/ImageBackgroundContainer.tsx new file mode 100644 index 000000000..fb5944bce --- /dev/null +++ b/web/components/src/Backgrounds/ImageBackgroundContainer.tsx @@ -0,0 +1,106 @@ +import { forwardRef, HTMLAttributes, CSSProperties } from 'react' +import { useSanityLoader } from '../../../lib/hooks/useSanityLoader' +import { ImageBackground } from '../../../types/types' +import { twMerge } from 'tailwind-merge' +import { useMediaQuery } from '../../../lib/hooks/useMediaQuery' + +type ImageBackgroundContainerProps = ImageBackground & HTMLAttributes +const DEFAULT_MAX_WIDTH = 1920 + +export const ImageBackgroundContainer = forwardRef( + function ImageBackgroundContainer( + { image, useAnimation = false, useLight = false, contentAlignment = 'center', children, className }, + ref, + ) { + const props = useSanityLoader(image, DEFAULT_MAX_WIDTH, undefined) + const src = props?.src + const isMobile = useMediaQuery(`(max-width: 800px)`) + + const fadedFilter = ` + before:content-[''] + before:absolute + before:inset-0 + ${useLight ? `before:bg-white-100 before:opacity-[35%]` : `before:bg-black-100 before:opacity-[25%]`} + ` + + const backgroundClassNames = twMerge( + `[container:inline-size] + relative + ${useLight ? '' : 'dark'} + w-full + ${useAnimation && !isMobile ? `bg-fixed ${fadedFilter}` : 'bg-local'} + bg-center + bg-no-repeat + bg-cover + `, + className, + ) + + const animatedScrimGradient = useLight + ? `white-center-gradient ${ + contentAlignment !== 'center' + ? `${contentAlignment === 'right' ? 'xl:white-right-gradient' : 'xl:white-left-gradient'}` + : `` + }` + : `black-center-gradient ${ + contentAlignment !== 'center' + ? `${contentAlignment === 'right' ? 'xl:black-right-gradient' : 'xl:black-left-gradient'}` + : `` + }` + + return useAnimation && !isMobile ? ( +
+ {/** Scrim */} +
+ {children} +
+
+ ) : isMobile ? ( +
+
+ {children} +
+ ) : ( +
+ {/** Scrim */} +
+ {children} +
+
+ ) + }, +) diff --git a/web/components/src/Eyebrow/Eyebrow.tsx b/web/components/src/Eyebrow/Eyebrow.tsx index 7e3c47fd9..6d888d3c0 100644 --- a/web/components/src/Eyebrow/Eyebrow.tsx +++ b/web/components/src/Eyebrow/Eyebrow.tsx @@ -6,6 +6,7 @@ const StyledTypography = styled(Typography)` font-size: var(--typeScale-2); line-height: var(--lineHeight-3); color: var(--color-on-background); + text-align: inherit; ` export type TeaserEyebrowProps = HTMLAttributes diff --git a/web/components/utils/backgroundColours.tsx b/web/components/utils/backgroundColours.tsx index 49db4c67f..682dfe427 100644 --- a/web/components/utils/backgroundColours.tsx +++ b/web/components/utils/backgroundColours.tsx @@ -13,14 +13,34 @@ export type StyleVariants = | '--bg-mid-blue' | '--bg-slate-blue-95' +function isBackgroundColour(title: any): title is BackgroundColours { + return [ + 'White', + 'Moss Green', + 'Moss Green Light', + 'Spruce Wood', + 'Mist Blue', + 'Slate Blue', + 'Mid Green', + 'Mid Yellow', + 'Mid Blue', + 'Mid Orange', + 'Slate Blue 95', + ].includes(title) +} + function getContainerColor(backgroundTitle?: BackgroundColours) { let styleVariant: StyleVariants = '--bg-default' - if (backgroundTitle === 'Slate Blue') { - styleVariant = '--bg-mid-blue' - } else if (backgroundTitle === 'White') { - styleVariant = '--bg-default' - } else { - styleVariant = `--bg-${backgroundTitle?.replace(/\s/g, '-').toLowerCase()}` as StyleVariants + if (backgroundTitle && isBackgroundColour(backgroundTitle)) + if (backgroundTitle === 'Slate Blue') { + styleVariant = '--bg-mid-blue' + } else if (backgroundTitle === 'White') { + styleVariant = '--bg-default' + } else { + styleVariant = `--bg-${backgroundTitle?.replace(/\s/g, '-').toLowerCase()}` as StyleVariants + } + else { + console.log(backgroundTitle + ' is not the correct background color') } return styleVariant } diff --git a/web/core/Heading.tsx b/web/core/Heading.tsx new file mode 100644 index 000000000..d41c5ae7e --- /dev/null +++ b/web/core/Heading.tsx @@ -0,0 +1,33 @@ +import { forwardRef, HTMLAttributes } from 'react' +import { OverridableComponent } from '@equinor/eds-utils' +import { twMerge } from 'tailwind-merge' + +export type HeadingProps = { + size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' + level?: '1' | '2' | '3' | '4' | '5' | '6' +} & HTMLAttributes + +const variants = { + xs: 'text-xs leading-earthy font-normal', + sm: 'text-base leading-inherit font-normal', + md: 'text-md leading-inherit font-normal', + lg: 'text-lg leading-inherit font-normal', + xl: 'text-xl leading-inherit font-normal', + '2xl': 'text-2xl leading-cloudy font-normal', + '3xl': 'text-3xl leading-earthy font-normal', + '4xl': 'text-4xl leading-earthy font-normal', + '5xl': 'text-5xl leading-earthy font-normal', +} + +export const Heading: OverridableComponent = forwardRef(function Heading( + { size = 'xl', level = '2', className = '', as, children, ...rest }, + ref, +) { + const HeadingTag = as ?? (`h${level}` as React.ElementType) + + return ( + + {children} + + ) +}) diff --git a/web/core/Typography/variants.ts b/web/core/Typography/variants.ts index 70b7cb08c..67be72800 100644 --- a/web/core/Typography/variants.ts +++ b/web/core/Typography/variants.ts @@ -1,21 +1,21 @@ const variants = { heading: { - h1: 'text-3xl leading-earthy font-normal pb-8', - h2: 'text-2xl leading-cloudy font-normal pb-8', - h3: 'text-xl leading-inherit font-normal pb-8', - h4: 'text-lg leading-inherit font-normal pb-6', - h5: 'text-md leading-inherit font-normal pb-6', - h6: 'text-base leading-inherit font-normal pb-4', - h7: 'text-xs leading-earthy font-normal pb-4', - xs: 'text-xs leading-earthy font-normal', - sm: 'text-base leading-inherit font-normal', - md: 'text-md leading-inherit font-normal', - lg: 'text-lg leading-inherit font-normal', - xl: 'text-xl leading-inherit font-normal', - '2xl': 'text-2xl leading-cloudy font-normal', - '3xl': 'text-3xl leading-earthy font-normal', - '4xl': 'text-4xl leading-earthy font-normal', - '5xl': 'text-5xl leading-earthy font-normal', + h1: 'text-slate-80 dark:text-white-100 text-3xl leading-earthy font-normal pb-8', + h2: 'text-slate-80 dark:text-white-100 text-2xl leading-cloudy font-normal pb-8', + h3: 'text-slate-80 dark:text-white-100 text-xl leading-inherit font-normal pb-8', + h4: 'text-slate-80 dark:text-white-100 text-lg leading-inherit font-normal pb-6', + h5: 'text-slate-80 dark:text-white-100 text-md leading-inherit font-normal pb-6', + h6: 'text-slate-80 dark:text-white-100 text-base leading-inherit font-normal pb-4', + h7: 'text-slate-80 dark:text-white-100 text-xs leading-earthy font-normal pb-4', + xs: 'text-slate-80 dark:text-white-100 text-xs leading-earthy font-normal', + sm: 'text-slate-80 dark:text-white-100 text-base leading-inherit font-normal', + md: 'text-slate-80 dark:text-white-100 text-md leading-inherit font-normal', + lg: 'text-slate-80 dark:text-white-100 text-lg leading-inherit font-normal', + xl: 'text-slate-80 dark:text-white-100 text-xl leading-inherit font-normal', + '2xl': 'text-slate-80 dark:text-white-100 text-2xl leading-cloudy font-normal', + '3xl': 'text-slate-80 dark:text-white-100 text-3xl leading-earthy font-normal', + '4xl': 'text-slate-80 dark:text-white-100 text-4xl leading-earthy font-normal', + '5xl': 'text-slate-80 dark:text-white-100 text-5xl leading-earthy font-normal', }, paragraph: { ingress: '', diff --git a/web/lib/hooks/useSanityLoader.ts b/web/lib/hooks/useSanityLoader.ts index f754fa142..a21b3eca0 100644 --- a/web/lib/hooks/useSanityLoader.ts +++ b/web/lib/hooks/useSanityLoader.ts @@ -1,8 +1,13 @@ -import { useNextSanityImage } from 'next-sanity-image' +import { useNextSanityImage, UseNextSanityImageProps } from 'next-sanity-image' import type { ImageWithAlt } from 'types' import { sanityClientWithEquinorCDN } from '../../lib/sanity.server' +import { SanityImageObject } from '@sanity/image-url/lib/types/types' -export const useSanityLoader = (image: ImageWithAlt, maxWidth: number, aspectRatio: number | undefined) => +export const useSanityLoader = ( + image: ImageWithAlt | SanityImageObject, + maxWidth: number, + aspectRatio: number | undefined, +): UseNextSanityImageProps => useNextSanityImage(sanityClientWithEquinorCDN, image, { imageBuilder: (imageUrlBuilder, options) => { const { width: imageWidth, croppedImageDimensions: cropped } = options diff --git a/web/lib/hooks/useSharedTitleStyles.ts b/web/lib/hooks/useSharedTitleStyles.ts index e1b0da23a..91ec308ef 100644 --- a/web/lib/hooks/useSharedTitleStyles.ts +++ b/web/lib/hooks/useSharedTitleStyles.ts @@ -11,7 +11,9 @@ const BG_DEFAULT = 'White' function useSharedTitleStyles(heroType?: HeroTypes, nextContent?: ContentType): TitleStyles { const defaultValue: TitleStyles = { - background: BG_DEFAULT, + background: { + backgroundColor: BG_DEFAULT, + }, } if (heroType === HeroTypes.DEFAULT) { @@ -21,7 +23,9 @@ function useSharedTitleStyles(heroType?: HeroTypes, nextContent?: ContentType): switch (nextContent?.type) { case 'textBlock': return { - background: (nextContent as TextBlockData)?.designOptions?.background || BG_DEFAULT, + background: { + backgroundColor: (nextContent as TextBlockData)?.designOptions?.background?.backgroundColor || BG_DEFAULT, + }, } default: return defaultValue diff --git a/web/lib/queries/common/background.ts b/web/lib/queries/common/background.ts new file mode 100644 index 000000000..ebe70dd5f --- /dev/null +++ b/web/lib/queries/common/background.ts @@ -0,0 +1,10 @@ +const background = /* groq */ ` +"background": { + "type": coalesce(designOptions.background[0]._type, "backgroundColor"), + "backgroundColor": coalesce(designOptions.background[0].title, background.title, 'White'), + "backgroundUtility":coalesce(designOptions.background[0].key, background.key, ""), + "backgroundImage": coalesce(designOptions.background[0],""), + "dark": coalesce(designOptions.background[0].dark, background.dark, false), +} +` +export default background diff --git a/web/lib/queries/common/eventContentFields.ts b/web/lib/queries/common/eventContentFields.ts index 1a2d9aea2..779dab29d 100644 --- a/web/lib/queries/common/eventContentFields.ts +++ b/web/lib/queries/common/eventContentFields.ts @@ -2,6 +2,7 @@ import markDefs from './blockEditorMarks' import linkSelectorFields from './actions/linkSelectorFields' import downloadableFileFields from './actions/downloadableFileFields' import downloadableImageFields from './actions/downloadableImageFields' +import background from './background' export const eventContentFields = /* groq */ ` location, @@ -22,8 +23,8 @@ export const eventContentFields = /* groq */ ` "cookiePolicy": coalesce(cookiePolicy, 'none'), "designOptions": { "aspectRatio": coalesce(aspectRatio, '16:9'), - "background": coalesce(background.title, 'none'), height, + ${background} }, }, }, @@ -34,8 +35,8 @@ export const eventContentFields = /* groq */ ` "cookiePolicy": coalesce(cookiePolicy, 'none'), "designOptions": { "aspectRatio": coalesce(aspectRatio, '16:9'), - "background": coalesce(background.title, 'none'), height, + ${background} }, }, "promotedPeople": { diff --git a/web/lib/queries/common/imageCarouselFields.ts b/web/lib/queries/common/imageCarouselFields.ts index 86eb74d73..f3a077940 100644 --- a/web/lib/queries/common/imageCarouselFields.ts +++ b/web/lib/queries/common/imageCarouselFields.ts @@ -1,3 +1,5 @@ +import background from './background' + export const imageCarouselFields = /* groq */ ` "id": _key, "type": _type, @@ -8,6 +10,6 @@ export const imageCarouselFields = /* groq */ ` delay }, "designOptions": { - "background": coalesce(background.title, 'none'), + ${background} }, ` diff --git a/web/lib/queries/common/keyNumbersFields.ts b/web/lib/queries/common/keyNumbersFields.ts index c450a87a9..b984ebb3a 100644 --- a/web/lib/queries/common/keyNumbersFields.ts +++ b/web/lib/queries/common/keyNumbersFields.ts @@ -2,6 +2,7 @@ import downloadableFileFields from './actions/downloadableFileFields' import downloadableImageFields from './actions/downloadableImageFields' import linkSelectorFields from './actions/linkSelectorFields' import markDefs from './blockEditorMarks' +import background from './background' export const keyNumbersFields = /*groq*/ ` "type": _type, @@ -11,7 +12,7 @@ export const keyNumbersFields = /*groq*/ ` disclaimer[]{..., ${markDefs}}, useHorizontalScroll, "designOptions": { - "background": coalesce(background.title, 'White'), + ${background} }, "action": action[0]{ ${linkSelectorFields}, diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts index 084cd88a0..7868d220b 100644 --- a/web/lib/queries/common/pageContentFields.ts +++ b/web/lib/queries/common/pageContentFields.ts @@ -5,6 +5,7 @@ import { videoPlayerFields } from '../videoPlayerFields' import downloadableFileFields from './actions/downloadableFileFields' import downloadableImageFields from './actions/downloadableImageFields' import linkSelectorFields, { linkReferenceFields } from './actions/linkSelectorFields' +import background from './background' import markDefs from './blockEditorMarks' import { eventPromotionFields, futureEventsQuery, pastEventsQuery } from './eventPromotion' import { imageCarouselFields } from './imageCarouselFields' @@ -29,9 +30,7 @@ _type == "keyNumbers" =>{ text[]{..., ${markDefs}} ), "designOptions": { - "background": coalesce(background.title, 'White'), - "dark": coalesce(background.dark, false), - "utility": coalesce(background.key, ""), + ${background}, "imagePosition": coalesce(imagePosition, 'left'), imageSize, }, @@ -83,9 +82,7 @@ _type == "keyNumbers" =>{ overrideButtonStyle, anchor, "designOptions": { - "background": coalesce(background.title, 'White'), - "dark": coalesce(background.dark, false), - "utility": coalesce(background.key, ""), + ${background}, }, }, _type == "fullWidthImage"=>{ @@ -117,9 +114,7 @@ _type == "keyNumbers" =>{ caption }, "designOptions": { - "background": coalesce(background.title, 'White'), - "dark": coalesce(background.dark, false), - "utility": coalesce(background.key, ""), + ${background}, }, }, _type == "textWithIconArray"=>{ @@ -136,9 +131,7 @@ _type == "keyNumbers" =>{ }, "designOptions": { - "background": coalesce(background.title, 'none'), - "dark": coalesce(background.dark, false), - "utility": coalesce(background.key, ""), + ${background}, }, }, _type == "pullQuote" => { @@ -149,10 +142,8 @@ _type == "keyNumbers" =>{ image, quote, "designOptions": { - "background": coalesce(background.title, 'White'), + ${background}, "imagePosition": coalesce(imagePosition, 'right'), - "dark": coalesce(background.dark, false), - "utility": coalesce(background.key, ""), } }, _type == "accordion" => { @@ -175,9 +166,7 @@ _type == "keyNumbers" =>{ }, anchor, "designOptions": { - "background": coalesce(background.title, 'none'), - "dark": coalesce(background.dark, false), - "utility": coalesce(background.key, ""), + ${background}, } }, _type == "promoTileArray"=>{ @@ -212,9 +201,7 @@ _type == "keyNumbers" =>{ "extension": asset-> extension }, "designOptions": { - "background": coalesce(background.title, 'none'), - "utility": coalesce(background.key, ""), - "dark": coalesce(background.dark, false), + ${background}, }, }, }, @@ -238,9 +225,7 @@ _type == "keyNumbers" =>{ "cookiePolicy": coalesce(cookiePolicy, 'none'), "designOptions": { "aspectRatio": coalesce(aspectRatio, '16:9'), - "background": coalesce(background.title, 'none'), - "dark": coalesce(background.dark, false), - "utility": coalesce(background.key, ""), + ${background}, height, }, }, @@ -408,9 +393,7 @@ _type == "keyNumbers" =>{ } }, "designOptions": { - "background": coalesce(background.title, 'none'), - "dark": coalesce(background.dark, false), - "utility": coalesce(background.key, ""), + ${background}, }, }, _type == "cookieDeclaration" => { @@ -479,9 +462,7 @@ _type == "keyNumbers" =>{ "type": _type, "id": _key, "designOptions": { - "background": coalesce(background.title, 'White'), - "dark": coalesce(background.dark, false), - "utility": coalesce(background.key, ""), + ${background}, }, }, @@ -496,9 +477,7 @@ _type == "keyNumbers" =>{ ${markDefs}, }, "designOptions": { - "background": coalesce(background.title, 'White'), - "utility": coalesce(background.key, ""), - "dark": coalesce(background.dark, false), + ${background}, }, }, @@ -535,9 +514,7 @@ _type == "keyNumbers" =>{ ..., }, "designOptions": { - "background": coalesce(background.title, 'White'), - "utility": coalesce(background.key, ""), - "dark": coalesce(background.dark, false), + ${background}, }, }, ` diff --git a/web/lib/queries/iframeCarouselFields.ts b/web/lib/queries/iframeCarouselFields.ts index 7a55acf15..d60fe0144 100644 --- a/web/lib/queries/iframeCarouselFields.ts +++ b/web/lib/queries/iframeCarouselFields.ts @@ -1,4 +1,5 @@ import linkSelectorFields from './common/actions/linkSelectorFields' +import background from './common/background' export const iframeCarouselFields = /* groq */ ` "id": _key, @@ -8,6 +9,6 @@ export const iframeCarouselFields = /* groq */ ` ${linkSelectorFields}, },}, "designOptions": { - "background": coalesce(background.title, 'none'), + ${background} }, ` diff --git a/web/lib/queries/table.ts b/web/lib/queries/table.ts index 2e9bbee2a..e3137162c 100644 --- a/web/lib/queries/table.ts +++ b/web/lib/queries/table.ts @@ -1,6 +1,7 @@ import downloadableFileFields from './common/actions/downloadableFileFields' import downloadableImageFields from './common/actions/downloadableImageFields' import { linkReferenceFields } from './common/actions/linkSelectorFields' +import background from './common/background' import markDefs from './common/blockEditorMarks' export const tableFields = /* groq */ ` @@ -45,7 +46,7 @@ export const tableFields = /* groq */ ` "designOptions": { "theme": coalesce(lower(theme.title), 'grey'), "aspectRatio": coalesce(aspectRatio, '16:9'), - "background": coalesce(background.title, 'none'), height, + ${background} } ` diff --git a/web/lib/queries/videoPlayerCarouselFields.ts b/web/lib/queries/videoPlayerCarouselFields.ts index f7597de61..0f80386bc 100644 --- a/web/lib/queries/videoPlayerCarouselFields.ts +++ b/web/lib/queries/videoPlayerCarouselFields.ts @@ -1,3 +1,5 @@ +import background from './common/background' + export const videoPlayerCarouselFields = /* groq */ ` "id": _key, "type": _type, @@ -13,6 +15,6 @@ export const videoPlayerCarouselFields = /* groq */ ` }, "designOptions": { "aspectRatio": coalesce(aspectRatio, '16:9'), - "background": coalesce(background.title, 'none'), + ${background} }, ` diff --git a/web/lib/queries/videoPlayerFields.ts b/web/lib/queries/videoPlayerFields.ts index bd09c9a95..4d66cb1b9 100644 --- a/web/lib/queries/videoPlayerFields.ts +++ b/web/lib/queries/videoPlayerFields.ts @@ -1,4 +1,5 @@ import linkSelectorFields from './common/actions/linkSelectorFields' +import background from './common/background' import markDefs from './common/blockEditorMarks' export const videoPlayerFields = /* groq */ ` @@ -27,7 +28,7 @@ export const videoPlayerFields = /* groq */ ` }, "designOptions": { "aspectRatio": coalesce(aspectRatio, '16:9'), - "background": coalesce(background.title, 'none'), height, + ${background} }, ` diff --git a/web/pageComponents/pageTemplates/MagazineIndexPage.tsx b/web/pageComponents/pageTemplates/MagazineIndexPage.tsx index 4ac74784e..10d5e09f6 100644 --- a/web/pageComponents/pageTemplates/MagazineIndexPage.tsx +++ b/web/pageComponents/pageTemplates/MagazineIndexPage.tsx @@ -79,9 +79,9 @@ const MagazineIndexPage = ({ isServerRendered = false, locale, pageData, slug, u
{pageData?.hero.type !== HeroTypes.DEFAULT && title && ( - + )} - + {ingress && ( diff --git a/web/pageComponents/pageTemplates/News.tsx b/web/pageComponents/pageTemplates/News.tsx index 46cceeba5..cdae43671 100644 --- a/web/pageComponents/pageTemplates/News.tsx +++ b/web/pageComponents/pageTemplates/News.tsx @@ -181,7 +181,7 @@ const NewsPage = ({ data: news }: ArticleProps) => {
-
+
{title} diff --git a/web/pageComponents/pageTemplates/TopicPage.tsx b/web/pageComponents/pageTemplates/TopicPage.tsx index d0feff019..c7219c787 100644 --- a/web/pageComponents/pageTemplates/TopicPage.tsx +++ b/web/pageComponents/pageTemplates/TopicPage.tsx @@ -48,7 +48,7 @@ const TopicPage = ({ data }: TopicPageProps) => { pageTitle={data?.title} /> - + {breadcrumbs && breadcrumbs?.enableBreadcrumbs && ( { return ( <> - + {figure && ( {getHero()} {figure?.image?.asset && !hideImageCaption && ( - + )} ) diff --git a/web/pageComponents/shared/Teaser.tsx b/web/pageComponents/shared/Teaser.tsx index afb60d145..02014b39d 100644 --- a/web/pageComponents/shared/Teaser.tsx +++ b/web/pageComponents/shared/Teaser.tsx @@ -44,9 +44,7 @@ const TeaserImage = ({ image }: { image: ImageWithAlt }) => { const Teaser = ({ data, anchor }: TeaserProps) => { const { title, overline, text, image, action, designOptions, isBigText } = data - const { background, imageSize, imagePosition, dark } = designOptions - // After a while with TW, this isDark should be removed and only use dark from designOptions for dark - const isDark = dark || background === 'Mid Blue' || background === 'Slate Blue' + const { imageSize, imagePosition, ...restOptions } = designOptions if ([title, overline, text, image?.asset, action].every((i) => !i)) { return null @@ -54,7 +52,7 @@ const Teaser = ({ data, anchor }: TeaserProps) => { const isSvg = image?.extension === 'svg' return ( - + { > {image?.asset && } - + {isBigText ? ( text && ) : ( diff --git a/web/pageComponents/shared/VideoPlayer.tsx b/web/pageComponents/shared/VideoPlayer.tsx index ab50b2471..74063c42c 100644 --- a/web/pageComponents/shared/VideoPlayer.tsx +++ b/web/pageComponents/shared/VideoPlayer.tsx @@ -156,12 +156,9 @@ export const HLSVideoComponent = ({ video, videoControls, designOptions }: HLSVi const VideoPlayer = ({ anchor, data }: { data: VideoPlayerData; anchor?: string }) => { const { title, ingress, action, video, videoControls, designOptions } = data - const { background, dark } = designOptions - // After a while with TW, this isDark should be removed and only use dark from designOptions for dark - const isDark = dark || background === 'Mid Blue' || background === 'Slate Blue' return ( - + {title && } {ingress && ( diff --git a/web/pageComponents/shared/iframe/RequestConsentContainer.tsx b/web/pageComponents/shared/iframe/RequestConsentContainer.tsx index ec1aea333..d052c7c94 100644 --- a/web/pageComponents/shared/iframe/RequestConsentContainer.tsx +++ b/web/pageComponents/shared/iframe/RequestConsentContainer.tsx @@ -36,6 +36,7 @@ const StyledDiv = styled.section` ` const CookieHeader = styled(BackgroundContainer)` + border-radius: var(--border-radius); grid-area: heading; padding: var(--space-medium) var(--space-large); padding-left: var(--icon-column-width); @@ -96,7 +97,7 @@ const RequestConsentContainer = ({ hasSectionTitle = true, cookiePolicy }: Reque : intl.formatMessage({ id: 'cookie_type_marketing', defaultMessage: 'marketing' }) return ( - + @@ -143,7 +144,7 @@ const RequestConsentContainer = ({ hasSectionTitle = true, cookiePolicy }: Reque /> - + { {isOpen && ( - +