Merge branch 'main' into padms/2010

equinor · Jan 25, 2024 · 24dae91 · 24dae91
2 parents f8efe68 + dd390f7
commit 24dae91
Show file tree

Hide file tree

Showing 35 changed files with 868 additions and 244 deletions.
diff --git a/.github/workflows/DEV-studio-v3.yml b/.github/workflows/DEV-studio-v3.yml
@@ -9,6 +9,7 @@ on:
       - './FeatureFlags.js'
       - '!./README.md'
       - '!./.env.development.template'
+      - '!./sanityv3/scripts/**/*'
 permissions:
   id-token: write
   packages: write
@@ -37,11 +38,10 @@ jobs:
         run: |
           pnpm install
           pnpm sanityv3 install
-      # @TODO: Enable ESlint for v3
-      # - name: Run ESLint 🔎
-      #   id: lint
-      #   run: |
-      #     pnpm lint:studio
+      - name: Run ESLint 🔎
+        id: lint
+        run: |
+          pnpm lint:sanityv3
       - uses: act10ns/slack@v1
         with:
           status: ${{ job.status }}
@@ -133,4 +133,4 @@ jobs:
         with:
           status: ${{ job.status }}
           steps: ${{ toJson(steps) }}
-        if: failure()
+        if: failure()
diff --git a/.github/workflows/PREPROD-studios-v3.yaml b/.github/workflows/PREPROD-studios-v3.yaml
@@ -9,6 +9,7 @@ on:
       - './FeatureFlags.js'
       - '!./README.md'
       - '!./.env.development.template'
+      - '!./sanityv3/scripts/**/*'
 permissions:
   id-token: write
   packages: write

diff --git a/sanityv3/package.json b/sanityv3/package.json
@@ -47,6 +47,7 @@
     "@types/react-dom": "^18.0.5",
     "@types/styled-components": "^5.1.26",
     "eslint": "^8.6.0",
+    "nanoid": "^5.0.4",
     "prettier": "^2.8.3",
     "typescript": "^4.0.0"
   }

diff --git a/sanityv3/pnpm-lock.yaml b/sanityv3/pnpm-lock.yaml
diff --git a/sanityv3/schemas/documents/page.ts b/sanityv3/schemas/documents/page.ts
@@ -6,9 +6,7 @@ import { HeroTypes } from '../HeroTypes'
 import sharedHeroFields from './header/sharedHeaderFields'
 import { EdsIcon } from '../../icons'
 import { paste } from '@equinor/eds-icons'
-// import { done } from '@equinor/eds-icons'
 
-// export default ({ topicPrefix, title }: { topicPrefix: Topics; title: string }) => {
 export default {
   type: 'document',
   name: 'page',
@@ -52,27 +50,28 @@ export default {
       of: [
         { type: 'textBlock' },
         { type: 'teaser' },
-        { type: 'textTeaser' },
-        { type: 'fullWidthImage' },
-        { type: 'fullWidthVideo' },
         { type: 'figure' },
-        { type: 'textWithIconArray' },
+        { type: 'fullWidthImage' },
         { type: 'pullQuote', initialValue: { background: defaultColors[0] } },
         { type: 'accordion' },
         { type: 'promoTileArray' },
-        { type: 'promotion' },
-        { type: 'table' },
-        { type: 'stockValuesApi' },
         { type: 'iframe' },
-        { type: 'cookieDeclaration' },
-        Flags.HAS_FORMS && { type: 'form' },
-        Flags.HAS_NEWS && { type: 'newsList' },
-        Flags.HAS_TWITTER_FEED && { type: 'twitterEmbed' },
+        { type: 'fullWidthVideo' },
+        { type: 'textWithIconArray' },
+        { type: 'keyNumbers' },
+        { type: 'textTeaser' },
+        { type: 'promotion' },
         { type: 'anchorLink' },
         { type: 'imageCarousel' },
         { type: 'iframeCarousel' },
         { type: 'videoPlayer' },
         { type: 'videoPlayerCarousel' },
+        { type: 'table' },
+        Flags.HAS_FORMS && { type: 'form' },
+        Flags.HAS_NEWS && { type: 'newsList' },
+        { type: 'stockValuesApi' },
+        Flags.HAS_TWITTER_FEED && { type: 'twitterEmbed' },
+        { type: 'cookieDeclaration' },
       ].filter((e) => e),
     },
   ].filter((e) => e),

diff --git a/sanityv3/schemas/editors/blockContentType.tsx b/sanityv3/schemas/editors/blockContentType.tsx
@@ -1,4 +1,4 @@
-import { attach_file, external_link, link } from '@equinor/eds-icons'
+import { attach_file, external_link, format_color_text, link } from '@equinor/eds-icons'
 import type { BlockDefinition, Rule, ValidationContext } from 'sanity'
 import { filterByPages, filterByPagesInOtherLanguages } from '../../helpers/referenceFilters'
 import { EdsBlockEditorIcon, EdsIcon, IconSubScript, IconSuperScript } from '../../icons'
