Merge branch 'padms/1534' into staging

equinor · Aug 16, 2023 · d36a097 · d36a097
2 parents d70c78b + 504b387
commit d36a097
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 27 deletions.
diff --git a/.github/workflows/PROD-all-studios-v3.yaml b/.github/workflows/PROD-all-studios-v3.yaml
@@ -77,7 +77,7 @@ jobs:
         id: deploy
         working-directory: ./sanityv3
         run: |
-          pnpm deploy
+          pnpm run deploy
         env:
           SANITY_AUTH_TOKEN: ${{ secrets.SANITY_DEPLOY }}
       - uses: act10ns/slack@v2
@@ -159,7 +159,7 @@ jobs:
         id: deploy
         working-directory: ./sanityv3
         run: |
-          pnpm deploy
+          pnpm run deploy
         env:
           SANITY_AUTH_TOKEN: ${{ secrets.SANITY_SECRET_DEPLOY }}
       - uses: act10ns/slack@v2

diff --git a/sanityv3/schemas/objects/iframe.tsx b/sanityv3/schemas/objects/iframe.tsx
@@ -7,7 +7,16 @@ import type { ColorSelectorValue } from '../components/ColorSelector'
 import blocksToText from '../../helpers/blocksToText'
 import { EdsIcon } from '../../icons'
 import { configureBlockContent, configureTitleBlockContent } from '../editors'
