@escolalms/components
Advanced tools
Comparing version 0.0.42 to 0.0.43
@@ -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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
16953571
25819