@kiwicom/orbit-components/src/ButtonGroup/ButtonGroup.stories.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

// @flow

import * as React from "react";
import { storiesOf, setAddon } from "@storybook/react";
import styles from "@sambego/storybook-styles";
import chaptersAddon from "react-storybook-addon-chapters";
import { withKnobs, boolean, text } from "@storybook/addon-knobs/react";

import * as Icons from "../icons";
import Button from "../Button";
import ButtonLink from "../ButtonLink";

import ButtonGroup from "./index";

setAddon(chaptersAddon);

storiesOf("ButtonGroup", module)
  .addDecorator(withKnobs)
  .addDecorator(
    styles({
      padding: "20px",
    }),
  )
  .addWithChapters("With Buttons", () => {
    const connected = boolean("Connected", true);
    const dataTest = text("dataTest", "test");
    return {
      info:
        "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
      chapters: [
        {
          sections: [
            {
              sectionFn: () => (
                <ButtonGroup connected={connected} dataTest={dataTest}>
                  <Button icon={<Icons.Airplane />}>Button</Button>
                  <Button icon={<Icons.ChevronDown />} />
                </ButtonGroup>
              ),
            },
          ],
        },
      ],
    };
  })
  .addWithChapters("With ButtonLinks", () => {
    const connected = boolean("Connected", true);
    const dataTest = text("dataTest", "test");
    return {
      info:
        "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
      chapters: [
        {
          sections: [
            {
              sectionFn: () => (
                <ButtonGroup connected={connected} dataTest={dataTest}>
                  <ButtonLink type="secondary" icon={<Icons.Airplane />}>
                    Button
                  </ButtonLink>
                  <ButtonLink type="secondary" icon={<Icons.ChevronDown />} />
                </ButtonGroup>
              ),
            },
          ],
        },
      ],
    };
  });