Apply feedback and add alignment example

aries-site/src/examples/foundation/date-and-time/DateAlignmentExample.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { DataTable } from 'grommet';
+
+// could be expanded to weeks, months, etc.
+const getDuration = (start, end) => {
+  const difference = end.getTime() - start.getTime();
+  const hours = difference / (1000 * 60 * 60);
+  const minutes = (hours % 1) * 60;
+  const seconds = (minutes % 1) * 60;
+
+  const formattedTime = {
+    hours: Math.floor(hours),
+    minutes: Math.floor(minutes),
+    seconds: Math.floor(seconds),
+  };
+
+  return `${formattedTime.hours ? `${formattedTime.hours} hr` : ''} ${
+    formattedTime.minutes ? `${formattedTime.minutes} min` : ''
+  } ${formattedTime.seconds ? `${formattedTime.seconds} sec` : ''}`;
+};
+
+export const DateAlignmentExample = () => {
+  // in production, this should just be new Date();
+  const mockNow = new Date('2023-05-20T08:32:18.000Z');
+  return (
+    <DataTable
+      columns={[
+        {
+          property: 'triggerTime',
+          header: 'Trigger time',
+        },
+        {
+          property: 'id',
+          header: 'Duration',
+          align: 'end',
+          render: datum => getDuration(new Date(datum.triggerTime), mockNow),
+        },
+      ]}
+      sort={{ property: 'triggerTime', direction: 'desc' }}
+      data={[
+        {
+          id: 0,
+          triggerTime: '2023-05-20T07:32:08.000Z',
+        },
+        {
+          id: 1,
+          triggerTime: '2023-05-20T07:45:15.000Z',
+        },
+        {
+          id: 2,
+          triggerTime: '2023-05-20T04:30:24.000Z',
+        },
+        {
+          id: 3,
+          triggerTime: '2023-05-20T07:49:30.000Z',
+        },
+        {
+          id: 4,
+          triggerTime: '2023-05-20T07:53:46.000Z',
+        },
+      ]}
+    />
+  );
+};

aries-site/src/examples/foundation/date-and-time/index.js

@@ -1,4 +1,5 @@
 export * from './AbbreviatedDateExample';
+export * from './DateAlignmentExample';
 export * from './DateTimeNotificationExample';
 export * from './RelativeTimeExample';
 export * from './TimezoneExample';

aries-site/src/pages/foundation/date-and-time.mdx

@@ -1,6 +1,7 @@
 import { BestPracticeGroup, Example } from '../../layouts';
 import {
   AbbreviatedDateExample,
+  DateAlignmentExample,
   DateTimeNotificationExample,
   RelativeTimeExample,
   TimezoneExample,
@@ -148,6 +149,7 @@ When displaying relative time:
 
 - Adapt and show the appropriate unit of time. For example, after 60 minutes, display hours.
 - Unless required, displaying the time for anything less than a second and more than a week is generally not needed.
+- Zero values should not be included as this will cause issues with alignment. For example, do not show when something is at "0 minutes".
 - For older events, such as anything that happened more than a week ago, consider using [absolute time](#absolute-time) instead.
 - Consider whether or not it's important for users to be able to see the absolute time as well. This could be placed within a tooltip or displayed on a detail page.
 
@@ -215,10 +217,10 @@ To abbreviate days of the week or months, use the [Javascript Intl.DateTimeForma
 
 ## Alignment
 
-When presenting dates in a column, right-align [relative times](#relative-time) to bring units of the same magnitude into alignment.
+By default, left-align dates and times. When presenting dates in a column, right-align [relative times](#relative-time) to bring units of the same magnitude into alignment.
 
 <Example>
-  <RelativeTimeExample />
+  <DateAlignmentExample />
 </Example>
 
 ## Zero-padding