Merge branch 'fer/2069'

.github/workflows/DEV-studio-v3.yml

@@ -37,11 +37,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 +132,4 @@ jobs:
         with:
           status: ${{ job.status }}
           steps: ${{ toJson(steps) }}
-        if: failure()
+        if: failure()

sanityv3/schemas/components/ThemeSelector/ThemeSelector.tsx

@@ -0,0 +1,103 @@
+import { Box, Card, Flex, Stack, Tooltip, Text } from '@sanity/ui'
+import { useCallback } from 'react'
+import { set } from 'sanity'
+import type { ObjectInputProps } from 'sanity'
+import styled from 'styled-components'
+import { defaultColors, getColorForTheme } from './defaultColors'
+import { EdsIcon } from '../../../icons'
+import { text_field } from '@equinor/eds-icons'
+
+const Circle = styled.div<{ active: boolean }>`
+  display: inline-block;
+  border: solid 2px ${({ active }) => (active ? 'var(--card-focus-ring-color)' : 'transparent')};
+  border-radius: 50%;
+  padding: 4px;
+  cursor: pointer;
+`
+
+const InnerCircle = styled.div<{ color: string; fillColor: string }>`
+  display: flex;
+  background-color: ${({ color }) => color};
+  border: 1px solid var(--card-hairline-soft-color);
+  padding: 15px;
+  border-radius: 50%;
+  color: ${({ fillColor }) => fillColor};
+`
+
+export type ThemeSelectorValue = {
+  title: string
+  value: number
+}
+
+type ColorCircleProps = {
+  color: ThemeSelectorValue
+  active: boolean
+  onClickHandler: (val: ThemeSelectorValue) => void
+}
+
+const ColorCircle = ({ color, active, onClickHandler }: ColorCircleProps) => {
+  const { background, highlight } = getColorForTheme(color.value)
+  return (
+    <Card paddingY={1}>
+      <Tooltip
+        content={
+          <Box padding={2}>
+            <Text muted size={1}>
+              {color.title}
+            </Text>
+          </Box>
+        }
+        fallbackPlacements={['right', 'left']}
+        placement="top"
+        portal
+      >
+        <Circle active={active} onClick={() => onClickHandler(color)}>
+          <InnerCircle color={background} fillColor={highlight}>
+            <EdsIcon {...text_field} />
+          </InnerCircle>
+        </Circle>
+      </Tooltip>
+    </Card>
+  )
+}
+
+type ThemeSelectorProps = ObjectInputProps
+
+export const ThemeSelector = ({ value, onChange, schemaType }: ThemeSelectorProps) => {
+  const { options } = schemaType
+  const colors = (options?.colors as ThemeSelectorValue[]) || defaultColors
+
+  const handleSelect = useCallback(
+    (selected: ThemeSelectorValue) => {
+      if (selected === value) return
+
+      onChange(set(selected.title, ['title']))
+      onChange(set(selected.value, ['value']))
+    },
+    [onChange, value],
+  )
+
+  return (
+    <Stack space={3}>
+      {colors && (
+        <Card>
+          <Flex direction={'row'} wrap={'wrap'}>
+            {colors.map((colorItem: ThemeSelectorValue) => {
+              const { background } = getColorForTheme(colorItem.value)
+              return (
+                <ColorCircle
+                  key={background}
+                  color={colorItem}
+                  active={colorItem.value === value?.value}
+                  onClickHandler={handleSelect}
+                />
+              )
+            })}
+          </Flex>
+        </Card>
+      )}
+    </Stack>
+  )
+}
+
+export default ThemeSelector

sanityv3/schemas/components/ThemeSelector/defaultColors.ts

@@ -0,0 +1,36 @@
+export const defaultColors = [
+  { title: 'White', value: 0 },
+  { title: 'Moss Green Light', value: 1 },
+  { title: 'Spruce Wood', value: 2 },
+  { title: 'Mist Blue', value: 3 },
+  { title: 'Mid Yellow', value: 4 },
+  { title: 'Mid Orange', value: 5 },
+  { title: 'Mid Blue 1', value: 6 },
+  { title: 'Mid Blue 2', value: 7 },
+  { title: 'Mid Green', value: 8 },
+]
+
+export const getColorForTheme = (pattern: number) => {
+  switch (pattern) {
+    case 1:
+      return { background: 'hsl(184, 30%, 96%)', highlight: 'hsl(348, 100%, 54%)' }
+    case 2:
+      return { background: 'hsl(25, 100%, 94%)', highlight: 'hsl(348, 100%, 54%)' }
+    case 3:
+      return { background: 'hsl(199, 58%, 90%)', highlight: 'hsl(348, 100%, 54%)' }
+    case 4:
+      return { background: '#FFF5B8', highlight: 'hsl(348, 100%, 54%)' }
+    case 5:
+      return { background: '#F8D1AF', highlight: 'hsl(348, 100%, 54%)' }
+    case 6:
+      return { background: '#49709C', highlight: '#F8D1AF' }
+    case 7:
+      return { background: '#49709C', highlight: '#FFF5B8' }
+    case 8:
+      return { background: '#C3E4CE', highlight: 'hsl(348, 100%, 54%)' }
+
+    case 0:
+    default:
+      return { background: 'hsl(0, 0%, 100%)', highlight: 'hsl(348, 100%, 54%)' }
+  }
+}

