@kiwicom/orbit-components/src/CountryFlag/CountryFlag.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 chaptersAddon from "react-storybook-addon-chapters";
import { withKnobs, text, select } from "@storybook/addon-knobs/react";
import styles from "@sambego/storybook-styles/dist/index";

import { CODES } from "./consts";

import CountryFlag from "./index";

setAddon(chaptersAddon);

storiesOf("CountryFlag", module)
  .addDecorator(withKnobs)
  .addDecorator(
    styles({
      padding: "20px",
    }),
  )
  .addWithChapters("Default", () => {
    const code = select("Code", Object.values(CODES), CODES.ANYWHERE);

    return {
      info:
        "Country flag displays one flag of selected country. Visit Orbit.Kiwi for more detailed guidelines.",
      chapters: [
        {
          sections: [
            {
              sectionFn: () => <CountryFlag code={code} />,
            },
          ],
        },
      ],
    };
  })
  .addWithChapters("Playground", () => {
    const code = select("Code", Object.values(CODES), CODES.ANYWHERE);
    const name = text("Name", "Country");
    const dataTest = text("dataTest", "test");
    return {
      info:
        "Country flag displays one flag of selected country. Visit Orbit.Kiwi for more detailed guidelines.",
      chapters: [
        {
          sections: [
            {
              sectionFn: () => <CountryFlag code={code} name={name} dataTest={dataTest} />,
            },
          ],
        },
      ],
    };
  });