2021-07-14 14:12:13 +00:00
|
|
|
import React from "react";
|
|
|
|
import Box from "../box";
|
|
|
|
import SnackBar from "./";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
title: "Components/SnackBar",
|
|
|
|
component: SnackBar,
|
|
|
|
parameters: {
|
|
|
|
docs: {
|
|
|
|
description: {
|
|
|
|
component: "SnackBar is used for displaying important messages.",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
argTypes: {
|
|
|
|
onAction: {
|
|
|
|
action: "onAction",
|
|
|
|
},
|
2021-07-20 08:07:41 +00:00
|
|
|
textColor: { control: "color" },
|
|
|
|
backgroundColor: { control: "color" },
|
2021-07-20 10:07:50 +00:00
|
|
|
showIcon: { control: "boolean" },
|
2021-07-14 14:12:13 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
const Wrapper = ({ children }) => (
|
|
|
|
<Box id="main-bar" displayProp="grid">
|
|
|
|
{children}
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
|
|
|
|
const BaseTemplate = (args) => (
|
|
|
|
<Wrapper>
|
|
|
|
<SnackBar {...args} onClose={(e) => alert("OnClose handled!", e)} />
|
|
|
|
</Wrapper>
|
|
|
|
);
|
|
|
|
|
|
|
|
export const base = BaseTemplate.bind({});
|
|
|
|
base.args = {
|
|
|
|
backgroundImg: "",
|
2021-07-20 08:07:41 +00:00
|
|
|
backgroundColor: "#f8f7bf",
|
|
|
|
textColor: "#000",
|
2021-07-14 14:12:13 +00:00
|
|
|
opacity: 1,
|
|
|
|
headerText: "Attention",
|
|
|
|
text:
|
|
|
|
"We apologize for any short-term technical issues in service functioning, that may appear on 22.06.2021 during the update of Onlyoffice Personal.",
|
2021-07-20 10:07:50 +00:00
|
|
|
showIcon: true,
|
2021-07-20 10:19:56 +00:00
|
|
|
fontSize: "13px",
|
|
|
|
fontWeight: "400",
|
|
|
|
textAlign: "left",
|
2021-07-21 07:52:15 +00:00
|
|
|
htmlContent: "",
|
2021-07-14 14:12:13 +00:00
|
|
|
};
|