@escolalms/components - npm Package Compare versions

Comparing version 0.0.35 to 0.0.36

lib/components/atoms/Option/Option.js

@@ -45,3 +45,3 @@ "use strict";
 var provider_1 = require("../../../theme/provider");
-var StyledDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: 16px;\n  color: #4a4a4a;\n\n  label {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  span {\n    margin-left: 15px;\n  }\n\n  input {\n    cursor: pointer;\n    transition: border-color 0.5s;\n    appearance: none;\n    width: 20px;\n    height: 20px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    position: relative;\n    margin: 0;\n    background-color: ", ";\n    border-radius: ", "px;\n    ", ";\n\n    &:checked {\n      border-color: ", ";\n    }\n  }\n\n  &:hover input {\n    border: 1px solid rgba(0, 0, 0, 0.4);\n  }\n\n  input::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 3px;\n    top: 3px;\n    width: 12px;\n    height: 12px;\n    background: ", ";\n    opacity: 0;\n    transition: opacity 0.5s;\n    border-radius: ", "px;\n    ", "\n  }\n\n  input:checked::after {\n    opacity: 1;\n  }\n\n  &:checked {\n    opacity: 0.5;\n  }\n  color: ", ";\n"], ["\n  font-family: ", ";\n  font-size: 16px;\n  color: #4a4a4a;\n\n  label {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  span {\n    margin-left: 15px;\n  }\n\n  input {\n    cursor: pointer;\n    transition: border-color 0.5s;\n    appearance: none;\n    width: 20px;\n    height: 20px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    position: relative;\n    margin: 0;\n    background-color: ", ";\n    border-radius: ", "px;\n    ", ";\n\n    &:checked {\n      border-color: ", ";\n    }\n  }\n\n  &:hover input {\n    border: 1px solid rgba(0, 0, 0, 0.4);\n  }\n\n  input::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 3px;\n    top: 3px;\n    width: 12px;\n    height: 12px;\n    background: ", ";\n    opacity: 0;\n    transition: opacity 0.5s;\n    border-radius: ", "px;\n    ", "\n  }\n\n  input:checked::after {\n    opacity: 1;\n  }\n\n  &:checked {\n    opacity: 0.5;\n  }\n  color: ", ";\n"])), function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) { return props.theme.white; }, function (props) { return props.theme.checkboxRadius || "0"; }, function (props) { return (props.type === "radio" ? "border-radius:100%" : ""); }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return (props.theme.checkboxRadius ? "2" : "0"); }, function (props) { return (props.type === "radio" ? "border-radius:100%" : ""); }, function (props) { return props.theme.primaryColor; });
+var StyledDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: 16px;\n  color: #4a4a4a;\n\n  label {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  span {\n    margin-left: 15px;\n  }\n\n  input {\n    cursor: pointer;\n    transition: border-color 0.5s;\n    appearance: none;\n    width: 20px;\n    height: 20px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    position: relative;\n    margin: 0;\n    flex-shrink: 0;\n    background-color: ", ";\n    border-radius: ", "px;\n    ", ";\n\n    &:checked {\n      border-color: ", ";\n    }\n  }\n\n  &:hover input {\n    border: 1px solid rgba(0, 0, 0, 0.4);\n  }\n\n  input::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 3px;\n    top: 3px;\n    width: 12px;\n    height: 12px;\n    background: ", ";\n    opacity: 0;\n    transition: opacity 0.5s;\n    border-radius: ", "px;\n    ", "\n  }\n\n  input:checked::after {\n    opacity: 1;\n  }\n\n  &:checked {\n    opacity: 0.5;\n  }\n  color: ", ";\n"], ["\n  font-family: ", ";\n  font-size: 16px;\n  color: #4a4a4a;\n\n  label {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  span {\n    margin-left: 15px;\n  }\n\n  input {\n    cursor: pointer;\n    transition: border-color 0.5s;\n    appearance: none;\n    width: 20px;\n    height: 20px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    position: relative;\n    margin: 0;\n    flex-shrink: 0;\n    background-color: ", ";\n    border-radius: ", "px;\n    ", ";\n\n    &:checked {\n      border-color: ", ";\n    }\n  }\n\n  &:hover input {\n    border: 1px solid rgba(0, 0, 0, 0.4);\n  }\n\n  input::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 3px;\n    top: 3px;\n    width: 12px;\n    height: 12px;\n    background: ", ";\n    opacity: 0;\n    transition: opacity 0.5s;\n    border-radius: ", "px;\n    ", "\n  }\n\n  input:checked::after {\n    opacity: 1;\n  }\n\n  &:checked {\n    opacity: 0.5;\n  }\n  color: ", ";\n"])), function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) { return props.theme.white; }, function (props) { return props.theme.checkboxRadius || "0"; }, function (props) { return (props.type === "radio" ? "border-radius:100%" : ""); }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return (props.theme.checkboxRadius ? "2" : "0"); }, function (props) { return (props.type === "radio" ? "border-radius:100%" : ""); }, function (props) { return props.theme.primaryColor; });
 var Option = function (props) {
@@ -48,0 +48,0 @@ var label = props.label, type = props.type, className = props.className;

lib/components/molecules/Categories/Categories.d.ts

@@ -7,2 +7,4 @@ import * as React from "react";
     open?: boolean;
+    lightContrast?: boolean;
+    backgroundColor?: React.CSSProperties["backgroundColor"];
 }
