contentoh-components-library 0.1.1 → 8.0.0

package/src/components/atoms/LogoImage/LogoImage.stories.js

@@ -0,0 +1,10 @@
+import { LogoImage } from "./index";
+
+export default {
+  title: "Components/atoms/LogoImage",
+  component: LogoImage,
+};
+const Template = (args) => <LogoImage {...args} />;
+export const LogoImageDefault = Template.bind({});
+
+LogoImageDefault.args = {};

package/src/components/atoms/LogoImage/index.js

@@ -0,0 +1,10 @@
+import { Container } from "./styles";
+import logoLogin from "../../../assets/images/logo/logoLogin.svg";
+
+export const LogoImage = () => {
+  return (
+    <Container key={`logo`}>
+      <img src={logoLogin} alt={"logo"} />
+    </Container>
+  );
+};

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

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+
+img {
+    width: 100%;
+    margin:auto;
+}
+& + * {
+    margin-top: 20px;
+}
+`;

package/src/components/atoms/MenuNotification/MenuNotification.stories.js

@@ -0,0 +1,17 @@
+import { MenuNotification } from "./index";
+
+export default {
+  title: "Components/atoms/MenuNotification",
+  component: MenuNotification,
+};
+
+const Template = (args) => <MenuNotification {...args} />;
+export const MenuNotificationDefault = Template.bind({});
+
+MenuNotificationDefault.args = {
+  content: [
+    { notificationType:"productComment", label: "Asignaron el producto 23441244" },
+    { notificationType:"productAssignation", label: "Ajustaron el nombre del producto" },
+    { notificationType:"productAssignation", label: "Agregaron comentario en producto 123" },
+  ],
+};

package/src/components/atoms/MenuNotification/index.js

@@ -0,0 +1,30 @@
+import { Container } from "./styles";
+import menuComment from "../../../assets/images/menuNotification/menuNotificationComment.svg";
+import menuProductAssignation from "../../../assets/images/menuNotification/menuNotificationProduct.svg";
+
+export const MenuNotification = ({ content }) => {
+  return (
+    <Container id="menu-notification">
+      <ul className="overall-list">
+        {content?.map((item, index) => (
+          <li
+            key={index}
+            onClick={() => {
+              console.log(item.label);
+            }}
+          >
+            <img
+              src={
+                content?.notificationType === "productComment"
+                  ? menuComment
+                  : menuProductAssignation
+              }
+              alt={item.label}
+            />{" "}
+            <p>{item.label}</p>
+          </li>
+        ))}
+      </ul>
+    </Container>
+  );
+};

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

@@ -0,0 +1,50 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 220px;
+  height: auto;
+  border-radius: 20px;
+  background-color: ${GlobalColors.s2};
+  padding: 25px 16px 18px 26px;
+  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.14);
+  position: absolute;
+  top: calc(100% + 25px);
+  left: calc(50% - 223px / 2);
+  &::before {
+    content: "";
+    width: 85px;
+    height: 85px;
+    display: block;
+    background-color: ${GlobalColors.s2};
+    position: absolute;
+    left: 50%;
+    transform: translateX(-30%) rotate(-22deg) skewX(45deg);
+    top: -17px;
+    z-index: -1;
+  }
+  .overall-list {
+    list-style: none;
+    li {
+      display: flex;
+      align-items: center;
+      & + * {
+        margin-top: 10px;
+      }
+      img {
+        & + * {
+          margin-left: 10px;
+        }
+      }
+      p {
+        line-height: 16px;
+        font-size: 12px;
+        letter-spacing: -0.015em;
+        color: ${GlobalColors.s4};
+        font-family: ${FontFamily.AvenirNext};
+        font-style: normal;
+        font-weight: normal;
+      }
+    }
+  }
+`;

package/src/components/atoms/MenuProfile/MenuProfile.stories.js

@@ -0,0 +1,13 @@
+import { MenuProfile } from "./index";
+
+export default {
+  title: "Components/atoms/MenuProfile",
+  component: MenuProfile,
+};
+
+const Template = (args) => <MenuProfile {...args} />;
+export const MenuProfileDefault = Template.bind({});
+
+MenuProfileDefault.args = {
+  user: "Administrador",
+};

package/src/components/atoms/MenuProfile/index.js

