From 2cec9bdef789c0705133cb41fec5ca1b3478bc89 Mon Sep 17 00:00:00 2001
From: Borghild <borghild.vikoyr@miles.no>
Date: Mon, 22 Apr 2024 20:24:02 +0200
Subject: [PATCH 1/2] :art: update

---
 web/pageComponents/pageTemplates/Event.tsx    | 10 ++--
 web/pageComponents/shared/ContactList.tsx     | 46 +++++++++++++++++++
 .../shared/iframe/BasicIFrame.tsx             |  8 +---
 .../shared/portableText/Blocks.tsx            |  5 +-
 .../portableText/components/BasicIframe.tsx   |  7 +--
 5 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/web/pageComponents/pageTemplates/Event.tsx b/web/pageComponents/pageTemplates/Event.tsx
index e436b431c..cdb4e548f 100644
--- a/web/pageComponents/pageTemplates/Event.tsx
+++ b/web/pageComponents/pageTemplates/Event.tsx
@@ -67,13 +67,9 @@ export default function Event({ data }: { data: EventSchema }): JSX.Element {
              `}
             >
               {ingress && (
-                <Blocks proseClassName="prose-article" className="p-0 max-w-viewport mx-auto" value={ingress} />
-              )}
-              {content && (
-                <div className="mx-auto max-w-viewport px-layout-lg">
-                  <Blocks value={content} />
-                </div>
+                <Blocks proseClassName="prose-article" className="max-w-viewport mx-auto pb-16" value={ingress} />
               )}
+              {content && <Blocks proseClassName="prose-article" value={content} className="mx-auto max-w-viewport" />}
             </div>
           )}
           {promotedPeople?.people && promotedPeople?.people.length > 0 && (
@@ -86,7 +82,7 @@ export default function Event({ data }: { data: EventSchema }): JSX.Element {
               }}
             />
           )}
-          {contactList && <ContactList data={contactList} />}
+          {contactList && <ContactList data={contactList} className="my-12" />}
 
           {relatedLinks?.links && relatedLinks.links.length > 0 && (
             <RelatedContent
diff --git a/web/pageComponents/shared/ContactList.tsx b/web/pageComponents/shared/ContactList.tsx
index 7996b10b2..bb8721516 100644
--- a/web/pageComponents/shared/ContactList.tsx
+++ b/web/pageComponents/shared/ContactList.tsx
@@ -1,14 +1,60 @@
 import type { ContactListData } from '../../types/types'
 import { Text, Heading } from '@components'
 import { removeWhiteSpace } from '../../common/helpers/removeWhiteSpace'
+import { twMerge } from 'tailwind-merge'
 
+<<<<<<< HEAD
+=======
+const Wrapper = styled.div`
+  max-width: var(--layout-maxContent-narrow);
+`
+const Contacts = styled.div`
+  padding-top: var(--space-small);
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+`
+const Contact = styled.div`
+  display: flex;
+  padding: var(--space-small) 0;
+  flex-basis: 35%;
+  justify-content: left;
+  flex-direction: column;
+`
+const Phone = styled.a`
+  margin: var(--space-xSmall) 0;
+  color: var(--grey-70);
+  font-size: var(--typeScale-0);
+  &:hover {
+    color: var(--moss-green-100);
+  }
+`
+
+const Location = styled.p`
+  margin: var(--space-xSmall) 0;
+  font-size: var(--typeScale-1);
+`
+const Header = styled(Heading)`
+  text-align: var(--contactList-titleAlign, left);
+  margin: var(--contactList-titleMargin, 0 0 var(--space-xLarge) 0);
+`
+
+>>>>>>> 9127c9a3 (:art: update)
 type ContactListProps = {
   data: ContactListData
+  className?: string
 }
 
+<<<<<<< HEAD
 const ContactList = ({ data }: ContactListProps) => {
   return (
     <div className="flex flex-col pb-page-content px-layout-lg max-w-viewport">
+=======
+const ContactList = ({ data, className = '', ...rest }: ContactListProps) => {
+  return (
+    <Wrapper {...rest} className={twMerge(`my-28 mx-auto flex flex-col py-0 px-6`, className)}>
+>>>>>>> 9127c9a3 (:art: update)
       {data?.title && (
         <Heading className="pb-6 text-left" size="xl" level="h2">
           {data.title}
diff --git a/web/pageComponents/shared/iframe/BasicIFrame.tsx b/web/pageComponents/shared/iframe/BasicIFrame.tsx
index 72ce0f4cf..5efabd20c 100644
--- a/web/pageComponents/shared/iframe/BasicIFrame.tsx
+++ b/web/pageComponents/shared/iframe/BasicIFrame.tsx
@@ -15,12 +15,8 @@ const Container = styled.div`
   margin: auto;
 `
 
-const BasicIFrame = ({
-  data: { title, frameTitle, url, cookiePolicy = 'none', designOptions },
-  ...rest
-}: {
-  data: IFrameData
-}) => {
+const BasicIFrame = ({ data, ...rest }: { data: IFrameData }) => {
+  const { title, frameTitle, url, cookiePolicy = 'none', designOptions } = data || {}
   if (!url) return null
 
   const { height, aspectRatio, background } = designOptions
diff --git a/web/pageComponents/shared/portableText/Blocks.tsx b/web/pageComponents/shared/portableText/Blocks.tsx
index 4e45826b4..f864ad929 100644
--- a/web/pageComponents/shared/portableText/Blocks.tsx
+++ b/web/pageComponents/shared/portableText/Blocks.tsx
@@ -9,7 +9,7 @@ import {
   PortableTextTypeComponent,
 } from '@portabletext/react'
 import { PortableTextBlock, PortableTextBlockStyle } from '@portabletext/types'
-import { FigureWithLayout, Quote, Fact, ExternalLink, InternalLink } from './components'
+import { FigureWithLayout, Quote, Fact, ExternalLink, InternalLink, BasicIframe } from './components'
 import { twMerge } from 'tailwind-merge'
 
 export type BlockType = Record<PortableTextBlockStyle, PortableTextBlockComponent | undefined>
@@ -38,6 +38,7 @@ const defaultTypes: TypesType = {
   positionedInlineImage: (props) => <FigureWithLayout {...props} />,
   //@ts-ignore
   pullQuote: (props) => <Quote {...props} className="not-prose" />,
+  basicIframe: (props) => <BasicIframe {...props} className="not-prose px-layout-md" />,
 }
 
 type BlockProps = {
@@ -68,7 +69,7 @@ type BlockProps = {
   className?: string
 } & PortableTextProps
 
-const inlineBlockTypes = ['block', 'positionedInlineImage', 'pullQuote']
+const inlineBlockTypes = ['block', 'positionedInlineImage', 'pullQuote', 'basicIframe']
 
 //@ts-ignore
 export default function Blocks({
diff --git a/web/pageComponents/shared/portableText/components/BasicIframe.tsx b/web/pageComponents/shared/portableText/components/BasicIframe.tsx
index 80ddad96d..dba575af6 100644
--- a/web/pageComponents/shared/portableText/components/BasicIframe.tsx
+++ b/web/pageComponents/shared/portableText/components/BasicIframe.tsx
@@ -4,6 +4,7 @@ import type { PortableTextBlock } from '@portabletext/types'
 import type { IFrameData } from 'types/types'
 import styled from 'styled-components'
 import RichText from '../RichText'
+import { twMerge } from 'tailwind-merge'
 
 type IframeRenderer = {
   _key: string
@@ -11,16 +12,16 @@ type IframeRenderer = {
 } & IFrameData
 
 const Container = styled.div`
-  margin: var(--space-xxLarge) auto;
   clear: both;
 `
 type BlockProps = {
   isInline: boolean
   value: IframeRenderer
+  className?: string
 } & PortableTextBlock
 
 export const BasicIframe = (iframe: BlockProps) => {
-  const { value } = iframe
+  const { value, className = '' } = iframe
   const data = {
     ...value,
     type: value._type,
@@ -28,7 +29,7 @@ export const BasicIframe = (iframe: BlockProps) => {
   }
 
   return (
-    <Container>
+    <Container className={twMerge(`my-14 mx-auto`, className)}>
       {value.title && <RichText value={value.title} />}
       <IFrame
         frameTitle={data.frameTitle}

From 9c00de5cc164a35c5c1bfa81158e9a55df7a2ac8 Mon Sep 17 00:00:00 2001
From: Borghild <borghild.vikoyr@miles.no>
Date: Tue, 23 Apr 2024 08:31:13 +0200
Subject: [PATCH 2/2] :art: merge and tweak

---
 web/pageComponents/pageTemplates/Event.tsx    |  8 ++--
 web/pageComponents/shared/ContactList.tsx     | 48 +------------------
 web/pageComponents/shared/iframe/IFrame.tsx   |  9 ++--
 .../shared/portableText/Blocks.tsx            |  8 +++-
 .../shared/portableText/IngressText.tsx       |  6 ++-
 .../portableText/components/BasicIframe.tsx   | 14 ++++--
 web/tailwind.config.cjs                       |  1 +
 7 files changed, 32 insertions(+), 62 deletions(-)

diff --git a/web/pageComponents/pageTemplates/Event.tsx b/web/pageComponents/pageTemplates/Event.tsx
index cdb4e548f..6aeef71cc 100644
--- a/web/pageComponents/pageTemplates/Event.tsx
+++ b/web/pageComponents/pageTemplates/Event.tsx
@@ -7,12 +7,12 @@ import TitleText from '../shared/portableText/TitleText'
 import RelatedContent from '../shared/RelatedContent'
 import AddToCalendar from '../topicPages/AddToCalendar'
 import Promotion from '../topicPages/Promotion'
-
 import type { PortableTextBlock } from '@portabletext/types'
 import Seo from '../../pageComponents/shared/Seo'
 import type { EventSchema } from '../../types/types'
 import { EventJsonLd } from 'next-seo'
 import Blocks from '../../pageComponents/shared/portableText/Blocks'
+import IngressText from '../../pageComponents/shared/portableText/IngressText'
 
 export default function Event({ data }: { data: EventSchema }): JSX.Element {
   const { title } = data
@@ -38,7 +38,7 @@ export default function Event({ data }: { data: EventSchema }): JSX.Element {
                 </div>
               )}
 
-              <div className="flex flex-center mb-2 text-moss-green-100 ">
+              <div className="flex flex-center gap-1 mb-2 text-moss-green-100 ">
                 {start && end ? (
                   <>
                     <FormattedTime datetime={start} />
@@ -66,9 +66,7 @@ export default function Event({ data }: { data: EventSchema }): JSX.Element {
              lg:px-0
              `}
             >
