DateDetails: handle not passing in system timezones (#580)

Author: hoorayimhelping

src/components/DateDetails/DateDetails.stories.tsx

@@ -38,7 +38,7 @@ export const Playground = {
   args: {
     date: new Date(),
     side: "top",
-    systemTimeZone: "America/Los_Angeles",
+    systemTimeZone: undefined,
     title: "DateDetails",
   },
   render: (args: Args) => {

src/components/DateDetails/DateDetails.test.tsx

@@ -55,6 +55,30 @@ describe("DateDetails", () => {
     expect(getByText(fiveMinutesAgo.getTime() / 1000)).toBeInTheDocument();
   });
 
+  it("allows for not passing in a system timezone", () => {
+    const baseDate = new Date("2024-12-24 11:45:00 AM");
+    vi.setSystemTime(baseDate);
+
+    const fiveMinutesAgo = new Date("2024-12-24 11:40:00 AM");
+
+    const { getByText, queryByText } = renderCUI(<DateDetails date={fiveMinutesAgo} />);
+
+    const trigger = getByText("5 minutes ago");
+    expect(trigger).toBeInTheDocument();
+
+    fireEvent.click(trigger);
+    expect(
+      getByText(content => {
+        return content.includes("EST");
+      })
+    ).toBeInTheDocument();
+
+    expect(getByText("Dec 24, 4:40 p.m.")).toBeInTheDocument();
+    expect(getByText("Dec 24, 11:40 a.m. (EST)")).toBeInTheDocument();
+    expect(queryByText("System")).not.toBeInTheDocument();
+    expect(getByText(fiveMinutesAgo.getTime() / 1000)).toBeInTheDocument();
+  });
+
   it("only shows the date if the previous date isn't in this year", () => {
     const baseDate = new Date("2025-02-07 11:45:00 AM");
     const systemTimeZone = "America/Los_Angeles";

src/components/DateDetails/DateDetails.tsx

@@ -17,6 +17,7 @@ import { Container } from "@/components/Container/Container";
 dayjs.extend(advancedFormat);
 dayjs.extend(duration);
 dayjs.extend(localizedFormat);
+dayjs.extend(timezone);
 dayjs.extend(updateLocale);
 dayjs.extend(utc);
 
@@ -89,7 +90,7 @@ const formatDateDetails = (date: Dayjs, timezone?: string): string => {
   return date.format(formatForPastYear).replace("am", "a.m.").replace("pm", "p.m.");
 };
 
-const formatTimezone = (date: Dayjs, timezone: string): string => {
+const formatTimezone = (date: Dayjs, timezone?: string): string => {
   return (
     new Intl.DateTimeFormat(undefined, {
       timeZone: timezone,
@@ -108,16 +109,11 @@ export interface DateDetailsProps {
   systemTimeZone?: string;
 }
 
-export const DateDetails = ({
-  date,
-  side = "top",
-  systemTimeZone = "America/New_York",
-}: DateDetailsProps) => {
+export const DateDetails = ({ date, side = "top", systemTimeZone }: DateDetailsProps) => {
   const dayjsDate = dayjs(date);
 
   let systemTime;
   if (systemTimeZone) {
-    dayjs.extend(timezone);
     try {
       systemTime = dayjsDate.tz(systemTimeZone);
     } catch {