contentoh-components-library 0.1.1

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AvatarAndValidationDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/AvatarAndValidation",
+  component: _index.AvatarAndValidation
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.AvatarAndValidation, args);
+};
+
+var AvatarAndValidationDefault = Template.bind({});
+exports.AvatarAndValidationDefault = AvatarAndValidationDefault;
+AvatarAndValidationDefault.args = {};

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

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarAndValidation = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _styles = require("./styles");
+
+var _Avatar = require("../../atoms/Avatar");
+
+var _DropDownButton = require("../../atoms/DropDownButton");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _ValidationPanel = require("../../atoms/ValidationPanel");
+
+//Components
+var AvatarAndValidation = function AvatarAndValidation(_ref) {
+  var avatarData = _ref.avatarData,
+      validation = _ref.validation;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showValidationPanel = _useState2[0],
+      setShowValidationPanel = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(validation ? validation : "null-button"),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      buttonType = _useState4[0],
+      setButtonType = _useState4[1];
+
+  var closeValidationPanel = function closeValidationPanel(e) {
+    if (!e.target.closest("#validation-panel") || e.target.closest(".validation-option") && showValidationPanel) {
+      document.removeEventListener("click", closeValidationPanel, false);
+      setShowValidationPanel(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showValidationPanel) {
+      document.addEventListener("click", closeValidationPanel, false);
+    }
+  }, [showValidationPanel]);
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "buttons-container"
+  }, /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    image: avatarData === null || avatarData === void 0 ? void 0 : avatarData.image,
+    altText: avatarData === null || avatarData === void 0 ? void 0 : avatarData.altText
+  }), /*#__PURE__*/React.createElement(_DropDownButton.DropDownButton, null), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    buttonType: "circular-button ".concat(buttonType),
+    onClick: function onClick() {
+      return setShowValidationPanel(true);
+    }
+  })), showValidationPanel && /*#__PURE__*/React.createElement(_ValidationPanel.ValidationPanel, {
+    id: "validation-panel",
+    setOptionClicked: setButtonType,
+    setShowValidationPanel: setShowValidationPanel
+  }));
+};
+
+exports.AvatarAndValidation = AvatarAndValidation;

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

@@ -0,0 +1,18 @@
+"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 _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: fit-content;\n\n  .buttons-container {\n    display: flex;\n    align-items: center;\n\n    * + * {\n      margin-left: 3px;\n    }\n  }\n"])));
+
+exports.Container = Container;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EditionActiveImageDefault = void 0;
+
+var _ = require(".");
+
+var _default = {
+  title: "Components/molecules/EditionActiveImage",
+  component: _.EditionActiveImage
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_.EditionActiveImage, args);
+};
+
+var EditionActiveImageDefault = Template.bind({});
+exports.EditionActiveImageDefault = EditionActiveImageDefault;
+EditionActiveImageDefault.args = {};

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditionActiveImage = void 0;
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/ProductImage/index");
+
+var _index2 = require("../../atoms/GeneralButton/index");
+
+var EditionActiveImage = function EditionActiveImage(_ref) {
+  var img = _ref.img,
+      altText = _ref.altText;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_index.ProductImage, {
+    img: img,
+    imageType: "main-image",
+    altText: altText
+  }), /*#__PURE__*/React.createElement(_index2.Button, {
+    buttonType: "open-modal-button"
+  }));
+};
+
+exports.EditionActiveImage = EditionActiveImage;

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

@@ -0,0 +1,18 @@
+"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 _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 340px;\n  height: 295px;\n"])));
+
+exports.Container = Container;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FeaturesBarDefault = void 0;
+
+var _ = require(".");
+
+var _default = {
+  title: "Components/molecules/FeaturesBar",
+  component: _.FeaturesBar
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_.FeaturesBar, args);
+};
+
+var FeaturesBarDefault = Template.bind({});
+exports.FeaturesBarDefault = FeaturesBarDefault;
+FeaturesBarDefault.args = {
+  features: [{
+    feature: "Prov",
+    value: "Unilever"
+  }, {
+    feature: "Vendor",
+    value: "1234567890"
+  }, {
+    feature: "SKU",
+    value: "1234567890"
+  }, {
+    feature: "UPC",
+    value: "1234567890"
+  }, {
+    feature: "Categoría",
+    value: "Desodorantes Caballero y Dama"
+  }]
+};

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FeaturesBar = void 0;
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/FeatureTag/index");
+
+var FeaturesBar = function FeaturesBar(_ref) {
+  var features = _ref.features;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, features !== undefined && features.map(function (feature, index) {
+    return /*#__PURE__*/React.createElement(_index.FeatureTag, {
+      key: index,
+      feature: feature.feature,
+      value: feature.value
+    });
+  }));
+};
+
+exports.FeaturesBar = FeaturesBar;

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

