@escolalms/components - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

lib/components/atoms/IconTitle/IconTitle.js

@@ -46,3 +46,3 @@ "use strict";
 var titleUtils_1 = require("../../../utils/components/primitives/titleUtils");
-var StyledHeader = styled_components_1.default.h3(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.lms-icon-title {\n    font-size: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    margin: 0 0 20px 0;\n    font-family: ", ";\n    display: flex;\n    flex-wrap: wrap;\n    color: ", ";\n    .icon {\n      width: 0.7em;\n      display: flex;\n      align-items: center;\n      margin-right: 14px;\n      svg {\n        fill: ", ";\n        flex-shrink: 0;\n      }\n    }\n    .title {\n      font-weight: 700;\n      margin-right: 0.4em;\n    }\n    .subtitle {\n      font-size: 0.65em;\n    }\n  }\n"], ["\n  &.lms-icon-title {\n    font-size: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    margin: 0 0 20px 0;\n    font-family: ", ";\n    display: flex;\n    flex-wrap: wrap;\n    color: ", ";\n    .icon {\n      width: 0.7em;\n      display: flex;\n      align-items: center;\n      margin-right: 14px;\n      svg {\n        fill: ", ";\n        flex-shrink: 0;\n      }\n    }\n    .title {\n      font-weight: 700;\n      margin-right: 0.4em;\n    }\n    .subtitle {\n      font-size: 0.65em;\n    }\n  }\n"])), function (props) {
+var StyledHeader = styled_components_1.default.h3(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.lms-icon-title {\n    font-size: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    margin: 0 0 20px 0;\n    font-family: ", ";\n    display: flex;\n    flex-wrap: wrap;\n    color: ", ";\n    .icon {\n      width: 0.9em;\n      display: flex;\n      align-items: center;\n      margin-right: 0.6em;\n      svg {\n        fill: ", ";\n        max-width: 100%;\n        height: auto;\n        flex-shrink: 0;\n      }\n    }\n    .title {\n      font-weight: 700;\n      margin-right: 0.4em;\n    }\n    .subtitle {\n      font-size: 0.65em;\n    }\n  }\n"], ["\n  &.lms-icon-title {\n    font-size: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    margin: 0 0 20px 0;\n    font-family: ", ";\n    display: flex;\n    flex-wrap: wrap;\n    color: ", ";\n    .icon {\n      width: 0.9em;\n      display: flex;\n      align-items: center;\n      margin-right: 0.6em;\n      svg {\n        fill: ", ";\n        max-width: 100%;\n        height: auto;\n        flex-shrink: 0;\n      }\n    }\n    .title {\n      font-weight: 700;\n      margin-right: 0.4em;\n    }\n    .subtitle {\n      font-size: 0.65em;\n    }\n  }\n"])), function (props) {
     return (0, titleUtils_1.setFontSizeByHeaderLevel)(props.level, props.mobile);
@@ -49,0 +49,0 @@ }, function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) {

lib/components/atoms/Interval/Interval.js

@@ -31,7 +31,3 @@ "use strict";
     return props.theme.mode !== "dark" ? props.theme.gray3 : props.theme.gray4;
-}, function (props) {
-    return props.theme.mode !== "dark"
-        ? props.theme.primaryColor
-        : props.theme.backgroundDarkInterval;
-}, function (_a) {
+}, function (props) { return props.theme.primaryColor; }, function (_a) {
     var max = _a.max, current = _a.current;
@@ -38,0 +34,0 @@ return "".concat((0, utils_1.calcPercentage)(current, max));

lib/components/atoms/ProgressBar/ProgressBar.js

@@ -28,3 +28,3 @@ "use strict";
 var utils_1 = require("../../../utils/utils");
-var StyledDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  color: ", ";\n  font-family: ", ";\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  .progress-container {\n    margin-bottom: 6px;\n    display: flex;\n    align-items: center;\n    .progress-bars {\n      flex: 1;\n      height: 10px;\n      position: relative;\n      .empty {\n        display: block;\n        background: ", ";\n        height: 100%;\n        border-radius: 10px;\n      }\n      .filled {\n        position: absolute;\n        top: 0;\n        background: ", ";\n        display: block;\n        height: 100%;\n        border-radius: 10px;\n        transition: 0.2s width ease-in-out;\n      }\n    }\n    .percentage-value {\n      flex: 0 0 40px;\n      font-size: 14px;\n      margin-left: 5px;\n      height: 22px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n"], ["\n  margin: 0;\n  padding: 0;\n  color: ", ";\n  font-family: ", ";\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  .progress-container {\n    margin-bottom: 6px;\n    display: flex;\n    align-items: center;\n    .progress-bars {\n      flex: 1;\n      height: 10px;\n      position: relative;\n      .empty {\n        display: block;\n        background: ", ";\n        height: 100%;\n        border-radius: 10px;\n      }\n      .filled {\n        position: absolute;\n        top: 0;\n        background: ", ";\n        display: block;\n        height: 100%;\n        border-radius: 10px;\n        transition: 0.2s width ease-in-out;\n      }\n    }\n    .percentage-value {\n      flex: 0 0 40px;\n      font-size: 14px;\n      margin-left: 5px;\n      height: 22px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n"])), function (props) {
+var StyledDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  color: ", ";\n  font-family: ", ";\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  .progress-container {\n    &:not(:last-child) {\n      margin-bottom: 6px;\n    }\n\n    display: flex;\n    align-items: center;\n    .progress-bars {\n      flex: 1;\n      height: 10px;\n      position: relative;\n      .empty {\n        display: block;\n        background: ", ";\n        height: 100%;\n        border-radius: 10px;\n      }\n      .filled {\n        position: absolute;\n        top: 0;\n        background: ", ";\n        display: block;\n        height: 100%;\n        border-radius: 10px;\n        transition: 0.2s width ease-in-out;\n      }\n    }\n    .percentage-value {\n      flex: 0 0 40px;\n      font-size: 14px;\n      margin-left: 5px;\n      height: 22px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n"], ["\n  margin: 0;\n  padding: 0;\n  color: ", ";\n  font-family: ", ";\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  .progress-container {\n    &:not(:last-child) {\n      margin-bottom: 6px;\n    }\n\n    display: flex;\n    align-items: center;\n    .progress-bars {\n      flex: 1;\n      height: 10px;\n      position: relative;\n      .empty {\n        display: block;\n        background: ", ";\n        height: 100%;\n        border-radius: 10px;\n      }\n      .filled {\n        position: absolute;\n        top: 0;\n        background: ", ";\n        display: block;\n        height: 100%;\n        border-radius: 10px;\n        transition: 0.2s width ease-in-out;\n      }\n    }\n    .percentage-value {\n      flex: 0 0 40px;\n      font-size: 14px;\n      margin-left: 5px;\n      height: 22px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n"])), function (props) {
     return props.theme.mode !== "dark" ? props.theme.gray1 : props.theme.white;
@@ -35,7 +35,3 @@ }, function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) {
         : props.theme.gray2;
-}, function (props) {
-    return props.theme.mode === "dark"
-        ? props.theme.backgroundDarkProgress
-        : props.theme.primaryColor;
-});
+}, function (props) { return props.theme.primaryColor; });
 var ProgressBar = function (props) {
@@ -42,0 +38,0 @@ var t = (0, react_i18next_1.useTranslation)().t;

lib/components/atoms/Rating/Rating.js

@@ -33,11 +33,5 @@ "use strict";
 };
-var StyledRating = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.lsm-rating {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-family: ", ";\n    color: ", ";\n    display: inline-flex;\n    align-items: center;\n    .filled-star-icon {\n      ", "\n    }\n    svg {\n      font-size: ", ";\n      padding-right: 2px;\n    }\n    .label {\n      min-width: 48px;\n      margin-left: 5px;\n      font-size: 16px;\n      font-weight: 700;\n    }\n  }\n"], ["\n  &.lsm-rating {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-family: ", ";\n    color: ", ";\n    display: inline-flex;\n    align-items: center;\n    .filled-star-icon {\n      ", "\n    }\n    svg {\n      font-size: ", ";\n      padding-right: 2px;\n    }\n    .label {\n      min-width: 48px;\n      margin-left: 5px;\n      font-size: 16px;\n      font-weight: 700;\n    }\n  }\n"])), function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) {
-    if (props.theme.mode === "dark") {
-        return props.theme.white;
-    }
-    return props.theme.primaryColor;
-}, function (props) {
-    if (props.theme.mode === "dark") {
-        return "color: red;";
-    }
+var StyledRating = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.lsm-rating {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-family: ", ";\n    display: inline-flex;\n    align-items: center;\n    .filled-star-icon {\n      color: ", ";\n    }\n    svg {\n      font-size: ", ";\n      padding-right: 2px;\n    }\n    .label {\n      min-width: 48px;\n      margin-left: 5px;\n      font-size: 16px;\n      font-weight: 700;\n    }\n  }\n"], ["\n  &.lsm-rating {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-family: ", ";\n    display: inline-flex;\n    align-items: center;\n    .filled-star-icon {\n      color: ", ";\n    }\n    svg {\n      font-size: ", ";\n      padding-right: 2px;\n    }\n    .label {\n      min-width: 48px;\n      margin-left: 5px;\n      font-size: 16px;\n      font-weight: 700;\n    }\n  }\n"])), function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (_a) {
+    var theme = _a.theme;
+    return theme.primaryColor;
 }, function (props) { return (props.size ? props.size : "15px"); });
@@ -44,0 +38,0 @@ var Rating = function (props) {

lib/components/atoms/Slider/Slider.d.ts

@@ -1,4 +0,8 @@
-/// <reference types="react" />
+import * as React from "react";
 import { Settings } from "react-slick";
-export interface SliderProps {
+interface StyledSliderProps {
+    mobile?: boolean;
+    borderRadius?: React.CSSProperties["borderRadius"];
+}
+export interface SliderProps extends StyledSliderProps {
     settings: Settings;
@@ -9,3 +13,3 @@ dotsPosition?: "top" | "top right" | "top left" | "bottom" | "bottom left" | "bottom right";
 export declare const Slider: React.FC<SliderProps>;
-declare const _default: import("react").ForwardRefExoticComponent<{
+declare const _default: React.ForwardRefExoticComponent<{
     [x: string]: any;
@@ -12,0 +16,0 @@ [x: number]: any;

lib/components/atoms/Slider/Slider.js

@@ -48,3 +48,3 @@ "use strict";
 var react_slick_1 = __importDefault(require("react-slick"));
-var StyledDiv = (0, styled_components_1.default)("div")(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  .slick-slider {\n    position: relative;\n\n    display: block;\n    box-sizing: border-box;\n\n    user-select: none;\n\n    -webkit-touch-callout: none;\n    touch-action: pan-y;\n    -webkit-tap-highlight-color: transparent;\n\n    ", "\n  }\n\n  .slick-list {\n    position: relative;\n\n    display: block;\n    overflow: hidden;\n\n    margin: 0;\n    padding: 0;\n  }\n  .slick-list:focus {\n    outline: none;\n  }\n  .slick-list.dragging {\n    cursor: pointer;\n    cursor: hand;\n  }\n\n  .slick-track {\n    position: relative;\n    top: 0;\n    left: 0;\n\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .slick-track:before,\n  .slick-track:after {\n    display: table;\n\n    content: \"\";\n  }\n  .slick-track:after {\n    clear: both;\n  }\n\n  .slick-slider .slick-track,\n  .slick-slider .slick-list {\n    transform: translate3d(0, 0, 0);\n  }\n\n  .slick-loading .slick-track {\n    visibility: hidden;\n  }\n\n  .slick-slide {\n    display: none;\n    float: left;\n\n    height: 100%;\n    min-height: 1px;\n  }\n  [dir=\"rtl\"] .slick-slide {\n    float: right;\n  }\n  .slick-slide img {\n    display: block;\n  }\n  .slick-slide.slick-loading img {\n    display: none;\n  }\n  .slick-slide.dragging img {\n    pointer-events: none;\n  }\n  .slick-initialized .slick-slide {\n    display: block;\n  }\n  .slick-loading .slick-slide {\n    visibility: hidden;\n  }\n  .slick-vertical .slick-slide {\n    display: block;\n\n    height: auto;\n\n    border: 1px solid transparent;\n  }\n  .slick-arrow.slick-hidden {\n    display: none;\n  }\n\n  .slick-loading .slick-list {\n    background: #fff center center no-repeat;\n  }\n\n  /* Arrows */\n  .slick-prev,\n  .slick-next {\n    font-size: 0;\n    line-height: 0;\n\n    position: absolute;\n    top: 50%;\n\n    display: block;\n\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    transform: translate(0, -50%);\n\n    cursor: pointer;\n\n    color: transparent;\n    border: none;\n    outline: none;\n    background: transparent;\n  }\n\n  .slick-prev {\n    left: -25px;\n  }\n\n  .slick-prev:before,\n  .slick-next:before {\n    font-size: 20px;\n    line-height: 1;\n\n    opacity: 0.75;\n    color: white;\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .slick-prev:before {\n    content: \"\u2190\";\n  }\n  .slick-next {\n    right: -25px;\n  }\n  .slick-next:before {\n    content: \"\u2192\";\n  }\n  .slick-prev:hover,\n  .slick-prev:focus,\n  .slick-next:hover,\n  .slick-next:focus {\n    color: transparent;\n    outline: none;\n    background: transparent;\n  }\n  .slick-prev:hover:before,\n  .slick-prev:focus:before,\n  .slick-next:hover:before,\n  .slick-next:focus:before {\n    opacity: 1;\n  }\n  .slick-prev.slick-disabled:before,\n  .slick-next.slick-disabled:before {\n    opacity: 0.25;\n  }\n\n  [dir=\"rtl\"] .slick-prev {\n    right: -25px;\n    left: auto;\n  }\n\n  [dir=\"rtl\"] .slick-prev:before {\n    content: \"\u2192\";\n  }\n\n  [dir=\"rtl\"] .slick-next {\n    right: auto;\n    left: -25px;\n  }\n\n  [dir=\"rtl\"] .slick-next:before {\n    content: \"\u2190\";\n  }\n\n  /* Dots */\n  .slick-dotted.slick-slider {\n    margin-bottom: 30px;\n  }\n\n  .slick-dots {\n    position: absolute;\n    ", "\n\n    display: block;\n\n    padding: 0;\n    margin: 0;\n\n    list-style: none;\n\n    text-align: center;\n  }\n  .slick-dots li {\n    position: relative;\n\n    display: inline-block;\n\n    width: 13px;\n    height: 13px;\n    margin: 0 4px;\n    padding: 0;\n\n    cursor: pointer;\n\n    box-sizing: border-box;\n    border-radius: 100%;\n    border: 1px solid ", ";\n\n    background: transparent;\n\n    transition: background-color 0.5s;\n\n    &:hover {\n      border: 1px solid ", ";\n      background: ", ";\n      opacity: 0.6;\n    }\n\n    &.slick-active {\n      border: 1px solid ", ";\n      background: ", ";\n    }\n  }\n\n  .slick-dots li button {\n    font-size: 0;\n    line-height: 0;\n\n    display: block;\n    border: none;\n    appearance: none;\n\n    width: 100%;\n    height: 100%;\n    padding: 0;\n\n    cursor: pointer;\n\n    color: transparent;\n    outline: none;\n    background: transparent;\n  }\n  .slick-dots li button:hover,\n  .slick-dots li button:focus {\n    outline: none;\n  }\n  .slick-dots li button:hover:before,\n  .slick-dots li button:focus:before {\n    opacity: 1;\n  }\n"], ["\n  .slick-slider {\n    position: relative;\n\n    display: block;\n    box-sizing: border-box;\n\n    user-select: none;\n\n    -webkit-touch-callout: none;\n    touch-action: pan-y;\n    -webkit-tap-highlight-color: transparent;\n\n    ", "\n  }\n\n  .slick-list {\n    position: relative;\n\n    display: block;\n    overflow: hidden;\n\n    margin: 0;\n    padding: 0;\n  }\n  .slick-list:focus {\n    outline: none;\n  }\n  .slick-list.dragging {\n    cursor: pointer;\n    cursor: hand;\n  }\n\n  .slick-track {\n    position: relative;\n    top: 0;\n    left: 0;\n\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .slick-track:before,\n  .slick-track:after {\n    display: table;\n\n    content: \"\";\n  }\n  .slick-track:after {\n    clear: both;\n  }\n\n  .slick-slider .slick-track,\n  .slick-slider .slick-list {\n    transform: translate3d(0, 0, 0);\n  }\n\n  .slick-loading .slick-track {\n    visibility: hidden;\n  }\n\n  .slick-slide {\n    display: none;\n    float: left;\n\n    height: 100%;\n    min-height: 1px;\n  }\n  [dir=\"rtl\"] .slick-slide {\n    float: right;\n  }\n  .slick-slide img {\n    display: block;\n  }\n  .slick-slide.slick-loading img {\n    display: none;\n  }\n  .slick-slide.dragging img {\n    pointer-events: none;\n  }\n  .slick-initialized .slick-slide {\n    display: block;\n  }\n  .slick-loading .slick-slide {\n    visibility: hidden;\n  }\n  .slick-vertical .slick-slide {\n    display: block;\n\n    height: auto;\n\n    border: 1px solid transparent;\n  }\n  .slick-arrow.slick-hidden {\n    display: none;\n  }\n\n  .slick-loading .slick-list {\n    background: #fff center center no-repeat;\n  }\n\n  /* Arrows */\n  .slick-prev,\n  .slick-next {\n    font-size: 0;\n    line-height: 0;\n\n    position: absolute;\n    top: 50%;\n\n    display: block;\n\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    transform: translate(0, -50%);\n\n    cursor: pointer;\n\n    color: transparent;\n    border: none;\n    outline: none;\n    background: transparent;\n  }\n\n  .slick-prev {\n    left: -25px;\n  }\n\n  .slick-prev:before,\n  .slick-next:before {\n    font-size: 20px;\n    line-height: 1;\n\n    opacity: 0.75;\n    color: white;\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .slick-prev:before {\n    content: \"\u2190\";\n  }\n  .slick-next {\n    right: -25px;\n  }\n  .slick-next:before {\n    content: \"\u2192\";\n  }\n  .slick-prev:hover,\n  .slick-prev:focus,\n  .slick-next:hover,\n  .slick-next:focus {\n    color: transparent;\n    outline: none;\n    background: transparent;\n  }\n  .slick-prev:hover:before,\n  .slick-prev:focus:before,\n  .slick-next:hover:before,\n  .slick-next:focus:before {\n    opacity: 1;\n  }\n  .slick-prev.slick-disabled:before,\n  .slick-next.slick-disabled:before {\n    opacity: 0.25;\n  }\n\n  [dir=\"rtl\"] .slick-prev {\n    right: -25px;\n    left: auto;\n  }\n\n  [dir=\"rtl\"] .slick-prev:before {\n    content: \"\u2192\";\n  }\n\n  [dir=\"rtl\"] .slick-next {\n    right: auto;\n    left: -25px;\n  }\n\n  [dir=\"rtl\"] .slick-next:before {\n    content: \"\u2190\";\n  }\n\n  /* Dots */\n  .slick-dotted.slick-slider {\n    margin-bottom: 30px;\n  }\n\n  .slick-dots {\n    position: absolute;\n    ", "\n\n    display: block;\n\n    padding: 0;\n    margin: 0;\n\n    list-style: none;\n\n    text-align: center;\n  }\n  .slick-dots li {\n    position: relative;\n\n    display: inline-block;\n\n    width: 13px;\n    height: 13px;\n    margin: 0 4px;\n    padding: 0;\n\n    cursor: pointer;\n\n    box-sizing: border-box;\n    border-radius: 100%;\n    border: 1px solid ", ";\n\n    background: transparent;\n\n    transition: background-color 0.5s;\n\n    &:hover {\n      border: 1px solid ", ";\n      background: ", ";\n      opacity: 0.6;\n    }\n\n    &.slick-active {\n      border: 1px solid ", ";\n      background: ", ";\n    }\n  }\n\n  .slick-dots li button {\n    font-size: 0;\n    line-height: 0;\n\n    display: block;\n    border: none;\n    appearance: none;\n\n    width: 100%;\n    height: 100%;\n    padding: 0;\n\n    cursor: pointer;\n\n    color: transparent;\n    outline: none;\n    background: transparent;\n  }\n  .slick-dots li button:hover,\n  .slick-dots li button:focus {\n    outline: none;\n  }\n  .slick-dots li button:hover:before,\n  .slick-dots li button:focus:before {\n    opacity: 1;\n  }\n"])), function (props) {
+var StyledDiv = (0, styled_components_1.default)("div")(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  .slick-slider {\n    position: relative;\n\n    display: block;\n    box-sizing: border-box;\n\n    user-select: none;\n\n    -webkit-touch-callout: none;\n    touch-action: pan-y;\n    -webkit-tap-highlight-color: transparent;\n\n    ", "\n  }\n\n  .slick-list {\n    position: relative;\n\n    display: block;\n    overflow: hidden;\n\n    margin: 0;\n    padding: 0;\n  }\n  .slick-list:focus {\n    outline: none;\n  }\n  .slick-list.dragging {\n    cursor: pointer;\n    cursor: hand;\n  }\n\n  .slick-track {\n    position: relative;\n    top: 0;\n    left: 0;\n\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .slick-track:before,\n  .slick-track:after {\n    display: table;\n\n    content: \"\";\n  }\n  .slick-track:after {\n    clear: both;\n  }\n\n  .slick-slider .slick-track,\n  .slick-slider .slick-list {\n    transform: translate3d(0, 0, 0);\n  }\n\n  .slick-loading .slick-track {\n    visibility: hidden;\n  }\n\n  .slick-slide {\n    display: none;\n    float: left;\n\n    height: 100%;\n    min-height: 1px;\n  }\n  [dir=\"rtl\"] .slick-slide {\n    float: right;\n  }\n  .slick-slide img {\n    display: block;\n  }\n  .slick-slide.slick-loading img {\n    display: none;\n  }\n  .slick-slide.dragging img {\n    pointer-events: none;\n  }\n  .slick-initialized .slick-slide {\n    display: block;\n  }\n  .slick-loading .slick-slide {\n    visibility: hidden;\n  }\n  .slick-vertical .slick-slide {\n    display: block;\n\n    height: auto;\n\n    border: 1px solid transparent;\n  }\n  .slick-arrow.slick-hidden {\n    display: none;\n  }\n\n  .slick-loading .slick-list {\n    background: #fff center center no-repeat;\n  }\n\n  /* Arrows */\n  .slick-prev,\n  .slick-next {\n    font-size: 0;\n    line-height: 0;\n\n    position: absolute;\n    top: 50%;\n\n    display: block;\n\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    transform: translate(0, -50%);\n\n    cursor: pointer;\n\n    color: transparent;\n    border: none;\n    outline: none;\n    background: transparent;\n  }\n\n  .slick-prev {\n    left: -25px;\n  }\n\n  .slick-prev:before,\n  .slick-next:before {\n    font-size: 20px;\n    line-height: 1;\n\n    opacity: 0.75;\n    color: white;\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .slick-prev:before {\n    content: \"\u2190\";\n  }\n  .slick-next {\n    right: -25px;\n  }\n  .slick-next:before {\n    content: \"\u2192\";\n  }\n  .slick-prev:hover,\n  .slick-prev:focus,\n  .slick-next:hover,\n  .slick-next:focus {\n    color: transparent;\n    outline: none;\n    background: transparent;\n  }\n  .slick-prev:hover:before,\n  .slick-prev:focus:before,\n  .slick-next:hover:before,\n  .slick-next:focus:before {\n    opacity: 1;\n  }\n  .slick-prev.slick-disabled:before,\n  .slick-next.slick-disabled:before {\n    opacity: 0.25;\n  }\n\n  [dir=\"rtl\"] .slick-prev {\n    right: -25px;\n    left: auto;\n  }\n\n  [dir=\"rtl\"] .slick-prev:before {\n    content: \"\u2192\";\n  }\n\n  [dir=\"rtl\"] .slick-next {\n    right: auto;\n    left: -25px;\n  }\n\n  [dir=\"rtl\"] .slick-next:before {\n    content: \"\u2190\";\n  }\n\n  /* Dots */\n  .slick-dotted.slick-slider {\n    margin-bottom: 30px;\n  }\n\n  .slick-dots {\n    position: absolute;\n    ", "\n\n    display: block;\n\n    padding: 0;\n    margin: 0;\n\n    list-style: none;\n\n    text-align: center;\n  }\n  .slick-dots li {\n    position: relative;\n\n    display: inline-block;\n\n    width: ", ";\n    height: ", ";\n    margin: 0 4px;\n    padding: 0;\n\n    cursor: pointer;\n\n    box-sizing: border-box;\n    border-radius: ", ";\n    border: 1px solid ", ";\n\n    background: transparent;\n\n    transition: background-color 0.5s;\n\n    &:hover {\n      border: 1px solid ", ";\n      background: ", ";\n      opacity: 0.6;\n    }\n\n    &.slick-active {\n      border: 1px solid ", ";\n      background: ", ";\n    }\n  }\n\n  .slick-dots li button {\n    font-size: 0;\n    line-height: 0;\n\n    display: block;\n    border: none;\n    appearance: none;\n\n    width: 100%;\n    height: 100%;\n    padding: 0;\n\n    cursor: pointer;\n\n    color: transparent;\n    outline: none;\n    background: transparent;\n  }\n  .slick-dots li button:hover,\n  .slick-dots li button:focus {\n    outline: none;\n  }\n  .slick-dots li button:hover:before,\n  .slick-dots li button:focus:before {\n    opacity: 1;\n  }\n"], ["\n  .slick-slider {\n    position: relative;\n\n    display: block;\n    box-sizing: border-box;\n\n    user-select: none;\n\n    -webkit-touch-callout: none;\n    touch-action: pan-y;\n    -webkit-tap-highlight-color: transparent;\n\n    ", "\n  }\n\n  .slick-list {\n    position: relative;\n\n    display: block;\n    overflow: hidden;\n\n    margin: 0;\n    padding: 0;\n  }\n  .slick-list:focus {\n    outline: none;\n  }\n  .slick-list.dragging {\n    cursor: pointer;\n    cursor: hand;\n  }\n\n  .slick-track {\n    position: relative;\n    top: 0;\n    left: 0;\n\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  .slick-track:before,\n  .slick-track:after {\n    display: table;\n\n    content: \"\";\n  }\n  .slick-track:after {\n    clear: both;\n  }\n\n  .slick-slider .slick-track,\n  .slick-slider .slick-list {\n    transform: translate3d(0, 0, 0);\n  }\n\n  .slick-loading .slick-track {\n    visibility: hidden;\n  }\n\n  .slick-slide {\n    display: none;\n    float: left;\n\n    height: 100%;\n    min-height: 1px;\n  }\n  [dir=\"rtl\"] .slick-slide {\n    float: right;\n  }\n  .slick-slide img {\n    display: block;\n  }\n  .slick-slide.slick-loading img {\n    display: none;\n  }\n  .slick-slide.dragging img {\n    pointer-events: none;\n  }\n  .slick-initialized .slick-slide {\n    display: block;\n  }\n  .slick-loading .slick-slide {\n    visibility: hidden;\n  }\n  .slick-vertical .slick-slide {\n    display: block;\n\n    height: auto;\n\n    border: 1px solid transparent;\n  }\n  .slick-arrow.slick-hidden {\n    display: none;\n  }\n\n  .slick-loading .slick-list {\n    background: #fff center center no-repeat;\n  }\n\n  /* Arrows */\n  .slick-prev,\n  .slick-next {\n    font-size: 0;\n    line-height: 0;\n\n    position: absolute;\n    top: 50%;\n\n    display: block;\n\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    transform: translate(0, -50%);\n\n    cursor: pointer;\n\n    color: transparent;\n    border: none;\n    outline: none;\n    background: transparent;\n  }\n\n  .slick-prev {\n    left: -25px;\n  }\n\n  .slick-prev:before,\n  .slick-next:before {\n    font-size: 20px;\n    line-height: 1;\n\n    opacity: 0.75;\n    color: white;\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .slick-prev:before {\n    content: \"\u2190\";\n  }\n  .slick-next {\n    right: -25px;\n  }\n  .slick-next:before {\n    content: \"\u2192\";\n  }\n  .slick-prev:hover,\n  .slick-prev:focus,\n  .slick-next:hover,\n  .slick-next:focus {\n    color: transparent;\n    outline: none;\n    background: transparent;\n  }\n  .slick-prev:hover:before,\n  .slick-prev:focus:before,\n  .slick-next:hover:before,\n  .slick-next:focus:before {\n    opacity: 1;\n  }\n  .slick-prev.slick-disabled:before,\n  .slick-next.slick-disabled:before {\n    opacity: 0.25;\n  }\n\n  [dir=\"rtl\"] .slick-prev {\n    right: -25px;\n    left: auto;\n  }\n\n  [dir=\"rtl\"] .slick-prev:before {\n    content: \"\u2192\";\n  }\n\n  [dir=\"rtl\"] .slick-next {\n    right: auto;\n    left: -25px;\n  }\n\n  [dir=\"rtl\"] .slick-next:before {\n    content: \"\u2190\";\n  }\n\n  /* Dots */\n  .slick-dotted.slick-slider {\n    margin-bottom: 30px;\n  }\n\n  .slick-dots {\n    position: absolute;\n    ", "\n\n    display: block;\n\n    padding: 0;\n    margin: 0;\n\n    list-style: none;\n\n    text-align: center;\n  }\n  .slick-dots li {\n    position: relative;\n\n    display: inline-block;\n\n    width: ", ";\n    height: ", ";\n    margin: 0 4px;\n    padding: 0;\n\n    cursor: pointer;\n\n    box-sizing: border-box;\n    border-radius: ", ";\n    border: 1px solid ", ";\n\n    background: transparent;\n\n    transition: background-color 0.5s;\n\n    &:hover {\n      border: 1px solid ", ";\n      background: ", ";\n      opacity: 0.6;\n    }\n\n    &.slick-active {\n      border: 1px solid ", ";\n      background: ", ";\n    }\n  }\n\n  .slick-dots li button {\n    font-size: 0;\n    line-height: 0;\n\n    display: block;\n    border: none;\n    appearance: none;\n\n    width: 100%;\n    height: 100%;\n    padding: 0;\n\n    cursor: pointer;\n\n    color: transparent;\n    outline: none;\n    background: transparent;\n  }\n  .slick-dots li button:hover,\n  .slick-dots li button:focus {\n    outline: none;\n  }\n  .slick-dots li button:hover:before,\n  .slick-dots li button:focus:before {\n    opacity: 1;\n  }\n"])), function (props) {
     if (!props.settings.dots) {
@@ -80,2 +80,4 @@ return "";
     }
+}, function (props) { return (props.mobile ? "9px" : "13px"); }, function (props) { return (props.mobile ? "9px" : "13px"); }, function (props) {
+    return props.borderRadius ? props.borderRadius : "50%";
 }, function (props) { return props.theme.gray3 || "#000000"; }, function (props) { return props.theme.primaryColor || "#000000"; }, function (props) { return props.theme.primaryColor || "#000000"; }, function (props) { return props.theme.primaryColor || "#000000"; }, function (props) { return props.theme.primaryColor || "#000000"; });
@@ -82,0 +84,0 @@ var Slider = function (props) {

lib/components/atoms/Tabs/Tabs.d.ts

@@ -11,3 +11,3 @@ import * as React from "react";
     defaultActiveKey: number;
-    onClick: (index: number) => void;
+    onClick?: (key: number) => void;
 }
@@ -14,0 +14,0 @@ export declare const Tabs: React.FC<TabsProps>;

lib/components/atoms/Tabs/Tabs.js

@@ -57,7 +57,10 @@ "use strict";
 var Tabs = function (props) {
-    var _a = props.tabs, tabs = _a === void 0 ? [] : _a, _b = props.defaultActiveKey, defaultActiveKey = _b === void 0 ? tabs[0].key : _b;
+    var _a = props.tabs, tabs = _a === void 0 ? [] : _a, _b = props.defaultActiveKey, defaultActiveKey = _b === void 0 ? tabs[0].key : _b, onClick = props.onClick;
     var _c = React.useState(defaultActiveKey), selectedTab = _c[0], setSelectedTab = _c[1];
     var panel = tabs && tabs.find(function (tab) { return tab.key === selectedTab; });
     return ((0, jsx_runtime_1.jsxs)(StyledTabs, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "tabs-menu" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "tabs-menu-inner" }, { children: tabs.map(function (tab) {
-                        return ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", className: "tab-menu-btn ".concat(selectedTab === tab.key ? "active" : ""), id: "tab-menu-".concat(tab.key), onClick: function () { return setSelectedTab(tab.key); } }, { children: tab.label }), tab.key));
+                        return ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", className: "tab-menu-btn ".concat(selectedTab === tab.key ? "active" : ""), id: "tab-menu-".concat(tab.key), onClick: function () {
+                                setSelectedTab(tab.key);
+                                onClick && onClick(tab.key);
+                            } }, { children: tab.label }), tab.key));
                     }) })) })), (0, jsx_runtime_1.jsx)("div", __assign({ id: "tabpanel-".concat(selectedTab), className: "tabs-panel" }, { children: (0, jsx_runtime_1.jsx)(React.Fragment, { children: panel && panel.component }) }))] }));
