contentoh-components-library 21.1.62 → 21.1.65

package/.env.development

@@ -15,6 +15,7 @@ REACT_APP_TASKS_ENDPOINT = https://lqrc8jfjqi.execute-api.us-east-1.amazonaws.co
 REACT_APP_USER_TASKS_ENDPOINT = https://lqrc8jfjqi.execute-api.us-east-1.amazonaws.com/dev/user-tasks
 REACT_APP_CART = https://lqrc8jfjqi.execute-api.us-east-1.amazonaws.com/dev/cart
 REACT_APP_RETAILER_REQUEST = https://lqrc8jfjqi.execute-api.us-east-1.amazonaws.com/dev/retailers-request
+REACT_APP_VERSIONS_ENDPOINT = https://lqrc8jfjqi.execute-api.us-east-1.amazonaws.com/dev/versions
 
 REACT_APP_IMAGES_BUCKET=content-management-images
 REACT_APP_KEY_UPLOAD_TO_S3=AKIA5CPHLQTT46EQ5TIK

package/.env.production

@@ -15,6 +15,7 @@ REACT_APP_TASKS_ENDPOINT = https://6jqnpjf841.execute-api.us-east-1.amazonaws.co
 REACT_APP_USER_TASKS_ENDPOINT = https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/user-tasks
 REACT_APP_CART = https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/cart
 REACT_APP_RETAILER_REQUEST = https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/retailers-request
+REACT_APP_VERSIONS_ENDPOINT = https://6jqnpjf841.execute-api.us-east-1.amazonaws.com/prod/versions
 
 REACT_APP_IMAGES_BUCKET=content-management-images-prod
 REACT_APP_KEY_UPLOAD_TO_S3=AKIA5CPHLQTT46EQ5TIK

package/dist/assets/images/versionSelector/acceptIcon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 4.48578 4.48578 0 10 0C15.5142 0 20 4.48578 20 10C20 15.5142 15.5142 20 10 20C4.48578 20 0 15.5142 0 10ZM9.65054 13.2973L15.0673 7.88074C15.393 7.55481 15.393 7.02823 15.0673 6.70245C14.7413 6.37653 14.2148 6.37653 13.889 6.70245L9.0614 11.5299L6.94226 9.41074C6.61633 9.08481 6.08975 9.08481 5.76398 9.41074C5.43805 9.73651 5.43805 10.2632 5.76398 10.589L8.47226 13.2973C8.63477 13.4598 8.84808 13.5416 9.0614 13.5416C9.27472 13.5416 9.48804 13.4598 9.65054 13.2973Z" fill="#71DE56"/>
+</svg>

package/dist/assets/images/versionSelector/addVersion.svg

@@ -0,0 +1,5 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="6.72461" y1="10" x2="14.7246" y2="10" stroke="#E33AA9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="10.7246" y1="6" x2="10.7246" y2="14" stroke="#E33AA9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="1.22461" y="0.5" width="19.2749" height="19" rx="9.5" stroke="#D4D1D7"/>
+</svg>

package/dist/assets/images/versionSelector/closeVersionSelector.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="0.707107" y1="1" x2="16" y2="16.2929" stroke="#E33AA9" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="16" y1="1.70711" x2="1.70711" y2="16" stroke="#E33AA9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/images/versionSelector/createVersion.svg

@@ -0,0 +1,3 @@
+<svg width="73" height="73" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1666 18.2497H6.08325V60.833C6.08325 64.1788 8.82075 66.9163 12.1666 66.9163H54.7499V60.833H12.1666V18.2497ZM60.8332 6.08301H24.3333C20.9874 6.08301 18.2499 8.82051 18.2499 12.1663V48.6663C18.2499 52.0122 20.9874 54.7497 24.3333 54.7497H60.8332C64.1791 54.7497 66.9166 52.0122 66.9166 48.6663V12.1663C66.9166 8.82051 64.1791 6.08301 60.8332 6.08301ZM57.7916 33.458H45.6249V45.6247H39.5416V33.458H27.3749V27.3747H39.5416V15.208H45.6249V27.3747H57.7916V33.458Z" fill="#817393"/>
+</svg>

package/dist/assets/images/versionSelector/nullIcon.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM15 11H5V9H15V11Z" fill="#817393"/>
+</svg>

