From f4fc6fd5986e76ba4ac73ef16034ada021f2e7ed Mon Sep 17 00:00:00 2001
From: Bucky Schwarz <d.w.schwarz@gmail.com>
Date: Fri, 20 Dec 2024 16:10:14 -0500
Subject: [PATCH] made it closer match the designs

---
 src/components/DateTime/DateTime.stories.tsx |  7 ++
 src/components/DateTime/DateTime.tsx         | 99 +++++++++++---------
 2 files changed, 64 insertions(+), 42 deletions(-)

diff --git a/src/components/DateTime/DateTime.stories.tsx b/src/components/DateTime/DateTime.stories.tsx
index 4b8434df..71331f36 100644
--- a/src/components/DateTime/DateTime.stories.tsx
+++ b/src/components/DateTime/DateTime.stories.tsx
@@ -8,6 +8,12 @@ export default {
         type: "select",
       },
     },
+    side: {
+      control: {
+        type: "select",
+      },
+      options: ["top", "right", "left", "bottom"],
+    },
     systemTimeZone: {
       options: [
         "America/Denver",
@@ -34,6 +40,7 @@ export const Playground = {
   args: {
     date: new Date(),
     locale: "en-US",
+    side: "top",
     systemTimeZone: "America/Los_Angeles",
     title: "DateTime",
   },
diff --git a/src/components/DateTime/DateTime.tsx b/src/components/DateTime/DateTime.tsx
index d2d841ad..7de5a31b 100644
--- a/src/components/DateTime/DateTime.tsx
+++ b/src/components/DateTime/DateTime.tsx
@@ -1,17 +1,20 @@
 import dayjs from "dayjs";
+import advancedFormat from "dayjs/plugin/advancedFormat";
 import duration from "dayjs/plugin/duration";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import relativeTime from "dayjs/plugin/relativeTime";
 import timezone from "dayjs/plugin/timezone";
 import updateLocale from "dayjs/plugin/updateLocale";
 import utc from "dayjs/plugin/utc";
+import { styled } from "styled-components";
 
-import { Container } from "@/components/Container/Container";
-import { Panel } from "@/components/Panel/Panel";
 import { Popover } from "@/components/Popover/Popover";
 import { Text } from "@/components/Typography/Text/Text";
-import { styled } from "styled-components";
+import { linkStyles, StyledLinkProps } from "@/components/Link/common";
+import { GridContainer } from "@/components/GridContainer/GridContainer";
+import { Container } from "@/components/Container/Container";
 
+dayjs.extend(advancedFormat);
 dayjs.extend(duration);
 dayjs.extend(localizedFormat);
 dayjs.extend(updateLocale);
@@ -55,8 +58,8 @@ dayjs.updateLocale("en", {
   },
 });
 
-const UnderlinedTrigger = styled(Popover.Trigger)`
-  text-decoration: wavy underline;
+const UnderlinedTrigger = styled(Popover.Trigger)<StyledLinkProps>`
+  ${linkStyles}
 `;
 
 const dateStyle = "medium";
@@ -105,13 +108,21 @@ const formatDateTime = (date: Date, locale?: Intl.Locale, timeZone?: string) =>
   return dateTimeFormatter.format(date);
 };
 
+export type ArrowPosition = "top" | "right" | "left" | "bottom";
+
 export interface DateTimeProps {
   date: Date;
   locale?: Intl.Locale;
+  side?: ArrowPosition;
   systemTimeZone?: string;
 }
 
-export const DateTime = ({ date, locale, systemTimeZone }: DateTimeProps) => {
+export const DateTime = ({
+  date,
+  locale,
+  side = "top",
+  systemTimeZone,
+}: DateTimeProps) => {
   const dayjsDate = dayjs(date);
 
   let systemTime;
@@ -126,49 +137,53 @@ export const DateTime = ({ date, locale, systemTimeZone }: DateTimeProps) => {
 
   return (
     <Popover>
-      <UnderlinedTrigger>
+      <UnderlinedTrigger
+        $size="md"
+        $weight="medium"
+      >
         <Text size="sm">{dayjs.utc(date).fromNow()}</Text>
       </UnderlinedTrigger>
-      <Popover.Content showArrow>
-        <Container
-          orientation="vertical"
-          padding="none"
+      <Popover.Content
+        side={side}
+        showArrow
+      >
+        <GridContainer
+          columnGap="xl"
+          gridTemplateColumns="repeat(2, auto)"
+          gap="sm"
         >
-          <Container orientation="vertical">
-            <Text size="sm">{Math.round(date.getTime() / 1000)}</Text>
-            <Text size="sm">{date.toISOString()}</Text>
+          <Text size="md">Local</Text>
+          <Container justifyContent="end">
+            <Text size="md">
+              {formatDateTime(dayjsDate.toDate(), locale)} ({dayjsDate.format("z")})
+            </Text>
           </Container>
-          <Panel orientation="vertical">
-            <Container
-              orientation="horizontal"
-              justifyContent="space-between"
-            >
-              <Text size="md">UTC:</Text>
-              <Text size="md">
-                {formatDateTime(dayjsDate.utc().toDate(), locale, "UTC")}
-              </Text>
-            </Container>
-            <Container
-              orientation="horizontal"
-              justifyContent="space-between"
-            >
-              <Text size="md">Local ({dayjs.tz.guess()}):</Text>
-              <Text size="md">{formatDateTime(dayjsDate.toDate(), locale)}</Text>
-            </Container>
-            {systemTime && (
-              <Container
-                orientation="horizontal"
-                justifyContent="space-between"
-                minWidth="260px"
-              >
-                <Text size="md">System ({systemTimeZone}):</Text>
+
+          {systemTime && (
+            <>
+              <Text size="md">System</Text>
+
+              <Container justifyContent="end">
                 <Text size="md">
-                  {formatDateTime(systemTime.toDate(), locale, systemTimeZone)}
+                  {formatDateTime(systemTime.toDate(), locale, systemTimeZone)} (
+                  {systemTime.format("z")})
                 </Text>
               </Container>
-            )}
-          </Panel>
-        </Container>
+            </>
+          )}
+
+          <Text size="md">UTC</Text>
+          <Container justifyContent="end">
+            <Text size="md">
+              {formatDateTime(dayjsDate.utc().toDate(), locale, "UTC")}
+            </Text>
+          </Container>
+
+          <Text size="md">Unix</Text>
+          <Container justifyContent="end">
+            <Text size="md">{Math.round(date.getTime() / 1000)}</Text>
+          </Container>
+        </GridContainer>
       </Popover.Content>
     </Popover>
   );