@@ -64,0 +67,0 @@ };

lib/components/molecules/CourseCard/CourseCard.d.ts

@@ -21,14 +21,20 @@ import * as React from "react";
 }
-export interface CourseCardProps {
+interface StyledCourseCardProps {
+    mobile?: boolean;
+    hideImage?: boolean;
+}
+export interface CourseCardProps extends StyledCourseCardProps {
     id: number;
     image?: Image;
     title: ReactNode;
-    categories: Categories;
+    categories?: Categories;
     tags?: Tag[];
-    lessonCount: number;
-    subtitle: ReactNode;
-    hideImage?: boolean;
+    lessonCount?: number;
+    subtitle?: ReactNode;
     onImageClick?: () => void;
     onTagClick?: (tagId: number) => void;
     onButtonClick?: (cardId: number) => void;
+    buttonText?: string;
+    onSecondaryButtonClick?: () => void;
+    secondaryButtonText?: string;
     progress?: ProgressBarProps;
@@ -35,0 +41,0 @@ }

lib/components/molecules/CourseCard/CourseCard.js

@@ -17,4 +17,24 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
@@ -24,6 +44,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var chroma_js_1 = require("chroma-js");
+var React = __importStar(require("react"));
 var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var Badge_1 = require("../../atoms/Badge/Badge");
@@ -36,14 +56,17 @@ var Button_1 = require("../../atoms/Button/Button");
 var Title_1 = require("../../atoms/Typography/Title");
+var Link_1 = require("../../atoms/Link/Link");
 var IconOpenBook = function () {
     return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: "18", height: "17", viewBox: "0 0 18 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M1.5 1.98621H6C6.79565 1.98621 7.55871 2.30228 8.12132 2.86489C8.68393 3.42749 9 4.19056 9 4.98621V15.4862C9 14.8895 8.76295 14.3172 8.34099 13.8952C7.91903 13.4733 7.34674 13.2362 6.75 13.2362H1.5V1.98621Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M16.5 1.98621H12C11.2044 1.98621 10.4413 2.30228 9.87868 2.86489C9.31607 3.42749 9 4.19056 9 4.98621V15.4862C9 14.8895 9.23705 14.3172 9.65901 13.8952C10.081 13.4733 10.6533 13.2362 11.25 13.2362H16.5V1.98621Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })] })));
 };
-var StyledCourseCard = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .image-section {\n    position: relative;\n  }\n  .information-in-image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    flex-direction: column;\n  }\n  .badges {\n    padding: 16px 8px;\n    align-self: end;\n    display: flex;\n    gap: 10px;\n    z-index: 1;\n  }\n  .card {\n    padding: 13px 10px;\n    font-weight: 700;\n    font-size: 14px;\n  }\n  .image {\n    width: 100%;\n    height: auto;\n  }\n  .course-section {\n    margin-top: 28px;\n  }\n  .title {\n    margin-bottom: 15px;\n  }\n  .categories {\n    font-size: 14px;\n    line-height: 17px;\n    color: ", ";\n    margin-bottom: 15px;\n  }\n  .lesson-container {\n    display: flex;\n    align-items: center;\n    margin-bottom: 30px;\n  }\n  .lessons-count {\n    font-weight: 700;\n    margin: 0 0 0 10px;\n  }\n  .category {\n    cursor: pointer;\n  }\n  .tag {\n    cursor: pointer;\n  }\n"], ["\n  .image-section {\n    position: relative;\n  }\n  .information-in-image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    flex-direction: column;\n  }\n  .badges {\n    padding: 16px 8px;\n    align-self: end;\n    display: flex;\n    gap: 10px;\n    z-index: 1;\n  }\n  .card {\n    padding: 13px 10px;\n    font-weight: 700;\n    font-size: 14px;\n  }\n  .image {\n    width: 100%;\n    height: auto;\n  }\n  .course-section {\n    margin-top: 28px;\n  }\n  .title {\n    margin-bottom: 15px;\n  }\n  .categories {\n    font-size: 14px;\n    line-height: 17px;\n    color: ", ";\n    margin-bottom: 15px;\n  }\n  .lesson-container {\n    display: flex;\n    align-items: center;\n    margin-bottom: 30px;\n  }\n  .lessons-count {\n    font-weight: 700;\n    margin: 0 0 0 10px;\n  }\n  .category {\n    cursor: pointer;\n  }\n  .tag {\n    cursor: pointer;\n  }\n"])), function (_a) {
+var StyledCourseCard = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: ", ";\n  flex-shrink: 0;\n\n  .image-section {\n    position: relative;\n  }\n  .information-in-image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    flex-direction: column;\n  }\n  .badges {\n    padding: 16px 8px;\n    align-self: end;\n    display: flex;\n    gap: 10px;\n    z-index: 1;\n  }\n  .card {\n    padding: 13px 10px;\n    font-weight: 700;\n    font-size: 14px;\n  }\n  .image {\n    border-radius: ", "px;\n  }\n  .course-section {\n    margin-top: ", ";\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n  }\n  .title {\n    margin-bottom: 15px;\n  }\n  .categories {\n    font-size: 14px;\n    line-height: 17px;\n    color: ", ";\n    margin-bottom: 15px;\n  }\n  .lesson-container {\n    display: flex;\n    align-items: center;\n    margin-bottom: ", ";\n  }\n  .lessons-count {\n    font-weight: 700;\n    margin: 0 0 0 10px;\n  }\n  .category {\n    cursor: pointer;\n  }\n  .tag {\n    cursor: pointer;\n  }\n\n  .card-subtitle {\n    color: ", ";\n  }\n\n  .course-card-buttons-group {\n    margin: -8px;\n    width: calc(100% + 16px);\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n\n    > * {\n      margin: 8px;\n    }\n  }\n\n  .card-course-footer {\n    margin-top: auto;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: ", ";\n  flex-shrink: 0;\n\n  .image-section {\n    position: relative;\n  }\n  .information-in-image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    flex-direction: column;\n  }\n  .badges {\n    padding: 16px 8px;\n    align-self: end;\n    display: flex;\n    gap: 10px;\n    z-index: 1;\n  }\n  .card {\n    padding: 13px 10px;\n    font-weight: 700;\n    font-size: 14px;\n  }\n  .image {\n    border-radius: ", "px;\n  }\n  .course-section {\n    margin-top: ", ";\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n  }\n  .title {\n    margin-bottom: 15px;\n  }\n  .categories {\n    font-size: 14px;\n    line-height: 17px;\n    color: ", ";\n    margin-bottom: 15px;\n  }\n  .lesson-container {\n    display: flex;\n    align-items: center;\n    margin-bottom: ", ";\n  }\n  .lessons-count {\n    font-weight: 700;\n    margin: 0 0 0 10px;\n  }\n  .category {\n    cursor: pointer;\n  }\n  .tag {\n    cursor: pointer;\n  }\n\n  .card-subtitle {\n    color: ", ";\n  }\n\n  .course-card-buttons-group {\n    margin: -8px;\n    width: calc(100% + 16px);\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n\n    > * {\n      margin: 8px;\n    }\n  }\n\n  .card-course-footer {\n    margin-top: auto;\n  }\n"])), function (props) { return (props.mobile ? "272px" : "100%"); }, function (_a) {
     var theme = _a.theme;
