🎨 add card compoent to sanity (#2178)

* 🎨 add card compoent to sanity

* 🎨 update

* 🎨 fix comments from review

* 🎨 update margin bottom for h3 in the article prose

Author: BorghildSelle

sanityv3/schemas/documents/page.ts

@@ -50,6 +50,7 @@ export default {
       of: [
         { type: 'textBlock' },
         { type: 'teaser' },
+        { type: 'cardsList' },
         { type: 'figure' },
         { type: 'fullWidthImage' },
         { type: 'pullQuote', initialValue: { background: defaultColors[0] } },

sanityv3/schemas/editors/blockContentType.tsx

@@ -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'
@@ -25,6 +25,7 @@ export type BlockContentProps = {
     value: 'normal'
     component?: ({ children }: { children: React.ReactNode }) => JSX.Element
   }
+  extendedStyles?: BlockStyleDefinition[]
 }
 
 export const textColorConfig = {
@@ -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' },
@@ -116,7 +118,6 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockDef
     value: 'smallText',
     component: SmallTextRender,
   }
-
   const externalLinkConfig = {
     name: 'link',
     type: 'object',

sanityv3/schemas/index.js

@@ -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'
 
 const routeSchemas = languages.map(({ name, title }) => {
   return route(name, title)
@@ -174,6 +176,8 @@ const RemainingSchemas = [
   keyNumbers,
   keyNumberItem,
   keyValue,
+  card,
+  cardsList,
 ]
 
 // Then we give our schema to the builder and provide the result to Sanity

sanityv3/schemas/objects/card.tsx

@@ -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) || '',
+      }
+    },
+  },
+}

sanityv3/schemas/objects/cardsList.tsx

@@ -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),
+      }
+    },
+  },
+}

web/core/Heading.tsx

@@ -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}
+    />
+  )
+}