gather-content-ui/dist/lib/ItemRow/stories/ItemRow.stories.js

GatherContent UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ItemRow = ItemRow;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _ = require("../..");
var _index = require("../../index");
var _Icon = _interopRequireDefault(require("../../Icon"));
var _AvatarGroupMock = require("../../Avatar/stories/AvatarGroupMock");
var _DragLine = require("../../DnD/DragLine");
var _StoryItem = _interopRequireDefault(require("../../../stories/styleguide/StoryItem"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var createStatusIndicator = function createStatusIndicator(props) {
  return /*#__PURE__*/_react["default"].createElement(_index.TooltipWrapper, {
    id: "status-tooltip",
    tooltipText: "tooltip text",
    wrapperClassName: "gui-h-margin-right-half"
  }, /*#__PURE__*/_react["default"].createElement(_index.StatusIndicator, props));
};
var _default = exports["default"] = {
  title: "Legacy/Item Row",
  component: _index.ItemRow,
  args: {
    stacked: false,
    bordered: true,
    draggedAbove: false,
    draggedBelow: false,
    showParticipants: false,
    commentCount: 0,
    templateName: "",
    itemName: "Item name"
  }
};
function ItemRow(_ref) {
  var stacked = _ref.stacked,
    bordered = _ref.bordered,
    draggedAbove = _ref.draggedAbove,
    draggedBelow = _ref.draggedBelow,
    commentCount = _ref.commentCount,
    templateName = _ref.templateName,
    showParticipants = _ref.showParticipants,
    itemName = _ref.itemName;
  var alignment = "";
  if (draggedAbove) {
    alignment = "top";
  } else if (draggedBelow) {
    alignment = "bottom";
  }
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_StoryItem["default"], {
    title: "ItemRowComponent",
    description: "The basic item row"
  }, /*#__PURE__*/_react["default"].createElement(_index.ItemRow, {
    bordered: bordered,
    stacked: stacked,
    style: {
      position: "relative"
    }
  }, (draggedAbove || draggedBelow) && /*#__PURE__*/_react["default"].createElement(_DragLine.DragLine, {
    alignment: alignment,
    offsetPx: 2
  }), /*#__PURE__*/_react["default"].createElement(_index.ItemRow.Name, null, !stacked && createStatusIndicator({
    label: "",
    color: "green",
    preText: "",
    small: false,
    softLabel: false
  }), itemName), /*#__PURE__*/_react["default"].createElement(_index.ItemRow.Aside, null, stacked && /*#__PURE__*/_react["default"].createElement(_index.ItemRow.Data, null, createStatusIndicator({
    label: "live",
    color: "green",
    preText: "Status",
    small: true,
    softLabel: false,
    className: ""
  })), templateName && /*#__PURE__*/_react["default"].createElement(_index.ItemRow.Data, null, templateName), showParticipants && /*#__PURE__*/_react["default"].createElement(_AvatarGroupMock.AvatarGroupMock, {
    avatarProps: {
      smallSize: true
    },
    minCount: 3
  }, function (_ref2) {
    var ui = _ref2.ui,
      count = _ref2.count;
    return count ? /*#__PURE__*/_react["default"].createElement(_index.ItemRow.Data, null, ui) : null;
  }), !!commentCount && /*#__PURE__*/_react["default"].createElement(_index.ItemRow.Data, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
    name: "commentFill",
    className: "gui-h-margin-right-quarter"
  }), commentCount)))), /*#__PURE__*/_react["default"].createElement(_StoryItem["default"], {
    title: "ItemRowComponent list",
    description: "ItemRowComponent with list styling"
  }, /*#__PURE__*/_react["default"].createElement(_index.ItemRow, {
    list: true
  }, /*#__PURE__*/_react["default"].createElement(_index.ItemRow.Name, null, createStatusIndicator({
    color: "green"
  }), "Item name 1")), /*#__PURE__*/_react["default"].createElement(_index.ItemRow, {
    list: true
  }, /*#__PURE__*/_react["default"].createElement(_index.ItemRow.Name, null, createStatusIndicator({
    color: "green"
  }), "Really really really really really really really really really really really really really really really really really really really really really really really really really really really really really long Item name")), /*#__PURE__*/_react["default"].createElement(_index.ItemRow, {
    list: true
  }, /*#__PURE__*/_react["default"].createElement(_index.ItemRow.Name, null, createStatusIndicator({
    color: "blue"
  }), "Item name 3")), /*#__PURE__*/_react["default"].createElement(_index.ItemRow, {
    list: true
  }, /*#__PURE__*/_react["default"].createElement(_index.ItemRow.Name, null, createStatusIndicator({
    color: "green"
  }), "Item name 4"), /*#__PURE__*/_react["default"].createElement(_index.ItemRow.Aside, null, /*#__PURE__*/_react["default"].createElement(_.Pill, {
    size: _.Pill.sizes.xs
  }, "TRASHED"))), /*#__PURE__*/_react["default"].createElement(_index.ItemRow, {
    list: true
  }, /*#__PURE__*/_react["default"].createElement(_index.ItemRow.Name, null, createStatusIndicator({
    color: "red"
  }), "Another really really really really really really really really really really really really really really really really really really really really really really really really really really really really really long Item name"), /*#__PURE__*/_react["default"].createElement(_index.ItemRow.Aside, null, /*#__PURE__*/_react["default"].createElement(_.Pill, {
    size: _.Pill.sizes.xs
  }, "TRASHED")))));
}
//# sourceMappingURL=ItemRow.stories.js.map