-    var backgroundColor = theme.mode === "dark"
-        ? theme.cardBackgroundColorDark
-        : theme.cardBackgroundColorLight;
-    return (0, chroma_js_1.contrast)("#fff", backgroundColor) >= 2.5 ? "#fff" : theme.gray3;
+    return theme.cardRadius;
+}, function (props) { return (props.mobile ? "15px" : "28px"); }, function (props) {
+    return props.hideImage ? props.theme.gray2 : props.theme.gray3;
+}, function (props) { return (props.mobile ? "15px" : "30px"); }, function (props) {
+    return !props.hideImage && props.theme.primaryColor;
 });
 var CourseCard = function (props) {
-    var id = props.id, lessonCount = props.lessonCount, title = props.title, image = props.image, categories = props.categories, _a = props.tags, tags = _a === void 0 ? [] : _a, onImageClick = props.onImageClick, onTagClick = props.onTagClick, onButtonClick = props.onButtonClick, progress = props.progress, hideImage = props.hideImage;
+    var id = props.id, mobile = props.mobile, lessonCount = props.lessonCount, title = props.title, image = props.image, categories = props.categories, _a = props.tags, tags = _a === void 0 ? [] : _a, onImageClick = props.onImageClick, onTagClick = props.onTagClick, onButtonClick = props.onButtonClick, onSecondaryButtonClick = props.onSecondaryButtonClick, secondaryButtonText = props.secondaryButtonText, buttonText = props.buttonText, progress = props.progress, hideImage = props.hideImage;
+    var theme = React.useContext(styled_components_1.ThemeContext);
     var t = (0, react_i18next_1.useTranslation)().t;
@@ -74,9 +97,9 @@ var tagClick = (0, react_1.useCallback)(function (e, id) {
     var renderCourseSection = function () {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ level: 4, className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ className: "categories" }, { children: categories.categoryElements.map(function (category, index) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ level: mobile ? 5 : 4, className: "title" }, { children: title })), categories && ((0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ className: "categories" }, { children: categories.categoryElements.map(function (category, index) {
                         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "category", onClick: function () { return categories.onCategoryClick(category.id); }, onKeyDown: function () { return categories.onCategoryClick(category.id); }, role: "button", tabIndex: 0 }, { children: category.name }), category.id), categories.categoryElements.length !== index + 1 && ((0, jsx_runtime_1.jsx)("span", { children: " / " }))] }));