-import { title, frameTitle, description, cookiePolicy, aspectRatio, url, height } from './iframe/sharedIframeFields'
+import {
+  title,
+  frameTitle,
+  description,
+  cookiePolicy,
+  aspectRatio,
+  url,
+  height,
+  action,
+} from './iframe/sharedIframeFields'
 
 const ingressContentType = configureBlockContent({
   h1: false,
@@ -65,14 +74,7 @@ export default {
     aspectRatio,
     height,
     description,
-    {
-      name: 'action',
-      title: 'Link/action',
-      description: 'You can add one separate link if you need. The link will show up at the bottom of the component.',
-      type: 'array',
-      of: [{ type: 'linkSelector', title: 'Link' }],
-      validation: (Rule: Rule) => Rule.max(1),
-    },
+    action,
     {
       title: 'Background',
       description: 'Pick a colour for the background. Default is white.',

diff --git a/sanityv3/schemas/objects/iframe/sharedIframeFields.tsx b/sanityv3/schemas/objects/iframe/sharedIframeFields.tsx
@@ -104,3 +104,12 @@ export const description = {
   type: 'array',
   of: [descriptionContentType],
 }
+
+export const action = {
+  name: 'action',
+  title: 'Link/action',
+  description: 'You can add one separate link if you need. The link will show up at the bottom of the component.',
+  type: 'array',
+  of: [{ type: 'linkSelector', title: 'Link' }],
+  validation: (Rule: Rule) => Rule.max(1),
+}
diff --git a/sanityv3/schemas/objects/iframeCarousel.tsx b/sanityv3/schemas/objects/iframeCarousel.tsx
@@ -2,9 +2,18 @@ import { EdsIcon } from '../../icons'
 import { library_image } from '@equinor/eds-icons'
 import blocksToText from '../../helpers/blocksToText'
 import type { Rule } from 'sanity'
-import { title, frameTitle, description, cookiePolicy, aspectRatio, url, height } from './iframe/sharedIframeFields'
+import {
+  title,
+  frameTitle,
+  description,
+  cookiePolicy,
+  aspectRatio,
+  url,
+  height,
+  action,
+} from './iframe/sharedIframeFields'
 
-const carouselItemFields = [title, frameTitle, description, cookiePolicy, aspectRatio, url, height]
+const carouselItemFields = [title, frameTitle, description, cookiePolicy, aspectRatio, url, height, action]
 export default {
   name: 'iframeCarousel',
   title: 'Horizontal scroll iframe',

diff --git a/studio/schemas/objects/iframe.tsx b/studio/schemas/objects/iframe.tsx
@@ -10,7 +10,16 @@ import CharCounterEditor from '../components/CharCounterEditor'
 import blocksToText from '../../helpers/blocksToText'
 import type { Rule, Block } from '@sanity/types'
 import type { ColorListValue } from 'sanity-plugin-color-list'
-import { title, frameTitle, description, cookiePolicy, aspectRatio, url, height } from './iframe/sharedIframeFields'
+import {
+  title,
+  frameTitle,
+  description,
+  cookiePolicy,
+  aspectRatio,
+  url,
+  height,
+  action,
+} from './iframe/sharedIframeFields'
 
 const ingressContentType = configureBlockContent({
   h1: false,
@@ -69,14 +78,7 @@ export default {
     aspectRatio,
     height,
     description,
-    {
-      name: 'action',
-      title: 'Link/action',
-      description: 'You can add one separate link if you need. The link will show up at the bottom of the component.',
-      type: 'array',
-      of: [{ type: 'linkSelector', title: 'Link' }],
-      validation: (Rule: Rule) => Rule.max(1),
-    },
+    action,
     {
       title: 'Background',
       description: 'Pick a colour for the background. Default is white.',

diff --git a/studio/schemas/objects/iframe/sharedIframeFields.tsx b/studio/schemas/objects/iframe/sharedIframeFields.tsx
@@ -106,3 +106,12 @@ export const description = {
   inputComponent: CharCounterEditor,
   of: [descriptionContentType],
 }
+
+export const action = {
+  name: 'action',
+  title: 'Link/action',
+  description: 'You can add one separate link if you need. The link will show up at the bottom of the component.',
+  type: 'array',
+  of: [{ type: 'linkSelector', title: 'Link' }],
+  validation: (Rule: Rule) => Rule.max(1),
+}
diff --git a/studio/schemas/objects/iframeCarousel.tsx b/studio/schemas/objects/iframeCarousel.tsx
@@ -3,9 +3,18 @@ import { EdsIcon } from '../../icons'
 import { library_image } from '@equinor/eds-icons'
 import blocksToText from '../../helpers/blocksToText'
 import type { Rule } from '@sanity/types'
-import { title, frameTitle, description, cookiePolicy, aspectRatio, url, height } from './iframe/sharedIframeFields'
+import {
+  title,
+  frameTitle,
+  description,
+  cookiePolicy,
+  aspectRatio,
+  url,
+  height,
+  action,
+} from './iframe/sharedIframeFields'
 
-const carouselItemFields = [title, frameTitle, description, cookiePolicy, aspectRatio, url, height]
+const carouselItemFields = [title, frameTitle, description, cookiePolicy, aspectRatio, url, height, action]
 export default {
   name: 'iframeCarousel',
   title: 'Horizontal scroll iframe',

diff --git a/web/lib/queries/iframeCarouselFields.ts b/web/lib/queries/iframeCarouselFields.ts
@@ -1,8 +1,12 @@
+import linkSelectorFields from './common/actions/linkSelectorFields'
+
 export const iframeCarouselFields = /* groq */ `
     "id": _key,
     "type": _type,
     title,
-    items,
+    items[]{..., "action": action[0]{
+      ${linkSelectorFields},
+    },},
     "designOptions": {
       "background": coalesce(background.title, 'none'),
     },

diff --git a/web/pageComponents/shared/IframeCarousel/IframeCarousel.tsx b/web/pageComponents/shared/IframeCarousel/IframeCarousel.tsx
@@ -10,6 +10,7 @@ import 'swiper/css/pagination'
 import CoreIFrame from '../iframe/IFrame'
 import RichText from '../portableText/RichText'
 import { Carousel } from '../../shared/Carousel'
+import { ButtonLink } from '../ButtonLink'
 
 const Container = styled.div`
   padding: var(--space-3xLarge) calc(var(--layout-paddingHorizontal-small) - var(--space-xxLarge));
@@ -25,8 +26,17 @@ const Figure = styled.figure`
   width: 100%;
 `
 const ItemContainer = styled.div`
+  min-width: 100%;
   width: 100%;
-  min-width: 90%;
+
+  @media (min-width: 1300px) {
+    min-width: 45%;
+    /* exactly two items */
+    :first-child:nth-last-child(2),
+    :last-child:nth-child(2) {
+      min-width: calc(50% - var(--space-medium));
+    }
+  }
 `
 
 const StyledHeading = styled(TitleText)`
@@ -43,6 +53,9 @@ const StyledItemHeading = styled(TitleText)`
   display: -webkit-box;
   -webkit-box-orient: vertical;
 `
+const StyledButtonLink = styled(ButtonLink)`
+  margin-top: var(--space-xLarge);
+`
 
 type IframeCarouselProps = {
   data: IframeCarouselData
@@ -85,6 +98,7 @@ const IframeCarousel = ({ data, anchor, ...rest }: IframeCarouselProps) => {
                   hasSectionTitle={!!item.title}
                 />
               )}
+              {item.action && item.action.label && <StyledButtonLink action={item.action} />}
             </ItemContainer>
           ))}
         </Carousel>

diff --git a/web/types/types.ts b/web/types/types.ts
@@ -701,7 +701,6 @@ export type VideoPlayerCarouselData = {
   title?: PortableTextBlock[]
 }
 
-
 export type LoopingVideoRatio = '1:2' | 'narrow'
 
 export type LoopingVideoData = {
@@ -736,6 +735,7 @@ export type IFrameCarouselItemData = {
   cookiePolicy: CookiePolicy
   aspectRatio: string
   height?: number
+  action?: LinkData
 }
 
 export type IframeCarouselData = {