package/dist/assets/images/versionSelector/versionSelected.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 0C6 0 1.73 3.11 0 7.5C1.73 11.89 6 15 11 15C16 15 20.27 11.89 22 7.5C20.27 3.11 16 0 11 0ZM11 12.5C8.24 12.5 6 10.26 6 7.5C6 4.74 8.24 2.5 11 2.5C13.76 2.5 16 4.74 16 7.5C16 10.26 13.76 12.5 11 12.5ZM11 4.5C9.34 4.5 8 5.84 8 7.5C8 9.16 9.34 10.5 11 10.5C12.66 10.5 14 9.16 14 7.5C14 5.84 12.66 4.5 11 4.5Z" fill="#D4D1D7"/>
+</svg>

package/dist/components/atoms/GeneralButton/index.js

@@ -14,13 +14,15 @@ var _react = _interopRequireDefault(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 
 var Button = function Button(_ref) {
-  var buttonType = _ref.buttonType,
+  var id = _ref.id,
+      buttonType = _ref.buttonType,
       label = _ref.label,
       image = _ref.image,
       altText = _ref.altText,
       buttonFont = _ref.buttonFont,
       onClick = _ref.onClick;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    id: id,
     className: buttonType,
     buttonFont: buttonFont,
     onClick: onClick,

package/dist/components/atoms/GeneralButton/styles.js

@@ -43,8 +43,8 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.download-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        color: white;\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.download-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        color: white;\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      opacity: 0.5;\n    }\n\n    img {\n      width: 100%;\n    }\n\n    &.version-button {\n      color: ", ";\n      border: 1px solid ", ";\n      border-radius: 15px;\n      font-size: 12px;\n      line-height: 25px;\n      text-align: center;\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
   return props.buttonFont;
-}, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _saveIcon.default, _variables.GlobalColors.s3, _saveIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _deleteIcon.default, _variables.GlobalColors.s3, _deleteIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _downloadIcon.default, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _arrowIcon.default, _closeIcon.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white);
+}, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _saveIcon.default, _variables.GlobalColors.s3, _saveIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _deleteIcon.default, _variables.GlobalColors.s3, _deleteIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _downloadIcon.default, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.s3, _variables.GlobalColors.s3, _arrowIcon.default, _closeIcon.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white);
 
 exports.Container = Container;

package/dist/components/atoms/Select/VersionSelect.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VersionSelect = void 0;
+
+var _style = require("./style");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var VersionSelect = function VersionSelect(_ref) {
+  var id = _ref.id,
+      selectedVersions = _ref.selectedVersions,
+      onChange = _ref.onChange,
+      label = _ref.label,
+      _ref$versions = _ref.versions,
+      versions = _ref$versions === void 0 ? [] : _ref$versions;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.VrsnSelect, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      htmlFor: id,
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
+      id: id,
+      name: id,
+      value: "Version ".concat(selectedVersions[id]),
+      onChange: onChange,
+      children: versions.map(function (item, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("option", {
+          children: ["Version ", item.version]
+        }, "".concat(id, "-").concat(index));
+      })
+    })]
+  });
+};
+
+exports.VersionSelect = VersionSelect;

package/dist/components/atoms/Select/index.js

@@ -10,13 +10,14 @@ var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
 
 function Select(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.Container, {
     width: props.width,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.SelectCustom, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.SelectCustom, {
       id: props.id,
       width: props.width,
       onChange: props.onChange,
       defaultValue: props.valueSelected ? props.valueSelected : "",
+      className: props.className,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
         value: "",
         disabled: true,
@@ -34,6 +35,6 @@ function Select(props) {
           children: [item.name ? item.name : item, " ", item !== null && item !== void 0 && item.required ? "*" : ""]
         }, "select-" + item.value ? item.value : item + "-" + i);
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.BackgroundEnd, {})]
+    })
   });
 }

package/dist/components/atoms/Select/style.js

