Add noTitle to all stories, add new stories (#5685)

primer · Feb 13, 2025 · 9318734 · 9318734
1 parent 2bbc5a0
commit 9318734
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 5 deletions.
diff --git a/packages/react/src/RelativeTime/RelativeTime.examples.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.examples.stories.tsx
@@ -2,13 +2,54 @@ import React from 'react'
 import RelativeTime from './RelativeTime'
 import Link from '../Link'
 import {Tooltip} from '../TooltipV2'
+import {Button} from '../Button'
+import {Stack} from '../Stack'
 
 export default {
   title: 'Components/RelativeTime/Examples',
   component: RelativeTime,
 }
 
-export const NoTitleAttribute = () => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={true} />
+export const DynamicRelativeTime = () => {
+  const [time, setTime] = React.useState(false)
+  return (
+    <Stack>
+      <div>
+        <Button onClick={() => setTime(!time)} aria-describedby="relative-time">
+          Show {time ? 'short' : 'exact'} date
+        </Button>
+      </div>
+      <div>
+        <RelativeTime
+          id="relative-time"
+          date={new Date('2020-01-01T00:00:00Z')}
+          minute={time ? '2-digit' : undefined}
+          hour={time ? 'numeric' : undefined}
+          day={time ? '2-digit' : undefined}
+          month={time ? 'short' : undefined}
+          year={time ? 'numeric' : undefined}
+          timeZoneName={time ? 'short' : undefined}
+          prefix=""
+          noTitle
+        />
+      </div>
+    </Stack>
+  )
+}
+
+export const LongDate = () => (
+  <RelativeTime
+    date={new Date('2020-01-01T00:00:00Z')}
+    minute="2-digit"
+    hour="numeric"
+    day="2-digit"
+    month="short"
+    year="numeric"
+    timeZoneName="short"
+    prefix=""
+    noTitle
+  />
+)
 
 export const LinkWithTooltip = () => (
   <Tooltip text={new Date('2020-01-01T00:00:00Z').toString()}>

diff --git a/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
@@ -132,20 +132,20 @@ const meta: Meta = {
 
 export const MicroFormat: StoryFn = args => {
   const {date, ...rest} = args
-  return <RelativeTime {...rest} date={new Date(date)} format="micro" />
+  return <RelativeTime noTitle={true} {...rest} date={new Date(date)} format="micro" />
 }
 MicroFormat.args = {tense: 'past'}
 MicroFormat.argTypes = {format: {control: false}}
 
 export const RecentTime: StoryFn = args => {
   const {...rest} = args
-  return <RelativeTime {...rest} date={new Date()} />
+  return <RelativeTime noTitle={true} {...rest} date={new Date()} />
 }
 RecentTime.argTypes = {date: {control: false}}
 
 export const CountDownTimer: StoryFn = args => {
   const {...rest} = args
-  return <RelativeTime {...rest} />
+  return <RelativeTime noTitle={true} {...rest} />
 }
 CountDownTimer.args = {date: new Date('2038-01-19T03:14:08Z'), format: 'elapsed', day: '', month: ''}
 CountDownTimer.argTypes = {date: {control: false}, format: {control: false}}

diff --git a/packages/react/src/RelativeTime/RelativeTime.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.stories.tsx
@@ -19,7 +19,7 @@ export const Default: StoryFn = () => <RelativeTime date={new Date('2020-01-01T0
 
 export const Playground: StoryFn = args => {
   const {date, ...rest} = args
-  return <RelativeTime {...rest} date={new Date(date)} />
+  return <RelativeTime noTitle={true} {...rest} date={new Date(date)} />
 }
 
 Playground.args = {