Merge pull request #293 from element-hq/florianduros/big-icon

Add BigIcon component

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);
+}

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: <KeyIcon />,
+  },
+} as Meta<typeof BigIconComponent>;
+
+const Template: StoryFn<typeof BigIconComponent> = (args) => (
+  <BigIconComponent {...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,
+};

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(<Default />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders a medium big icon", () => {
+    const { container } = render(<Medium />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders a small big icon", () => {
+    const { container } = render(<Small />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders a destructive big icon", () => {
+    const { container } = render(<Destructive />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders a success big icon", () => {
+    const { container } = render(<Success />);
+    expect(container).toMatchSnapshot();
+  });
+});

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<BigIconProps>): JSX.Element {
+  return (
+    <div
+      className={classNames(styles.content, className, {
+        [styles.destructive]: destructive,
+        [styles.success]: success,
+      })}
+      data-size={size}
+    >
+      {React.Children.only(children)}
+    </div>
+  );
+}

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`] = `
+<div>
+  <div
+    class="_content_ce8c5a _destructive_ce8c5a"
+    data-size="large"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 7 14Zm0 4c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.117 0 2.13.275 3.037.825A6.212 6.212 0 0 1 12.2 9h8.375a1.033 1.033 0 0 1 .725.3l2 2c.1.1.17.208.212.325.042.117.063.242.063.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-3.175 3.175a.946.946 0 0 1-.3.2c-.117.05-.233.083-.35.1a.832.832 0 0 1-.35-.025.884.884 0 0 1-.325-.175L17.5 15l-1.425 1.075a.945.945 0 0 1-.887.15.859.859 0 0 1-.288-.15L13.375 15H12.2a6.212 6.212 0 0 1-2.162 2.175C9.128 17.725 8.117 18 7 18Zm0-2c.933 0 1.754-.283 2.463-.85A4.032 4.032 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.032 4.032 0 0 0-1.412-2.15C8.754 8.283 7.933 8 7 8c-1.1 0-2.042.392-2.825 1.175C3.392 9.958 3 10.9 3 12s.392 2.042 1.175 2.825C4.958 15.608 5.9 16 7 16Z"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`BigIcon > renders a large big icon 1`] = `
+<div>
+  <div
+    class="_content_ce8c5a"
+    data-size="large"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 7 14Zm0 4c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.117 0 2.13.275 3.037.825A6.212 6.212 0 0 1 12.2 9h8.375a1.033 1.033 0 0 1 .725.3l2 2c.1.1.17.208.212.325.042.117.063.242.063.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-3.175 3.175a.946.946 0 0 1-.3.2c-.117.05-.233.083-.35.1a.832.832 0 0 1-.35-.025.884.884 0 0 1-.325-.175L17.5 15l-1.425 1.075a.945.945 0 0 1-.887.15.859.859 0 0 1-.288-.15L13.375 15H12.2a6.212 6.212 0 0 1-2.162 2.175C9.128 17.725 8.117 18 7 18Zm0-2c.933 0 1.754-.283 2.463-.85A4.032 4.032 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.032 4.032 0 0 0-1.412-2.15C8.754 8.283 7.933 8 7 8c-1.1 0-2.042.392-2.825 1.175C3.392 9.958 3 10.9 3 12s.392 2.042 1.175 2.825C4.958 15.608 5.9 16 7 16Z"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`BigIcon > renders a medium big icon 1`] = `
+<div>
+  <div
+    class="_content_ce8c5a"
+    data-size="medium"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 7 14Zm0 4c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.117 0 2.13.275 3.037.825A6.212 6.212 0 0 1 12.2 9h8.375a1.033 1.033 0 0 1 .725.3l2 2c.1.1.17.208.212.325.042.117.063.242.063.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-3.175 3.175a.946.946 0 0 1-.3.2c-.117.05-.233.083-.35.1a.832.832 0 0 1-.35-.025.884.884 0 0 1-.325-.175L17.5 15l-1.425 1.075a.945.945 0 0 1-.887.15.859.859 0 0 1-.288-.15L13.375 15H12.2a6.212 6.212 0 0 1-2.162 2.175C9.128 17.725 8.117 18 7 18Zm0-2c.933 0 1.754-.283 2.463-.85A4.032 4.032 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.032 4.032 0 0 0-1.412-2.15C8.754 8.283 7.933 8 7 8c-1.1 0-2.042.392-2.825 1.175C3.392 9.958 3 10.9 3 12s.392 2.042 1.175 2.825C4.958 15.608 5.9 16 7 16Z"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`BigIcon > renders a small big icon 1`] = `
+<div>
+  <div
+    class="_content_ce8c5a"
+    data-size="small"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 7 14Zm0 4c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.117 0 2.13.275 3.037.825A6.212 6.212 0 0 1 12.2 9h8.375a1.033 1.033 0 0 1 .725.3l2 2c.1.1.17.208.212.325.042.117.063.242.063.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-3.175 3.175a.946.946 0 0 1-.3.2c-.117.05-.233.083-.35.1a.832.832 0 0 1-.35-.025.884.884 0 0 1-.325-.175L17.5 15l-1.425 1.075a.945.945 0 0 1-.887.15.859.859 0 0 1-.288-.15L13.375 15H12.2a6.212 6.212 0 0 1-2.162 2.175C9.128 17.725 8.117 18 7 18Zm0-2c.933 0 1.754-.283 2.463-.85A4.032 4.032 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.032 4.032 0 0 0-1.412-2.15C8.754 8.283 7.933 8 7 8c-1.1 0-2.042.392-2.825 1.175C3.392 9.958 3 10.9 3 12s.392 2.042 1.175 2.825C4.958 15.608 5.9 16 7 16Z"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`BigIcon > renders a success big icon 1`] = `
+<div>
+  <div
+    class="_content_ce8c5a _success_ce8c5a"
+    data-size="large"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 7 14Zm0 4c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.117 0 2.13.275 3.037.825A6.212 6.212 0 0 1 12.2 9h8.375a1.033 1.033 0 0 1 .725.3l2 2c.1.1.17.208.212.325.042.117.063.242.063.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-3.175 3.175a.946.946 0 0 1-.3.2c-.117.05-.233.083-.35.1a.832.832 0 0 1-.35-.025.884.884 0 0 1-.325-.175L17.5 15l-1.425 1.075a.945.945 0 0 1-.887.15.859.859 0 0 1-.288-.15L13.375 15H12.2a6.212 6.212 0 0 1-2.162 2.175C9.128 17.725 8.117 18 7 18Zm0-2c.933 0 1.754-.283 2.463-.85A4.032 4.032 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.032 4.032 0 0 0-1.412-2.15C8.754 8.283 7.933 8 7 8c-1.1 0-2.042.392-2.825 1.175C3.392 9.958 3 10.9 3 12s.392 2.042 1.175 2.825C4.958 15.608 5.9 16 7 16Z"
+      />
+    </svg>
+  </div>
+</div>
+`;

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";

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";