sanityv3/schemas/components/ThemeSelector/index.ts

@@ -0,0 +1,2 @@
+export * from './ThemeSelector'
+export * from './defaultColors'

sanityv3/schemas/components/renderers.tsx

@@ -1,4 +1,4 @@
-import {ReactNode} from 'react'
+import { ReactNode } from 'react'
 
 type Props = {
   children: ReactNode

sanityv3/schemas/documents/magazine.ts

@@ -150,6 +150,7 @@ export default {
       of: [
         { type: 'textBlock' },
         { type: 'teaser' },
+        { type: 'textTeaser' },
         { type: 'fullWidthImage' },
         { type: 'fullWidthVideo' },
         { type: 'figure' },

sanityv3/schemas/documents/page.ts

@@ -52,26 +52,28 @@ export default {
       of: [
         { type: 'textBlock' },
         { type: 'teaser' },
-        { type: 'fullWidthImage' },
-        { type: 'fullWidthVideo' },
         { type: 'figure' },
-        { type: 'textWithIconArray' },
+        { type: 'textTeaser' },
+        { 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: '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),

sanityv3/schemas/editors/titleEditorContentType.tsx

@@ -57,6 +57,7 @@ export const configureTitleBlockContent = (
   if (highlight) {
     config.marks?.decorators?.push(textColorConfig)
   }
+
   return config
 }
 

sanityv3/schemas/index.js

@@ -71,6 +71,7 @@ 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'
 import textWithIcon from './objects/textWithIcon'
 import textWithIconArray from './objects/textWithIconArray'
@@ -85,6 +86,9 @@ import videoPlayer from './objects/videoPlayer'
 import videoPlayerCarousel from './objects/videoPlayerCarousel'
 import videoControls from './objects/videoControls'
 import hlsVideo from './objects/hlsVideo'
+import keyNumbers from './objects/keyNumbers'
+import keyNumberItem from './objects/keyNumberItem'
+import themeList from './objects/themeList'
 
 const routeSchemas = languages.map(({ name, title }) => {
   return route(name, title)
@@ -122,6 +126,7 @@ const RemainingSchemas = [
   downloadableFile,
   downloadableImage,
   teaser,
+  textTeaser,
   textBlock,
   accordion,
   accordionItem,
@@ -164,6 +169,9 @@ const RemainingSchemas = [
   videoPlayerCarousel,
   videoControls,
   hlsVideo,
+  keyNumbers,
+  keyNumberItem,
+  themeList,
 ]
 
 // Then we give our schema to the builder and provide the result to Sanity

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: {

sanityv3/schemas/objects/keyNumberItem.tsx

@@ -0,0 +1,44 @@
+import { Rule } from 'sanity'
+import { NumberIcon } from '@sanity/icons'
+
+export default {
+  name: 'keyNumberItem',
+  type: 'object',
+  title: 'Key Number',
+  fields: [
+    {
+      name: 'keyNumber',
+      title: 'Key Number',
+      type: 'number',
+      validation: (Rule: Rule) => Rule.required(),
+    },
+    {
+      name: 'unit',
+      title: 'Unit',
+      description: 'A short abbreviated text describing the unit of the key number',
+      type: 'string',
+    },
+    {
+      name: 'description',
+      title: 'Description',
+      type: 'string',
+      description: 'Short description to show below the key number',
+    },
+  ],
+
+  preview: {
+    select: {
+      keyNumber: 'keyNumber',
+      unit: 'unit',
+      description: 'description',
+    },
+    prepare(selection: Record<string, string | number>) {
+      const { keyNumber, unit, description } = selection
+      return {
+        title: `${keyNumber} ${unit ?? ''}`,
+        subtitle: description,
+        media: NumberIcon,
+      }
+    },
+  },
+}