Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@escolalms/components

Package Overview
Dependencies
Maintainers
4
Versions
152
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@escolalms/components - npm Package Compare versions

Comparing version 0.0.42 to 0.0.43

12

lib/components/molecules/CourseTopNav/CourseTopNav.js

@@ -52,3 +52,3 @@ "use strict";

var chroma_js_1 = __importDefault(require("chroma-js"));
var StyledAside = styled_components_1.default.aside(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .toggle-btn-container {\n display: flex;\n justify-content: center;\n width: 100%;\n border-bottom: 1px solid\n ", ";\n\n svg {\n transform: scale(", ");\n }\n\n button {\n border-radius: 6px 6px 0 0;\n width: ", ";\n background: ", ";\n color: ", ";\n\n &:hover {\n opacity: 1;\n\n svg {\n opacity: 0.65;\n }\n }\n\n &.closed svg {\n transform: scale(", ")\n rotate(180deg);\n }\n }\n }\n\n .course-nav-container {\n margin-top: ", ";\n padding: ", ";\n background: ", ";\n box-shadow: 0px -4px 24px 0px ", ";\n }\n\n .nav-btn {\n gap: 4px 9px;\n font-size: 12px;\n font-weight: normal;\n min-width: ", ";\n\n &[disabled] {\n opacity: 0;\n }\n }\n\n .nav-finish-btn {\n flex: ", ";\n }\n\n .note-btn {\n gap: 4px 9px;\n }\n"], ["\n .toggle-btn-container {\n display: flex;\n justify-content: center;\n width: 100%;\n border-bottom: 1px solid\n ", ";\n\n svg {\n transform: scale(", ");\n }\n\n button {\n border-radius: 6px 6px 0 0;\n width: ", ";\n background: ", ";\n color: ", ";\n\n &:hover {\n opacity: 1;\n\n svg {\n opacity: 0.65;\n }\n }\n\n &.closed svg {\n transform: scale(", ")\n rotate(180deg);\n }\n }\n }\n\n .course-nav-container {\n margin-top: ", ";\n padding: ", ";\n background: ", ";\n box-shadow: 0px -4px 24px 0px ", ";\n }\n\n .nav-btn {\n gap: 4px 9px;\n font-size: 12px;\n font-weight: normal;\n min-width: ", ";\n\n &[disabled] {\n opacity: 0;\n }\n }\n\n .nav-finish-btn {\n flex: ", ";\n }\n\n .note-btn {\n gap: 4px 9px;\n }\n"])), function (_a) {
var StyledAside = styled_components_1.default.aside(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .toggle-btn-container {\n display: flex;\n justify-content: center;\n width: 100%;\n border-bottom: 1px solid\n ", ";\n\n svg {\n transform: scale(", ");\n }\n\n button {\n border-radius: 6px 6px 0 0;\n width: ", ";\n background: ", ";\n color: ", ";\n\n &:hover {\n opacity: 1;\n\n svg {\n opacity: 0.65;\n }\n }\n\n &.closed svg {\n transform: scale(", ")\n rotate(180deg);\n }\n }\n }\n\n .course-nav-container {\n margin-top: ", ";\n padding: ", ";\n background: ", ";\n box-shadow: 0px -4px 24px 0px ", ";\n }\n\n .nav-btn {\n gap: 4px 9px;\n font-size: 12px;\n font-weight: normal;\n min-width: ", ";\n\n &[disabled] {\n opacity: 0;\n }\n }\n\n .nav-finish-btn {\n flex: ", ";\n padding-left: ", ";\n padding-right: ", ";\n }\n\n .note-btn {\n gap: 4px 9px;\n }\n"], ["\n .toggle-btn-container {\n display: flex;\n justify-content: center;\n width: 100%;\n border-bottom: 1px solid\n ", ";\n\n svg {\n transform: scale(", ");\n }\n\n button {\n border-radius: 6px 6px 0 0;\n width: ", ";\n background: ", ";\n color: ", ";\n\n &:hover {\n opacity: 1;\n\n svg {\n opacity: 0.65;\n }\n }\n\n &.closed svg {\n transform: scale(", ")\n rotate(180deg);\n }\n }\n }\n\n .course-nav-container {\n margin-top: ", ";\n padding: ", ";\n background: ", ";\n box-shadow: 0px -4px 24px 0px ", ";\n }\n\n .nav-btn {\n gap: 4px 9px;\n font-size: 12px;\n font-weight: normal;\n min-width: ", ";\n\n &[disabled] {\n opacity: 0;\n }\n }\n\n .nav-finish-btn {\n flex: ", ";\n padding-left: ", ";\n padding-right: ", ";\n }\n\n .note-btn {\n gap: 4px 9px;\n }\n"])), function (_a) {
var theme = _a.theme;

@@ -80,2 +80,8 @@ return theme.mode === "light" ? theme.white : theme.backgroundDark;

return (mobile ? "1" : "none");
}, function (_a) {
var mobile = _a.mobile;
return mobile && "10px";
}, function (_a) {
var mobile = _a.mobile;
return mobile && "10px";
});

