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

Optimizely's Component Library.

import React from "react";
import Icon from "react-oui-icons";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { withKnobs, text, boolean as _boolean, number, select } from "@storybook/addon-knobs";
import Input from "./index";
var stories = storiesOf("Forms|Input", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.createElement("div", {
    id: "root-preview"
  }, story());
});
stories.add("Input with knobs", function () {
  return React.createElement(Input, {
    defaultValue: text("defaultValue", "some default value"),
    displayError: _boolean("displayError", false),
    hasSpellCheck: _boolean("hasSpellCheck", false),
    id: "input-01",
    isFilter: _boolean("isFilter", false),
    isDropdown: _boolean("isDropdown", true),
    isOptional: _boolean("isOptional", false),
    label: text("Label", "Always Include a Label"),
    max: number("max", 50),
    maxLength: number("maxLength", 250),
    min: number("min", 10),
    onChange: action("on change"),
    onBlur: action("on blur"),
    onKeyDown: action("on key press"),
    placeholder: text("placeholder", "just a placeholder"),
    isRequired: _boolean("isRequired", false),
    type: select("type", ["text", "password", "number", "date"], "text")
  });
}).add("Inputs", function () {
  return React.createElement("div", null, React.createElement("fieldset", null, React.createElement(Input, {
    id: "input-01",
    label: "Field label",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text"
  })), React.createElement("fieldset", null, React.createElement(Input, {
    id: "input-02",
    label: "Label for required field",
    isRequired: true,
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text"
  })), React.createElement("fieldset", null, React.createElement(Input, {
    id: "input-03",
    label: "Field label",
    placeholder: "Just a placeholder",
    type: "text"
  })), React.createElement("fieldset", null, React.createElement(Input, {
    id: "input-04",
    label: "Field label",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text"
  })), React.createElement("fieldset", null, React.createElement(Input, {
    id: "input-05",
    label: "Field label",
    placeholder: "Just a placeholder",
    type: "text"
  })), React.createElement("fieldset", null, React.createElement(Input, {
    id: "input-06",
    label: "Field label",
    placeholder: "Has an error",
    note: "A short description or note describing the error.",
    type: "text",
    displayError: true
  })), React.createElement("fieldset", null, React.createElement(Input, {
    id: "input-07",
    label: "Start Time",
    type: "time"
  })));
}).add("Error states", function () {
  return React.createElement("div", null, React.createElement("fieldset", null, React.createElement(Input, {
    id: "input-01",
    label: "Field label",
    displayError: true,
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text"
  })), React.createElement("fieldset", null, React.createElement(Input, {
    id: "input-02",
    label: "Field label",
    displayError: true,
    placeholder: "Just a placeholder",
    type: "text"
  })), React.createElement("fieldset", null, React.createElement(Input, {
    id: "input-03",
    label: "Field Label",
    displayError: true,
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text"
  })));
}).add("With Icons or Clear Button", function () {
  return React.createElement("div", {
    className: "flex flex--column flex-justified--between",
    style: {
      height: "500px"
    }
  }, React.createElement(Input, {
    leftIconName: "search",
    id: "input-01",
    label: "With leftIconName",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text"
  }), React.createElement(Input, {
    rightIconName: "search",
    id: "input-02",
    label: "With rightIconName",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text"
  }), React.createElement(Input, {
    leftIconName: "calendar",
    rightIconName: "exclamation",
    id: "input-03",
    label: "With both leftIconName and rightIconName",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text"
  }), React.createElement(Input, {
    id: "input-03",
    label: "With RightContainer",
    note: "A short description or note about this field.",
    placeholder: "Just a placeholder",
    type: "text",
    RightContainer: RightContainer
  }), React.createElement(Input, {
    id: "input-04",
    label: "Input with Clear Button",
    hasClearButton: true,
    placeholder: "Just a placeholder",
    type: "text"
  }), React.createElement(Input, {
    id: "input-05",
    label: "Search with Icon and Clear Button",
    leftIconName: "search",
    hasClearButton: true,
    placeholder: "Just a placeholder",
    type: "text"
  }));
});

var RightContainer = function RightContainer() {
  return React.createElement(Icon, {
    name: "align-right"
  });
};