diff --git a/playwright/visual.test.ts-snapshots/Icon-BigIcon-Default-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Icon-BigIcon-Default-1-chromium-linux.png new file mode 100644 index 00000000..b0ae2e02 Binary files /dev/null and b/playwright/visual.test.ts-snapshots/Icon-BigIcon-Default-1-chromium-linux.png differ diff --git a/playwright/visual.test.ts-snapshots/Icon-BigIcon-Destructive-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Icon-BigIcon-Destructive-1-chromium-linux.png new file mode 100644 index 00000000..16faa077 Binary files /dev/null and b/playwright/visual.test.ts-snapshots/Icon-BigIcon-Destructive-1-chromium-linux.png differ diff --git a/playwright/visual.test.ts-snapshots/Icon-BigIcon-Medium-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Icon-BigIcon-Medium-1-chromium-linux.png new file mode 100644 index 00000000..cc8adf1a Binary files /dev/null and b/playwright/visual.test.ts-snapshots/Icon-BigIcon-Medium-1-chromium-linux.png differ diff --git a/playwright/visual.test.ts-snapshots/Icon-BigIcon-Small-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Icon-BigIcon-Small-1-chromium-linux.png new file mode 100644 index 00000000..6626d074 Binary files /dev/null and b/playwright/visual.test.ts-snapshots/Icon-BigIcon-Small-1-chromium-linux.png differ diff --git a/playwright/visual.test.ts-snapshots/Icon-BigIcon-Success-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Icon-BigIcon-Success-1-chromium-linux.png new file mode 100644 index 00000000..d026351f Binary files /dev/null and b/playwright/visual.test.ts-snapshots/Icon-BigIcon-Success-1-chromium-linux.png differ diff --git a/src/components/Icon/BigIcon/BigIcon.module.css b/src/components/Icon/BigIcon/BigIcon.module.css new file mode 100644 index 00000000..56ce5572 --- /dev/null +++ b/src/components/Icon/BigIcon/BigIcon.module.css @@ -0,0 +1,51 @@ +/* +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. +*/ + +.content { + display: inline-flex; + background-color: var(--cpd-color-bg-subtle-secondary); + padding: var(--cpd-space-4x); + border-radius: var(--cpd-space-2x); + color: var(--cpd-color-icon-secondary); + + > svg { + inline-size: 32px; + block-size: 32px; + } +} + +.content[data-size="medium"] { + padding: var(--cpd-space-3x); +} + +.content[data-size="small"] { + padding: var(--cpd-space-3x); + + > svg { + inline-size: 24px; + block-size: 24px; + } +} + +.destructive { + background-color: var(--cpd-color-bg-critical-subtle); + color: var(--cpd-color-icon-critical-primary); +} + +.success { + background-color: var(--cpd-color-bg-success-subtle); + color: var(--cpd-color-icon-success-primary); +} diff --git a/src/components/Icon/BigIcon/BigIcon.stories.tsx b/src/components/Icon/BigIcon/BigIcon.stories.tsx new file mode 100644 index 00000000..f256db25 --- /dev/null +++ b/src/components/Icon/BigIcon/BigIcon.stories.tsx @@ -0,0 +1,55 @@ +/* +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 from "react"; +import { Meta, StoryFn } from "@storybook/react"; + +import { BigIcon as BigIconComponent } from "./BigIcon"; +import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key"; + +export default { + title: "Icon/BigIcon", + component: BigIconComponent, + tags: ["autodocs"], + args: { + children: , + }, +} as Meta; + +const Template: StoryFn = (args) => ( + +); + +export const Default = Template.bind({}); +export const Medium = Template.bind({}); +Medium.args = { + size: "medium", +}; + +export const Small = Template.bind({}); +Small.args = { + size: "small", +}; + +export const Destructive = Template.bind({}); +Destructive.args = { + destructive: true, +}; + +export const Success = Template.bind({}); +Success.args = { + success: true, +}; diff --git a/src/components/Icon/BigIcon/BigIcon.test.tsx b/src/components/Icon/BigIcon/BigIcon.test.tsx new file mode 100644 index 00000000..f01f94e9 --- /dev/null +++ b/src/components/Icon/BigIcon/BigIcon.test.tsx @@ -0,0 +1,51 @@ +/* +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 { describe, expect, it } from "vitest"; +import { composeStories } from "@storybook/react"; +import * as stories from "./BigIcon.stories.tsx"; +import { render } from "@testing-library/react"; +import React from "react"; + +const { Default, Medium, Small, Destructive, Success } = + composeStories(stories); + +describe("BigIcon", () => { + it("renders a large big icon", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it("renders a medium big icon", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it("renders a small big icon", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it("renders a destructive big icon", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it("renders a success big icon", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/src/components/Icon/BigIcon/BigIcon.tsx b/src/components/Icon/BigIcon/BigIcon.tsx new file mode 100644 index 00000000..44bd27d7 --- /dev/null +++ b/src/components/Icon/BigIcon/BigIcon.tsx @@ -0,0 +1,61 @@ +/* +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 "./BigIcon.module.css"; +import classNames from "classnames"; + +interface BigIconProps { + /** + * The CSS class name. + */ + className?: string; + /** + * The size of the icon. + * @default "large" + */ + size?: "small" | "medium" | "large"; + /** + * Whether this button triggers a destructive action. + * @default false + */ + destructive?: boolean; + /** + * Whether this button triggers a success action. + * @default false + */ + success?: boolean; +} + +export function BigIcon({ + className, + size = "large", + destructive = false, + success = false, + children, +}: PropsWithChildren): JSX.Element { + return ( +
+ {React.Children.only(children)} +
+ ); +} diff --git a/src/components/Icon/BigIcon/__snapshots__/BigIcon.test.tsx.snap b/src/components/Icon/BigIcon/__snapshots__/BigIcon.test.tsx.snap new file mode 100644 index 00000000..a2a8182e --- /dev/null +++ b/src/components/Icon/BigIcon/__snapshots__/BigIcon.test.tsx.snap @@ -0,0 +1,106 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`BigIcon > renders a destructive big icon 1`] = ` +
+
+ + + +
+
+`; + +exports[`BigIcon > renders a large big icon 1`] = ` +
+
+ + + +
+
+`; + +exports[`BigIcon > renders a medium big icon 1`] = ` +
+
+ + + +
+
+`; + +exports[`BigIcon > renders a small big icon 1`] = ` +
+
+ + + +
+
+`; + +exports[`BigIcon > renders a success big icon 1`] = ` +
+
+ + + +
+
+`; diff --git a/src/components/Icon/BigIcon/index.ts b/src/components/Icon/BigIcon/index.ts new file mode 100644 index 00000000..613635d4 --- /dev/null +++ b/src/components/Icon/BigIcon/index.ts @@ -0,0 +1,17 @@ +/* +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 { BigIcon } from "./BigIcon"; diff --git a/src/index.ts b/src/index.ts index 7017a0bd..557e658a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -37,6 +37,7 @@ export { H6, } from "./components/Typography/Heading"; export { IndicatorIcon } from "./components/Icon/IndicatorIcon/IndicatorIcon"; +export { BigIcon } from "./components/Icon/BigIcon"; export { Link } from "./components/Link/Link"; export { NavBar, NavItem } from "./components/Nav"; export { Menu } from "./components/Menu/Menu";