@@ -9,0 +11,0 @@ interface CategoriesProps extends StyledCategoriesProps {

lib/components/molecules/Categories/Categories.js

@@ -59,2 +59,3 @@ "use strict";
 var useOnClickOutside_1 = require("../../../hooks/useOnClickOutside");
+var chroma_js_1 = require("chroma-js");
 var __1 = require("../../../");
@@ -65,3 +66,3 @@ var rc_drawer_1 = __importDefault(require("rc-drawer"));
 var IconArrowBottom = function () {
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6 9L12 15L18 9", stroke: "#F2F2F2", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
 };
@@ -71,16 +72,11 @@ var IconArrowLeft = function () {
 };
-var StyledCategoriesDropdown = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  min-width: 150px;\n  color: ", ";\n  border: ", ";\n  background-color: ", ";\n  .categories-dropdown-button {\n    position: relative;\n    justify-content: space-between;\n    padding: 7px 10px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    font-weight: normal;\n    cursor: pointer;\n    color: currentColor;\n    font-size: 16px;\n    font-family: ", ";\n\n    svg {\n      margin-left: 10px;\n      transform: ", ";\n      transition: opacity 0.2s ease-in-out;\n\n      path {\n        stroke: currentColor;\n      }\n    }\n\n    &:hover svg {\n      opacity: 0.6;\n    }\n\n    &:after {\n      position: absolute;\n      bottom: 0;\n      left: 10px;\n      right: 10px;\n      height: 1px;\n      display: ", ";\n      background-color: currentColor;\n      content: \"\";\n    }\n  }\n\n  > .categories-dropdown-options {\n    padding: 7px 10px;\n    position: absolute;\n    top: 100%;\n    left: -1px;\n    width: calc(100% + 2px);\n    max-height: ", ";\n    height: ", ";\n    overflow-y: ", ";\n    display: ", ";\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 1px solid currentColor;\n    border-top: none;\n    z-index: ", ";\n\n    input {\n      color: currentColor;\n    }\n\n    span {\n      word-break: break-word;\n    }\n  }\n\n  .categories-dropdown-options .categories-dropdown-options {\n    margin-left: 20px;\n  }\n"], ["\n  position: relative;\n  min-width: 150px;\n  color: ", ";\n  border: ", ";\n  background-color: ", ";\n  .categories-dropdown-button {\n    position: relative;\n    justify-content: space-between;\n    padding: 7px 10px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    font-weight: normal;\n    cursor: pointer;\n    color: currentColor;\n    font-size: 16px;\n    font-family: ", ";\n\n    svg {\n      margin-left: 10px;\n      transform: ", ";\n      transition: opacity 0.2s ease-in-out;\n\n      path {\n        stroke: currentColor;\n      }\n    }\n\n    &:hover svg {\n      opacity: 0.6;\n    }\n\n    &:after {\n      position: absolute;\n      bottom: 0;\n      left: 10px;\n      right: 10px;\n      height: 1px;\n      display: ", ";\n      background-color: currentColor;\n      content: \"\";\n    }\n  }\n\n  > .categories-dropdown-options {\n    padding: 7px 10px;\n    position: absolute;\n    top: 100%;\n    left: -1px;\n    width: calc(100% + 2px);\n    max-height: ", ";\n    height: ", ";\n    overflow-y: ", ";\n    display: ", ";\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 1px solid currentColor;\n    border-top: none;\n    z-index: ", ";\n\n    input {\n      color: currentColor;\n    }\n\n    span {\n      word-break: break-word;\n    }\n  }\n\n  .categories-dropdown-options .categories-dropdown-options {\n    margin-left: 20px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return (theme.mode === "light" ? theme.gray2 : theme.gray4);
+var StyledCategoriesDropdown = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  min-width: 150px;\n  color: ", ";\n  border: ", ";\n  background-color: ", ";\n\n  .categories-collapse {\n    color: currentColor;\n  }\n\n  .categories-dropdown-button {\n    position: relative;\n    justify-content: space-between;\n    padding: 7px 10px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    font-weight: normal;\n    cursor: pointer;\n    color: currentColor;\n    font-size: 16px;\n    font-family: ", ";\n\n    svg {\n      margin-left: 10px;\n      transform: ", ";\n      transition: opacity 0.2s ease-in-out;\n\n      path {\n        stroke: currentColor;\n      }\n    }\n\n    &:hover svg {\n      opacity: 0.6;\n    }\n\n    &:after {\n      position: absolute;\n      bottom: 0;\n      left: 10px;\n      right: 10px;\n      height: 1px;\n      display: ", ";\n      background-color: currentColor;\n      content: \"\";\n    }\n  }\n\n  > .categories-dropdown-options {\n    padding: 7px 10px;\n    position: absolute;\n    top: 100%;\n    left: -1px;\n    width: calc(100% + 2px);\n    max-height: ", ";\n    height: ", ";\n    overflow-y: ", ";\n    display: ", ";\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 1px solid currentColor;\n    border-top: none;\n    z-index: ", ";\n\n    div {\n      position: relative;\n    }\n\n    input {\n      color: currentColor;\n    }\n\n    span {\n      word-break: break-word;\n      color: ", ";\n    }\n  }\n\n  .categories-dropdown-options .categories-dropdown-options {\n    margin-left: 20px;\n  }\n"], ["\n  position: relative;\n  min-width: 150px;\n  color: ", ";\n  border: ", ";\n  background-color: ", ";\n\n  .categories-collapse {\n    color: currentColor;\n  }\n\n  .categories-dropdown-button {\n    position: relative;\n    justify-content: space-between;\n    padding: 7px 10px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    font-weight: normal;\n    cursor: pointer;\n    color: currentColor;\n    font-size: 16px;\n    font-family: ", ";\n\n    svg {\n      margin-left: 10px;\n      transform: ", ";\n      transition: opacity 0.2s ease-in-out;\n\n      path {\n        stroke: currentColor;\n      }\n    }\n\n    &:hover svg {\n      opacity: 0.6;\n    }\n\n    &:after {\n      position: absolute;\n      bottom: 0;\n      left: 10px;\n      right: 10px;\n      height: 1px;\n      display: ", ";\n      background-color: currentColor;\n      content: \"\";\n    }\n  }\n\n  > .categories-dropdown-options {\n    padding: 7px 10px;\n    position: absolute;\n    top: 100%;\n    left: -1px;\n    width: calc(100% + 2px);\n    max-height: ", ";\n    height: ", ";\n    overflow-y: ", ";\n    display: ", ";\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 1px solid currentColor;\n    border-top: none;\n    z-index: ", ";\n\n    div {\n      position: relative;\n    }\n\n    input {\n      color: currentColor;\n    }\n\n    span {\n      word-break: break-word;\n      color: ", ";\n    }\n  }\n\n  .categories-dropdown-options .categories-dropdown-options {\n    margin-left: 20px;\n  }\n"])), function (props) {
+    return props.lightContrast ? props.theme.gray4 : props.theme.gray2;
 }, function (props) {
     return "1px solid ".concat(props.open ? "currentColor" : "transparent");
-}, function (_a) {
+}, function (props) { return props.backgroundColor; }, function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) { return (props.open ? "rotate(180deg)" : "none"); }, function (props) { return (props.open ? "block" : "none"); }, function (props) { return (props.open ? "200px" : "auto"); }, function (props) { return (props.open ? "auto" : "0"); }, function (props) { return (props.open ? "auto" : "hidden"); }, function (props) { return (props.open ? "block" : "none"); }, function (props) { return props.backgroundColor; }, function (props) { return (props.open ? "1" : "0"); }, function (props) {
+    return props.lightContrast ? props.theme.gray4 : props.theme.gray2;
+});
+var StyledCategoriesDrawer = (0, styled_components_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  box-sizing: border-box;\n  \n  * {\n    box-sizing: border-box;\n  }\n  \n  .drawer-content-wrapper {\n    left: 0;\n    width: 100%;\n  }\n  \n  .categories-drawer-list {\n    > div {\n      position: relative;\n      margin-bottom: 4px;\n    }\n  \n    .categories-drawer-list {\n      margin-left: 20px;\n    }\n  }\n  \n  .drawer-content {\n    display: flex;\n    flex-direction: column;\n  }\n  \n  .drawer-content-header {\n    position: relative;\n    padding: 22px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-shadow: 0px -2px 15px 0px #0000001A;\n  }\n  \n  .drawer-content-btn {\n    position: absolute;\n    left: 22px;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    \n    svg path {\n      stroke: ", ";\n      }\n  }\n  \n  .drawer-content-inner {\n    padding: 0 16px 32px 16px;\n    flex: 1;\n    overflow: auto;\n  }\n  \n  .drawer-content-footer {\n    padding: 16px;\n    box-shadow: 0px -2px 15px 0px #0000001A;\n  }\n  \n  .categories-collapse {\n    color: ", ";\n  }\n  \n  label {\n    color: ", ";\n  }\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n  \n  * {\n    box-sizing: border-box;\n  }\n  \n  .drawer-content-wrapper {\n    left: 0;\n    width: 100%;\n  }\n  \n  .categories-drawer-list {\n    > div {\n      position: relative;\n      margin-bottom: 4px;\n    }\n  \n    .categories-drawer-list {\n      margin-left: 20px;\n    }\n  }\n  \n  .drawer-content {\n    display: flex;\n    flex-direction: column;\n  }\n  \n  .drawer-content-header {\n    position: relative;\n    padding: 22px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-shadow: 0px -2px 15px 0px #0000001A;\n  }\n  \n  .drawer-content-btn {\n    position: absolute;\n    left: 22px;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    \n    svg path {\n      stroke: ", ";\n      }\n  }\n  \n  .drawer-content-inner {\n    padding: 0 16px 32px 16px;\n    flex: 1;\n    overflow: auto;\n  }\n  \n  .drawer-content-footer {\n    padding: 16px;\n    box-shadow: 0px -2px 15px 0px #0000001A;\n  }\n  \n  .categories-collapse {\n    color: ", ";\n  }\n  \n  label {\n    color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.mode === "light" ? theme.backgroundLight : theme.backgroundDark;
-}, function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) { return (props.open ? "rotate(180deg)" : "none"); }, function (props) { return (props.open ? "block" : "none"); }, function (props) { return (props.open ? "200px" : "auto"); }, function (props) { return (props.open ? "auto" : "0"); }, function (props) { return (props.open ? "auto" : "hidden"); }, function (props) { return (props.open ? "block" : "none"); }, function (_a) {
-    var theme = _a.theme;
-    return theme.mode === "light" ? theme.backgroundLight : theme.backgroundDark;
-}, function (props) { return (props.open ? "1" : "0"); });
-var StyledCategoryTreeOptions = (0, styled_components_1.default)("div")(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  label {\n    color: ", ";\n  }\n\n  .categories-collapse {\n    position: absolute;\n    right: 0;\n    top: 0;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.2s ease-in-out;\n\n    &:hover {\n      opacity: 0.8;\n    }\n\n    svg path {\n      stroke: ", ";\n    }\n\n    &.active {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n\n  > div {\n    position: relative;\n  }\n"], ["\n  label {\n    color: ", ";\n  }\n\n  .categories-collapse {\n    position: absolute;\n    right: 0;\n    top: 0;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.2s ease-in-out;\n\n    &:hover {\n      opacity: 0.8;\n    }\n\n    svg path {\n      stroke: ", ";\n    }\n\n    &.active {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n\n  > div {\n    position: relative;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
     return theme.mode === "light" ? theme.gray1 : theme.white;
@@ -90,7 +86,7 @@ }, function (_a) {
     return theme.mode === "light" ? theme.gray1 : theme.white;
-});
-var StyledCategoriesDrawer = (0, styled_components_1.createGlobalStyle)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  box-sizing: border-box;\n  \n  * {\n    box-sizing: border-box;\n  }\n  \n  .drawer-content-wrapper {\n    left: 0;\n    width: 100%;\n  }\n  \n  .categories-drawer-list {\n    > div {\n      margin-bottom: 4px;\n    }\n  \n    .categories-drawer-list {\n      margin-left: 20px;\n    }\n  }\n  \n  .drawer-content {\n    display: flex;\n    flex-direction: column;\n  }\n  \n  .drawer-content-header {\n    position: relative;\n    padding: 22px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-shadow: 0px -2px 15px 0px #0000001A;\n  }\n  \n  .drawer-content-btn {\n    position: absolute;\n    left: 22px;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    \n    svg path {\n      stroke: ", ";\n      }\n  }\n  \n  .drawer-content-inner {\n    padding: 0 16px 32px 16px;\n    flex: 1;\n    overflow: auto;\n  }\n  \n  .drawer-content-footer {\n    padding: 16px;\n    box-shadow: 0px -2px 15px 0px #0000001A;\n  }\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n  \n  * {\n    box-sizing: border-box;\n  }\n  \n  .drawer-content-wrapper {\n    left: 0;\n    width: 100%;\n  }\n  \n  .categories-drawer-list {\n    > div {\n      margin-bottom: 4px;\n    }\n  \n    .categories-drawer-list {\n      margin-left: 20px;\n    }\n  }\n  \n  .drawer-content {\n    display: flex;\n    flex-direction: column;\n  }\n  \n  .drawer-content-header {\n    position: relative;\n    padding: 22px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-shadow: 0px -2px 15px 0px #0000001A;\n  }\n  \n  .drawer-content-btn {\n    position: absolute;\n    left: 22px;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    \n    svg path {\n      stroke: ", ";\n      }\n  }\n  \n  .drawer-content-inner {\n    padding: 0 16px 32px 16px;\n    flex: 1;\n    overflow: auto;\n  }\n  \n  .drawer-content-footer {\n    padding: 16px;\n    box-shadow: 0px -2px 15px 0px #0000001A;\n  }\n"])), function (_a) {
+}, function (_a) {
     var theme = _a.theme;
     return theme.mode === "light" ? theme.gray1 : theme.white;
 });
+var StyledCategoryTreeOptions = (0, styled_components_1.default)("div")(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .categories-collapse {\n    position: absolute;\n    right: 0;\n    top: 0;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.2s ease-in-out;\n\n    &:hover {\n      opacity: 0.8;\n    }\n\n    &.active {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n"], ["\n  .categories-collapse {\n    position: absolute;\n    right: 0;\n    top: 0;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    transition: opacity 0.2s ease-in-out;\n\n    &:hover {\n      opacity: 0.8;\n    }\n\n    &.active {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n"])));
 var CategoryTreeOptions = function (props) {
@@ -115,7 +111,13 @@ var categories = props.categories, labelPrefix = props.labelPrefix, _a = props.selectedCategories, selectedCategories = _a === void 0 ? [] : _a, label = props.label, handleChange = props.handleChange, mobile = props.mobile;
                         category.subcategories &&
-                        category.subcategories.length > 0 && ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return handleCollapse(category.id); }, className: "categories-collapse ".concat(collapseState[category.id] && "active") }, { children: (0, jsx_runtime_1.jsx)(IconArrowBottom, {}) })), collapseState[category.id] && ((0, jsx_runtime_1.jsx)(CategoryTreeOptions, { categories: category.subcategories, handleChange: handleChange, selectedCategories: selectedCategories, mobile: mobile }))] }))] }, category.id)); })] })));
+                        category.subcategories.length > 0 && ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return handleCollapse(category.id); }, className: "categories-collapse" }, { children: (0, jsx_runtime_1.jsx)(IconArrowBottom, {}) })), collapseState[category.id] && ((0, jsx_runtime_1.jsx)(CategoryTreeOptions, { categories: category.subcategories, handleChange: handleChange, selectedCategories: selectedCategories, mobile: mobile }))] }))] }, category.id)); })] })));
 };
 var CategoriesDropdown = function (props) {
-    var categories = props.categories, labelPrefix = props.labelPrefix, label = props.label, selectedCategories = props.selectedCategories, handleChange = props.handleChange;
-    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var theme = React.useContext(styled_components_1.ThemeContext);
+    var categories = props.categories, labelPrefix = props.labelPrefix, label = props.label, selectedCategories = props.selectedCategories, handleChange = props.handleChange, _a = props.backgroundColor, backgroundColor = _a === void 0 ? theme.mode === "light"
+        ? theme.backgroundLight
+        : theme.backgroundDark : _a;
+    var cts = React.useMemo(function () {
+        return (0, chroma_js_1.contrast)("#fff", backgroundColor) >= 1.85;
+    }, [backgroundColor]);
+    var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var ref = (0, react_1.useRef)(null);
@@ -126,3 +128,3 @@ var toggleOpen = function () {
     (0, useOnClickOutside_1.useOnClickOutside)(ref, function () { return setOpen(false); });
-    return ((0, jsx_runtime_1.jsxs)(StyledCategoriesDropdown, __assign({ open: open, ref: ref }, { children: [(0, jsx_runtime_1.jsxs)("button", __assign({ type: "button", className: "categories-dropdown-button", onClick: toggleOpen }, { children: [label, " ", selectedCategories &&
+    return ((0, jsx_runtime_1.jsxs)(StyledCategoriesDropdown, __assign({ open: open, ref: ref, lightContrast: cts, backgroundColor: backgroundColor }, { children: [(0, jsx_runtime_1.jsxs)("button", __assign({ type: "button", className: "categories-dropdown-button", onClick: toggleOpen }, { children: [label, " ", selectedCategories &&
                         selectedCategories.length > 0 &&
@@ -129,0 +131,0 @@ "(".concat(selectedCategories.length, ")"), (0, jsx_runtime_1.jsx)(IconArrowBottom, {})] })), (0, jsx_runtime_1.jsx)(CategoryTreeOptions, { categories: categories, labelPrefix: labelPrefix, selectedCategories: selectedCategories, handleChange: handleChange })] })));

lib/components/molecules/Dropdown/Dropdown.d.ts

@@ -7,3 +7,5 @@ import * as React from "react";
     styles?: React.CSSProperties;
+    lightContrast?: boolean;
+    backgroundColor?: React.CSSProperties["backgroundColor"];
 }
 export declare const Dropdown: React.FC<DropdownProps>;

lib/components/molecules/Dropdown/Dropdown.js

@@ -17,2 +17,25 @@ "use strict";
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -24,16 +47,11 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
 var react_dropdown_1 = __importDefault(require("react-dropdown"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 require("react-dropdown/style.css");
 var provider_1 = require("../../../theme/provider");
-var chroma_js_1 = __importDefault(require("chroma-js"));
-var StyledDropdown = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: 16px;\n  min-width: 150px;\n\n  .control {\n    cursor: pointer;\n    transition: none;\n    border-color: transparent;\n    color: ", ";\n    padding: 8px 39px 8px 10px;\n    background-color: ", ";\n\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: ", ";\n      left: 10px;\n      width: calc(100% - 20px);\n      background: ", ";\n    }\n  }\n\n  .is-open .control {\n    border-color: currentColor;\n    border-bottom: ", ";\n    border-top: ", ";\n    &:after {\n      height: 1px;\n    }\n  }\n\n  .Dropdown-arrow-wrapper {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  &:hover .arrows {\n    opacity: 0.6;\n  }\n\n  .Dropdown-control {\n    border-radius: ", ";\n\n    &:hover {\n      box-shadow: none;\n    }\n  }\n\n  .Dropdown-menu {\n    top: ", ";\n    bottom: ", ";\n    border-color: ", ";\n    border-top: ", ";\n    border-bottom: ", ";\n    box-shadow: none;\n    background-color: ", ";\n    font-size: 14px;\n  }\n\n  .Dropdown-option {\n    padding: 7px 10px;\n    color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &.is-selected {\n      background: ", ";\n    }\n  }\n"], ["\n  font-family: ", ";\n  font-size: 16px;\n  min-width: 150px;\n\n  .control {\n    cursor: pointer;\n    transition: none;\n    border-color: transparent;\n    color: ", ";\n    padding: 8px 39px 8px 10px;\n    background-color: ", ";\n\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: ", ";\n      left: 10px;\n      width: calc(100% - 20px);\n      background: ", ";\n    }\n  }\n\n  .is-open .control {\n    border-color: currentColor;\n    border-bottom: ", ";\n    border-top: ", ";\n    &:after {\n      height: 1px;\n    }\n  }\n\n  .Dropdown-arrow-wrapper {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  &:hover .arrows {\n    opacity: 0.6;\n  }\n\n  .Dropdown-control {\n    border-radius: ", ";\n\n    &:hover {\n      box-shadow: none;\n    }\n  }\n\n  .Dropdown-menu {\n    top: ", ";\n    bottom: ", ";\n    border-color: ", ";\n    border-top: ", ";\n    border-bottom: ", ";\n    box-shadow: none;\n    background-color: ", ";\n    font-size: 14px;\n  }\n\n  .Dropdown-option {\n    padding: 7px 10px;\n    color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &.is-selected {\n      background: ", ";\n    }\n  }\n"])), function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (_a) {
-    var theme = _a.theme;
-    return theme.mode === "light" ? theme.gray2 : theme.gray4;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.mode === "light" ? theme.backgroundLight : theme.backgroundDark;
-}, function (props) { return (props.placement === "bottom" ? "0" : "96%"); }, function (props) {
-    return props.theme.mode !== "dark" ? props.theme.gray2 : props.theme.white;
-}, function (props) { return props.placement === "bottom" && "none"; }, function (props) { return props.placement === "top" && "none"; }, function (_a) {
+var chroma_js_1 = __importStar(require("chroma-js"));
+var StyledDropdown = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: 16px;\n  min-width: 150px;\n\n  .control {\n    cursor: pointer;\n    transition: none;\n    border-color: transparent;\n    color: ", ";\n    padding: 7px 39px 7px 10px;\n    background-color: ", ";\n\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: ", ";\n      left: 10px;\n      width: calc(100% - 20px);\n      background: ", ";\n    }\n  }\n\n  .is-open .control {\n    border-color: currentColor;\n    border-bottom: ", ";\n    border-top: ", ";\n    &:after {\n      height: 1px;\n    }\n  }\n\n  .Dropdown-arrow-wrapper {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  &:hover .arrows {\n    opacity: 0.6;\n  }\n\n  .Dropdown-control {\n    border-radius: ", ";\n\n    &:hover {\n      box-shadow: none;\n    }\n  }\n\n  .Dropdown-menu {\n    top: ", ";\n    bottom: ", ";\n    border-color: ", ";\n    border-top: ", ";\n    border-bottom: ", ";\n    box-shadow: none;\n    background-color: ", ";\n    font-size: 14px;\n  }\n\n  .Dropdown-option {\n    padding: 7px 10px;\n    color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &.is-selected {\n      background: ", ";\n    }\n  }\n"], ["\n  font-family: ", ";\n  font-size: 16px;\n  min-width: 150px;\n\n  .control {\n    cursor: pointer;\n    transition: none;\n    border-color: transparent;\n    color: ", ";\n    padding: 7px 39px 7px 10px;\n    background-color: ", ";\n\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: ", ";\n      left: 10px;\n      width: calc(100% - 20px);\n      background: ", ";\n    }\n  }\n\n  .is-open .control {\n    border-color: currentColor;\n    border-bottom: ", ";\n    border-top: ", ";\n    &:after {\n      height: 1px;\n    }\n  }\n\n  .Dropdown-arrow-wrapper {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  &:hover .arrows {\n    opacity: 0.6;\n  }\n\n  .Dropdown-control {\n    border-radius: ", ";\n\n    &:hover {\n      box-shadow: none;\n    }\n  }\n\n  .Dropdown-menu {\n    top: ", ";\n    bottom: ", ";\n    border-color: ", ";\n    border-top: ", ";\n    border-bottom: ", ";\n    box-shadow: none;\n    background-color: ", ";\n    font-size: 14px;\n  }\n\n  .Dropdown-option {\n    padding: 7px 10px;\n    color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &.is-selected {\n      background: ", ";\n    }\n  }\n"])), function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) {
+    return props.lightContrast ? props.theme.gray4 : props.theme.gray2;
+}, function (props) { return props.backgroundColor; }, function (props) { return (props.placement === "bottom" ? "0" : "96%"); }, function (props) { return props.backgroundColor; }, function (props) { return props.placement === "bottom" && "none"; }, function (props) { return props.placement === "top" && "none"; }, function (_a) {
     var placement = _a.placement, theme = _a.theme;
@@ -43,24 +61,26 @@ return placement === "bottom"
         : "0 0 ".concat(theme.inputRadius, "px ").concat(theme.inputRadius, "px");
-}, function (props) { return (props.placement === "top" ? "auto" : "100%"); }, function (props) { return (props.placement === "top" ? "100%" : "auto"); }, function (_a) {
-    var theme = _a.theme;
-    return theme.mode === "light" ? theme.gray2 : theme.white;
-}, function (props) { return props.placement === "bottom" && "none"; }, function (props) { return props.placement === "top" && "none"; }, function (_a) {
-    var theme = _a.theme;
-    return theme.mode === "light" ? theme.backgroundLight : theme.backgroundDark;
+}, function (props) { return (props.placement === "top" ? "auto" : "100%"); }, function (props) { return (props.placement === "top" ? "100%" : "auto"); }, function (props) {
+    return props.lightContrast ? props.theme.gray4 : props.theme.gray2;
+}, function (props) { return props.placement === "bottom" && "none"; }, function (props) { return props.placement === "top" && "none"; }, function (props) { return props.backgroundColor; }, function (props) {
+    return props.lightContrast ? props.theme.gray4 : props.theme.gray2;
 }, function (props) {
-    return props.theme.mode !== "dark" ? props.theme.gray2 : props.theme.gray4;
+    return props.lightContrast
+        ? (0, chroma_js_1.default)(props.theme.white).alpha(0.3).hex()
+        : (0, chroma_js_1.default)(props.theme.black).alpha(0.2).hex();
 }, function (props) {
-    return props.theme.mode !== "dark"
-        ? (0, chroma_js_1.default)(props.theme.backgroundLight).darken(0.5).hex()
-        : (0, chroma_js_1.default)(props.theme.backgroundDark).brighten(1).hex();
-}, function (props) {
-    return props.theme.mode !== "dark"
-        ? (0, chroma_js_1.default)(props.theme.backgroundLight).darken(0.5).hex()
-        : (0, chroma_js_1.default)(props.theme.backgroundDark).brighten(1).hex();
+    return props.lightContrast
+        ? (0, chroma_js_1.default)(props.theme.white).alpha(0.3).hex()
+        : (0, chroma_js_1.default)(props.theme.black).alpha(0.3).hex();
 });
 var Dropdown = function (props) {
-    var _a = props.placement, placement = _a === void 0 ? "bottom" : _a, styles = props.styles;
-    return ((0, jsx_runtime_1.jsx)(StyledDropdown, __assign({ placement: placement, style: styles }, { children: (0, jsx_runtime_1.jsx)(react_dropdown_1.default, __assign({}, props, { menuClassName: "menu", controlClassName: "control", arrowOpen: (0, jsx_runtime_1.jsx)("svg", __assign({ className: "arrows", width: "14", height: "8", viewBox: "0 0 14 8", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6.29289 0.292893C6.68342 -0.0976311 7.31658 -0.0976311 7.70711 0.292893L13.7071 6.29289C14.0976 6.68342 14.0976 7.31658 13.7071 7.70711C13.3166 8.09763 12.6834 8.09763 12.2929 7.70711L7 2.41421L1.70711 7.70711C1.31658 8.09763 0.683417 8.09763 0.292893 7.70711C-0.0976311 7.31658 -0.0976311 6.68342 0.292893 6.29289L6.29289 0.292893Z", fill: "currentColor" }) })), arrowClosed: (0, jsx_runtime_1.jsx)("svg", __assign({ className: "arrows", width: "14", height: "8", viewBox: "0 0 14 8", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683418 14.0976 1.31658 13.7071 1.70711L7.70711 7.70711C7.31658 8.09763 6.68342 8.09763 6.29289 7.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z", fill: "currentColor" }) })) })) })));
+    var theme = React.useContext(styled_components_1.ThemeContext);
+    var _a = props.placement, placement = _a === void 0 ? "bottom" : _a, styles = props.styles, _b = props.backgroundColor, backgroundColor = _b === void 0 ? theme.mode === "light"
+        ? theme.backgroundLight
+        : theme.backgroundDark : _b;
+    var cts = React.useMemo(function () {
+        return (0, chroma_js_1.contrast)("#fff", backgroundColor) >= 1.85;
+    }, [backgroundColor]);
+    return ((0, jsx_runtime_1.jsx)(StyledDropdown, __assign({ placement: placement, style: styles, lightContrast: cts, backgroundColor: backgroundColor }, { children: (0, jsx_runtime_1.jsx)(react_dropdown_1.default, __assign({}, props, { menuClassName: "menu", controlClassName: "control", arrowOpen: (0, jsx_runtime_1.jsx)("svg", __assign({ className: "arrows", width: "14", height: "8", viewBox: "0 0 14 8", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6.29289 0.292893C6.68342 -0.0976311 7.31658 -0.0976311 7.70711 0.292893L13.7071 6.29289C14.0976 6.68342 14.0976 7.31658 13.7071 7.70711C13.3166 8.09763 12.6834 8.09763 12.2929 7.70711L7 2.41421L1.70711 7.70711C1.31658 8.09763 0.683417 8.09763 0.292893 7.70711C-0.0976311 7.31658 -0.0976311 6.68342 0.292893 6.29289L6.29289 0.292893Z", fill: "currentColor" }) })), arrowClosed: (0, jsx_runtime_1.jsx)("svg", __assign({ className: "arrows", width: "14", height: "8", viewBox: "0 0 14 8", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683418 14.0976 1.31658 13.7071 1.70711L7.70711 7.70711C7.31658 8.09763 6.68342 8.09763 6.29289 7.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z", fill: "currentColor" }) })) })) })));
 };
 exports.Dropdown = Dropdown;
 var templateObject_1;

package.json

 {
   "name": "@escolalms/components",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "main": "lib/index.js",
@@ -5,0 +5,0 @@ "license": "MIT",

src/components/molecules/Dropdown/Dropdown.md

@@ -10,6 +10,6 @@ ```js
     options={[
-      "dropdown option with long text",
-      "dropdown option with long text",
-      "dropdown option with text",
-      "dropdown option with text",
+      "dropdown option with long text 1",
+      "dropdown option with long text 2",
+      "dropdown option with text 3",
+      "dropdown option with text 4",
     ]}
@@ -20,6 +20,6 @@ placeholder="Select"
     options={[
-      "dropdown option with long text",
-      "dropdown option with long text",
-      "dropdown option with text",
-      "dropdown option with text",
+      "dropdown option with long text 1",
+      "dropdown option with long text 2",
+      "dropdown option with text 3",
+      "dropdown option with text 4",
     ]}
@@ -26,0 +26,0 @@ placeholder="Select"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16930359

increased by0.02%

Lines of code

25446

increased by0.3%

No dependency changes