-                    }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "lesson-container" }, { children: [(0, jsx_runtime_1.jsx)(IconOpenBook, {}), (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ className: "lessons-count" }, { children: t("CourseCard.lesson", { count: lessonCount }) }))] })), progress ? ((0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, __assign({}, progress))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: onButtonClick && ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ mode: "secondary", onClick: function () { return onButtonClick(id); } }, { children: t("CourseCard.startNow") }))) }))] }));
+                    }) }))), lessonCount && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "lesson-container" }, { children: [(0, jsx_runtime_1.jsx)(IconOpenBook, {}), (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ className: "lessons-count", size: "14" }, { children: t("CourseCard.lesson", { count: lessonCount }) }))] }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "card-course-footer" }, { children: progress ? ((0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, __assign({}, progress))) : ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "course-card-buttons-group" }, { children: [onButtonClick && buttonText && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ mode: "secondary", onClick: function () { return onButtonClick(id); } }, { children: buttonText })) })), onSecondaryButtonClick && secondaryButtonText && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Link_1.Link, __assign({ onClick: onSecondaryButtonClick }, { children: secondaryButtonText })) }))] }))) }))] }));
     };
-    return ((0, jsx_runtime_1.jsxs)(StyledCourseCard, { children: [!hideImage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "image-section" }, imageSectionProps, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "information-in-image" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "badges" }, { children: tags.map(function (tag) { return ((0, jsx_runtime_1.jsx)(Badge_1.Badge, __assign({ className: "tag", onClick: function (e) { return tagClick(e, tag.id); } }, { children: tag.title }), tag.id)); }) })), props.subtitle && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "card" }, { children: (0, jsx_runtime_1.jsx)(Card_1.Card, __assign({ wings: "small" }, { children: props.subtitle })) })))] })), (0, jsx_runtime_1.jsx)(RatioBox_1.RatioBox, __assign({ ratio: 1 }, { children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: imageSrc, alt: image ? image.alt : undefined }) }))] }))), hideImage ? ((0, jsx_runtime_1.jsx)(Card_1.Card, __assign({ wings: "large" }, { children: renderCourseSection() }))) : ((0, jsx_runtime_1.jsx)("div", __assign({ className: "course-section" }, { children: renderCourseSection() })))] }));
+    return ((0, jsx_runtime_1.jsxs)(StyledCourseCard, __assign({ hideImage: hideImage, mobile: mobile }, { children: [!hideImage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "image-section" }, imageSectionProps, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "information-in-image" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "badges" }, { children: tags.map(function (tag) { return ((0, jsx_runtime_1.jsx)(Badge_1.Badge, __assign({ className: "tag", onClick: function (e) { return tagClick(e, tag.id); }, color: theme.gray2 }, { children: tag.title }), tag.id)); }) })), props.subtitle && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "card" }, { children: (0, jsx_runtime_1.jsx)(Card_1.Card, __assign({ wings: "small" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "card-subtitle" }, { children: props.subtitle })) })) })))] })), (0, jsx_runtime_1.jsx)(RatioBox_1.RatioBox, __assign({ ratio: mobile ? 66 / 100 : 1 }, { children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: imageSrc, alt: image ? image.alt : undefined }) }))] }))), hideImage ? ((0, jsx_runtime_1.jsx)(Card_1.Card, __assign({ wings: "large" }, { children: renderCourseSection() }))) : ((0, jsx_runtime_1.jsx)("div", __assign({ className: "course-section" }, { children: renderCourseSection() })))] })));
 };
 exports.CourseCard = CourseCard;
 var templateObject_1;

lib/components/molecules/LabelListItem/LabelListItem.d.ts

@@ -5,2 +5,3 @@ import * as React from "react";
     icon?: React.ReactNode;
+    mobile?: boolean;
 }
@@ -7,0 +8,0 @@ export declare const LabelListItem: React.FC<TitleProps>;

lib/components/molecules/LabelListItem/LabelListItem.js

@@ -48,14 +48,15 @@ "use strict";
 var IconTitle_1 = require("../../atoms/IconTitle/IconTitle");
