import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs, select, text, boolean as _boolean } from "@storybook/addon-knobs";
import Avatar from "./index.js";
import Container from "../Layout/Container";
import Row from "../Layout/Row";
var stories = storiesOf("Informational|Avatar", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.createElement("div", {
    id: "root-preview"
  }, story());
});
stories.add("Default", function () {
  return React.createElement(Container, null, React.createElement("p", null, "Size options are small and medium (large is the default and therefore achieved by not specifying a size)"), React.createElement(Row, null, React.createElement(Avatar, {
    size: select("size", {
      small: "small",
      medium: "medium",
      "large (default)": null
    }, "small")
  }), React.createElement(Avatar, {
    size: "medium"
  }), React.createElement(Avatar, null)), React.createElement(Row, {
    paddedContent: "ends"
  }, React.createElement(Avatar, {
    size: "small",
    imageUrl: text("imageUrl", "https://parkseed.com/images/xxl/52081-pk-p1.jpg")
  }), React.createElement(Avatar, {
    size: "medium",
    imageUrl: text("imageUrl", "https://parkseed.com/images/xxl/52081-pk-p1.jpg")
  }), React.createElement(Avatar, {
    imageUrl: text("imageUrl", "https://parkseed.com/images/xxl/52081-pk-p1.jpg")
  })), React.createElement(Row, null, React.createElement(Avatar, {
    size: "small",
    isEmulating: _boolean("isEmulating", true)
  }), React.createElement(Avatar, {
    size: "medium",
    isEmulating: _boolean("isEmulating", true)
  }), React.createElement(Avatar, {
    isEmulating: _boolean("isEmulating", true)
  })));
});