-              {ingress && (
-                <Blocks proseClassName="prose-article" className="max-w-viewport mx-auto pb-16" value={ingress} />
-              )}
+              {ingress && <IngressText value={ingress} className="max-w-viewport mx-auto px-layout-lg pb-16" />}
               {content && <Blocks proseClassName="prose-article" value={content} className="mx-auto max-w-viewport" />}
             </div>
           )}
diff --git a/web/pageComponents/shared/ContactList.tsx b/web/pageComponents/shared/ContactList.tsx
index bb8721516..205a4670f 100644
--- a/web/pageComponents/shared/ContactList.tsx
+++ b/web/pageComponents/shared/ContactList.tsx
@@ -3,58 +3,14 @@ import { Text, Heading } from '@components'
 import { removeWhiteSpace } from '../../common/helpers/removeWhiteSpace'
 import { twMerge } from 'tailwind-merge'
 
-<<<<<<< HEAD
-=======
-const Wrapper = styled.div`
-  max-width: var(--layout-maxContent-narrow);
-`
-const Contacts = styled.div`
-  padding-top: var(--space-small);
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  justify-content: space-between;
-`
-const Contact = styled.div`
-  display: flex;
-  padding: var(--space-small) 0;
-  flex-basis: 35%;
-  justify-content: left;
-  flex-direction: column;
-`
-const Phone = styled.a`
-  margin: var(--space-xSmall) 0;
-  color: var(--grey-70);
-  font-size: var(--typeScale-0);
-  &:hover {
-    color: var(--moss-green-100);
-  }
-`
-
-const Location = styled.p`
-  margin: var(--space-xSmall) 0;
-  font-size: var(--typeScale-1);
-`
-const Header = styled(Heading)`
-  text-align: var(--contactList-titleAlign, left);
-  margin: var(--contactList-titleMargin, 0 0 var(--space-xLarge) 0);
-`
-
->>>>>>> 9127c9a3 (:art: update)
 type ContactListProps = {
   data: ContactListData
   className?: string
 }
 