-var StyledLabelListItem = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  .lms-icon-title {\n    margin-bottom: 5px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  .lms-icon-title {\n    margin-bottom: 5px;\n  }\n"])));
+var StyledLabelListItem = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 20px;\n\n  .lms-icon-title {\n    margin-bottom: 5px;\n  }\n"], ["\n  margin-bottom: 20px;\n\n  .lms-icon-title {\n    margin-bottom: 5px;\n  }\n"])));
 var LabelListItem = function (props) {
-    var children = props.children, _a = props.variant, variant = _a === void 0 ? "header" : _a, title = props.title, icon = props.icon;
+    var children = props.children, _a = props.variant, variant = _a === void 0 ? "header" : _a, title = props.title, icon = props.icon, _b = props.mobile, mobile = _b === void 0 ? false : _b;
     var theme = React.useContext(styled_components_1.ThemeContext);
-    return ((0, jsx_runtime_1.jsx)(StyledLabelListItem, { children: variant === "header" ? ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [title && (0, jsx_runtime_1.jsx)(IconTitle_1.IconTitle, { level: 4, title: title, icon: icon, as: "h4" }), (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ noMargin: true }, { children: children }))] })) : ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ style: {
+    return ((0, jsx_runtime_1.jsx)(StyledLabelListItem, { children: variant === "header" ? ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)(IconTitle_1.IconTitle, { level: mobile ? 5 : 4, title: title, icon: icon, as: mobile ? "h5" : "h4" })), (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ noMargin: true, size: mobile ? "12" : "14", style: {
+                        marginLeft: mobile ? "24px" : "0",
+                    } }, { children: children }))] })) : ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ style: {
                         textTransform: "uppercase",
                         marginBottom: "8px",
-                        fontSize: "12px",
-                    } }, { children: title })), (0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ level: 4, style: {
+                    }, size: "12" }, { children: title })), (0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ level: 5, style: {
                         marginBottom: "0",
                         color: theme.primaryColor,
-                    }, as: "h4" }, { children: children }))] })) }));
+                    }, as: "h5" }, { children: children }))] })) }));
 };
@@ -62,0 +63,0 @@ exports.LabelListItem = LabelListItem;

lib/components/molecules/Ratings/Ratings.js

@@ -31,6 +31,5 @@ "use strict";
 var Title_1 = require("../../atoms/Typography/Title");
-var StyledRatingsDesktop = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  .ratings-container {\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n  }\n  .header {\n    margin-bottom: 20px;\n  }\n  .title {\n    ", "\n  }\n  .average-rate-container {\n    background: ", ";\n    padding: 24px 34px;\n    text-align: center;\n    border-radius: ", ";\n  }\n  .average-rate-label {\n    font-size: 14px;\n    margin: 3px 0 0;\n  }\n  .rate-with-interval-container {\n    flex: 1;\n    padding-left: 27px;\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n"], ["\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  .ratings-container {\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n  }\n  .header {\n    margin-bottom: 20px;\n  }\n  .title {\n    ", "\n  }\n  .average-rate-container {\n    background: ", ";\n    padding: 24px 34px;\n    text-align: center;\n    border-radius: ", ";\n  }\n  .average-rate-label {\n    font-size: 14px;\n    margin: 3px 0 0;\n  }\n  .rate-with-interval-container {\n    flex: 1;\n    padding-left: 27px;\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n"])), function (props) {
-    if (props.theme.mode === "dark") {
-        return "color: red";
-    }
+var StyledRatingsDesktop = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  .ratings-container {\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n  }\n  .header {\n    margin-bottom: 20px;\n  }\n  .title {\n    color: ", ";\n  }\n  .average-rate-container {\n    background: ", ";\n    padding: 24px 34px;\n    text-align: center;\n    border-radius: ", ";\n  }\n  .average-rate-label {\n    font-size: 14px;\n    margin: 3px 0 0;\n  }\n  .rate-with-interval-container {\n    flex: 1;\n    padding-left: 27px;\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n"], ["\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  .ratings-container {\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n  }\n  .header {\n    margin-bottom: 20px;\n  }\n  .title {\n    color: ", ";\n  }\n  .average-rate-container {\n    background: ", ";\n    padding: 24px 34px;\n    text-align: center;\n    border-radius: ", ";\n  }\n  .average-rate-label {\n    font-size: 14px;\n    margin: 3px 0 0;\n  }\n  .rate-with-interval-container {\n    flex: 1;\n    padding-left: 27px;\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.primaryColor;
 }, function (props) {
@@ -46,6 +45,5 @@ return props.theme.mode !== "dark" ? props.theme.gray5 : props.theme.gray2;
 };
-var StyledRatingsMobile = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .header {\n    margin-bottom: 14px;\n  }\n  .title {\n    ", "\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n    padding-right: 20px;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n  .average-rate-container {\n    display: flex;\n    align-items: center;\n    background: ", ";\n    padding: 15px 20px;\n    border-radius: ", ";\n    > div {\n      padding-left: 20px;\n    }\n  }\n  .average-rate-label {\n    margin-bottom: 0;\n    font-size: 14px;\n  }\n"], ["\n  .header {\n    margin-bottom: 14px;\n  }\n  .title {\n    ", "\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n    padding-right: 20px;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n  .average-rate-container {\n    display: flex;\n    align-items: center;\n    background: ", ";\n    padding: 15px 20px;\n    border-radius: ", ";\n    > div {\n      padding-left: 20px;\n    }\n  }\n  .average-rate-label {\n    margin-bottom: 0;\n    font-size: 14px;\n  }\n"])), function (props) {
-    if (props.theme.mode === "dark") {
-        return "color: red";
-    }
+var StyledRatingsMobile = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .header {\n    margin-bottom: 14px;\n  }\n  .title {\n    color: ", ";\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n    padding-right: 20px;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n  .average-rate-container {\n    display: flex;\n    align-items: center;\n    background: ", ";\n    padding: 15px 20px;\n    border-radius: ", ";\n    > div {\n      padding-left: 20px;\n    }\n  }\n  .average-rate-label {\n    margin-bottom: 0;\n    font-size: 14px;\n  }\n"], ["\n  .header {\n    margin-bottom: 14px;\n  }\n  .title {\n    color: ", ";\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n    padding-right: 20px;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n  .average-rate-container {\n    display: flex;\n    align-items: center;\n    background: ", ";\n    padding: 15px 20px;\n    border-radius: ", ";\n    > div {\n      padding-left: 20px;\n    }\n  }\n  .average-rate-label {\n    margin-bottom: 0;\n    font-size: 14px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.primaryColor;
 }, function (props) {
@@ -52,0 +50,0 @@ return props.theme.mode !== "dark" ? props.theme.gray5 : props.theme.gray2;

lib/components/molecules/Search/Search.d.ts

 import * as React from "react";
 import { ReactNode } from "react";
 interface StyledSearchProps {
-    mobile?: boolean;
+    isFocused?: boolean;
+    loading?: boolean;
 }
 export interface SearchProps extends StyledSearchProps {
-    onSearch: (value: string) => void;
-    onChange: (value: string) => void;
-    onSubmit: (value: string) => void;
-    filterOptions: () => void;
+    onSearch?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    filterOptions?: () => void;
     placeholder: string;
-    children: ReactNode;
+    children?: ReactNode;
     icon?: ReactNode;
@@ -14,0 +15,0 @@ }

lib/components/molecules/Search/Search.js

@@ -52,11 +52,18 @@ "use strict";
 var useOnClickOutside_1 = require("../../../hooks/useOnClickOutside");
-var StyledSearch = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n\n  .lsm-input .input-and-fieldset input:not(:focus) ~ .fieldset {\n    border-color: transparent;\n  }\n\n  input::placeholder {\n    color: ", ";\n  }\n\n  .search-input-wrapper {\n    position: relative;\n  }\n\n  .search-input-button {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    appearance: none;\n    border: none;\n    background-color: transparent;\n    cursor: pointer;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  .search-input-options {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    display: none;\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    border-top: none;\n    box-sizing: border-box;\n\n    > * {\n      padding: 15px;\n      cursor: pointer;\n    }\n\n    &.active {\n      display: block;\n      height: auto;\n    }\n  }\n"], ["\n  position: relative;\n  width: 100%;\n\n  .lsm-input .input-and-fieldset input:not(:focus) ~ .fieldset {\n    border-color: transparent;\n  }\n\n  input::placeholder {\n    color: ", ";\n  }\n\n  .search-input-wrapper {\n    position: relative;\n  }\n\n  .search-input-button {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    appearance: none;\n    border: none;\n    background-color: transparent;\n    cursor: pointer;\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  .search-input-options {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    height: 0;\n    overflow: hidden;\n    display: none;\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    border-top: none;\n    box-sizing: border-box;\n\n    > * {\n      padding: 15px;\n      cursor: pointer;\n    }\n\n    &.active {\n      display: block;\n      height: auto;\n    }\n  }\n"])), function (_a) {
+var StyledSearch = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n\n  .lsm-input .input-and-fieldset input {\n    &:focus {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n\n      ~ .fieldset {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n\n    &:not(:focus) ~ .fieldset {\n      border-color: transparent;\n    }\n  }\n\n  input::placeholder {\n    color: currentColor;\n    opacity: 0.5;\n  }\n\n  .search-input-wrapper {\n    position: relative;\n  }\n\n  .search-input-button {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    transition: opacity 0.2s ease-in-out;\n    appearance: none;\n    border: none;\n    background-color: transparent;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      opacity: 0.75;\n    }\n\n    svg {\n      width: 20px;\n      height: 20px;\n\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n  .search-input-options {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    height: ", ";\n    max-height: ", ";\n    overflow-y: auto;\n    display: ", ";\n    background-color: ", ";\n    border-width: 0.5px;\n    border-style: solid;\n    border-color: ", ";\n    border-top: none;\n    box-sizing: border-box;\n    border-bottom-left-radius: ", "px;\n    border-bottom-right-radius: ", "px;\n\n    > * {\n      padding: 15px;\n      cursor: pointer;\n      transition: background-color 0.2s ease-in-out;\n\n      &:last-child {\n        border-bottom-left-radius: ", "px;\n        border-bottom-right-radius: ", "px;\n      }\n\n      &:hover {\n        background-color: ", ";\n      }\n    }\n  }\n"], ["\n  position: relative;\n  width: 100%;\n\n  .lsm-input .input-and-fieldset input {\n    &:focus {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n\n      ~ .fieldset {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n\n    &:not(:focus) ~ .fieldset {\n      border-color: transparent;\n    }\n  }\n\n  input::placeholder {\n    color: currentColor;\n    opacity: 0.5;\n  }\n\n  .search-input-wrapper {\n    position: relative;\n  }\n\n  .search-input-button {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n    transition: opacity 0.2s ease-in-out;\n    appearance: none;\n    border: none;\n    background-color: transparent;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      opacity: 0.75;\n    }\n\n    svg {\n      width: 20px;\n      height: 20px;\n\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n  .search-input-options {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    height: ", ";\n    max-height: ", ";\n    overflow-y: auto;\n    display: ", ";\n    background-color: ", ";\n    border-width: 0.5px;\n    border-style: solid;\n    border-color: ", ";\n    border-top: none;\n    box-sizing: border-box;\n    border-bottom-left-radius: ", "px;\n    border-bottom-right-radius: ", "px;\n\n    > * {\n      padding: 15px;\n      cursor: pointer;\n      transition: background-color 0.2s ease-in-out;\n\n      &:last-child {\n        border-bottom-left-radius: ", "px;\n        border-bottom-right-radius: ", "px;\n      }\n\n      &:hover {\n        background-color: ", ";\n      }\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.mode === "light"
-        ? (0, chroma_js_1.default)(theme.gray1).alpha(0.5).css()
-        : (0, chroma_js_1.default)(theme.white).alpha(0.5).css();
+    return theme.mode === "light" ? theme.gray1 : theme.white;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mode == "light" ? theme.gray1 : theme.white;
+    var loading = _a.loading;
+    return !loading && "currentColor";
 }, function (_a) {
+    var isFocused = _a.isFocused;
+    return (isFocused ? "auto" : "0");
+}, function (_a) {
+    var isFocused = _a.isFocused;
+    return (isFocused ? "250px" : "0");
+}, function (_a) {
+    var isFocused = _a.isFocused;
+    return (isFocused ? "block" : "none");
+}, function (_a) {
     var theme = _a.theme;
@@ -69,2 +76,19 @@ return theme.mode == "light" ? theme.gray5 : theme.gray1;
         : (0, chroma_js_1.default)(theme.white).alpha(0.6).css();
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.inputRadius;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.inputRadius;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.inputRadius;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.inputRadius;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.mode == "light"
+        ? (0, chroma_js_1.default)(theme.gray5).darken(0.2).css()
+        : (0, chroma_js_1.default)(theme.gray1).brighten(0.2).css();
 });
@@ -75,3 +99,3 @@ var IconSearch = function () {
 var Search = function (props) {
-    var children = props.children, placeholder = props.placeholder, mobile = props.mobile, icon = props.icon, onSearch = props.onSearch, onChange = props.onChange, onSubmit = props.onSubmit, filterOptions = props.filterOptions;
+    var children = props.children, placeholder = props.placeholder, icon = props.icon, loading = props.loading, onSearch = props.onSearch, onChange = props.onChange, onSubmit = props.onSubmit, filterOptions = props.filterOptions;
     var _a = React.useState(""), value = _a[0], setValue = _a[1];
@@ -83,3 +107,3 @@ var _b = React.useState(false), isFocused = _b[0], setIsFocused = _b[1];
     var toggleFocus = function () {
-        setIsFocused(!isFocused);
+        setIsFocused(function (isFocused) { return !isFocused; });
     };
@@ -104,6 +128,9 @@ var filterChildren = function (childrenList) {
                 return React.cloneElement(child, {
-                    onClick: function () {
-                        onChange(child.props.children);
+                    onClick: function (e) {
+                        onChange && onChange(child.props.children);
                         toggleFocus();
                         setValue(child.props.children);
+                        if (child.props.onClick) {
+                            child.props.onClick(e);
+                        }
                     },
@@ -115,11 +142,11 @@ });
     };
-    return ((0, jsx_runtime_1.jsxs)(StyledSearch, __assign({ ref: ref, mobile: mobile }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "search-input-wrapper" }, { children: [(0, jsx_runtime_1.jsx)(__1.Input, { placeholder: placeholder, onChange: function (e) {
+    return ((0, jsx_runtime_1.jsxs)(StyledSearch, __assign({ ref: ref, isFocused: isFocused, loading: loading }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "search-input-wrapper" }, { children: [(0, jsx_runtime_1.jsx)(__1.Input, { placeholder: placeholder, onChange: function (e) {
                             var value = e.target.value;
                             setValue(value);
-                            onSearch(value);
+                            onSearch && onSearch(value);
                         }, value: value, onKeyDown: function (e) {
-                            return e.key === "Enter" && onSubmit(value);
+                            return e.key === "Enter" && onSubmit && onSubmit(value);
                         }, onFocus: function () { return toggleFocus(); } }), (0, jsx_runtime_1.jsx)("button", __assign({ type: "button", className: "search-input-button", onClick: function () {
-                            onSubmit(value);
-                        } }, { children: icon || (0, jsx_runtime_1.jsx)(IconSearch, {}) }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "search-input-options ".concat(isFocused ? "active" : "") }, { children: filterChildren(childrenList) }))] })));
+                            onSubmit && onSubmit(value);
+                        } }, { children: loading ? (0, jsx_runtime_1.jsx)(__1.Spin, { color: "currentColor" }) : icon || (0, jsx_runtime_1.jsx)(IconSearch, {}) }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "search-input-options" }, { children: filterChildren(childrenList) }))] })));
 };
@@ -126,0 +153,0 @@ exports.Search = Search;

lib/components/organisms/ResetPasswordForm/ResetPasswordForm.d.ts

@@ -5,4 +5,6 @@ /// <reference types="react" />
 export declare const ResetPasswordForm: React.FC<{
-    onError?: (err: ResponseError<DefaultResponseError>) => void;
-    onSuccess?: () => void;
+    onFirstStepError?: (err: ResponseError<DefaultResponseError>) => void;
+    onSecondStepError?: (err: ResponseError<DefaultResponseError>) => void;
+    onFirstStepSuccess?: () => void;
+    onSecondStepSuccess?: () => void;
     backToLogin?: () => void;
@@ -12,2 +14,5 @@ onRegisterLink?: () => void;
     return_url?: string;
+    secondStep?: boolean;
+    email?: string;
+    token?: string;
 }>;
@@ -14,0 +19,0 @@ declare const _default: import("react").ForwardRefExoticComponent<{

lib/components/organisms/ResetPasswordForm/ResetPasswordForm.js

@@ -51,9 +51,36 @@ "use strict";
 var ResetPasswordForm = function (_a) {
-    var onSuccess = _a.onSuccess, onError = _a.onError, backToLogin = _a.backToLogin, onRegisterLink = _a.onRegisterLink, _b = _a.mobile, mobile = _b === void 0 ? false : _b, return_url = _a.return_url;
-    var initialValues = { email: "" };
+    var onFirstStepError = _a.onFirstStepError, onSecondStepError = _a.onSecondStepError, onFirstStepSuccess = _a.onFirstStepSuccess, onSecondStepSuccess = _a.onSecondStepSuccess, backToLogin = _a.backToLogin, onRegisterLink = _a.onRegisterLink, _b = _a.mobile, mobile = _b === void 0 ? false : _b, return_url = _a.return_url, secondStep = _a.secondStep, email = _a.email, token = _a.token;
+    var initialValues = { email: "", password: "" };
     var t = (0, react_i18next_1.useTranslation)().t;
-    var forgot = (0, react_1.useContext)(react_2.EscolaLMSContext).forgot;
+    var _c = (0, react_1.useContext)(react_2.EscolaLMSContext), forgot = _c.forgot, reset = _c.reset;
+    var handleFirstStep = (0, react_1.useCallback)(function (values, setSubmitting, setErrors) {
+        forgot({
+            email: values.email,
+            return_url: "".concat(window.location.origin, "/").concat(return_url),
+        })
+            .then(function () { return onFirstStepSuccess && onFirstStepSuccess(); })
+            .catch(function (err) {
+            setErrors(__assign({ error: err.data.message }, err.data.errors));
+            onFirstStepError && onFirstStepError(err);
+        })
+            .finally(function () { return setSubmitting(false); });
+    }, []);
+    var handleSecondStep = (0, react_1.useCallback)(function (values, setSubmitting, setErrors) {
+        reset({
+            password: values.password,
+            email: String(email),
+            token: String(token),
+        })
+            .then(function () {
+            onSecondStepSuccess && onSecondStepSuccess();
+        })
+            .catch(function (err) {
+            setErrors(__assign({ error: err.data.message }, err.data.errors));
+            onSecondStepError && onSecondStepError(err);
+        })
+            .finally(function () { return setSubmitting(false); });
+    }, []);
     return ((0, jsx_runtime_1.jsxs)(StyledDiv, __assign({ mobile: mobile }, { children: [(0, jsx_runtime_1.jsx)(__1.Title, __assign({ level: 3 }, { children: t("ResetForm.ResetPassword") })), " ", (0, jsx_runtime_1.jsx)(formik_1.Formik, __assign({ initialValues: initialValues, validate: function (values) {
                     var errors = {};
-                    if (!values.email) {
+                    if (!values.email && !secondStep) {
                         errors.email = t("Required");
@@ -64,16 +91,9 @@ }
                     var setSubmitting = _a.setSubmitting, setErrors = _a.setErrors;
-                    forgot({
-                        email: values.email,
-                        return_url: "".concat(window.location.origin, "/").concat(return_url),
-                    })
-                        .then(function () { return onSuccess && onSuccess(); })
-                        .catch(function (err) {
-                        setErrors(__assign({ error: err.data.message }, err.data.errors));
-                        onError && onError(err);
-                    })
-                        .finally(function () { return setSubmitting(false); });
+                    !secondStep
+                        ? handleFirstStep(values, setSubmitting, setErrors)
+                        : handleSecondStep(values, setSubmitting, setErrors);
                 } }, { children: function (_a) {
                     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, { type: "email", name: "email", label: "email", onChange: handleChange, onBlur: handleBlur, value: values.email, error: touched.email && errors.email }), (0, jsx_runtime_1.jsx)(__1.Button, __assign({ mode: "secondary", type: "submit", loading: isSubmitting, block: true }, { children: t("ResetForm.ResetPassword") }))] })));
-                } })), (0, jsx_runtime_1.jsx)(__1.Text, __assign({ size: "14" }, { children: (0, jsx_runtime_1.jsx)(__1.Link, __assign({ underline: true, onClick: function () { return backToLogin && backToLogin(); } }, { children: t("ResetForm.BackToLogin") })) })), (0, jsx_runtime_1.jsxs)(__1.Text, __assign({ size: "14" }, { children: [t("ResetForm.NotHavingAccount"), " ", (0, jsx_runtime_1.jsx)(__1.Link, __assign({ underline: true, onClick: function () { return onRegisterLink && onRegisterLink(); } }, { children: t("ResetForm.Register") }))] }))] })));
+                    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 }))), !secondStep ? ((0, jsx_runtime_1.jsx)(__1.Input, { type: "email", name: "email", label: "email", onChange: handleChange, onBlur: handleBlur, value: values.email, error: touched.email && errors.email })) : ((0, jsx_runtime_1.jsx)(__1.Input, { type: "password", name: "password", label: "password", onChange: handleChange, onBlur: handleBlur, value: values.password, error: touched.password && errors.password })), (0, jsx_runtime_1.jsx)(__1.Button, __assign({ mode: "secondary", type: "submit", loading: isSubmitting, block: true }, { children: t("ResetForm.ResetPassword") }))] })));
+                } })), !secondStep && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(__1.Text, __assign({ size: "14" }, { children: (0, jsx_runtime_1.jsx)(__1.Link, __assign({ underline: true, onClick: function () { return backToLogin && backToLogin(); } }, { children: t("ResetForm.BackToLogin") })) })), (0, jsx_runtime_1.jsxs)(__1.Text, __assign({ size: "14" }, { children: [t("ResetForm.NotHavingAccount"), " ", (0, jsx_runtime_1.jsx)(__1.Link, __assign({ underline: true, onClick: function () { return onRegisterLink && onRegisterLink(); } }, { children: t("ResetForm.Register") }))] }))] }))] })));
 };
