@patternfly/react-core 4.233.1 → 4.234.2

package/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import {
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  EmptyStatePrimary,
+  EmptyStateVariant,
+  NotificationDrawer,
+  NotificationDrawerBody,
+  NotificationDrawerHeader,
+  NotificationDrawerGroup,
+  NotificationDrawerGroupList,
+  NotificationDrawerList,
+  NotificationDrawerListItem,
+  NotificationDrawerListItemBody,
+  NotificationDrawerListItemHeader,
+  Title
+} from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+export const NotificationDrawerLightweight: React.FunctionComponent = () => {
+  const [firstGroupExpanded, setFirstGroupExpanded] = React.useState(false);
+  const [secondGroupExpanded, setSecondGroupExpanded] = React.useState(true);
+  const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false);
+
+  const toggleFirstDrawer = (_event: any, value: boolean) => {
+    setFirstGroupExpanded(value);
+    setSecondGroupExpanded(false);
+    setThirdGroupExpanded(false);
+  };
+
+  const toggleSecondDrawer = (_event: any, value: boolean) => {
+    setSecondGroupExpanded(value);
+    setFirstGroupExpanded(false);
+    setThirdGroupExpanded(false);
+  };
+
+  const toggleThirdDrawer = (_event: any, value: boolean) => {
+    setThirdGroupExpanded(value);
+    setSecondGroupExpanded(false);
+    setFirstGroupExpanded(false);
+  };
+
+  const onDrawerClose = () => {
+    // do something cool in a callback
+  };
+
+  return (
+    <NotificationDrawer>
+      <NotificationDrawerHeader onClose={onDrawerClose} />
+      <NotificationDrawerBody>
+        <NotificationDrawerGroupList>
+          <NotificationDrawerGroup
+            title="First notification group"
+            isExpanded={firstGroupExpanded}
+            count={4}
+            isRead={true}
+            onExpand={toggleFirstDrawer}
+          >
+            <NotificationDrawerList isHidden={!firstGroupExpanded}>
+              <NotificationDrawerListItem variant="info">
+                <NotificationDrawerListItemHeader
+                  variant="info"
+                  title="Info notification title"
+                  srTitle="Info notification:"
+                />
+                <NotificationDrawerListItemBody timestamp="5 minutes ago">
+                  This is an info notification description.
+                </NotificationDrawerListItemBody>
+              </NotificationDrawerListItem>
+              <NotificationDrawerListItem variant="danger">
+                <NotificationDrawerListItemHeader
+                  variant="danger"
+                  title="Danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
+                  srTitle="Danger notification:"
+                />
+                <NotificationDrawerListItemBody timestamp="10 minutes ago">
+                  This is a danger notification description. This is a long description to show how the title will wrap
+                  if it is long and wraps to multiple lines.
+                </NotificationDrawerListItemBody>
+              </NotificationDrawerListItem>
+              <NotificationDrawerListItem variant="warning">
+                <NotificationDrawerListItemHeader
+                  variant="warning"
+                  title="Warning notification title"
+                  srTitle="Warning notification:"
+                />
+                <NotificationDrawerListItemBody timestamp="20 minutes ago">
+                  This is a warning notification description.
+                </NotificationDrawerListItemBody>
+              </NotificationDrawerListItem>
+              <NotificationDrawerListItem variant="success">
+                <NotificationDrawerListItemHeader
+                  variant="success"
+                  title="Success notification title"
+                  srTitle="Success notification:"
+                />
+                <NotificationDrawerListItemBody timestamp="30 minutes ago">
+                  This is a success notification description.
+                </NotificationDrawerListItemBody>
+              </NotificationDrawerListItem>
+            </NotificationDrawerList>
+          </NotificationDrawerGroup>
+          <NotificationDrawerGroup
+            title="Second notification group"
+            isExpanded={secondGroupExpanded}
+            count={4}
+            isRead={true}
+            onExpand={toggleSecondDrawer}
+          >
+            <NotificationDrawerList isHidden={!secondGroupExpanded}>
+              <NotificationDrawerListItem variant="info">
+                <NotificationDrawerListItemHeader
+                  variant="info"
+                  title="Info notification title w/action"
+                  srTitle="Info notification:"
+                >
+                  <Button variant="link">Action</Button>
+                </NotificationDrawerListItemHeader>
+                <NotificationDrawerListItemBody timestamp="5 minutes ago">
+                  This is an info notification description.
+                </NotificationDrawerListItemBody>
+              </NotificationDrawerListItem>
+              <NotificationDrawerListItem variant="danger">
+                <NotificationDrawerListItemHeader
+                  variant="danger"
+                  title="Danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
+                  srTitle="Danger notification:"
+                />
+                <NotificationDrawerListItemBody timestamp="10 minutes ago">
+                  This is a danger notification description. This is a long description to show how the title will wrap
+                  if it is long and wraps to multiple lines.
+                </NotificationDrawerListItemBody>
+              </NotificationDrawerListItem>
+              <NotificationDrawerListItem variant="warning">
+                <NotificationDrawerListItemHeader
+                  variant="warning"
+                  title="Warning notification title"
+                  srTitle="Warning notification:"
+                />
+                <NotificationDrawerListItemBody timestamp="20 minutes ago">
+                  This is a warning notification description.
+                </NotificationDrawerListItemBody>
+              </NotificationDrawerListItem>
+              <NotificationDrawerListItem variant="success">
+                <NotificationDrawerListItemHeader
+                  variant="success"
+                  title="Success notification title"
+                  srTitle="Success notification:"
+                />
+                <NotificationDrawerListItemBody timestamp="30 minutes ago">
+                  This is a success notification description.
+                </NotificationDrawerListItemBody>
+              </NotificationDrawerListItem>
+            </NotificationDrawerList>
+          </NotificationDrawerGroup>
+          <NotificationDrawerGroup
+            title="Third notification group"
+            isExpanded={thirdGroupExpanded}
+            count={0}
+            isRead={true}
+            onExpand={toggleThirdDrawer}
+          >
+            <NotificationDrawerList isHidden={!thirdGroupExpanded}>
+              <EmptyState variant={EmptyStateVariant.full}>
+                <EmptyStateIcon icon={SearchIcon} />
+                <Title headingLevel="h2" size="lg">
+                  No alerts found
+                </Title>
+                <EmptyStateBody>
+                  There are currently no critical alerts firing. There may be firing alerts of other severities or
+                  silenced critical alerts however.
+                </EmptyStateBody>
+                <EmptyStatePrimary>
+                  <Button variant="link">Action</Button>
+                </EmptyStatePrimary>
+              </EmptyState>
+            </NotificationDrawerList>
+          </NotificationDrawerGroup>
+        </NotificationDrawerGroupList>
+      </NotificationDrawerBody>
+    </NotificationDrawer>
+  );
+};

