contentoh-components-library 21.2.93 → 21.2.95

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

@@ -0,0 +1,100 @@
+import { FontFamily } from "../../../global-files/variables";
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: fit-content;
+  max-width: ${({ maxWidthSelect }) =>
+    maxWidthSelect ? maxWidthSelect : "unset"};
+  //border: 1px solid red;
+  border-radius: ${({ borderType }) => {
+    return borderType?.toLowerCase() === "rectangle"
+      ? "6px"
+      : borderType?.toLowerCase() === "oval"
+      ? "17px"
+      : "0px"; // default none
+  }};
+`;
+
+export const ContainerSelect = styled.div`
+  width: 100%;
+  border-radius: inherit;
+
+  .buttonSelect {
+    width: 100%;
+    border-radius: inherit;
+
+    .button {
+      padding: 10px 16px;
+      gap: 10px;
+      .icon {
+        font-size: 13px;
+      }
+    }
+  }
+
+  + .MuiTooltip-popper {
+    background-color: transparent;
+
+    .dropdownSelect {
+      --background: white;
+      box-shadow: 0px 0px 10px 1px gray;
+      background-color: var(--background);
+      padding: 6px 0px;
+      border-radius: 7px;
+      display: flex;
+      flex-direction: column;
+      gap: 0px;
+      max-width: ${({ maxWidthDropdown }) =>
+        maxWidthDropdown ? maxWidthDropdown : "400px"};
+      max-height: ${({ maxHeightDropdown }) =>
+        maxHeightDropdown ? maxHeightDropdown : "80vh"};
+
+      .container-inputSearch {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        gap: 0px;
+        padding: 0px 10px 8px 10px;
+        border-bottom: 1px solid #f0f0f0;
+
+        .inputSearch {
+          padding-left: 8px;
+          flex-grow: 2;
+        }
+      }
+
+      .selectItemV2 {
+        width: 100%;
+      }
+
+      .container-items {
+        flex-grow: 2;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: ${({ alignmentItemsOverflow }) =>
+          alignmentItemsOverflow === "columns" ? "wrap" : "nowrap"};
+        overflow: auto;
+
+        .selectItemV2 {
+          width: ${({ maxWidthItems }) =>
+            maxWidthItems ? maxWidthItems : "100%"};
+        }
+      }
+    }
+
+    &[data-popper-placement*="bottom"] .dropdownSelect {
+      margin-top: 10px;
+    }
+    &[data-popper-placement*="top"] .dropdownSelect {
+      margin-bottom: 10px;
+    }
+    &[data-popper-placement*="left"] .dropdownSelect {
+      margin-right: 10px;
+    }
+    &[data-popper-placement*="right"] .dropdownSelect {
+      margin-left: 10px;
+    }
+  }
+`;

package/src/components/organisms/OrderDetail/OrderDetail.stories.js

@@ -1,4 +1,4 @@
-import OrderDetail from "./index.js";
+import { OrderDetail } from "./index.js";
 import axios from "axios";
 
 export default {

package/src/components/organisms/OrderDetail/index.js

@@ -16,7 +16,7 @@ import Table from "./utils/Table";
 
 moment.locale("es");
 
-export default function OrderDetail(props) {
+export const OrderDetail = (props) => {
   const { order } = props;
   const [showPaymentButton, setShowPaymentButton] = useState(
     order.payment !== "pagado"
@@ -186,4 +186,4 @@ export default function OrderDetail(props) {
       </div>
     </MainContainer>
   );
-}
+};

package/src/index.js

@@ -61,6 +61,7 @@ export * from "./components/molecules/RetailerSelector/index";
 export * from "./components/molecules/CustomSelect/index";
 export * from "./components/molecules/ButtonDownloadFile/index";
 export * from "./components/molecules/ImageTooltip/index";
+export * from "./components/molecules/SelectV2/index";
 
 //organisms
 export * from "./components/organisms/ChangePassword/index";