contentoh-components-library 21.4.60 → 21.4.62

package/dist/components/pages/RetailerProductEdition/index.js

@@ -516,7 +516,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               }
 
               _context2.next = 3;
-              return (0, _data.getRetailerServices)(product === null || product === void 0 ? void 0 : (_product$article = product.article) === null || _product$article === void 0 ? void 0 : _product$article.id_article, product === null || product === void 0 ? void 0 : (_product$article2 = product.article) === null || _product$article2 === void 0 ? void 0 : _product$article2.category, parseInt(product === null || product === void 0 ? void 0 : (_product$article3 = product.article) === null || _product$article3 === void 0 ? void 0 : _product$article3.id_category), auditableVersion.version);
+              return (0, _data.getRetailerServices)(product === null || product === void 0 ? void 0 : (_product$article = product.article) === null || _product$article === void 0 ? void 0 : _product$article.id_article, product === null || product === void 0 ? void 0 : (_product$article2 = product.article) === null || _product$article2 === void 0 ? void 0 : _product$article2.category, parseInt(product === null || product === void 0 ? void 0 : (_product$article3 = product.article) === null || _product$article3 === void 0 ? void 0 : _product$article3.id_category), auditableVersion.version, token);
 
             case 3:
               _auditServices = _context2.sent;
@@ -556,7 +556,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
             case 0:
               _context3.prev = 0;
               _context3.next = 3;
-              return (0, _data.getRetailerServices)(product === null || product === void 0 ? void 0 : (_product$article4 = product.article) === null || _product$article4 === void 0 ? void 0 : _product$article4.id_article, product === null || product === void 0 ? void 0 : (_product$article5 = product.article) === null || _product$article5 === void 0 ? void 0 : _product$article5.category, parseInt(product === null || product === void 0 ? void 0 : (_product$article6 = product.article) === null || _product$article6 === void 0 ? void 0 : _product$article6.id_category), version);
+              return (0, _data.getRetailerServices)(product === null || product === void 0 ? void 0 : (_product$article4 = product.article) === null || _product$article4 === void 0 ? void 0 : _product$article4.id_article, product === null || product === void 0 ? void 0 : (_product$article5 = product.article) === null || _product$article5 === void 0 ? void 0 : _product$article5.category, parseInt(product === null || product === void 0 ? void 0 : (_product$article6 = product.article) === null || _product$article6 === void 0 ? void 0 : _product$article6.id_category), version, token);
 
             case 3:
               _services = _context3.sent;
@@ -1351,7 +1351,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
 
               body.isAproved = result === "A";
               _context11.next = 12;
