optimizely-oui/module/js/components/Select/Select.story.js

Optimizely's Component Library.

import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs, boolean as _boolean } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";
import Select from "./index.js";
import Attention from "../Attention/index.tsx";
var stories = storiesOf("Forms|Select", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.createElement("div", {
    id: "root-preview"
  }, story());
});
stories.add("Default", function () {
  return React.createElement(Select, {
    label: "My favorite zoo animal",
    isDisabled: _boolean("isDisabled", false),
    isOptional: _boolean("isOptional", false),
    name: "zoo",
    id: "zoo",
    onChange: action("On Change Called"),
    testSection: "favorite-zoo-animal-select"
  }, React.createElement("option", {
    value: "one"
  }, "This is option one - a Lion"), React.createElement("option", {
    value: "two"
  }, "And this is option two - a Tiger"));
}).add("Required (adds empty first value)", function () {
  return React.createElement(Select, {
    label: "My favorite zoo animal",
    isDisabled: false,
    isRequired: _boolean("isOptional", true),
    name: "zoo",
    id: "zoo",
    onChange: action("On Change Called")
  }, React.createElement("option", {
    value: "one"
  }, "This is option one - a Lion"), React.createElement("option", {
    value: "two"
  }, "And this is option two - a Tiger"));
}).add("With an error and note", function () {
  return React.createElement(Select, {
    displayError: true,
    label: "My favorite zoo animal",
    isDisabled: false,
    isRequired: true,
    name: "zoo",
    note: "This field is required",
    id: "zoo",
    onChange: action("On Change Called")
  }, React.createElement("option", {
    value: "one"
  }, "This is option one - a Lion"), React.createElement("option", {
    value: "two"
  }, "And this is option two - a Tiger"));
}).add("Full width variation", function () {
  return React.createElement(Select, {
    label: "My favorite zoo animal",
    isDisabled: false,
    name: "zoo",
    id: "zoo",
    isFullWidth: _boolean("isFullWidth", true),
    onChange: action("On Change Called")
  }, React.createElement("option", {
    value: "one"
  }, "This is option one - a Lion"), React.createElement("option", {
    value: "two"
  }, "And this is option two - a Tiger"));
}).add("Without a label", function () {
  return React.createElement("div", null, React.createElement(Attention, {
    type: "bad-news"
  }, React.createElement("p", null, "Please avoid using Select without a label. For accessibility and general usability reasons, a Select should always have a corresponding label.")), React.createElement("div", {
    className: "push--top"
  }, React.createElement(Select, {
    isDisabled: false,
    name: "zoo",
    id: "zoo",
    onChange: action("On Change Called")
  }, React.createElement("option", {
    value: "one"
  }, "This is option one - a Lion"), React.createElement("option", {
    value: "two"
  }, "And this is option two - a Tiger"))));
});