DocSpace-buildtools/packages/components/catalog-item/catalog-item.stories.js

import React from "react";
import CatalogItem from "./";
import CatalogFolderReactSvgUrl from "PUBLIC_DIR/images/catalog.folder.react.svg?url";
import CatalogGuestReactSvgUrl from "PUBLIC_DIR/images/catalog.guest.react.svg?url";
import CatalogTrashReactSvgUrl from "PUBLIC_DIR/images/catalog.trash.react.svg?url";

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 (
    <div style={{ width: "250px" }}>
      <CatalogItem
        {...args}
        icon={args.icon}
        text={args.text}
        showText={args.showText}
        showBadge={args.showBadge}
        onClick={() => {}}
        isEndOfBlock={args.isEndOfBlock}
        labelBadge={args.labelBadge}
        onClickBadge={() => {}}
      />
    </div>
  );
};

export const Default = Template.bind({});
Default.args = {
  icon: CatalogFolderReactSvgUrl,
  text: "Documents",
  showText: true,
  showBadge: true,
  isEndOfBlock: false,
  labelBadge: "2",
};

const OnlyIcon = () => {
  return (
    <div style={{ width: "52px" }}>
      <CatalogItem
        icon={CatalogFolderReactSvgUrl}
        text={"My documents"}
        showText={false}
        showBadge={false}
      />
    </div>
  );
};

export const IconWithoutBadge = OnlyIcon.bind({});

const OnlyIconWithBadge = () => {
  return (
    <div style={{ width: "52px" }}>
      <CatalogItem
        icon={CatalogGuestReactSvgUrl}
        text={"My documents"}
        showText={false}
        showBadge={true}
      />
    </div>
  );
};

export const IconWithBadge = OnlyIconWithBadge.bind({});

const InitialIcon = () => {
  return (
    <div style={{ width: "52px" }}>
      <CatalogItem
        icon={CatalogFolderReactSvgUrl}
        text={"Documents"}
        showText={false}
        showBadge={false}
        showInitial={true}
        onClick={() => {}}
      />
    </div>
  );
};

export const IconWithInitialText = InitialIcon.bind({});

const WithBadgeIcon = () => {
  return (
    <div style={{ width: "250px" }}>
      <CatalogItem
        icon={CatalogFolderReactSvgUrl}
        text={"My documents"}
        showText={true}
        showBadge={true}
        iconBadge={CatalogTrashReactSvgUrl}
      />
    </div>
  );
};

export const ItemWithBadgeIcon = WithBadgeIcon.bind({});

const TwoItem = () => {
  return (
    <div style={{ width: "250px" }}>
      <CatalogItem
        icon={CatalogFolderReactSvgUrl}
        text={"My documents"}
        showText={true}
        showBadge={true}
        onClick={() => {}}
        isEndOfBlock={true}
        labelBadge={3}
        onClickBadge={() => {}}
      />
      <CatalogItem
        icon={CatalogFolderReactSvgUrl}
        text={"Some text"}
        showText={true}
        showBadge={true}
        onClick={() => {}}
        iconBadge={CatalogTrashReactSvgUrl}
        onClickBadge={() => {}}
      />
    </div>
  );
};

export const ItemIsEndOfBlock = TwoItem.bind({});