@@ -0,0 +1,31 @@
+import { Container } from "./styles";
+import myAccount from "../../../assets/images/menuProfile/myAccount.svg";
+import settings from "../../../assets/images/menuProfile/settings.svg";
+import logOut from "../../../assets/images/menuProfile/logOut.svg";
+
+export const MenuProfile = ({ user }) => {
+  const content = [
+    { icon: myAccount, label: "Mi cuenta" },
+    { icon: settings, label: "Ajustes" },
+    { icon: logOut, label: "Cerrar sesión" },
+  ];
+  return (
+    <Container id="menu-profile">
+      <div>
+        <p>{user}</p>
+      </div>
+      <ul className="overall-list">
+        {content.map((item, index) => (
+          <li
+            key={index}
+            onClick={() => {
+              console.log(item.label);
+            }}
+          >
+            <img src={item.icon} alt={item.label} /> <p>{item.label}</p>
+          </li>
+        ))}
+      </ul>
+    </Container>
+  );
+};

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

@@ -0,0 +1,57 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 200px;
+  height: auto;
+  border-radius: 20px;
+  background-color: ${GlobalColors.s2};
+  padding: 16px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  position: absolute;
+  top: calc(100% + 5px);
+  left: 0px;
+  div {
+    background-color: ${GlobalColors.original_purpura};
+    border-radius: 15px;
+    padding-top: 4px;
+    padding-bottom: 1px;
+    p {
+      text-align: center;
+      font-family: ${FontFamily.AvenirNext};
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px;
+      font-size: 14px;
+      color: #ededed;
+      letter-spacing: -0.015em;
+    }
+  }
+  .overall-list {
+    margin-top: 5px;
+    margin-left: 25px;
+    list-style: none;
+    li {
+      display: flex;
+      align-items: center;
+      & + * {
+        margin-top: 8px;
+      }
+      img {
+        & + * {
+          margin-left: 10px;
+        }
+      }
+      p {
+        margin-top: 3px;
+        line-height: 14px;
+        font-size: 14px;
+        letter-spacing: -0.015em;
+        color: ${GlobalColors.s4};
+        font-family: ${FontFamily.AvenirNext};
+        font-style: normal;
+        font-weight: normal;
+      }
+    }
+  }
+`;

package/src/components/atoms/Notification/Notification.stories.js

@@ -0,0 +1,16 @@
+import { Notification } from "./index";
+import profileImg from "../../../assets/images/defaultImages/defaultProfileImage.svg";
+
+export default {
+  title: "Components/atoms/Notification",
+  component: Notification,
+};
+
+const Template = (args) => <Notification {...args} />;
+export const NotificationDefault = Template.bind({});
+
+NotificationDefault.args = {
+  profilePicture: profileImg,
+  notification: "ODT 23441244",
+  newNotification: true,
+};

package/src/components/atoms/Notification/index.js

@@ -0,0 +1,20 @@
+import { Container } from "./styles";
+import { Avatar } from "../../atoms/Avatar/index";
+
+export const Notification = ({
+  profilePicture,
+  notification,
+  newNotification,
+}) => {
+  return (
+    <Container className={newNotification && "new-notification"}>
+      <Avatar
+        image={profilePicture}
+        imageType={"profile-image"}
+        altText={"Profile Picture"}
+      />
+      <p >{newNotification ? "Notificación nueva" : "Notificación vista"}</p>
+      {notification?<p className="bolder">{notification}</p>:"ODT 23441244"}
+    </Container>
+  );
+};

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

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.button`
+  background-color: #f9f9fc;
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 5px;
+  width: 360px;
+  height: auto;
+  border: none;
+  &.new-notification {
+    border: 1px solid #ff009a;
+  }
+  .profile-image {
+    & + * {
+      margin-left: 10px;
+    }
+  }
+  p {
+    font-family: ${FontFamily.AvenirNext};
+    color: #342b3f;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 18px;
+    letter-spacing: -0.015em;
+    & + * {
+      margin-left: 4px;
+    }
+  }
+  .bolder {
+    font-weight: 900;
+    max-width: 185px;
+    max-height: 40px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;

package/src/components/atoms/Percent/Percent.stories.js

@@ -0,0 +1,38 @@
+import { Percent } from "./index";
+
+const status = [
+  "-",
+  "Pr",
+  "Rc",
+  "As",
+  "P",
+  "QF",
+  "AF",
+  "AA",
+  "AP",
+  "AC",
+  "RA",
+  "RF",
+  "RP",
+  "RC",
+  "Ex",
+];
+
+export default {
+  title: "Components/atoms/Percent",
+  component: Percent,
+  argTypes: {
+    statusType: {
+      options: status,
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <Percent {...args}/>;
+
+export const PercentDefault = Template.bind ({});
+
+PercentDefault.args = {
+  statusType: "-",
+};

package/src/components/atoms/Percent/index.js

@@ -0,0 +1,15 @@
+import { Container } from "./styles";
+import polygon from "../../../assets/images/arrow/polygon.svg";
+
+export const Percent = ({ statusType }) => {
+  return (
+    <Container className={`status-${statusType}`}>
+      <p className="text">Productos en proceso</p>
+      <div className="percent-text">
+        <p className="number">20</p>
+        <img src={polygon} alt=""/>
+        <span className="span">1%</span>
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,79 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  border-radius: 7px;
+  width: 97px;
+  height: 83px;
+  text-align: center;
+  padding: 15px;
+
+  &.status-Pr,
+  &.status-Rc {
+    border: 1px solid ${GlobalColors.reception};
+    .span {
+      color: ${GlobalColors.reception};
+    }
+  }
+  &.status-- {
+    border: 1px solid ${GlobalColors.s3};
+    .span {
+      color: ${GlobalColors.s3};
+    }
+  }
+
+  &.status-As,
+  &.status-P,
+  &.status-QF {
+    border: 1px solid ${GlobalColors.in_progress};
+    .span {
+      color: ${GlobalColors.in_progress};
+    }
+  }
+
+  &.status-AF,
+  &.status-AA,
+  &.status-AP,
+  &.status-AC {
+    border: 1px solid ${GlobalColors.finished};
+    .span {
+      color: ${GlobalColors.finished};
+    }
+  }
+
+  &.status-RA,
+  &.status-RF,
+  &.status-RP,
+  &.status-RC {
+    border: 1px solid #d74ded;
+    .span {
+      color: #d74ded;
+    }
+  }
+
+  &.status-Ex {
+    border: 1px solid ${GlobalColors.exported};
+    .span {
+      color: ${GlobalColors.exported};
+    }
+  }
+
+  .text {
+    color: ${GlobalColors.s4};
+    font-size: 12px;
+    font-family: ${FontFamily.Raleway};
+    line-height: 14px;
+  }
+  .percent-text {
+    display: flex;
+    .number {
+      font-family: ${FontFamily.AvenirNext};
+      font-size: 28px;
+      color: ${GlobalColors.s4};
+    }
+    .span{
+    padding-top: 8px;
+    font-size: 18px;
+    }
+  }
+`;

package/src/components/atoms/PriorityFlag/index.js

@@ -6,7 +6,7 @@ import low from "../../../assets/images/flags/lowPriority.svg";
 
 export const PriorityFlag = ({ priority }) => {
   const PriorityFlags = {
-    ["no priority"]: without,
+    ["none"]: without,
     ["low"]: low,
     ["medium"]: medium,
     ["high"]: high,

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

@@ -4,7 +4,7 @@ export const Container = styled.div`
   width: fit-content;
 
   img {
-    object-fit: cover;
+    object-fit: contain;
   }
 
   &.carousel-image {

package/src/components/atoms/ProgressBar/index.js

@@ -1,8 +1,8 @@
 import { Container } from "./styles";
 
-export const ProgressBar = ({ percent, backgroundColor }) => {
+export const ProgressBar = ({ percent, progressBarType }) => {
   return (
-    <Container backgroundColor={backgroundColor}>
+    <Container className={`status-${progressBarType}`}>
       <p>{percent}%</p>
     </Container>
   );

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

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-  background-color: ${(props) => GlobalColors[props.backgroundColor]};
+  background-color: ${GlobalColors.s3};
   width: fit-content;
   height: 27px;
   padding: 4px;
@@ -11,8 +11,58 @@ export const Container = styled.div`
   font-weight: 600;
   font-size: 14px;
   line-height: 19px;
-  color: ${(props) =>
-    props.backgroundColor === "s2" || props.backgroundColor === "s1"
+  color: ${(backgroundColor) =>
+    backgroundColor === "s2" || backgroundColor === "s1"
       ? GlobalColors.s4
       : GlobalColors.white};
+
+  &.status-As,
+  &.status-P {
+    background-color: ${GlobalColors.in_progress};
+  }
+
+  &.status-Pr,
+  &.status-Rr {
+    background-color: ${GlobalColors.reception};
+  }
+
+  &.status-AA,
+  &.status-AP,
+  &.status-AC {
+    background-color: ${GlobalColors.finished};
+  }
+
+  &.status-RA,
+  &.status-RF,
+  &.status-RP,
+  &.status-RC {
+    background-color: ${GlobalColors.rejected_status};
+  }
+
+  &.status-Dat,
+  &.status-Dsc,
+  &.status-Imgs {
+    background-color: ${GlobalColors.s4};
+  }
+
+  &.status-Ex {
+    background-color: ${GlobalColors.exported};
+  }
+
+  &.status-DDI {
+    background-color: ${GlobalColors.original_purpura};
+  }
+
+  &.status-GLD {
+    background-color: ${GlobalColors.in_progress};
+  }
+
+  &.status-TAB {
+    background-color: ${GlobalColors.deep_gray};
+  }
+
+  &.status-Pt {
+    background-color: ${GlobalColors.s2};
+    color: ${GlobalColors.s4};
+  }
 `;

package/src/components/atoms/ScreenHeader/ScreenHeader.stories.js

@@ -13,6 +13,7 @@ export default {
         "retailer-name-header",
         "input-name-header",
         "date-header",
+        "header-and-paragraph",
       ],
       control: { type: "select" },
     },
@@ -42,3 +43,11 @@ ScreenHeaderDate.args = {
   text: "00/00/00",
   headerType: "date-header",
 };
+
+export const ScreenHeaderAndParagraph = Template.bind({});
+
+ScreenHeaderAndParagraph.args = {
+  text: "Primer texto antes del span//",
+  boldText: "se puede cambiar el color de este texto con span",
+  Paragraph: "Aquí se incerta el parrafo en general y su etiqueta es p"
+};

package/src/components/atoms/ScreenHeader/index.js

@@ -7,10 +7,13 @@ export const ScreenHeader = ({
   fontFamily,
   color,
   headerType,
+  Paragraph,
+
 }) => {
   return (
-    <Container fontFamily={fontFamily} color={color} className={headerType}>
+    <Container fontFamily={fontFamily} color={color} className={headerType} key={`title-${text}`}>
       {text} {boldText && <span> {boldText}</span>}
+      {<p>{Paragraph}</p>}
     </Container>
   );
 };

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

@@ -21,26 +21,26 @@ export const Container = styled.h2`
     line-height: 36px;
     font-weight: 500;
     letter-spacing: -0.015em;
-    color: ${({color})=>color?color:GlobalColors.secondary_magenta};
+    color: ${({ color }) => (color ? color : GlobalColors.secondary_magenta)};
   }
 
   &.retailer-name-header {
     font-size: 18px;
     font-weight: 400;
     line-height: 19px;
-    color: ${GlobalColors.s5};
+    color: ${({ color }) => (color ? color : GlobalColors.s5)};
   }
 
   &.input-name-header {
     font-size: 14px;
     line-height: 19px;
     font-weight: 400;
-    color: ${GlobalColors.s5};
+    color: ${({ color }) => (color ? color : GlobalColors.s5)};
   }
 
   &.date-header {
     font-family: ${FontFamily.AvenirNext};
-    color: ${GlobalColors.s4};
+    color: ${({ color }) => (color ? color : GlobalColors.s4)};
     font-size: 13px;
     font-weight: 400;
     line-height: 18px;
@@ -48,7 +48,7 @@ export const Container = styled.h2`
 
   &.table-row-text {
     font-family: ${FontFamily.AvenirNext};
-    color: ${GlobalColors.s4};
+    color: ${({ color }) => (color ? color : GlobalColors.s4)};
     font-weight: 400;
     font-size: 11px;
     line-height: 18px;
@@ -59,9 +59,20 @@ export const Container = styled.h2`
     font-weight: 400;
     font-size: 11px;
     line-height: 19px;
-    color: ${GlobalColors.s5};
+    color: ${({ color }) => (color ? color : GlobalColors.s5)};
     background-color: ${GlobalColors.s2};
     padding: 1px 3px;
     border-radius: 3px;
   }
+  &.header-and-paragraph{
+    font-family: ${FontFamily.Raleway};
+    font-size: 36px;
+    color: ${GlobalColors.s5};
+    p{
+      font-family: ${FontFamily.AvenirNext};
+      font-size: 14px;
+      color: ${GlobalColors.s4};
+      letter-spacing: -0.015em;
+    }
+  }
 `;