Merge pull request #173 from element-hq/dbkr/toast

Implement the Toast component

src/components/Toast/Toast.module.css

@@ -0,0 +1,24 @@
+/*
+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.
+*/
+
+.toast-container {
+  inline-size: fit-content;
+  background-color: var(--cpd-color-alpha-gray-1300);
+  color: var(--cpd-color-text-on-solid-primary);
+  border-radius: 99px;
+  font-size: var(--cpd-font-body-sm-medium);
+  padding: var(--cpd-space-2x) var(--cpd-space-4x);
+}

src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,38 @@
+/*
+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 { Meta } from "@storybook/react";
+
+import { Toast as ToastComponent } from "./Toast";
+
+export default {
+  title: "Toast",
+  component: ToastComponent,
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {
+    children: "Would you like some toast?",
+  },
+  design: {
+    type: "figma",
+    url: "https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=3627-42633&t=m0RMwUTXkukgU29g-0",
+  },
+} as Meta<typeof ToastComponent>;
+
+export const Default = {
+  args: {},
+  parameters: {},
+};

src/components/Toast/Toast.test.tsx

@@ -0,0 +1,28 @@
+/*
+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, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import React from "react";
+
+import { Toast } from "./Toast";
+
+describe("Toast", () => {
+  it("renders", () => {
+    const { asFragment } = render(<Toast />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/Toast/Toast.tsx

@@ -0,0 +1,35 @@
+/*
+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 classnames from "classnames";
+import React, { forwardRef, PropsWithChildren } from "react";
+import styles from "./Toast.module.css";
+
+type ToastProps = {
+  className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(
+  { children, className, ...props }: PropsWithChildren<ToastProps>,
+  ref,
+) {
+  const classes = classnames(styles["toast-container"], className);
+  return (
+    <div {...props} className={classes} ref={ref}>
+      {children}
+    </div>
+  );
+});

src/components/Toast/__snapshots__/Toast.test.tsx.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Toast > renders 1`] = `
+<DocumentFragment>
+  <div
+    class="_toast-container_e9cea7"
+  />
+</DocumentFragment>
+`;

src/index.ts

@@ -45,6 +45,7 @@ export { Separator } from "./components/Separator/Separator";
 export { ToggleMenuItem } from "./components/Menu/ToggleMenuItem";
 export { Tooltip } from "./components/Tooltip/Tooltip";
 export { ReleaseAnnouncement } from "./components/ReleaseAnnouncement";
+export { Toast } from "./components/Toast/Toast";
 
 export {
   TextControl,