@@ -90,5 +96,3 @@ var IconNote = function () {

var renderFinishButton = function () {
return ((0, jsx_runtime_1.jsx)(__1.Button, __assign({ mode: isFinished ? "secondary" : mobile ? "secondary" : "outline", onClick: function () { return onFinish && onFinish(); }, className: "nav-finish-btn" }, { children: isFinished
? t("CourseTopNav.finished")
: t("CourseTopNav.finishLesson") })));
return ((0, jsx_runtime_1.jsx)(__1.Button, __assign({ mode: isFinished ? "secondary" : mobile ? "secondary" : "outline", onClick: function () { return onFinish && onFinish(); }, className: "nav-finish-btn" }, { children: isFinished ? t("CourseTopNav.finished") : t("Course.markAsFinished") })));
};

@@ -95,0 +99,0 @@ var renderNoteButton = function () {

@@ -52,3 +52,3 @@ "use strict";

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) {
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 border-radius: ", ";\n\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: ", "px;\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 border-radius: ", ";\n\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: ", "px;\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;

@@ -60,2 +60,5 @@ }, 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) {

: "0 0 ".concat(theme.inputRadius, "px ").concat(theme.inputRadius, "px");
}, function (_a) {
var theme = _a.theme;
return theme.inputRadius;
}, function (props) { return (props.placement === "top" ? "auto" : "100%"); }, function (props) { return (props.placement === "top" ? "100%" : "auto"); }, function (props) {

@@ -62,0 +65,0 @@ return props.lightContrast ? props.theme.gray4 : props.theme.gray2;

@@ -57,2 +57,3 @@ "use strict";

var utils_1 = require("../../../utils/utils");
var __1 = require("../../../");
var StyledMarkdownRenderer = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-size: 14px;\n line-height: 1.55em;\n\n h1 {\n font-size: ", ";\n }\n\n h2 {\n font-size: ", ";\n }\n\n h3 {\n font-size: ", ";\n }\n\n h4 {\n font-size: ", ";\n }\n\n h5 {\n font-size: ", ";\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-bottom: 0;\n font-weight: bold;\n line-height: 125%;\n color: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n strong,\n b {\n font-weight: bold;\n }\n\n .table-responsive {\n td,\n tr,\n th {\n border: 1px solid\n ", ";\n padding: 5px 10px;\n }\n table {\n border: 1px solid\n ", ";\n border-collapse: collapse;\n }\n }\n"], ["\n color: ", ";\n font-family: ", ";\n font-size: 14px;\n line-height: 1.55em;\n\n h1 {\n font-size: ", ";\n }\n\n h2 {\n font-size: ", ";\n }\n\n h3 {\n font-size: ", ";\n }\n\n h4 {\n font-size: ", ";\n }\n\n h5 {\n font-size: ", ";\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-bottom: 0;\n font-weight: bold;\n line-height: 125%;\n color: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n strong,\n b {\n font-weight: bold;\n }\n\n .table-responsive {\n td,\n tr,\n th {\n border: 1px solid\n ", ";\n padding: 5px 10px;\n }\n table {\n border: 1px solid\n ", ";\n border-collapse: collapse;\n }\n }\n"])), function (_a) {

@@ -94,2 +95,5 @@ var theme = _a.theme;

},
a: function (props) {
return (0, jsx_runtime_1.jsx)(__1.Link, __assign({}, props));
},
} }, props, { children: (0, markdown_1.fixContentForMarkdown)(children) })) })));

@@ -96,0 +100,0 @@ };

@@ -65,3 +65,3 @@ "use strict";

var ChevronIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "13", height: "8", viewBox: "0 0 13 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5.88128 0.381282C6.22299 0.0395728 6.77701 0.0395728 7.11872 0.381282L12.3687 5.63128C12.7104 5.97299 12.7104 6.52701 12.3687 6.86872C12.027 7.21043 11.473 7.21043 11.1313 6.86872L6.5 2.23744L1.86872 6.86872C1.52701 7.21043 0.97299 7.21043 0.631282 6.86872C0.289573 6.52701 0.289573 5.97299 0.631282 5.63128L5.88128 0.381282Z", fill: "currentColor" }) }))); };
var StyledSection = (0, styled_components_1.default)("section")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n & > header {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n align-items: flex-start;\n align-content: flex-start;\n margin-bottom: 20px;\n\n .lms-icon-title {\n margin: 0;\n flex-wrap: nowrap;\n }\n & > div {\n display: inline-flex;\n align-items: center;\n\n p {\n margin-right: 6px;\n }\n }\n }\n .lesson__item {\n background: ", ";\n border-left: 2px solid ", ";\n padding: 10px;\n margin: 10px 0;\n overflow: hidden;\n border-radius: ", "px;\n\n .duration {\n margin: 1px 0;\n }\n\n & > header {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: flex-start;\n align-content: flex-start;\n\n button {\n margin-left: auto;\n margin-top: -2px;\n\n svg {\n transition: transform 0.2s ease-in;\n transform: rotate(180deg);\n }\n }\n\n .lesson__details {\n flex-shrink: 0;\n margin-right: 10px;\n\n > p:first-child {\n margin-bottom: 2px;\n margin-top: 3px;\n text-transform: uppercase;\n color: ", ";\n }\n }\n\n .lesson__title {\n font-size: 14px;\n color: ", ";\n margin: 0;\n font-weight: bold;\n display: flex;\n small {\n font-size: 12px;\n font-weight: 300;\n .lesson__index {\n text-transform: uppercase;\n color: ", ";\n white-space: nowrap;\n }\n .lesson__duration {\n color: ", ";\n }\n margin-right: 12px;\n }\n }\n }\n &.open > header button svg {\n transform: rotate(0);\n }\n\n &.closed {\n cursor: pointer;\n }\n\n .lesson__topics {\n list-style: none;\n margin: 0;\n padding: 0;\n transition: all 0.5s;\n li {\n padding: 10px;\n background: transparent;\n position: relative;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n\n &:first-child {\n margin-top: 10px;\n }\n\n &:last-child:not(.lesson__topic-current) {\n padding-bottom: 0;\n border-bottom: none;\n }\n\n &:not(.lesson__topic-current):not(:last-child) {\n border-bottom: 2px solid\n ", ";\n }\n\n &:hover p:last-child {\n text-decoration: underline;\n }\n\n &.lesson__topic-pending svg {\n margin-top: 4px;\n\n path {\n fill: ", ";\n }\n }\n\n &.lesson__topic-finished svg {\n margin-top: 7px;\n }\n\n .lesson__description {\n display: flex;\n\n svg {\n margin-right: 7px;\n width: 17px;\n flex-shrink: 0;\n\n &.current-icon path {\n fill: ", ";\n }\n }\n\n .lesson__index {\n opacity: 0.5;\n margin-right: 4px;\n }\n }\n\n &.lesson__topic-current {\n background: ", ";\n border-radius: ", "px;\n cursor: default;\n button {\n margin-top: 10px;\n border-width: 1px;\n font-weight: normal;\n }\n &:hover,\n .lesson__description p:last-child {\n text-decoration: none;\n }\n\n svg {\n margin-top: 2px;\n }\n }\n }\n }\n }\n\n .lesson__item.open .lesson__topics {\n max-height: 100vh;\n transition: all 0.35s ease-in;\n }\n\n .lesson__item.closed .lesson__topics {\n max-height: 0;\n overflow: hidden;\n transition: all 0.35s ease-out;\n }\n"], ["\n width: 100%;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n & > header {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n align-items: flex-start;\n align-content: flex-start;\n margin-bottom: 20px;\n\n .lms-icon-title {\n margin: 0;\n flex-wrap: nowrap;\n }\n & > div {\n display: inline-flex;\n align-items: center;\n\n p {\n margin-right: 6px;\n }\n }\n }\n .lesson__item {\n background: ", ";\n border-left: 2px solid ", ";\n padding: 10px;\n margin: 10px 0;\n overflow: hidden;\n border-radius: ", "px;\n\n .duration {\n margin: 1px 0;\n }\n\n & > header {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: flex-start;\n align-content: flex-start;\n\n button {\n margin-left: auto;\n margin-top: -2px;\n\n svg {\n transition: transform 0.2s ease-in;\n transform: rotate(180deg);\n }\n }\n\n .lesson__details {\n flex-shrink: 0;\n margin-right: 10px;\n\n > p:first-child {\n margin-bottom: 2px;\n margin-top: 3px;\n text-transform: uppercase;\n color: ", ";\n }\n }\n\n .lesson__title {\n font-size: 14px;\n color: ", ";\n margin: 0;\n font-weight: bold;\n display: flex;\n small {\n font-size: 12px;\n font-weight: 300;\n .lesson__index {\n text-transform: uppercase;\n color: ", ";\n white-space: nowrap;\n }\n .lesson__duration {\n color: ", ";\n }\n margin-right: 12px;\n }\n }\n }\n &.open > header button svg {\n transform: rotate(0);\n }\n\n &.closed {\n cursor: pointer;\n }\n\n .lesson__topics {\n list-style: none;\n margin: 0;\n padding: 0;\n transition: all 0.5s;\n li {\n padding: 10px;\n background: transparent;\n position: relative;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n\n &:first-child {\n margin-top: 10px;\n }\n\n &:last-child:not(.lesson__topic-current) {\n padding-bottom: 0;\n border-bottom: none;\n }\n\n &:not(.lesson__topic-current):not(:last-child) {\n border-bottom: 2px solid\n ", ";\n }\n\n &:hover p:last-child {\n text-decoration: underline;\n }\n\n &.lesson__topic-pending svg {\n margin-top: 4px;\n\n path {\n fill: ", ";\n }\n }\n\n &.lesson__topic-finished svg {\n margin-top: 7px;\n }\n\n .lesson__description {\n display: flex;\n\n svg {\n margin-right: 7px;\n width: 17px;\n flex-shrink: 0;\n\n &.current-icon path {\n fill: ", ";\n }\n }\n\n .lesson__index {\n opacity: 0.5;\n margin-right: 4px;\n }\n }\n\n &.lesson__topic-current {\n background: ", ";\n border-radius: ", "px;\n cursor: default;\n button {\n margin-top: 10px;\n border-width: 1px;\n font-weight: normal;\n }\n &:hover,\n .lesson__description p:last-child {\n text-decoration: none;\n }\n\n svg {\n margin-top: 2px;\n }\n }\n }\n }\n }\n\n .lesson__item.open .lesson__topics {\n max-height: 100vh;\n transition: all 0.35s ease-in;\n }\n\n .lesson__item.closed .lesson__topics {\n max-height: 0;\n overflow: hidden;\n transition: all 0.35s ease-out;\n }\n"])), function (_a) {
var StyledSection = (0, styled_components_1.default)("section")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n & > header {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n align-items: flex-start;\n align-content: flex-start;\n margin-bottom: 20px;\n\n .lms-icon-title {\n margin: 0;\n flex-wrap: nowrap;\n }\n & > div {\n display: inline-flex;\n align-items: center;\n\n p {\n margin-right: 6px;\n }\n }\n }\n .lesson__item {\n background: ", ";\n border-left: 2px solid ", ";\n padding: 10px;\n margin: 10px 0;\n overflow: hidden;\n border-radius: ", "px;\n\n .duration {\n margin: 1px 0;\n }\n\n & > header {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: flex-start;\n align-content: flex-start;\n\n button {\n margin-left: auto;\n margin-top: -2px;\n\n svg {\n transition: transform 0.2s ease-in;\n transform: rotate(180deg);\n }\n }\n\n .lesson__details {\n flex-shrink: 0;\n margin-right: 10px;\n\n > p:first-child {\n margin-bottom: 2px;\n margin-top: 3px;\n text-transform: uppercase;\n color: ", ";\n }\n }\n\n .lesson__title {\n font-size: 14px;\n color: ", ";\n margin: 0;\n font-weight: bold;\n display: flex;\n small {\n font-size: 12px;\n font-weight: 300;\n .lesson__index {\n text-transform: uppercase;\n color: ", ";\n white-space: nowrap;\n }\n .lesson__duration {\n color: ", ";\n }\n margin-right: 12px;\n }\n }\n }\n &.open > header button svg {\n transform: rotate(0);\n }\n\n &.closed {\n cursor: pointer;\n }\n\n .lesson__topics {\n list-style: none;\n margin: 0;\n padding: 0;\n transition: all 0.5s;\n li {\n padding: 10px;\n background: transparent;\n position: relative;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n\n &:first-child {\n margin-top: 10px;\n }\n\n &:last-child:not(.lesson__topic-current) {\n padding-bottom: 0;\n border-bottom: none;\n }\n\n &:not(.lesson__topic-current):not(:last-child) {\n border-bottom: 2px solid\n ", ";\n }\n\n &:hover p:last-child {\n text-decoration: underline;\n }\n\n &.lesson__topic-pending svg {\n margin-top: 4px;\n\n path {\n fill: ", ";\n }\n }\n\n &.lesson__topic-finished svg {\n margin-top: 7px;\n }\n\n .lesson__description {\n display: flex;\n\n svg {\n margin-right: 7px;\n width: 17px;\n flex-shrink: 0;\n\n &.current-icon path {\n fill: ", ";\n }\n }\n\n .lesson__index {\n opacity: 0.5;\n margin-right: 4px;\n }\n }\n\n &.lesson__topic-current {\n background: ", ";\n border-radius: ", "px;\n cursor: default;\n button {\n margin-top: 10px;\n border-width: 1px;\n font-weight: normal;\n }\n &:hover,\n .lesson__description p:last-child {\n text-decoration: none;\n }\n\n svg {\n margin-top: 2px;\n }\n }\n }\n }\n }\n\n .lesson__item.open .lesson__topics {\n transition: all 0.35s ease-in;\n }\n\n .lesson__item.closed .lesson__topics {\n max-height: 0;\n overflow: hidden;\n transition: all 0.35s ease-out;\n }\n"], ["\n width: 100%;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n & > header {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n align-items: flex-start;\n align-content: flex-start;\n margin-bottom: 20px;\n\n .lms-icon-title {\n margin: 0;\n flex-wrap: nowrap;\n }\n & > div {\n display: inline-flex;\n align-items: center;\n\n p {\n margin-right: 6px;\n }\n }\n }\n .lesson__item {\n background: ", ";\n border-left: 2px solid ", ";\n padding: 10px;\n margin: 10px 0;\n overflow: hidden;\n border-radius: ", "px;\n\n .duration {\n margin: 1px 0;\n }\n\n & > header {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: flex-start;\n align-content: flex-start;\n\n button {\n margin-left: auto;\n margin-top: -2px;\n\n svg {\n transition: transform 0.2s ease-in;\n transform: rotate(180deg);\n }\n }\n\n .lesson__details {\n flex-shrink: 0;\n margin-right: 10px;\n\n > p:first-child {\n margin-bottom: 2px;\n margin-top: 3px;\n text-transform: uppercase;\n color: ", ";\n }\n }\n\n .lesson__title {\n font-size: 14px;\n color: ", ";\n margin: 0;\n font-weight: bold;\n display: flex;\n small {\n font-size: 12px;\n font-weight: 300;\n .lesson__index {\n text-transform: uppercase;\n color: ", ";\n white-space: nowrap;\n }\n .lesson__duration {\n color: ", ";\n }\n margin-right: 12px;\n }\n }\n }\n &.open > header button svg {\n transform: rotate(0);\n }\n\n &.closed {\n cursor: pointer;\n }\n\n .lesson__topics {\n list-style: none;\n margin: 0;\n padding: 0;\n transition: all 0.5s;\n li {\n padding: 10px;\n background: transparent;\n position: relative;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n\n &:first-child {\n margin-top: 10px;\n }\n\n &:last-child:not(.lesson__topic-current) {\n padding-bottom: 0;\n border-bottom: none;\n }\n\n &:not(.lesson__topic-current):not(:last-child) {\n border-bottom: 2px solid\n ", ";\n }\n\n &:hover p:last-child {\n text-decoration: underline;\n }\n\n &.lesson__topic-pending svg {\n margin-top: 4px;\n\n path {\n fill: ", ";\n }\n }\n\n &.lesson__topic-finished svg {\n margin-top: 7px;\n }\n\n .lesson__description {\n display: flex;\n\n svg {\n margin-right: 7px;\n width: 17px;\n flex-shrink: 0;\n\n &.current-icon path {\n fill: ", ";\n }\n }\n\n .lesson__index {\n opacity: 0.5;\n margin-right: 4px;\n }\n }\n\n &.lesson__topic-current {\n background: ", ";\n border-radius: ", "px;\n cursor: default;\n button {\n margin-top: 10px;\n border-width: 1px;\n font-weight: normal;\n }\n &:hover,\n .lesson__description p:last-child {\n text-decoration: none;\n }\n\n svg {\n margin-top: 2px;\n }\n }\n }\n }\n }\n\n .lesson__item.open .lesson__topics {\n transition: all 0.35s ease-in;\n }\n\n .lesson__item.closed .lesson__topics {\n max-height: 0;\n overflow: hidden;\n transition: all 0.35s ease-out;\n }\n"])), function (_a) {
var theme = _a.theme;

