Skip to content

Commit

Permalink
Merge branch 'bose/2172' into staging
Browse files Browse the repository at this point in the history
  • Loading branch information
BorghildSelle committed Mar 13, 2024
2 parents b839f3b + d526d3f commit 3f9d476
Show file tree
Hide file tree
Showing 19 changed files with 983 additions and 2,772 deletions.
1 change: 1 addition & 0 deletions sanityv3/schemas/documents/page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export default {
of: [
{ type: 'textBlock' },
{ type: 'teaser' },
{ type: 'cardsList' },
{ type: 'figure' },
{ type: 'fullWidthImage' },
{ type: 'pullQuote', initialValue: { background: defaultColors[0] } },
Expand Down
7 changes: 4 additions & 3 deletions sanityv3/schemas/editors/blockContentType.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { attach_file, external_link, format_color_text, link } from '@equinor/eds-icons'
import type { BlockDefinition, Rule, ValidationContext } from 'sanity'
import type { BlockDefinition, BlockStyleDefinition, Rule, ValidationContext } from 'sanity'
import { filterByPages, filterByPagesInOtherLanguages } from '../../helpers/referenceFilters'
import { EdsBlockEditorIcon, EdsIcon, IconSubScript, IconSuperScript } from '../../icons'
import { Flags } from '../../src/lib/datasetHelpers'
Expand All @@ -25,6 +25,7 @@ export type BlockContentProps = {
value: 'normal'
component?: ({ children }: { children: React.ReactNode }) => JSX.Element
}
extendedStyles?: BlockStyleDefinition[]
}

export const textColorConfig = {
Expand Down Expand Up @@ -71,13 +72,14 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockDef
lists = true,
smallText = true,
highlight = false,
extendedStyles = [],
normalTextOverride = { title: 'Normal', value: 'normal' },
} = options

const config: BlockDefinition = {
type: 'block',
name: 'block',
styles: [normalTextOverride],
styles: [normalTextOverride, ...extendedStyles],
lists: lists
? [
{ title: 'Numbered', value: 'number' },
Expand Down Expand Up @@ -116,7 +118,6 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockDef
value: 'smallText',
component: SmallTextRender,
}

const externalLinkConfig = {
name: 'link',
type: 'object',
Expand Down
5 changes: 5 additions & 0 deletions sanityv3/schemas/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,8 @@ import themeList from './objects/themeList'
import keyNumbers from './objects/keyNumbers'
import keyNumberItem from './objects/keyNumberItem'
import keyValue from './objects/keyValue'
import card from './objects/card'
import cardsList from './objects/cardsList'
import background from './objects/background/background'
import imageBackground from './objects/background/imageBackground'

Expand Down Expand Up @@ -176,6 +178,9 @@ const RemainingSchemas = [
keyNumbers,
keyNumberItem,
keyValue,
card,
cardsList,
keyValue,
background,
imageBackground,
]
Expand Down
76 changes: 76 additions & 0 deletions sanityv3/schemas/objects/card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
/* eslint-disable react/display-name */
import { forwardRef } from 'react'
import { configureBlockContent } from '../editors'
import type { PortableTextBlock } from 'sanity'
import { Stack, Text, Card } from '@sanity/ui'
import blocksToText from '../../helpers/blocksToText'

const CardField = forwardRef((props: any, ref) => {
return (
<Stack>
<Card padding={3} borderLeft>
<Text muted size={2} align={'left'}>
If only title are used it will render only title as statement. If content below are used, both title and
content will be rendered.
</Text>
</Card>
<>{props.renderDefault(props)}</>
</Stack>
)
})

const blockConfig = {
h2: false,
h3: false,
h4: false,
internalLink: false,
externalLink: false,
attachment: false,
lists: true,
}

const blockContentType = configureBlockContent({ ...blockConfig })

export type Card = {
_type: 'card'
title?: PortableTextBlock[]
content?: PortableTextBlock[]
}

export default {
name: 'card',
title: 'Card',
description: `If only title are used it will render as big title statement.
If content below are used, they will have regular heading and paragraph styling`,
type: 'object',
localize: true,
components: {
input: CardField,
},
fields: [
{
name: 'title',
type: 'text',
},
{
name: 'content',
type: 'array',
title: 'Content',
description: 'Optional',
of: [blockContentType],
},
],
preview: {
select: {
title: 'title',
text: 'content',
},
prepare({ title, text }: { title: PortableTextBlock[]; text: PortableTextBlock[] }) {
const plainTitle = blocksToText(title)
return {
title: plainTitle || 'Missing title',
subtitle: blocksToText(text) || '',
}
},
},
}
85 changes: 85 additions & 0 deletions sanityv3/schemas/objects/cardsList.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
/* eslint-disable react/display-name */
import { grid_on } from '@equinor/eds-icons'
import { configureTitleBlockContent } from '../editors'
import CompactBlockEditor from '../components/CompactBlockEditor'
import type { PortableTextBlock } from 'sanity'
import blocksToText from '../../helpers/blocksToText'
import { EdsIcon } from '../../icons'
import { Card } from './card'
import { ColorSelectorValue } from '../components/ColorSelector'
import { defaultColors } from '../defaultColors'

const titleContentType = configureTitleBlockContent()

export type CardsList = {
_type: 'cardsList'
title?: PortableTextBlock[]
cards?: Card[]
background?: ColorSelectorValue
}

export default {
name: 'cardsList',
title: 'List of cards',
type: 'object',
localize: true,
fieldsets: [
{
title: 'Design options',
name: 'design',
options: {
collapsible: true,
collapsed: true,
},
},
{
title: 'List of cards',
name: 'listOfCards',
options: {
collapsible: true,
collapsed: true,
},
},
],
fields: [
{
name: 'title',
type: 'array',
title: 'Title for the list of cards',
components: {
input: CompactBlockEditor,
},
of: [titleContentType],
},
{
title: 'Cards',
fieldset: 'listOfCards',
description: `On mobile cards will be rendered in 1 column. For larger screens;
if 2 or 4 cards - 2 columns else if 3 or more than 4 cards - 3 columns. `,
name: 'cards',
type: 'array',
of: [{ type: 'card' }],
},
{
title: 'The background color on the cards',
description: 'List title will be on default background. Default is White',
name: 'background',
type: 'colorlist',
fieldset: 'design',
initialValue: defaultColors[6],
},
],
preview: {
select: {
title: 'title',
},
prepare({ title }: { title: PortableTextBlock[] }) {
const plainTitle = blocksToText(title)
return {
title: plainTitle || 'Missing title',
subtitle: 'Cardslist component',
media: EdsIcon(grid_on),
}
},
},
}
66 changes: 66 additions & 0 deletions web/core/Typography/Heading.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { PortableText, PortableTextProps } from '@portabletext/react'
import type { PortableTextBlock } from '@portabletext/types'
import { Typography, TypographyProps } from './Typography'
import isEmpty from '../../pageComponents/shared/portableText/helpers/isEmpty'
import { Highlight } from '../../pageComponents/shared/portableText/components'

export type HeadingProps = PortableTextProps & TypographyProps

const defaultComponents = ({ variant, as: providedAs, className }: TypographyProps) => {
return {
block: {
h1: ({ children }: PortableTextBlock) => {
return (
<Typography variant="h1" className={className}>
<>{children}</>
</Typography>
)
},
h2: ({ children }: PortableTextBlock) => {
return (
<Typography variant="h2" className={className}>
<>{children}</>
</Typography>
)
},
h3: ({ children }: PortableTextBlock) => {
return (
<Typography variant="h3" className={className}>
<>{children}</>
</Typography>
)
},
extraLarge: ({ children }: PortableTextBlock) => {
return (
<Typography variant="5xl" as={providedAs} className={className}>
<>{children}</>
</Typography>
)
},
normal: ({ children }: PortableTextBlock) => {
if (isEmpty(children)) return null
return (
<Typography variant={variant} as={providedAs} className={className}>
<>{children}</>
</Typography>
)
},
},
marks: { highlight: Highlight },
}
}

/**
* Component to use with portabletext headings
*/
export const Heading = ({ value, components = {}, variant, group, as, className, ...props }: HeadingProps) => {
return (
<PortableText
value={value}
// eslint-disable-next-line
// @ts-ignore
components={{ ...defaultComponents({ variant, group, as, className }), ...components }}
{...props}
/>
)
}
72 changes: 72 additions & 0 deletions web/core/Typography/Paragraph.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import { PortableText } from '@portabletext/react'
import type { PortableTextBlock } from '@portabletext/types'
import { Typography, TypographyProps } from './Typography'
import isEmpty from '../../pageComponents/shared/portableText/helpers/isEmpty'
import { Highlight } from '../../pageComponents/shared/portableText/components'
import { twMerge } from 'tailwind-merge'

const defaultComponents = ({ className }: TypographyProps) => {
return {
block: {
normal: ({ children }: PortableTextBlock) => {
if (isEmpty(children)) return null
return (
<Typography variant="body" className={className}>
<>{children}</>
</Typography>
)
},
},
marks: { highlight: Highlight },
}
}

export type ParagraphProps = {
value: PortableTextBlock[]
className?: string
componentsClassName?: string
dark?: boolean
}

/**
* Component to use with portabletext paragraphs
*/
const Paragraph = ({ value, className, componentsClassName }: ParagraphProps) => {
let div: PortableTextBlock[] = []
return (
<>
{value.map((block, i, blocks) => {
// Normal text blocks (p, etc.) — these are grouped so we can wrap them in a prose div
if (block._type === 'block') {
div.push(block)

// If the next block is also text, group it with this one
if (blocks[i + 1]?._type === 'block') return null

// Otherwise, render the group of text blocks we have
const value = div
div = []

return (
<div key={block._key} className={twMerge(`prose dark:prose-invert`, className)}>
<PortableText
value={value}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
components={{
...defaultComponents({ className: componentsClassName }),
}}
/>
</div>
)
} else {
// other than block type — note that these can recursively render text
// blocks again
return <PortableText key={block._key} value={block} />
}
})}
</>
)
}

export { Paragraph }
Loading

0 comments on commit 3f9d476

Please sign in to comment.