monday-ui-react-core/src/components/ExpandCollapse/__stories__/expandCollapse.stories.js

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

import React from "react";
import { action } from '@storybook/addon-actions';
import { text, number } from "@storybook/addon-knobs";
import { withPerformance } from "storybook-addon-performance";
import ExpandCollapse from "../ExpandCollapse";
import Icon from "../../Icon/Icon";
import Robot from "../../Icon/Icons/components/Robot";
import "./expandCollapse.stories.scss"

export const Sandbox = () => {
    const width = number("width", 300);
    const height = number("height", 200);

    return (<div style={{ width, height }}>
        <ExpandCollapse 
        headerComponentRenderer={() => <span>I can be anything</span>}>
            <h2>insert any component you want</h2>
            <p>here is a robot for you</p>
            <Icon iconType={Icon.type.SVG} icon={Robot} iconSize={"52px"} tabindex="-1" clickable={true} />
        </ExpandCollapse>
    </div>);
};

export const OpenByDefault = () => (
    <div>
        <ExpandCollapse 
        className="expandCollapse"
        defaultOpenState={true}
        headerComponentRenderer={() => <h1>Any component you want</h1>}>
            <Icon iconType={Icon.type.SVG} icon={Robot} iconSize={"52px"} tabindex="-1" clickable={true} />
        </ExpandCollapse>
    </div>
);

export default {
    title: "Components/ExpandCollapse",
    component: ExpandCollapse,
    decorators: [withPerformance]

};