Untitled

import MessageBar from "./MessageBar";

export default {
  title: "Atoms/MessageBar",
  component: MessageBar,
  argTypes: {
    type: {
      control: { type: "select" },
      options: ["warning", "error", "success"],
    },
    variant: {
      control: { type: "select" },
      options: ["single-line", "multiple-line", "multi-line-collapsible"],
    },
    title: { control: "text" },
    description: { control: "text" },
    image: { control: "text" },
    backgroundColor: { control: "color" },
  },
};

const Template = (args) => <MessageBar {...args} />;

export const SingleWarning = Template.bind({});
SingleWarning.args = {
  type: "warning",
  variant: "single-line",
  title: "There is a problem with the case.",
  description:
    "Error message: Currency 'BAM' not available. Could not convert the respective values.",
  backgroundColor: "#FFF8E1",
};

export const MultipleWarningCollapsed = Template.bind({});
MultipleWarningCollapsed.args = {
  type: "warning",
  variant: "multi-line-collapsible",
  title: "There is a problem with the case. Please see error messages.",
  description: "",
  backgroundColor: "#FFF8E1",
};

export const MultipleWarningExpanded = Template.bind({});
MultipleWarningExpanded.args = {
  type: "warning",
  variant: "multiple-line",
  title: "There is a problem with the case. Please see error messages.",
  description: [
    "Error message: Currency 'BAM' not available. Could not convert the respective values.",
    "Error message: 502 response failed.",
  ],
  backgroundColor: "#FFF8E1",
};

export const SingleError = Template.bind({});
SingleError.args = {
  type: "error",
  variant: "single-line",
  title: "Headline.",
  description: "Error message: single line.",
  backgroundColor: "#FFEBEE",
};

export const MultipleErrorCollapsed = Template.bind({});
MultipleErrorCollapsed.args = {
  type: "error",
  variant: "multi-line-collapsible",
  title: "Headline. Please see error messages.",
  description: "",
  backgroundColor: "#FFEBEE",
};

export const MultipleErrorExpanded = Template.bind({});
MultipleErrorExpanded.args = {
  type: "error",
  variant: "multiple-line",
  title: "Headline. Please see error messages.",
  description: ["Error message: details...", "Error message: details..."],
  backgroundColor: "#FFEBEE",
};

export const SuccessMessage = Template.bind({});
SuccessMessage.args = {
  type: "success",
  variant: "single-line",
  title: "Good job.",
  description: "Success message goes here.",
  backgroundColor: "#E8F5E9",
};