Adds noTitle option to RelativeTime component (#4635)

* Adds noTitle option to RelativeTime component

* Removes iconbutton story

* Reverts package-lock.json changes

* Adds changeset

* Update packages/react/src/RelativeTime/RelativeTime.tsx

Co-authored-by: Clay Miller <[email protected]>

* Update clever-pots-leave.md

---------

Co-authored-by: Clay Miller <[email protected]>
Co-authored-by: Siddharth Kshetrapal <[email protected]>

Author: 3 people

.changeset/clever-pots-leave.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+RelativeTime: Adds `noTitle` prop if you want to not render the `title` attribute with full date time.

packages/react/src/RelativeTime/RelativeTime.docs.json

@@ -101,6 +101,12 @@
       "name": "ref",
       "type": "React.RefObject<RelativeTimeElement>"
     },
+    {
+      "name": "noTitle",
+      "type": "boolean",
+      "defaultValue": "",
+      "description": "Removes the `title` attribute provided on the element by default"
+    },
     {
       "name": "as",
       "type": "React.ElementType",

packages/react/src/RelativeTime/RelativeTime.examples.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import RelativeTime from './RelativeTime'
+import Link from '../Link'
+import {Tooltip} from '../TooltipV2'
+
+export default {
+  title: 'Components/RelativeTime/Examples',
+  component: RelativeTime,
+}
+
+export const NoTitleAttribute = () => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={true} />
+
+export const LinkWithTooltip = () => (
+  <Tooltip text={new Date('2020-01-01T00:00:00Z').toString()}>
+    <Link href="https://www.github.com">
+      <RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={true} />
+    </Link>
+  </Tooltip>
+)

packages/react/src/RelativeTime/RelativeTime.stories.tsx

@@ -15,7 +15,7 @@ const meta: Meta = {
   },
 }
 
-export const Default: Story = () => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} />
+export const Default: Story = () => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={true} />
 
 export const Playground: Story = args => {
   const {date, ...rest} = args

packages/react/src/RelativeTime/RelativeTime.tsx

@@ -6,10 +6,10 @@ import {createComponent} from '../utils/create-component'
 const RelativeTimeComponent = createComponent(RelativeTimeElement, 'relative-time')
 
 const localeOptions: Intl.DateTimeFormatOptions = {month: 'short', day: 'numeric', year: 'numeric'}
-function RelativeTime({date, datetime, children, ...props}: RelativeTimeProps) {
+function RelativeTime({date, datetime, children, noTitle, ...props}: RelativeTimeProps) {
   if (datetime) date = new Date(datetime)
   return (
-    <RelativeTimeComponent {...props} date={date}>
+    <RelativeTimeComponent {...props} date={date} no-title={noTitle ? '' : undefined}>
       {children || date?.toLocaleDateString('en', localeOptions) || ''}
     </RelativeTimeComponent>
   )

packages/react/src/__tests__/RelativeTime.test.tsx

@@ -37,4 +37,16 @@ describe('RelativeTime', () => {
       'server rendered date',
     ])
   })
+
+  it('does not render no-title attribute by default', () => {
+    const date = new Date('2024-03-07T12:22:48.123Z')
+    const {container} = HTMLRender(<RelativeTime date={date} />)
+    expect(container.firstChild).not.toHaveAttribute('no-title')
+  })
+
+  it('adds no-title attribute if noTitle={true}', () => {
+    const date = new Date('2024-03-07T12:22:48.123Z')
+    const {container} = HTMLRender(<RelativeTime date={date} noTitle={true} />)
+    expect(container.firstChild).toHaveAttribute('no-title')
+  })
 })