contentoh-components-library 0.1.1

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

@@ -0,0 +1,41 @@
+import { Container } from "./styles";
+import { Avatar } from "../Avatar";
+
+import removeAsigned from "../../../assets/images/asignationOptions/removeAsigned.svg";
+import requesToProvider from "../../../assets/images/asignationOptions/requestToProvider.svg";
+import requestToTeam from "../../../assets/images/asignationOptions/requestToTeam.svg";
+import availableIcon from "../../../assets/images/asignationOptions/availableIcon.svg";
+
+export const AsignationOption = ({
+  profileImage,
+  asignationType = "available",
+  name,
+  team,
+  onClick,
+}) => {
+  const iconsAsignation = {
+    assigned: (
+      <button onClick={onClick}>
+        <img src={removeAsigned} alt="remove asigned" />
+      </button>
+    ),
+    provider: <img src={requesToProvider} alt="Solicitar a Proveedor" />,
+    team: <img src={requestToTeam} alt="Solicitar a Team" />,
+    available: <img src={availableIcon} alt="green circle icon" />,
+  };
+
+  return (
+    <Container>
+      <Avatar
+        imageType={"profile-image"}
+        image={profileImage?.image}
+        altText={"profile image"}
+      />
+      <div className="labels-container">
+        <p className="name-label">{name}</p>
+        <p className="team-label">{team}</p>
+      </div>
+      {iconsAsignation[asignationType]}
+    </Container>
+  );
+};

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

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  width: fit-content;
+  align-items: center;
+
+  .profile-image {
+    & + * {
+      margin-left: 15px;
+    }
+  }
+
+  .labels-container {
+    font-family: ${FontFamily.AvenirNext};
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 16px;
+
+    .name-label,
+    .team-label {
+      inline-size: 100px;
+      overflow: hidden;
+    }
+
+    .name-label {
+      color: ${GlobalColors.s5};
+    }
+
+    .team-label {
+      color: ${GlobalColors.s4};
+    }
+
+    & + * {
+      margin-left: 11px;
+    }
+  }
+
+  button {
+    background-color: transparent;
+    cursor: pointer;
+    border: none;
+  }
+
+  & + * {
+    margin-top: 10px;
+  }
+`;

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

@@ -0,0 +1,16 @@
+import { AtomList } from "./index";
+
+export default {
+  title: "Components/atoms/AtomList",
+  component: AtomList,
+};
+
+const Template = (args) => <AtomList {...args} />;
+
+export const AtomListDefault = Template.bind({});
+AtomListDefault.args = {
+  content: [
+    "Crea proveedores y agregalos a tu cadena",
+    "Solicita actualización a proveedores",
+  ],
+};

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

@@ -0,0 +1,13 @@
+import { Container } from "./styles";
+
+export const AtomList = ({ content }) => {
+  return (
+    <Container>
+      <ul className="listaGeneral">
+        {content.map((item, index) => (
+          <li key={index}>{item}</li>
+        ))}
+      </ul>
+    </Container>
+  );
+};

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

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+export const Container = styled.div`
+  display: flex;
+  background-color: transparent;
+  padding: 20px;
+  .listaGeneral {
+    color: ${GlobalColors.white};
+    font-family: ${FontFamily.Raleway};
+    font-style: normal;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 40px;
+    letter-spacing: -0.015em;
+  }
+`;

package/src/components/atoms/Avatar/AsignationImage.stories.js

@@ -0,0 +1,27 @@
+import { Avatar } from "./index";
+
+export default {
+  title: "Components/atoms/Avatar",
+  component: Avatar,
+  argTypes: {
+    imageType: {
+      options: [
+        "retailer-image",
+        "profile-image",
+        "big-image",
+        "medium-image",
+        "small-image",
+      ],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <Avatar {...args} />;
+
+export const AvatarDefault = Template.bind({});
+
+AvatarDefault.args = {
+  imageType: "small-size",
+  altText: "circular image",
+};

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

@@ -0,0 +1,15 @@
+import { Container } from "./styles";
+import ReactImageFallback from "react-image-fallback";
+import defaultProfile from "../../../assets/images/defaultImages/defaultProfileImage.svg";
+
+export const Avatar = ({ image, altText, imageType }) => {
+  return (
+    <Container className={imageType}>
+      <ReactImageFallback
+        src={image}
+        fallbackImage={defaultProfile}
+        alt={altText}
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+  }
+
+  &.medium-image {
+    width: 26px;
+    height: 26px;
+  }
+
+  &.big-image {
+    width: 30px;
+    height: 30px;
+  }
+
+  &.profile-image {
+    width: 40px;
+    height: 40px;
+  }
+
+  &.retailer-image {
+    width: 50px;
+    height: 50px;
+  }
+`;

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