@@ -16,12 +16,23 @@ export type BlockContentProps = {
   attachment?: boolean
   lists?: boolean
   smallText?: boolean
+  highlight?: boolean
   normalTextOverride?: {
     title: string
     value: 'normal'
     component?: ({ children }: { children: React.ReactNode }) => JSX.Element
   }
 }
+
+export const textColorConfig = {
+  title: 'Highlight',
+  value: 'highlight',
+  icon: EdsBlockEditorIcon(format_color_text),
+  component: ({ children }: { children: React.ReactNode }) => {
+    return <span style={{ color: 'hsl(348, 100%, 54%)' }}>{children}</span>
+  },
+}
+
 const SmallTextRender = (props: any) => {
   const { children } = props
   return <span style={{ fontSize: '0.8rem' }}>{children}</span>
@@ -38,6 +49,7 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockDef
     attachment = false,
     lists = true,
     smallText = true,
+    highlight = false,
     normalTextOverride = { title: 'Normal', value: 'normal' },
   } = options
 
@@ -238,6 +250,10 @@ export const configureBlockContent = (options: BlockContentProps = {}): BlockDef
     config?.marks?.annotations?.push(attachmentConfig)
   }
 
+  if (highlight) {
+    config.marks?.decorators?.push(textColorConfig)
+  }
+
   return config
 }
 

diff --git a/sanityv3/schemas/editors/titleEditorContentType.tsx b/sanityv3/schemas/editors/titleEditorContentType.tsx
@@ -3,7 +3,6 @@ import { IconSuperScript, IconSubScript, EdsBlockEditorIcon } from '../../icons'
 import { StrikethroughIcon } from '@sanity/icons'
 import { BlockDefinition, BlockStyleDefinition } from 'sanity'
 import { format_color_text } from '@equinor/eds-icons'