package/src/components/Timestamp/Timestamp.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Timestamp/timestamp';
+import { css } from '@patternfly/react-styles';
+import { Tooltip } from '../Tooltip';
+
+export enum TimestampFormat {
+  full = 'full',
+  long = 'long',
+  medium = 'medium',
+  short = 'short'
+}
+
+export enum TimestampTooltipVariant {
+  default = 'default',
+  custom = 'custom'
+}
+
+export interface TimestampTooltip {
+  /** The variant of the tooltip. The "default" variant displays the date passed into
+   * the timestamp's date prop as a UTC string.
+   */
+  variant: 'default' | 'custom';
+  /** Content displayed in the tooltip when using the "custom" variant. */
+  content?: React.ReactNode;
+  /** Additional props passed to the tooltip. */
+  tooltipProps?: any;
+  /** A custom suffix to apply to a "default" variant tooltip. */
+  suffix?: string;
+}
+
+export interface TimestampProps extends React.HTMLProps<HTMLSpanElement> {
+  /** Displays custom content inside the timestamp, such as a relative time. This prop will
+   * override the default content that is displayed. Custom content will not be affected by
+   * any props that format or add to displayed content.
+   */
+  children?: React.ReactNode;
+  /** Class to add to the outer span. */
+  className?: string;
+  /** Applies custom formatting to the displayed date and/or time. Passing this prop in will
+   * override the dateFormat and timeFormat props.
+   */
+  customFormat?: { [key: string]: string };
+  /** Determines the default content that is displayed inside the timestamp and the value of
+   * the inner time element's datetime attribute. */
+  date?: Date;
+  /** Determines the format of the displayed date in the timestamp and UTC tooltip. Examples:
+   * "Full" => Tuesday, August 9, 2022;
+   * "Long" => August 9, 2022;
+   * "Medium" => Aug 9, 2022;
+   * "Short" => 8/9/22
+   */
+  dateFormat?: 'full' | 'long' | 'medium' | 'short';
+  /** Applies a custom suffix to the displayed content, usually after the time, such as a
+   * custom time zone.
+   */
+  displaySuffix?: string;
+  /** Flag for displaying the time in a 12 hour format. If this prop is not passed in,
+   * the hour format will be based on the locale prop's value.
+   */
+  is12Hour?: boolean;
+  /** Determines which locale to use in the displayed content. Defaults to the current locale
+   * when this prop is not passed in. For more information about locale's:
+   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
+   */
+  locale?: string;
+  /** Determines the format of the displayed time in the timestamp and UTC tooltip. Examples:
+   * "Full" => 11:25:00 AM Eastern Daylight Time
+   * "Long" => 11:25:00 AM EDT
+   * "Medium" => 11:25:00 AM
+   * "Short" => 11:25 AM
+   */
+  timeFormat?: 'full' | 'long' | 'medium' | 'short';
+  /** Adds a tooltip to the timestamp. */
+  tooltip?: TimestampTooltip;
+}
+
+export const Timestamp: React.FunctionComponent<TimestampProps> = ({
+  children,
+  className,
+  customFormat,
+  date: dateProp = new Date(),
+  dateFormat,
+  displaySuffix = '',
+  is12Hour,
+  locale,
+  timeFormat,
+  tooltip,
+  ...props
+}: TimestampProps) => {
+  const hasTimeFormat = timeFormat && !customFormat;
+  const formatOptions = {
+    ...(dateFormat && !customFormat && { dateStyle: dateFormat }),
+    ...(customFormat && { ...customFormat }),
+    ...(is12Hour !== undefined && { hour12: is12Hour })
+  };
+
+  const dateAsLocaleString = new Date(dateProp).toLocaleString(locale, {
+    ...formatOptions,
+    ...(hasTimeFormat && { timeStyle: timeFormat })
+  });
+  const defaultDisplay = `${dateAsLocaleString}${displaySuffix ? ' ' + displaySuffix : ''}`;
+
+  const utcTimeFormat = timeFormat !== 'short' ? 'medium' : 'short';
+  const convertToUTCString = (date: Date) => new Date(date).toUTCString().slice(0, -3);
+  const utcDateString = new Date(convertToUTCString(dateProp)).toLocaleString(locale, {
+    ...formatOptions,
+    ...(hasTimeFormat && { timeStyle: utcTimeFormat })
+  });
+  const defaultTooltipContent = `${utcDateString}${tooltip?.suffix ? ' ' + tooltip.suffix : ' UTC'}`;
+
+  const timestamp = (
+    <span
+      className={css(styles.timestamp, tooltip && styles.modifiers.helpText, className)}
+      {...(tooltip && { tabIndex: 0 })}
+      {...props}
+    >
+      <time className="pf-c-timestamp__text" dateTime={props.dateTime || new Date(dateProp).toISOString()}>
+        {!children ? defaultDisplay : children}
+      </time>
+    </span>
+  );
+
+  return tooltip ? (
+    <Tooltip
+      content={tooltip.variant === TimestampTooltipVariant.default ? defaultTooltipContent : tooltip.content}
+      {...tooltip.tooltipProps}
+    >
+      {timestamp}
+    </Tooltip>
+  ) : (
+    timestamp
+  );
+};
+Timestamp.displayName = 'Timestamp';

