Merge branch 'malj/2239' into staging

web/pageComponents/pageTemplates/Event.tsx

@@ -7,12 +7,12 @@ import TitleText from '../shared/portableText/TitleText'
 import AddToCalendar from '../topicPages/AddToCalendar'
 import Promotion from '../topicPages/Promotion'
 import RelatedContent from '../shared/RelatedContent'
-
 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,14 +66,8 @@ export default function Event({ data }: { data: EventSchema }): JSX.Element {
              lg:px-0
              `}
             >
-              {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>
-              )}
+              {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>
           )}
           {promotedPeople?.people && promotedPeople?.people.length > 0 && (
@@ -86,7 +80,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

web/pageComponents/shared/ContactList.tsx

@@ -2,14 +2,16 @@ import { HTMLAttributes } from 'react'
 import type { ContactListData } from '../../types/types'
 import { Text, Heading } from '@components'
 import { removeWhiteSpace } from '../../common/helpers/removeWhiteSpace'
+import { twMerge } from 'tailwind-merge'
 
 type ContactListProps = {
   data: ContactListData
+  className?: string
 } & HTMLAttributes<HTMLDivElement>
 
-const ContactList = ({ data }: ContactListProps) => {
+const ContactList = ({ data, className = '' }: ContactListProps) => {
   return (
-    <div className="flex flex-col pb-page-content px-layout-lg max-w-viewport">
+    <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}

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

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}

web/pageComponents/shared/portableText/Blocks.tsx

@@ -38,6 +38,8 @@ 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" />,
 }
 
 type BlockProps = {
@@ -66,9 +68,13 @@ 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']
+const inlineBlockTypes = ['block', 'positionedInlineImage', 'pullQuote', 'basicIframe']
 
 //@ts-ignore
 export default function Blocks({
@@ -79,6 +85,7 @@ export default function Blocks({
   components,
   proseClassName = '',
   className = '',
+  id,
 }: BlockProps) {
   let div: PortableTextBlock[] = []
 
@@ -117,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

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}
     />

web/pageComponents/shared/portableText/components/BasicIframe.tsx

@@ -1,43 +1,48 @@
 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
   _type: string
 } & IFrameData
 
 const Container = styled.div`
-  margin: var(--space-xxLarge) auto;
   clear: both;
 `
 type BlockProps = {
-  isInline: boolean
+  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,
     id: value._key,
   }
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+  const iframeTitle = useId(null, 'iframe')
 
   return (
-    <Container>
-      {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}
         cookiePolicy={data.cookiePolicy}
         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>
   )
 }