@@ -110,3 +110,3 @@ return theme.mode === "light"

}, [mode]);
return ((0, jsx_runtime_1.jsx)("li", __assign({ className: "lesson__topic lesson__topic-".concat(mode) }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ tabIndex: 0, onClick: onClick, onKeyDown: function (e) { return e.key === "Enter" && onClick(); }, role: "button" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "lesson__description" }, { children: [(0, jsx_runtime_1.jsx)(TopicIcon, { mode: mode }), (0, jsx_runtime_1.jsxs)(__1.Text, __assign({ className: "lesson__index", size: "14", noMargin: true }, { children: [index, ".", " "] })), (0, jsx_runtime_1.jsx)(__1.Text, __assign({ size: "14", noMargin: true }, { children: topic.title }))] })), mode === "current" && !finishedTopicIds.includes(topic.id) && ((0, jsx_runtime_1.jsx)(__1.Button, __assign({ block: true, mode: "outline", onClick: function () { return onMarkFinished && onMarkFinished(topic); } }, { children: t("Course.markAsFinished") })))] })) })));
return ((0, jsx_runtime_1.jsx)("li", __assign({ className: "lesson__topic lesson__topic-".concat(mode) }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ tabIndex: 0, onClick: onClick, onKeyDown: function (e) { return e.key === "Enter" && onClick(); }, role: "button" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "lesson__description" }, { children: [(0, jsx_runtime_1.jsx)(TopicIcon, { mode: mode }), (0, jsx_runtime_1.jsxs)(__1.Text, __assign({ className: "lesson__index", size: "14", noMargin: true, bold: mode === "current" }, { children: [index, ".", " "] })), (0, jsx_runtime_1.jsx)(__1.Text, __assign({ size: "14", noMargin: true, bold: mode === "current" }, { children: topic.title }))] })), mode === "current" && !finishedTopicIds.includes(topic.id) && ((0, jsx_runtime_1.jsx)(__1.Button, __assign({ block: true, mode: "outline", onClick: function () { return onMarkFinished && onMarkFinished(topic); } }, { children: t("Course.markAsFinished") })))] })) })));
};

