optimizely-oui/dist/js/components/SearchPicker/SearchPicker.story.js

Optimizely's Component Library.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@storybook/react");

var _addonActions = require("@storybook/addon-actions");

var _addonKnobs = require("@storybook/addon-knobs");

var _Dropdown = _interopRequireDefault(require("../Dropdown"));

var _index = _interopRequireDefault(require("./index.js"));

var _Spinner = _interopRequireDefault(require("../Spinner"));

var _reactOuiIcons = _interopRequireDefault(require("react-oui-icons"));

var _mock_api = require("./mock_api");

var _Row = _interopRequireDefault(require("../Layout/Row"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var searchFunction = (0, _mock_api.getSearchFunction)();
var stories = (0, _react2.storiesOf)("Experimental|SearchPicker", module);
stories.addDecorator(_addonKnobs.withKnobs).addDecorator(function (story) {
  return _react["default"].createElement("div", {
    id: "root-preview",
    style: {
      display: "flex",
      flex: 1,
      height: "100vh"
    }
  }, story());
});
stories.add("Default", function () {
  return _react["default"].createElement(_index["default"], {
    onItemSelected: (0, _addonActions.action)("keyboard selection item"),
    searchFunction: searchFunction,
    supportedTypes: ["feature"]
  }, function (_ref) {
    var availableEntities = _ref.availableEntities,
        renderInput = _ref.renderInput,
        isLoading = _ref.isLoading,
        searchQuery = _ref.searchQuery,
        currentFauxFocusIndex = _ref.currentFauxFocusIndex,
        resultsText = _ref.resultsText;
    return _react["default"].createElement(_Dropdown["default"], {
      width: 600,
      fullWidth: true,
      renderActivator: renderInput
    }, _react["default"].createElement(_Dropdown["default"].Contents, {
      minWidth: 600,
      isLoading: isLoading
    }, _react["default"].createElement(_Dropdown["default"].ListItem, {
      ignoreToggle: true
    }, _react["default"].createElement("span", {
      className: "micro muted soft--sides"
    }, resultsText.summary)), availableEntities.map(function (item, index) {
      return _react["default"].createElement(_Dropdown["default"].ListItem, {
        key: index
      }, _react["default"].createElement(_Dropdown["default"].BlockLink, {
        hasFauxFocus: currentFauxFocusIndex === index,
        onClick: (0, _addonActions.action)("click dropdown block link ".concat(item.name))
      }, _react["default"].createElement(_Dropdown["default"].BlockLinkText, {
        text: item.name
      }), _react["default"].createElement(_Dropdown["default"].BlockLinkSecondaryText, {
        secondaryText: item.description
      })));
    }), isLoading && _react["default"].createElement(_Spinner["default"], {
      hasOverlay: true
    })));
  });
}).add("With Create Button", function () {
  return _react["default"].createElement(_index["default"], {
    onItemSelected: (0, _addonActions.action)("keyboard selection item"),
    additionalItems: 1,
    searchFunction: searchFunction,
    supportedTypes: ["feature"]
  }, function (_ref2) {
    var availableEntities = _ref2.availableEntities,
        renderInput = _ref2.renderInput,
        isLoading = _ref2.isLoading,
        searchQuery = _ref2.searchQuery,
        currentFauxFocusIndex = _ref2.currentFauxFocusIndex,
        resultsText = _ref2.resultsText;
    return _react["default"].createElement(_Dropdown["default"], {
      width: 600,
      fullWidth: true,
      renderActivator: renderInput
    }, _react["default"].createElement(_Dropdown["default"].Contents, {
      minWidth: 600,
      isLoading: isLoading
    }, _react["default"].createElement(_Dropdown["default"].ListItem, null, _react["default"].createElement(_Dropdown["default"].BlockLink, {
      hasFauxFocus: currentFauxFocusIndex === 0,
      onClick: (0, _addonActions.action)("click create dropdown block link")
    }, _react["default"].createElement("div", {
      className: "flex flex-align--center"
    }, "Create new audience"))), _react["default"].createElement(_Dropdown["default"].ListItem, {
      ignoreToggle: true
    }, _react["default"].createElement("span", {
      className: "micro muted soft--sides"
    }, resultsText.summary)), availableEntities.map(function (item, index) {
      return _react["default"].createElement(_Dropdown["default"].ListItem, {
        key: index
      }, _react["default"].createElement(_Dropdown["default"].BlockLink, {
        hasFauxFocus: currentFauxFocusIndex === index + 1,
        onClick: (0, _addonActions.action)("click dropdown block link ".concat(item.name))
      }, _react["default"].createElement(_Dropdown["default"].BlockLinkText, {
        text: item.name
      }), _react["default"].createElement(_Dropdown["default"].BlockLinkSecondaryText, {
        secondaryText: item.description
      })));
    }), isLoading && _react["default"].createElement(_Spinner["default"], {
      hasOverlay: true
    })));
  });
}).add("In a Dropdown", function () {
  return _react["default"].createElement(_Dropdown["default"], {
    buttonContent: "Selected Variation Name",
    arrowIcon: "down",
    shouldHideChildrenOnClick: false,
    style: "outline"
  }, function (_ref3) {
    var handleHideChildren = _ref3.handleHideChildren;
    return _react["default"].createElement(_Dropdown["default"].Contents, {
      minWidth: 600,
      direction: "right"
    }, _react["default"].createElement(_Dropdown["default"].ListItem, null, _react["default"].createElement(_Dropdown["default"].BlockLink, {
      hasFauxFocus: false,
      onClick: (0, _addonActions.action)("click create dropdown block link")
    }, _react["default"].createElement(_Row["default"], {
      verticalAlignment: "center",
      paddedContent: "sides"
    }, _react["default"].createElement(_reactOuiIcons["default"], {
      name: "add"
    }), _react["default"].createElement("p", {
      className: "soft--left flush"
    }, "Create new variation")))), _react["default"].createElement(_index["default"], {
      onItemSelected: (0, _addonActions.action)("keyboard selection item"),
      additionalItems: 1,
      searchFunction: searchFunction,
      supportedTypes: ["variation"]
    }, function (_ref4) {
      var availableEntities = _ref4.availableEntities,
          renderInput = _ref4.renderInput,
          isLoading = _ref4.isLoading,
          searchQuery = _ref4.searchQuery,
          currentFauxFocusIndex = _ref4.currentFauxFocusIndex,
          resultsText = _ref4.resultsText;
      return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_Dropdown["default"].ListItem, null, renderInput()), _react["default"].createElement(_Dropdown["default"].ListItem, {
        ignoreToggle: true
      }, _react["default"].createElement("span", {
        className: "micro muted soft--sides"
      }, resultsText.summary)), availableEntities.map(function (item, index) {
        return _react["default"].createElement(_Dropdown["default"].ListItem, {
          key: index
        }, _react["default"].createElement(_Dropdown["default"].BlockLink, {
          hasFauxFocus: currentFauxFocusIndex === index + 1,
          onClick: (0, _addonActions.action)("click dropdown block link ".concat(item.name))
        }, _react["default"].createElement(_Dropdown["default"].BlockLinkText, {
          text: item.name
        }), _react["default"].createElement(_Dropdown["default"].BlockLinkSecondaryText, {
          secondaryText: item.description
        })));
      }), isLoading && _react["default"].createElement(_Spinner["default"], {
        hasOverlay: true
      }));
    }));
  });
});