glide-design-system/src/stories/speedDialButton/SpeedDialButton.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 React from "react";
import SpeedDialButton from "../../lib/components/speedDialButton/SpeedDialButton";
import { Button } from "../../lib/components/button/Button";

export default {
  title: "Components/SpeedDialButton",
  component: SpeedDialButton,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The SpeedDialButton component provides a floating action button that expands to reveal related actions. It is used for quick access to primary actions or shortcuts and supports customization for styling, icons, and layout.",
      },
    },
  },
  argTypes: {
    children: {
      control: "",
      description:
        "The content to be rendered inside the expanded SpeedDialButton, typically a list of action buttons.",
    },
    icon: {
      control: "",
      description:
        "The icon to display on the Speed Dial Button when it is not expanded.",
    },
    flexDirection: {
      control: "radio",
      description:
        " Specifies the direction in which the action buttons are laid out when the SpeedDialButton is expanded.",
      options: ["row", "row-reverse", "column", "column-reverse"],
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the Speed Dial component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the Speed Dial component for custom styling.",
    },
    containerStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the container of the Speed Dial Button component.",
    },
    containerClass: {
      control: "",
      description:
        "Additional CSS class names to apply to the container of the Speed Dial Button component for custom styling.",
    },
    contentStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the content of the expanded SpeedDialButton.",
    },
    contentClassName: {
      control: "",
      description:
        "Additional CSS class names to apply to the content of the expanded SpeedDialButton for custom styling.",
    },
  },
};

const Template = (args) => {
  return (
    <div style={{ height: "110px" }}>
      <SpeedDialButton {...args} icon="+">
        <Button>Action 1</Button>
        <Button>Action 2</Button>
      </SpeedDialButton>
    </div>
  );
};

export const Default = Template.bind({});
Default.args = {};
Default.parameters = {
  docs: {
    description: {
      story: "This story demonstrates the Speed Dial Button component.",
    },
  },
};

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  style: {
    backgroundColor: "#4db6ac",
  },
};
CustomStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Speed Dial Button component with custom styles.",
    },
  },
};

export const CustomContainerStyle = Template.bind({});
CustomContainerStyle.args = {
  containerStyle: {
    backgroundColor: "#4db6ac",
  },
};
CustomContainerStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Speed Dial Button component with custom container styles.",
    },
  },
};

export const CustomContentStyle = Template.bind({});
CustomContentStyle.args = {
  contentStyle: {
    backgroundColor: "#4db6ac",
  },
};
CustomContentStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Speed Dial Button component with custom content styles.",
    },
  },
};