-              return _axios.default.post("".concat(process.env.REACT_APP_EVALUATION_REFACTOR), body, {
+              return _axios.default.post("".concat(process.env.REACT_APP_EVALUATION_ENDPOINT), body, {
                 headers: {
                   Authorization: token
                 }
@@ -1376,7 +1376,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               }
 
               _context11.next = 21;
-              return _axios.default.post("".concat(process.env.REACT_APP_EVALUATION_REFACTOR), body, {
+              return _axios.default.post("".concat(process.env.REACT_APP_EVALUATION_ENDPOINT), body, {
                 headers: {
                   Authorization: token
                 }
@@ -1839,7 +1839,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               };
               conceptArray.forEach(function (concept) {
                 body.service = concept;
-                evaluationArray.push(_axios.default.post("".concat(process.env.REACT_APP_EVALUATION_REFACTOR), body, {
+                evaluationArray.push(_axios.default.post("".concat(process.env.REACT_APP_EVALUATION_ENDPOINT), body, {
                   headers: {
                     Authorization: token
                   }

package/dist/global-files/data.js

@@ -20,7 +20,7 @@ var _jsBase = require("js-base64");
 var _uuid = require("uuid");
 
 var getRetailerServices = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(articleId, category, categoryId, version) {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(articleId, category, categoryId, version, token) {
     var _images$values, responseArray, datasheets, descriptions, images;
 
     return _regenerator.default.wrap(function _callee$(_context) {
@@ -29,7 +29,11 @@ var getRetailerServices = /*#__PURE__*/function () {
           case 0:
             _context.prev = 0;
             _context.next = 3;
-            return Promise.all([_axios.default.post("".concat(process.env.REACT_APP_ARTICLE_DATA_DATASHEET_ENDPOINT, "?idCategory=").concat(categoryId, "&articleId=").concat(articleId, "&version=").concat(version)), _axios.default.get("".concat(process.env.REACT_APP_ARTICLE_DATA_DESCRIPTION_ENDPOINT, "?idCategory=").concat(categoryId, "&articleId=").concat(articleId, "&version=").concat(version)), _axios.default.post("".concat(process.env.REACT_APP_ARTICLE_DATA_IMAGES_ENDPOINT, "?articleId=").concat(articleId, "&version=").concat(version), {
+            return Promise.all([_axios.default.post("".concat(process.env.REACT_APP_ARTICLE_DATA_DATASHEET_ENDPOINT, "?idCategory=").concat(categoryId, "&articleId=").concat(articleId, "&version=").concat(version), {}, {
+              headers: {
+                Authorization: token
+              }
+            }), _axios.default.get("".concat(process.env.REACT_APP_ARTICLE_DATA_DESCRIPTION_ENDPOINT, "?idCategory=").concat(categoryId, "&articleId=").concat(articleId, "&version=").concat(version)), _axios.default.post("".concat(process.env.REACT_APP_ARTICLE_DATA_IMAGES_ENDPOINT, "?articleId=").concat(articleId, "&version=").concat(version), {
               category: category
             })]);
 
@@ -61,7 +65,7 @@ var getRetailerServices = /*#__PURE__*/function () {
     }, _callee, null, [[0, 11]]);
   }));
 
-  return function getRetailerServices(_x, _x2, _x3, _x4) {
+  return function getRetailerServices(_x, _x2, _x3, _x4, _x5) {
     return _ref.apply(this, arguments);
   };
 }();
@@ -263,7 +267,7 @@ var fetchUsers = /*#__PURE__*/function () {
     }, _callee4);
   }));
 
-  return function fetchUsers(_x5) {
+  return function fetchUsers(_x6) {
     return _ref4.apply(this, arguments);
   };
 }();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.60",
+  "version": "21.4.62",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/assets/images/Icons/info.svg

@@ -0,0 +1,8 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_37_379" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="8" height="8">
+<rect width="8" height="8" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_37_379)">
+<path d="M3.63807 5.98825H4.40893V3.62867H3.63807V5.98825ZM3.99596 3.07403C4.124 3.07403 4.2311 3.03169 4.31727 2.947C4.40345 2.86232 4.44653 2.75738 4.44653 2.6322C4.44653 2.49463 4.40331 2.38347 4.31685 2.29871C4.2304 2.21394 4.12327 2.17156 3.99547 2.17156C3.86061 2.17156 3.75166 2.21394 3.66863 2.29871C3.58559 2.38347 3.54407 2.49307 3.54407 2.6275C3.54407 2.7566 3.58737 2.8633 3.67398 2.94759C3.7606 3.03188 3.86792 3.07403 3.99596 3.07403ZM3.9991 8C3.44212 8 2.92156 7.89633 2.43741 7.68899C1.95324 7.48165 1.52964 7.19646 1.16659 6.83341C0.803541 6.47036 0.518349 6.04696 0.311013 5.5632C0.103671 5.07943 0 4.5588 0 4.0013C0 3.44379 0.103671 2.92273 0.311013 2.4381C0.518349 1.95348 0.803049 1.53104 1.16511 1.1708C1.52718 0.810554 1.95032 0.525358 2.43455 0.315215C2.91877 0.105072 3.43989 0 3.99792 0C4.55595 0 5.07764 0.10483 5.56301 0.314491C6.04837 0.524146 6.47094 0.80868 6.83072 1.16809C7.1905 1.52751 7.47533 1.95015 7.6852 2.43603C7.89507 2.92191 8 3.44396 8 4.0022C8 4.56004 7.89493 5.08098 7.68479 5.56504C7.47464 6.04909 7.18945 6.47169 6.8292 6.83282C6.46896 7.19395 6.04646 7.47876 5.56169 7.68726C5.07694 7.89575 4.55607 8 3.9991 8ZM4 7.11633C4.86173 7.11633 5.59499 6.81435 6.19977 6.21037C6.80454 5.60639 7.10693 4.8696 7.10693 4C7.10693 3.13827 6.80513 2.40501 6.20153 1.80024C5.59793 1.19546 4.86095 0.893067 3.9906 0.893067C3.12887 0.893067 2.39561 1.19487 1.79083 1.79847C1.18606 2.40207 0.883666 3.13905 0.883666 4.0094C0.883666 4.87113 1.18565 5.60439 1.78963 6.20917C2.39361 6.81394 3.1304 7.11633 4 7.11633Z" fill="#ECDD1D"/>
+</g>
+</svg>

package/src/components/atoms/TabSection/styles.js

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  font-family: ${FontFamily.Raleway_500};
+  color: ${GlobalColors.s5};
+  font-size: 14px;
+  line-height: 21px;
+  border-bottom: 2px solid ${GlobalColors.s3};
+  width: 149px;
+  padding-bottom: 5px;
+  transition: 0.1s all;
+  cursor: pointer;
+
+  &.active {
+    font-size: 18px;
+    border-bottom: 2px solid ${GlobalColors.magenta_s2};
+  }
+
+  & + * {
+    margin-left: 10px;
+  }
+`;

package/src/components/molecules/BoxAttribute/BoxAttribute.stories.js

@@ -0,0 +1,16 @@
+import { BoxAttribute } from "./index";
+
+export default {
+  title: "Components/molecules/BoxAttribute",
+  component: BoxAttribute,
+};
+
+const Template = (args) => <BoxAttribute {...args} />;
+
+export const BoxAttributeDefault = Template.bind({});
+
+BoxAttributeDefault.args = {
+    text:"texto prueba",
+    titletool:"Porcentaje de requeridos",
+    texttool:"Este porcentaje indica la completitud de los atributos requeridos para todos los servicios.",
+};

package/src/components/molecules/BoxAttribute/index.js

@@ -0,0 +1,71 @@
+import { Container } from "./styles";
+import IconInfo from "../../../assets/images/Icons/info.svg";
+import TextField from "@mui/material/TextField";
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import { styled } from '@mui/material/styles';
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const BoxAttribute = (props) => {
+  const {
+    id,
+    key,
+    className,
+    text,
+    borderType,
+    atributos,
+    setAtributos,
+    required,
+    description,
+  } = props;
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    setAtributos((prevAtributos) => ({
+      ...prevAtributos,
+      [name]: value,
+    }));
+  };
+  const LightTooltip = styled(({ className, ...props }) => (
+    <Tooltip {...props} classes={{ popper: className }} />
+  ))(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+      backgroundColor: GlobalColors.white,
+      color: 'rgba(0, 0, 0, 0.87)',
+      boxShadow: theme.shadows[1],
+      fontSize: 11,
+      fontFamily: `${FontFamily.Roboto}, sans-serif`,
+    },
+  }));
+  return (
+    <>
+       <Container
+        id={id}
+        key={key}
+        className={className}
+        borderType={borderType}
+      >
+        <LightTooltip title={
+              <div className="container-tooltip">
+                <p className="container-tooltip">{description}</p>
+              </div>
+            }>
+              <Container className="">
+                <img className="icon" src={IconInfo} alt="iconInfo" />
+              </Container>
+        </LightTooltip>
+        <span>{text}<span className={required ? 'required-text' : ''}>{required ? '*' : ''}</span></span>
+          <TextField
+            hiddenLabel
+            key={props.id}
+            name={props.id}
+            value={atributos[props.id]}
+            onChange={handleInputChange}
+            className="caja-borde"
+            variant="outlined"
+            size="small"
+            type="number"
+            required={required}
+          />
+      </Container>
+    </>
+  );
+};

package/src/components/molecules/BoxAttribute/styles.js

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap:4px;
+  #atr-alto {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .caja-borde {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 12px;
+    line-height: 1.2;
+    border-radius: ${({ borderType }) => {
+      return borderType?.toLowerCase() === "rectangle"
+        ? "5px"
+        : borderType?.toLowerCase() === "circle"
+        ? "50%"
+        : "none";
+    }};
+  }
+  span {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 12px;
+    line-height: 1.2;
+    font-weight: 600;
+  }
+  .icon {
+    width: 8px;
+    height: 8px;
+  }
+  .required-text {
+    color: red;
+  }
+`;

package/src/components/molecules/BoxButtons/BoxButtons.stories.js

@@ -0,0 +1,15 @@
+import { BoxButtons } from "./index";
+
+export default {
+  title: "Components/molecules/BoxButtons",
+  component: BoxButtons,
+};
+
+const Template = (args) => <BoxButtons {...args} />;
+
+export const BoxButtonsDefault = Template.bind({});
+
+BoxButtonsDefault.args = {
+    text:"texto prueba",
+    showAdd:true,
+};

package/src/components/molecules/BoxButtons/index.js

@@ -0,0 +1,28 @@
+import { Container, ContainerIcon } from "./styles";
+import { Button } from "@mui/material";
+
+export const BoxButtons = ({ showAdd, onAdd, onDelete, isTheFirstBox, index  }) => {
+  console.log("index",index)
+  return (
+      <Container index={index}>
+        {!isTheFirstBox && (
+          <Button
+            variant="outlined"
+            className="button-circle"
+            onClick={onDelete}
+          >
+            <ContainerIcon>
+              <span className="iconos-out">delete_forever</span>
+            </ContainerIcon>
+          </Button>
+        )}
+        {showAdd && (
+          <Button onClick={onAdd} variant="outlined" className="button-circle">
+            <ContainerIcon>
+              <span className="iconos-out iconos-grises">add</span>
+            </ContainerIcon>
+          </Button>
+        )}
+      </Container>
+  );
+};

package/src/components/molecules/BoxButtons/styles.js

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+    display:flex;
+    flex-direction:row;
+    gap:8px;
+  .button-circle{
+    width:30px;
+    height:30px;
+    padding:2px;
+    border-radius:100%;
+    min-width:30px;
+    border: 1px solid #F0F0F0;
+  }
+  .button-circle:hover {
+    border: 1px solid #F0F0F0;
+  }
+
+`;
+export const ContainerIcon = styled.div`
+cursor: pointer;
+@font-face {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-weight: 100 700;
+  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
+    format("woff2");
+}
+.iconos-out {
+  font-family: "Material Symbols Outlined";
+  font-size: 20px;
+  //line-height: 1;
+  margin-top: 10px;
+}
+.iconos-out {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+  color:  #B64545;
+}
+.iconos-grises {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+  color:  ${GlobalColors.gray};
+}`;

package/src/components/molecules/TagAndInput/index.js

@@ -1,6 +1,7 @@
 import { Container } from "./styles";
 import { ScreenHeader } from "../../atoms/ScreenHeader/index";
 import { GeneralInput } from "../../atoms/GeneralInput/index";
+import { useState, useEffect } from "react";
 
 export const TagAndInput = ({
   inputType,
@@ -29,21 +30,54 @@ export const TagAndInput = ({
   onKeyDown,
   showTooltip,
   auditClass,
+  onChange, 
+  dataInputs,
+  inputGroup,
+  boxOnboardingData,
 }) => {
+  const [boxOnboardingList, setBoxOnboardingList] = useState(boxOnboardingData || []);
+
+  useEffect(() => {
+    const temp = {};
+    let maxBoxId = 0;
+    inputGroup?.inputs.forEach((attrId) => {
+      if (!dataInputs[attrId].box) return;
+      Object.entries(dataInputs[attrId].box).forEach(([boxId, value]) => {
+        if (boxId > maxBoxId) maxBoxId = boxId;
+        if (!temp[boxId]) temp[boxId] = {};
+        temp[boxId][attrId] = value;
+      });
+    });
+    const tempList = Object.values(temp);
+    if (tempList.length > 0) {
+      setBoxOnboardingList(
+        tempList.map((value, index) =>
+          index === tempList.length - 1 ? {value } : { value }
+        )
+      );
+    }
+  }, []);
+
+  useEffect(() => {
+    onChange && onChange(boxOnboardingList);
+  }, [boxOnboardingList]);
+
   return (
     <Container
       inputType={inputType}
       className={"input-container"}
       key={`generalTagInput-${inputType}`}
     >
-      <div className="title-container">
-        <ScreenHeader
-          text={label}
-          headerType={"input-name-header"}
-          color={color}
-        />
-        {showTooltip && <span className="tooltip">{label}</span>}
-      </div>
+       {label?.length && (
+        <div className="title-container">
+          <ScreenHeader
+            text={label}
+            headerType={"input-name-header"}
+            color={color}
+          />
+          {showTooltip && <span className="tooltip">{label}</span>}
+        </div>
+      )}
       <GeneralInput
         inputId={inputId}
         inputType={inputType}
@@ -68,6 +102,16 @@ export const TagAndInput = ({
         inputOnChange={inputOnChange}
         onKeyDown={onKeyDown}
         auditClass={auditClass}
+        onChange={(e) => {
+          setBoxOnboardingList((prev) => {
+            return prev.map((box, i) => {
+              if (i != index) {
+                return box;
+              }
+              return { ...box, value: e };
+            });
+          });
+        }}
       />
     </Container>
   );

package/src/components/organisms/Box/Box.stories.js

@@ -0,0 +1,17 @@
+import { Box } from "./index";
+import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
+import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
+import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
+
+export default {
+  title: "Components/organisms/Box",
+  component: Box,
+};
+
+const Template = (args) => <Box {...args} />;
+
+export const BoxDefault = Template.bind({});
+BoxDefault.args = {
+  panelImg:[LoginImage, Login2, Login3],
+  panelText:"Elige la plataforma que conecta proovedores y retailers",
+};

package/src/components/organisms/Box/index.js

@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from "react";
+import { Container } from "./styles";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { BoxOnboarding } from "../BoxOnboarding";
+import { BoxButtons } from "../../molecules/BoxButtons";
+
+export const Box = ({ onChange, dataInputs, inputGroup }) => {
+  const [isDeleteDisabled, setIsDeleteDisabled] = useState(true);
+  const [boxOnboardingList, setBoxOnboardingList] = useState([
+    {
+      showAdd: true,
+      value: {},
+    },
+  ]);
+
+  useEffect(() => {
+    const temp = {};
+    let maxBoxId = 0;
+    inputGroup.inputs.forEach((attrId) => {
+      if (!dataInputs[attrId].box) return;
+      Object.entries(dataInputs[attrId].box).forEach(([boxId, value]) => {
+        if (boxId > maxBoxId) maxBoxId = boxId;
+        if (!temp[boxId]) temp[boxId] = {};
+        temp[boxId][attrId] = value;
+      });
+    });
+    const tempList = Object.values(temp);
+    if (tempList.length > 0) {
+      setBoxOnboardingList(
+        tempList.map((value, index) =>
+          index === tempList.length - 1 ? { showAdd: true, value } : { value }
+        )
+      );
+    }
+  }, []);
+
+  const handleAddBoxOnboarding = () => {
+    const newBoxOnboarding = {
+      showAdd: false,
+      value: {},
+    };
+
+    setBoxOnboardingList([...boxOnboardingList, newBoxOnboarding]);
+  };
+
+  const handleDeleteBoxOnboarding = (index) => {
+    if (index !== 0) {
+      const updatedBoxOnboardingList = [...boxOnboardingList];
+      updatedBoxOnboardingList.splice(index, 1);
+      setBoxOnboardingList(updatedBoxOnboardingList);
+    } else {
+      setIsDeleteDisabled(true);
+    }
+  };
+  
+  useEffect(() => {
+    onChange && onChange(boxOnboardingList);
+  }, [boxOnboardingList]);
+
+  return (
+    <Container
+      fontFamily={FontFamily.Raleway}
+      color={GlobalColors.original_magenta}
+    >
+      <h1 fontFamily={FontFamily.Raleway}>{inputGroup.dataGroup}</h1>
+      <div className="container-box">
+        {boxOnboardingList.map((boxOnboarding, index) => (
+          <>
+
+            <div className="container-buttons">
+              <BoxOnboarding
+                key={index}
+                index={index}
+                showAdd={boxOnboarding.showAdd}
+                data={boxOnboarding.value}
+                dataInputs={dataInputs}
+                inputs={inputGroup.inputs}
+                onChange={(e) => {
+                  setBoxOnboardingList((prev) => {
+                    return prev.map((box, i) => {
+                      if (i != index) {
+                        return box;
+                      }
+                      return { ...box, value: e };
+                    });
+                  });
+                }}
+              />
+              <BoxButtons
+                key={index}
+                index={index}
+                showAdd={boxOnboarding.showAdd}
+                onAdd={handleAddBoxOnboarding}
+                onDelete={() => handleDeleteBoxOnboarding(index)}
+                isDeleteDisabled={isDeleteDisabled}
+              />
+            </div>
+          </>
+        ))}
+      </div>
+    </Container>
+  );
+};

package/src/components/organisms/Box/styles.js

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  font-family: ${FontFamily.Roboto}, sans-serif;
+  font-weight: 400;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: var(--size);
+  line-height: 1.2;
+  height: auto;
+  border-radius: 10px;
+  background: white;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  text-align: center;
+  .container-buttons {
+    display: flex;
+    gap:10px;
+  }
+  .container-box{
+    display: flex;
+    flex-direction:column-reverse;
+    gap:10px;
+  }
+  #contenedor-caja {
+    display: flex;
+    justify-content: space-between;
+    color: #262626;
+    white-space: nowrap;
+    gap: 10px;
+  }
+  #atr-alto {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 6px;
+  }
+  h1 {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 17px;
+    line-height: 1.2;
+    font-weight: 500;
+    text-align: left;
+  }
+`;

package/src/components/organisms/BoxOnboarding/BoxOnboarding.stories.js

@@ -0,0 +1,17 @@
+import { BoxOnboarding } from "./index";
+import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
+import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
+import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
+
+export default {
+  title: "Components/organisms/BoxOnboarding",
+  component: BoxOnboarding,
+};
+
+const Template = (args) => <BoxOnboarding {...args} />;
+
+export const BoxOnboardingDefault = Template.bind({});
+BoxOnboardingDefault.args = {
+  panelImg:[LoginImage, Login2, Login3],
+  panelText:"Elige la plataforma que conecta proovedores y retailers",
+};