@@ -0,0 +1,20 @@
+import { CheckBox } from "./index";
+
+export default {
+  title: "Components/atoms/CheckBox",
+  component: CheckBox,
+  argTypes: {
+    isFilter: {
+      options: [true, false],
+      type: "boolean",
+    },
+  },
+};
+
+const Template = (args) => <CheckBox {...args} />;
+
+export const CheckBoxDefault = Template.bind({});
+CheckBoxDefault.args = {
+  id: "chk-default",
+  label: "chk-default",
+};

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

@@ -0,0 +1,12 @@
+import { Container } from "./styles";
+
+export const CheckBox = ({ id, label, onChange, isFilter }) => {
+  return (
+    <Container>
+      <input type="checkbox" name={id} id={id} onChange={onChange} />
+      <label htmlFor={id}>
+        {label && <p className={isFilter && "filter-text"}>{label}</p>}
+      </label>
+    </Container>
+  );
+};

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

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+import checked from "../../../assets/images/checkBox/checked.svg";
+import unchecked from "../../../assets/images/checkBox/unchecked.svg";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  input {
+    display: none;
+
+    &:checked + label {
+      &:before {
+        background-color: ${GlobalColors.white};
+        background-image: url(${checked});
+      }
+    }
+  }
+
+  label {
+    position: relative;
+    min-height: 16px;
+    min-width: 16px;
+    display: inline-block;
+
+    p {
+      display: inline;
+      color: ${GlobalColors.s4};
+      font-family: ${FontFamily.AvenirNext};
+      font-weight: 500;
+      font-size: 13px;
+      line-height: 21px;
+      margin-left: 20px;
+
+      &.filter-text {
+        color: ${GlobalColors.magenta_s2};
+        font-size: 18px;
+        line-height: 24px;
+        margin-left: 23px;
+      }
+    }
+
+    &:before {
+      content: "";
+      width: 16px;
+      height: 16px;
+      position: absolute;
+      display: inline-block;
+      top: 50%;
+      transform: translateY(-50%);
+      background-image: url(${unchecked});
+    }
+  }
+`;

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

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

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

@@ -0,0 +1,14 @@
+import { Container } from "./styles";
+import Cadena from "../../../assets/images/providerAndCadena/Cadena.svg";
+import Proveedor from "../../../assets/images/providerAndCadena/Proveedor.svg";
+
+export const CustomerTypeImages = ({ imageType = "retailer" }) => {
+  return (
+    <Container imageType={imageType}>
+      <img
+        src={imageType === "retailer" ? Cadena : Proveedor}
+        alt={imageType === "retailer" ? "Cadena" : "Proveedor"}
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  background-color: transparent;
+
+  img {
+    width: ${({ imageType }) => (imageType === "retailer" ? 100 : 70)}%;
+    margin: auto;
+  }
+  & + * {
+    margin-top: 20px;
+  }
+`;

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

@@ -0,0 +1,20 @@
+import { DropDownButton } from "./index";
+
+export default {
+  title: "Components/atoms/DropDownButton",
+  component: DropDownButton,
+  argTypes: {
+    active: {
+      options: [true, false],
+      control: { type: "boolean" },
+    },
+  },
+};
+
+const Template = (args) => <DropDownButton {...args} />;
+
+export const DropDownButtonGeneral = Template.bind({});
+
+DropDownButtonGeneral.args = {
+  active: false,
+};

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

@@ -0,0 +1,10 @@
+import { Container } from "./styles";
+import dropDownArrowButton from "../../../assets/images/dropDownButton/dropDownArrowButton.svg";
+
+export const DropDownButton = ({ active }) => {
+  return (
+    <Container className={active && "active"}>
+      <img src={dropDownArrowButton} alt="V" />
+    </Container>
+  );
+};

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

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  height: 22px;
+  width: 10px;
+  border-left: 1px solid #342b3f;
+  padding-left: 3px;
+
+  img {
+    width: 7px;
+    vertical-align: middle;
+  }
+`;

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

@@ -0,0 +1,16 @@
+import { FeatureTag } from "./index";
+
+export default {
+  title: "Components/atoms/FeatureTag",
+  label: "Feature Tag",
+  component: FeatureTag,
+};
+
+const Template = (args) => <FeatureTag {...args} />;
+
+export const FeatureTagDefault = Template.bind({});
+
+FeatureTagDefault.args = {
+  feature: "Feature",
+  value: "Value",
+};

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

@@ -0,0 +1,10 @@
+import { Container } from "./styles";
+
+export const FeatureTag = ({ feature, value }) => {
+  return (
+    <Container>
+      <p className="feature-name">{feature}</p>
+      <p className="feature-value">{value}</p>
+    </Container>
+  );
+};

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

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import "../../../global-files/global-styles.css";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background-color: #f0eef2;
+  border-radius: 3px;
+  display: flex;
+  width: fit-content;
+  height: 26px;
+  padding: 5px;
+  align-items: center;
+
+  .feature-name {
+    font-size: 14px;
+    font-family: ${FontFamily.Raleway_500};
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 18px;
+    color: ${GlobalColors.original_magenta};
+
+    & + * {
+      margin-left: 5px;
+    }
+  }
+  .feature-value {
+    font-family: ${FontFamily.AvenirNext};
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    height: 12px;
+    letter-spacing: -0.015em;
+    color: ${GlobalColors.s4};
+  }
+`;

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

