glide-design-system/src/stories/modal/Modal.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 "@storybook/addon-a11y";
import {
  Button,
  Modal,
  ModalActions,
  ModalContent,
  ModalTitle,
} from "../../lib";
import { useState } from "react";

export default {
  title: "Components/Modal",
  component: Modal,
  tags: ["autodocs"],
  stories: ["./ModalConfigure.mdx"],
  argTypes: {
    open: {
      control: "boolean",
      description: "Controls the visibility of the modal.",
    },
    onClose: {
      action: "changed",
      description: "Function to handle the modal close event.",
    },
    title: {
      control: "text",
      description: "Displays the title of the modal.",
    },
    actions: {
      control: "boolean",
      description: "Show or hide actions in the modal.",
    },
    style: {
      control: "object",
      description:
        "Additional CSS styles to apply to the modal item component for custom styling.",
    },
    containerStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the container of the Modal component.",
    },
    containerClass: {
      control: "",
      description:
        "Additional CSS class names to apply to the container of the Modal component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the of the Modal component for custom styling using className.",
    },
    id: {
      control: "",
      description: "The unique identifier for the modal.",
    },
    name: {
      control: "",
      description: "The name attribute for the modal.",
    },
  },
  parameters: {
    layout: "centered",
    controls: { expanded: true },
  },
};

const Template = ({ open, title, actions, style }) => {
  const [isOpen, setIsOpen] = useState(open);

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

  return (
    <div style={{ padding: 50 }}>
      <Button primary size="medium" label="openModal" onClick={handleModal}>
        Open Modal
      </Button>
      <Modal style={style} open={open ? open : isOpen} onClose={handleModal}>
        {title && <ModalTitle onClick={handleModal}>{title}</ModalTitle>}
        <ModalContent>
          <h3>Hello world!</h3>
        </ModalContent>
        {actions && (
          <ModalActions style={{ justifyContent: "right", display: "flex" }}>
            <Button color="secondary" onClick={handleModal}>
              Cancel
            </Button>
            <Button onClick={() => {}}>Submit</Button>
          </ModalActions>
        )}
      </Modal>
    </div>
  );
};

/**
 * BasicModal demonstrates a modal with both a title and actions.
 * It shows how to use the Modal component with a title and action buttons.
 */
export const BasicModal = Template.bind({});
BasicModal.args = {
  open: false,
  title: "Title",
  actions: true,
};

/**
 * Using Modal Title will give you the header to the modal with default style and close icon.
 */
export const Title = Template.bind({});
Title.args = {
  open: true,
  title: "Title",
  actions: true,
};

/**
 * Using Modal Actions will give you the footer to the modal with default style.
 */
export const Actions = Template.bind({});
Actions.args = {
  open: true,
  title: "",
  actions: true,
};

/**
 * Using Modal Style will give you the custom style to the modal.
 */
export const Style = Template.bind({});
Style.args = {
  open: true,
  title: "",
  actions: true,
  style: { backgroundColor: "#ddd" },
};