From f305105d2f9e92b06ff54d90a5cdc3ebef44e3ed Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Fri, 12 Sep 2025 16:33:29 +0200 Subject: [PATCH] feat: add `RichItem` component --- .../richlist-richitem--default-linux.png | Bin 0 -> 10846 bytes .../richlist-richitem--hover-linux.png | Bin 0 -> 10846 bytes .../richlist-richitem--selected-linux.png | Bin 0 -> 11291 bytes .../richlist-richitem--separator-linux.png | Bin 0 -> 17057 bytes ...list-richitem--without-timestamp-linux.png | Bin 0 -> 9216 bytes .../rich-list/RichItem/RichItem.module.css | 71 ++++++++++ .../rich-list/RichItem/RichItem.stories.tsx | 64 +++++++++ .../rich-list/RichItem/RichItem.test.tsx | 35 +++++ .../rich-list/RichItem/RichItem.tsx | 89 +++++++++++++ .../__snapshots__/RichItem.test.tsx.snap | 126 ++++++++++++++++++ .../rich-list/RichItem/index.ts | 8 ++ 11 files changed, 393 insertions(+) create mode 100644 playwright/shared-component-snapshots/richlist-richitem--default-linux.png create mode 100644 playwright/shared-component-snapshots/richlist-richitem--hover-linux.png create mode 100644 playwright/shared-component-snapshots/richlist-richitem--selected-linux.png create mode 100644 playwright/shared-component-snapshots/richlist-richitem--separator-linux.png create mode 100644 playwright/shared-component-snapshots/richlist-richitem--without-timestamp-linux.png create mode 100644 src/shared-components/rich-list/RichItem/RichItem.module.css create mode 100644 src/shared-components/rich-list/RichItem/RichItem.stories.tsx create mode 100644 src/shared-components/rich-list/RichItem/RichItem.test.tsx create mode 100644 src/shared-components/rich-list/RichItem/RichItem.tsx create mode 100644 src/shared-components/rich-list/RichItem/__snapshots__/RichItem.test.tsx.snap create mode 100644 src/shared-components/rich-list/RichItem/index.ts diff --git a/playwright/shared-component-snapshots/richlist-richitem--default-linux.png b/playwright/shared-component-snapshots/richlist-richitem--default-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..9a5ad9eb0f6e83cab07b96ced6dc018d2cc4f3a8 GIT binary patch literal 10846 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 literal 0 HcmV?d00001 diff --git a/playwright/shared-component-snapshots/richlist-richitem--hover-linux.png b/playwright/shared-component-snapshots/richlist-richitem--hover-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..9a5ad9eb0f6e83cab07b96ced6dc018d2cc4f3a8 GIT binary patch literal 10846 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 literal 0 HcmV?d00001 diff --git a/playwright/shared-component-snapshots/richlist-richitem--selected-linux.png b/playwright/shared-component-snapshots/richlist-richitem--selected-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..f9c92b066f2f588e4fa7fdf24f94ca3db428944e GIT binary patch literal 11291 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 literal 0 HcmV?d00001 diff --git a/playwright/shared-component-snapshots/richlist-richitem--without-timestamp-linux.png b/playwright/shared-component-snapshots/richlist-richitem--without-timestamp-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..de5ecda7c323b46d7afcf4b77014e52c2d7ca2c2 GIT binary patch literal 9216 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, + title: "Rich Item Title", + description: "This is a description of the rich item.", + timestamp: currentTimestamp, + onClick: fn(), + }, + beforeEach: () => { + Date.now = () => new Date("2025-08-01T12:00:00Z").getTime(); + }, + parameters: { + a11y: { + context: "button", + }, + }, +} as Meta; + +const Template: StoryFn = (args) => ( +

    + +
+); + +export const Default = Template.bind({}); + +export const Selected = Template.bind({}); +Selected.args = { + selected: true, +}; + +export const WithoutTimestamp = Template.bind({}); +WithoutTimestamp.args = { + timestamp: undefined, +}; + +export const Hover = Template.bind({}); +Hover.parameters = { pseudo: { hover: true } }; + +const TemplateSeparator: StoryFn = (args) => ( +
    + + +
+); +export const Separator = TemplateSeparator.bind({}); diff --git a/src/shared-components/rich-list/RichItem/RichItem.test.tsx b/src/shared-components/rich-list/RichItem/RichItem.test.tsx new file mode 100644 index 0000000000..b5322d1fa5 --- /dev/null +++ b/src/shared-components/rich-list/RichItem/RichItem.test.tsx @@ -0,0 +1,35 @@ +/* + * Copyright 2025 New Vector Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial + * Please see LICENSE files in the repository root for full details. + */ + +import { composeStories } from "@storybook/react-vite"; +import { render } from "jest-matrix-react"; +import React from "react"; + +import * as stories from "./RichItem.stories"; + +const { Default, Selected, WithoutTimestamp } = composeStories(stories); + +describe("RichItem", () => { + beforeAll(() => { + jest.useFakeTimers().setSystemTime(new Date("2025-08-01T12:00:00Z")); + }); + + it("renders the item in default state", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it("renders the item in selected state", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it("renders the item without timestamp", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/src/shared-components/rich-list/RichItem/RichItem.tsx b/src/shared-components/rich-list/RichItem/RichItem.tsx new file mode 100644 index 0000000000..c3ff1a5dc0 --- /dev/null +++ b/src/shared-components/rich-list/RichItem/RichItem.tsx @@ -0,0 +1,89 @@ +/* + * Copyright 2025 New Vector Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial + * Please see LICENSE files in the repository root for full details. + */ + +import React, { type HTMLAttributes, type JSX, memo } from "react"; +import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"; + +import styles from "./RichItem.module.css"; +import { humanizeTime } from "../../utils/humanize"; +import { Flex } from "../../utils/Flex"; + +export interface RichItemProps extends HTMLAttributes { + /** + * Avatar to display at the start of the item + */ + avatar: React.ReactNode; + /** + * Title to display at the top of the item + */ + title: string; + /** + * Description to display below the title + */ + description: string; + /** + * Timestamp to display at the end of the item + * The value is humanized (e.g. "5 minutes ago") + */ + timestamp?: number; + /** + * Whether the item is selected + * This will replace the avatar with a checkmark + * @default false + */ + selected?: boolean; +} + +/** + * A rich item to display in a list, with an avatar, title, description and optional timestamp. + * If selected, the avatar is replaced with a checkmark. + * A separator is added between items in a list. + * + * @example + * ```tsx + * } + * title="Rich Item Title" + * description="This is a description of the rich item." + * timestamp={Date.now() - 5 * 60 * 1000} // 5 minutes ago + * selected={true} + * onClick={() => console.log("Item clicked")} + * /> + * ``` + */ +export const RichItem = memo(function RichItem({ + avatar, + title, + description, + timestamp, + selected, + ...props +}: RichItemProps): JSX.Element { + return ( + + ); +}); + +/** + * A checkmark icon inside a circle, used to indicate selection. + */ +function Checkmark(): JSX.Element { + return ( + + ); +} diff --git a/src/shared-components/rich-list/RichItem/__snapshots__/RichItem.test.tsx.snap b/src/shared-components/rich-list/RichItem/__snapshots__/RichItem.test.tsx.snap new file mode 100644 index 0000000000..d03bb1c104 --- /dev/null +++ b/src/shared-components/rich-list/RichItem/__snapshots__/RichItem.test.tsx.snap @@ -0,0 +1,126 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`RichItem renders the item in default state 1`] = ` +
+
    + +
+
+`; + +exports[`RichItem renders the item in selected state 1`] = ` +
+
    + +
+
+`; + +exports[`RichItem renders the item without timestamp 1`] = ` +
+
    + +
+
+`; diff --git a/src/shared-components/rich-list/RichItem/index.ts b/src/shared-components/rich-list/RichItem/index.ts new file mode 100644 index 0000000000..0301144246 --- /dev/null +++ b/src/shared-components/rich-list/RichItem/index.ts @@ -0,0 +1,8 @@ +/* + * Copyright 2025 New Vector Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial + * Please see LICENSE files in the repository root for full details. + */ + +export { RichItem } from "./RichItem";