gather-content-ui
Version:
GatherContent UI Library
157 lines (156 loc) • 10.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ComponentWrapper = ComponentWrapper;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _ = require("../../..");
var _StoryItem = _interopRequireDefault(require("../../../../stories/styleguide/StoryItem"));
var _ComponentWrapper = require("./ComponentWrapper");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // @ts-expect-error TS(2307): Cannot find module 'stories/styleguide/StoryItem' ... Remove this comment to see the full error message
var TextPreviewSVG = function TextPreviewSVG(props) {
return /*#__PURE__*/_react["default"].createElement("svg", _extends({
width: "680",
height: "40",
viewBox: "0 0 680 40",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, props), /*#__PURE__*/_react["default"].createElement("path", {
d: "M0 0v8.876h61.015V0H0zM84.946 0v8.876h61.015V0H84.946zM230.907 8.876V0h-61.015v8.876h61.015zM291.706 8.876V0h-36.76v8.876h36.76zM376.652 8.876V0h-61.015v8.876h61.015zM534.363 8.876V0h-133.78v8.876h133.78zM558.294 0v8.876H680V0H558.294zM0 31.124V40h61.015v-8.876H0zM84.946 31.124V40h61.015v-8.876H84.946zM206.652 40v-8.876h-36.76V40h36.76zM303.779 40v-8.876h-73.088V40h73.088zM388.725 40v-8.876h-61.014V40h61.014zM449.524 31.124h-36.759V40h36.759v-8.876zM570.799 40v-8.876h-97.343V40h97.343zM594.731 31.124V40h73.195v-8.876h-73.195z",
fill: "#E1E6EB"
}));
};
var _default = exports["default"] = {
title: "GUI/Component Wrapper",
component: _.ComponentWrapper,
args: {
draggedOver: false,
editable: true,
isSelected: false,
isHovered: false,
counter: 1
},
argTypes: {
counter: {
name: "counter",
control: {
type: "number"
}
},
status: {
name: "Status",
options: ["None"].concat(_toConsumableArray(Object.values(_ComponentWrapper.componentStatuses))),
control: {
type: "select"
}
}
}
};
var Aside = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ButtonIcon, {
name: "trash",
size: _.ButtonIcon.sizes.sm
}), /*#__PURE__*/_react["default"].createElement(_.ButtonIcon, {
name: "pencil",
size: _.ButtonIcon.sizes.sm,
className: "mx-1"
}), /*#__PURE__*/_react["default"].createElement(_.ButtonIcon, {
name: "repeatable",
size: _.ButtonIcon.sizes.sm
}));
function ComponentWrapper(args) {
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_StoryItem["default"], {
title: "ComponentWrapperComponent",
description: " A component component"
}, /*#__PURE__*/_react["default"].createElement(_.Row, null, /*#__PURE__*/_react["default"].createElement(_.Col, {
xs: 12,
sm: 8,
smOffset: 2
}, /*#__PURE__*/_react["default"].createElement(_.ComponentWrapper, _extends({
label: "Hello!"
// eslint-disable-next-line no-console
,
onLabelChange: function onLabelChange() {
return console.log("label change handler");
}
// eslint-disable-next-line no-console
,
onLabelEmpty: function onLabelEmpty() {
return console.log("label empty handler");
},
instructions: "hello do a thing",
onInstructionChange: function onInstructionChange() {},
headerAside: Aside,
subLabel: "(Goodbye!)"
}, args), /*#__PURE__*/_react["default"].createElement(_.ColField, {
className: "mb-10"
}, /*#__PURE__*/_react["default"].createElement(_.ColField.Header, null, /*#__PURE__*/_react["default"].createElement(_.ColField.Label, {
label: "Howdy"
})), /*#__PURE__*/_react["default"].createElement(_.ColField.Body, null, /*#__PURE__*/_react["default"].createElement("div", {
className: "py-5 px-6 text-center"
}, /*#__PURE__*/_react["default"].createElement(TextPreviewSVG, null))), /*#__PURE__*/_react["default"].createElement(_.ColField.Footer, null, /*#__PURE__*/_react["default"].createElement(_.ColField.Instructions, {
instructions: "Lots of instructions here how fun blabla."
}))), /*#__PURE__*/_react["default"].createElement(_.ColField, null, /*#__PURE__*/_react["default"].createElement(_.ColField.Header, null, /*#__PURE__*/_react["default"].createElement(_.ColField.Label, {
label: "Howdy"
})), /*#__PURE__*/_react["default"].createElement(_.ColField.Body, null, /*#__PURE__*/_react["default"].createElement("div", {
className: "py-5 px-6 text-center"
}, /*#__PURE__*/_react["default"].createElement(TextPreviewSVG, null))), /*#__PURE__*/_react["default"].createElement(_.ColField.Footer, null, /*#__PURE__*/_react["default"].createElement(_.ColField.Instructions, {
instructions: "Lots of instructions here how fun blabla."
}))))))), /*#__PURE__*/_react["default"].createElement(_StoryItem["default"], {
title: "ComponentWrapperComponent",
description: " A sectioned component"
}, /*#__PURE__*/_react["default"].createElement(_.Row, null, /*#__PURE__*/_react["default"].createElement(_.Col, {
xs: 12,
sm: 8,
smOffset: 2
}, /*#__PURE__*/_react["default"].createElement(_.ComponentWrapper.Header, _extends({
label: "I'm split up!",
onLabelChange: function onLabelChange() {}
}, args)), /*#__PURE__*/_react["default"].createElement(_.ComponentWrapper.Body, args, /*#__PURE__*/_react["default"].createElement(_.ColField, null, /*#__PURE__*/_react["default"].createElement(_.ColField.Header, null, /*#__PURE__*/_react["default"].createElement(_.ColField.Label, {
label: "Howdy"
})), /*#__PURE__*/_react["default"].createElement(_.ColField.Body, null, /*#__PURE__*/_react["default"].createElement("div", {
className: "py-5 px-6 text-center"
}, /*#__PURE__*/_react["default"].createElement(TextPreviewSVG, null))), /*#__PURE__*/_react["default"].createElement(_.ColField.Footer, null, /*#__PURE__*/_react["default"].createElement(_.ColField.Instructions, {
instructions: "Lots of instructions here how fun blabla."
})))), /*#__PURE__*/_react["default"].createElement(_.ComponentWrapper.Footer, args, /*#__PURE__*/_react["default"].createElement(_.ColField, {
className: "mt-6"
}, /*#__PURE__*/_react["default"].createElement(_.ColField.Header, null, /*#__PURE__*/_react["default"].createElement(_.ColField.Label, {
label: "Howdy"
})), /*#__PURE__*/_react["default"].createElement(_.ColField.Body, null, /*#__PURE__*/_react["default"].createElement("div", {
className: "py-5 px-6 text-center"
}, /*#__PURE__*/_react["default"].createElement(TextPreviewSVG, null))), /*#__PURE__*/_react["default"].createElement(_.ColField.Footer, null, /*#__PURE__*/_react["default"].createElement(_.ColField.Instructions, {
instructions: "Lots of instructions here how fun blabla."
}))))))), /*#__PURE__*/_react["default"].createElement(_StoryItem["default"], {
title: "ComponentWrapperComponent",
description: "Statuses"
}, /*#__PURE__*/_react["default"].createElement(_.Row, null, /*#__PURE__*/_react["default"].createElement(_.Col, {
xs: 12,
sm: 8,
smOffset: 2
}, /*#__PURE__*/_react["default"].createElement(_.ComponentWrapper.Header, _extends({
label: "I'm split up!",
onLabelChange: function onLabelChange() {}
}, args)), /*#__PURE__*/_react["default"].createElement(_.ComponentWrapper.Body, args, /*#__PURE__*/_react["default"].createElement(_.ColField, null, /*#__PURE__*/_react["default"].createElement(_.ColField.Header, null, /*#__PURE__*/_react["default"].createElement(_.ColField.Label, {
label: "Howdy"
})), /*#__PURE__*/_react["default"].createElement(_.ColField.Body, null, /*#__PURE__*/_react["default"].createElement("div", {
className: "py-5 px-6 text-center"
}, /*#__PURE__*/_react["default"].createElement(TextPreviewSVG, null))), /*#__PURE__*/_react["default"].createElement(_.ColField.Footer, null, /*#__PURE__*/_react["default"].createElement(_.ColField.Instructions, {
instructions: "Lots of instructions here how fun blabla."
})))), /*#__PURE__*/_react["default"].createElement(_.ComponentWrapper.Footer, args, /*#__PURE__*/_react["default"].createElement(_.ColField, {
className: "mt-6"
}, /*#__PURE__*/_react["default"].createElement(_.ColField.Header, null, /*#__PURE__*/_react["default"].createElement(_.ColField.Label, {
label: "Howdy"
})), /*#__PURE__*/_react["default"].createElement(_.ColField.Body, null, /*#__PURE__*/_react["default"].createElement("div", {
className: "py-5 px-6 text-center"
}, /*#__PURE__*/_react["default"].createElement(TextPreviewSVG, null))), /*#__PURE__*/_react["default"].createElement(_.ColField.Footer, null, /*#__PURE__*/_react["default"].createElement(_.ColField.Instructions, {
instructions: "Lots of instructions here how fun blabla."
}))))))));
}
//# sourceMappingURL=ComponentWrapper.stories.js.map