🎨 adjustments

equinor · Dec 19, 2024 · 7642130 · 7642130
1 parent 3774b5f
commit 7642130
Show file tree

Hide file tree

Showing 15 changed files with 169 additions and 126 deletions.
diff --git a/web/core/Link/ResourceLink.tsx b/web/core/Link/ResourceLink.tsx
@@ -7,12 +7,16 @@ import { TransformableIcon } from '../../icons/TransformableIcon'
 import { add, calendar } from '@equinor/eds-icons'
 import { PiFilePdfThin } from 'react-icons/pi'
 
-export type Variants = 'default' | 'fit' | 'compact'
+export type Variants = 'default' | 'fit'
 
 export type ResourceLinkProps = {
   variant?: Variants
   /** Overriding styles for the icon  */
   iconClassName?: string
+  /** Overriding styles for the text */
+  textClassName?: string
+  /** When using aria-label on the link, e.g add to calendar  */
+  ariaHideText?: boolean
   /** What kind of content is it  */
   type?: LinkType
   /* Link extension */
@@ -29,32 +33,14 @@ export const ResourceLink = forwardRef<HTMLAnchorElement, ResourceLinkProps>(fun
     extension,
     className = '',
     iconClassName = '',
+    textClassName = '',
     showExtensionIcon = false,
+    ariaHideText = false,
     href = '',
     ...rest
   },
   ref,
 ) {
-  const variantClassName: Partial<Record<Variants, string>> = {
-    default: 'w-full pt-5',
-    fit: 'w-fit pt-5',
-    compact: 'w-fit pt-4',
-  }
-
-  const baseResourceLinkClassNames = `group
-    relative
-    flex
-    flex-col
-    justify-end
-    gap-0
-    text-slate-blue-95
-    dark:text-white-100
-    border-b
-    border-grey-50
-    dark:border-white-100
-    no-underline
-  `
-
   const iconRotation: Record<string, string> = {
     externalUrl: '-rotate-45',
     downloadableFile: 'rotate-90',
@@ -68,11 +54,11 @@ export const ResourceLink = forwardRef<HTMLAnchorElement, ResourceLinkProps>(fun
       case 'downloadableImage':
         return 'group-hover:translate-y-0.5'
       case 'anchorLink':
-        return 'group-hover:translate-y-2'
+        return 'translate-y-0.5 group-hover:translate-y-2'
       case 'icsLink':
-        return ''
+        return 'translate-y-0.5'
       default:
-        return 'group-hover:translate-x-2'
+        return 'translate-y-0.5 group-hover:translate-x-2'
     }
   }
 
@@ -89,75 +75,120 @@ export const ResourceLink = forwardRef<HTMLAnchorElement, ResourceLinkProps>(fun
     `,
       iconClassName,
     )
+    const marginClassName = `ml-6 xl:ml-8`
 
     switch (type) {
       case 'downloadableFile':
       case 'downloadableImage':
         return (
-          <span className="flex flex-col px-1">
+          <div className={`flex flex-col px-1 ${marginClassName} translate-y-[1px]`}>
             <ArrowRight className={iconClassNames} />
-            <span className="bg-energy-red-100 h-[2px] w-full" />
-          </span>
+            <div className="bg-energy-red-100 h-[2px] w-full" />
+          </div>
         )
       case 'icsLink':
-        return <TransformableIcon iconData={add} className={iconClassNames} />
+        return <TransformableIcon iconData={add} className={`${marginClassName} ${iconClassNames}`} />
       default:
-        return <ArrowRight className={iconClassNames} />
+        return <ArrowRight className={`${marginClassName} ${iconClassNames}`} />
     }
   }
 
+  const variantClassName: Partial<Record<Variants, string>> = {
+    default: 'w-full pt-3',
+    fit: 'w-fit pt-3',
+  }
+
   const contentVariantClassName: Partial<Record<Variants, string>> = {
-    default: 'pb-3 pr-2 gap-6 xl:gap-16',
-    fit: 'pb-3 pr-2 gap-6 xl:gap-16', //gap-14
-    compact: 'text-sm pb-2 gap-6',
+    default: 'pb-3 pr-2',
+    fit: 'pb-3 pr-2',
   }
 
   const classNames = envisTwMerge(
-    `${baseResourceLinkClassNames}
+    `group
+    relative
+    flex
+    flex-col
+    justify-end
+    gap-0
+    text-slate-blue-95
+    dark:text-white-100
+    border-b
+    border-grey-50
+    dark:border-white-100
+    no-underline
     ${variantClassName[variant]}
   `,
     className,
   )
 
   const getContentElements = () => {
+    const textClassNames = envisTwMerge(`pt-1 grow leading-none`, textClassName)
     switch (type) {
       case 'downloadableFile':
         return extension && extension.toUpperCase() === 'PDF' && showExtensionIcon ? (
-          <span className="flex gap-2">
-            <PiFilePdfThin />
-            {children}
-          </span>
+          <>
+            <PiFilePdfThin size={24} className="mr-2" />
+            <div
+              className={textClassNames}
+              {...(ariaHideText && {
+                'aria-hidden': true,
+              })}
+            >
+              {children}
+            </div>
+          </>
         ) : (
-          <>{children}</>
+          <div
+            className={textClassNames}
+            {...(ariaHideText && {
+              'aria-hidden': true,
+            })}
+          >
+            {children}
+          </div>
         )
       case 'icsLink':
         return (
-          <span className="flex gap-2">
-            <TransformableIcon iconData={calendar} />
-            {children}
-          </span>
+          <>
+            <TransformableIcon iconData={calendar} className="mr-2" />
+            <div
+              className={textClassNames}
+              {...(ariaHideText && {
+                'aria-hidden': true,
+              })}
+            >
+              {children}
+            </div>
+          </>
         )
       default:
-        return <>{children}</>
+        return (
+          <div
+            className={textClassNames}
+            {...(ariaHideText && {
+              'aria-hidden': true,
+            })}
+          >
+            {children}
+          </div>
+        )
     }
   }
   return (
     <BaseLink className={classNames} type={type} ref={ref} href={href} {...rest}>
-      <span
+      <div
         className={envisTwMerge(
-          `grid 
-        grid-cols-[1fr_max-content]
-        text-start
+          `h-full flex
+          justify-start
         items-center
-        leading-tight
         ${contentVariantClassName[variant]}`,
         )}
       >
         {getContentElements()}
         {extension && !showExtensionIcon ? `(${extension.toUpperCase()})` : ''}
         {getArrowElement(type, iconClassName)}
-      </span>
-      <span className="w-[0%] h-[1px] bg-grey-40 transition-all duration-300 group-hover:w-full" />
+      </div>
+      <div className="w-[0%] h-[1px] bg-grey-40 transition-all duration-300 group-hover:w-full" />
     </BaseLink>
   )
 })

diff --git a/web/pageComponents/news/LatestNews.tsx b/web/pageComponents/news/LatestNews.tsx
@@ -11,32 +11,29 @@ type LatestNewsProp = {
 }
 
 const LatestNews = ({ data }: LatestNewsProp) => {
-  const isMobile = useMediaQuery(`(max-width: 1023px)`)
+  const isMobile = useMediaQuery(`(max-width: 800px)`)
 
   return (
     <section
-      className="px-4 lg:px-layout-sm
-    max-w-viewport
-    my-3xl
-    mx-auto
-    flex
-    flex-col
-    items-center
+      className=" 
+      max-w-viewport
+      px-layout-sm
+      3xl:px-layout-md
+      my-3xl
+      mx-auto
+      flex
+      flex-col
+      items-center
     "
     >
       <Typography variant="xl" as="h2" className="mb-10">
         <FormattedMessage id="latest_news" defaultMessage="Latest News" />
       </Typography>
-      <ul className="max-lg:w-full grid grid-cols-1 auto-rows-fr gap-x-6 gap-y-3 lg:grid-cols-3">
+      <ul className="max-lg:w-full grid grid-cols-1 auto-rows-fr gap-x-6 gap-y-3 md:grid-flow-col md:auto-cols-fr">
         {data.map((newsItem: CardData) => {
           return (
             <li key={newsItem.id} className="">
-              <Card
-                href={newsItem?.slug}
-                image={newsItem?.heroImage?.image}
-                variant={isMobile ? 'compact' : 'primary'}
-                className="h-full"
-              >
+              <Card href={newsItem?.slug} image={newsItem?.heroImage?.image} variant={isMobile ? 'compact' : 'primary'}>
                 <Card.Content variant={isMobile ? 'compact' : 'primary'}>
                   <Card.Header
                     {...(typeof newsItem?.title === 'string'

diff --git a/web/pageComponents/shared/SanityImage.tsx b/web/pageComponents/shared/SanityImage.tsx
@@ -20,6 +20,7 @@ export enum Ratios {
   FOUR_TO_FIVE = 0.8,
   ONE_TO_ONE = 1,
   FIVE_TO_FOUR = 1.25,
+  FOUR_TO_THREE = 1.33,
 }
 
 const DEFAULT_SIZES = '(max-width: 800px) 100vw, 800px'

diff --git a/web/pageComponents/topicPages/AddToCalendar.tsx b/web/pageComponents/topicPages/AddToCalendar.tsx
@@ -3,8 +3,6 @@ import { isAfter } from 'date-fns'
 import { getEventDates, toUTCDateParts } from '../../common/helpers/dateUtilities'
 import type { EventDateType } from '../../types/index'
 import { useIntl } from 'react-intl'
-import { twMerge } from 'tailwind-merge'
-import { commonButtonStyling, getVariant } from '@core/Button'
 import { ResourceLink } from '@core/Link'
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -100,9 +98,10 @@ const AddToCalendar = ({ eventDate, title, location }: AddToCalendarProps) => {
       download={`${title.replace(/ /g, '_')}.ics`}
       type="icsLink"
       aria-label={atcAriaLabel}
-      variant="compact"
+      variant="fit"
+      ariaHideText
     >
-      <span aria-hidden>{atc}</span>
+      {atc}
     </ResourceLink>
   ) : null
 }

diff --git a/web/pageComponents/topicPages/NewsList.tsx b/web/pageComponents/topicPages/NewsList.tsx
@@ -36,7 +36,10 @@ const NewsList = ({
   }
 
   return (
-    <div id={anchor} className={twMerge(`pb-page-content px-layout-lg max-w-viewport mx-auto`, className)}>
+    <div
+      id={anchor}
+      className={twMerge(`pb-page-content px-layout-sm 3xl:px-layout-md max-w-viewport mx-auto`, className)}
+    >
       {title && <StyledHeading value={title} level="h2" size="xl" />}
       <div className="grid gap-x-6 gap-y-8 sm:grid-cols-2 xl:grid-cols-3" {...rest}>
         {pagedArticles.map((article) => (

diff --git a/web/pageComponents/topicPages/Promotion.tsx b/web/pageComponents/topicPages/Promotion.tsx
@@ -25,39 +25,41 @@ const Promotion = ({
   const promoteSingleUpcomingEvent = data?.content?.eventPromotionSettings?.promoteSingleUpcomingEvent
   const sectionTitleId = useId()
 
+  const paddingClassName = `px-layout-sm 3xl:px-layout-lg`
+
   return (
     <BackgroundContainer {...designOptions} id={anchor} renderFragmentWhenPossible>
-      <div className={twMerge(`pb-page-content max-w-viewport mx-auto flex flex-col`, className)} {...rest}>
+      <div className={twMerge(`pb-page-content max-w-viewport mx-auto flex flex-col gap-6`, className)} {...rest}>
         {title && (
           <Heading
             id={sectionTitleId}
             value={title}
             as="h2"
             variant="xl"
-            className={`w-full px-layout-lg ${!ingress && viewAllLink?.link?.slug ? 'mb-5' : 'mb-10'}`}
+            className={`w-full ${paddingClassName} ${!ingress && viewAllLink?.link?.slug ? '' : ''}`}
           />
         )}
         {ingress && (
-          <div className={`px-layout-lg ${viewAllLink?.link?.slug ? 'mb-12 xl:mb-16' : 'mb-12 xl:mb-20'}`}>
+          <div className={`${paddingClassName} ${viewAllLink?.link?.slug ? '' : ''}`}>
             <IngressText value={ingress} />
           </div>
         )}
         {viewAllLink?.link?.slug && (
-          <div className="px-layout-lg mb-12 xl:mb-20">
+          <div className={`${paddingClassName}`}>
             <ResourceLink type="internalUrl" variant="fit" href={viewAllLink?.link?.slug}>
               {viewAllLink?.label}
             </ResourceLink>
           </div>
         )}
         <div
-          className={`${
+          className={`pt-6 ${
             (variant === 'promoteEvents' &&
               (promoteSingleUpcomingEvent ||
                 promotions?.length === 1 ||
                 data?.content?.eventPromotionSettings?.promotePastEvents)) ||
             (variant === 'promotePeople' && promotions?.length === 1)
-              ? 'px-layout-lg'
-              : 'px-layout-lg xl:px-layout-sm'
+              ? 'px-layout-sm md:px-layout-lg'
+              : `px-layout-sm 3xl:px-layout-md`
           }`}
         >
           {promotions?.length === 1 || promoteSingleUpcomingEvent ? (

diff --git a/web/pageComponents/topicPages/promotions/MultipleEventCards.tsx b/web/pageComponents/topicPages/promotions/MultipleEventCards.tsx
@@ -52,7 +52,8 @@ const MultipleEventCards = ({
                 justify-center
                 content-center
                 auto-rows-auto
-                md:${data.length === 2 ? 'grid-cols-2 grid-rows-1' : 'grid-cols-3 grid-rows-1'}`}
+                md:grid-cols-2
+                2xl:grid-cols-3`}
             >
               {data.map((item) => {
                 return (

diff --git a/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx b/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx
@@ -111,8 +111,7 @@ const MultiplePromotions = ({
       content-center
       grid-cols-1
       auto-rows-fr
-      xl:grid-cols-[repeat(3,theme(spacing.card-maxWidth))]
-      xl:grid-rows-1`)}
+      ${data?.length === 3 ? 'md:grid-cols-3' : 'md:grid-cols-2 2xl:grid-cols-3'}`)}
     >
       <>
         {data.map((item) => {

diff --git a/web/sections/CallToActions/index.tsx b/web/sections/CallToActions/index.tsx
@@ -41,7 +41,7 @@ const CallToActions = ({ callToActions = [], splitList, className }: CallToActio
   ) : (
     <ul
       className={envisTwMerge(
-        `grid grid-cols-[max-content] ${splitList ? 'md:grid md:grid-cols-2 gap-x-8 gap-y-6 items-end' : ''}
+        `grid grid-cols-[max-content] gap-x-8 gap-y-6 ${splitList ? 'md:grid md:grid-cols-2 items-end' : ''}
      `,
         className,
       )}

diff --git a/web/sections/PromoTiles/PromoTile.tsx b/web/sections/PromoTiles/PromoTile.tsx
@@ -30,7 +30,7 @@ export const PromoTile = forwardRef<HTMLAnchorElement, PromoTileProps>(function
       ref={ref}
       image={image}
       variant="secondary"
-      className={`w-full h-full md:max-w-[100%] ${background?.dark ? 'dark' : ''} `}
+      className={`${background?.dark ? 'dark' : ''} `}
     >
       <Card.Content variant="secondary" className={`${twBg}`}>
         <Card.Header