-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d73fba6
commit 7cf3ec2
Showing
17 changed files
with
551 additions
and
0 deletions.
There are no files selected for viewing
Binary file added
BIN
+9.43 KB
...ght/visual.test.ts-snapshots/VisualList-VisualList-Default-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+5.91 KB
...visual.test.ts-snapshots/VisualList-VisualListItem-Default-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+5.91 KB
...al.test.ts-snapshots/VisualList-VisualListItem-Destructive-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+8.37 KB
...sual.test.ts-snapshots/VisualList-VisualListItem-Multiline-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+5.93 KB
...visual.test.ts-snapshots/VisualList-VisualListItem-Success-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 = {}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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", | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
Oops, something went wrong.