@@ -5,13 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectCustom = exports.Container = exports.BackgroundEnd = void 0;
+exports.VrsnSelect = exports.SelectCustom = exports.Container = exports.BackgroundEnd = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _templateObject, _templateObject2, _templateObject3;
+var _variables = require("../../../global-files/variables");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  height: 21px;\n  line-height: 3;\n  width: ", ";\n  overflow: hidden;\n  border-radius: 0.25em;\n  &::after {\n    border-left: 1px solid #e33aa9;\n    border-top: 1px solid #e33aa9;\n    width: 4px;\n    content: \"\";\n    height: 4px;\n    position: absolute;\n    right: 7px;\n    -webkit-transform: rotate(-135deg);\n    -ms-transform: rotate(-135deg);\n    transform: rotate(-135deg);\n    top: 35%;\n  }\n  &::before {\n    border-left: 1px solid #e33aa9;\n    width: 1px;\n    content: \"\";\n    height: 15px;\n    right: 15px;\n    position: absolute;\n    z-index: 2;\n  }\n"])), function (_ref) {
   var width = _ref.width;
@@ -24,9 +26,13 @@ var BackgroundEnd = _styledComponents.default.div(_templateObject2 || (_template
 
 exports.BackgroundEnd = BackgroundEnd;
 
-var SelectCustom = _styledComponents.default.select(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: #fafafa;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  -ms-appearance: none;\n  appearance: none;\n  outline: 0;\n  box-shadow: none;\n  border: 0 !important;\n  background-image: none;\n  width: ", ";\n  cursor: pointer;\n  height: 21px;\n  font-family: Avenir Next;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 21px;\n  padding: 0 5px;\n  box-sizing: border-box;\n  &::-ms-expand {\n    display: none;\n  }\n  option {\n    &:disabled {\n      color: #d4d1d7;\n    }\n    &:invalid {\n      color: gray;\n    }\n  }\n"])), function (_ref2) {
+var SelectCustom = _styledComponents.default.select(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: #fafafa;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  -ms-appearance: none;\n  appearance: none;\n  outline: 0;\n  box-shadow: none;\n  border: 0 !important;\n  background-image: none;\n  width: ", ";\n  cursor: pointer;\n  height: 21px;\n  font-family: Avenir Next;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 21px;\n  padding: 0 5px;\n  box-sizing: border-box;\n  &::-ms-expand {\n    display: none;\n  }\n  option {\n    &:disabled {\n      color: #d4d1d7;\n    }\n    &:invalid {\n      color: gray;\n    }\n  }\n\n  &.version-selector {\n  }\n"])), function (_ref2) {
   var width = _ref2.width;
   return width || "100%";
 });
 
-exports.SelectCustom = SelectCustom;
+exports.SelectCustom = SelectCustom;
+
+var VrsnSelect = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n\n  select {\n    border: 1px solid ", " !important;\n    background-color: transparent;\n    color: ", ";\n    width: 100%;\n    text-align: center;\n    padding: 5px;\n    border-radius: 15px;\n    text-decoration: none;\n  }\n"])), _variables.GlobalColors.deep_gray, _variables.GlobalColors.s3, _variables.GlobalColors.white);
+
+exports.VrsnSelect = VrsnSelect;

package/dist/components/atoms/SliderToolTip/styles.js

@@ -15,10 +15,10 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject, _templateObject2;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n  & + * {\n    margin-left: 10px;\n  }\n  img {\n    &.small-image {\n      width: 20px;\n      height: 20px;\n    }\n    &.medium-image {\n      width: 30px;\n      height: 30px;\n    }\n    &.big-image {\n      width: 40px;\n      height: 40px;\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  & + * {\n    margin-left: 10px;\n  }\n  img {\n    margin: auto 0;\n    &.small-image {\n      width: 20px;\n      height: 20px;\n    }\n    &.medium-image {\n      width: 30px;\n      height: 30px;\n    }\n    &.big-image {\n      width: 40px;\n      height: 40px;\n    }\n  }\n"])));
 
 exports.Container = Container;
 
-var Slider = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: sans-serif;\n  margin: auto;\n  background: #281f33;\n  border-radius: 6px;\n  width: 310px;\n  padding: 16px;\n  padding-top: 20px;\n  box-sizing: border-box;\n  position: absolute;\n  cursor: default;\n  z-index: 2;\n  width: 310px;\n  &.top-slide {\n    top: calc(100% - 370px);\n    left: calc(100% - 175px);\n  }\n  &.bottom-slide {\n    top: 100%;\n    right: calc(100% + -70px);\n  }\n  ul,\n  li {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n  .slider {\n    position: relative;\n    max-width: 300px;\n    width: 100%;\n    height: 270px;\n    margin: 0;\n    li {\n      position: absolute;\n      left: 0px;\n      top: 0px;\n      opacity: 0;\n      width: inherit;\n      height: inherit;\n      transition: opacity 0.5s;\n      background: transparent;\n      img {\n        width: 100%;\n        height: 180px;\n        border-radius: 4px;\n        background-color: #fafafa;\n        & + * {\n          margin-top: 10px;\n        }\n      }\n      p {\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 10px;\n        line-height: 12px;\n        text-align: center;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        background-color: #281f33;\n      }\n      div {\n        background-color: #fafafa;\n        height: 180px;\n        border-radius: 4px;\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        align-items: center;\n        img {\n          width: 90%;\n        }\n        & + * {\n          margin-top: 13px;\n        }\n      }\n      span {\n      font-family: \"Avenir Next\";\n      font-style: normal;\n      font-weight: 500;\n      font-size: 15px;\n      line-height: 15px;\n      text-align: center;\n      letter-spacing: -0.015em;\n      color: #fafafa;\n      display: flex;\n      justify-content: center;\n      background-color: #281f33;\n      & + * {\n        margin-top: 10px;\n      }\n    }\n    }\n    .end-div {\n      div {\n        height: 130px;\n        width: 100%;\n        background-color: #fafafa;\n        display: flex;\n        align-items: center;\n        border-radius: 4px;\n        img {\n          width: 100%;\n          height: 115px;\n          object-fit: contain;\n        }\n      }\n      .lema-end {\n        justify-content: center;\n        justify-content: space-evenly;\n        height: 110px;\n        background-color: #281f33;\n        flex-direction: column;\n        justify-content: space-evenly;\n        border-radius: inherit;\n      }\n      button {\n        display: none;\n        justify-content: center;\n        align-items: center;\n        padding: 10px;\n        width: 160px;\n        height: 30px;\n        border: 1px solid #d4d1d7;\n        border-radius: 15px;\n        color: #fafafa;\n        background-color: #281f33;\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 18px;\n        line-height: 25px;\n        letter-spacing: -0.015em;\n        position: absolute;\n        left: 22%;\n        top: 90%;\n        cursor: pointer;\n      }\n    }\n  }\n  li:first-child {\n    opacity: 1;\n  }\n  .menu {\n    margin: 0;\n    text-align: center;\n    li {\n      display: inline-block;\n      text-align: center;\n      & + * {\n        margin-left: 15px;\n      }\n      a {\n        display: inline-block;\n        text-decoration: none;\n        background-color: #c4c4c4;\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n        cursor: pointer;\n      }\n      #slidea1 {\n        background-color: #e33aa9;\n      }\n    }\n  }\n"])));
+var Slider = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: sans-serif;\n  margin: auto;\n  background: #281f33;\n  border-radius: 6px;\n  width: 310px;\n  padding: 16px;\n  padding-top: 20px;\n  box-sizing: border-box;\n  position: absolute;\n  cursor: default;\n  z-index: 2;\n  width: 310px;\n  &.top-slide {\n    top: calc(100% - 370px);\n    left: calc(100% - 175px);\n  }\n  &.bottom-slide {\n    top: 100%;\n    right: calc(100% + -70px);\n  }\n  ul,\n  li {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n  .slider {\n    position: relative;\n    max-width: 300px;\n    width: 100%;\n    height: 270px;\n    margin: 0;\n    li {\n      position: absolute;\n      left: 0px;\n      top: 0px;\n      opacity: 0;\n      width: inherit;\n      height: inherit;\n      transition: opacity 0.5s;\n      background: transparent;\n      img {\n        width: 100%;\n        height: 180px;\n        border-radius: 4px;\n        background-color: #fafafa;\n        & + * {\n          margin-top: 10px;\n        }\n      }\n      p {\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 10px;\n        line-height: 12px;\n        text-align: center;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        background-color: #281f33;\n      }\n      div {\n        background-color: #fafafa;\n        height: 180px;\n        border-radius: 4px;\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        align-items: center;\n        img {\n          width: 90%;\n        }\n        & + * {\n          margin-top: 13px;\n        }\n      }\n      span {\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 500;\n        font-size: 15px;\n        line-height: 15px;\n        text-align: center;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        display: flex;\n        justify-content: center;\n        background-color: #281f33;\n        & + * {\n          margin-top: 10px;\n        }\n      }\n    }\n    .end-div {\n      div {\n        height: 130px;\n        width: 100%;\n        background-color: #fafafa;\n        display: flex;\n        align-items: center;\n        border-radius: 4px;\n        img {\n          width: 100%;\n          height: 115px;\n          object-fit: contain;\n        }\n      }\n      .lema-end {\n        justify-content: center;\n        justify-content: space-evenly;\n        height: 110px;\n        background-color: #281f33;\n        flex-direction: column;\n        justify-content: space-evenly;\n        border-radius: inherit;\n      }\n      button {\n        display: none;\n        justify-content: center;\n        align-items: center;\n        padding: 10px;\n        width: 160px;\n        height: 30px;\n        border: 1px solid #d4d1d7;\n        border-radius: 15px;\n        color: #fafafa;\n        background-color: #281f33;\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 18px;\n        line-height: 25px;\n        letter-spacing: -0.015em;\n        position: absolute;\n        left: 22%;\n        top: 90%;\n        cursor: pointer;\n      }\n    }\n  }\n  li:first-child {\n    opacity: 1;\n  }\n  .menu {\n    margin: 0;\n    text-align: center;\n    li {\n      display: inline-block;\n      text-align: center;\n      & + * {\n        margin-left: 15px;\n      }\n      a {\n        display: inline-block;\n        text-decoration: none;\n        background-color: #c4c4c4;\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n        cursor: pointer;\n      }\n      #slidea1 {\n        background-color: #e33aa9;\n      }\n    }\n  }\n"])));
 
 exports.Slider = Slider;

package/dist/components/molecules/StatusAsignationInfo/index.js

@@ -55,7 +55,9 @@ var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
       id = _ref$id === void 0 ? "default-id" : _ref$id,
       onClickSave = _ref.onClickSave,
       showSaveButton = _ref.showSaveButton,
-      canAssign = _ref.canAssign;
+      canAssign = _ref.canAssign,
+      version = _ref.version,
+      setShowVersionSelector = _ref.setShowVersionSelector;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -104,6 +106,12 @@ var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
       slidefront: slidefront,
       iconSize: "medium-image",
       slidePosition: "bottom-slide"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+      buttonType: "general circular-button version-button",
+      onClick: function onClick() {
+        setShowVersionSelector(true);
+      },
+      label: "V".concat(version)
     }), status !== "-" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.StatusTag, {
       statusType: status,
       ovalForm: true

package/dist/components/molecules/VersionItem/VersionItem.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VersionItemDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/VersionItem",
+  component: _index.VersionItem
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.VersionItem, (0, _objectSpread2.default)({}, args));
+};
+
+var VersionItemDefault = Template.bind({});
+exports.VersionItemDefault = VersionItemDefault;
+VersionItemDefault.args = {};

package/dist/components/molecules/VersionItem/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VersionItem = void 0;
+
+var _index = require("../../atoms/Avatar/index");
+
+var _styles = require("./styles");
+
+var _nullIcon = _interopRequireDefault(require("../../../assets/images/versionSelector/nullIcon.svg"));
+
+var _acceptIcon = _interopRequireDefault(require("../../../assets/images/versionSelector/acceptIcon.svg"));
+
+var _versionSelected = _interopRequireDefault(require("../../../assets/images/versionSelector/versionSelected.svg"));
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _variables = require("../../../global-files/variables");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var VersionItem = function VersionItem(_ref) {
+  var _ref$version = _ref.version,
+      version = _ref$version === void 0 ? "" : _ref$version,
+      articleStatus = _ref.articleStatus,
+      currentVersion = _ref.currentVersion,
+      _ref$productOwner = _ref.productOwner,
+      productOwner = _ref$productOwner === void 0 ? "owner test" : _ref$productOwner,
+      setVersion = _ref.setVersion;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "header",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+        buttonType: "circular-button" + (currentVersion ? " disabled" : ""),
+        image: _versionSelected.default,
+        onClick: function onClick() {
+          return setVersion && setVersion(version);
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: articleStatus ? _acceptIcon.default : _nullIcon.default,
+        alt: articleStatus ? "Validated version" : "Unvalidated version"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "version-info",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+        text: "Version " + version,
+        headerType: "input-name-header",
+        color: _variables.GlobalColors.magenta_s2
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: currentVersion ? "Version actual" : articleStatus ? "Edición Content-oh!" : "Version de " + productOwner
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: articleStatus ? "Content-oh! Digital" : productOwner
+      })]
+    })]
+  });
+};
+
+exports.VersionItem = VersionItem;

