@bigbinary/neeto-molecules 1.0.0

package/dist/PublishBlock.cjs.js

@@ -0,0 +1,188 @@
+'use strict';
+
+var React = require('react');
+var neetoIcons = require('@bigbinary/neeto-icons');
+var neetoui = require('@bigbinary/neetoui');
+var reactI18next = require('react-i18next');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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);
+}
+
+var classnames$1 = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+	/* global define */
+
+	(function () {
+
+		var hasOwn = {}.hasOwnProperty;
+
+		function classNames() {
+			var classes = [];
+
+			for (var i = 0; i < arguments.length; i++) {
+				var arg = arguments[i];
+				if (!arg) continue;
+
+				var argType = typeof arg;
+
+				if (argType === 'string' || argType === 'number') {
+					classes.push(arg);
+				} else if (Array.isArray(arg)) {
+					if (arg.length) {
+						var inner = classNames.apply(null, arg);
+						if (inner) {
+							classes.push(inner);
+						}
+					}
+				} else if (argType === 'object') {
+					if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+						classes.push(arg.toString());
+						continue;
+					}
+
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				}
+			}
+
+			return classes.join(' ');
+		}
+
+		if (module.exports) {
+			classNames.default = classNames;
+			module.exports = classNames;
+		} else {
+			window.classNames = classNames;
+		}
+	}());
+} (classnames$1));
+
+var classnames = classnames$1.exports;
+
+var AlertBlock = function AlertBlock(props) {
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, _extends({
+    "data-cy": "reset-alert",
+    "data-testid": "reset-alert",
+    submitButtonLabel: t("neetoMolecules.common.actions.reset")
+  }, props));
+};
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = ".neeto-commons-publish-block{align-items:center;display:flex;gap:12px;justify-content:flex-end}.neeto-commons-publish-block__action-btn{align-items:center;display:inline-flex;flex-direction:row;gap:1px;justify-content:center}.neeto-commons-publish-block__action-btn>.neeto-ui-btn:first-child{border-bottom-right-radius:0;border-top-right-radius:0}.neeto-commons-publish-block__action-btn>.neeto-ui-btn:last-child{border-bottom-left-radius:0;border-top-left-radius:0}";
+n(css,{});
+
+var ViewDraftButton = function ViewDraftButton(props) {
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+    "data-cy": "view-draft-button",
+    "data-testid": "view-draft-button",
+    icon: neetoIcons.ExternalLink,
+    style: "secondary",
+    target: "_blank",
+    tooltipProps: {
+      content: t("neetoMolecules.publishBlock.viewDraftVersion"),
+      position: "top"
+    }
+  }, props));
+};
+var ResetDraftButton = function ResetDraftButton(props) {
+  var _useTranslation2 = reactI18next.useTranslation(),
+    t = _useTranslation2.t;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+    "data-cy": "draft-button",
+    "data-testid": "draft-button",
+    icon: neetoIcons.Undo,
+    style: "secondary",
+    tooltipProps: {
+      content: t("neetoMolecules.publishBlock.deleteDraftVersion"),
+      position: "top"
+    }
+  }, props));
+};
+var PublishButton = function PublishButton(props) {
+  var _useTranslation3 = reactI18next.useTranslation(),
+    t = _useTranslation3.t;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+    "data-cy": "publish-button",
+    "data-testid": "publish-button",
+    label: t("neetoMolecules.common.actions.publish")
+  }, props));
+};
+var PublishPreviewButton = function PublishPreviewButton(props) {
+  var _useTranslation4 = reactI18next.useTranslation(),
+    t = _useTranslation4.t;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
+    className: classnames({
+      "pointer-events-none": props.disabled
+    }),
+    "data-cy": "publish-preview-button",
+    "data-testid": "publish-preview-button",
+    icon: neetoIcons.ExternalLink,
+    target: "_blank",
+    tooltipProps: {
+      content: t("neetoMolecules.publishBlock.viewPublishedVersion"),
+      position: "top"
+    }
+  }, props));
+};
+var PublishBlock = function PublishBlock(_ref) {
+  var renderDraftButtons = _ref.renderDraftButtons,
+    renderPublishButtons = _ref.renderPublishButtons;
+  var _useTranslation5 = reactI18next.useTranslation(),
+    t = _useTranslation5.t;
+  var draftBlockButtons = renderDraftButtons({
+    ViewDraftButton: ViewDraftButton,
+    ResetDraftButton: ResetDraftButton
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-commons-publish-block"
+  }, draftBlockButtons && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-700",
+    lineHeight: "normal",
+    style: "body2"
+  }, t("neetoMolecules.common.actions.draft")), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "space-x-1"
+  }, draftBlockButtons)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-bg-gray-300 h-full w-px"
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-commons-publish-block__action-btn"
+  }, renderPublishButtons({
+    PublishButton: PublishButton,
+    PublishPreviewButton: PublishPreviewButton
+  })));
+};
+PublishBlock.Alert = AlertBlock;
+
+module.exports = PublishBlock;