-<<<<<<< HEAD
-const ContactList = ({ data }: ContactListProps) => {
-  return (
-    <div className="flex flex-col pb-page-content px-layout-lg max-w-viewport">
-=======
-const ContactList = ({ data, className = '', ...rest }: ContactListProps) => {
+const ContactList = ({ data, className = '' }: ContactListProps) => {
   return (
-    <Wrapper {...rest} className={twMerge(`my-28 mx-auto flex flex-col py-0 px-6`, className)}>
->>>>>>> 9127c9a3 (:art: update)
+    <div className={twMerge(`mflex flex-col pb-page-content px-layout-lg max-w-viewport`, className)}>
       {data?.title && (
         <Heading className="pb-6 text-left" size="xl" level="h2">
           {data.title}
diff --git a/web/pageComponents/shared/iframe/IFrame.tsx b/web/pageComponents/shared/iframe/IFrame.tsx
index 243c56657..4f9afd6d1 100644
--- a/web/pageComponents/shared/iframe/IFrame.tsx
+++ b/web/pageComponents/shared/iframe/IFrame.tsx
@@ -35,6 +35,8 @@ type IFrameProps = {
   height?: number
   aspectRatio: string
   hasSectionTitle: boolean
+  /** id to element that describes iframe */
+  describedBy?: string
 } & HTMLAttributes<HTMLElement>
 
 const IFrame = ({
@@ -44,7 +46,8 @@ const IFrame = ({
   cookiePolicy = 'none',
   aspectRatio,
   height,
-  className,
+  className = '',
+  describedBy,
 }: IFrameProps) => {
   const { isPreview } = useContext(PreviewContext)
 
@@ -62,8 +65,8 @@ const IFrame = ({
 
   return (
     <>
-      <div className={`cookieconsent-optin-${cookiePolicy}  ${className}`}>
-        <IFrameContainer aspectRatioPadding={containerPadding}>
+      <div className={`cookieconsent-optin-${cookiePolicy} ${className}`}>
+        <IFrameContainer aria-describedby={describedBy} aspectRatioPadding={containerPadding}>
           <StyledIFrame
             allowFullScreen
             src={url}
diff --git a/web/pageComponents/shared/portableText/Blocks.tsx b/web/pageComponents/shared/portableText/Blocks.tsx
index f864ad929..ca3358e1d 100644
--- a/web/pageComponents/shared/portableText/Blocks.tsx
+++ b/web/pageComponents/shared/portableText/Blocks.tsx
@@ -38,6 +38,7 @@ const defaultTypes: TypesType = {
   positionedInlineImage: (props) => <FigureWithLayout {...props} />,
   //@ts-ignore
   pullQuote: (props) => <Quote {...props} className="not-prose" />,
+  //@ts-ignore
   basicIframe: (props) => <BasicIframe {...props} className="not-prose px-layout-md" />,
 }
 
@@ -67,6 +68,10 @@ type BlockProps = {
    * Override other styling to the wrapping block
    */
   className?: string
+  /**
+   * If needed to connect with aria-describedby and such
+   */
+  id?: string
 } & PortableTextProps
 
 const inlineBlockTypes = ['block', 'positionedInlineImage', 'pullQuote', 'basicIframe']
@@ -80,6 +85,7 @@ export default function Blocks({
   components,
   proseClassName = '',
   className = '',
+  id,
 }: BlockProps) {
   let div: PortableTextBlock[] = []
 
@@ -118,7 +124,7 @@ export default function Blocks({
             div = []
 
             return (
-              <div key={block._key} className={twMerge(`prose ${proseClassName} dark:prose-invert`, className)}>
+              <div key={block._key} className={twMerge(`prose ${proseClassName} dark:prose-invert`, className)} id={id}>
                 <PortableText
                   value={value}
                   //@ts-ignore
diff --git a/web/pageComponents/shared/portableText/IngressText.tsx b/web/pageComponents/shared/portableText/IngressText.tsx
index 8d827bf09..9015e701a 100644
--- a/web/pageComponents/shared/portableText/IngressText.tsx
+++ b/web/pageComponents/shared/portableText/IngressText.tsx
@@ -1,16 +1,18 @@
 import { PortableTextProps } from '@portabletext/react'
 import Blocks from './Blocks'
+import { twMerge } from 'tailwind-merge'
 
 type IngressTextProps = {
   centered?: boolean
+  className?: string
 } & PortableTextProps
 
-const IngressText = ({ value, centered = false, components = {}, ...rest }: IngressTextProps) => {
+const IngressText = ({ value, centered = false, components = {}, className = '', ...rest }: IngressTextProps) => {
   return (
     <Blocks
       value={value}
       proseClassName="prose-md"
-      className={`${centered ? 'text-center' : ''}`}
+      className={twMerge(`${centered ? 'text-center' : ''}`, className)}
       components={components}
       {...rest}
     />
diff --git a/web/pageComponents/shared/portableText/components/BasicIframe.tsx b/web/pageComponents/shared/portableText/components/BasicIframe.tsx
index dba575af6..f28c6dc8d 100644
--- a/web/pageComponents/shared/portableText/components/BasicIframe.tsx
+++ b/web/pageComponents/shared/portableText/components/BasicIframe.tsx
@@ -1,10 +1,10 @@
 import IFrame from '../../iframe/IFrame'
-
 import type { PortableTextBlock } from '@portabletext/types'
 import type { IFrameData } from 'types/types'
 import styled from 'styled-components'
-import RichText from '../RichText'
 import { twMerge } from 'tailwind-merge'
+import { useId } from '@equinor/eds-utils'
+import Blocks from '../Blocks'
 
 type IframeRenderer = {
   _key: string
@@ -15,7 +15,7 @@ const Container = styled.div`
   clear: both;
 `
 type BlockProps = {
-  isInline: boolean
+  isInline?: boolean
   value: IframeRenderer
   className?: string
 } & PortableTextBlock
@@ -27,10 +27,12 @@ export const BasicIframe = (iframe: BlockProps) => {
     type: value._type,
     id: value._key,
   }
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+  const iframeTitle = useId(null, 'iframe')
 
   return (
-    <Container className={twMerge(`my-14 mx-auto`, className)}>
-      {value.title && <RichText value={value.title} />}
+    <Container className={twMerge(`my-14 mx-auto flex flex-col gap-2`, className)}>
       <IFrame
         frameTitle={data.frameTitle}
         url={data.url}
@@ -38,7 +40,9 @@ export const BasicIframe = (iframe: BlockProps) => {
         aspectRatio={data.designOptions.aspectRatio}
         height={data.designOptions.height}
         hasSectionTitle={!!data.title}
+        describedBy={iframeTitle}
       />
+      {value.title && <Blocks value={value.title} id={iframeTitle} className="text-sm" />}
     </Container>
   )
 }
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
index b4c726b7b..9ce591839 100644
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -204,6 +204,7 @@ module.exports = {
         'layout-sm': 'clamp(16px, calc(-38.3689px + 14.4984vw), 250px)',
         'layout-md': 'clamp(16px, calc(-69.4369px + 22.7832vw), 368px)',
         'layout-lg': 'clamp(16px, calc(-101.4757px + 31.3269vw), 500px)',
+        'page-content': 'theme(spacing.16)',
       },
       margin: {
         'layout-sm': 'clamp(16px, calc(-38.3689px + 14.4984vw), 250px)',