contentoh-components-library 21.5.35 → 21.5.37

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

@@ -1,131 +1,131 @@
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-import { Button } from "../../atoms/GeneralButton";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { VersionOptions, EmptyVersion, CreateVersion } from "./styles";
-import createVersionImg from "../../../assets/images/versionSelector/createVersion.svg";
-import genericModalWarning from "../../../assets/images/genericModal/genericModalWarning.svg";
-import { VersionSelect } from "../../atoms/Select/VersionSelect";
-
-export const Children = (
-  step,
-  setStep,
-  versions,
-  selectedVersions,
-  onChange,
-  createVersion
-) => {
-  switch (step) {
-    case "version-options":
-      return (
-        <VersionOptions>
-          <img src={createVersionImg} alt="create version icon" />
-          <ScreenHeader
-            fontFamily={FontFamily.Raleway_500}
-            headerType="product-name-header"
-            color={GlobalColors.white}
-            text="Crea una nueva versión"
-          />
-          <ScreenHeader
-            fontFamily={FontFamily.Raleway}
-            headerType="retailer-name-header"
-            color={GlobalColors.white}
-            text="Puedes elegir el contenido de versiones anteriores o crear una versión desde cero"
-          />
-          <div className="buttons-container">
-            <Button
-              label="Versión desde cero"
-              buttonType="general-transparent-button"
-              onClick={() => setStep("empty-version")}
-            />
-            <Button
-              label="Versión personalizada"
-              buttonType="general-default-button"
-              onClick={() => setStep("create-version")}
-            />
-          </div>
-        </VersionOptions>
-      );
-    case "empty-version":
-      return (
-        <EmptyVersion>
-          <img src={genericModalWarning} alt="warning icon" />
-          <ScreenHeader
-            fontFamily={FontFamily.Raleway_500}
-            headerType="product-name-header"
-            color={GlobalColors.white}
-            text="Si creas una versión desde cero perderas la información actual"
-          />
-          <ScreenHeader
-            fontFamily={FontFamily.Raleway}
-            headerType="retailer-name-header"
-            color={GlobalColors.white}
-            text="¿Deseas Continuar?"
-          />
-          <div className="buttons-container">
-            <Button
-              label="Atrás"
-              buttonType="general-transparent-button"
-              onClick={() => setStep("version-options")}
-            />
-            <Button
-              label="Continuar"
-              buttonType="general-default-button"
-              onClick={() => createVersion(true)}
-            />
-          </div>
-        </EmptyVersion>
-      );
-    case "create-version":
-      return (
-        <CreateVersion>
-          <ScreenHeader
-            fontFamily={FontFamily.Raleway_500}
-            headerType="retailer-name-header"
-            color={GlobalColors.white}
-            text="Elige el contenido que deseas utilizar de versiones anteriores"
-          />
-          <div className="version-selector">
-            <div className="selector">
-              <VersionSelect
-                versions={versions}
-                label="Ficha técnica"
-                id="datasheet"
-                selectedVersions={selectedVersions}
-                onChange={(e) => onChange(e)}
-              />
-            </div>
-            <div className="selector">
-              <VersionSelect
-                versions={versions}
-                label="Descripción"
-                id="description"
-                selectedVersions={selectedVersions}
-                onChange={(e) => onChange(e)}
-              />
-            </div>
-            <div className="selector">
-              <VersionSelect
-                versions={versions}
-                label="Imágenes"
-                id="image"
-                selectedVersions={selectedVersions}
-                onChange={(e) => onChange(e)}
-              />
-            </div>
-          </div>
-          <div className="buttons-container">
-            <Button
-              label="Atrás"
-              buttonType="general-transparent-button"
-              onClick={() => setStep("version-options")}
-            />
-            <Button
-              label="Continuar"
-              buttonType="general-default-button"
-              onClick={() => createVersion()}
-            />
-          </div>
-        </CreateVersion>
-      );
-  }
-};
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+import { Button } from "../../atoms/GeneralButton";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { VersionOptions, EmptyVersion, CreateVersion } from "./styles";
+import createVersionImg from "../../../assets/images/versionSelector/createVersion.svg";
+import genericModalWarning from "../../../assets/images/genericModal/genericModalWarning.svg";
+import { VersionSelect } from "../../atoms/Select/VersionSelect";
+
+export const Children = (
+  step,
+  setStep,
+  versions,
+  selectedVersions,
+  onChange,
+  createVersion
+) => {
+  switch (step) {
+    case "version-options":
+      return (
+        <VersionOptions>
+          <img src={createVersionImg} alt="create version icon" />
+          <ScreenHeader
+            fontFamily={FontFamily.Raleway_500}
+            headerType="product-name-header"
+            color={GlobalColors.white}
+            text="Crea una nueva versión"
+          />
+          <ScreenHeader
+            fontFamily={FontFamily.Raleway}
+            headerType="retailer-name-header"
+            color={GlobalColors.white}
+            text="Puedes elegir el contenido de versiones anteriores o crear una versión desde cero"
+          />
+          <div className="buttons-container">
+            <Button
+              label="Versión desde cero"
+              buttonType="general-transparent-button"
+              onClick={() => setStep("empty-version")}
+            />
+            <Button
+              label="Versión personalizada"
+              buttonType="general-default-button"
+              onClick={() => setStep("create-version")}
+            />
+          </div>
+        </VersionOptions>
+      );
+    case "empty-version":
+      return (
+        <EmptyVersion>
+          <img src={genericModalWarning} alt="warning icon" />
+          <ScreenHeader
+            fontFamily={FontFamily.Raleway_500}
+            headerType="product-name-header"
+            color={GlobalColors.white}
+            text="Si creas una versión desde cero perderas la información actual"
+          />
+          <ScreenHeader
+            fontFamily={FontFamily.Raleway}
+            headerType="retailer-name-header"
+            color={GlobalColors.white}
+            text="¿Deseas Continuar?"
+          />
+          <div className="buttons-container">
+            <Button
+              label="Atrás"
+              buttonType="general-transparent-button"
+              onClick={() => setStep("version-options")}
+            />
+            <Button
+              label="Continuar"
+              buttonType="general-default-button"
+              onClick={() => createVersion(true)}
+            />
+          </div>
+        </EmptyVersion>
+      );
+    case "create-version":
+      return (
+        <CreateVersion>
+          <ScreenHeader
+            fontFamily={FontFamily.Raleway_500}
+            headerType="retailer-name-header"
+            color={GlobalColors.white}
+            text="Elige el contenido que deseas utilizar de versiones anteriores"
+          />
+          <div className="version-selector">
+            <div className="selector">
+              <VersionSelect
+                versions={versions}
+                label="Ficha técnica"
+                id="datasheet"
+                selectedVersions={selectedVersions}
+                onChange={(e) => onChange(e)}
+              />
+            </div>
+            <div className="selector">
+              <VersionSelect
+                versions={versions}
+                label="Descripción"
+                id="description"
+                selectedVersions={selectedVersions}
+                onChange={(e) => onChange(e)}
+              />
+            </div>
+            <div className="selector">
+              <VersionSelect
+                versions={versions}
+                label="Imágenes"
+                id="image"
+                selectedVersions={selectedVersions}
+                onChange={(e) => onChange(e)}
+              />
+            </div>
+          </div>
+          <div className="buttons-container">
+            <Button
+              label="Atrás"
+              buttonType="general-transparent-button"
+              onClick={() => setStep("version-options")}
+            />
+            <Button
+              label="Continuar"
+              buttonType="general-default-button"
+              onClick={() => createVersion()}
+            />
+          </div>
+        </CreateVersion>
+      );
+  }
+};

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

