contentoh-components-library 21.0.88 → 21.0.89

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

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 22px;\n  width: 10px;\n  border-left: 1px solid #342b3f;\n  padding-left: 3px;\n\n  img {\n    width: 7px;\n    vertical-align: middle;\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 22px;\n  width: 10px;\n  border-left: 1px solid #342b3f;\n  padding-left: 3px;\n\n  img {\n    width: 7px;\n    vertical-align: middle;\n  }\n\n  &.active {\n    img {\n      transform: rotate(180deg);\n    }\n  }\n"])));
 
 exports.Container = Container;

package/dist/components/molecules/AvatarAndValidation/index.js

@@ -13,10 +13,6 @@ var _react = require("react");
 
 var _styles = require("./styles");
 
-var _Avatar = require("../../atoms/Avatar");
-
-var _DropDownButton = require("../../atoms/DropDownButton");
-
 var _GeneralButton = require("../../atoms/GeneralButton");
 
 var _ValidationPanel = require("../../atoms/ValidationPanel");
@@ -64,7 +60,7 @@ var AvatarAndValidation = function AvatarAndValidation(_ref) {
         retailers: retailers,
         activeRetailer: activeRetailer,
         setActiveRetailer: setActiveRetailer
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropDownButton.DropDownButton, {}), showValidationButtons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+      }), showValidationButtons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
         buttonType: "circular-button ".concat(buttonType),
         onClick: function onClick() {
           return setShowValidationPanel(true);

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

@@ -17,6 +17,8 @@ var _react = require("react");
 
 var _AsignationOption = require("../../atoms/AsignationOption");
 
+var _DropDownButton = require("../../atoms/DropDownButton");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var RetailerSelector = function RetailerSelector(_ref) {
@@ -51,6 +53,8 @@ var RetailerSelector = function RetailerSelector(_ref) {
         (retailers === null || retailers === void 0 ? void 0 : retailers.length) > 0 && setRetailersPanel(!retailersPanel);
         if (retailersPanel) document.removeEventListener("click", closeRetailersPanel, false);
       }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropDownButton.DropDownButton, {
+      active: retailersPanel
     }), retailersPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "retailers-panel",
       children: retailers.map(function (retailer, index) {

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

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  cursor: pointer;\n\n  .retailers-panel {\n    background: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    padding: 10px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  cursor: pointer;\n  display: flex;\n\n  .retailers-panel {\n    background: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    padding: 10px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3);
 
 exports.Container = Container;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.88",
+  "version": "21.0.89",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -10,4 +10,10 @@ export const Container = styled.div`
     width: 7px;
     vertical-align: middle;
   }
+
+  &.active {
+    img {
+      transform: rotate(180deg);
+    }
+  }
 `;

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

@@ -2,8 +2,6 @@ import { useState } from "react";
 
 //Components
 import { Container } from "./styles";
-import { Avatar } from "../../atoms/Avatar";
-import { DropDownButton } from "../../atoms/DropDownButton";
 import { Button } from "../../atoms/GeneralButton";
 import { ValidationPanel } from "../../atoms/ValidationPanel";
 import { useEffect } from "react";
@@ -47,7 +45,6 @@ export const AvatarAndValidation = ({
           activeRetailer={activeRetailer}
           setActiveRetailer={setActiveRetailer}
         />
-        <DropDownButton />
         {showValidationButtons && (
           <Button
             buttonType={`circular-button ${buttonType}`}

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

@@ -2,6 +2,7 @@ import { Container } from "./styles";
 import { Avatar } from "../../atoms/Avatar";
 import { useEffect, useState } from "react";
 import { AsignationOption } from "../../atoms/AsignationOption";
+import { DropDownButton } from "../../atoms/DropDownButton";
 
 export const RetailerSelector = ({
   retailers,
@@ -35,6 +36,7 @@ export const RetailerSelector = ({
             document.removeEventListener("click", closeRetailersPanel, false);
         }}
       />
+      <DropDownButton active={retailersPanel} />
       {retailersPanel && (
         <div className="retailers-panel">
           {retailers.map((retailer, index) => (

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

@@ -4,6 +4,7 @@ import { GlobalColors } from "../../../global-files/variables";
 export const Container = styled.div`
   position: relative;
   cursor: pointer;
+  display: flex;
 
   .retailers-panel {
     background: ${GlobalColors.s2};