@@ -0,0 +1,18 @@
+"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 _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n\n  * + * {\n    margin-left: 4px;\n  }\n"])));
+
+exports.Container = Container;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.GalleryElementDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/GalleryElement",
+  component: _index.GalleryElement,
+  argTypes: {
+    gridLayout: {
+      options: [true, false],
+      type: "boolean"
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.GalleryElement, args);
+};
+
+var GalleryElementDefault = Template.bind({});
+exports.GalleryElementDefault = GalleryElementDefault;
+GalleryElementDefault.args = {
+  data: {
+    image: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+    altText: "testing image",
+    name: "Hero.jpg",
+    size: "1000x1000",
+    format: "JPG",
+    resolution: "300ppi",
+    imageType: "Tipo de imagen",
+    identificator: "F26"
+  }
+};

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

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GalleryElement = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _ProductImage = require("../../atoms/ProductImage");
+
+var _CheckBox = require("../../atoms/CheckBox");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _ValidationPanel = require("../../atoms/ValidationPanel");
+
+var _react = require("react");
+
+var GalleryElement = function GalleryElement(_ref) {
+  var _ref$validation = _ref.validation,
+      validation = _ref$validation === void 0 ? "null-button" : _ref$validation,
+      image = _ref.image,
+      _ref$gridLayout = _ref.gridLayout,
+      gridLayout = _ref$gridLayout === void 0 ? false : _ref$gridLayout,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? "chk-default" : _ref$id,
+      label = _ref.label;
+
+  var _useState = (0, _react.useState)(validation),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      statusValidation = _useState2[0],
+      setStatusValidation = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showValidationPanel = _useState4[0],
+      setShowValidationPanel = _useState4[1];
+
+  var closeValidationPanel = function closeValidationPanel(e) {
+    if (!e.target.closest("#validation-panel") || e.target.closest(".validation-option") && showValidationPanel) {
+      document.removeEventListener("click", closeValidationPanel, false);
+      setShowValidationPanel(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showValidationPanel) {
+      document.addEventListener("click", closeValidationPanel, false);
+    }
+  }, [showValidationPanel]);
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    className: gridLayout ? "grid-gallery" : "row-gallery"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "buttons-container"
+  }, /*#__PURE__*/React.createElement(_CheckBox.CheckBox, (0, _defineProperty2.default)({
+    id: id,
+    label: id
+  }, "label", label)), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    buttonType: "circular-button ".concat(statusValidation),
+    onClick: function onClick() {
+      return setShowValidationPanel(true);
+    }
+  }), showValidationPanel && /*#__PURE__*/React.createElement(_ValidationPanel.ValidationPanel, {
+    id: "validation-panel",
+    setOptionClicked: setStatusValidation,
+    setShowValidationPanel: setShowValidationPanel
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "image-container"
+  }, /*#__PURE__*/React.createElement(_ProductImage.ProductImage, {
+    img: image === null || image === void 0 ? void 0 : image.image,
+    altText: image === null || image === void 0 ? void 0 : image.altText,
+    imageType: gridLayout ? "catalogue-image-big-size" : "catalogue-image-small-size"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "information-container"
+  }, /*#__PURE__*/React.createElement("p", null, image === null || image === void 0 ? void 0 : image.name), /*#__PURE__*/React.createElement("p", null, image === null || image === void 0 ? void 0 : image.data[0].value), !gridLayout && (image === null || image === void 0 ? void 0 : image.data.map(function (element, index) {
+    return index > 0 && /*#__PURE__*/React.createElement("p", {
+      key: index
+    }, element.value);
+  })))));
+};
+
+exports.GalleryElement = GalleryElement;

package/dist/components/molecules/GalleryElement/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 _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &.grid-gallery {\n    position: relative;\n    width: 179px;\n    border-radius: 3px;\n    overflow: hidden;\n\n    .buttons-container {\n      position: absolute;\n      top: 0;\n      width: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 0 5px;\n    }\n\n    .image-container {\n      border: 1px solid #f0eef2;\n\n      .information-container {\n        background-color: ", ";\n        display: flex;\n        justify-content: space-between;\n        padding: 0 2px;\n\n        p {\n          font-family: ", ";\n          color: ", ";\n          font-size: 11px;\n          line-height: 17px;\n        }\n      }\n    }\n  }\n\n  &.row-gallery {\n    display: flex;\n    align-items: center;\n\n    .buttons-container {\n      position: relative;\n      width: 58px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .image-container {\n      display: flex;\n      align-items: center;\n      .information-container {\n        display: flex;\n\n        p {\n          font-family: ", ";\n          color: ", ";\n          font-size: 14px;\n          line-height: 17px;\n\n          & + p {\n            margin-left: 18px;\n          }\n\n          &.highlighted-data {\n            font-family: ", ";\n            color: ", ";\n            background-color: ", ";\n            border-radius: 3px;\n            font-weight: 600;\n            font-size: 11px;\n            line-height: 18px;\n            padding: 0 10px;\n          }\n        }\n      }\n    }\n\n    & > * + * {\n      margin-left: 18px;\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.s2);
+
+exports.Container = Container;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HeaderTopDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/HeaderTop",
+  component: _index.HeaderTop
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.HeaderTop, args);
+};
+
+var HeaderTopDefault = Template.bind({});
+exports.HeaderTopDefault = HeaderTopDefault;

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeaderTop = void 0;
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/ScreenHeader/index");
+
+var _index2 = require("../../atoms/GeneralButton/index");
+
+var _react = require("react");
+
+var HeaderTop = function HeaderTop(_ref) {
+  var setHeaderTop = _ref.setHeaderTop;
+  var headerTop = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    setHeaderTop && setHeaderTop(headerTop.current.clientHeight);
+  }, []);
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    ref: headerTop
+  }, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
+    text: "Edici\xF3n de producto"
+  }), /*#__PURE__*/React.createElement(_index2.Button, {
+    buttonType: "close-button"
+  }));
+};
+
+exports.HeaderTop = HeaderTop;

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

