import React from "react";
import CatalogItem from "./";
export default {
title: "Components/CatalogItem",
component: CatalogItem,
parameters: {
docs: {
description: {
component:
"Display catalog item. Can show only icon. If is it end of block - adding margin bottom.",
},
},
},
};
const Template = (args) => {
return (
{
console.log("clicked item");
}}
isEndOfBlock={args.isEndOfBlock}
labelBadge={args.labelBadge}
onClickBadge={() => {
console.log("clicked badge");
}}
/>
);
};
export const Default = Template.bind({});
Default.args = {
icon: "/static/images/catalog.folder.react.svg",
text: "Documents",
showText: true,
showBadge: true,
isEndOfBlock: false,
labelBadge: "2",
};
const OnlyIcon = () => {
return (
);
};
export const IconWithoutBadge = OnlyIcon.bind({});
const OnlyIconWithBadge = () => {
return (
);
};
export const IconWithBadge = OnlyIconWithBadge.bind({});
const InitialIcon = () => {
return (
{
console.log("clicked item");
}}
/>
);
};
export const IconWithInitialText = InitialIcon.bind({});
const WithBadgeIcon = () => {
return (
);
};
export const ItemWithBadgeIcon = WithBadgeIcon.bind({});
const TwoItem = () => {
return (
{
console.log("clicked item");
}}
isEndOfBlock={true}
labelBadge={3}
onClickBadge={() => {
console.log("clicked badge");
}}
/>
{
console.log("clicked item");
}}
iconBadge={"/static/images/catalog.trash.react.svg"}
onClickBadge={() => {
console.log("clicked badge");
}}
/>
);
};
export const ItemIsEndOfBlock = TwoItem.bind({});