package/dist/components/molecules/VersionItem/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _variables = require("../../../global-files/variables");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  padding-bottom: 5px;\n  border-bottom: 1px solid ", ";\n  .header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  .version-info {\n    text-align: right;\n    h2,\n    p {\n      & + * {\n        margin-top: 5px;\n      }\n    }\n\n    p {\n      font-size: 12px;\n      font-family: ", ";\n      color: ", ";\n    }\n  }\n\n  & + * {\n    margin-top: 18px;\n  }\n"])), _variables.GlobalColors.deep_gray, _variables.GlobalColors.s4, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s2);
+
+exports.Container = Container;

package/dist/components/organisms/CreateVersion/CreateVersion.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CreateVersionDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/CreateVersion",
+  component: _index.CreateVersion
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CreateVersion, (0, _objectSpread2.default)({}, args));
+};
+
+var CreateVersionDefault = Template.bind({});
+exports.CreateVersionDefault = CreateVersionDefault;
+CreateVersionDefault.args = {
+  idArticle: 76201,
+  version: 2
+};

package/dist/components/organisms/CreateVersion/RenderChilds.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Children = void 0;
+
+var _variables = require("../../../global-files/variables");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _styles = require("./styles");
+
+var _createVersion = _interopRequireDefault(require("../../../assets/images/versionSelector/createVersion.svg"));
+
+var _genericModalWarning = _interopRequireDefault(require("../../../assets/images/genericModal/genericModalWarning.svg"));
+
+var _VersionSelect = require("../../atoms/Select/VersionSelect");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var Children = function Children(step, setStep, versions, selectedVersions, _onChange, createVersion) {
+  switch (step) {
+    case "version-options":
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.VersionOptions, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: _createVersion.default,
+          alt: "create version icon"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+          fontFamily: _variables.FontFamily.Raleway_500,
+          headerType: "product-name-header",
+          color: _variables.GlobalColors.white,
+          text: "Crea una nueva versión"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+          fontFamily: _variables.FontFamily.Raleway,
+          headerType: "retailer-name-header",
+          color: _variables.GlobalColors.white,
+          text: "Puedes elegir el contenido de versiones anteriores o crear una versión desde cero"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "buttons-container",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+            label: "Versión desde cero",
+            buttonType: "general-transparent-button",
+            onClick: function onClick() {
+              return setStep("empty-version");
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+            label: "Versión personalizada",
+            buttonType: "general-default-button",
+            onClick: function onClick() {
+              return setStep("create-version");
+            }
+          })]
+        })]
+      });
+
+    case "empty-version":
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.EmptyVersion, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: _genericModalWarning.default,
+          alt: "warning icon"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+          fontFamily: _variables.FontFamily.Raleway_500,
+          headerType: "product-name-header",
+          color: _variables.GlobalColors.white,
+          text: "Si creas una versión desde cero perderas la información actual"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+          fontFamily: _variables.FontFamily.Raleway,
+          headerType: "retailer-name-header",
+          color: _variables.GlobalColors.white,
+          text: "¿Deseas Continuar?"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "buttons-container",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+            label: "Atrás",
+            buttonType: "general-transparent-button",
+            onClick: function onClick() {
+              return setStep("version-options");
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+            label: "Continuar",
+            buttonType: "general-default-button",
+            onClick: function onClick() {
+              return createVersion(true);
+            }
+          })]
+        })]
+      });
+
+    case "create-version":
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.CreateVersion, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+          fontFamily: _variables.FontFamily.Raleway_500,
+          headerType: "retailer-name-header",
+          color: _variables.GlobalColors.white,
+          text: "Elige el contenido que deseas utilizar de versiones anteriores"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "version-selector",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "selector",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionSelect.VersionSelect, {
+              versions: versions,
+              label: "Ficha técnica",
+              id: "datasheet",
+              selectedVersions: selectedVersions,
+              onChange: function onChange(e) {
+                return _onChange(e);
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "selector",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionSelect.VersionSelect, {
+              versions: versions,
+              label: "Descripción",
+              id: "description",
+              selectedVersions: selectedVersions,
+              onChange: function onChange(e) {
+                return _onChange(e);
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "selector",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionSelect.VersionSelect, {
+              versions: versions,
+              label: "Imágenes",
+              id: "image",
+              selectedVersions: selectedVersions,
+              onChange: function onChange(e) {
+                return _onChange(e);
+              }
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "buttons-container",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+            label: "Atrás",
+            buttonType: "general-transparent-button",
+            onClick: function onClick() {
+              return setStep("version-options");
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+            label: "Continuar",
+            buttonType: "general-default-button",
+            onClick: function onClick() {
+              return createVersion();
+            }
+          })]
+        })]
+      });
+  }
+};
+
+exports.Children = Children;