Merge branch 'fer/1889' into staging

sanityv3/schemas/documents/magazine.ts

@@ -157,6 +157,7 @@ export default {
         { type: 'pullQuote', initialValue: { background: defaultColors[0] } },
         { type: 'accordion' },
         { type: 'promoTileArray' },
+        { type: 'promoCardsArray' },
         { type: 'promotion' },
         { type: 'iframe' },
         { type: 'imageCarousel' },

sanityv3/schemas/documents/page.ts

@@ -59,6 +59,7 @@ export default {
         { type: 'pullQuote', initialValue: { background: defaultColors[0] } },
         { type: 'accordion' },
         { type: 'promoTileArray' },
+        { type: 'promoCardsArray' },
         { type: 'promotion' },
         { type: 'table' },
         { type: 'stockValuesApi' },

sanityv3/schemas/index.js

@@ -56,7 +56,9 @@ import menuLink from './objects/menuLink'
 import newsList from './objects/newsList'
 import positionedInlineImage from './objects/positionedInlineImage'
 import promoTile from './objects/promoTile'
+import promoCards from './objects/promoCards'
 import promoTileArray from './objects/promoTileArray'
+import promoCardsArray from './objects/promoCardsArray'
 import promoteEvents from './objects/promotion/promoteEvents'
 import promoteMagazine from './objects/promotion/promoteMagazine'
 import promoteNews from './objects/promotion/promoteNews'
@@ -131,7 +133,9 @@ const RemainingSchemas = [
   textWithIconArray,
   linkSelector,
   promoTile,
+  promoCards,
   promoTileArray,
+  promoCardsArray,
   stockValuesApi,
   iframe,
   basicIframe,

sanityv3/schemas/objects/linkSelector.tsx

@@ -50,7 +50,7 @@ const defaultReferenceTargets: ReferenceTarget[] = [...(types as ReferenceTarget
  * @param flag the name of the boolean field from the parent that works as a switch to toggle link fields
  *
  */
-export const getLinkSelectorFields = (labelFieldset?: string, flag?: string) => {
+export const getLinkSelectorFields = (labelFieldset?: string, flag?: string, labelIsRequired = true) => {
   const isHidden = (parent: LinkSelector) => flag && !parent?.[flag]
 
   return [
@@ -139,7 +139,7 @@ export const getLinkSelectorFields = (labelFieldset?: string, flag?: string) =>
         Rule.custom((value: string, context: ValidationContext) => {
           const { parent } = context as { parent: LinkSelector }
           if (isHidden(parent)) return true
-          return value ? true : 'You must add a label'
+          return value || !labelIsRequired ? true : 'You must add a label'
         }),
       hidden: ({ parent }: { parent: LinkSelector }) => isHidden(parent),
     },
@@ -148,6 +148,12 @@ export const getLinkSelectorFields = (labelFieldset?: string, flag?: string) =>
       title: '♿ Screenreader label',
       description: 'A text used for providing screen readers with additional information',
       type: 'string',
+      validation: (Rule: Rule) =>
+        Rule.custom((value: string, context: ValidationContext) => {
+          const { parent } = context as { parent: LinkSelector }
+          if (isHidden(parent)) return true
+          return !labelIsRequired && !value ? 'You must add either a screen reader label or a visible label' : true
+        }),
       fieldset: labelFieldset,
       hidden: ({ parent }: { parent: LinkSelector }) => isHidden(parent),
     },

sanityv3/schemas/objects/promoCards.tsx

@@ -0,0 +1,92 @@
+import { label } from '@equinor/eds-icons'
+import type { PortableTextBlock } from 'sanity'
+import type { ColorSelectorValue } from '../components/ColorSelector'
+import { EdsIcon } from '../../icons'
+import type { LinkSelector } from './linkSelector'
+import { configureBlockContent } from '../editors'
+import { getLinkSelectorFields } from './linkSelector'
+import blocksToText from '../../helpers/blocksToText'
+
+const ingressBlockContentType = configureBlockContent({
+  h1: false,
+  h2: false,
+  h3: false,
+  h4: false,
+  internalLink: false,
+  externalLink: false,
+  attachment: false,
+  lists: false,
+})
+
+export type PromoCardsType = {
+  _type: 'promoCards'
+  linkLabelAsTitle?: boolean
+  link?: LinkSelector
+  isLink?: boolean
+  background?: ColorSelectorValue
+}
+
+const linkFields = getLinkSelectorFields('label', 'isLink', false)
+
+export default {
+  title: 'Promo cards',
+  name: 'promoCards',
+  type: 'object',
+  fieldsets: [
+    {
+      title: 'Design options',
+      name: 'design',
+      description: 'Some options for design',
+      options: {
+        collapsible: true,
+        collapsed: false,
+      },
+    },
+    {
+      name: 'link',
+      title: 'Link',
+      description: 'Select either an internal link or external URL.',
+    },
+    {
+      name: 'label',
+      title: 'Label',
+      description: 'The label that the link/button should have.',
+    },
+  ],
+  fields: [
+    {
+      name: 'ingress',
+      title: 'Promo Text',
+      type: 'array',
+      of: [ingressBlockContentType],
+    },
+    {
+      name: 'isLink',
+      type: 'boolean',
+      title: 'Use a link',
+      description: 'Link to another piece of content',
+      initialValue: false,
+    },
+    ...linkFields,
+    {
+      title: 'Background',
+      description: 'Pick a colour for the background. Default is white.',
+      name: 'background',
+      type: 'colorlist',
+      fieldset: 'design',
+    },
+  ],
+  preview: {
+    select: {
+      link: 'label',
+      ingress: 'ingress',
+    },
+    prepare({ link, ingress }: { link: string; ingress: PortableTextBlock[] }) {
+      return {
+        title: link || blocksToText(ingress) || 'Promo Text Tile',
+        subtitle: `Promo text tile component`,
+        media: EdsIcon(label),
+      }
+    },
+  },
+}

sanityv3/schemas/objects/promoCardsArray.tsx

@@ -0,0 +1,43 @@
+import { collection_2 } from '@equinor/eds-icons'
+import { EdsIcon } from '../../icons'
+import type { Rule } from 'sanity'
+import type { PromoCardsType } from './promoCards'
+
+export type PromoCardsArray = {
+  _type: 'promoCardsArrayType'
+  group: PromoCardsType[]
+}
+
+export default {
+  type: 'object',
+  name: 'promoCardsArray',
+  title: 'Promo cards',
+  fields: [
+    {
+      name: 'spacing',
+      type: 'boolean',
+      title: 'Space between other components',
+      initialValue: false,
+    },
+    {
+      type: 'array',
+      name: 'group',
+      description: 'Add promo cards as one or a pair',
+      title: 'Promo cards',
+      of: [{ type: 'promoCards' }],
+      validation: (Rule: Rule) => Rule.required().min(1).max(2),
+    },
+  ],
+  preview: {
+    select: {
+      group: 'group',
+    },
+    prepare() {
+      return {
+        title: 'Promo cards title',
+        subtitle: `Promo cards component`,
+        media: EdsIcon(collection_2),
+      }
+    },
+  },
+}

sanityv3/schemas/objects/promoTile.tsx

@@ -6,14 +6,13 @@ import { EdsIcon } from '../../icons'
 import CompactBlockEditor from '../components/CompactBlockEditor'
 import type { ImageWithAlt } from './imageWithAlt'
 import type { LinkSelector } from './linkSelector'
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { configureTitleBlockContent } from '../editors'
 
 const titleContentType = configureTitleBlockContent()
 
 export type PromoTile = {
   _type: 'promoTile'
-  title: any[]
+  title: PortableTextBlock[]
   linkLabelAsTitle?: boolean
   image?: ImageWithAlt
   link?: LinkSelector
@@ -50,7 +49,9 @@ export default {
     {
       name: 'title',
       type: 'array',
-      inputComponent: CompactBlockEditor,
+      components: {
+        input: CompactBlockEditor,
+      },
       of: [titleContentType],
       title: 'Title',
       hidden: ({ parent }: { parent: PromoTile }) => parent?.linkLabelAsTitle,
@@ -92,13 +93,13 @@ export default {
       linkLabelAsTitle,
       link,
     }: {
-      title: any[]
+      title: PortableTextBlock[]
       imageUrl: string
       linkLabelAsTitle: boolean
       link: string
     }) {
       return {
-        title: linkLabelAsTitle ? link : blocksToText(title as any[]),
+        title: linkLabelAsTitle ? link : blocksToText(title),
         subtitle: `Promo tile component`,
         media: imageUrl ? <img src={imageUrl} alt="" style={{ height: '100%' }} /> : EdsIcon(label),
       }

web/components/src/Text/Text.tsx

@@ -41,7 +41,7 @@ const StyledText = styled(Typography)<StyledTextProps>`
 `
 
 export type TextProps = {
-  size?: 'regular' | 'md' | 'small' | 'lg'
+  size?: 'regular' | 'md' | 'small' | 'lg' | 'ml'
   lineHeight?: '1' | '2' | '2_5' | '3'
   bold?: boolean
   italic?: boolean
@@ -53,6 +53,7 @@ export type TextProps = {
 /* Should be easy enough to change later on */
 const sizes = {
   lg: 'var(--typeScale-4_5)',
+  ml: 'var(--typeScale-3)',
   regular: 'var(--typeScale-1)',
   md: 'var(--typeScale-2)',
   small: 'var(--typeScale-0)',

web/lib/queries/common/actions/linkSelectorFields.ts

@@ -15,22 +15,26 @@ export const linkReferenceFields = /* groq */ `
   }
 `
 
-const linkSelectorFields = /* groq */ `
-_type == "linkSelector" => {
-  "id": _key,
-  "type": select(
-    defined(url) => "externalUrl", "internalUrl"
-  ),
-  label,
-  ariaLabel,
-  "link": select(
-    linkToOtherLanguage == true =>
-      referenceToOtherLanguage->${linkReferenceFields},
-      reference->${linkReferenceFields},
-  ),
-  "href": url,
-  anchorReference,
-}
+export const linkSelectorFields = /* groq */ `
+  {
+    "id": _key,
+    "type": select(
+      defined(url) => "externalUrl", "internalUrl"
+    ),
+    label,
+    ariaLabel,
+    "link": select(
+      linkToOtherLanguage == true =>
+        referenceToOtherLanguage->${linkReferenceFields},
+        reference->${linkReferenceFields},
+    ),
+    "href": url,
+    anchorReference,
+  }
+`
+
+const linkSelector = /* groq */ `
+  _type == "linkSelector" => ${linkSelectorFields}
 `
 
-export default linkSelectorFields
+export default linkSelector

web/lib/queries/common/eventContentFields.ts

@@ -1,5 +1,5 @@
 import markDefs from './blockEditorMarks'
-import linkSelectorFields from './actions/linkSelectorFields'
+import linkSelector from './actions/linkSelectorFields'
 import downloadableFileFields from './actions/downloadableFileFields'
 import downloadableImageFields from './actions/downloadableImageFields'
 
@@ -76,7 +76,7 @@ export const eventContentFields = /* groq */ `
     title,
     heroImage,
     "links": links[]{
-      ${linkSelectorFields},
+      ${linkSelector},
       ${downloadableFileFields},
       ${downloadableImageFields},
     },

web/lib/queries/common/heroFields.ts

@@ -1,4 +1,4 @@
-import linkSelectorFields from './actions/linkSelectorFields'
+import linkSelector from './actions/linkSelectorFields'
 
 export const heroFields = /* groq */ `{
     "type": coalesce(heroType, 'default'),
@@ -23,6 +23,6 @@ export const heroFields = /* groq */ `{
       "ratio": heroLoopingVideoRatio,
     },
     "link": heroLink[0]{
-      ${linkSelectorFields}
+      ${linkSelector}
     }
   }`

web/lib/queries/common/newsSubqueries.ts

@@ -1,6 +1,6 @@
 import downloadableFileFields from './actions/downloadableFileFields'
 import downloadableImageFields from './actions/downloadableImageFields'
-import linkSelectorFields from './actions/linkSelectorFields'
+import linkSelector from './actions/linkSelectorFields'
 import markDefs from './blockEditorMarks'
 
 export const iframeForNewsQuery = /* groq */ `iframe {
@@ -43,7 +43,7 @@ export const relatedLinksForNewsQuery = /* groq */ `relatedLinks {
     title,
     heroImage,
     "links": links[]{
-      ${linkSelectorFields},
+      ${linkSelector},
       ${downloadableFileFields},
       ${downloadableImageFields},
     }