🎨Add scroll based animation #2014 (#2222)

* ✨ Add image background #2014 * 💄 Gradient #2014 * 💄 Some progres #2014 * ✨ Alignment #2014 * Change description #2014 * 🎨 introduce Tailwind * 🧪 Fix tests and lint * 🚨 Fix lint #2014 * update colors to suit tailwind * update to colors * 💚 Fix CI #2014 * update configuration of portable text * more tweaks * Fix type error #2014 * Fix types again #2014 * update block content and remove h1 from block content * 🎨 update indentation * 🎨 remove unused package * 🎨 update heading titles * 🎨 clean up unused * 🎨 remove energy red as background * ✨ Animation improvements #2014 * 🎨 Image below text for mobile devices #2014 * Merge main * 🎨 rewrite other branch into this with modifications * 🎨 render background container only if necessary * 🎨 fix review comments * 🎨 fix alignments when content should align * 🎨 update scroll mobile * 🎨 update and add light version * 🎨 fix ff and safari before * 🎨 tweaking --------- Co-authored-by: Padmaja <[email protected]>
equinor · Apr 10, 2024 · 2706826 · 2706826
1 parent b33b095
commit 2706826
Show file tree

Hide file tree

Showing 53 changed files with 772 additions and 253 deletions.
diff --git a/sanityv3/helpers/formatters.ts b/sanityv3/helpers/formatters.ts
@@ -0,0 +1,3 @@
+export function capitalizeFirstLetter(string: string): string {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
diff --git a/sanityv3/icons/customIcons.tsx b/sanityv3/icons/customIcons.tsx
@@ -88,6 +88,71 @@ export const LeftAlignedImage = (): JSX.Element => (
   </svg>
 )
 
+export const ContentCenterImage = (): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="icon icon-tabler icon-tabler-align-box-center-middle-filled"
+    width="48"
+    height="48"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+    fill="none"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path
+      d="M19 2a3 3 0 0 1 2.995 2.824l.005 .176v14a3 3 0 0 1 -2.824 2.995l-.176 .005h-14a3 3 0 0 1 -2.993 -2.802l-.007 -.198v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h14zm-6 12h-2l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h2l.117 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm2 -3h-6l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h6l.117 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-1 -3h-4l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h4l.117 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z"
+      strokeWidth="0"
+      fill="currentColor"
+    />
+  </svg>
+)
+export const ContentLeftImage = (): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="icon icon-tabler icon-tabler-align-box-left-middle-filled"
+    width="48"
+    height="48"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+    fill="none"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path
+      d="M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005 .195v12.666c0 1.96 -1.537 3.56 -3.472 3.662l-.195 .005h-12.666a3.667 3.667 0 0 1 -3.662 -3.472l-.005 -.195v-12.666c0 -1.96 1.537 -3.56 3.472 -3.662l.195 -.005h12.666zm-10.333 12h-2l-.117 .007a1 1 0 0 0 .117 1.993h2l.117 -.007a1 1 0 0 0 -.117 -1.993zm4 -3h-6l-.117 .007a1 1 0 0 0 .117 1.993h6l.117 -.007a1 1 0 0 0 -.117 -1.993zm-2 -3h-4l-.117 .007a1 1 0 0 0 .117 1.993h4l.117 -.007a1 1 0 0 0 -.117 -1.993z"
+      strokeWidth="0"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export const ContentRightImage = (): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="icon icon-tabler icon-tabler-align-box-right-middle-filled"
+    width="48"
+    height="48"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+    fill="none"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path
+      d="M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005 .195v12.666c0 1.96 -1.537 3.56 -3.472 3.662l-.195 .005h-12.666a3.667 3.667 0 0 1 -3.662 -3.472l-.005 -.195v-12.666c0 -1.96 1.537 -3.56 3.472 -3.662l.195 -.005h12.666zm-.333 12h-2l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h2l.117 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm0 -3h-6l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h6l.117 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm0 -3h-4l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h4l.117 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z"
+      strokeWidth="0"
+      fill="currentColor"
+    />
+  </svg>
+)
+
 export const RightAlignedImage = (): JSX.Element => (
   <svg
     width="48"

diff --git a/sanityv3/schemas/index.js b/sanityv3/schemas/index.js
@@ -92,6 +92,8 @@ import keyNumberItem from './objects/keyNumberItem'
 import keyValue from './objects/keyValue'
 import card from './objects/card'
 import cardsList from './objects/cardsList'
+import backgroundOptions from './objects/background/backgroundOptions'
+import imageBackground from './objects/background/imageBackground'
 
 const routeSchemas = languages.map(({ name, title }) => {
   return route(name, title)
@@ -178,6 +180,8 @@ const RemainingSchemas = [
   keyValue,
   card,
   cardsList,
+  backgroundOptions,
+  imageBackground,
 ]
 
 // Then we give our schema to the builder and provide the result to Sanity

diff --git a/sanityv3/schemas/objects/background/backgroundOptions.tsx b/sanityv3/schemas/objects/background/backgroundOptions.tsx
@@ -0,0 +1,36 @@
+import { defineType, defineField, Rule } from 'sanity'
+
+export default defineType({
+  type: 'object',
+  name: 'backgroundOptions',
+
+  fields: [
+    defineField({
+      type: 'array',
+      name: 'background',
+      description: 'Select what type of background you want to apply',
+      title: 'Background',
+      of: [
+        { name: 'backgroundImage', type: 'imageBackground', title: 'Image' },
+        {
+          title: 'Color',
+          description: 'Default is white.',
+          name: 'backgroundColor',
+          type: 'colorlist',
+        },
+      ].filter((e) => e),
+      options: { sortable: false },
+      validation: (Rule) => [
+        Rule.custom((background, context) => {
+          return background?.length > 1 ? 'Only 1 background item' : true
+        }),
+        Rule.custom((background, context) => {
+          if (background?.[0]._type === 'backgroundImage') {
+            return background[0]?.image?.asset ? true : 'Image required'
+          }
+          return true
+        }),
+      ],
+    }),
+  ],
+})
diff --git a/sanityv3/schemas/objects/background/imageBackground.tsx b/sanityv3/schemas/objects/background/imageBackground.tsx
@@ -0,0 +1,81 @@
+import { defineType, defineField, Image } from 'sanity'
+import { RadioIconSelector } from '../../components'
+import { ContentRightImage, ContentLeftImage, ContentCenterImage } from '../../../icons'
+import { capitalizeFirstLetter } from '../../../helpers/formatters'
+
+export type ColorType = {
+  title: string
+  value: string
+}
+
+const contentAlignmentOptions = [
+  { value: 'left', icon: ContentLeftImage },
+  { value: 'center', icon: ContentCenterImage },
+  { value: 'right', icon: ContentRightImage },
+]
+
+export default defineType({
+  name: 'imageBackground',
+  title: 'Image background',
+  type: 'object',
+  fields: [
+    defineField({
+      title: 'Image',
+      name: 'image',
+      type: 'image',
+      options: {
+        hotspot: true,
+        collapsed: false,
+      },
+    }),
+    defineField({
+      title: 'Apply scroll animation',
+      name: 'useAnimation',
+      type: 'boolean',
+      description: 'Animates content over the background image.',
+    }),
+    defineField({
+      title: 'Apply light gradient',
+      name: 'useLight',
+      type: 'boolean',
+      description: 'Applies a white gradient over semi transparent background image.',
+    }),
+    defineField({
+      name: 'contentAlignment',
+      title: 'Content Alignment',
+      description: 'Select the content alignment on larger screens.',
+      type: 'string',
+      initialValue: 'left',
+      components: {
+        input: function ({ onChange, value }: { onChange: any; value: string }) {
+          return (
+            <RadioIconSelector
+              name="imageAlignmentSelector"
+              options={contentAlignmentOptions}
+              defaultValue={'left'}
+              currentValue={value}
+              onChange={onChange}
+            />
+          )
+        },
+      },
+    }),
+  ],
+
+  preview: {
+    select: {
+      image: 'image',
+      useAnimation: 'useAnimation',
+      contentAlignment: 'contentAlignment',
+    },
+    prepare({ image, useAnimation, contentAlignment }) {
+      return {
+        title: `Image background`,
+        subtitle: `${capitalizeFirstLetter(contentAlignment) + ' aligned '} ${
+          useAnimation ? ' | Animated ' : ''
+        } content`,
+        media: image.asset,
+      }
+    },
+  },
+})
diff --git a/sanityv3/schemas/objects/colorList.tsx b/sanityv3/schemas/objects/colorList.tsx
@@ -34,4 +34,24 @@ export default defineType({
       return <ColorSelector {...props} />
     },
   },
+  preview: {
+    select: {
+      value: 'value',
+      title: 'title',
+    },
+    prepare({ value, title }: { value: string; title: string }) {
+      return {
+        title: `Color '${title}'`,
+        media: (
+          <span
+            style={{
+              backgroundColor: value,
+              padding: '15px',
+              borderRadius: '50%',
+            }}
+          />
+        ),
+      }
+    },
+  },
 })
diff --git a/sanityv3/schemas/objects/textBlock.tsx b/sanityv3/schemas/objects/textBlock.tsx
@@ -59,6 +59,7 @@ export default {
   name: 'textBlock',
   title: 'Text block',
   type: 'object',
+
   fieldsets: [
     {
       title: 'Thumbnail Image',
@@ -88,10 +89,6 @@ export default {
         collapsed: false,
       },
     },
-    {
-      name: 'design',
-      title: 'Design options',
-    },
     {
       name: 'anchor',
       title: 'Additional anchor point reference (Deprecated)',
@@ -205,11 +202,15 @@ export default {
       },
     },
     {
-      title: 'Background',
-      description: 'Pick a colour for the background. Default is white.',
+      name: 'designOptions',
+      type: 'backgroundOptions',
+    },
+    {
+      title: 'Background (Deprecated)',
+      description: 'This field will be phased out over time. Please use Design options above. Default is white',
       name: 'background',
+      readOnly: true,
       type: 'colorlist',
-      fieldset: 'design',
     },
   ].filter((e) => e),
   preview: {

diff --git a/sanityv3/src/lib/structure/items/AssetLibrary.js b/sanityv3/src/lib/structure/items/AssetLibrary.js
@@ -1,7 +1,5 @@
 import { play_circle_outlined } from '@equinor/eds-icons'
-
 import { EdsIcon, FileIcon, LibraryIcon, TagMoreIcon } from '../../../../icons'
-import { Flags } from '../../datasetHelpers'
 import { AssetExtensionFilters } from './AssetExtensionFilters'
 import { AssetTagFilters } from './AssetTagFilters'
 import { UnusedAssetFilters } from './UnusedAssetFilters'

diff --git a/web/components/src/Backgrounds/BackgroundContainer.test.tsx b/web/components/src/Backgrounds/BackgroundContainer.test.tsx
@@ -10,27 +10,27 @@ describe(`The background container supports different colours from Sanity's colo
     expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-default)`)
   })
   it('it can be white (default)', () => {
-    const { container } = render(<BackgroundContainer background="White" />)
+    const { container } = render(<BackgroundContainer background={{ backgroundColor: 'White' }} />)
     expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-default)`)
   })
   it('it can be Moss green ', () => {
-    const { container } = render(<BackgroundContainer background="Moss Green" />)
+    const { container } = render(<BackgroundContainer background={{ backgroundColor: 'Moss Green' }} />)
     expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-moss-green)`)
   })
   it('it can be light mint blue (default)', () => {
-    const { container } = render(<BackgroundContainer background="Moss Green Light" />)
+    const { container } = render(<BackgroundContainer background={{ backgroundColor: 'Moss Green Light' }} />)
     expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-moss-green-light)`)
   })
   it('it can be spruce wood (default)', () => {
-    const { container } = render(<BackgroundContainer background="Spruce Wood" />)
+    const { container } = render(<BackgroundContainer background={{ backgroundColor: 'Spruce Wood' }} />)
     expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-spruce-wood)`)
   })
   it('it can be mist blue (default)', () => {
-    const { container } = render(<BackgroundContainer background="Mist Blue" />)
+    const { container } = render(<BackgroundContainer background={{ backgroundColor: 'Mist Blue' }} />)
     expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-mist-blue)`)
   })
   it('it can be slate blue (default)', () => {
-    const { container } = render(<BackgroundContainer background="Mid Blue" />)
+    const { container } = render(<BackgroundContainer background={{ backgroundColor: 'Mid Blue' }} />)
     expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-mid-blue)`)
   })
 })