contentoh-components-library 0.1.1

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

@@ -0,0 +1,33 @@
+import { GeneralInput } from "./index";
+
+export default {
+  title: "Components/atoms/GeneralInput",
+  component: GeneralInput,
+  argTypes: {
+    inputType: {
+      options: ["text", "textarea"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <GeneralInput {...args} />;
+
+export const Input = Template.bind({});
+
+Input.args = {
+  inputId: "default-input",
+  inputType: "text",
+  inputPlaceholder: "placeholder text",
+};
+
+export const TextArea = Template.bind({});
+
+TextArea.args = {
+  inputType: "textarea",
+  inputId: "default-input",
+  inputCols: "50",
+  inputRows: "5",
+  inputName: "text-area-name",
+  inputPlaceholder: "textarea placeholder",
+};

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

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { Container } from "./styles";
+
+export const GeneralInput = ({
+  inputType,
+  inputId,
+  inputCols,
+  inputRows,
+  inputName,
+  inputValue,
+  inputPlaceholder,
+}) => {
+  const [textValue, setTextValue] = useState({ value: inputValue });
+
+  const onHandleChange = (e) => {
+    setTextValue(({ value }) => (value = e.target.value));
+  };
+
+  return (
+    <Container>
+      {inputType === "text" ? (
+        <input
+          type="text"
+          id={inputId}
+          className="general-input"
+          placeholder={inputPlaceholder}
+          value={textValue.value}
+          onChange={onHandleChange}
+        />
+      ) : (
+        <textarea
+          name={inputName}
+          id={inputId}
+          cols={inputCols}
+          rows={inputRows}
+          placeholder={inputPlaceholder}
+          value={textValue.value}
+          onChange={onHandleChange}
+        ></textarea>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 100%;
+
+  input,
+  textarea {
+    width: 100%;
+    border: 1px solid ${GlobalColors.s2};
+    font-family: ${FontFamily.AvenirNext};
+    color: ${GlobalColors.s4};
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 15px;
+    padding: 10px;
+    outline: none;
+    border-radius: 2px;
+
+    &:focus {
+      border: 1px solid ${GlobalColors.magenta_s2};
+    }
+  }
+`;

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

@@ -0,0 +1,14 @@
+import { GeneralTextBox } from "./index";
+
+export default {
+    title: "Components/atoms/GeneralTextBox",
+    component: GeneralTextBox,
+};
+
+const Template = (args) => <GeneralTextBox {...args} />;
+
+export const GeneralTextBoxDefault = Template.bind({});
+GeneralTextBoxDefault.args = {
+    name: "Proveedores",
+    number: "1500",
+};

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

@@ -0,0 +1,9 @@
+import { Container } from "./styles";
+
+export const GeneralTextBox = ({  number, name, onClick, className }) => {
+    return (<Container className={className} onClick={onClick}>
+            <p className="number-text">{number}</p>
+            <p className="name-text">{name}</p>
+    </Container>
+    );
+};

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

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.button`
+    display: flex;
+    flex-wrap: wrap;
+    border: 1px solid ${GlobalColors.s3};
+    border-radius: 10px;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    background-color: transparent;
+    .number-text{
+        color: ${GlobalColors.original_purpura}; 
+        font-family: ${FontFamily.Raleway};
+        font-style: normal;
+        font-weight: normal;
+        font-size: 36px;
+        line-height: 42px;
+        font-feature-settings: 'pnum' on, 'lnum' on;
+    }
+    .name-text{
+        color: ${GlobalColors.s4};
+        font-family: ${FontFamily.Raleway};
+        font-style: normal;
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 21px;
+    }
+    &:hover{ 
+        border: 2px solid ${GlobalColors.magenta_s2};
+    }
+    &.active{
+        border: 1px solid ${GlobalColors.magenta_s2};
+    }
+`;

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

@@ -0,0 +1,27 @@
+import { GradientPanel } from "./index";
+import { ScreenHeader } from "../../atoms/ScreenHeader/index";
+import { CustomerTypeImages } from "../../atoms/CustomerTypeImage/index";
+import { Button } from "../../atoms/GeneralButton/index";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export default {
+  title: "Components/atoms/GradientPanel",
+  component: GradientPanel,
+};
+
+const Template = (args) => <GradientPanel {...args} />;
+
+export const GradientPanelDefault = Template.bind({});
+GradientPanelDefault.args = {
+  componentsArray: [
+    <ScreenHeader
+      fontFamily={FontFamily.Raleway_600}
+      color={GlobalColors.white}
+      text={"Cadena"}
+    />,
+    <CustomerTypeImages />,
+    <p>Elige esta opción si eres una Cadena Retailer.</p>,
+  <Button buttonType={"general-white-button"} label={"Seleccionar"} />,
+  ],
+  panelType: "home-panel",
+};

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

@@ -0,0 +1,13 @@
+import { Container } from "./styles";
+
+export const GradientPanel = ({
+  panelColor,
+  componentsArray = [],
+  panelType,
+}) => {
+  return (
+    <Container panelColor={panelColor} className={panelType}>
+      {componentsArray.map((component) => component)}
+    </Container>
+  );
+};

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

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background: ${({ panelColor }) =>
+    panelColor
+      ? panelColor
+      : "linear-gradient(180deg, #E33AA9 0%, #3B1366 100%)"};
+  height: 100%;
+
+  
+  &.home-panel {
+    
+    text-align: center;
+    padding: 80px;
+    h2 {
+      & + * {
+        margin-top: 5px;
+      }
+    }
+    p{
+      font-family:${FontFamily.AvenirNext};
+      color: ${({panelColor})=> panelColor? GlobalColors.s4 :"#FBFBFB"};
+      & + * {
+        margin-top: 20px;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,20 @@
+import { PriorityFlag } from "./index";
+
+export default {
+  title: "Components/atoms/PriorityFlag",
+  component: PriorityFlag,
+  argTypes: {
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <PriorityFlag {...args} />;
+
+export const PriorityFlagDefault = Template.bind({});
+
+PriorityFlagDefault.args = {
+  priority: "no priority",
+};

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

@@ -0,0 +1,20 @@
+import { Container } from "./styles";
+import without from "../../../assets/images/flags/noPriority.svg";
+import high from "../../../assets/images/flags/highPriority.svg";
+import medium from "../../../assets/images/flags/mediumPriority.svg";
+import low from "../../../assets/images/flags/lowPriority.svg";
+
+export const PriorityFlag = ({ priority }) => {
+  const PriorityFlags = {
+    ["no priority"]: without,
+    ["low"]: low,
+    ["medium"]: medium,
+    ["high"]: high,
+  };
+
+  return (
+    <Container>
+      <img src={PriorityFlags[priority]} alt={priority} />
+    </Container>
+  );
+};

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

@@ -0,0 +1,3 @@
+import styled from "styled-components";
+
+export const Container = styled.div``;

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

@@ -0,0 +1,28 @@
+import { ProductImage } from ".";
+
+export default {
+  title: "Components/atoms/ProductImage",
+  component: ProductImage,
+  argTypes: {
+    imageType: {
+      options: [
+        "main-image",
+        "carousel-image",
+        "catalogue-image-big-size",
+        "catalogue-image-small-size",
+        "catalogue-modal-image",
+        "expanded-modal-image",
+      ],
+      control: { type: "select" },
+    },
+  },
+};
+
+export const Template = (args) => <ProductImage {...args} />;
+
+const ProductImageDefault = Template.bind({});
+
+ProductImageDefault.args = {
+  imageType: "main-image",
+  altText: "default image",
+};

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

@@ -0,0 +1,16 @@
+import { Container } from "./styles";
+import ReactImageFallback from "react-image-fallback";
+import defaultProductImage from "../../../assets/images/defaultImages/defaultProductImage.png";
+
+export const ProductImage = ({ img, imageType, altText, onClick }) => {
+  return (
+    <Container className={imageType}>
+      <ReactImageFallback
+        src={img}
+        fallbackImage={defaultProductImage}
+        alt={altText}
+        onClick={onClick}
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,62 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: fit-content;
+
+  img {
+    object-fit: cover;
+  }
+
+  &.carousel-image {
+    img {
+      width: 85px;
+      height: 55px;
+      cursor: pointer;
+    }
+
+    & + * {
+      margin-left: 1px;
+    }
+  }
+
+  &.main-image {
+    img {
+      width: 340px;
+      height: 295px;
+    }
+  }
+
+  &.catalogue-image-big-size {
+    img {
+      width: 179px;
+      height: 179px;
+    }
+  }
+
+  &.catalogue-image-small-size {
+    img {
+      width: 60px;
+      height: 60px;
+    }
+  }
+
+  &.catalogue-modal-image {
+    flex: 1 0 50%;
+    cursor: pointer;
+
+    img {
+      width: 168px;
+      height: 108px;
+    }
+  }
+
+  &.expanded-modal-image {
+    width: 710px;
+    height: 710px;
+
+    img {
+      width: 710px;
+      height: 710px;
+    }
+  }
+`;

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

@@ -0,0 +1,25 @@
+import { ProgressBar } from ".";
+import { GlobalColors } from "../../../global-files/variables";
+
+export default {
+  title: "Components/atoms/ProgressBar",
+  component: ProgressBar,
+  argTypes: {
+    percent: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+    },
+    backgroundColor: {
+      options: Object.keys(GlobalColors),
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <ProgressBar {...args} />;
+
+export const ProgressBarDefault = Template.bind({});
+
+ProgressBarDefault.args = {
+  percent: 0,
+  backgroundColor: "s2",
+};

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

@@ -0,0 +1,9 @@
+import { Container } from "./styles";
+
+export const ProgressBar = ({ percent, backgroundColor }) => {
+  return (
+    <Container backgroundColor={backgroundColor}>
+      <p>{percent}%</p>
+    </Container>
+  );
+};

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

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background-color: ${(props) => GlobalColors[props.backgroundColor]};
+  width: fit-content;
+  height: 27px;
+  padding: 4px;
+  border-radius: 15px;
+  font-family: ${FontFamily.AvenirNext};
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: ${(props) =>
+    props.backgroundColor === "s2" || props.backgroundColor === "s1"
+      ? GlobalColors.s4
+      : GlobalColors.white};
+`;

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

@@ -0,0 +1,44 @@
+import { ScreenHeader } from ".";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export default {
+  title: "Components/atoms/ScreenHeader",
+  label: "Screen Header",
+  component: ScreenHeader,
+  argTypes: {
+    headerType: {
+      options: [
+        "with-bold-text",
+        "product-name-header",
+        "retailer-name-header",
+        "input-name-header",
+        "date-header",
+      ],
+      control: { type: "select" },
+    },
+    fontFamily: {
+      options: Object.values(FontFamily),
+      control: { type: "select" },
+    },
+    color: {
+      options: Object.values(GlobalColors),
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <ScreenHeader {...args} />;
+
+export const ScreenHeaderDefatult = Template.bind({});
+
+ScreenHeaderDefatult.args = {
+  text: "Header Text",
+  boldText: "this is the bold text",
+};
+
+export const ScreenHeaderDate = Template.bind({});
+
+ScreenHeaderDate.args = {
+  text: "00/00/00",
+  headerType: "date-header",
+};

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

@@ -0,0 +1,22 @@
+import { GlobalColors } from "../../../global-files/variables";
+import { Container } from "./styles";
+
+export const ScreenHeader = ({
+  text,
+  boldText,
+  fontFamily,
+  color,
+  headerType,
+}) => {
+  return (
+    <Container fontFamily={fontFamily} color={color} className={headerType}>
+      {text} {boldText && <span> {boldText}</span>}
+    </Container>
+  );
+};
+
+ScreenHeader.defaultProps = {
+  text: "Header Text Default",
+  fontFamily: "Raleway",
+  color: GlobalColors.s5,
+};

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

@@ -0,0 +1,67 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+import { FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.h2`
+  font-family: ${(props) => props.fontFamily};
+  font-style: normal;
+  font-size: 36px;
+  line-height: 42px;
+  font-feature-settings: "pnum" on, "lnum" on;
+  color: ${(props) => props.color};
+
+  &.with-bold-text {
+    span {
+      font-family: ${FontFamily.Raleway_700};
+    }
+  }
+
+  &.product-name-header {
+    font-size: 24px;
+    line-height: 36px;
+    font-weight: 500;
+    letter-spacing: -0.015em;
+    color: ${({color})=>color?color:GlobalColors.secondary_magenta};
+  }
+
+  &.retailer-name-header {
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 19px;
+    color: ${GlobalColors.s5};
+  }
+
+  &.input-name-header {
+    font-size: 14px;
+    line-height: 19px;
+    font-weight: 400;
+    color: ${GlobalColors.s5};
+  }
+
+  &.date-header {
+    font-family: ${FontFamily.AvenirNext};
+    color: ${GlobalColors.s4};
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+
+  &.table-row-text {
+    font-family: ${FontFamily.AvenirNext};
+    color: ${GlobalColors.s4};
+    font-weight: 400;
+    font-size: 11px;
+    line-height: 18px;
+  }
+
+  &.gray-table-row {
+    font-family: ${FontFamily.AvenirNext};
+    font-weight: 400;
+    font-size: 11px;
+    line-height: 19px;
+    color: ${GlobalColors.s5};
+    background-color: ${GlobalColors.s2};
+    padding: 1px 3px;
+    border-radius: 3px;
+  }
+`;

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

@@ -0,0 +1,16 @@
+import { SideMenuButton } from "./index";
+import dashboardIcon from "../../../assets/images/sideMenuButton/dashboard.svg";
+
+export default {
+  title: "Components/atoms/SideMenuButton",
+  compoment: SideMenuButton,
+};
+
+const Template = (args) => <SideMenuButton {...args} />;
+
+export const SideMenuButtonDefault = Template.bind({});
+SideMenuButtonDefault.args = {
+  image: dashboardIcon,
+  altText: "dashboard icon",
+  label: "Dashboard",
+};

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

@@ -0,0 +1,10 @@
+import { Container } from "./styles";
+
+export const SideMenuButton = ({ image, altText, label }) => {
+  return (
+    <Container>
+      {image && <img src={image} alt={altText} />}
+      <p>{label}</p>
+    </Container>
+  );
+};

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

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 170px;
+  height: 44px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 30px;
+
+  img {
+    & + p {
+      margin-left: 10px;
+    }
+  }
+
+  p {
+    font-family: ${FontFamily.Raleway_700};
+    font-size: 18px;
+    line-height: 21px;
+    color: #fcfcfc;
+  }
+
+  &:hover {
+    border: 1px solid ${GlobalColors.magenta_s2};
+  }
+`;

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

@@ -0,0 +1,28 @@
+import { StatusTag } from "./index";
+import { GlobalStatus } from "../../../global-files/variables";
+
+const status = GlobalStatus;
+
+export default {
+  title: "Components/atoms/StatusTag",
+  component: StatusTag,
+  argTypes: {
+    statusType: {
+      options: status,
+      control: { type: "select" },
+    },
+    ovalForm: {
+      options: [true, false],
+      control: { type: "boolean" },
+    },
+  },
+};
+
+const Template = (args) => <StatusTag {...args} />;
+
+export const StatusTagDefault = Template.bind({});
+
+StatusTagDefault.args = {
+  statusType: "-",
+  ovalForm: false,
+};

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

@@ -0,0 +1,9 @@
+import { Container } from "./styles";
+
+export const StatusTag = ({ statusType, ovalForm }) => {
+  return (
+    <Container className={`status-${statusType} ${ovalForm && "oval-form"}`}>
+      <p>{statusType}</p>
+    </Container>
+  );
+};