Merge pull request #299 from element-hq/florianduros/visuallist

Add VisualList component

src/components/VisualList/VisualList.module.css

@@ -0,0 +1,26 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.visual-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cpd-space-1x);
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  border-radius: var(--cpd-space-3x);
+  overflow: hidden;
+}

src/components/VisualList/VisualList.stories.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2024 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { VisualList as VisualListComponent } from "./VisualList";
+import { Meta, StoryFn } from "@storybook/react";
+import React, { ComponentProps } from "react";
+import InfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info";
+import { VisualListItem } from "./VisualListItem.tsx";
+
+export default {
+  title: "VisualList/VisualList",
+  component: VisualListComponent,
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {
+    children: (
+      <>
+        <VisualListItem Icon={InfoIcon}>First item</VisualListItem>
+        <VisualListItem Icon={InfoIcon}>Second item</VisualListItem>
+        <VisualListItem Icon={InfoIcon}>Third item</VisualListItem>
+      </>
+    ),
+  },
+} as Meta<typeof VisualListComponent>;
+
+const Template: StoryFn<typeof VisualListComponent> = (
+  args: ComponentProps<typeof VisualListComponent>,
+) => {
+  return <VisualListComponent {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {};

src/components/VisualList/VisualList.test.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2024 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { composeStories } from "@storybook/react";
+import * as stories from "./VisualList.stories";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import React from "react";
+
+const { Default } = composeStories(stories);
+
+describe("VisualList", () => {
+  it("renders a Default VisualList", () => {
+    const { container } = render(<Default />);
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/VisualList/VisualList.tsx

@@ -0,0 +1,41 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { JSX, PropsWithChildren } from "react";
+import styles from "./VisualList.module.css";
+import classNames from "classnames";
+
+interface VisualListProps extends React.HTMLProps<HTMLUListElement> {
+  /**
+   * The CSS class name.
+   */
+  className?: string;
+}
+
+/**
+ * A list component.
+ */
+export function VisualList({
+  className,
+  children,
+  ...props
+}: PropsWithChildren<VisualListProps>): JSX.Element {
+  return (
+    <ul className={classNames(styles["visual-list"], className)} {...props}>
+      {children}
+    </ul>
+  );
+}

src/components/VisualList/VisualListItem.module.css

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2024 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.visual-list-item {
+  display: flex;
+  gap: var(--cpd-space-3x);
+  padding: var(--cpd-space-3x) var(--cpd-space-4x);
+  background-color: var(--cpd-color-bg-subtle-secondary);
+  font: var(--cpd-font-body-md-medium);
+}
+
+.visual-list-item-icon {
+  flex-shrink: 0;
+  color: var(--cpd-color-icon-secondary);
+}
+
+.visual-list-item-icon-success {
+  color: var(--cpd-color-icon-success-primary);
+}
+
+.visual-list-item-icon-destructive {
+  color: var(--cpd-color-icon-critical-primary);
+}

src/components/VisualList/VisualListItem.stories.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2024 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { VisualListItem as VisualListItemComponent } from "./VisualListItem";
+import { Meta, StoryFn } from "@storybook/react";
+import React, { ComponentProps } from "react";
+import InfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info";
+
+export default {
+  title: "VisualList/VisualListItem",
+  component: VisualListItemComponent,
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {
+    Icon: InfoIcon,
+    children: "List item description",
+  },
+} as Meta<typeof VisualListItemComponent>;
+
+const Template: StoryFn<typeof VisualListItemComponent> = (
+  args: ComponentProps<typeof VisualListItemComponent>,
+) => {
+  return <VisualListItemComponent {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Success = Template.bind({});
+Success.args = {
+  success: true,
+};
+
+export const Destructive = Template.bind({});
+Destructive.args = {
+  destructive: true,
+};
+
+export const Multiline = Template.bind({});
+Multiline.args = {
+  children:
+    "List item with a looooooooooong very looooooooooong loooooooooooooong description",
+};

src/components/VisualList/VisualListItem.test.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2024 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { composeStories } from "@storybook/react";
+import * as stories from "./VisualListItem.stories";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import React from "react";
+
+const { Default, Success, Destructive, Multiline } = composeStories(stories);
+
+describe("VisualListItem", () => {
+  it("renders a Default VisualListItem", () => {
+    const { container } = render(<Default />);
+    expect(container).toMatchSnapshot();
+  });
+  it("renders a Success VisualListItem", () => {
+    const { container } = render(<Success />);
+    expect(container).toMatchSnapshot();
+  });
+  it("renders a Destructive VisualListItem", () => {
+    const { container } = render(<Destructive />);
+    expect(container).toMatchSnapshot();
+  });
+  it("renders a Multiline VisualListItem", () => {
+    const { container } = render(<Multiline />);
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/VisualList/VisualListItem.tsx

@@ -0,0 +1,63 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { ComponentType, JSX, PropsWithChildren } from "react";
+import styles from "./VisualListItem.module.css";
+import classNames from "classnames";
+
+interface VisualListItemProps extends React.HTMLProps<HTMLLIElement> {
+  /**
+   * The CSS class name.
+   */
+  className?: string;
+  /**
+   * The icon component.
+   */
+  Icon: ComponentType<React.SVGAttributes<SVGElement>>;
+
+  success?: boolean;
+  destructive?: boolean;
+}
+
+/**
+ * A list component.
+ */
+export function VisualListItem({
+  className,
+  children,
+  Icon,
+  success = false,
+  destructive = false,
+  ...props
+}: PropsWithChildren<VisualListItemProps>): JSX.Element {
+  return (
+    <li
+      className={classNames(styles["visual-list-item"], className)}
+      {...props}
+    >
+      <Icon
+        className={classNames(styles["visual-list-item-icon"], {
+          [styles["visual-list-item-icon-success"]]: success,
+          [styles["visual-list-item-icon-destructive"]]: destructive,
+        })}
+        width="24px"
+        height="24px"
+        aria-hidden={true}
+      />
+      {children}
+    </li>
+  );
+}