Merge branch 'malj/2800' into staging

equinor · Feb 12, 2025 · c9bf163 · c9bf163
2 parents df5a8d1 + cfe22cd
commit c9bf163
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/web/components/src/FormattedDateTime/FormattedTime.tsx b/web/components/src/FormattedDateTime/FormattedTime.tsx
@@ -1,7 +1,6 @@
 import { HTMLAttributes } from 'react'
 import { FormattedTime as ReactIntlTime } from 'react-intl'
 import { StyledDate, TimeIcon } from './shared'
-import styled from 'styled-components'
 
 export type FormattedTimeProps = {
   datetime: string
@@ -10,11 +9,6 @@ export type FormattedTimeProps = {
   small?: boolean
 } & HTMLAttributes<HTMLSpanElement>
 
-const SmallText = styled.span<{ small?: boolean }>`
-  font-size: ${(props) => (props.small ? 'var(--typeScale-0)' : 'var(--typeScale-1)')};
-  margin-top: ${(props) => (props.small ? 'var(--space-3)' : '0')};
-`
-
 export const FormattedTime = ({
   datetime,
   icon = false,
@@ -26,7 +20,7 @@ export const FormattedTime = ({
   return (
     <StyledDate {...rest}>
       {icon && <TimeIcon />}
-      <SmallText small={small}>
+      <span className={`${small ? 'text-2xs mt-1' : 'text-xs mt-0'}`}>
         <time suppressHydrationWarning dateTime={datetime}>
           <ReactIntlTime value={date} />
         </time>
@@ -35,7 +29,7 @@ export const FormattedTime = ({
             ({date.toLocaleTimeString('es-NO', { timeZoneName: 'short' }).split(' ')[1]})
           </span>
         )}
-      </SmallText>
+      </span>
     </StyledDate>
   )
 }
diff --git a/web/templates/newsroom/NewsSections/NewsHeadliner.tsx b/web/templates/newsroom/NewsSections/NewsHeadliner.tsx
@@ -1,4 +1,4 @@
-import { FormattedDate } from '@components/FormattedDateTime'
+import { FormattedDate, FormattedTime } from '@components/FormattedDateTime'
 import { forwardRef, HTMLAttributes } from 'react'
 import { BaseLink } from '@core/Link'
 import { Typography } from '@core/Typography'
@@ -50,7 +50,16 @@ const NewsHeadliner = forwardRef<HTMLLIElement, NewsHeadlinerProps>(function New
           </div>
         )}
         {publishDateTime && (
-          <FormattedDate datetime={publishDateTime} uppercase className="text-2xs font-normal leading-normal" />
+          <div>
+            <FormattedDate datetime={publishDateTime} uppercase className="text-2xs font-normal leading-normal" />
+            <span className="mx-2 text-2xs font-normal leading-normal pb-1">|</span>
+            <FormattedTime
+              small
+              timezone
+              datetime={publishDateTime}
+              className="text-2xs font-normal leading-normal pb-1"
+            />
+          </div>
         )}
         {title && (
           <Typography as="h2" variant="md" className="group-hover:underline">

diff --git a/web/templates/newsroom/NewsSections/NewsItem.tsx b/web/templates/newsroom/NewsSections/NewsItem.tsx
@@ -1,4 +1,4 @@
-import { FormattedDate } from '@components/FormattedDateTime'
+import { FormattedDate, FormattedTime } from '@components/FormattedDateTime'
 import { forwardRef, HTMLAttributes } from 'react'
 import { BaseLink } from '@core/Link'
 import { Typography } from '@core/Typography'
@@ -24,7 +24,20 @@ const NewsItem = forwardRef<HTMLLIElement, NewsListItemProps>(function NewsItem(
       <BaseLink href={slug} className="group flex justify-between gap-4 lg:gap-6">
         <div className="max-w-[65%]">
           {publishDateTime && (
-            <FormattedDate datetime={publishDateTime} uppercase className="text-2xs font-normal leading-normal pb-1" />
+            <div>
+              <FormattedDate
+                datetime={publishDateTime}
+                uppercase
+                className="text-2xs font-normal leading-normal pb-1"
+              />
+              <span className="mx-2 text-2xs font-normal leading-normal pb-1">|</span>
+              <FormattedTime
+                small
+                timezone
+                datetime={publishDateTime}
+                className="text-2xs font-normal leading-normal pb-1"
+              />
+            </div>
           )}
           {title && (
             <Typography as="h2" variant="base" className="max-w-text text-pretty group-hover:underline">