@@ -1,68 +1,68 @@
-import { Button } from "../../atoms/GeneralButton";
-import { Container } from "./styles";
-import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
-import { useEffect, useState } from "react";
-import { Children } from "./RenderChilds";
-import axios from "axios";
-
-export const CreateVersion = ({
-  articleId,
-  version,
-  setShowCreateVersion,
-  versionsList,
-  realoadVersion,
-  jwt,
-}) => {
-  const [step, setStep] = useState("version-options");
-  const [selectedVersions, setSelectedVersions] = useState({
-    datasheet: version,
-    description: version,
-    image: version,
-  });
-
-  const createVersion = async (isEmpty) => {
-    try {
-      let data = { articleId, isEmpty };
-
-      if (!isEmpty) data["version"] = selectedVersions;
-
-      await axios.post(process.env.REACT_APP_VERSIONS_ENDPOINT, data, {
-        headers: { Authorization: jwt },
-      });
-      setShowCreateVersion(false);
-      realoadVersion && realoadVersion();
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  const onChange = (e) => {
-    setSelectedVersions({
-      ...selectedVersions,
-      [e.target.name]: parseInt(e.target.value),
-    });
-  };
-
-  return (
-    <Container>
-      <div id="create-version" className="modal-container">
-        <div className="button-container">
-          <Button
-            image={closeIcon}
-            buttonType={"circular-button"}
-            id="close-modal-button"
-            onClick={() => setShowCreateVersion(false)}
-          />
-        </div>
-        {Children(
-          step,
-          setStep,
-          versionsList,
-          selectedVersions,
-          onChange,
-          createVersion
-        )}
-      </div>
-    </Container>
-  );
-};
+import { Button } from "../../atoms/GeneralButton";
+import { Container } from "./styles";
+import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
+import { useEffect, useState } from "react";
+import { Children } from "./RenderChilds";
+import axios from "axios";
+
+export const CreateVersion = ({
+  articleId,
+  version,
+  setShowCreateVersion,
+  versionsList,
+  realoadVersion,
+  jwt,
+}) => {
+  const [step, setStep] = useState("version-options");
+  const [selectedVersions, setSelectedVersions] = useState({
+    datasheet: version,
+    description: version,
+    image: version,
+  });
+
+  const createVersion = async (isEmpty) => {
+    try {
+      let data = { articleId, isEmpty };
+
+      if (!isEmpty) data["version"] = selectedVersions;
+
+      await axios.post(process.env.REACT_APP_VERSIONS_ENDPOINT, data, {
+        headers: { Authorization: jwt },
+      });
+      setShowCreateVersion(false);
+      realoadVersion && realoadVersion();
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const onChange = (e) => {
+    setSelectedVersions({
+      ...selectedVersions,
+      [e.target.name]: parseInt(e.target.value),
+    });
+  };
+
+  return (
+    <Container>
+      <div id="create-version" className="modal-container">
+        <div className="button-container">
+          <Button
+            image={closeIcon}
+            buttonType={"circular-button"}
+            id="close-modal-button"
+            onClick={() => setShowCreateVersion(false)}
+          />
+        </div>
+        {Children(
+          step,
+          setStep,
+          versionsList,
+          selectedVersions,
+          onChange,
+          createVersion
+        )}
+      </div>
+    </Container>
+  );
+};

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

@@ -1,79 +1,79 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1000;
-  background-color: #281f3366;
-  height: 100vh;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .modal-container {
-    position: relative;
-    padding: 40px 20px;
-    background: #281f33;
-    border-radius: 39px;
-
-    .button-container {
-      display: flex;
-      justify-content: flex-end;
-      padding-right: 15px;
-    }
-  }
-`;
-
-export const VersionOptions = styled.div`
-  max-width: 560px;
-  text-align: center;
-
-  & > * + * {
-    margin-top: 20px;
-  }
-
-  img + * {
-    margin-top: 0;
-  }
-
-  .buttons-container {
-    display: flex;
-    justify-content: space-evenly;
-
-    button {
-      flex: 0.3 0 30%;
-    }
-
-    .general-transparent-button {
-      color: ${GlobalColors.white};
-      border: 1px solid ${GlobalColors.white};
-    }
-  }
-`;
-
-export const EmptyVersion = VersionOptions;
-
-export const CreateVersion = styled(VersionOptions)`
-  .retailer-name-header {
-    margin: 30px 0;
-  }
-  .version-selector {
-    display: flex;
-    justify-content: space-evenly;
-
-    .selector {
-      flex: 0.1 1 20%;
-      font-family: ${FontFamily.Lato};
-      color: ${GlobalColors.white};
-      font-size: 11px;
-      font-weight: normal;
-    }
-
-    & + * {
-      margin-top: 50px;
-    }
-  }
-`;
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  background-color: #281f3366;
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .modal-container {
+    position: relative;
+    padding: 40px 20px;
+    background: #281f33;
+    border-radius: 39px;
+
+    .button-container {
+      display: flex;
+      justify-content: flex-end;
+      padding-right: 15px;
+    }
+  }
+`;
+
+export const VersionOptions = styled.div`
+  max-width: 560px;
+  text-align: center;
+
+  & > * + * {
+    margin-top: 20px;
+  }
+
+  img + * {
+    margin-top: 0;
+  }
+
+  .buttons-container {
+    display: flex;
+    justify-content: space-evenly;
+
+    button {
+      flex: 0.3 0 30%;
+    }
+
+    .general-transparent-button {
+      color: ${GlobalColors.white};
+      border: 1px solid ${GlobalColors.white};
+    }
+  }
+`;
+
+export const EmptyVersion = VersionOptions;
+
+export const CreateVersion = styled(VersionOptions)`
+  .retailer-name-header {
+    margin: 30px 0;
+  }
+  .version-selector {
+    display: flex;
+    justify-content: space-evenly;
+
+    .selector {
+      flex: 0.1 1 20%;
+      font-family: ${FontFamily.Lato};
+      color: ${GlobalColors.white};
+      font-size: 11px;
+      font-weight: normal;
+    }
+
+    & + * {
+      margin-top: 50px;
+    }
+  }
+`;

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

@@ -1,28 +1,28 @@
-import { DashboardMetric } from "./index";
-
-export default {
-  title: "Components/organisms/DashboardMetric",
-  component: DashboardMetric,
-};
-
-const Template = (args) => <DashboardMetric {...args} />;
-export const DashboardMetricDefault = Template.bind({});
-DashboardMetricDefault.args = {
-  label: "Productos por estatus",
-  description:
-    "Revisa el avance individual de cada estatus, utiliza los filtros para encontrar información precisa.",
-  dataObject: {
-    AA: 89,
-    ACA: 11,
-    AC: 100,
-    AP: 60,
-    AS: 300,
-    CA: 50,
-    PA: 100,
-    IE: 700,
-    RA: 50,
-    RCA: 90,
-    RC: 11,
-    RP: 49,
-  },
-};
+import { DashboardMetric } from "./index";
+
+export default {
+  title: "Components/organisms/DashboardMetric",
+  component: DashboardMetric,
+};
+
+const Template = (args) => <DashboardMetric {...args} />;
+export const DashboardMetricDefault = Template.bind({});
+DashboardMetricDefault.args = {
+  label: "Productos por estatus",
+  description:
+    "Revisa el avance individual de cada estatus, utiliza los filtros para encontrar información precisa.",
+  dataObject: {
+    AA: 89,
+    ACA: 11,
+    AC: 100,
+    AP: 60,
+    AS: 300,
+    CA: 50,
+    PA: 100,
+    IE: 700,
+    RA: 50,
+    RCA: 90,
+    RC: 11,
+    RP: 49,
+  },
+};