@@ -80,0 +100,0 @@ exports.ResetPasswordForm = ResetPasswordForm;

lib/index.d.ts

@@ -47,3 +47,3 @@ export { default as Avatar } from "./components/atoms/Avatar/Avatar";
 export { Tutor } from "./components/molecules/Tutor/Tutor";
-export { default as VideoPlayer } from "./components/molecules/VideoPlayer/VideoPlayer";
+export { Search } from "./components/molecules/Search/Search";
 export { default as CourseAgenda } from "./components/organisms/CourseAgenda/CourseAgenda";
@@ -50,0 +50,0 @@ export { default as LoginForm } from "./components/organisms/LoginForm/LoginForm";

lib/index.js

@@ -7,3 +7,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NoteEditor = exports.LoginForm = exports.CourseAgenda = exports.VideoPlayer = exports.Tutor = exports.Steps = exports.Ratings = exports.Rate = exports.QuizCta = exports.Notifications = exports.Notes = exports.LabelListItem = exports.ImageBubble = exports.Dropdown = exports.Downloads = exports.Description = exports.CourseTopNav = exports.CourseCard = exports.CheckoutCard = exports.Certificate = exports.CategoryCard = exports.CartCard = exports.Banner = exports.Title = exports.TextArea = exports.Text = exports.Tag = exports.Spin = exports.Slider = exports.RatioBox = exports.Rating = exports.ProgressRing = exports.ProgressBar = exports.Radio = exports.Checkbox = exports.Option = exports.Notification = exports.Note = exports.Logo = exports.Link = exports.Interval = exports.Input = exports.IconText = exports.IconTitle = exports.Download = exports.CourseProgress = exports.Card = exports.Button = exports.Badge = exports.Avatar = void 0;
+exports.NoteEditor = exports.LoginForm = exports.CourseAgenda = exports.Search = exports.Tutor = exports.Steps = exports.Ratings = exports.Rate = exports.QuizCta = exports.Notifications = exports.Notes = exports.LabelListItem = exports.ImageBubble = exports.Dropdown = exports.Downloads = exports.Description = exports.CourseTopNav = exports.CourseCard = exports.CheckoutCard = exports.Certificate = exports.CategoryCard = exports.CartCard = exports.Banner = exports.Title = exports.TextArea = exports.Text = exports.Tag = exports.Spin = exports.Slider = exports.RatioBox = exports.Rating = exports.ProgressRing = exports.ProgressBar = exports.Radio = exports.Checkbox = exports.Option = exports.Notification = exports.Note = exports.Logo = exports.Link = exports.Interval = exports.Input = exports.IconText = exports.IconTitle = exports.Download = exports.CourseProgress = exports.Card = exports.Button = exports.Badge = exports.Avatar = void 0;
 exports.ResetPasswordForm = exports.RegisterForm = void 0;
