From 7cf3ec2996e2a68bc70d0159516d3bc5c875aa03 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Fri, 20 Dec 2024 17:44:33 +0100 Subject: [PATCH] Add VisualList component --- ...st-VisualList-Default-1-chromium-linux.png | Bin 0 -> 9659 bytes ...isualListItem-Default-1-chromium-linux.png | Bin 0 -> 6054 bytes ...lListItem-Destructive-1-chromium-linux.png | Bin 0 -> 6049 bytes ...ualListItem-Multiline-1-chromium-linux.png | Bin 0 -> 8574 bytes ...isualListItem-Success-1-chromium-linux.png | Bin 0 -> 6069 bytes .../VisualList/VisualList.module.css | 26 ++++ .../VisualList/VisualList.stories.tsx | 46 +++++++ src/components/VisualList/VisualList.test.tsx | 30 +++++ src/components/VisualList/VisualList.tsx | 41 +++++++ .../VisualList/VisualListItem.module.css | 36 ++++++ .../VisualList/VisualListItem.stories.tsx | 56 +++++++++ .../VisualList/VisualListItem.test.tsx | 42 +++++++ src/components/VisualList/VisualListItem.tsx | 63 ++++++++++ .../__snapshots__/VisualList.test.tsx.snap | 79 ++++++++++++ .../VisualListItem.test.tsx.snap | 113 ++++++++++++++++++ src/components/VisualList/index.tsx | 18 +++ src/index.ts | 1 + 17 files changed, 551 insertions(+) create mode 100644 playwright/visual.test.ts-snapshots/VisualList-VisualList-Default-1-chromium-linux.png create mode 100644 playwright/visual.test.ts-snapshots/VisualList-VisualListItem-Default-1-chromium-linux.png create mode 100644 playwright/visual.test.ts-snapshots/VisualList-VisualListItem-Destructive-1-chromium-linux.png create mode 100644 playwright/visual.test.ts-snapshots/VisualList-VisualListItem-Multiline-1-chromium-linux.png create mode 100644 playwright/visual.test.ts-snapshots/VisualList-VisualListItem-Success-1-chromium-linux.png create mode 100644 src/components/VisualList/VisualList.module.css create mode 100644 src/components/VisualList/VisualList.stories.tsx create mode 100644 src/components/VisualList/VisualList.test.tsx create mode 100644 src/components/VisualList/VisualList.tsx create mode 100644 src/components/VisualList/VisualListItem.module.css create mode 100644 src/components/VisualList/VisualListItem.stories.tsx create mode 100644 src/components/VisualList/VisualListItem.test.tsx create mode 100644 src/components/VisualList/VisualListItem.tsx create mode 100644 src/components/VisualList/__snapshots__/VisualList.test.tsx.snap create mode 100644 src/components/VisualList/__snapshots__/VisualListItem.test.tsx.snap create mode 100644 src/components/VisualList/index.tsx diff --git a/playwright/visual.test.ts-snapshots/VisualList-VisualList-Default-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/VisualList-VisualList-Default-1-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..8d0d08774e253cf1ebc40bdf75b0d547667ac235 GIT binary patch literal 9659 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 literal 0 HcmV?d00001 diff --git a/playwright/visual.test.ts-snapshots/VisualList-VisualListItem-Default-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/VisualList-VisualListItem-Default-1-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..e95904329ccc1ffc497d00e9e419a90ff3e72313 GIT binary patch literal 6054 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 U)ozRJnmge8O~BWbucB`J9Y)b-8~^|S literal 0 HcmV?d00001 diff --git a/playwright/visual.test.ts-snapshots/VisualList-VisualListItem-Multiline-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/VisualList-VisualListItem-Multiline-1-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..c966df3c59d86699f81b11eb802a66ea8d20174c GIT binary patch literal 8574 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 + First item + Second item + Third item + + ), + }, +} as Meta; + +const Template: StoryFn = ( + args: ComponentProps, +) => { + return ; +}; + +export const Default = Template.bind({}); +Default.args = {}; diff --git a/src/components/VisualList/VisualList.test.tsx b/src/components/VisualList/VisualList.test.tsx new file mode 100644 index 00000000..81689692 --- /dev/null +++ b/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(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/src/components/VisualList/VisualList.tsx b/src/components/VisualList/VisualList.tsx new file mode 100644 index 00000000..10638470 --- /dev/null +++ b/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 { + /** + * The CSS class name. + */ + className?: string; +} + +/** + * A list component. + */ +export function VisualList({ + className, + children, + ...props +}: PropsWithChildren): JSX.Element { + return ( +
    + {children} +
+ ); +} diff --git a/src/components/VisualList/VisualListItem.module.css b/src/components/VisualList/VisualListItem.module.css new file mode 100644 index 00000000..b083dbe6 --- /dev/null +++ b/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); +} diff --git a/src/components/VisualList/VisualListItem.stories.tsx b/src/components/VisualList/VisualListItem.stories.tsx new file mode 100644 index 00000000..2d2cbe62 --- /dev/null +++ b/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; + +const Template: StoryFn = ( + args: ComponentProps, +) => { + return ; +}; + +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", +}; diff --git a/src/components/VisualList/VisualListItem.test.tsx b/src/components/VisualList/VisualListItem.test.tsx new file mode 100644 index 00000000..ed9a97ad --- /dev/null +++ b/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(); + expect(container).toMatchSnapshot(); + }); + it("renders a Success VisualListItem", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + it("renders a Destructive VisualListItem", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + it("renders a Multiline VisualListItem", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/src/components/VisualList/VisualListItem.tsx b/src/components/VisualList/VisualListItem.tsx new file mode 100644 index 00000000..4cfcfcdf --- /dev/null +++ b/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 { + /** + * The CSS class name. + */ + className?: string; + /** + * The icon component. + */ + Icon: ComponentType>; + + success?: boolean; + destructive?: boolean; +} + +/** + * A list component. + */ +export function VisualListItem({ + className, + children, + Icon, + success = false, + destructive = false, + ...props +}: PropsWithChildren): JSX.Element { + return ( +
  • + + {children} +
    • + ); +} diff --git a/src/components/VisualList/__snapshots__/VisualList.test.tsx.snap b/src/components/VisualList/__snapshots__/VisualList.test.tsx.snap new file mode 100644 index 00000000..83da01c9 --- /dev/null +++ b/src/components/VisualList/__snapshots__/VisualList.test.tsx.snap @@ -0,0 +1,79 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`VisualList > renders a Default VisualList 1`] = ` +
    +
      +
    • + + First item +
      • +
    • + + Second item +
      • +
    • + + Third item +
      • +
    +
    +`; diff --git a/src/components/VisualList/__snapshots__/VisualListItem.test.tsx.snap b/src/components/VisualList/__snapshots__/VisualListItem.test.tsx.snap new file mode 100644 index 00000000..07031320 --- /dev/null +++ b/src/components/VisualList/__snapshots__/VisualListItem.test.tsx.snap @@ -0,0 +1,113 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`VisualListItem > renders a Default VisualListItem 1`] = ` +
    +
  • + + List item description +
    • +
    +`; + +exports[`VisualListItem > renders a Destructive VisualListItem 1`] = ` +
    +
  • + + List item description +
    • +
    +`; + +exports[`VisualListItem > renders a Multiline VisualListItem 1`] = ` +
    +
  • + + List item with a looooooooooong very looooooooooong loooooooooooooong description +
    • +
    +`; + +exports[`VisualListItem > renders a Success VisualListItem 1`] = ` +
    +
  • + + List item description +
    • +
    +`; diff --git a/src/components/VisualList/index.tsx b/src/components/VisualList/index.tsx new file mode 100644 index 00000000..1a69f4f3 --- /dev/null +++ b/src/components/VisualList/index.tsx @@ -0,0 +1,18 @@ +/* +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. +*/ + +export { VisualList } from "./VisualList"; +export { VisualListItem } from "./VisualListItem"; diff --git a/src/index.ts b/src/index.ts index 557e658a..0b662cb0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -53,6 +53,7 @@ export { Toast } from "./components/Toast/Toast"; export { Dropdown } from "./components/Dropdown"; export { InlineSpinner } from "./components/InlineSpinner"; export { Breadcrumb } from "./components/Breadcrumb"; +export { VisualList, VisualListItem } from "./components/VisualList"; export { TextControl,