From 908cf17f58baa3ce0082b0a57053a0ee8b9fbba8 Mon Sep 17 00:00:00 2001 From: Borghild Date: Mon, 21 Oct 2024 09:38:31 +0200 Subject: [PATCH 1/2] :art: add styling and structure --- sanityv3/schemas/documents/page.ts | 1 + sanityv3/schemas/index.ts | 2 + .../schemas/objects/collapsibleTextBlocks.tsx | 73 +++++++++++++++++++ web/lib/queries/common/pageContentFields.ts | 16 ++++ .../shared/SharedPageContent.tsx | 11 +++ .../CollapsibleTextBlocks.tsx | 39 ++++++++++ web/sections/CollapsibleTextBlocks/index.ts | 2 + web/types/types.ts | 10 +++ 8 files changed, 154 insertions(+) create mode 100644 sanityv3/schemas/objects/collapsibleTextBlocks.tsx create mode 100644 web/sections/CollapsibleTextBlocks/CollapsibleTextBlocks.tsx create mode 100644 web/sections/CollapsibleTextBlocks/index.ts diff --git a/sanityv3/schemas/documents/page.ts b/sanityv3/schemas/documents/page.ts index 872c0fc1c..ea2a18866 100644 --- a/sanityv3/schemas/documents/page.ts +++ b/sanityv3/schemas/documents/page.ts @@ -82,6 +82,7 @@ export default { Flags.HAS_TWITTER_FEED && { type: 'twitterEmbed' }, { type: 'cookieDeclaration' }, { type: 'anchorLinkList' }, + { type: 'collapsibleTextBlocks' }, ].filter((e) => e), }, ].filter((e) => e), diff --git a/sanityv3/schemas/index.ts b/sanityv3/schemas/index.ts index 2802dcee1..9d7ef559a 100644 --- a/sanityv3/schemas/index.ts +++ b/sanityv3/schemas/index.ts @@ -81,6 +81,7 @@ import gridColorTheme from './objects/grid/theme' import transcript from './objects/transcript' import anchorLinkList from './objects/anchorLinkList/anchorLinkList' import anchorLinkReference from './objects/anchorLinkList/anchorLinkReference' +import collapsibleTextBlocks from './objects/collapsibleTextBlocks' const { pageNotFound, @@ -208,6 +209,7 @@ const RemainingSchemas = [ transcript, anchorLinkList, anchorLinkReference, + collapsibleTextBlocks, ] // Then we give our schema to the builder and provide the result to Sanity diff --git a/sanityv3/schemas/objects/collapsibleTextBlocks.tsx b/sanityv3/schemas/objects/collapsibleTextBlocks.tsx new file mode 100644 index 000000000..f2fef0f5d --- /dev/null +++ b/sanityv3/schemas/objects/collapsibleTextBlocks.tsx @@ -0,0 +1,73 @@ +import { view_module } from '@equinor/eds-icons' +import blocksToText from '../../helpers/blocksToText' +import { EdsIcon } from '../../icons' +import { SchemaType } from '../../types' +import { configureBlockContent } from '../editors' + +const blockContentType = configureBlockContent({ + h2: false, + h3: true, + h4: true, + attachment: false, +}) + +export default { + type: 'object', + name: 'collapsibleTextBlocks', + title: 'Collapsible text blocks', + fieldsets: [ + { + name: 'design', + title: 'Design options', + }, + ], + fields: [ + { + type: 'array', + name: 'blockGroup', + title: 'List of text block', + of: [ + { + name: 'textBlock', + title: 'Text block', + type: 'object', + fields: [ + { + name: 'title', + title: 'Title heading', + type: 'string', + description: + 'Heading that will stay sticky until side content is scrolled by and collapse when scrolled past', + }, + { + name: 'content', + title: 'Text content', + type: 'array', + of: [blockContentType], + }, + ], + }, + ], + validation: (Rule: SchemaType.ValidationRule) => Rule.required(), + }, + { + title: 'Background', + description: 'Pick a colour for the background. Default is white.', + name: 'background', + type: 'colorlist', + fieldset: 'design', + }, + ], + preview: { + select: { + group: 'blockGroup', + }, + prepare({ group }: any) { + return { + title: 'Collapsible and sticky textblocks', + subtitle: `${group ? group.length : 0} textblocks`, + media:
{EdsIcon(view_module)}
, + } + }, + }, +} diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts index ed64e5d22..445682f94 100644 --- a/web/lib/queries/common/pageContentFields.ts +++ b/web/lib/queries/common/pageContentFields.ts @@ -591,6 +591,22 @@ _type == "keyNumbers" =>{ anchorReference, } }, + _type == "collapsibleTextBlocks"=>{ + "type": _type, + "id": _key, + "group": blockGroup[]{ + "id": _key, + title, + content[]{ + ..., + ${markDefs}, + } + }, + + "designOptions": { + ${background}, + }, + }, ` export default pageContentFields diff --git a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx index 52d37f901..47de765c6 100644 --- a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx +++ b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx @@ -53,6 +53,7 @@ import { CampaignBannerData, DesignOptions, AnchorLinkListData, + CollapsibleTextBlocksData, } from '../../../types/index' import { getColorForTheme } from '../../shared/textTeaser/theme' import Grid from '@sections/Grid/Grid' @@ -61,6 +62,7 @@ import { BackgroundContainerProps } from '@components/Backgrounds' import VideoPlayerCarousel from '@sections/VideoPlayerCarousel/VideoPlayerCarousel' import ImageCarousel from '@sections/ImageCarousel/ImageCarousel' import { AnchorLinkList } from '@sections/AnchorLinkList' +import { CollapsibleTextBlocks } from '@sections/CollapsibleTextBlocks' type DefaultComponent = { id?: string @@ -350,6 +352,15 @@ export const PageContent = ({ data, titleBackground }: PageContentProps) => { className={topSpacingClassName} /> ) + case 'collapsibleTextBlocks': + return ( + + ) default: return null } diff --git a/web/sections/CollapsibleTextBlocks/CollapsibleTextBlocks.tsx b/web/sections/CollapsibleTextBlocks/CollapsibleTextBlocks.tsx new file mode 100644 index 000000000..b5e1031ef --- /dev/null +++ b/web/sections/CollapsibleTextBlocks/CollapsibleTextBlocks.tsx @@ -0,0 +1,39 @@ +import { BackgroundContainer } from '@components/Backgrounds' +import { Typography } from '@core/Typography' +import Blocks from '../../pageComponents/shared/portableText/Blocks' +import { twMerge } from 'tailwind-merge' +import { PortableTextBlock } from '@portabletext/types' +import { CollapsibleTextBlocksData } from '../../types/types' + +export type CollapsibleTextBlocksProps = { + data: CollapsibleTextBlocksData + anchor?: string + className?: string +} +const CollapsibleTextBlocks = ({ data, anchor, className }: CollapsibleTextBlocksProps) => { + const { group, designOptions } = data + return ( + + {group?.length > 0 && + group?.map((textBlock: { id: string; title?: string; content: PortableTextBlock[] }) => { + return ( +
+ {textBlock?.title && ( + + {textBlock.title} + + )} +
+ {textBlock?.content && } +
+
+ ) + })} + + ) +} + +export default CollapsibleTextBlocks diff --git a/web/sections/CollapsibleTextBlocks/index.ts b/web/sections/CollapsibleTextBlocks/index.ts new file mode 100644 index 000000000..aa373545a --- /dev/null +++ b/web/sections/CollapsibleTextBlocks/index.ts @@ -0,0 +1,2 @@ +//"use client"; +export { default as CollapsibleTextBlocks, type CollapsibleTextBlocksProps } from './CollapsibleTextBlocks' diff --git a/web/types/types.ts b/web/types/types.ts index 913195af2..9d1850011 100644 --- a/web/types/types.ts +++ b/web/types/types.ts @@ -466,3 +466,13 @@ export type AnchorLinkListData = { anchorReference?: string }[] } +export type CollapsibleTextBlocksData = { + type: string + id: string + group: { + id: string + title?: string + content: PortableTextBlock[] + }[] + designOptions: DesignOptions +} From 11885b6cf418cf5da3da1958db6af957682569a0 Mon Sep 17 00:00:00 2001 From: Borghild Date: Mon, 21 Oct 2024 09:53:02 +0200 Subject: [PATCH 2/2] :art: rename more proper --- sanityv3/schemas/documents/page.ts | 2 +- sanityv3/schemas/index.ts | 4 ++-- ...{collapsibleTextBlocks.tsx => stickyTextBlocks.tsx} | 10 ++++------ web/lib/queries/common/pageContentFields.ts | 2 +- .../pageTemplates/shared/SharedPageContent.tsx | 10 +++++----- web/sections/CollapsibleTextBlocks/index.ts | 2 -- .../StickyTextBlocks.tsx} | 10 +++++----- web/sections/StickyTextBlocks/index.ts | 2 ++ web/types/types.ts | 2 +- 9 files changed, 21 insertions(+), 23 deletions(-) rename sanityv3/schemas/objects/{collapsibleTextBlocks.tsx => stickyTextBlocks.tsx} (82%) delete mode 100644 web/sections/CollapsibleTextBlocks/index.ts rename web/sections/{CollapsibleTextBlocks/CollapsibleTextBlocks.tsx => StickyTextBlocks/StickyTextBlocks.tsx} (82%) create mode 100644 web/sections/StickyTextBlocks/index.ts diff --git a/sanityv3/schemas/documents/page.ts b/sanityv3/schemas/documents/page.ts index ea2a18866..c8d6a808a 100644 --- a/sanityv3/schemas/documents/page.ts +++ b/sanityv3/schemas/documents/page.ts @@ -82,7 +82,7 @@ export default { Flags.HAS_TWITTER_FEED && { type: 'twitterEmbed' }, { type: 'cookieDeclaration' }, { type: 'anchorLinkList' }, - { type: 'collapsibleTextBlocks' }, + { type: 'stickyTextBlocks' }, ].filter((e) => e), }, ].filter((e) => e), diff --git a/sanityv3/schemas/index.ts b/sanityv3/schemas/index.ts index 9d7ef559a..6082df7a9 100644 --- a/sanityv3/schemas/index.ts +++ b/sanityv3/schemas/index.ts @@ -81,7 +81,7 @@ import gridColorTheme from './objects/grid/theme' import transcript from './objects/transcript' import anchorLinkList from './objects/anchorLinkList/anchorLinkList' import anchorLinkReference from './objects/anchorLinkList/anchorLinkReference' -import collapsibleTextBlocks from './objects/collapsibleTextBlocks' +import stickyTextBlocks from './objects/stickyTextBlocks' const { pageNotFound, @@ -209,7 +209,7 @@ const RemainingSchemas = [ transcript, anchorLinkList, anchorLinkReference, - collapsibleTextBlocks, + stickyTextBlocks, ] // Then we give our schema to the builder and provide the result to Sanity diff --git a/sanityv3/schemas/objects/collapsibleTextBlocks.tsx b/sanityv3/schemas/objects/stickyTextBlocks.tsx similarity index 82% rename from sanityv3/schemas/objects/collapsibleTextBlocks.tsx rename to sanityv3/schemas/objects/stickyTextBlocks.tsx index f2fef0f5d..0f52337c4 100644 --- a/sanityv3/schemas/objects/collapsibleTextBlocks.tsx +++ b/sanityv3/schemas/objects/stickyTextBlocks.tsx @@ -1,5 +1,4 @@ import { view_module } from '@equinor/eds-icons' -import blocksToText from '../../helpers/blocksToText' import { EdsIcon } from '../../icons' import { SchemaType } from '../../types' import { configureBlockContent } from '../editors' @@ -13,8 +12,8 @@ const blockContentType = configureBlockContent({ export default { type: 'object', - name: 'collapsibleTextBlocks', - title: 'Collapsible text blocks', + name: 'stickyTextBlocks', + title: 'Sticky text blocks', fieldsets: [ { name: 'design', @@ -36,8 +35,7 @@ export default { name: 'title', title: 'Title heading', type: 'string', - description: - 'Heading that will stay sticky until side content is scrolled by and collapse when scrolled past', + description: 'Heading that will stay sticky until side content is scrolled by', }, { name: 'content', @@ -64,7 +62,7 @@ export default { }, prepare({ group }: any) { return { - title: 'Collapsible and sticky textblocks', + title: 'Sticky textblocks', subtitle: `${group ? group.length : 0} textblocks`, media:
{EdsIcon(view_module)}
, } diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts index 445682f94..2c2bcd03d 100644 --- a/web/lib/queries/common/pageContentFields.ts +++ b/web/lib/queries/common/pageContentFields.ts @@ -591,7 +591,7 @@ _type == "keyNumbers" =>{ anchorReference, } }, - _type == "collapsibleTextBlocks"=>{ + _type == "stickyTextBlocks"=>{ "type": _type, "id": _key, "group": blockGroup[]{ diff --git a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx index 47de765c6..bdd722d81 100644 --- a/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx +++ b/web/pageComponents/pageTemplates/shared/SharedPageContent.tsx @@ -53,7 +53,7 @@ import { CampaignBannerData, DesignOptions, AnchorLinkListData, - CollapsibleTextBlocksData, + StickyTextBlocksData, } from '../../../types/index' import { getColorForTheme } from '../../shared/textTeaser/theme' import Grid from '@sections/Grid/Grid' @@ -62,7 +62,7 @@ import { BackgroundContainerProps } from '@components/Backgrounds' import VideoPlayerCarousel from '@sections/VideoPlayerCarousel/VideoPlayerCarousel' import ImageCarousel from '@sections/ImageCarousel/ImageCarousel' import { AnchorLinkList } from '@sections/AnchorLinkList' -import { CollapsibleTextBlocks } from '@sections/CollapsibleTextBlocks' +import { StickyTextBlocks } from '@sections/StickyTextBlocks' type DefaultComponent = { id?: string @@ -352,11 +352,11 @@ export const PageContent = ({ data, titleBackground }: PageContentProps) => { className={topSpacingClassName} /> ) - case 'collapsibleTextBlocks': + case 'stickyTextBlocks': return ( - diff --git a/web/sections/CollapsibleTextBlocks/index.ts b/web/sections/CollapsibleTextBlocks/index.ts deleted file mode 100644 index aa373545a..000000000 --- a/web/sections/CollapsibleTextBlocks/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -//"use client"; -export { default as CollapsibleTextBlocks, type CollapsibleTextBlocksProps } from './CollapsibleTextBlocks' diff --git a/web/sections/CollapsibleTextBlocks/CollapsibleTextBlocks.tsx b/web/sections/StickyTextBlocks/StickyTextBlocks.tsx similarity index 82% rename from web/sections/CollapsibleTextBlocks/CollapsibleTextBlocks.tsx rename to web/sections/StickyTextBlocks/StickyTextBlocks.tsx index b5e1031ef..161124f6b 100644 --- a/web/sections/CollapsibleTextBlocks/CollapsibleTextBlocks.tsx +++ b/web/sections/StickyTextBlocks/StickyTextBlocks.tsx @@ -3,14 +3,14 @@ import { Typography } from '@core/Typography' import Blocks from '../../pageComponents/shared/portableText/Blocks' import { twMerge } from 'tailwind-merge' import { PortableTextBlock } from '@portabletext/types' -import { CollapsibleTextBlocksData } from '../../types/types' +import { StickyTextBlocksData } from '../../types/types' -export type CollapsibleTextBlocksProps = { - data: CollapsibleTextBlocksData +export type StickyTextBlocksProps = { + data: StickyTextBlocksData anchor?: string className?: string } -const CollapsibleTextBlocks = ({ data, anchor, className }: CollapsibleTextBlocksProps) => { +const StickyTextBlocks = ({ data, anchor, className }: StickyTextBlocksProps) => { const { group, designOptions } = data return ( @@ -36,4 +36,4 @@ const CollapsibleTextBlocks = ({ data, anchor, className }: CollapsibleTextBlock ) } -export default CollapsibleTextBlocks +export default StickyTextBlocks diff --git a/web/sections/StickyTextBlocks/index.ts b/web/sections/StickyTextBlocks/index.ts new file mode 100644 index 000000000..a543fbca3 --- /dev/null +++ b/web/sections/StickyTextBlocks/index.ts @@ -0,0 +1,2 @@ +//"use client"; +export { default as StickyTextBlocks, type StickyTextBlocksProps } from './StickyTextBlocks' diff --git a/web/types/types.ts b/web/types/types.ts index 9d1850011..4d902bf25 100644 --- a/web/types/types.ts +++ b/web/types/types.ts @@ -466,7 +466,7 @@ export type AnchorLinkListData = { anchorReference?: string }[] } -export type CollapsibleTextBlocksData = { +export type StickyTextBlocksData = { type: string id: string group: {