@@ -103,4 +103,4 @@ var Avatar_1 = require("./components/atoms/Avatar/Avatar");
 Object.defineProperty(exports, "Tutor", { enumerable: true, get: function () { return Tutor_1.Tutor; } });
-var VideoPlayer_1 = require("./components/molecules/VideoPlayer/VideoPlayer");
-Object.defineProperty(exports, "VideoPlayer", { enumerable: true, get: function () { return __importDefault(VideoPlayer_1).default; } });
+var Search_1 = require("./components/molecules/Search/Search");
+Object.defineProperty(exports, "Search", { enumerable: true, get: function () { return Search_1.Search; } });
 //ORGANISMS
@@ -117,1 +117,2 @@ var CourseAgenda_1 = require("./components/organisms/CourseAgenda/CourseAgenda");
 Object.defineProperty(exports, "ResetPasswordForm", { enumerable: true, get: function () { return __importDefault(ResetPasswordForm_1).default; } });
+//ADVANCED

lib/styleguide/i18n.js

@@ -14,2 +14,5 @@ "use strict";
         translation: {
+            Loading: "Loading",
+            Prev: "Previous",
+            Next: "Next",
             "CartCard.addDiscountButton": "Add discount code",
@@ -54,2 +57,4 @@ "CartCard.buyButton": "I buy and pay",
             "Ratings.averageRateLabel": "Average rate",
+            "PdfPlayer.notFound": "Document not found",
+            "PdfPlayer.of": "of",
         },
@@ -64,2 +69,5 @@ },
         translation: {
+            Loading: "Ładowanie",
+            Prev: "Poprzednia",
+            Next: "Następna",
             "CartCard.addDiscountButton": "Dodaj kod rabatowy",
@@ -104,2 +112,4 @@ "CartCard.buyButton": "Kupuję i płacę",
             "Ratings.averageRateLabel": "Średnia ocena",
+            "PdfPlayer.notFound": "Dokument nie został znaleziony",
+            "PdfPlayer.of": "z",
         },
@@ -106,0 +116,0 @@ },

lib/styleguide/ThemeCustomizer.js

@@ -65,4 +65,2 @@ "use strict";
     "textColorLight",
-    "backgroundDarkProgress",
-    "backgroundDarkInterval",
     "errorColor",
@@ -130,5 +128,3 @@ "invertColor",
                 textColorLight: initData.textColorLight || "#000000",
-                backgroundDarkProgress: initData.backgroundDarkProgress || "#000000",
                 errorColor: initData.errorColor || "#EB5757",
-                backgroundDarkInterval: initData.backgroundDarkInterval || "#000000",
                 invertColor: initData.invertColor || "#000000",
@@ -135,0 +131,0 @@ backgroundDarkCourseNav: initData.backgroundDarkCourseNav || "#000000",

lib/theme/provider.d.ts

@@ -21,4 +21,2 @@ import { DefaultTheme } from "styled-components";
     black: string;
-    backgroundDarkProgress: string;
-    backgroundDarkInterval: string;
     errorColor: string;
@@ -25,0 +23,0 @@ invertColor: string;

lib/theme/shared.js

