glide-design-system/src/stories/snackbar/Snackbar.stories.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import { useState } from "react";
import { Snackbar } from "../../lib/components/snackbar/Snackbar";
import { Button } from "../../lib/components/button/Button";

export default {
  title: "Components/Snackbar",
  component: Snackbar,

  tags: ["autodocs"],
  argTypes: {
    position: {
      control: "select",
      options: [
        "top-left",
        "top-center",
        "top-right",
        "bottom-left",
        "bottom-center",
        "bottom-right",
      ],
      description: "Position of the snackbar on the screen.",
    },
    message: {
      control: "text",
      description: "Message to be displayed in the snackbar.",
    },
    onClose: {
      action: "changed",
      description: "Function to handle the close event of the snackbar.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the snackbar component for custom styling.",
    },
    id: {
      control: "",
      description: "The unique identifier for the snackbar component.",
    },
    name: {
      control: "",
      description: "The name attribute for the snackbar component.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the snackbar component for custom styling.",
    },
    open: {
      control: false,
      description: "If true, snackbar is visible",
    },
    type: {
      control: "radio",
      description: "Determines the CSS styles for the snackbar component.",
      options: ["success", "warning", "info", "error"],
    },
  },
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component:
          "The Snackbar component displays informative messages to users and supports different types like info, success, error, and warning.",
      },
    },
  },
};

const Template = ({ message, position, autoHideDuration, onClose }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleModal = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <div
        style={{
          padding: 50,
          width: "50vw",
          justifyContent: "center",
          display: "flex",
        }}
      >
        <Button primary size="medium" label="openModal" onClick={handleModal}>
          Open Snackbar
        </Button>
      </div>
      <Snackbar
        message={message}
        open={isOpen}
        autoHideDuration={autoHideDuration}
        type="success"
        position={position}
        onClose={onClose}
      />
    </>
  );
};

/**
 * Default demonstrates a basic Snackbar with a message, positioned at the top-center, and auto-hiding after 3 seconds.
 */

export const Default = Template.bind({});
Default.args = {
  message: "I am a Snackbar",
  position: "top-center",
  autoHideDuration: 2000,
  onClose: () => console.log("Snackbar closed"),
};

/**
 * Types demonstrates different types of Snackbar messages: info, success, error, and warning.
 */

export const Types = ({ position, message, autoHideDuration, onClose }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [type, setType] = useState();

  const handleModal = (type) => {
    setIsOpen(!isOpen);
    setType(type);
  };

  return (
    <>
      <div
        style={{
          padding: 50,
          justifyContent: "center",
          display: "flex",
          gap: 10,
        }}
      >
        <Button
          primary
          size="medium"
          label="openModal"
          onClick={() => handleModal("success")}
        >
          Open success snackbar
        </Button>
        <Button
          primary
          size="medium"
          label="openModal"
          onClick={() => handleModal("info")}
        >
          Open info snackbar
        </Button>
        <Button
          primary
          size="medium"
          label="openModal"
          onClick={() => handleModal("warning")}
        >
          Open warning snackbar
        </Button>
        <Button
          primary
          size="medium"
          label="openModal"
          onClick={() => handleModal("error")}
        >
          Open error snackbar
        </Button>
      </div>
      <Snackbar
        message={message}
        open={isOpen}
        autoHideDuration={autoHideDuration}
        type={type}
        position={position}
        onClose={onClose}
      />
    </>
  );
};

Types.args = {
  message: "I am a Snackbar",
  position: "top-center",
  autoHideDuration: 1000,
  onClose: () => console.log("Snackbar closed"),
};