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

Optimizely's Component Library.

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 1;\n    height: 100vh;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import React from "react";
import styled from "styled-components";
import { storiesOf } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";
import SelectDropdown from "./index.js";
import Form from "../Form/index";
var stories = storiesOf("Forms|SelectDropdown", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.createElement("div", {
    id: "root-preview"
  }, story());
});
var items = [{
  label: "Cat",
  description: "A small feline.",
  value: "cat"
}, {
  label: "Dog",
  value: "dog",
  isSelected: true
}, {
  label: "Dog with a really long name",
  value: "dog-long"
}, {
  label: "Bear",
  description: "Likes honey",
  value: "bear",
  isSelected: true
}, {
  label: "Squirrel",
  description: "Smarter than it looks",
  value: "squirrel"
}];
stories.add("With Labels, Errors, and Notes", function () {
  return React.createElement(Container, null, React.createElement(Form, null, React.createElement(Form.Section, null, React.createElement(SelectDropdown, {
    items: items,
    value: "dog",
    onChange: action("SelectDropdown value changed")
  })), React.createElement(Form.Section, null, React.createElement("p", null, "With a label above using ", React.createElement("code", null, "label "), "prop"), React.createElement(Form.Row, null, React.createElement(Form.Item, null, React.createElement(SelectDropdown, {
    label: "Favorite Animal",
    items: items,
    minDropdownWidth: "400px ",
    onChange: action("SelectDropdown value changed"),
    value: "dog"
  })), React.createElement(Form.Item, null, React.createElement(SelectDropdown, {
    label: "Favorite Animal",
    isRequired: true,
    items: items,
    minDropdownWidth: "400px",
    onChange: action("SelectDropdown value changed"),
    value: "dog"
  })))), React.createElement(Form.Section, null, React.createElement("p", null, "With a label and outline within using ", React.createElement("code", null, "buttonContent "), "prop"), React.createElement(SelectDropdown, {
    buttonContent: {
      label: "Favorite Animal",
      content: "Dog"
    },
    items: items,
    buttonStyle: "outline",
    minDropdownWidth: "400px ",
    onChange: action("SelectDropdown value changed"),
    value: "dog"
  })), React.createElement(Form.Section, null, React.createElement("p", null, "With a label and with outline & hover effect within using", React.createElement("code", null, " buttonContent "), "prop"), React.createElement(SelectDropdown, {
    buttonContent: {
      label: "Favorite Animal",
      content: "Cat"
    },
    items: items,
    buttonStyle: "plain",
    minDropdownWidth: "400px ",
    onChange: action("SelectDropdown value changed"),
    value: "cat"
  })), React.createElement(Form.Section, null, React.createElement("p", null, "With an error and note using ", React.createElement("code", null, "displayError and note "), "props"), React.createElement(Form.Row, null, React.createElement(Form.Item, null, React.createElement(SelectDropdown, {
    items: items,
    minDropdownWidth: "400px ",
    displayError: true,
    note: "A note about this error",
    value: "dog"
  })), React.createElement(Form.Item, null, React.createElement(SelectDropdown, {
    label: "Favorite Animal",
    items: items,
    minDropdownWidth: "400px ",
    displayError: true,
    note: "A note about this error",
    value: "dog"
  })))), React.createElement(Form.Section, null, React.createElement("p", null, "With isDisabled = true"), React.createElement(SelectDropdown, {
    label: "Favorite Animal",
    items: items,
    isDisabled: true,
    minDropdownWidth: "400px ",
    note: "Only applies to XYZ",
    value: "dog"
  }))));
}).add("Initial placeholder", function () {
  return React.createElement(Container, null, React.createElement(SelectDropdown, {
    items: items,
    initialPlaceholder: "Select a value...",
    onChange: action("SelectDropdown value changed")
  }));
}).add("Width of activator", function () {
  return React.createElement(Container, null, React.createElement(SelectDropdown, {
    items: items,
    value: "dog",
    onChange: action("SelectDropdown value changed"),
    width: "400px "
  }));
}).add("Width of dropdown", function () {
  return React.createElement(Container, null, React.createElement(SelectDropdown, {
    items: items,
    value: "dog",
    onChange: action("SelectDropdown value changed"),
    minDropdownWidth: "400px "
  }));
}).add("Full Width Activator with Full Width items", function () {
  return React.createElement(Container, null, React.createElement("div", {
    style: {
      width: "400px",
      border: "1px solid",
      height: "100px"
    }
  }, React.createElement(SelectDropdown, {
    items: items,
    value: "dog",
    onChange: action("SelectDropdown value changed"),
    fullWidth: true
  })));
}).add("Full Width Activator with items with a different min width", function () {
  return React.createElement(Container, null, React.createElement("div", {
    style: {
      width: "400px",
      border: "1px solid",
      height: "100px"
    }
  }, React.createElement(SelectDropdown, {
    items: items,
    value: "dog",
    onChange: action("SelectDropdown value changed"),
    fullWidth: true,
    minDropdownWidth: 500
  })));
}).add("Specify max width of activator", function () {
  return React.createElement("div", null, React.createElement("p", {
    className: "push--bottom"
  }, "Specifying the ", React.createElement("code", null, "maxWidth"), " property allows you to truncate longer dropdowns while keeping shorter ones short."), React.createElement(Container, null, React.createElement(SelectDropdown, {
    items: items,
    value: "dog-long",
    onChange: action("SelectDropdown value changed"),
    maxWidth: "120px "
  }), React.createElement("div", {
    className: "push--left"
  }), React.createElement(SelectDropdown, {
    items: items,
    value: "dog",
    onChange: action("SelectDropdown value changed"),
    maxWidth: "120px "
  })));
}).add("Activator Label differs from Value", function () {
  var itemsWithActivatorLabel = [{
    activatorLabel: "Production",
    label: "Production (50%)",
    value: "Production"
  }, {
    activatorLabel: "Staging",
    label: "Staging (100%)",
    value: "Staging"
  }];
  return React.createElement(Container, null, React.createElement(SelectDropdown, {
    items: itemsWithActivatorLabel,
    value: "Production",
    onChange: action("SelectDropdown value changed")
  }));
}).add("Multi Select", function () {
  return React.createElement(Container, null, React.createElement(SelectDropdown, {
    isMultiSelect: true,
    items: items,
    initialPlaceholder: "Select a value...",
    minDropdownWidth: "400px ",
    onChange: action("SelectDropdown value changed")
  }));
}).add("Items with linkText or linkURL", function () {
  return React.createElement(Container, null, React.createElement(SelectDropdown, {
    items: [{
      label: "Elephant",
      description: "Very loud",
      value: "elephant",
      linkText: "I am a link, click me!",
      linkURL: "https://www.google.com",
      linkNewWindow: true
    }].concat(items),
    initialPlaceholder: "Select a value...",
    onChange: action("SelectDropdown value changed")
  }));
}).add("With a change in direction", function () {
  return React.createElement(Container, null, React.createElement("div", {
    style: {
      marginTop: "200px"
    }
  }, React.createElement("p", null, "Placement of dropdown is above"), React.createElement(SelectDropdown, {
    items: items,
    minDropdownWidth: "400px ",
    onChange: action("SelectDropdown value changed"),
    placement: "top-start",
    dropdownDirection: "up",
    value: "dog"
  })));
});
var Container = styled.div(_templateObject());