@@ -113,0 +113,0 @@ var CourseAgendaLesson = function (props) {

/// <reference types="react" />
import type { DefaultResponseError } from "@escolalms/sdk/lib/types/api";
import type { ResponseError } from "umi-request";
export declare const RegisterForm: React.FC<{
export declare type RegisterFormProps = {
onError?: (err: ResponseError<DefaultResponseError>) => void;

@@ -10,3 +10,6 @@ onSuccess?: () => void;

return_url?: string;
}>;
/** Additional labels you can overwrite fields labels. Usable for additional fields. */
fieldLabels?: Record<string, React.ReactNode>;
};
export declare const RegisterForm: React.FC<RegisterFormProps>;
declare const _default: import("react").ForwardRefExoticComponent<{

@@ -13,0 +16,0 @@ [x: string]: any;

@@ -51,6 +51,6 @@ "use strict";

var __1 = require("../../../");
var StyledDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n align-content: center;\n .lms-checkbox {\n margin: 20px 0;\n }\n .lsm-input {\n margin: 30px 0;\n &.has-error,\n &.has-helper {\n margin-bottom: -15px;\n }\n }\n button {\n margin-top: 10px;\n }\n p {\n margin: 15px 0;\n }\n p,\n a {\n font-size: 14px;\n }\n h2,\n h3,\n h4 {\n font-size: ", ";\n }\n form {\n width: 100%;\n max-width: 440px;\n margin-bottom: 15px;\n }\n"], ["\n margin: 0;\n padding: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n align-content: center;\n .lms-checkbox {\n margin: 20px 0;\n }\n .lsm-input {\n margin: 30px 0;\n &.has-error,\n &.has-helper {\n margin-bottom: -15px;\n }\n }\n button {\n margin-top: 10px;\n }\n p {\n margin: 15px 0;\n }\n p,\n a {\n font-size: 14px;\n }\n h2,\n h3,\n h4 {\n font-size: ", ";\n }\n form {\n width: 100%;\n max-width: 440px;\n margin-bottom: 15px;\n }\n"])), function (props) { return (props.mobile ? "18px" : "28px"); });
var StyledDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n align-content: center;\n .lms-checkbox {\n margin: 20px 0;\n }\n .lsm-input {\n margin: 30px 0;\n &.has-error,\n &.has-helper {\n margin-bottom: -15px;\n }\n }\n button {\n margin-top: 10px;\n }\n p {\n margin: 15px 0;\n }\n p,\n label p {\n margin: 0;\n }\n a {\n font-size: 14px;\n }\n h2,\n h3,\n h4 {\n font-size: ", ";\n }\n form {\n width: 100%;\n max-width: 440px;\n margin-bottom: 15px;\n }\n"], ["\n margin: 0;\n padding: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n align-content: center;\n .lms-checkbox {\n margin: 20px 0;\n }\n .lsm-input {\n margin: 30px 0;\n &.has-error,\n &.has-helper {\n margin-bottom: -15px;\n }\n }\n button {\n margin-top: 10px;\n }\n p {\n margin: 15px 0;\n }\n p,\n label p {\n margin: 0;\n }\n a {\n font-size: 14px;\n }\n h2,\n h3,\n h4 {\n font-size: ", ";\n }\n form {\n width: 100%;\n max-width: 440px;\n margin-bottom: 15px;\n }\n"])), function (props) { return (props.mobile ? "18px" : "28px"); });
var RegisterForm = function (_a) {
var onSuccess = _a.onSuccess, onError = _a.onError, onLoginLink = _a.onLoginLink, _b = _a.mobile, mobile = _b === void 0 ? false : _b, _c = _a.return_url, return_url = _c === void 0 ? "" : _c;
var _d = (0, react_1.useState)({
var onSuccess = _a.onSuccess, onError = _a.onError, onLoginLink = _a.onLoginLink, _b = _a.mobile, mobile = _b === void 0 ? false : _b, _c = _a.return_url, return_url = _c === void 0 ? "" : _c, _d = _a.fieldLabels, fieldLabels = _d === void 0 ? {} : _d;
var _e = (0, react_1.useState)({
first_name: "",

@@ -62,5 +62,5 @@ last_name: "",

phone: "",
}), initialValues = _d[0], setInitialValues = _d[1];
}), initialValues = _e[0], setInitialValues = _e[1];
var t = (0, react_i18next_1.useTranslation)().t;
var _e = (0, react_1.useContext)(react_2.EscolaLMSContext), register = _e.register, fields = _e.fields, fetchFields = _e.fetchFields;
var _f = (0, react_1.useContext)(react_2.EscolaLMSContext), register = _f.register, fields = _f.fields, fetchFields = _f.fetchFields;
(0, react_1.useEffect)(function () {

@@ -116,6 +116,3 @@ fetchFields({ class_type: "App\\Models\\User" });

}
if (!values.phone) {
errors.phone = t("Required");
}
else if (!/\d{9}$/i.test(values.phone)) {
if (values.phone && !/\d{9}$/i.test(values.phone)) {
errors.phone = t("Wrong phone number");

@@ -148,3 +145,3 @@ }

var values = _a.values, errors = _a.errors, touched = _a.touched, handleChange = _a.handleChange, handleBlur = _a.handleBlur, handleSubmit = _a.handleSubmit, isSubmitting = _a.isSubmitting;
return ((0, jsx_runtime_1.jsxs)("form", __assign({ onSubmit: handleSubmit }, { children: [errors && errors.error && ((0, jsx_runtime_1.jsx)(__1.Text, __assign({ type: "danger" }, { children: errors.error }))), (0, jsx_runtime_1.jsx)(__1.Input, { label: t("First name"), type: "text", name: "first_name", onChange: handleChange, onBlur: handleBlur, value: values.first_name, error: touched.first_name && errors.first_name, required: true }), (0, jsx_runtime_1.jsx)(__1.Input, { label: t("Last name"), type: "text", name: "last_name", onChange: handleChange, onBlur: handleBlur, value: values.last_name, error: touched.last_name && errors.last_name, required: true }), (0, jsx_runtime_1.jsx)(__1.Input, { label: t("Email"), className: "form-control grey", type: "email", name: "email", onChange: handleChange, onBlur: handleBlur, value: values.email, error: touched.email && errors.email, required: true }), (0, jsx_runtime_1.jsx)(__1.Input, { label: t("Password"), type: "password", name: "password", onChange: handleChange, onBlur: handleBlur, value: values.password, error: touched.password && errors.password, helper: t("Password validation"), required: true }), (0, jsx_runtime_1.jsx)(__1.Input, { label: t("Repeat password"), type: "password", name: "password_confirmation", onChange: handleChange, onBlur: handleBlur, value: values.password_confirmation, error: touched.password_confirmation && errors.password_confirmation, required: true }), (0, jsx_runtime_1.jsx)(__1.Input, { label: t("Phone"), type: "text", name: "phone", onChange: handleChange, onBlur: handleBlur, value: values.phone, error: touched.phone && errors.phone }), fields &&
return ((0, jsx_runtime_1.jsxs)("form", __assign({ onSubmit: handleSubmit }, { children: [errors && errors.error && ((0, jsx_runtime_1.jsx)(__1.Text, __assign({ type: "danger" }, { children: errors.error }))), (0, jsx_runtime_1.jsx)(__1.Input, { label: fieldLabels["first_name"] || t("First name"), type: "text", name: "first_name", onChange: handleChange, onBlur: handleBlur, value: values.first_name, error: touched.first_name && errors.first_name, required: true }), (0, jsx_runtime_1.jsx)(__1.Input, { label: fieldLabels["last_name"] || t("Last name"), type: "text", name: "last_name", onChange: handleChange, onBlur: handleBlur, value: values.last_name, error: touched.last_name && errors.last_name, required: true }), (0, jsx_runtime_1.jsx)(__1.Input, { label: fieldLabels["email"] || t("Email"), className: "form-control grey", type: "email", name: "email", onChange: handleChange, onBlur: handleBlur, value: values.email, error: touched.email && errors.email, required: true }), (0, jsx_runtime_1.jsx)(__1.Input, { label: fieldLabels["password"] || t("Password"), type: "password", name: "password", onChange: handleChange, onBlur: handleBlur, value: values.password, error: touched.password && errors.password, helper: t("Password validation"), required: true }), (0, jsx_runtime_1.jsx)(__1.Input, { label: t("Repeat password"), type: "password", name: "password_confirmation", onChange: handleChange, onBlur: handleBlur, value: values.password_confirmation, error: touched.password_confirmation && errors.password_confirmation, required: true }), (0, jsx_runtime_1.jsx)(__1.Input, { label: fieldLabels["phone"] || t("Phone"), type: "text", name: "phone", onChange: handleChange, onBlur: handleBlur, value: values.phone, error: touched.phone && errors.phone }), fields &&
Array.isArray(fields.list) &&

@@ -160,3 +157,4 @@ fields.list

})
.map(function (field, index) { return ((0, jsx_runtime_1.jsx)(__1.Input, { required: isAdditionalRequiredField(field), label: t("AdditionalFields.".concat(field.name)), type: "text", name: field.name, onChange: handleChange, onBlur: handleBlur, value: String(values[field.name]) || "", error: errors[field.name] && touched[field.name] }, "".concat(field).concat(index))); }), fields &&
.map(function (field, index) { return ((0, jsx_runtime_1.jsx)(__1.Input, { required: isAdditionalRequiredField(field), label: fieldLabels["AdditionalFields.".concat(field.name)] ||
t("AdditionalFields.".concat(field.name)), type: "text", name: field.name, onChange: handleChange, onBlur: handleBlur, value: String(values[field.name]) || "", error: errors[field.name] && touched[field.name] }, "".concat(field).concat(index))); }), fields &&
fields.list &&

@@ -167,3 +165,4 @@ fields.list

})
.map(function (field, index) { return ((0, jsx_runtime_1.jsx)(__1.Checkbox, { label: t("AdditionalFields.".concat(field.name)), id: field.name, name: field.name, onChange: handleChange, onBlur: handleBlur }, "".concat(field.id).concat(index))); }), (0, jsx_runtime_1.jsx)(__1.Button, __assign({ mode: "secondary", type: "submit", loading: isSubmitting || fields.loading, block: true }, { children: t("Login.Signup") }))] })));
.map(function (field, index) { return ((0, jsx_runtime_1.jsx)(__1.Checkbox, { label: fieldLabels["AdditionalFields.".concat(field.name)] ||
t("AdditionalFields.".concat(field.name)), id: field.name, name: field.name, onChange: handleChange, onBlur: handleBlur }, "".concat(field.id).concat(index))); }), (0, jsx_runtime_1.jsx)(__1.Button, __assign({ mode: "secondary", type: "submit", loading: isSubmitting || fields.loading, block: true }, { children: t("Login.Signup") }))] })));
} })), (0, jsx_runtime_1.jsxs)(__1.Text, __assign({ size: "14" }, { children: [t("RegisterForm.Already have account"), " ", (0, jsx_runtime_1.jsx)(__1.Link, __assign({ underline: true, onClick: function () { return onLoginLink && onLoginLink(); } }, { children: t("Login.Signin") }))] }))] })));

