import { Link , Typography } from "@material-ui/core" ; import { Meta , Story } from "@storybook/react" ; import React from "react" ; import { Alert , AlertProps } from "./Alert" ; import { AlertBase } from "./AlertBase" ; const props = { close : false , title : "Title" , variant : "info" } ; export const Info = ( ) => < Alert { ... props } / > ; export const Warn = ( ) => < Alert { ... props } variant = "warning" / > ; export const Success = ( ) => < Alert { ... props } variant = "success" / > ; export const Error = ( ) => < Alert { ... props } variant = "error" / > ; export const WithClose = ( ) => < Alert { ... props } close />; export const WithContent = ( ) => ( < Alert { ... props } > Lorem ipsum dolor sit amet , consectetur adipiscing elit . < /Alert>); export const WithContentAndClose = ( ) => ( < Alert { ... props } close > Lorem ipsum dolor sit amet , consectetur adipiscing elit . < /Alert>); export const Custom = ( ) => ( < AlertBase { ... props } elevation = { 16 } variant = "warning" > < Typography > Lorem ipsum dolor sit amet , consectetur adipiscing elit . < /Typography> < /AlertBase>); export const WithoutTitle = ( ) => ( < Alert close = { false } variant = "info" > < Typography > Gift cards will appear after their order is fullfilled . { " " } < Link > View Orders with Gift Cards < /Link> < /Typography> < /Alert>); export default { title : "Alert" } as Meta ;