Florian DurosandGitHub
b89de61e12
* refactor: move `humanize` in shared components * feat: add `RichItem` component * feat: add `RichList` component * refactor: use `RichList` and `RichItem` in `InviteDialog` * fix: exclude `InviteDialog` button to css override * test: update selector in invite dialog * test(e2e): update crypto test to use correct selector * test(e2e): update invite dialog * test: add test for `humanize.ts` * fix: add space between the list and the input when the list is scrollable * test(e2e): update screenshots
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
/*
|
|
* 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 from "react";
|
|
|
|
import { RichList } from "./RichList";
|
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
import { RichItem } from "../RichItem";
|
|
|
|
const avatar = <div style={{ width: 32, height: 32, backgroundColor: "#ccc", borderRadius: "50%" }} />;
|
|
|
|
const meta = {
|
|
title: "RichList/RichList",
|
|
component: RichList,
|
|
tags: ["autodocs"],
|
|
decorators: [
|
|
(Story) => (
|
|
<div style={{ height: "220px", overflow: "hidden" }}>
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
args: {
|
|
title: "Rich List Title",
|
|
children: (
|
|
<>
|
|
<RichItem avatar={avatar} title="First Item" description="description" />
|
|
<RichItem selected={true} avatar={avatar} title="Second Item" description="description" />
|
|
<RichItem avatar={avatar} title="Third Item" description="description" />
|
|
<RichItem avatar={avatar} title="Fourth Item" description="description" />
|
|
<RichItem avatar={avatar} title="Fifth Item" description="description" />
|
|
</>
|
|
),
|
|
},
|
|
} satisfies Meta<typeof RichList>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Default: Story = {};
|
|
export const Empty: Story = {
|
|
args: {
|
|
isEmpty: true,
|
|
children: "No items available",
|
|
},
|
|
};
|