-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'bose/2172' into staging
- Loading branch information
Showing
19 changed files
with
983 additions
and
2,772 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) || '', | ||
} | ||
}, | ||
}, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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), | ||
} | ||
}, | ||
}, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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} | ||
/> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 } |
Oops, something went wrong.