@@ -0,0 +1,73 @@
+import { Button } from "./index";
+import { FontFamily } from "../../../global-files/variables";
+
+export default {
+  title: "Components/atoms/Button",
+  label: "Button Default",
+  component: Button,
+  argTypes: {
+    buttonType: {
+      options: [
+        "general-default-button",
+        "general-green-button",
+        "general-white-button",
+        "general-purple-button",
+        "general-transparent-button",
+        "open-modal-button",
+        "close-button",
+        "circular-button accept-button",
+        "circular-button reject-button",
+        "circular-button null-button",
+        "grid-layout",
+        "row-layout",
+      ],
+      control: { type: "select" },
+    },
+    buttonFont: {
+      options: Object.values(FontFamily),
+      control: { type: "select" },
+    },
+    image: { control: { type: "file" } },
+  },
+};
+
+const Template = (args) => <Button {...args} />;
+
+export const GeneralButton = Template.bind({});
+
+GeneralButton.args = {
+  buttonType: "default-button",
+  label: "Button",
+  image: undefined,
+  altText: undefined,
+};
+
+// export const PurpleButton = Template.bind({});
+
+// PurpleButton.args = {
+//   title: "Purple Button",
+//   buttonType: "purple-button",
+//   label: "Purple Button",
+//   image: undefined,
+//   altText: undefined,
+// };
+
+// export const TransparentButton = Template.bind({});
+
+// TransparentButton.args = {
+//   title: "Transparent Button",
+//   buttonType: "transparent-button",
+//   label: "Transparent Button",
+//   image: undefined,
+//   altText: undefined,
+// };
+
+// export const GreenButton = Template.bind({});
+
+// GreenButton.args = {
+//   title: "Green Button",
+//   buttonType: "green-button",
+//   label: "Green Button",
+//   image: undefined,
+//   altText: undefined,
+// };

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

@@ -0,0 +1,22 @@
+import { Container } from "./styles";
+
+export const Button = ({
+  buttonType,
+  label,
+  image,
+  altText,
+  buttonFont,
+  onClick,
+}) => {
+  return (
+    <Container className={buttonType} buttonFont={buttonFont} onClick={onClick}>
+      {buttonType.includes("general") && label}
+      {image && <img src={image} alt={altText} />}
+    </Container>
+  );
+};
+
+Button.defaultProps = {
+  buttonType: "purple-button",
+  buttonFont: "Avenir Next",
+};

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

@@ -0,0 +1,110 @@
+import "../../../global-files/global-styles.css";
+import styled from "styled-components";
+import acceptIcon from "../../../assets/images/generalButton/acceptIcon.svg";
+import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
+import nullIcon from "../../../assets/images/generalButton/nullIcon.svg";
+import openModalIcon from "../../../assets/images/generalButton/openModal.svg";
+import closeIcon from "../../../assets/images/generalButton/closeIcon.svg";
+import rowsLayout from "../../../assets/images/generalButton/rowLayout.svg";
+import gridLayout from "../../../assets/images/generalButton/gridLayout.svg";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.button`
+  background-color: #e33aa9;
+  border: none;
+  border-radius: 30px;
+  color: #fff;
+  font-family: ${(props) => props.buttonFont};
+  font-style: normal;
+  font-weight: normal;
+  font-size: 18px;
+  line-height: 22px;
+  padding: 10px 25px;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &.general-purple-button {
+    background-color: #603888;
+  }
+
+  &.general-transparent-button {
+    background-color: transparent;
+    border: 1px solid #503d66;
+    color: #503d66;
+  }
+  &.general-white-button {
+    background-color: ${GlobalColors.s1};
+    color: ${GlobalColors.original_purpura}
+  }
+
+  &.general-green-button {
+    background-color: #71de56;
+  }
+
+  &.circular-button {
+    width: 25px;
+    height: 25px;
+    padding: 0;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  &.accept-button {
+    background-image: url(${acceptIcon});
+  }
+
+  &.reject-button {
+    background-image: url(${rejectIcon});
+  }
+
+  &.null-button {
+    background-image: url(${nullIcon});
+  }
+
+  &.close-button {
+    width: 52px;
+    height: 52px;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url(${closeIcon});
+  }
+
+  &.open-modal-button {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 21px;
+    height: 21px;
+    padding: 0;
+    border-radius: 0;
+    background-image: url(${openModalIcon});
+  }
+
+  &.grid-layout,
+  &.row-layout {
+    background-color: transparent;
+    background-repeat: no-repeat;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+  }
+
+  &.grid-layout {
+    background-image: url(${rowsLayout});
+  }
+
+  &.row-layout {
+    background-image: url(${gridLayout});
+  }
+`;