@@ -0,0 +1,18 @@
+"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 _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n"])));
+
+exports.Container = Container;

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageSelectorlDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/ImageSelectorl",
+  component: _index.ImageSelector,
+  images: {},
+  argTypes: {
+    modalSelector: {
+      options: [true, false],
+      type: "boolean"
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.ImageSelector, args);
+};
+
+var ImageSelectorlDefault = Template.bind({});
+exports.ImageSelectorlDefault = ImageSelectorlDefault;
+ImageSelectorlDefault.args = {
+  images: [{
+    img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+    alt: "img"
+  }, {
+    img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+    alt: "img"
+  }, {
+    img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+    alt: "img"
+  }, {
+    img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+    alt: "img"
+  }, {
+    img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+    alt: "img"
+  }, {
+    img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+    alt: "img"
+  }]
+};

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageSelector = void 0;
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/ProductImage/index");
+
+var ImageSelector = function ImageSelector(_ref) {
+  var images = _ref.images,
+      setActiveImage = _ref.setActiveImage,
+      modalSelector = _ref.modalSelector;
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    className: modalSelector && "modal-image-selector"
+  }, images.length > 0 && (images === null || images === void 0 ? void 0 : images.map(function (image, index) {
+    return /*#__PURE__*/React.createElement(_index.ProductImage, {
+      key: index,
+      img: image.img,
+      altText: image.altText,
+      imageType: modalSelector ? "catalogue-modal-image" : "carousel-image",
+      onClick: function onClick() {
+        return setActiveImage(images[index]);
+      }
+    });
+  })));
+};
+
+exports.ImageSelector = ImageSelector;

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

@@ -0,0 +1,18 @@
+"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 _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 340px;\n  display: flex;\n  overflow: auto;\n\n  &.modal-image-selector {\n    width: 345px;\n    height: 218px;\n    flex-wrap: wrap;\n  }\n"])));
+
+exports.Container = Container;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PlanSelectionDefault = void 0;
+
+var _index = require("./index");
+
+// import { number } from "prop-types";
+// import { GeneralTextBox } from "../../atoms/GeneralTextBox";
+// import { GeneralTextBoxDefault } from "../../atoms/GeneralTextBox/GeneralTextBox.stories";
+var _default = {
+  title: "Components/molecules/PlanSelection",
+  component: _index.PlanSelection
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.PlanSelection, args);
+};
+
+var PlanSelectionDefault = Template.bind({});
+exports.PlanSelectionDefault = PlanSelectionDefault;
+PlanSelectionDefault.args = {
+  planSelection: [{
+    number: "300",
+    name: "Proveedores"
+  }, {
+    number: "1500",
+    name: "Proveedores"
+  }, {
+    number: "+3000",
+    name: "Proveedores"
+  }, {
+    number: "On demand",
+    name: "agrega proveedores a tu forma"
+  }]
+};

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PlanSelection = void 0;
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/GeneralTextBox/index");
+
+var PlanSelection = function PlanSelection(_ref) {
+  var planSelection = _ref.planSelection,
+      setbuttonActive = _ref.setbuttonActive;
+
+  var setActivePlan = function setActivePlan(e) {
+    var buttonsPlan = document.querySelectorAll(".button-plan");
+    buttonsPlan.forEach(function (button) {
+      return button.classList.remove("active");
+    });
+    e.target.closest(".button-plan").classList.add("active");
+    setbuttonActive(true);
+  };
+
+  return /*#__PURE__*/React.createElement(_styles.Container, null, planSelection.map(function (plan, index) {
+    return /*#__PURE__*/React.createElement(_index.GeneralTextBox, {
+      className: "button-plan",
+      onClick: function onClick(e) {
+        return setActivePlan(e);
+      },
+      key: index,
+      number: plan === null || plan === void 0 ? void 0 : plan.number,
+      name: plan === null || plan === void 0 ? void 0 : plan.name
+    });
+  }));
+};
+
+exports.PlanSelection = PlanSelection;