-import React from 'react'
 
 export type TitleContentProps = {
   styles?: BlockStyleDefinition[]

diff --git a/sanityv3/schemas/index.js b/sanityv3/schemas/index.js
@@ -69,6 +69,7 @@ import simpleMenuGroup from './objects/simpleMenuGroup'
 import simpleMenuLink from './objects/simpleMenuLink'
 import stockValuesApi from './objects/stockValuesApi'
 import table from './objects/table'
+import tableRichText from './objects/table/tableRichText'
 import teaser from './objects/teaser'
 import textTeaser from './objects/textTeaser'
 import textBlock from './objects/textBlock'
@@ -145,6 +146,7 @@ const RemainingSchemas = [
   promotePeople,
   contactList,
   table,
+  tableRichText,
   assetFile,
   assetTag,
   cookieDeclaration,

diff --git a/sanityv3/schemas/objects/colorList.tsx b/sanityv3/schemas/objects/colorList.tsx
@@ -1,6 +1,11 @@
 import { ColorSelector, defaultColors } from '../components/ColorSelector'
 import { defineType, defineField } from 'sanity'
 
+export type ColorType = {
+  title: string
+  value: string
+}
+
 export default defineType({
   name: 'colorlist',
   title: 'Color',

diff --git a/sanityv3/schemas/objects/fullWidthImage.tsx b/sanityv3/schemas/objects/fullWidthImage.tsx
@@ -17,6 +17,20 @@ export default {
       type: 'imageWithAltAndCaption',
       validation: (Rule: Rule) => Rule.required(),
     },
+    {
+      name: 'aspectRatio',
+      type: 'number',
+      title: 'Aspect ratio',
+      options: {
+        list: [
+          { title: '10:3', value: 0.3 },
+          { title: '2:1', value: 0.5 },
+        ],
+        layout: 'dropdown',
+      },
+      initialValue: 0.3,
+      validation: (Rule: Rule) => Rule.required(),
+    },
   ],
   preview: {
     select: {

diff --git a/sanityv3/schemas/objects/promotion/promoteTopic.tsx b/sanityv3/schemas/objects/promotion/promoteTopic.tsx
@@ -62,7 +62,7 @@ export default {
               description: 'A short and catchy introduction text for this topic content card (max. 215 chars)',
               type: 'array',
               of: [introBlockContentType],
-              validation: (Rule: Rule) => Rule.custom((value: any) => validateCharCounterEditor(value, 215)),
+              validation: (Rule: Rule) => Rule.custom((value: any) => validateCharCounterEditor(value, 215, true)),
             },
           ],
           preview: {

diff --git a/sanityv3/schemas/objects/table.tsx → sanityv3/schemas/objects/table/index.tsx b/sanityv3/schemas/objects/table.tsx → sanityv3/schemas/objects/table/index.tsx
@@ -1,22 +1,39 @@
-import blocksToText from '../../helpers/blocksToText'
-import { defaultColors } from '../components/ColorSelector'
-import CompactBlockEditor from '../components/CompactBlockEditor'
-import { configureBlockContent, configureTitleBlockContent } from '../editors'
+import blocksToText from '../../../helpers/blocksToText'
+import { defaultColors } from '../../components/ColorSelector'
+import CompactBlockEditor from '../../components/CompactBlockEditor'
+import { configureBlockContent, configureTitleBlockContent } from '../../editors'
 
-import { PortableTextBlock, Rule } from 'sanity'
-import type { ColorSelectorValue } from '../components/ColorSelector'
-import { EdsIcon } from '../../icons'
+import { PortableTextBlock, Rule, ValidationContext } from 'sanity'
+import type { ColorSelectorValue } from '../../components/ColorSelector'
+import { EdsIcon } from '../../../icons'
 import { table_chart } from '@equinor/eds-icons'
+import { ColorType } from '../colorList'
 
 export type Table = {
-  _type: 'promotion'
+  _type: 'table'
   title?: PortableTextBlock[]
   ingress?: PortableTextBlock[]
   background?: ColorSelectorValue
+  theme?: ColorType
 }
 
 const titleContentType = configureTitleBlockContent()
 
+const themes: ColorType[] = [
+  {
+    title: 'Grey',
+    value: '#e7e7e7',
+  },
+  {
+    title: 'Blue',
+    value: '#A8C3DB',
+  },
+  {
+    title: 'Green',
+    value: '#C2D4D6',
+  },
+]
+
 const ingressContentType = configureBlockContent({
   h1: false,
   h2: false,
@@ -36,15 +53,7 @@ const headerCellContentType = configureBlockContent({
   lists: false,
   smallText: false,
 })
-/* const tableCellContentType = configureBlockContent({
-  h1: false,
-  h2: false,
-  h3: false,
-  h4: false,
-  lists: false,
-  attachment: true,
-})
- */
+
 const chosenColors = ['White', 'Mid Green', 'Moss Green Light', 'Spruce Wood', 'Mist Blue']
 const backgroundColors = defaultColors.filter((color) => chosenColors.includes(color.title))
 export default {
@@ -113,10 +122,9 @@ export default {
                 { type: 'linkSelector', title: 'Link' },
                 { type: 'downloadableFile', title: 'Downloadable file' },
                 {
-                  type: 'object',
-                  title: 'Text Field',
-                  name: 'textField',
-                  fields: [{ type: 'string', name: 'text', title: 'Text' }],
+                  title: 'RichText',
+                  name: 'richText',
+                  type: 'tableRichText',
                 },
                 {
                   type: 'object',
@@ -134,7 +142,6 @@ export default {
                     },
                   ],
                 },
-
                 {
                   type: 'object',
                   title: 'Number Field',
@@ -157,14 +164,14 @@ export default {
             prepare({ cells }: { cells: any[] }) {
               const [cellOne, cellTwo, cellThree, cellFour] = cells
               const numberOfCells = cells.length
-
               const getText = (cellContent: any) => {
                 if (cellContent._type === 'linkSelector') {
                   return cellContent.label
                 } else if (cellContent._type === 'downloadableFile') {
                   return cellContent.filename
-                } else if (cellContent._type === 'textField') {
-                  return cellContent.text
+                } else if (cellContent._type === 'richText') {
+                  const cellString = blocksToText(cellContent.text) || ''
+                  return cellString.length > 15 ? cellString.slice(0, 15) + '...' : cellString
                 } else if (cellContent._type === 'dateField') {
                   return cellContent.date
                 }
@@ -187,6 +194,17 @@ export default {
         },
       ],
     },
+    {
+      title: 'Table theme',
+      description: 'Pick a theme for the table. Default is grey.',
+      name: 'theme',
+      type: 'colorlist',
+      options: {
+        colors: themes,
+      },
+      initialValue: themes[0],
+      fieldset: 'design',
+    },
     {
       title: 'Background',
       description: 'Pick a colour for the background. Default is white.',
@@ -196,6 +214,19 @@ export default {
         colors: backgroundColors,
       },
       fieldset: 'design',
+      validation: (Rule: Rule) =>
+        Rule.custom((value: ColorType, ctx: ValidationContext) => {
+          const tableTheme = (ctx.parent as Table).theme?.title
+          const invalidCombinations: Record<string, string> = {
+            'Mist Blue': 'Blue',
+            'Mid Green': 'Green',
+            'Moss Green Light': 'Green',
+          }
+          if (invalidCombinations[value.title] === tableTheme) {
+            return `${value.title} background cannot be used with ${tableTheme} table theme`
+          }
+          return true
+        }),
     },
   ],
   preview: {