Create RelativeTime component (#2484)

* Create RelativeTime component

Co-authored-by: Keith Cirkel <keithamus@users.noreply.github.com>

* add tests for RelativeTime

* add fallback to class prop for checkStylesDeep

class props will still render out correctly

* add snapshots

* add missing index file

* add changeset

* upgrade time-elements to latest

* add more story examples for relativetime

* add time-elements and lit-labs/react to rollup ESM_ONLY

* update snapshot tests

* add custom-elements polyfill for SSR

* prettier

* prettier

* bump @github/time-elements to v3.4.1

* add event stub

* drop event stub

* move polyfill locally to component

* upgrade time-elements to latest

* remove redundant custom-element polyfill

* Run ./script/setup

* add RelativeTime docs

* add RelativeTime docs link in nav

* fix up relativetime docs

* docs: make `datetime` a required prop

* docs: drop `string` from format type

* docs: make month defaultValue be numeric

* upgrade from time-elements@3 to relative-time-element@4

Co-authored-by: Cole Bemis <colebemis@github.com>

.changeset/giant-mails-battle.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add RelativeTime component

docs/content/RelativeTime.mdx

@@ -0,0 +1,143 @@
+---
+componentId: relative-time
+title: RelativeTime
+status: Alpha
+source: https://github.com/primer/react/blob/main/src/RelativeTime.tsx
+---
+
+```js
+import {RelativeTime} from '@primer/react'
+```
+
+Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.
+
+## Examples
+
+### Default
+
+```jsx live
+<>
+  <RelativeTime datetime="2014-04-01T16:30:00-08:00" />
+  <br/>
+  <RelativeTime date={new Date('2014-04-01T16:30:00-08:00')} format="micro" tense="past"/>
+  <br/>
+  <RelativeTime datetime="2014-04-01T16:30:00-08:00" format="elapsed"/>
+</>
+```
+
+## Props
+
+### RelativeTime
+
+<PropsTable>
+  <PropsTableRow
+    name="datetime"
+    type="string"
+    required
+    description="An ISO8601 time represeting the time"
+  />
+  <PropsTableRow
+    name="date"
+    type="string"
+    description="Instead of passing the `datetime`, it is possible to pass a full `Date` object into the `date` prop"
+  />
+  <PropsTableRow
+    name="format"
+    type="'auto' | 'micro' | 'elapsed'"
+    defaultValue="'auto'"
+    description="The format with which to display the time"
+  />
+  <PropsTableRow
+    name="tense"
+    type="'auto' | 'past' | 'future'"
+    defaultValue="'auto'"
+    description="The tense to use when displaying a relative time"
+  />
+  <PropsTableRow
+    name="precision"
+    type="'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'"
+    defaultValue="'second'"
+    description="The precision to use when displaying an elapsed time"
+  />
+  <PropsTableRow
+    name="threshold"
+    type="string"
+    defaultValue="'P30D'"
+    description="The threshold (ISO8601 duration) to display relative dates within"
+  />
+  <PropsTableRow
+    name="prefix"
+    type="string"
+    defaultValue="'on'"
+    description="The prefix to use when displaying a localised (non relative) date"
+  />
+  <PropsTableRow
+    name="second"
+    type="'numeric' | '2-digit'"
+    description="The format with which to render seconds"
+  />
+  <PropsTableRow
+    name="minute"
+    type="'numeric' | '2-digit'"
+    description="The format with which to render minutes"
+  />
+  <PropsTableRow
+    name="hour"
+    type="'numeric' | '2-digit'"
+    description="The format with which to render hours"
+  />
+  <PropsTableRow
+    name="weekday"
+    type="'short' | 'long' | 'narrow'"
+    description="The format with which to render weekdays"
+  />
+  <PropsTableRow
+    name="day"
+    type="'numeric' | '2-digit'"
+    description="The format with which to render days"
+  />
+  <PropsTableRow
+    name="month"
+    type="'numeric' | '2-digit' | 'short' | 'long' | 'narrow'"
+    defaultValue="'numeric'"
+    description="The format with which to render months"
+  />
+  <PropsTableRow
+    name="year"
+    type="'numeric' | '2-digit'"
+    description="The format with which to render years"
+  />
+  <PropsTableRow
+    name="timeZoneName"
+    type="'long' | 'short' | 'shortOffset' | 'longOffset' | 'shortGeneric' | 'longGeneric'"
+    description="The format with which to render the time zone"
+  />
+  <PropsTableBasePropRows
+    elementType="relative-time"
+    refType="RelativeTimeElement"
+    passthroughPropsLink={
+      <Link href="https://github.com/github/relative-time-element/">@github/relative-time-element</Link>
+    }
+  />
+</PropsTable>
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: true,
+    fullTestCoverage: true,
+    usedInProduction: false,
+    usageExamplesDocumented: true,
+    hasStorybookStories: true,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: true,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false
+  }}
+/>