From cfe22cde87bf1286e75080d26a4a62ae9d161ab5 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Thu, 6 Feb 2025 15:57:23 +0100
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20fix:=20Add=20timestamp=20on=20n?=
 =?UTF-8?q?ewsroom=20#2800?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/FormattedDateTime/FormattedTime.tsx     | 10 ++--------
 .../newsroom/NewsSections/NewsHeadliner.tsx     | 13 +++++++++++--
 .../newsroom/NewsSections/NewsItem.tsx          | 17 +++++++++++++++--
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/web/components/src/FormattedDateTime/FormattedTime.tsx b/web/components/src/FormattedDateTime/FormattedTime.tsx
index e5aaeb8cd..6f3769655 100644
--- 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
index 6a1ae6c83..7f12992ad 100644
--- 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
index b9f1af20b..5ae376785 100644
--- 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">

From 882339139f1d1fb734e49739995fddac0026caa2 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Mon, 17 Feb 2025 16:08:43 +0100
Subject: [PATCH 2/2] remove textsize adjustment #2800

---
 web/components/src/FormattedDateTime/FormattedTime.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/components/src/FormattedDateTime/FormattedTime.tsx b/web/components/src/FormattedDateTime/FormattedTime.tsx
index 6f3769655..d14d319a7 100644
--- a/web/components/src/FormattedDateTime/FormattedTime.tsx
+++ b/web/components/src/FormattedDateTime/FormattedTime.tsx
@@ -20,7 +20,7 @@ export const FormattedTime = ({
   return (
     <StyledDate {...rest}>
       {icon && <TimeIcon />}
-      <span className={`${small ? 'text-2xs mt-1' : 'text-xs mt-0'}`}>
+      <span className={`${small ? 'text-2xs mt-1' : 'mt-0'}`}>
         <time suppressHydrationWarning dateTime={datetime}>
           <ReactIntlTime value={date} />
         </time>