package/src/components/Timestamp/__tests__/Timestamp.test.tsx

@@ -0,0 +1,177 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Timestamp, TimestampFormat, TimestampTooltipVariant } from '../Timestamp';
+
+jest.mock('../../Tooltip', () => ({
+  Tooltip: ({ content, children, ...props }) => (
+    <div data-testid="timestamp-tooltip-mock" {...props}>
+      <div data-testid="timestamp-tooltip-mock-content">{content}</div>
+      {children}
+    </div>
+  )
+}));
+
+test('Matches snapshot', () => {
+  /** Due to how the datetime attribute is contstructed internally, dateTime must be
+   * manually passed for this snapshot to pass on GitHub.
+   */
+  const { asFragment } = render(<Timestamp dateTime="2022-01-01T00:00:00.000Z" date={new Date(2022, 0, 1)} />);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders component', () => {
+  render(
+    <div data-testid="timestamp-container">
+      <Timestamp />
+    </div>
+  );
+
+  expect(screen.getByTestId('timestamp-container').firstChild).toBeVisible();
+});
+
+test('Renders with current date by default with default formatting', () => {
+  render(<Timestamp />);
+
+  expect(screen.getByText(new Date().toLocaleString())).toBeInTheDocument();
+});
+
+test('Renders passed in date with default formatting', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toBeInTheDocument();
+});
+
+test('Renders with custom formatting when dateFormat and timeFormat are passed in', () => {
+  render(
+    <Timestamp date={new Date(2022, 0, 1)} dateFormat={TimestampFormat.full} timeFormat={TimestampFormat.short} />
+  );
+
+  expect(screen.getByText('Saturday, January 1, 2022 at 12:00 AM')).toBeInTheDocument();
+});
+
+test('Renders with only date when dateFormat is passed in', () => {
+  render(<Timestamp date={new Date('1 Jan 2022 00:00:00 EST')} dateFormat={TimestampFormat.full} />);
+
+  expect(screen.getByText('Saturday, January 1, 2022')).toBeInTheDocument();
+});
+
+test('Renders with only time when timeFormat is passed in', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} timeFormat={TimestampFormat.short} />);
+
+  expect(screen.getByText('12:00 AM')).toBeInTheDocument();
+});
+
+test('Renders with custom formatting when customFormat is passed in', () => {
+  render(
+    <Timestamp
+      date={new Date(2022, 0, 1)}
+      customFormat={{ year: '2-digit', month: 'short', weekday: 'short', day: 'numeric', hour: 'numeric' }}
+    />
+  );
+
+  expect(screen.getByText('Sat, Jan 1, 22, 12 AM')).toBeInTheDocument();
+});
+
+test('Renders with custom content', () => {
+  render(<Timestamp>2 days ago</Timestamp>);
+
+  expect(screen.getByText('2 days ago')).toBeInTheDocument();
+});
+
+test('Renders with a custom suffix when displaySuffix is passed in', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} displaySuffix="US Eastern" />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM US Eastern')).toBeInTheDocument();
+});
+
+test('Renders with 12 hour time when is12Hour is passed', () => {
+  render(<Timestamp date={new Date(2022, 0, 1, 13, 0)} is12Hour />);
+
+  expect(screen.getByText('1/1/2022, 1:00:00 PM')).toBeInTheDocument();
+});
+
+test('Renders with 24 hour time when is12Hour is set to false', () => {
+  render(<Timestamp date={new Date(2022, 0, 1, 13, 0)} is12Hour={false} />);
+
+  expect(screen.getByText('1/1/2022, 13:00:00')).toBeInTheDocument();
+});
+
+test('Renders with locale passed in', () => {
+  render(<Timestamp date={new Date(2022, 1, 1)} locale="en-GB" />);
+
+  expect(screen.getByText('01/02/2022, 00:00:00')).toBeInTheDocument();
+});
+
+test('Renders with 12 hour time by default for US locale', () => {
+  render(<Timestamp date={new Date(2022, 1, 1, 13, 0)} locale="en-US" />);
+
+  expect(screen.getByText('2/1/2022, 1:00:00 PM')).toBeInTheDocument();
+});
+
+test('Renders with 24 hour time for US locale when is12Hour is false', () => {
+  render(<Timestamp date={new Date(2022, 1, 1, 13, 0)} locale="en-US" is12Hour={false} />);
+
+  expect(screen.getByText('2/1/2022, 13:00:00')).toBeInTheDocument();
+});
+
+test('Renders with 12 hour time for a 24 hour locale when is12Hour is passed', () => {
+  render(<Timestamp date={new Date(2022, 1, 1, 13, 0)} locale="en-GB" is12Hour />);
+
+  expect(screen.getByText('01/02/2022, 1:00:00 pm')).toBeInTheDocument();
+});
+
+test('Renders with pf-c-timestamp by default', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('pf-c-timestamp');
+});
+
+test('Renders with pf-c-timestamp__text by default', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toHaveClass('pf-c-timestamp__text');
+});
+
+test('Renders with custom class names', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} className="custom-time-class" />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('custom-time-class');
+});
+
+test('Renders with pf-m-help-text class when tooltip is passed in with default variant', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} tooltip={{ variant: TimestampTooltipVariant.default }} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('pf-m-help-text');
+});
+
+test('Renders with pf-m-help-text class when tooltip is passed in with custom variant', () => {
+  render(<Timestamp date={new Date(2022, 0, 1)} tooltip={{ variant: TimestampTooltipVariant.custom }} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM').parentElement).toHaveClass('pf-m-help-text');
+});
+
+test('Renders with default tooltip content for default variant', () => {
+  render(
+    <Timestamp date={new Date('1 Jan 2022 00:00:00 EST')} tooltip={{ variant: TimestampTooltipVariant.default }} />
+  );
+
+  expect(screen.getByText('1/1/2022, 5:00:00 AM UTC')).toBeInTheDocument();
+});
+
+test('Renders with custom tooltip suffix for default variant', () => {
+  render(
+    <Timestamp
+      date={new Date('1 Jan 2022 00:00:00 EST')}
+      tooltip={{ variant: TimestampTooltipVariant.default, suffix: 'Coordinated Universal Time' }}
+    />
+  );
+
+  expect(screen.getByText('1/1/2022, 5:00:00 AM Coordinated Universal Time')).toBeInTheDocument();
+});
+
+test('Renders with custom tooltip content', () => {
+  render(<Timestamp tooltip={{ variant: TimestampTooltipVariant.custom, content: 'Custom tooltip content' }} />);
+
+  expect(screen.getByText('Custom tooltip content')).toBeInTheDocument();
+});

package/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-timestamp"
+    datetime="2022-01-01T00:00:00.000Z"
+  >
+    <time
+      class="pf-c-timestamp__text"
+      datetime="2022-01-01T00:00:00.000Z"
+    >
+      1/1/2022, 12:00:00 AM
+    </time>
+  </span>
+</DocumentFragment>
+`;

package/src/components/Timestamp/examples/Timestamp.md

@@ -0,0 +1,57 @@
+---
+id: Timestamp
+section: components
+cssPrefix: pf-c-timestamp
+propComponents: ['Timestamp', 'TimestampTooltip']
+beta: true
+---
+
+## Examples
+
+### Default
+
+By default, a timestamp will display the current date and time based on the current locale if the `date` prop is not passed in.
+
+```ts file="./TimestampDefault.tsx"
+```
+
+### Basic formats
+
+The format of the displayed content can be customized by passing in the `dateFormat` and/or `timeFormat` props. Passing in only one of the props will display only the date or time, depending on which prop is passed in. The possible options are "full", "long", "medium", and "short".
+
+You can also pass in the `displaySuffix` prop to display a custom suffix at the end of the displayed content. This will not override a timezone that is already displayed from the applied time format.
+
+```ts file="./TimestampBasicFormats.tsx"
+```
+
+### Custom format
+
+The format of the displayed content can be further customized by passing in the `customFormat` prop. Read [datetime format options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) for a list of options that can be passed in.
+
+```ts file="./TimestampCustomFormat.tsx"
+```
+
+### Default tooltip
+
+To render a tooltip that displays the timestamp content as a UTC time, you can pass in the `tooltip` prop with a variant of "default". The format of the default tooltip content will match the format of the timestamp content.
+
+You can customize the suffix of this default tooltip variant by passing in `suffix` to the `tooltip` prop.
+
+```ts file="./TimestampDefaultTooltip.tsx"
+```
+
+### Custom content
+
+To display custom content, such as a relative time or prefacing text, you can pass in content to the `children` prop.
+
+When also rendering a default tooltip with the `tooltip` prop, you can pass in the `dateFormat` and/or `timeFormat` props to customize the tooltip content without affecting the custom timestamp content.
+
+```ts file="TimestampCustomContent.tsx"
+```
+
+### Custom tooltip
+
+By passing in `variant="custom"` and `content` to the `tooltip` prop, you can display custom content within the timestamp's tooltip.
+
+```ts file="TimestampCustomTooltip.tsx"
+```

package/src/components/Timestamp/examples/TimestampBasicFormats.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Timestamp, TimestampFormat } from '@patternfly/react-core';
+
+export const TimestampBasicFormats: React.FunctionComponent = () => {
+  const currentDate = new Date();
+
+  return (
+    <>
+      <Timestamp date={currentDate} dateFormat={TimestampFormat.full} timeFormat={TimestampFormat.full} />
+      <br />
+      <br />
+      <Timestamp date={currentDate} dateFormat={TimestampFormat.full} />
+      <br />
+      <br />
+      <Timestamp date={currentDate} timeFormat={TimestampFormat.full} />
+      <br />
+      <br />
+      <Timestamp
+        date={currentDate}
+        dateFormat={TimestampFormat.medium}
+        timeFormat={TimestampFormat.short}
+        displaySuffix="US Eastern"
+      />
+    </>
+  );
+};

package/src/components/Timestamp/examples/TimestampCustomContent.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Timestamp, TimestampFormat, TimestampTooltipVariant } from '@patternfly/react-core';
+
+export const TimestampCustomContent: React.FunctionComponent = () => (
+  <>
+    <Timestamp date={new Date(2022, 7, 9, 14, 57, 0)} tooltip={{ variant: TimestampTooltipVariant.default }}>
+      1 hour ago
+    </Timestamp>
+    <br />
+    <br />
+    <Timestamp
+      date={new Date(2022, 7, 9, 14, 57, 0)}
+      dateFormat={TimestampFormat.medium}
+      timeFormat={TimestampFormat.short}
+      tooltip={{ variant: TimestampTooltipVariant.default }}
+    >
+      Last updated August 9th, 2022 at 2:57 PM EDT
+    </Timestamp>
+  </>
+);

package/src/components/Timestamp/examples/TimestampCustomFormat.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Timestamp } from '@patternfly/react-core';
+
+export const TimestampCustomFormat: React.FunctionComponent = () => (
+  <Timestamp customFormat={{ year: '2-digit', month: 'short', weekday: 'short', day: 'numeric', hour: 'numeric' }} />
+);

package/src/components/Timestamp/examples/TimestampCustomTooltip.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
+
+export const TimestampCustomTooltip: React.FunctionComponent = () => (
+  <>
+    <Timestamp
+      date={new Date(2022, 7, 9, 14, 57, 0)}
+      tooltip={{ variant: TimestampTooltipVariant.custom, content: 'Last updated on August 9th, 2022 - 2:57 PM UTC' }}
+    />
+    <br />
+    <br />
+    <Timestamp
+      date={new Date(2022, 9, 31)}
+      tooltip={{ variant: TimestampTooltipVariant.custom, content: '31st of October, 2022' }}
+    >
+      Halloween
+    </Timestamp>
+  </>
+);

package/src/components/Timestamp/examples/TimestampDefault.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Timestamp } from '@patternfly/react-core';
+
+export const TimestampDefault: React.FunctionComponent = () => <Timestamp />;

package/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
+
+export const TimestampDefaultTooltip: React.FunctionComponent = () => {
+  const currentDate = new Date();
+
+  return (
+    <>
+      <Timestamp date={currentDate} tooltip={{ variant: TimestampTooltipVariant.default }} />
+      <br />
+      <br />
+      <Timestamp
+        date={currentDate}
+        tooltip={{ variant: TimestampTooltipVariant.default, suffix: 'Coordinated Universal Time' }}
+      />
+    </>
+  );
+};

package/src/components/Timestamp/index.ts

@@ -0,0 +1 @@
+export * from './Timestamp';