From 5e18a7ecdb268a2aefe62a7b152fc32fdb6e6081 Mon Sep 17 00:00:00 2001 From: Fernando Lucchesi Date: Thu, 5 Oct 2023 12:14:42 -0300 Subject: [PATCH 01/10] =?UTF-8?q?=F0=9F=90=9B=20Fix=20issues=20with=20prom?= =?UTF-8?q?o=20tiles=20links=20#1919?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/pageComponents/shared/ButtonLink.tsx | 24 ++++------- .../topicPages/PromoTileButton.tsx | 40 ++++++++++--------- 2 files changed, 29 insertions(+), 35 deletions(-) diff --git a/web/pageComponents/shared/ButtonLink.tsx b/web/pageComponents/shared/ButtonLink.tsx index d714ae51b..1d8273f0a 100644 --- a/web/pageComponents/shared/ButtonLink.tsx +++ b/web/pageComponents/shared/ButtonLink.tsx @@ -1,16 +1,14 @@ import { ButtonLink as Link, ButtonLinkProps } from '@components' -import NextLink, { LinkProps } from 'next/link' +import { LinkProps } from 'next/link' import { getUrlFromAction } from '../../common/helpers/getUrlFromAction' import { getLocaleFromName } from '../../lib/localization' import type { LinkData } from '../../types/types' -import { cloneElement } from 'react' type Props = { action: LinkData - children?: React.ReactElement } & (ButtonLinkProps | LinkProps) -export const ButtonLink = ({ action, children, ...rest }: Props) => { +export const ButtonLink = ({ action, ...rest }: Props) => { const { label, ariaLabel, extension, type } = action const url = getUrlFromAction(action) @@ -22,23 +20,15 @@ export const ButtonLink = ({ action, children, ...rest }: Props) => { // If the URL is a static AEM page it should behave as an internal link in the web if (type === 'internalUrl') { const locale = getLocaleFromName(action.link?.lang) - const child = children ? cloneElement(children, { href: url, locale: locale, ariaLabel: ariaLabel }) : undefined + return ( - <> - {child || ( - - {label} - - )} - + + {label} + ) } - return children ? ( - )}> - {children} - - ) : ( + return ( {label} {extension && `(${extension.toUpperCase()})`} diff --git a/web/pageComponents/topicPages/PromoTileButton.tsx b/web/pageComponents/topicPages/PromoTileButton.tsx index 2563f30f2..999401385 100644 --- a/web/pageComponents/topicPages/PromoTileButton.tsx +++ b/web/pageComponents/topicPages/PromoTileButton.tsx @@ -1,6 +1,8 @@ import { LinkData } from '../../types/types' import { ButtonLink } from '../shared/ButtonLink' import { Card, Link } from '@components' +import { getUrlFromAction } from '../../common/helpers' +import { getLocaleFromName } from '../../lib/localization' import { CSSProperties } from 'react' import styled from 'styled-components' @@ -12,33 +14,35 @@ type Props = { const StyledLink = styled(Link)` gap: var(--space-medium); - border-bottom: none; + border-bottom: none !important; ` -const StyledButtonLink = styled(ButtonLink)` - text-decoration: none; -` const Wrapper = styled.div` padding: 0 var(--space-medium); ` const IconButtonLink = ({ action, hasImage }: { action: LinkData; hasImage: boolean }) => { + const url = getUrlFromAction(action) + if (!url) { + console.warn(`Missing URL on 'IconButtonLink' link with type: '${action.type}' and label: '${action.label}'`) + return null + } + const locale = getLocaleFromName(action.link?.lang) + return ( - - - - {action.label} - - - + + + {action.label} + + ) } From 2f3adb09da81eeff8ca649488cde535c8bae121f Mon Sep 17 00:00:00 2001 From: Fernando Lucchesi Date: Mon, 2 Oct 2023 13:29:36 -0300 Subject: [PATCH 02/10] =?UTF-8?q?=E2=9C=A8=20Add=20big=20text=20teaser=20c?= =?UTF-8?q?omponent=20#1890?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sanityv3/schemas/editors/blockContentType.tsx | 8 +- sanityv3/schemas/objects/teaser.tsx | 80 +++++++++++++++++-- web/components/src/Text/Text.tsx | 5 +- web/lib/queries/common/pageContentFields.ts | 14 ++-- web/pageComponents/shared/Teaser.tsx | 28 +++++-- .../shared/portableText/IngressText.tsx | 21 +++-- web/styles/settings.ts | 1 + web/types/types.ts | 1 + 8 files changed, 125 insertions(+), 33 deletions(-) diff --git a/sanityv3/schemas/editors/blockContentType.tsx b/sanityv3/schemas/editors/blockContentType.tsx index fc433614a..377a7e20a 100644 --- a/sanityv3/schemas/editors/blockContentType.tsx +++ b/sanityv3/schemas/editors/blockContentType.tsx @@ -17,6 +17,11 @@ export type BlockContentProps = { attachment?: boolean lists?: boolean smallText?: boolean + normalTextOverride?: { + title: string + value: 'normal' + component?: ({ children }: { children: React.ReactNode }) => JSX.Element + } } const SmallTextRender = (props: any) => { const { children } = props @@ -34,11 +39,12 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockFie attachment = false, lists = true, smallText = true, + normalTextOverride = { title: 'Normal', value: 'normal' }, } = options const config: BlockFieldType = { type: 'block', - styles: [{ title: 'Normal', value: 'normal' }], + styles: [normalTextOverride], lists: lists ? [ { title: 'Numbered', value: 'number' }, diff --git a/sanityv3/schemas/objects/teaser.tsx b/sanityv3/schemas/objects/teaser.tsx index fbf94ff99..c9688902f 100644 --- a/sanityv3/schemas/objects/teaser.tsx +++ b/sanityv3/schemas/objects/teaser.tsx @@ -6,7 +6,7 @@ import CompactBlockEditor from '../components/CompactBlockEditor' import { configureBlockContent, configureTitleBlockContent } from '../editors' import { validateCharCounterEditor } from '../validations/validateCharCounterEditor' -import type { PortableTextBlock, Reference, Rule } from 'sanity' +import type { PortableTextBlock, Reference, Rule, ValidationContext } from 'sanity' import type { DownloadableImage } from './downloadableImage' import type { DownloadableFile } from './files' import type { ImageWithAlt } from './imageWithAlt' @@ -25,7 +25,7 @@ const imageAlignmentOptions = [ { value: 'right', icon: RightAlignedImage }, ] -const blockContentType = configureBlockContent({ +const blockConfig = { h1: false, h2: false, h3: false, @@ -34,6 +34,18 @@ const blockContentType = configureBlockContent({ externalLink: false, attachment: false, lists: false, +} + +const blockContentType = configureBlockContent({ ...blockConfig }) + +const blockContentTypeForBigText = configureBlockContent({ + ...blockConfig, + smallText: false, + normalTextOverride: { + title: 'Normal', + value: 'normal', + component: ({ children }: { children: React.ReactNode }) => {children}, + }, }) export type Teaser = { @@ -41,6 +53,8 @@ export type Teaser = { overline?: string title?: PortableTextBlock[] text?: PortableTextBlock[] + bigTextTeaser?: boolean + bigText?: PortableTextBlock[] action?: (LinkSelector | DownloadableFile | DownloadableImage)[] image: ImageWithAlt imagePosition?: string @@ -48,6 +62,10 @@ export type Teaser = { background?: ColorSelectorValue } +type TeaserDocument = { + parent: Teaser +} + export default { name: 'teaser', title: 'Teaser', @@ -62,6 +80,7 @@ export default { collapsible: true, collapsed: true, }, + hidden: ({ parent }: TeaserDocument) => parent.bigTextTeaser, }, { name: 'link', @@ -74,6 +93,11 @@ export default { }, ], fields: [ + { + title: 'Big text teaser', + name: 'bigTextTeaser', + type: 'boolean', + }, { name: 'overline', title: 'Eyebrow', @@ -87,6 +111,7 @@ export default { input: CompactBlockEditor, }, of: [titleContentType], + hidden: ({ parent }: TeaserDocument) => parent.bigTextTeaser, }, { name: 'text', @@ -94,7 +119,27 @@ export default { type: 'array', of: [blockContentType], validation: (Rule: Rule) => - Rule.custom((value: PortableTextBlock[]) => validateCharCounterEditor(value, 600)).warning(), + Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) => { + if (!(ctx.parent as Teaser)?.bigTextTeaser) { + return validateCharCounterEditor(value, 600) + } + return true + }).warning(), + hidden: ({ parent }: TeaserDocument) => parent.bigTextTeaser, + }, + { + name: 'bigText', + title: 'Text content', + type: 'array', + of: [blockContentTypeForBigText], + validation: (Rule: Rule) => + Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) => { + if ((ctx.parent as Teaser)?.bigTextTeaser) { + return validateCharCounterEditor(value, 600) + } + return true + }), + hidden: ({ parent }: TeaserDocument) => !parent.bigTextTeaser, }, { name: 'action', @@ -165,14 +210,35 @@ export default { preview: { select: { title: 'title', + text: 'text', + bigTextTeaser: 'bigTextTeaser', + bigText: 'bigText', image: 'image.asset', }, - prepare({ title, image }: { title: PortableTextBlock[]; image: Reference }) { - const plainTitle = title ? blocksToText(title) : undefined + prepare({ + title, + text, + bigTextTeaser, + bigText, + image, + }: { + title: PortableTextBlock[] + text: PortableTextBlock[] + bigTextTeaser: boolean + bigText: PortableTextBlock[] + image: Reference + }) { + let plainTitle = undefined + + if (bigTextTeaser) { + plainTitle = bigText ? blocksToText(bigText) : undefined + } else { + plainTitle = title || text ? blocksToText(title || text) : undefined + } return { - title: plainTitle || 'Missing title!', - subtitle: 'Teaser component', + title: plainTitle || 'Missing title/text', + subtitle: bigTextTeaser ? 'Big text teaser component' : 'Teaser component', media: image, } }, diff --git a/web/components/src/Text/Text.tsx b/web/components/src/Text/Text.tsx index 4eb429fdc..e68246de3 100644 --- a/web/components/src/Text/Text.tsx +++ b/web/components/src/Text/Text.tsx @@ -12,7 +12,7 @@ const StyledText = styled(Typography)` font-size: var(--size); line-height: var(--lineHeight-3); /* @TODO: Let's consider to move all the margin woo to the article layout - We should. Not move, but scope. For both news and topic pages. But this will + We should. Not move, but scope. For both news and topic pages. But this will require a lot of retest, since in some of the uses cases we will need to reintroduce the margin */ margin-bottom: var(--space-medium); & + & { @@ -41,7 +41,7 @@ const StyledText = styled(Typography)` ` export type TextProps = { - size?: 'regular' | 'md' | 'small' + size?: 'regular' | 'md' | 'small' | 'big' bold?: boolean italic?: boolean centered?: boolean @@ -54,6 +54,7 @@ const sizes = { regular: 'var(--typeScale-1)', md: 'var(--typeScale-2)', small: 'var(--typeScale-0)', + big: 'var(--typeScale-4_5)', } export const Text = forwardRef(function Text( diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts index 3893d7fe2..5f797f200 100644 --- a/web/lib/queries/common/pageContentFields.ts +++ b/web/lib/queries/common/pageContentFields.ts @@ -12,21 +12,23 @@ import promoteMagazine from './promotions/promoteMagazine' import { publishDateTimeQuery } from './publishDateTime' const pageContentFields = /* groq */ ` - _type == "teaser" =>{ + _type == "teaser" => { "type": _type, "id": _key, overline, title, - text[]{ - ..., - ${markDefs}, - }, + bigTextTeaser, + "text": select( + bigTextTeaser => + bigText[]{..., ${markDefs}}, + text[]{..., ${markDefs}} + ), "designOptions": { "background": coalesce(background.title, 'White'), "imagePosition": coalesce(imagePosition, 'left'), imageSize, }, - "image": image{ + "image": image { ..., "extension": asset-> extension }, diff --git a/web/pageComponents/shared/Teaser.tsx b/web/pageComponents/shared/Teaser.tsx index 6b59b094e..c6bbd2102 100644 --- a/web/pageComponents/shared/Teaser.tsx +++ b/web/pageComponents/shared/Teaser.tsx @@ -1,4 +1,4 @@ -import { Teaser as EnvisTeaser, Link, Eyebrow, BackgroundContainer } from '@components' +import { Teaser as EnvisTeaser, Link, Eyebrow, BackgroundContainer, Text } from '@components' import styled from 'styled-components' import IngressText from './portableText/IngressText' import TitleText from './portableText/TitleText' @@ -9,6 +9,7 @@ import { getUrlFromAction } from '../../common/helpers/getUrlFromAction' import type { TeaserData, ImageWithAlt, LinkData } from '../../types/types' import { getLocaleFromName } from '../../lib/localization' +import { BlockType } from './portableText/helpers/defaultSerializers' const { Content, Media } = EnvisTeaser @@ -55,9 +56,9 @@ const TeaserAction = ({ action }: { action: LinkData }) => { if (action.type === 'internalUrl') { const locale = getLocaleFromName(action.link?.lang) return ( - - {action.label} - + + {action.label} + ) } @@ -69,7 +70,7 @@ const TeaserAction = ({ action }: { action: LinkData }) => { } const Teaser = ({ data, anchor }: TeaserProps) => { - const { title, overline, text, image, action, designOptions } = data + const { title, overline, text, image, action, designOptions, bigTextTeaser } = data const { background, imageSize, imagePosition } = designOptions if ([title, overline, text, image?.asset, action].every((i) => !i)) { @@ -92,7 +93,22 @@ const Teaser = ({ data, anchor }: TeaserProps) => { {title && } - {text && } + {text && ( + { + return {children} + }, + } as BlockType, + } + : {} + } + /> + )} {action && } diff --git a/web/pageComponents/shared/portableText/IngressText.tsx b/web/pageComponents/shared/portableText/IngressText.tsx index c2a97b098..0db2ba4db 100644 --- a/web/pageComponents/shared/portableText/IngressText.tsx +++ b/web/pageComponents/shared/portableText/IngressText.tsx @@ -1,5 +1,4 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import { PortableText, PortableTextProps } from '@portabletext/react' +import { PortableText, PortableTextProps, PortableTextReactComponents } from '@portabletext/react' import styled from 'styled-components' import { h3Heading, h2Heading, Sub, Sup, ExternalLink, InternalLink } from './components' import isEmpty from './helpers/isEmpty' @@ -57,14 +56,14 @@ type IngressTextProps = { centered?: boolean } & PortableTextProps -const IngressText = ({ value, centered = false, components = {}, ...props }: IngressTextProps) => ( - -) +const IngressText = ({ value, centered = false, components = {}, ...props }: IngressTextProps) => { + return ( + + ) +} export default IngressText diff --git a/web/styles/settings.ts b/web/styles/settings.ts index d053bab7b..af9f08e68 100644 --- a/web/styles/settings.ts +++ b/web/styles/settings.ts @@ -98,6 +98,7 @@ export const typography = css` --typeScale-2: clamp(calc(19.20 / 16 * 1rem), 0.54vw + 1.07rem, calc(27.50 / 16 * 1rem)); --typeScale-3: clamp(calc(23.04 / 16 * 1rem), 0.73vw + 1.27rem, calc(34.38 / 16 * 1rem)); --typeScale-4: clamp(calc(27.65 / 16 * 1rem), 0.99vw + 1.5rem, calc(42.97 / 16 * 1rem)); + --typeScale-4_5: clamp(calc(33.73 / 16 * 1rem), 1.38vw + 1.785rem, calc(55.055 / 16 * 1rem)); --typeScale-5: clamp(calc(39.81 / 16 * 1rem), 1.77vw + 2.07rem, calc(67.14 / 16 * 1rem)); // search and replace, then remove diff --git a/web/types/types.ts b/web/types/types.ts index 663174645..f6498a72e 100644 --- a/web/types/types.ts +++ b/web/types/types.ts @@ -289,6 +289,7 @@ export type TeaserData = { title: PortableTextBlock[] text: PortableTextBlock[] overline?: string + bigTextTeaser?: boolean image: ImageWithAlt action?: LinkData designOptions: DesignOptions From bd102ce6774152850f1f1bc7f971bfa3195145e9 Mon Sep 17 00:00:00 2001 From: Fernando Lucchesi Date: Wed, 4 Oct 2023 08:57:33 -0300 Subject: [PATCH 03/10] =?UTF-8?q?=F0=9F=8E=A8=20Improve=20logic=20structur?= =?UTF-8?q?e=20#1890?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/components/src/Text/Text.tsx | 6 +++-- web/pageComponents/shared/Teaser.tsx | 38 ++++++++++++++-------------- 2 files changed, 23 insertions(+), 21 deletions(-) diff --git a/web/components/src/Text/Text.tsx b/web/components/src/Text/Text.tsx index e68246de3..2fa5a11cd 100644 --- a/web/components/src/Text/Text.tsx +++ b/web/components/src/Text/Text.tsx @@ -41,7 +41,7 @@ const StyledText = styled(Typography)` ` export type TextProps = { - size?: 'regular' | 'md' | 'small' | 'big' + size?: 'regular' | 'md' | 'small' | 'lg' bold?: boolean italic?: boolean centered?: boolean @@ -51,16 +51,18 @@ export type TextProps = { /* Should be easy enough to change later on */ const sizes = { + lg: 'var(--typeScale-4_5)', regular: 'var(--typeScale-1)', md: 'var(--typeScale-2)', small: 'var(--typeScale-0)', - big: 'var(--typeScale-4_5)', } export const Text = forwardRef(function Text( { size = 'regular', style, children, inverted = false, ...rest }, ref, ) { + if (size === 'lg') console.log(ref) + return ( { {image?.asset && } - {overline && {overline}} - - {title && } - - {text && ( - { - return {children} - }, - } as BlockType, - } - : {} - } - /> + {bigTextTeaser ? ( + text && ( + { + return {children} + }, + } as BlockType, + }} + /> + ) + ) : ( + <> + {overline && {overline}} + {title && } + {text && } + )} {action && } From c6984acb23c6a52210ec07444c313cf02608975e Mon Sep 17 00:00:00 2001 From: Fernando Lucchesi Date: Wed, 4 Oct 2023 16:54:03 -0300 Subject: [PATCH 04/10] =?UTF-8?q?=E2=9C=A8=20Add=20big=20title=20for=20ric?= =?UTF-8?q?h=20text=20and=20improve=20code=20#1890?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sanityv3/schemas/objects/teaser.tsx | 36 ++++----- sanityv3/schemas/objects/textBlock.tsx | 88 +++++++++++++++------ web/lib/queries/common/pageContentFields.ts | 14 ++-- web/pageComponents/shared/Teaser.tsx | 8 +- web/pageComponents/topicPages/TextBlock.tsx | 33 ++++++-- web/types/types.ts | 4 +- 6 files changed, 120 insertions(+), 63 deletions(-) diff --git a/sanityv3/schemas/objects/teaser.tsx b/sanityv3/schemas/objects/teaser.tsx index c9688902f..fac1f71d5 100644 --- a/sanityv3/schemas/objects/teaser.tsx +++ b/sanityv3/schemas/objects/teaser.tsx @@ -53,7 +53,7 @@ export type Teaser = { overline?: string title?: PortableTextBlock[] text?: PortableTextBlock[] - bigTextTeaser?: boolean + isBigText?: boolean bigText?: PortableTextBlock[] action?: (LinkSelector | DownloadableFile | DownloadableImage)[] image: ImageWithAlt @@ -80,7 +80,7 @@ export default { collapsible: true, collapsed: true, }, - hidden: ({ parent }: TeaserDocument) => parent.bigTextTeaser, + hidden: ({ parent }: TeaserDocument) => parent.isBigText, }, { name: 'link', @@ -94,8 +94,8 @@ export default { ], fields: [ { - title: 'Big text teaser', - name: 'bigTextTeaser', + title: 'Big text', + name: 'isBigText', type: 'boolean', }, { @@ -111,7 +111,7 @@ export default { input: CompactBlockEditor, }, of: [titleContentType], - hidden: ({ parent }: TeaserDocument) => parent.bigTextTeaser, + hidden: ({ parent }: TeaserDocument) => parent.isBigText, }, { name: 'text', @@ -120,12 +120,12 @@ export default { of: [blockContentType], validation: (Rule: Rule) => Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) => { - if (!(ctx.parent as Teaser)?.bigTextTeaser) { + if (!(ctx.parent as Teaser)?.isBigText) { return validateCharCounterEditor(value, 600) } return true }).warning(), - hidden: ({ parent }: TeaserDocument) => parent.bigTextTeaser, + hidden: ({ parent }: TeaserDocument) => parent.isBigText, }, { name: 'bigText', @@ -134,12 +134,12 @@ export default { of: [blockContentTypeForBigText], validation: (Rule: Rule) => Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) => { - if ((ctx.parent as Teaser)?.bigTextTeaser) { + if ((ctx.parent as Teaser)?.isBigText) { return validateCharCounterEditor(value, 600) } return true }), - hidden: ({ parent }: TeaserDocument) => !parent.bigTextTeaser, + hidden: ({ parent }: TeaserDocument) => !parent.isBigText, }, { name: 'action', @@ -211,34 +211,28 @@ export default { select: { title: 'title', text: 'text', - bigTextTeaser: 'bigTextTeaser', + isBigText: 'isBigText', bigText: 'bigText', image: 'image.asset', }, prepare({ title, text, - bigTextTeaser, + isBigText, bigText, image, }: { title: PortableTextBlock[] text: PortableTextBlock[] - bigTextTeaser: boolean + isBigText: boolean bigText: PortableTextBlock[] image: Reference }) { - let plainTitle = undefined - - if (bigTextTeaser) { - plainTitle = bigText ? blocksToText(bigText) : undefined - } else { - plainTitle = title || text ? blocksToText(title || text) : undefined - } + const plainTitle = isBigText ? blocksToText(bigText) : blocksToText(title || text) return { - title: plainTitle || 'Missing title/text', - subtitle: bigTextTeaser ? 'Big text teaser component' : 'Teaser component', + title: plainTitle || 'Missing title/content', + subtitle: isBigText ? 'Teaser component (BIG TEXT)' : 'Teaser component', media: image, } }, diff --git a/sanityv3/schemas/objects/textBlock.tsx b/sanityv3/schemas/objects/textBlock.tsx index 14b3a8340..533fb7df5 100644 --- a/sanityv3/schemas/objects/textBlock.tsx +++ b/sanityv3/schemas/objects/textBlock.tsx @@ -1,10 +1,9 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ import { text_field } from '@equinor/eds-icons' -import type { Reference, Rule } from 'sanity' +import type { PortableTextBlock, Reference, Rule, SanityDocument, ValidationContext } from 'sanity' import type { ColorSelectorValue } from '../components/ColorSelector' import blocksToText from '../../helpers/blocksToText' import { EdsIcon } from '../../icons' -import { SchemaType } from '../../types' import CompactBlockEditor from '../components/CompactBlockEditor' import { configureBlockContent, configureTitleBlockContent } from '../editors' import { validateComponentAnchor } from '../validations/validateAnchorReference' @@ -16,6 +15,7 @@ const blockContentType = configureBlockContent({ h4: false, attachment: false, }) + const ingressContentType = configureBlockContent({ h1: false, h2: false, @@ -23,6 +23,21 @@ const ingressContentType = configureBlockContent({ h4: false, attachment: false, }) + +const ingressContentTypeForBigText = configureBlockContent({ + h1: false, + h2: false, + h3: false, + h4: false, + attachment: false, + smallText: false, + normalTextOverride: { + title: 'Normal', + value: 'normal', + component: ({ children }: { children: React.ReactNode }) => {children}, + }, +}) + const titleContentType = configureTitleBlockContent() type TextBlock = { @@ -31,12 +46,18 @@ type TextBlock = { anchor?: string ingress?: string text?: string + isBigText?: boolean + bigText?: PortableTextBlock[] action?: Reference[] splitList?: boolean overrideButtonStyle?: boolean background?: ColorSelectorValue } +type TextBlockDocument = { + parent: TextBlock +} + export default { name: 'textBlock', title: 'Text block', @@ -50,6 +71,7 @@ export default { collapsible: true, collapsed: true, }, + hidden: ({ parent }: TextBlockDocument) => parent.isBigText, }, { title: 'Eyebrow headline', @@ -59,6 +81,7 @@ export default { collapsible: true, collapsed: true, }, + hidden: ({ parent }: TextBlockDocument) => parent.isBigText, }, { title: 'Call to action(s)', @@ -84,6 +107,11 @@ export default { }, ], fields: [ + { + title: 'Big text', + name: 'isBigText', + type: 'boolean', + }, { name: 'image', type: 'imageWithAlt', @@ -105,7 +133,11 @@ export default { input: CompactBlockEditor, }, of: [titleContentType], - validation: (Rule: SchemaType.ValidationRule) => Rule.required().warning('A title is recommended'), + validation: (Rule: Rule) => + Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) => + !value && !(ctx.parent as TextBlock)?.isBigText ? 'A title is recommended' : true, + ).warning(), + hidden: ({ parent }: TextBlockDocument) => parent.isBigText, }, { name: 'anchor', @@ -124,6 +156,18 @@ export default { title: 'Ingress', type: 'array', of: [ingressContentType], + hidden: ({ parent }: TextBlockDocument) => parent.isBigText, + }, + { + name: 'bigIngress', + title: 'Ingress', + type: 'array', + of: [ingressContentTypeForBigText], + hidden: ({ parent }: TextBlockDocument) => !parent.isBigText, + validation: (Rule: Rule) => + Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) => + !value && (ctx.parent as TextBlock)?.isBigText ? 'Ingress is required' : true, + ), }, { name: 'text', @@ -176,27 +220,27 @@ export default { title: 'title', ingress: 'ingress', text: 'text', - }, - prepare({ title = [], ingress, text }: { title: any[]; ingress: any; text: any }) { - const textBlock = (text || []).find((introBlock: any) => introBlock._type === 'block') - const ingressBlock = (ingress || []).find((introBlock: any) => introBlock._type === 'block') - const plainTitle = title ? blocksToText(title) : undefined + isBigText: 'isBigText', + bigIngress: 'bigIngress', + }, + prepare({ + title, + isBigText, + bigIngress, + ingress, + text, + }: { + title: PortableTextBlock[] + ingress: PortableTextBlock[] + isBigText: boolean + bigIngress: PortableTextBlock[] + text: PortableTextBlock[] + }) { + const plainTitle = isBigText ? blocksToText(bigIngress) : blocksToText(title || ingress || text) return { - title: - plainTitle || - (textBlock && - textBlock.children - .filter((child: any) => child._type === 'span') - .map((span: any) => span.text) - .join('')) || - (ingressBlock && - ingressBlock.children - .filter((child: any) => child._type === 'span') - .map((span: any) => span.text) - .join('')) || - 'Missing content!', - subtitle: `Text block component.`, + title: plainTitle || 'Missing title/content', + subtitle: isBigText ? 'Text block component (BIG TEXT)' : 'Text block component', media: EdsIcon(text_field), } }, diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts index 5f797f200..d39d5143b 100644 --- a/web/lib/queries/common/pageContentFields.ts +++ b/web/lib/queries/common/pageContentFields.ts @@ -17,9 +17,9 @@ const pageContentFields = /* groq */ ` "id": _key, overline, title, - bigTextTeaser, + isBigText, "text": select( - bigTextTeaser => + isBigText => bigText[]{..., ${markDefs}}, text[]{..., ${markDefs}} ), @@ -44,10 +44,12 @@ const pageContentFields = /* groq */ ` image, overline, title, - ingress[]{ - ..., - ${markDefs}, - }, + isBigText, + "ingress": select( + isBigText => + bigIngress[]{..., ${markDefs}}, + ingress[]{..., ${markDefs}} + ), text[]{ ..., ${markDefs}, diff --git a/web/pageComponents/shared/Teaser.tsx b/web/pageComponents/shared/Teaser.tsx index 89ea76fe0..d272c4ace 100644 --- a/web/pageComponents/shared/Teaser.tsx +++ b/web/pageComponents/shared/Teaser.tsx @@ -70,7 +70,7 @@ const TeaserAction = ({ action }: { action: LinkData }) => { } const Teaser = ({ data, anchor }: TeaserProps) => { - const { title, overline, text, image, action, designOptions, bigTextTeaser } = data + const { title, overline, text, image, action, designOptions, isBigText } = data const { background, imageSize, imagePosition } = designOptions if ([title, overline, text, image?.asset, action].every((i) => !i)) { @@ -89,15 +89,13 @@ const Teaser = ({ data, anchor }: TeaserProps) => { {image?.asset && } - {bigTextTeaser ? ( + {isBigText ? ( text && ( { - return {children} - }, + normal: ({ children }: { children: React.ReactNode }) => {children}, } as BlockType, }} /> diff --git a/web/pageComponents/topicPages/TextBlock.tsx b/web/pageComponents/topicPages/TextBlock.tsx index a772f7c29..2cf30714c 100644 --- a/web/pageComponents/topicPages/TextBlock.tsx +++ b/web/pageComponents/topicPages/TextBlock.tsx @@ -1,4 +1,4 @@ -import { Eyebrow, BackgroundContainer } from '@components' +import { Eyebrow, BackgroundContainer, Text } from '@components' import IngressText from '../shared/portableText/IngressText' import RichText from '../shared/portableText/RichText' import TitleText from '../shared/portableText/TitleText' @@ -6,6 +6,7 @@ import Image, { Ratios } from '../shared/SanityImage' import styled from 'styled-components' import type { TextBlockData } from '../../types/types' import CallToActions from './CallToActions' +import { BlockType } from '../shared/portableText/helpers/defaultSerializers' export const StyledTextBlockWrapper = styled(BackgroundContainer)<{ id: string | undefined }>` ${({ id }) => @@ -62,6 +63,7 @@ const TextBlock = ({ data, anchor }: TextBlockProps) => { callToActions, splitList, overrideButtonStyle = false, + isBigText, } = data /* Don't render the component if it only has an eyebrow */ if (!title && !ingress && !text && (!callToActions || callToActions.length === 0)) return null @@ -70,14 +72,29 @@ const TextBlock = ({ data, anchor }: TextBlockProps) => { return ( - {image?.asset && ( - - - + {isBigText ? ( + ingress && ( + {children}, + } as BlockType, + }} + /> + ) + ) : ( + <> + {image?.asset && ( + + + + )} + {overline && {overline}} + {title && } + {ingress && } + )} - {overline && {overline}} - {title && } - {ingress && } {text && ( diff --git a/web/types/types.ts b/web/types/types.ts index f6498a72e..1ad4bc52b 100644 --- a/web/types/types.ts +++ b/web/types/types.ts @@ -261,6 +261,7 @@ export type DesignOptions = { imagePosition?: TeaserImagePosition imageSize?: TeaserImageSize } + export type TextBlockData = { type: string id: string @@ -268,6 +269,7 @@ export type TextBlockData = { image?: ImageWithAlt overline?: string text: PortableTextBlock[] + isBigText?: boolean ingress: PortableTextBlock[] callToActions?: LinkData[] splitList?: boolean @@ -289,7 +291,7 @@ export type TeaserData = { title: PortableTextBlock[] text: PortableTextBlock[] overline?: string - bigTextTeaser?: boolean + isBigText?: boolean image: ImageWithAlt action?: LinkData designOptions: DesignOptions From 4c4dd8ce96c0304532ed3f3ee072927e8a12009e Mon Sep 17 00:00:00 2001 From: Fernando Lucchesi Date: Fri, 6 Oct 2023 08:48:19 -0300 Subject: [PATCH 05/10] =?UTF-8?q?=E2=9C=A8=20Adjust=20line=20height=20#189?= =?UTF-8?q?0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/components/src/Text/Text.tsx | 15 +++++++++++---- web/pageComponents/shared/Teaser.tsx | 6 +++++- web/pageComponents/topicPages/TextBlock.tsx | 6 +++++- web/styles/settings.ts | 1 + 4 files changed, 22 insertions(+), 6 deletions(-) diff --git a/web/components/src/Text/Text.tsx b/web/components/src/Text/Text.tsx index 2fa5a11cd..ec17c2c3b 100644 --- a/web/components/src/Text/Text.tsx +++ b/web/components/src/Text/Text.tsx @@ -10,7 +10,7 @@ type StyledTextProps = { const StyledText = styled(Typography)` font-size: var(--size); - line-height: var(--lineHeight-3); + line-height: var(--lineHeight); /* @TODO: Let's consider to move all the margin woo to the article layout We should. Not move, but scope. For both news and topic pages. But this will require a lot of retest, since in some of the uses cases we will need to reintroduce the margin */ @@ -42,6 +42,7 @@ const StyledText = styled(Typography)` export type TextProps = { size?: 'regular' | 'md' | 'small' | 'lg' + lineHeight?: '1' | '2' | '2_5' | '3' bold?: boolean italic?: boolean centered?: boolean @@ -57,12 +58,17 @@ const sizes = { small: 'var(--typeScale-0)', } +const lineHeights = { + 1: 'var(--lineHeight-1)', + 2: 'var(--lineHeight-2)', + '2_5': 'var(--lineHeight-2_5)', + 3: 'var(--lineHeight-3)', +} + export const Text = forwardRef(function Text( - { size = 'regular', style, children, inverted = false, ...rest }, + { size = 'regular', lineHeight = '3', style, children, inverted = false, ...rest }, ref, ) { - if (size === 'lg') console.log(ref) - return ( (function Text( { ...style, '--size': sizes[size], + '--lineHeight': lineHeights[lineHeight], } as CSSProperties } {...rest} diff --git a/web/pageComponents/shared/Teaser.tsx b/web/pageComponents/shared/Teaser.tsx index d272c4ace..7590023c4 100644 --- a/web/pageComponents/shared/Teaser.tsx +++ b/web/pageComponents/shared/Teaser.tsx @@ -95,7 +95,11 @@ const Teaser = ({ data, anchor }: TeaserProps) => { value={text} components={{ block: { - normal: ({ children }: { children: React.ReactNode }) => {children}, + normal: ({ children }: { children: React.ReactNode }) => ( + + {children} + + ), } as BlockType, }} /> diff --git a/web/pageComponents/topicPages/TextBlock.tsx b/web/pageComponents/topicPages/TextBlock.tsx index 2cf30714c..9e35ba21b 100644 --- a/web/pageComponents/topicPages/TextBlock.tsx +++ b/web/pageComponents/topicPages/TextBlock.tsx @@ -78,7 +78,11 @@ const TextBlock = ({ data, anchor }: TextBlockProps) => { value={ingress} components={{ block: { - normal: ({ children }: { children: React.ReactNode }) => {children}, + normal: ({ children }: { children: React.ReactNode }) => ( + + {children} + + ), } as BlockType, }} /> diff --git a/web/styles/settings.ts b/web/styles/settings.ts index af9f08e68..8fcc1f1a0 100644 --- a/web/styles/settings.ts +++ b/web/styles/settings.ts @@ -109,6 +109,7 @@ export const typography = css` /* Should probably do something more clever here */ --lineHeight-1: inherit; --lineHeight-2: 1.2; + --lineHeight-2_5: 1.35; --lineHeight-3: 1.5; /* Font weights */ From 72092c97eae4611dc0c608ccec2a228040b8090f Mon Sep 17 00:00:00 2001 From: Fernando Lucchesi Date: Fri, 6 Oct 2023 12:51:32 -0300 Subject: [PATCH 06/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Index=20big=20title?= =?UTF-8?q?=20text=20#1890?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sanityv3/schemas/objects/textBlock.tsx | 18 +++++++++--------- search/IndexSanityContent/magazine/sanity.ts | 6 +++++- search/IndexSanityContent/topic/sanity.ts | 6 +++++- web/components/src/Heading/Heading.stories.tsx | 12 ++++++------ web/components/src/Heading/Heading.tsx | 11 +++++++---- web/lib/queries/common/pageContentFields.ts | 13 +++++-------- web/pageComponents/pageTemplates/ErrorPage.tsx | 2 +- web/pageComponents/pageTemplates/Event.tsx | 2 +- .../pageTemplates/LandingPage.tsx | 2 +- web/pageComponents/pageTemplates/News.tsx | 2 +- .../pageTemplates/NewsRoomPage.tsx | 2 +- .../pageTemplates/shared/SharedTitle.tsx | 2 +- web/pageComponents/shared/Hero/DefaultHero.tsx | 2 +- web/pageComponents/topicPages/TextBlock.tsx | 15 ++++++--------- 14 files changed, 50 insertions(+), 45 deletions(-) diff --git a/sanityv3/schemas/objects/textBlock.tsx b/sanityv3/schemas/objects/textBlock.tsx index 533fb7df5..7e10bc4f8 100644 --- a/sanityv3/schemas/objects/textBlock.tsx +++ b/sanityv3/schemas/objects/textBlock.tsx @@ -24,7 +24,7 @@ const ingressContentType = configureBlockContent({ attachment: false, }) -const ingressContentTypeForBigText = configureBlockContent({ +const blockContentTypeForBigText = configureBlockContent({ h1: false, h2: false, h3: false, @@ -159,14 +159,14 @@ export default { hidden: ({ parent }: TextBlockDocument) => parent.isBigText, }, { - name: 'bigIngress', - title: 'Ingress', + name: 'bigTitle', + title: 'Title', type: 'array', - of: [ingressContentTypeForBigText], + of: [blockContentTypeForBigText], hidden: ({ parent }: TextBlockDocument) => !parent.isBigText, validation: (Rule: Rule) => Rule.custom((value: PortableTextBlock[], ctx: ValidationContext) => - !value && (ctx.parent as TextBlock)?.isBigText ? 'Ingress is required' : true, + !value && (ctx.parent as TextBlock)?.isBigText ? 'Title is required' : true, ), }, { @@ -221,22 +221,22 @@ export default { ingress: 'ingress', text: 'text', isBigText: 'isBigText', - bigIngress: 'bigIngress', + bigTitle: 'bigTitle', }, prepare({ title, isBigText, - bigIngress, + bigTitle, ingress, text, }: { title: PortableTextBlock[] ingress: PortableTextBlock[] isBigText: boolean - bigIngress: PortableTextBlock[] + bigTitle: PortableTextBlock[] text: PortableTextBlock[] }) { - const plainTitle = isBigText ? blocksToText(bigIngress) : blocksToText(title || ingress || text) + const plainTitle = isBigText ? blocksToText(bigTitle) : blocksToText(title || ingress || text) return { title: plainTitle || 'Missing title/content', diff --git a/search/IndexSanityContent/magazine/sanity.ts b/search/IndexSanityContent/magazine/sanity.ts index 3175c8099..9c078d3a3 100644 --- a/search/IndexSanityContent/magazine/sanity.ts +++ b/search/IndexSanityContent/magazine/sanity.ts @@ -27,7 +27,11 @@ export const query = /* groq */ `*[_type == "magazine" && _lang == $lang && !(_i "ingress": pt::text(ingress), "textBlocks": content[_type == "textBlock"]{ "_key": _key, - "title": pt::text(title), + "title": select( + "isBigText" == true => { + pt::text(bigTitle), + pt::text(title) + }), "ingress": pt::text(ingress), "text": pt::text(text) // TODO: Do this manually to cover all cases }, diff --git a/search/IndexSanityContent/topic/sanity.ts b/search/IndexSanityContent/topic/sanity.ts index 7d27ee78f..8280a0e80 100644 --- a/search/IndexSanityContent/topic/sanity.ts +++ b/search/IndexSanityContent/topic/sanity.ts @@ -11,7 +11,11 @@ export const query = /* groq */ `*[_type match "route_" + $lang + "*" && content "type": content->_type, "textBlocks": content->content[_type == "textBlock"]{ "_key": _key, - "title": pt::text(title), + "title": select( + "isBigText" == true => { + pt::text(bigTitle), + pt::text(title) + }), "ingress": pt::text(ingress), "text": pt::text(text) // TODO: Do this manually to cover all cases }, diff --git a/web/components/src/Heading/Heading.stories.tsx b/web/components/src/Heading/Heading.stories.tsx index 3f04cea03..a6a09ac2e 100644 --- a/web/components/src/Heading/Heading.stories.tsx +++ b/web/components/src/Heading/Heading.stories.tsx @@ -35,7 +35,7 @@ Default.storyName = 'Default' export const HeaderLevels: StoryFn = () => ( - + Renewables and low-carbon{' '} @@ -60,10 +60,10 @@ HeaderLevels.storyName = 'Header levels' export const FontWeight: StoryFn = () => ( - + I'm bold - + I'm regular @@ -72,7 +72,7 @@ FontWeight.storyName = 'Font weight' FontWeight.parameters = { docs: { - storyDescription: `The largest font size, 2xl, can be either bold or regular`, + storyDescription: `The largest font size, 3xl, can be either bold or regular`, }, } @@ -93,7 +93,7 @@ export const Sizes: StoryFn = () => ( We are all h1 headers - + We are all h1 headers @@ -122,7 +122,7 @@ export const Long: StoryFn = () => ( Equinor is in a unique position to make a difference in the global energy future. We will seize this opportunity. - + Equinor is in a unique position to make a difference in the global energy future. We will seize this opportunity. diff --git a/web/components/src/Heading/Heading.tsx b/web/components/src/Heading/Heading.tsx index f0f30fd6a..bca5c415d 100644 --- a/web/components/src/Heading/Heading.tsx +++ b/web/components/src/Heading/Heading.tsx @@ -30,7 +30,7 @@ const StyledHeading = styled(Typography)` ` export type HeadingProps = { - size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' + size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' regular?: boolean center?: boolean @@ -45,7 +45,8 @@ const sizes = { md: 'var(--typeScale-2)', lg: 'var(--typeScale-3)', xl: 'var(--typeScale-4)', - '2xl': 'var(--typeScale-5)', + '2xl': 'var(--typeScale-4_5)', + '3xl': 'var(--typeScale-5)', } const lineHeights = { @@ -54,7 +55,8 @@ const lineHeights = { md: 'var(--lineHeight-1)', lg: 'var(--lineHeight-1)', xl: 'var(--lineHeight-1)', - '2xl': 'var(--lineHeight-2)', + '2xl': 'var(--lineHeight-2_5)', + '3xl': 'var(--lineHeight-2)', } const fontWeights = { @@ -63,7 +65,8 @@ const fontWeights = { md: 'var(--fontWeight-regular)', lg: 'var(--fontWeight-regular)', xl: 'var(--fontWeight-regular)', - '2xl': 'var(--fontWeight-regular)', + '2xl': 'var(--fontWeidht-regular)', + '3xl': 'var(--fontWeight-regular)', } export const Heading = forwardRef(function Heading( diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts index d39d5143b..43cf55fdd 100644 --- a/web/lib/queries/common/pageContentFields.ts +++ b/web/lib/queries/common/pageContentFields.ts @@ -43,17 +43,14 @@ const pageContentFields = /* groq */ ` "id": _key, image, overline, - title, isBigText, - "ingress": select( + "title": select( isBigText => - bigIngress[]{..., ${markDefs}}, - ingress[]{..., ${markDefs}} + bigTitle[]{..., ${markDefs}}, + title[]{..., ${markDefs}} ), - text[]{ - ..., - ${markDefs}, - }, + ingress[]{..., ${markDefs}}, + text[]{..., ${markDefs}}, "callToActions": action[]{ ${linkSelectorFields}, ${downloadableFileFields}, diff --git a/web/pageComponents/pageTemplates/ErrorPage.tsx b/web/pageComponents/pageTemplates/ErrorPage.tsx index 68f9d3f8f..0ba71165f 100644 --- a/web/pageComponents/pageTemplates/ErrorPage.tsx +++ b/web/pageComponents/pageTemplates/ErrorPage.tsx @@ -41,7 +41,7 @@ const ErrorPage = ({ pageData }: { pageData: ErrorPageData }) => { {backgroundImage && } - + 404 {title && {toPlainText(title)}} diff --git a/web/pageComponents/pageTemplates/Event.tsx b/web/pageComponents/pageTemplates/Event.tsx index 2090e6720..70fe21fc6 100644 --- a/web/pageComponents/pageTemplates/Event.tsx +++ b/web/pageComponents/pageTemplates/Event.tsx @@ -150,7 +150,7 @@ export default function Event({ data }: { data: EventSchema }): JSX.Element {
- {title && } + {title && } {start && ( diff --git a/web/pageComponents/pageTemplates/LandingPage.tsx b/web/pageComponents/pageTemplates/LandingPage.tsx index 1e9fa7f6c..918feda65 100644 --- a/web/pageComponents/pageTemplates/LandingPage.tsx +++ b/web/pageComponents/pageTemplates/LandingPage.tsx @@ -43,7 +43,7 @@ const LandingPage = ({ data }: LandingPageProps) => { <> - {title && } + {title && } {ingress && ( diff --git a/web/pageComponents/pageTemplates/News.tsx b/web/pageComponents/pageTemplates/News.tsx index 1c4c69b01..b82dfe575 100644 --- a/web/pageComponents/pageTemplates/News.tsx +++ b/web/pageComponents/pageTemplates/News.tsx @@ -219,7 +219,7 @@ const NewsPage = ({ data: news }: ArticleProps) => {
- + {title} {publishDateTime && ( diff --git a/web/pageComponents/pageTemplates/NewsRoomPage.tsx b/web/pageComponents/pageTemplates/NewsRoomPage.tsx index a86f23084..1f0ac560c 100644 --- a/web/pageComponents/pageTemplates/NewsRoomPage.tsx +++ b/web/pageComponents/pageTemplates/NewsRoomPage.tsx @@ -189,7 +189,7 @@ const NewsRoomPage = ({ isServerRendered, locale, pageData, slug, url }: NewsRoo // @ts-ignore: Still struggling with the types here :/ if (isEmpty(children)) return null return ( - + {children} ) diff --git a/web/pageComponents/pageTemplates/shared/SharedTitle.tsx b/web/pageComponents/pageTemplates/shared/SharedTitle.tsx index 64c1dd855..9216bf4e8 100644 --- a/web/pageComponents/pageTemplates/shared/SharedTitle.tsx +++ b/web/pageComponents/pageTemplates/shared/SharedTitle.tsx @@ -40,7 +40,7 @@ const StyledHeading = styled(TitleText)<{ $bgColor?: BackgroundColours }>` const SharedTitle = ({ title, styles }: SharedTitleProps) => { return ( - + ) } diff --git a/web/pageComponents/shared/Hero/DefaultHero.tsx b/web/pageComponents/shared/Hero/DefaultHero.tsx index 8677a80aa..61fcdb6dd 100644 --- a/web/pageComponents/shared/Hero/DefaultHero.tsx +++ b/web/pageComponents/shared/Hero/DefaultHero.tsx @@ -34,7 +34,7 @@ type Props = { export const DefaultHero = ({ title, image }: Props) => { return ( <> - {title && } + {title && } {image && } ) diff --git a/web/pageComponents/topicPages/TextBlock.tsx b/web/pageComponents/topicPages/TextBlock.tsx index 9e35ba21b..b998d38a1 100644 --- a/web/pageComponents/topicPages/TextBlock.tsx +++ b/web/pageComponents/topicPages/TextBlock.tsx @@ -1,4 +1,4 @@ -import { Eyebrow, BackgroundContainer, Text } from '@components' +import { Eyebrow, BackgroundContainer, Text, Heading } from '@components' import IngressText from '../shared/portableText/IngressText' import RichText from '../shared/portableText/RichText' import TitleText from '../shared/portableText/TitleText' @@ -73,16 +73,13 @@ const TextBlock = ({ data, anchor }: TextBlockProps) => { {isBigText ? ( - ingress && ( - ( - - {children} - - ), + normal: ({ children }: { children: React.ReactNode }) => {children}, } as BlockType, }} /> From 0dee368ecba76a6bed8f52c68d7aea6d5485c673 Mon Sep 17 00:00:00 2001 From: Fernando Lucchesi Date: Tue, 17 Oct 2023 19:34:29 +0200 Subject: [PATCH 07/10] =?UTF-8?q?=E2=9A=97=EF=B8=8F=20Experiment=20fix=20f?= =?UTF-8?q?or=20CORS=20#1935?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/securityHeaders.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/web/securityHeaders.js b/web/securityHeaders.js index 45e2963ff..67db165ce 100644 --- a/web/securityHeaders.js +++ b/web/securityHeaders.js @@ -6,16 +6,13 @@ import { dataset } from './languages.js' const isProduction = process.env.NODE_ENV === 'production' -const envs = ['dev', 'preprod', 'prod', 'test'] +const envs = ['preprod', 'prod'] const localUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:3333' : '' const globalUrl = dataset === 'global' ? 'https://equinor.sanity.studio' : '' const secretUrl = dataset === 'secret' ? 'https://equinor-restricted.sanity.studio' : '' -const studioUrlsOldCluster = envs.map((env) => `https://studio-${dataset}-energyvision-${env}.radix.equinor.com/`) -const studioUrls = envs.map((env) => `https://studio-${dataset}-equinor-web-sites-${env}.c2.radix.equinor.com/`) +const studioUrls = envs.map((env) => `https://studio-${dataset}-equinor-web-sites-${env}.c2.radix.equinor.com`) const studioV3Url = 'http://studiov3-global-development-equinor-web-sites-dev.c2.radix.equinor.com' -const xFrameUrls = [localUrl, ...studioUrlsOldCluster, ...studioUrls, studioV3Url, globalUrl, secretUrl] - .filter((e) => e) - .join(' ') +const xFrameUrls = [localUrl, ...studioUrls, studioV3Url, globalUrl, secretUrl].filter((e) => e).join(' ') const edsCdnUrl = 'https://cdn.eds.equinor.com ' const iframeSrcs = [ 'https://consentcdn.cookiebot.com', @@ -29,7 +26,7 @@ const iframeSrcs = [ 'https://vds.issgovernance.com', 'https://eac.plaii.no', 'https://livestream.com', - dataset === 'global-development' && 'https://careers.peopleclick.eu.com/', + dataset === 'global-development' && 'https://careers.peopleclick.eu.com', 'https://h61q9gi9.api.sanity.io', 'http://localhost:3333', ] From ed0eb9c8e2d3060391eaa26499a5bceb08ba8814 Mon Sep 17 00:00:00 2001 From: Fernando Lucchesi Date: Tue, 17 Oct 2023 19:43:09 +0200 Subject: [PATCH 08/10] =?UTF-8?q?=E2=9C=A8=20Improve=20errors=20and=20remo?= =?UTF-8?q?ve=20trailing=20slash=20/=20#1935?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sanityv3/resolveProductionUrl.js | 2 +- sanityv3/schemas/components/VideoSelector.tsx | 14 +++++++++----- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/sanityv3/resolveProductionUrl.js b/sanityv3/resolveProductionUrl.js index c803e33c5..fc389b760 100644 --- a/sanityv3/resolveProductionUrl.js +++ b/sanityv3/resolveProductionUrl.js @@ -9,7 +9,7 @@ const remoteUrl = () => { const env = window.location.hostname.includes('equinor-web-sites-preprod') ? 'preprod' : 'prod' switch (dataset) { case 'global': - return `https://web-equinor-web-sites-${env}.c2.radix.equinor.com/` + return `https://web-equinor-web-sites-${env}.c2.radix.equinor.com` case 'global-development': return 'https://web-global-development-equinor-web-sites-dev.c2.radix.equinor.com' case 'global-test': diff --git a/sanityv3/schemas/components/VideoSelector.tsx b/sanityv3/schemas/components/VideoSelector.tsx index 7daed95a8..cf7ebce7b 100644 --- a/sanityv3/schemas/components/VideoSelector.tsx +++ b/sanityv3/schemas/components/VideoSelector.tsx @@ -64,11 +64,15 @@ const VideoSelector = forwardRef(function VideoSelector( headers: { Authorization: `Basic ${SCREEN9_AUTH}`, }, - }).then((res) => - res.status !== 200 - ? setError(`Could not retrieve url from Screen9. Please report the error to the dev team.`) - : res.json(), - ) + }) + .then((res) => + res.status !== 200 + ? setError('Could not retrieve url from Screen9. Please report the error to the dev team.') + : res.json(), + ) + .catch((error) => { + setError(`Could not retrieve url from Screen9. Please report the error to the dev team. Error: ${error}`) + }) if (!data.error) { const video = { From f837aeee1a5c147256933c3ba0c7a6d147399eef Mon Sep 17 00:00:00 2001 From: Fernando Lucchesi Date: Thu, 19 Oct 2023 11:46:34 +0200 Subject: [PATCH 09/10] =?UTF-8?q?=F0=9F=90=9B=20Fix=20bug=20on=20GROQ=20qu?= =?UTF-8?q?ery?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- search/IndexSanityContent/magazine/sanity.ts | 4 ++-- search/IndexSanityContent/topic/sanity.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/search/IndexSanityContent/magazine/sanity.ts b/search/IndexSanityContent/magazine/sanity.ts index 9c078d3a3..8ae03f927 100644 --- a/search/IndexSanityContent/magazine/sanity.ts +++ b/search/IndexSanityContent/magazine/sanity.ts @@ -28,10 +28,10 @@ export const query = /* groq */ `*[_type == "magazine" && _lang == $lang && !(_i "textBlocks": content[_type == "textBlock"]{ "_key": _key, "title": select( - "isBigText" == true => { + isBigText == true => pt::text(bigTitle), pt::text(title) - }), + ), "ingress": pt::text(ingress), "text": pt::text(text) // TODO: Do this manually to cover all cases }, diff --git a/search/IndexSanityContent/topic/sanity.ts b/search/IndexSanityContent/topic/sanity.ts index 8280a0e80..a55a88d56 100644 --- a/search/IndexSanityContent/topic/sanity.ts +++ b/search/IndexSanityContent/topic/sanity.ts @@ -12,10 +12,10 @@ export const query = /* groq */ `*[_type match "route_" + $lang + "*" && content "textBlocks": content->content[_type == "textBlock"]{ "_key": _key, "title": select( - "isBigText" == true => { + isBigText == true => pt::text(bigTitle), pt::text(title) - }), + ), "ingress": pt::text(ingress), "text": pt::text(text) // TODO: Do this manually to cover all cases }, From f1088cf8eff16602548c7c8a5373e424e0a7aaf4 Mon Sep 17 00:00:00 2001 From: Fernando Lucchesi Date: Fri, 20 Oct 2023 13:52:00 +0200 Subject: [PATCH 10/10] =?UTF-8?q?=E2=9A=97=EF=B8=8F=20Explicity=20set=20ca?= =?UTF-8?q?che=20policy=20for=20SSR=20pages=20#1944?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/pages/magasin/index.global.tsx | 4 +++- web/pages/magazine/index.global.tsx | 4 +++- web/pages/news/index.global.tsx | 6 ++++-- web/pages/nyheter/index.global.tsx | 5 ++++- 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/web/pages/magasin/index.global.tsx b/web/pages/magasin/index.global.tsx index 9b69e1c03..905119b3b 100644 --- a/web/pages/magasin/index.global.tsx +++ b/web/pages/magasin/index.global.tsx @@ -71,12 +71,14 @@ MagazineIndexNorwegian.getLayout = (page: AppProps) => { ) } -export const getServerSideProps: GetServerSideProps = async ({ req, preview = false, locale = 'no' }) => { +export const getServerSideProps: GetServerSideProps = async ({ res, req, preview = false, locale = 'no' }) => { // For the time being, let's just give 404 for satellites // We will also return 404 if the locale is not Norwegian. // This is a hack and and we should improve this at some point // See https://github.com/vercel/next.js/discussions/18485 + res.setHeader('Cache-Control', 'private, no-cache, no-store, max-age=0, must-revalidate') + if (locale !== 'no') { return { notFound: true, diff --git a/web/pages/magazine/index.global.tsx b/web/pages/magazine/index.global.tsx index 2c66fd642..305189f83 100644 --- a/web/pages/magazine/index.global.tsx +++ b/web/pages/magazine/index.global.tsx @@ -66,12 +66,14 @@ MagazineIndex.getLayout = (page: AppProps) => { ) } -export const getServerSideProps: GetServerSideProps = async ({ req, preview = false, locale = 'en' }) => { +export const getServerSideProps: GetServerSideProps = async ({ res, req, preview = false, locale = 'en' }) => { // For the time being, let's just give 404 for satellites // We will also return 404 if the locale is not English. // This is a hack and and we should improve this at some point // See https://github.com/vercel/next.js/discussions/18485 + res.setHeader('Cache-Control', 'private, no-cache, no-store, max-age=0, must-revalidate') + if (locale !== 'en') { return { notFound: true, diff --git a/web/pages/news/index.global.tsx b/web/pages/news/index.global.tsx index 3adfe8719..472dd19a1 100644 --- a/web/pages/news/index.global.tsx +++ b/web/pages/news/index.global.tsx @@ -1,4 +1,4 @@ -import { GetServerSideProps } from 'next' +import { GetServerSideProps, GetStaticPaths } from 'next' import { InstantSearchSSRProvider } from 'react-instantsearch-hooks-web' import { getServerState } from 'react-instantsearch-hooks-server' import type { AppProps } from 'next/app' @@ -67,12 +67,14 @@ NewsRoom.getLayout = (page: AppProps) => { ) } -export const getServerSideProps: GetServerSideProps = async ({ req, preview = false, locale = 'en' }) => { +export const getServerSideProps: GetServerSideProps = async ({ res, req, preview = false, locale = 'en' }) => { // For the time being, let's just give 404 for satellites // We will also return 404 if the locale is not English. // This is a hack and and we should improve this at some point // See https://github.com/vercel/next.js/discussions/18485 + res.setHeader('Cache-Control', 'private, no-cache, no-store, max-age=0, must-revalidate') + if (locale !== 'en') { return { notFound: true, diff --git a/web/pages/nyheter/index.global.tsx b/web/pages/nyheter/index.global.tsx index 24fc2d633..44ad4a074 100644 --- a/web/pages/nyheter/index.global.tsx +++ b/web/pages/nyheter/index.global.tsx @@ -65,11 +65,14 @@ NorwegianNewsRoom.getLayout = (page: AppProps) => { ) } -export const getServerSideProps: GetServerSideProps = async ({ req, preview = false, locale = 'no' }) => { +export const getServerSideProps: GetServerSideProps = async ({ res, req, preview = false, locale = 'no' }) => { // For the time being, let's just give 404 for satellites // We will also return 404 if the locale is not Norwegian. // This is a hack, and we should improve this at some point // See https://github.com/vercel/next.js/discussions/18485 + + res.setHeader('Cache-Control', 'private, no-cache, no-store, max-age=0, must-revalidate') + if (locale !== 'no') { return { notFound: true,