@@ -170,0 +169,0 @@ };

@@ -14,2 +14,3 @@ import i18n from "i18next";

"Course.Agenda": string;
"Course.topicPreview": string;
"Course.Finished": string;

@@ -135,2 +136,3 @@ "Course.Lesson": string;

"Course.Agenda": string;
"Course.topicPreview": string;
"Course.Finished": string;

@@ -137,0 +139,0 @@ "Course.Lesson": string;

@@ -24,2 +24,3 @@ "use strict";

"Course.Agenda": "Agenda",
"Course.topicPreview": "Preview",
"Course.Finished": "Finished",

@@ -145,2 +146,3 @@ "Course.Lesson": "Module",

"Course.Agenda": "Plan kursu",
"Course.topicPreview": "Podgląd",
"Course.Finished": "Ukończono",

@@ -147,0 +149,0 @@ "Course.Lesson": "Moduł",

@@ -124,3 +124,3 @@ "use strict";

min: 0,
max: 100,
max: 16,
step: 1,

@@ -137,3 +137,3 @@ value: initData.buttonRadius || 0,

min: 0,
max: 100,
max: 16,
step: 1,

@@ -144,3 +144,3 @@ value: initData.inputRadius || 0,

min: 0,
max: 100,
max: 16,
step: 1,

