contentoh-components-library 21.0.11 → 21.0.12

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

@@ -1,35 +0,0 @@
-import { SelectCustom, Container, BackgroundEnd } from "./style";
-
-export default function Select(props) {
-  return (
-    <Container width={props.width}>
-      <SelectCustom
-        id={props.id}
-        width={props.width}
-        onChange={props.onChange}
-        defaultValue={props.valueSelected ? props.valueSelected : ""}
-      >
-        <option value="" disabled>
-          {props.placeholder}
-        </option>
-        {props.options &&
-          props.options.map((item, i) => (
-            <option
-              className={item.required ? "option-required" : ""}
-              //className={ ? "option-required" : ""}
-              key={"select-" + item.value ? item.value : item + "-" + i}
-              value={item.value ? item.value : item}
-              // selected={
-              //   item.value
-              //     ? item.value == props.valueSelected && "selected"
-              //     : item === props.valueSelected && "selected"
-              // }
-            >
-              {item.name ? item.name : item} {item?.required ? "*" : ""}
-            </option>
-          ))}
-      </SelectCustom>
-      <BackgroundEnd />
-    </Container>
-  );
-}

package/src/components/atoms/Select/style.js

@@ -1,76 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  height: 21px;
-  line-height: 3;
-  width: ${({ width }) => width || "100%"};
-  overflow: hidden;
-  border-radius: 0.25em;
-  &::after {
-    border-left: 1px solid #e33aa9;
-    border-top: 1px solid #e33aa9;
-    width: 4px;
-    content: "";
-    height: 4px;
-    position: absolute;
-    right: 7px;
-    -webkit-transform: rotate(-135deg);
-    -ms-transform: rotate(-135deg);
-    transform: rotate(-135deg);
-    top: 35%;
-  }
-  &::before {
-    border-left: 1px solid #e33aa9;
-    width: 1px;
-    content: "";
-    height: 15px;
-    right: 15px;
-    position: absolute;
-    z-index: 2;
-  }
-`;
-
-export const BackgroundEnd = styled.div`
-  position: absolute;
-  left: calc(100% - 18px);
-  height: 100%;
-  width: 18px;
-  background-color: #fafafa;
-`;
-
-export const SelectCustom = styled.select`
-  background: #fafafa;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  outline: 0;
-  box-shadow: none;
-  border: 0 !important;
-  background-image: none;
-  width: ${({ width }) => width || "100%"};
-  cursor: pointer;
-  height: 21px;
-  font-family: Avenir Next;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  line-height: 21px;
-  padding: 0 5px;
-  box-sizing: border-box;
-  &::-ms-expand {
-    display: none;
-  }
-  option {
-    &:disabled {
-      color: #d4d1d7;
-    }
-    &:invalid {
-      color: gray;
-    }
-  }
-`;

package/src/components/molecules/RetailerSelector/RetailerSelector.stories.js

@@ -1,35 +0,0 @@
-import { RetailerSelector } from "./index";
-
-export default {
-  title: "Components/molecules/RetailerSelector",
-  component: RetailerSelector,
-};
-
-const Template = (args) => <RetailerSelector {...args} />;
-
-export const RetailerSelectorDefault = Template.bind({});
-RetailerSelectorDefault.args = {
-  retailers: [
-    {
-      id: 2,
-      name: "Walmart Mercancías Generales",
-      country: "México",
-      id_region: 1,
-      active: 1,
-    },
-    {
-      id: 3,
-      name: "Sam´s Club",
-      country: "México",
-      id_region: 1,
-      active: 1,
-    },
-    {
-      id: 14,
-      name: "Maskota y Petsy",
-      country: "México",
-      id_region: 1,
-      active: 1,
-    },
-  ],
-};

package/src/components/molecules/RetailerSelector/index.js

@@ -1,63 +0,0 @@
-import { Container } from "./styles";
-import { Avatar } from "../../atoms/Avatar";
-import { useEffect, useState } from "react";
-import { AsignationOption } from "../../atoms/AsignationOption";
-
-export const RetailerSelector = ({
-  retailers,
-  activeRetailer,
-  setActiveRetailer,
-}) => {
-  const [retailersPanel, setRetailersPanel] = useState(false);
-
-  const closeRetailersPanel = (e) => {
-    if (!e.target.closest("#retailers-assignation") && retailersPanel) {
-      document.removeEventListener("click", closeRetailersPanel, false);
-      setRetailersPanel(false);
-    }
-  };
-
-  useEffect(() => {
-    if (retailersPanel) {
-      document.addEventListener("click", closeRetailersPanel, false);
-    }
-  }, [retailersPanel]);
-
-  return (
-    <Container id="retailers-assignation">
-      <Avatar
-        image={activeRetailer?.image}
-        altText={activeRetailer?.name}
-        imageType={"medium-image"}
-        onClick={() => {
-          retailers.length > 1 && setRetailersPanel(!retailersPanel);
-          if (retailersPanel)
-            document.removeEventListener("click", closeRetailersPanel, false);
-        }}
-      />
-      {retailersPanel && (
-        <div className="retailers-panel">
-          {retailers.map((retailer, index) => (
-            <AsignationOption
-              key={`${index}-${retailer?.name}`}
-              profileImage={retailer?.image}
-              imageType={"medium-image"}
-              asignationType={null}
-              name={retailer?.name}
-              team={retailer?.team}
-              onClick={() => {
-                setActiveRetailer(retailer);
-                document.removeEventListener(
-                  "click",
-                  closeRetailersPanel,
-                  false
-                );
-                setRetailersPanel(false);
-              }}
-            />
-          ))}
-        </div>
-      )}
-    </Container>
-  );
-};

package/src/components/molecules/RetailerSelector/styles.js

@@ -1,18 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  position: relative;
-  .retailers-panel {
-    background: ${GlobalColors.s2};
-    border: 1px solid ${GlobalColors.s3};
-    box-sizing: border-box;
-    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
-    border-radius: 4px;
-    padding: 10px;
-    position: absolute;
-    top: calc(100% + 10px);
-    right: 0;
-    z-index: 10;
-  }
-`;