orcs-design-system/es/components/Notification/Notification.stories.js

TeamForm's Design System, aka: ORCS

import React from "react";
import Notification from ".";
import Spacer from "../Spacer";
import Box from "../Box";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
  title: "Components/Notification",
  component: Notification,
  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
    p: "r",
    height: "250px",
    children: storyFn()
  })]
};
export const basicNotification = () => /*#__PURE__*/_jsx(Notification, {
  icon: ["fas", "share-square"],
  children: "Default notification message for messages that are not super important, e.g. Link shared."
});
basicNotification.storyName = "Basic";
export const colourNotification = () => /*#__PURE__*/_jsxs(Spacer, {
  m: "r",
  children: [/*#__PURE__*/_jsx(Notification, {
    colour: "success",
    icon: ["fas", "check-circle"],
    children: "Green notification for good/successful notifications, e.g. Details updated successfully!"
  }), /*#__PURE__*/_jsx(Notification, {
    colour: "warning",
    icon: ["fas", "exclamation-triangle"],
    children: "Yellow warning notification e.g. This may take a few minutes to update."
  }), /*#__PURE__*/_jsx(Notification, {
    colour: "danger",
    icon: ["fas", "exclamation-circle"],
    children: "Red error notification e.g. Update failed! Please try again."
  })]
});
colourNotification.storyName = "Alternate Colours";
export const textOnlyNotification = () => /*#__PURE__*/_jsx(Notification, {
  children: "Text-only notification"
});
textOnlyNotification.storyName = "Text-only";
export const closeDisabledNotification = () => /*#__PURE__*/_jsx(Notification, {
  closable: false,
  children: "Closing this notification is disabled, this should be used for persistent notifications e.g. Stage 1 is now locked and is read-only."
});
closeDisabledNotification.storyName = "Close Disabled";
export const loadingNotification = () => /*#__PURE__*/_jsxs(Spacer, {
  m: "r",
  children: [/*#__PURE__*/_jsx(Notification, {
    loading: true,
    children: "In progress notification E.g. Importing data..."
  }), /*#__PURE__*/_jsx(Notification, {
    loading: true,
    colour: "success",
    children: "In progress notification E.g. Importing data..."
  }), /*#__PURE__*/_jsx(Notification, {
    loading: true,
    colour: "warning",
    children: "In progress notification E.g. Importing data..."
  }), /*#__PURE__*/_jsx(Notification, {
    loading: true,
    colour: "danger",
    children: "In progress notification E.g. Importing data..."
  })]
});
loadingNotification.storyName = "Loading";
export const floatingNotification = () => /*#__PURE__*/_jsx(Notification, {
  floating: true,
  bottom: "20px",
  right: "20px",
  icon: ["fas", "bell"],
  children: "Floating notification."
});
floatingNotification.storyName = "Floating";
export const centeredNotification = () => /*#__PURE__*/_jsx(Notification, {
  centered: true,
  floating: true,
  bottom: "20px",
  children: "Centered notification"
});
centeredNotification.storyName = "Floating and Centered";
export const altStyleNotification = () => /*#__PURE__*/_jsxs(Spacer, {
  m: "r",
  children: [/*#__PURE__*/_jsx(Notification, {
    altStyle: true,
    closable: false,
    children: "Default notification message for standard messages that are not super important."
  }), /*#__PURE__*/_jsx(Notification, {
    altStyle: true,
    colour: "success",
    closable: false,
    children: "Green notification for good/successful notifications, e.g. Details updated successfully!"
  }), /*#__PURE__*/_jsx(Notification, {
    altStyle: true,
    colour: "warning",
    closable: false,
    children: "Yellow warning notification e.g. This may take a few minutes to update."
  }), /*#__PURE__*/_jsx(Notification, {
    altStyle: true,
    colour: "danger",
    closable: false,
    children: "Red error notification e.g. Update failed! Please try again."
  }), /*#__PURE__*/_jsx(Notification, {
    altStyle: true,
    icon: ["fas", "bell"],
    children: "Notification with icon"
  }), /*#__PURE__*/_jsx(Notification, {
    altStyle: true,
    loading: true,
    children: "Loading notification with alternate style"
  }), /*#__PURE__*/_jsx(Notification, {
    altStyle: true,
    icon: ["fas", "bell"],
    loading: true,
    children: "Loading notification with icon and alternate style"
  }), /*#__PURE__*/_jsx(Notification, {
    altStyle: true,
    icon: ["fas", "bell"],
    loading: true,
    colour: "success",
    children: "Success notification with all variations"
  }), /*#__PURE__*/_jsx(Notification, {
    altStyle: true,
    icon: ["fas", "bell"],
    loading: true,
    colour: "warning",
    children: "Warning notification with all variations"
  }), /*#__PURE__*/_jsx(Notification, {
    altStyle: true,
    icon: ["fas", "bell"],
    loading: true,
    colour: "danger",
    children: "Danger notification with all variations"
  })]
});
altStyleNotification.storyName = "Alternate Style";
basicNotification.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "basicNotification"
};
colourNotification.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "colourNotification"
};
textOnlyNotification.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "textOnlyNotification"
};
closeDisabledNotification.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "closeDisabledNotification"
};
loadingNotification.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "loadingNotification"
};
floatingNotification.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "floatingNotification"
};
centeredNotification.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "centeredNotification"
};
altStyleNotification.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "altStyleNotification"
};