package/dist/PublishBlock.js

@@ -0,0 +1,182 @@
+import React from 'react';
+import { ExternalLink, Undo } from '@bigbinary/neeto-icons';
+import { Alert, Typography, Button } from '@bigbinary/neetoui';
+import { useTranslation } from 'react-i18next';
+
+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);
+}
+
+var classnames$1 = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+	/* global define */
+
+	(function () {
+
+		var hasOwn = {}.hasOwnProperty;
+
+		function classNames() {
+			var classes = [];
+
+			for (var i = 0; i < arguments.length; i++) {
+				var arg = arguments[i];
+				if (!arg) continue;
+
+				var argType = typeof arg;
+
+				if (argType === 'string' || argType === 'number') {
+					classes.push(arg);
+				} else if (Array.isArray(arg)) {
+					if (arg.length) {
+						var inner = classNames.apply(null, arg);
+						if (inner) {
+							classes.push(inner);
+						}
+					}
+				} else if (argType === 'object') {
+					if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+						classes.push(arg.toString());
+						continue;
+					}
+
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				}
+			}
+
+			return classes.join(' ');
+		}
+
+		if (module.exports) {
+			classNames.default = classNames;
+			module.exports = classNames;
+		} else {
+			window.classNames = classNames;
+		}
+	}());
+} (classnames$1));
+
+var classnames = classnames$1.exports;
+
+var AlertBlock = function AlertBlock(props) {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement(Alert, _extends({
+    "data-cy": "reset-alert",
+    "data-testid": "reset-alert",
+    submitButtonLabel: t("neetoMolecules.common.actions.reset")
+  }, props));
+};
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = ".neeto-commons-publish-block{align-items:center;display:flex;gap:12px;justify-content:flex-end}.neeto-commons-publish-block__action-btn{align-items:center;display:inline-flex;flex-direction:row;gap:1px;justify-content:center}.neeto-commons-publish-block__action-btn>.neeto-ui-btn:first-child{border-bottom-right-radius:0;border-top-right-radius:0}.neeto-commons-publish-block__action-btn>.neeto-ui-btn:last-child{border-bottom-left-radius:0;border-top-left-radius:0}";
+n(css,{});
+
+var ViewDraftButton = function ViewDraftButton(props) {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    "data-cy": "view-draft-button",
+    "data-testid": "view-draft-button",
+    icon: ExternalLink,
+    style: "secondary",
+    target: "_blank",
+    tooltipProps: {
+      content: t("neetoMolecules.publishBlock.viewDraftVersion"),
+      position: "top"
+    }
+  }, props));
+};
+var ResetDraftButton = function ResetDraftButton(props) {
+  var _useTranslation2 = useTranslation(),
+    t = _useTranslation2.t;
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    "data-cy": "draft-button",
+    "data-testid": "draft-button",
+    icon: Undo,
+    style: "secondary",
+    tooltipProps: {
+      content: t("neetoMolecules.publishBlock.deleteDraftVersion"),
+      position: "top"
+    }
+  }, props));
+};
+var PublishButton = function PublishButton(props) {
+  var _useTranslation3 = useTranslation(),
+    t = _useTranslation3.t;
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    "data-cy": "publish-button",
+    "data-testid": "publish-button",
+    label: t("neetoMolecules.common.actions.publish")
+  }, props));
+};
+var PublishPreviewButton = function PublishPreviewButton(props) {
+  var _useTranslation4 = useTranslation(),
+    t = _useTranslation4.t;
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    className: classnames({
+      "pointer-events-none": props.disabled
+    }),
+    "data-cy": "publish-preview-button",
+    "data-testid": "publish-preview-button",
+    icon: ExternalLink,
+    target: "_blank",
+    tooltipProps: {
+      content: t("neetoMolecules.publishBlock.viewPublishedVersion"),
+      position: "top"
+    }
+  }, props));
+};
+var PublishBlock = function PublishBlock(_ref) {
+  var renderDraftButtons = _ref.renderDraftButtons,
+    renderPublishButtons = _ref.renderPublishButtons;
+  var _useTranslation5 = useTranslation(),
+    t = _useTranslation5.t;
+  var draftBlockButtons = renderDraftButtons({
+    ViewDraftButton: ViewDraftButton,
+    ResetDraftButton: ResetDraftButton
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-commons-publish-block"
+  }, draftBlockButtons && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-700",
+    lineHeight: "normal",
+    style: "body2"
+  }, t("neetoMolecules.common.actions.draft")), /*#__PURE__*/React.createElement("div", {
+    className: "space-x-1"
+  }, draftBlockButtons)), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-gray-300 h-full w-px"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-commons-publish-block__action-btn"
+  }, renderPublishButtons({
+    PublishButton: PublishButton,
+    PublishPreviewButton: PublishPreviewButton
+  })));
+};
+PublishBlock.Alert = AlertBlock;
+
+export { PublishBlock as default };