contentoh-components-library 21.5.34 → 21.5.36

package/src/components/atoms/AsignationOption/AsignationOptions.stories.js

@@ -1,20 +1,20 @@
-import { AsignationOption } from "./index";
-
-export default {
-  title: "Components/atoms/AsignationOptions",
-  component: AsignationOption,
-};
-
-const Template = (args) => <AsignationOption {...args} />;
-
-export const AsignationOptionDefault = Template.bind({});
-AsignationOptionDefault.args = {
-  profileImage:
-    "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
-  asignationType: "assigned",
-  name: "Solicitar a",
-  team: "Content-oh!",
-  onClick: () => {
-    console.log("hola mundo");
-  },
-};
+import { AsignationOption } from "./index";
+
+export default {
+  title: "Components/atoms/AsignationOptions",
+  component: AsignationOption,
+};
+
+const Template = (args) => <AsignationOption {...args} />;
+
+export const AsignationOptionDefault = Template.bind({});
+AsignationOptionDefault.args = {
+  profileImage:
+    "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+  asignationType: "assigned",
+  name: "Solicitar a",
+  team: "Content-oh!",
+  onClick: () => {
+    console.log("hola mundo");
+  },
+};

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

@@ -1,60 +1,60 @@
-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";
-import { getNewStatus } from "../../../global-files/data";
-import { Status } from "../../atoms/Status";
-
-export const AsignationOption = ({
-  profileImage,
-  asignationType = "available",
-  imageType = "profile-image",
-  name,
-  team,
-  onClick,
-  btnOnClick,
-  active,
-  services,
-}) => {
-  const getStatus = () => {
-    let servCad = "";
-    services.forEach((srv) => (servCad += srv));
-
-    return getNewStatus(services);
-  };
-
-  const iconsAsignation = {
-    assigned: (
-      <button onClick={btnOnClick}>
-        <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 onClick={onClick}>
-      <Avatar
-        imageType={imageType}
-        image={profileImage}
-        altText={"profile image"}
-      />
-      <div className="labels-container">
-        <p className="name-label">{name}</p>
-        <p className="team-label">{team}</p>
-      </div>
-      {asignationType && iconsAsignation[asignationType]}
-      {services && (
-        <div className="status-container">
-          <Status statusType={getStatus()} />
-        </div>
-      )}
-      {active && <div className="green-circle"></div>}
-    </Container>
-  );
-};
+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";
+import { getNewStatus } from "../../../global-files/data";
+import { Status } from "../../atoms/Status";
+
+export const AsignationOption = ({
+  profileImage,
+  asignationType = "available",
+  imageType = "profile-image",
+  name,
+  team,
+  onClick,
+  btnOnClick,
+  active,
+  services,
+}) => {
+  const getStatus = () => {
+    let servCad = "";
+    services.forEach((srv) => (servCad += srv));
+
+    return getNewStatus(services);
+  };
+
+  const iconsAsignation = {
+    assigned: (
+      <button onClick={btnOnClick}>
+        <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 onClick={onClick}>
+      <Avatar
+        imageType={imageType}
+        image={profileImage}
+        altText={"profile image"}
+      />
+      <div className="labels-container">
+        <p className="name-label">{name}</p>
+        <p className="team-label">{team}</p>
+      </div>
+      {asignationType && iconsAsignation[asignationType]}
+      {services && (
+        <div className="status-container">
+          <Status statusType={getStatus()} />
+        </div>
+      )}
+      {active && <div className="green-circle"></div>}
+    </Container>
+  );
+};

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

@@ -1,69 +1,69 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  border-radius: 3px;
-  padding: 5px;
-
-  .profile-image,
-  .medium-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;
-    }
-  }
-
-  .status-container {
-    & + * {
-      margin-left: 10px;
-    }
-  }
-
-  .green-circle {
-    background-color: ${GlobalColors.exported};
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-  }
-
-  button {
-    background-color: transparent;
-    cursor: pointer;
-    border: none;
-  }
-
-  &:hover {
-    background-color: ${GlobalColors.s3};
-  }
-
-  & + * {
-    margin-top: 10px;
-  }
-`;
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  border-radius: 3px;
+  padding: 5px;
+
+  .profile-image,
+  .medium-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;
+    }
+  }
+
+  .status-container {
+    & + * {
+      margin-left: 10px;
+    }
+  }
+
+  .green-circle {
+    background-color: ${GlobalColors.exported};
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+  }
+
+  button {
+    background-color: transparent;
+    cursor: pointer;
+    border: none;
+  }
+
+  &:hover {
+    background-color: ${GlobalColors.s3};
+  }
+
+  & + * {
+    margin-top: 10px;
+  }
+`;

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

@@ -1,16 +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",
-  ],
+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

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

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

@@ -1,18 +1,18 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-export const Container = styled.div`
-
-  display: flex;
-  background-color: transparent;
-  justify-content:center ;
-
-  .listaGeneral {
-    color: ${GlobalColors.white};
-    font-family: ${FontFamily.Raleway};
-    font-style: normal;
-    font-weight: 500;
-    font-size: 18px;
-    line-height: 40px;
-    text-align: left;
-  }
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+export const Container = styled.div`
+
+  display: flex;
+  background-color: transparent;
+  justify-content:center ;
+
+  .listaGeneral {
+    color: ${GlobalColors.white};
+    font-family: ${FontFamily.Raleway};
+    font-style: normal;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 40px;
+    text-align: left;
+  }
 `;

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

@@ -1,27 +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",
-};
+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

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

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

@@ -1,34 +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;
-  }
-`;
+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/Button/index.js

@@ -1,16 +1,16 @@
-import { MainContainer } from "./styles";
-
-export default function Button(props) {
-  return (
-    <MainContainer
-      type="button"
-      typeButton={props.type}
-      onClick={(e) => {
-        e.stopPropagation();
-        props.onClick && props.onClick(e);
-      }}
-    >
-      {props.children}
-    </MainContainer>
-  );
-}
+import { MainContainer } from "./styles";
+
+export default function Button(props) {
+  return (
+    <MainContainer
+      type="button"
+      typeButton={props.type}
+      onClick={(e) => {
+        e.stopPropagation();
+        props.onClick && props.onClick(e);
+      }}
+    >
+      {props.children}
+    </MainContainer>
+  );
+}