monday-ui-react-core/src/components/AttentionBox/__stories__/attentionBox.stories.js

Official monday.com UI resources for application development in React.js

import React from "react";
import AttentionBox from "../AttentionBox";
import {
  StoryStateRow,
  ComponentStateDescription,
} from "../../storybook-helpers";
import { text, boolean, number, select } from "@storybook/addon-knobs";
import StoryWrapper from "../../../StoryBookComponents/StoryWrapper/StoryWrapper";
import { ATTENTION_BOX_TYPES } from "../AttentionBoxConstants";
import "./attentionBox.stories.scss";
import Icon from "../../Icon/Icon";

const ATTENTION_BOX_TITLE = "Attention box title";
const ATTENTION_BOX_TEXT =
  "Studies show that 100% of people who celebrate birthdays, will eventually die.";

export const Sandbox = () => {
  return (
    <StoryWrapper>
      <AttentionBox
        title={text("Title", ATTENTION_BOX_TITLE)}
        text={text("Text", ATTENTION_BOX_TEXT)}
        type={select(
          "type",
          {
            Primary: ATTENTION_BOX_TYPES.PRIMARY,
            Success: ATTENTION_BOX_TYPES.SUCCESS,
            Danger: ATTENTION_BOX_TYPES.DANGER,
            Dark: ATTENTION_BOX_TYPES.DARK,
          },
          ATTENTION_BOX_TYPES.PRIMARY
        )}
      />
    </StoryWrapper>
  );
};

export const States = () => {
  return (
    <StoryWrapper>
      <StoryStateRow>
        <ComponentStateDescription title="Primary" />
        {renderAttentionBox(ATTENTION_BOX_TYPES.PRIMARY)}
      </StoryStateRow>
      <StoryStateRow>
        <ComponentStateDescription title="Success" />
        {renderAttentionBox(ATTENTION_BOX_TYPES.SUCCESS)}
      </StoryStateRow>
      <StoryStateRow>
        <ComponentStateDescription title="Danger" />
        {renderAttentionBox(ATTENTION_BOX_TYPES.DANGER)}
      </StoryStateRow>
      <StoryStateRow>
        <ComponentStateDescription title="Dark" />
        {renderAttentionBox(ATTENTION_BOX_TYPES.DARK)}
      </StoryStateRow>
    </StoryWrapper>
  );
};

const renderAttentionBox = (type) => {
  const customClass = "monday-style-attention-box-component-custom-class";

  return (
    <AttentionBox
      type={type}
      title={ATTENTION_BOX_TITLE}
      text={ATTENTION_BOX_TEXT}
      componentClassName={customClass}
    />
  );
};

export default {
  title: "Components|AttentionBox",
  component: AttentionBox,
};