@axeptio/design-system/src/Core/Toasts/toasts.stories.jsx

Design System for Axeptio

import React from 'react';
import Toast, { ToastProvider, useToast } from './index';
import Button from '../Controls/Button';

export default {
  title: 'Core/Toasts',
  component: Toast
};

const Template = args => <Toast {...args}>{args?.children}</Toast>;

const SpecialButton = args => {
  const toast = useToast();
  const showToast = () => toast.open(args);

  return <Button onClick={showToast}>Click me</Button>;
};

const ToastButton = args => {
  return (
    <ToastProvider>
      <SpecialButton {...args} />
    </ToastProvider>
  );
};

export const Static = Template.bind({});
Static.args = {
  position: 'top-middle',
  absolute: true,
  title: 'New mail !',
  description: 'Check your mailbox to see our monthly newletters ✌️',
  backgroundColor: '#212121',
  color: '#FFF',
  icon: 'Mail'
};

export const TopLeft = Template.bind({});
TopLeft.args = {
  position: 'top-left',
  absolute: true,
  title: 'New mail !',
  description: 'Check your mailbox to see our monthly newletters ✌️',
  backgroundColor: '#212121',
  color: '#FFF',
  icon: 'Mail'
};

export const TopMiddle = Template.bind({});
TopMiddle.args = {
  position: 'top-middle',
  absolute: true,
  title: 'New mail !',
  description: 'Check your mailbox to see our monthly newletters ✌️',
  backgroundColor: '#212121',
  color: '#FFF',
  icon: 'Mail'
};

export const TopRight = Template.bind({});
TopRight.args = {
  position: 'top-right',
  absolute: true,
  title: 'New mail !',
  description: 'Check your mailbox to see our monthly newletters ✌️',
  backgroundColor: '#212121',
  color: '#FFF',
  icon: 'Mail'
};

export const BottomLeft = Template.bind({});
BottomLeft.args = {
  position: 'bottom-left',
  absolute: true,
  title: 'New mail !',
  description: 'Check your mailbox to see our monthly newletters ✌️',
  backgroundColor: '#212121',
  color: '#FFF',
  icon: 'Mail'
};

export const BottomMiddle = Template.bind({});
BottomMiddle.args = {
  position: 'bottom-middle',
  absolute: true,
  title: 'New mail !',
  description: 'Check your mailbox to see our monthly newletters ✌️',
  backgroundColor: '#212121',
  color: '#FFF',
  icon: 'Mail'
};

export const BottomRight = Template.bind({});
BottomRight.args = {
  position: 'bottom-right',
  absolute: true,
  title: 'New mail !',
  description: 'Check your mailbox to see our monthly newletters ✌️',
  backgroundColor: '#212121',
  color: '#FFF',
  icon: 'Mail'
};

export const OnClick = ToastButton.bind({});
OnClick.args = {
  position: 'top-middle',
  title: 'New mail !',
  description: 'Check your mailbox to see our monthly newletters ✌️',
  backgroundColor: '#212121',
  color: '#FFF',
  icon: 'Mail'
};