@@ -5,4 +5,2 @@ "use strict";
 exports.sharedTheme = {
-    backgroundDarkProgress: "#E60037",
-    backgroundDarkInterval: "#FF003D",
     buttonRadius: 0,
@@ -9,0 +7,0 @@ checkboxRadius: 0,

lib/utils/components/primitives/titleUtils.js

@@ -9,5 +9,5 @@ "use strict";
         case 2:
-            return "40px";
+            return mobile ? "20px" : "40px";
         case 3:
-            return "36px";
+            return mobile ? "20px" : "36px";
         case 4:
@@ -14,0 +14,0 @@ return "20px";

package.json

 {
   "name": "@escolalms/components",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "lib/index.js",
@@ -27,6 +27,7 @@ "license": "MIT",
     "@escolalms/h5p-react": "^0.2.0",
-    "@escolalms/sdk": "^0.2.51",
+    "@escolalms/sdk": "^0.2.60",
     "@stylelint/postcss-css-in-js": "stylelint/postcss-css-in-js",
     "@types/chroma-js": "^2.1.3",
     "@types/react": "^17",
+    "@types/react-pdf": "^5.7.2",
     "@types/react-slick": "^0.23.8",
@@ -61,2 +62,3 @@ "@types/styled-components": "^5.1.25",
     "react-slick": "^0.29.0",
+    "react-image-lightbox": "^5.1.4",
     "react-styleguidist": "^11.2.0",
@@ -73,3 +75,4 @@ "screenfull": "6.0.1",
     "typescript": "^4.6.4",
-    "webpack": "^5.72.0"
+    "webpack": "^5.72.0",
+    "react-pdf": "^5.7.2"
   },
@@ -76,0 +79,0 @@ "homepage": "https://escolalms.github.io/components",

src/components/atoms/Tabs/Tabs.md

@@ -31,2 +31,3 @@ ```js
   defaultActiveKey: 22,
+  onClick: (key) => console.log(`onClick tab id: ${key}`),
 };
@@ -37,3 +38,7 @@
     <div style={{ width: "100%" }}>
-      <Tabs tabs={props.tabs} defaultActiveKey={props.defaultActiveKey} />
+      <Tabs
+        tabs={props.tabs}
+        defaultActiveKey={props.defaultActiveKey}
+        onClick={props.onClick}
+      />
     </div>
@@ -40,0 +45,0 @@ <div style={{ width: 355 }}>

src/components/molecules/CourseCard/CourseCard.md

@@ -14,68 +14,237 @@ ```js
 <GlobalThemeProvider>
-  <ThemeTester childrenListStyle={{ display: "block" }}>
-    <Row>
-      <Col xs={6}>
-        <CourseCard
-          id={1}
-          image={{
-            path: backgroundImage1,
+  <ThemeTester>
+    <div style={{ width: "100%" }}>
+      <Row>
+        <Col xs={6}>
+          <CourseCard
+            id={1}
+            image={{
+              path: backgroundImage1,
+            }}
+            tags={[
+              {
+                title: "Bestseller",
+                id: 1,
+              },
+            ]}
+            lessonCount={1}
+            subtitle={"100% Online"}
+            title={"Best course ever"}
+            hideImage
+            categories={{
+              onCategoryClick: (id) => console.log("Category click id: ", id),
+              categoryElements: [
+                { id: 1, name: "Programming" },
+                { id: 2, name: "Front-end" },
+              ],
+            }}
+            onTagClick={(tagId) => console.log("onTagClick :", { tagId })}
+            onImageClick={() => console.log("onImageClick")}
+            onButtonClick={(cardId) =>
+              console.log("onButtonClick :", { cardId })
+            }
+          />
+        </Col>
+      </Row>
+    </div>
+    <div style={{ width: "100%" }}>
+      <Row>
+        <Col
+          xs={6}
+          md={4}
+          style={{
+            display: "flex",
+            flexDirection: "column",
           }}
-          tags={[
-            {
-              title: "Bestseller",
-              id: 1,
-            },
-          ]}
-          lessonCount={1}
-          subtitle={"100% Online"}
-          title={"Best course ever"}
-          hideImage
-          categories={{
-            onCategoryClick: (id) => console.log("Category click id: ", id),
-            categoryElements: [
-              { id: 1, name: "Programming" },
-              { id: 2, name: "Front-end" },
-            ],
+        >
+          <CourseCard
+            id={2}
+            image={{
+              path: backgroundImage2,
+            }}
+            lessonCount={3}
+            tags={[
+              {
+                title: "Bestseller",
+                id: 1,
+              },
+              {
+                title: "Best Price",
+                id: 2,
+              },
+            ]}
+            title={"Best course ever"}
+            categories={{
+              onCategoryClick: (id) => {
+                console.log("Category click id: ", id);
+              },
+              categoryElements: [
+                { id: 1, name: "Programming" },
+                { id: 2, name: "Front-end" },
+              ],
+            }}
+            onTagClick={(tagId) => console.log("onTagClick :", { tagId })}
+            onImageClick={() => console.log("onImageClick")}
+            progress={{
+              currentProgress: 0.43,
+              maxProgress: 1,
+            }}
+          />
+        </Col>
+        <Col
+          xs={6}
+          md={4}
+          style={{
+            display: "flex",
+            flexDirection: "column",
           }}
-          onTagClick={(tagId) => console.log("onTagClick :", { tagId })}
-          onImageClick={() => console.log("onImageClick")}
-          onButtonClick={(cardId) => console.log("onButtonClick :", { cardId })}
-        />
-      </Col>
-      <Col xs={6}>
-        <CourseCard
-          id={2}
-          image={{
-            path: backgroundImage2,
+        >
+          <CourseCard
+            id={3}
+            image={{
+              path: backgroundImage2,
+            }}
+            subtitle={"100% Online"}
+            lessonCount={3}
+            tags={[
+              {
+                title: "Bestseller",
+                id: 1,
+              },
+              {
+                title: "Best Price",
+                id: 2,
+              },
+            ]}
+            title={"Best course ever"}
+            onTagClick={(tagId) => console.log("onTagClick :", { tagId })}
+            onButtonClick={(cardId) =>
+              console.log("onButtonClick :", { cardId })
+            }
+            onSecondaryButtonClick={() => console.log("onSecondaryButtonClick")}
+            secondaryButtonText={"Link to course"}
+            buttonText={"Buy now"}
+            onImageClick={() => console.log("onImageClick")}
+          />
+        </Col>
+        <Col
+          xs={6}
+          md={4}
+          style={{
+            display: "flex",
+            flexDirection: "column",
           }}
-          lessonCount={3}
-          tags={[
-            {
-              title: "Bestseller",
-              id: 1,
-            },
-            {
-              title: "Best Price",
-              id: 2,
-            },
-          ]}
-          title={"Best course ever"}
-          categories={{
-            onCategoryClick: (id) => {
-              console.log("Category click id: ", id);
-            },
-            categoryElements: [
-              { id: 1, name: "Programming" },
-              { id: 2, name: "Front-end" },
-            ],
-          }}
-          onTagClick={(tagId) => console.log("onTagClick :", { tagId })}
-          onImageClick={() => console.log("onImageClick")}
-          progress={{
-            currentProgress: 0.43,
-            maxProgress: 1,
-          }}
-        />
-      </Col>
-    </Row>
+        >
+          <CourseCard
+            id={4}
+            image={{
+              path: backgroundImage2,
+            }}
+            tags={[
+              {
+                title: "Bestseller",
+                id: 1,
+              },
+              {
+                title: "Best Price",
+                id: 2,
+              },
+            ]}
+            title={"Best course ever"}
+            categories={{
+              onCategoryClick: (id) => {
+                console.log("Category click id: ", id);
+              },
+              categoryElements: [
+                { id: 1, name: "Programming" },
+                { id: 2, name: "Front-end" },
+              ],
+            }}
+            onTagClick={(tagId) => console.log("onTagClick :", { tagId })}
+            onImageClick={() => console.log("onImageClick")}
+            progress={{
+              currentProgress: 0.43,
+              maxProgress: 1,
+            }}
+          />
+        </Col>
+      </Row>
+    </div>
+    <div
+      style={{
+        width: 400,
+        overflow: "auto",
+        display: "flex",
+        gap: "1rem",
+      }}
+    >
+      <CourseCard
+        id={23}
+        mobile
+        image={{
+          path: backgroundImage2,
+        }}
+        lessonCount={3}
+        tags={[
+          {
+            title: "Bestseller",
+            id: 1,
+          },
+          {
+            title: "Best Price",
+            id: 2,
+          },
+        ]}
+        title={"Best course ever"}
+        categories={{
+          onCategoryClick: (id) => {
+            console.log("Category click id: ", id);
+          },
+          categoryElements: [
+            { id: 1, name: "Programming" },
+            { id: 2, name: "Front-end" },
+          ],
+        }}
+        onTagClick={(tagId) => console.log("onTagClick :", { tagId })}
+        onImageClick={() => console.log("onImageClick")}
+        progress={{
+          currentProgress: 0.43,
+          maxProgress: 1,
+        }}
+      />
+      <CourseCard
+        id={23}
+        mobile
+        image={{
+          path: backgroundImage2,
+        }}
+        lessonCount={3}
+        tags={[
+          {
+            title: "Bestseller",
+            id: 1,
+          },
+          {
+            title: "Best Price",
+            id: 2,
+          },
+        ]}
+        title={"Best course ever"}
+        categories={{
+          onCategoryClick: (id) => {
+            console.log("Category click id: ", id);
+          },
+          categoryElements: [
+            { id: 1, name: "Programming" },
+            { id: 2, name: "Front-end" },
+          ],
+        }}
+        onTagClick={(tagId) => console.log("onTagClick :", { tagId })}
+        onImageClick={() => console.log("onImageClick")}
+        progress={{
+          currentProgress: 0.43,
+          maxProgress: 1,
+        }}
+      />
+    </div>
   </ThemeTester>
@@ -82,0 +251,0 @@ <ImageModal images={[img1, img2, img3, img4]} />

src/components/molecules/ImageBubble/ImageBubble.md

 ```js
 import { ImageModal, ThemeTester } from "../../../styleguide";
-import { Badge } from "../../../";
+import { Badge, CourseCard } from "../../../";
 
+import img2 from "./../CourseCard/CourseCard-2.png";
+import img3 from "./../CourseCard/CourseCard-3.png";
+import img4 from "./../CourseCard/CourseCard-4.png";
+import backgroundImage1 from "./../CourseCard/bgImage1.png";
+import backgroundImage2 from "./../CourseCard/bgImage2.png";
+
 import img1 from "./ImageBubble.png";
@@ -21,3 +27,30 @@
       >
-        <div>bottom (TODO: replace this when CourseCard is ready)</div>
+        <CourseCard
+            id={1}
+            image={{
+              path: backgroundImage1,
+            }}
+            tags={[
+              {
+                title: "Bestseller",
+                id: 1,
+              },
+            ]}
+            lessonCount={1}
+            subtitle={"100% Online"}
+            title={"Best course ever"}
+            hideImage
+            categories={{
+              onCategoryClick: (id) => console.log("Category click id: ", id),
+              categoryElements: [
+                { id: 1, name: "Programming" },
+                { id: 2, name: "Front-end" },
+              ],
+            }}
+            onTagClick={(tagId) => console.log("onTagClick :", { tagId })}
+            onImageClick={() => console.log("onImageClick")}
+            onButtonClick={(cardId) =>
+              console.log("onButtonClick :", { cardId })
+            }
+          />
       </ImageBubble>
@@ -24,0 +57,0 @@ </div>

src/components/molecules/LabelListItem/LabelListItem.md

 ```js
-import { GlobalThemeProvider } from "../../../theme/provider";
+import { Row, Col } from "react-grid-system";
 import ImageModal from "../../../styleguide/ImageModal";
@@ -53,26 +53,85 @@ import img1 from "./LabelListItem.png";
 <React.Fragment>
-  <ThemeTester flexDirection="column">
-    <LabelListItem title="90%" icon={<Icon1 />}>
-      Poleca szkolenia Jana Kaminskiego
-    </LabelListItem>
-    <LabelListItem title="Gwarancja" icon={<Icon2 />}>
-      zadowolenia lub zwrot pieniędzy*
-    </LabelListItem>
-    <LabelListItem title="5.0" icon={<Icon3 />}>
-      Średnia ocena szkoleń Jana Kamińskiego
-    </LabelListItem>
-  </ThemeTester>
   <ThemeTester>
-    <LabelListItem title="Kategoria szkolenia" variant={"label"}>
-      Finanse
-    </LabelListItem>
-    <LabelListItem title="Poziom trudności" variant={"label"}>
-      Średni
-    </LabelListItem>
-    <LabelListItem title="Termin rozpoczęcia" variant={"label"}>
-      22 marca 2022
-    </LabelListItem>
-    <LabelListItem title="Czas trwania" variant={"label"}>
-      120 godzin
-    </LabelListItem>
+    <div style={{ width: "100%" }}>
+      <Row>
+        <Col xs={12} md={3}>
+          <LabelListItem title="Kategoria szkolenia" variant={"label"}>
+            Finanse
+          </LabelListItem>
+        </Col>
+        <Col xs={12} md={3}>
+          <LabelListItem title="Poziom trudności" variant={"label"}>
+            Średni
+          </LabelListItem>
+        </Col>
+        <Col xs={12} md={3}>
+          <LabelListItem title="Termin rozpoczęcia" variant={"label"}>
+            22 marca 2022
+          </LabelListItem>
+        </Col>
+        <Col xs={12} md={3}>
+          <LabelListItem title="Czas trwania" variant={"label"}>
+            120 godzin
+          </LabelListItem>
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={12} md={4}>
+          <LabelListItem title="90%" icon={<Icon1 />}>
+            Poleca szkolenia Jana Kaminskiego
+          </LabelListItem>
+        </Col>
+        <Col xs={12} md={4}>
+          <LabelListItem title="Gwarancja" icon={<Icon2 />}>
+            zadowolenia lub zwrot pieniędzy*
+          </LabelListItem>
+        </Col>
+        <Col xs={12} md={4}>
+          <LabelListItem title="5.0" icon={<Icon3 />}>
+            Średnia ocena szkoleń Jana Kamińskiego
+          </LabelListItem>
+        </Col>
+      </Row>
+    </div>
+    <div style={{ width: 375 }}>
+      <Row>
+        <Col xs={6}>
+          <LabelListItem title="Kategoria szkolenia" variant={"label"}>
+            Finanse
+          </LabelListItem>
+        </Col>
+        <Col xs={6}>
+          <LabelListItem title="Poziom trudności" variant={"label"}>
+            Średni
+          </LabelListItem>
+        </Col>
+        <Col xs={6}>
+          <LabelListItem title="Termin rozpoczęcia" variant={"label"}>
+            22 marca 2022
+          </LabelListItem>
+        </Col>
+        <Col xs={6}>
+          <LabelListItem title="Czas trwania" variant={"label"}>
+            120 godzin
+          </LabelListItem>
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={12}>
+          <LabelListItem title="90%" icon={<Icon1 />} mobile={true}>
+            Poleca szkolenia Jana Kaminskiego
+          </LabelListItem>
+        </Col>
+        <Col xs={12}>
+          <LabelListItem title="Gwarancja" icon={<Icon2 />} mobile={true}>
+            zadowolenia lub zwrot pieniędzy*
+          </LabelListItem>
+        </Col>
+        <Col xs={12}>
+          <LabelListItem title="5.0" icon={<Icon3 />} mobile={true}>
+            Średnia ocena szkoleń Jana Kamińskiego
+          </LabelListItem>
+        </Col>
+      </Row>
+    </div>
   </ThemeTester>
@@ -79,0 +138,0 @@ <ImageModal images={[img1]} />

src/components/molecules/Search/Search.md

 ```js
 import { ImageModal, ThemeTester } from "../../../styleguide";
+import { useState } from "react";
 import img1 from "./Search.png";
 
+const [loading, setLoading] = useState(false);
+
 const onSearch = (value) => {
   console.log(`Search: ${value}`);
+  setLoading(true);
+
+  setTimeout(() => {
+    setLoading(false);
+  }, 1500);
 };
@@ -24,2 +32,3 @@
       placeholder="Select a course"
+      loading={loading}
     >
@@ -26,0 +35,0 @@ <div>football</div>

src/components/organisms/ResetPasswordForm/ResetPasswordForm.md

@@ -6,3 +6,2 @@ ```js
 import { EscolaLMSContextProvider } from "@escolalms/sdk/lib/react/context";
-
 <GlobalThemeProvider>
@@ -16,5 +15,12 @@ <EscolaLMSContextProvider apiUrl="https://api-stage.escolalms.com/">
       return_url={"reset"}
-    >
-      <pre>This component is not ready yet</pre>
-    </ResetPasswordForm>{" "}
+    />
+    <div style={{ height: 80 }}></div>
+    <ResetPasswordForm
+      secondStep
+      email="[e-mail]"
+      token="example string"
+      onSuccess={() => console.log("onSuccess")}
+      onError={(err) => console.log("onError", err.data)}
+      onRegisterLink={() => console.log("onRegisterLink")}
+    />
   </EscolaLMSContextProvider>
@@ -21,0 +27,0 @@ <ImageModal images={[img1]} />

src/index.ts

@@ -51,3 +51,3 @@ // ATOMS
 export { Tutor } from "./components/molecules/Tutor/Tutor";
-export { default as VideoPlayer } from "./components/molecules/VideoPlayer/VideoPlayer";
+export { Search } from "./components/molecules/Search/Search";
 
@@ -60,1 +60,3 @@ //ORGANISMS
 export { default as ResetPasswordForm } from "./components/organisms/ResetPasswordForm/ResetPasswordForm";
+
+//ADVANCED

src/styleguide/i18n.ts

@@ -10,2 +10,5 @@ import i18n from "i18next";
     translation: {
+      Loading: "Loading",
+      Prev: "Previous",
+      Next: "Next",
       "CartCard.addDiscountButton": "Add discount code",
@@ -50,2 +53,4 @@ "CartCard.buyButton": "I buy and pay",
       "Ratings.averageRateLabel": "Average rate",
+      "PdfPlayer.notFound": "Document not found",
+      "PdfPlayer.of": "of",
     },
@@ -60,2 +65,5 @@ },
     translation: {
+      Loading: "Ładowanie",
+      Prev: "Poprzednia",
+      Next: "Następna",
       "CartCard.addDiscountButton": "Dodaj kod rabatowy",
@@ -100,2 +108,4 @@ "CartCard.buyButton": "Kupuję i płacę",
       "Ratings.averageRateLabel": "Średnia ocena",
+      "PdfPlayer.notFound": "Dokument nie został znaleziony",
+      "PdfPlayer.of": "z",
     },
@@ -102,0 +112,0 @@ },

src/theme/shared.ts

 import { SharedDefaultTheme } from "./provider";
 
 export const sharedTheme: SharedDefaultTheme = {
-  backgroundDarkProgress: "#E60037",
-  backgroundDarkInterval: "#FF003D",
   buttonRadius: 0,
@@ -7,0 +5,0 @@ checkboxRadius: 0,

src/utils/components/primitives/titleUtils.ts

@@ -11,5 +11,5 @@ import { HeaderLevelInt } from "../../../types/titleTypes";
     case 2:
-      return "40px";
+      return mobile ? "20px" : "40px";
     case 3:
-      return "36px";
+      return mobile ? "20px" : "36px";
     case 4:
@@ -16,0 +16,0 @@ return "20px";

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

Network access

Supply chain risk

This module accesses the network.

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

23779456

increased by0.2%

Number of package files

473

increased by3.5%

Lines of code

20262

increased by4.02%

Worsened metrics

Dev dependency count

49

increased by6.52%

Number of medium supply chain risk alerts

3

increased by50%

No dependency changes