@@ -147,0 +147,0 @@ value: initData.cardRadius || 0,

{
"name": "@escolalms/components",
"version": "0.0.42",
"version": "0.0.43",
"main": "lib/index.js",

@@ -5,0 +5,0 @@ "license": "MIT",

@@ -24,2 +24,4 @@ ```js

const markdownLink = `My favorite search engine is [Duck Duck Go](https://duckduckgo.com "The best search engine for privacy").`;
<React.Fragment>

@@ -32,2 +34,3 @@ <ThemeTester flexDirection={"column"} alignItems={"start"}>

>{`**8h 12 min** time left`}</MarkdownRenderer>
<MarkdownRenderer children={markdownLink} />
<MarkdownRenderer children={markdownTable} />

@@ -34,0 +37,0 @@ <MarkdownRenderer children={markdownImage} />

@@ -7,2 +7,12 @@ ```js

const fieldLabels = {
email: <strong>Overwrite email label</strong>,
"AdditionalFields.Privacy Policy": (
<Text>
By checking this fields you accept{" "}
<a href="https://wellms.io">Privacy Policy</a>
</Text>
),
};
<React.Fragment>

@@ -12,2 +22,3 @@ <EscolaLMSContextProvider apiUrl="https://api-stage.escolalms.com/">

<RegisterForm
fieldLabels={fieldLabels}
onSuccess={() => console.log("onSuccess")}

@@ -14,0 +25,0 @@ onError={(err) => console.log("onError", err.data)}

@@ -19,2 +19,3 @@ import i18n from "i18next";

"Course.Agenda": "Agenda",
"Course.topicPreview": "Preview",
"Course.Finished": "Finished",

@@ -141,2 +142,3 @@ "Course.Lesson": "Module",

"Course.Agenda": "Plan kursu",
"Course.topicPreview": "Podgląd",
"Course.Finished": "Ukończono",

@@ -143,0 +145,0 @@ "Course.Lesson": "Moduł",

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc