@escolalms/components - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

lib/components/primitives/CourseProgress/CourseProgress.d.ts

@@ -1,2 +0,16 @@
-import ContrastBox from "../../../components/primitives/ContrastBox/ContrastBox";
-export default ContrastBox;
+import * as React from "react";
+export interface TitleProps {
+    progress: number;
+    title: string;
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+}
+export declare const CourseProgress: React.FC<TitleProps>;
+declare const _default: React.ForwardRefExoticComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: import("styled-components").DefaultTheme | undefined;
+}>;
+export default _default;

lib/components/primitives/CourseProgress/CourseProgress.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var ContrastBox_1 = __importDefault(require("../../../components/primitives/ContrastBox/ContrastBox"));
-exports.default = ContrastBox_1.default;
+exports.CourseProgress = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importStar(require("styled-components"));
+var StyledDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 16px;\n  & > .range {\n    height: 15px;\n    position: relative;\n\n    &:after {\n      content: \"\";\n      display: block;\n      background: red;\n      height: 1px;\n      width: 100%;\n      position: absolute;\n      left: 0p;\n      top: 8px;\n    }\n\n    .knob-wrapper {\n      width: calc(100% - 15px);\n      position: relative;\n    }\n    .knob {\n      width: 15px;\n      height: 15px;\n      background: red;\n      position: absolute;\n      transition: left 0.2s;\n    }\n  }\n"], ["\n  font-size: 16px;\n  & > .range {\n    height: 15px;\n    position: relative;\n\n    &:after {\n      content: \"\";\n      display: block;\n      background: red;\n      height: 1px;\n      width: 100%;\n      position: absolute;\n      left: 0p;\n      top: 8px;\n    }\n\n    .knob-wrapper {\n      width: calc(100% - 15px);\n      position: relative;\n    }\n    .knob {\n      width: 15px;\n      height: 15px;\n      background: red;\n      position: absolute;\n      transition: left 0.2s;\n    }\n  }\n"])));
+var CourseProgress = function (props) {
+    var title = props.title, children = props.children, icon = props.icon, progress = props.progress;
+    return ((0, jsx_runtime_1.jsxs)(StyledDiv, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [icon && (0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: icon })), title] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "range" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "knob-wrapper" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "knob", style: { left: "".concat(100 * progress, "%") } }) })) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: children }))] })));
+};
+exports.CourseProgress = CourseProgress;
+// https://styled-components.com/docs/api#using-custom-props
+var NewComponent = (0, styled_components_1.default)(exports.CourseProgress)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+// Main button with styles
+exports.default = (0, styled_components_1.withTheme)(NewComponent);
+var templateObject_1, templateObject_2;

lib/components/primitives/CourseTopNav/CourseTopNav.d.ts

@@ -1,2 +0,18 @@
-import ContrastBox from "../../../components/primitives/ContrastBox/ContrastBox";
-export default ContrastBox;
+import * as React from "react";
+export interface ComponentProps {
+    isFinished: boolean;
+    hasNext: boolean;
+    hasPrev: boolean;
+    onNext: () => void;
+    onPrev: () => void;
+    onFinish: () => void;
+}
+export declare const CourseTopNav: React.FC<ComponentProps>;
+declare const _default: React.ForwardRefExoticComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: import("styled-components").DefaultTheme | undefined;
+}>;
+export default _default;

lib/components/primitives/CourseTopNav/CourseTopNav.js

 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,3 +44,18 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var ContrastBox_1 = __importDefault(require("../../../components/primitives/ContrastBox/ContrastBox"));
-exports.default = ContrastBox_1.default;
+exports.CourseTopNav = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var Button_1 = __importDefault(require("../../primitives/Button/Button"));
+var StyledDiv = styled_components_1.default.aside(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 16px;\n  &.closed > button.toggle-btn {\n    transform: rotate(180deg);\n  }\n"], ["\n  font-size: 16px;\n  &.closed > button.toggle-btn {\n    transform: rotate(180deg);\n  }\n"])));
+var CourseTopNav = function (props) {
+    var _a = props.isFinished, isFinished = _a === void 0 ? false : _a, _b = props.hasNext, hasNext = _b === void 0 ? true : _b, _c = props.hasPrev, hasPrev = _c === void 0 ? true : _c, onNext = props.onNext, onPrev = props.onPrev, onFinish = props.onFinish;
+    var _d = React.useState(false), isClosed = _d[0], setIsClosed = _d[1];
+    // TODO add react-i18n
+    return ((0, jsx_runtime_1.jsxs)(StyledDiv, __assign({}, props, { className: isClosed ? "closed" : "" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ onClick: function () { return setIsClosed(function (prev) { return !prev; }); }, className: "toggle-btn" }, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M0.527294 0.195262C0.787643 -0.0650874 1.20975 -0.0650873 1.4701 0.195262L4.9987 3.72386L8.5273 0.195263C8.78764 -0.0650861 9.20975 -0.065086 9.4701 0.195264C9.73045 0.455613 9.73045 0.877723 9.4701 1.13807L5.4701 5.13807C5.20975 5.39842 4.78764 5.39842 4.52729 5.13807L0.527294 1.13807C0.266944 0.877721 0.266944 0.455611 0.527294 0.195262ZM0.527293 4.19526C0.787643 3.93491 1.20975 3.93491 1.4701 4.19526L4.9987 7.72386L8.52729 4.19526C8.78764 3.93491 9.20975 3.93491 9.4701 4.19526C9.73045 4.45561 9.73045 4.87772 9.4701 5.13807L5.4701 9.13807C5.20975 9.39842 4.78764 9.39842 4.52729 9.13807L0.527293 5.13807C0.266944 4.87772 0.266944 4.45561 0.527293 4.19526Z", fill: "#BDBDBD" }) })) })), !isClosed && ((0, jsx_runtime_1.jsxs)("div", { children: [hasPrev && ((0, jsx_runtime_1.jsxs)(Button_1.default, __assign({ mode: "outline", onClick: function () { return onPrev && onPrev(); } }, { children: [(0, jsx_runtime_1.jsx)("svg", __assign({ width: "8", height: "14", viewBox: "0 0 8 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7.70711 0.292893C8.09763 0.683418 8.09763 1.31658 7.70711 1.70711L2.41421 7L7.70711 12.2929C8.09763 12.6834 8.09763 13.3166 7.70711 13.7071C7.31658 14.0976 6.68342 14.0976 6.29289 13.7071L0.292893 7.70711C-0.0976318 7.31658 -0.0976317 6.68342 0.292893 6.29289L6.29289 0.292893C6.68342 -0.0976312 7.31658 -0.0976311 7.70711 0.292893Z", fill: "white" }) })), " ", "Prev"] }))), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ mode: isFinished ? "secondary" : "outline", onClick: function () { return onFinish && onFinish(); } }, { children: isFinished ? "Zakoczony" : "Oznacz jako zakonczony" })), hasNext && ((0, jsx_runtime_1.jsxs)(Button_1.default, __assign({ mode: "outline", onClick: function () { return onNext && onNext(); } }, { children: ["Next", " ", (0, jsx_runtime_1.jsx)("svg", __assign({ width: "8", height: "14", viewBox: "0 0 8 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M0.292893 13.7071C-0.0976311 13.3166 -0.0976312 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976317 1.31658 -0.0976317 0.683417 0.292893 0.292893C0.683417 -0.0976315 1.31658 -0.0976315 1.70711 0.292893L7.70711 6.29289C8.09763 6.68342 8.09763 7.31658 7.70711 7.70711L1.70711 13.7071C1.31658 14.0976 0.683418 14.0976 0.292893 13.7071Z", fill: "white" }) }))] })))] }))] })));
+};
+exports.CourseTopNav = CourseTopNav;
+var NewComponent = (0, styled_components_1.default)(exports.CourseTopNav)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+// Main button with styles
+exports.default = (0, styled_components_1.withTheme)(NewComponent);
+var templateObject_1, templateObject_2;

lib/components/primitives/Option/Checkbox.d.ts

@@ -1,2 +0,2 @@
-import ContrastBox from "../../../components/primitives/ContrastBox/ContrastBox";
-export default ContrastBox;
+import type { OptionType } from "./Option";
+export declare const Checkbox: (props: Omit<OptionType, "type">) => JSX.Element;

lib/components/primitives/Option/Checkbox.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,3 +17,6 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var ContrastBox_1 = __importDefault(require("../../../components/primitives/ContrastBox/ContrastBox"));
-exports.default = ContrastBox_1.default;
+exports.Checkbox = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Option_1 = __importDefault(require("./Option"));
+var Checkbox = function (props) { return ((0, jsx_runtime_1.jsx)(Option_1.default, __assign({ type: "checkbox" }, props))); };
+exports.Checkbox = Checkbox;

lib/components/primitives/Option/Radio.d.ts

@@ -1,2 +0,2 @@
-import ContrastBox from "../../../components/primitives/ContrastBox/ContrastBox";
-export default ContrastBox;
+import type { OptionType } from "./Option";
+export declare const Radio: (props: Omit<OptionType, "type">) => JSX.Element;

lib/components/primitives/Option/Radio.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,3 +17,6 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var ContrastBox_1 = __importDefault(require("../../../components/primitives/ContrastBox/ContrastBox"));
-exports.default = ContrastBox_1.default;
+exports.Radio = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Option_1 = __importDefault(require("./Option"));
+var Radio = function (props) { return ((0, jsx_runtime_1.jsx)(Option_1.default, __assign({ type: "radio" }, props))); };
+exports.Radio = Radio;

lib/styleguide/ThemeCustomizer.js

@@ -61,5 +61,5 @@ "use strict";
                         // @ts-ignore // bug in the library
-                        options: [theme_1.default], onUpdate: handleUpdate }), (0, jsx_runtime_1.jsx)(react_dat_gui_1.DatSelect, { path: "font", options: ["Inter", "Mulish", "Titillium"] }), (0, jsx_runtime_1.jsx)(react_dat_gui_1.DatColor, { path: "primaryColor", label: "Primary Color" }), (0, jsx_runtime_1.jsx)(react_dat_gui_1.DatColor, { path: "secondaryColor", label: "Secondary Color" }), (0, jsx_runtime_1.jsx)(react_dat_gui_1.DatNumber, { path: "buttonRadius", label: "Button Radius", min: 0, max: 100, step: 1 })] }))] }));
+                        options: [theme_1.default], onUpdate: handleUpdate }), (0, jsx_runtime_1.jsx)(react_dat_gui_1.DatSelect, { path: "font", options: ["Inter", "Mulish", "Titillium"] }), (0, jsx_runtime_1.jsx)(react_dat_gui_1.DatColor, { path: "primaryColor", label: "Primary Color" }), (0, jsx_runtime_1.jsx)(react_dat_gui_1.DatColor, { path: "secondaryColor", label: "Secondary Color" }), (0, jsx_runtime_1.jsx)(react_dat_gui_1.DatNumber, { path: "buttonRadius", label: "Button Radius", min: 0, max: 100, step: 1 }), (0, jsx_runtime_1.jsx)(react_dat_gui_1.DatNumber, { path: "checkboxRadius", label: "Checkbox Radius", min: 0, max: 5, step: 1 })] }))] }));
 };
 exports.ThemeCustomizer = ThemeCustomizer;
 exports.default = exports.ThemeCustomizer;

lib/theme/blue.js

@@ -9,5 +9,6 @@ "use strict";
     font: "Mulish",
-    buttonRadius: 10,
+    buttonRadius: 0,
+    checkboxRadius: 0,
     headerColor: "#111111",
 };
 exports.default = exports.blueTheme;

lib/theme/orange.js

@@ -9,5 +9,6 @@ "use strict";
     font: "Inter",
-    buttonRadius: 10,
+    buttonRadius: 0,
+    checkboxRadius: 0,
     headerColor: "#111111",
 };
 exports.default = exports.orangeTheme;

lib/theme/provider.d.ts

@@ -6,2 +6,3 @@ import { DefaultTheme } from "styled-components";
         buttonRadius?: number;
+        checkboxRadius?: number;
         primaryColor: string;
@@ -8,0 +9,0 @@ secondaryColor?: string;

lib/theme/red.js

@@ -9,5 +9,6 @@ "use strict";
     font: "Titillium",
-    buttonRadius: 10,
+    buttonRadius: 0,
+    checkboxRadius: 0,
     headerColor: "#111111",
 };
 exports.default = exports.redTheme;

lib/theme/velvet.js

@@ -9,5 +9,6 @@ "use strict";
     font: "Mulish",
-    buttonRadius: 10,
+    buttonRadius: 0,
+    checkboxRadius: 0,
     headerColor: "#111111",
 };
 exports.default = exports.velvetTheme;

package.json

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

src/components/primitives/CourseProgress/CourseProgress.md

 ```js
+import { useState } from "react";
 import { GlobalThemeProvider } from "../../../theme/provider";
@@ -6,8 +7,27 @@ import ImageModal from "../../../styleguide/ImageModal";
 
+const [progress, setProgress] = useState(0.5);
+
+const Icon1 = () => (
+  <svg
+    width="22"
+    height="23"
+    viewBox="0 0 22 23"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M21 2.396H18V1.396C18 1.13078 17.8946 0.876426 17.7071 0.688889C17.5196 0.501353 17.2652 0.395996 17 0.395996H5C4.73478 0.395996 4.48043 0.501353 4.29289 0.688889C4.10536 0.876426 4 1.13078 4 1.396V2.396H1C0.734784 2.396 0.48043 2.50135 0.292893 2.68889C0.105357 2.87643 0 3.13078 0 3.396V5.396C0.00362544 6.59348 0.437419 7.7498 1.22231 8.65419C2.00721 9.55859 3.09095 10.1508 4.276 10.323C4.64939 11.6173 5.38786 12.7766 6.40301 13.6621C7.41816 14.5476 8.66698 15.1218 10 15.316V17.396H6C5.79004 17.3959 5.58538 17.462 5.41505 17.5848C5.24472 17.7075 5.11735 17.8808 5.051 18.08L4.051 21.08C4.00093 21.2303 3.9873 21.3904 4.01123 21.547C4.03517 21.7037 4.09598 21.8524 4.18866 21.9809C4.28134 22.1094 4.40323 22.2141 4.54429 22.2862C4.68536 22.3584 4.84155 22.396 5 22.396H17C17.1584 22.3959 17.3144 22.3581 17.4554 22.2859C17.5963 22.2137 17.7181 22.109 17.8106 21.9805C17.9032 21.852 17.9639 21.7034 17.9878 21.5468C18.0117 21.3902 17.998 21.2302 17.948 21.08L16.948 18.08C16.8817 17.881 16.7545 17.7078 16.5844 17.585C16.4142 17.4623 16.2098 17.3962 16 17.396H12V15.316C13.333 15.1218 14.5818 14.5476 15.597 13.6621C16.6121 12.7766 17.3506 11.6173 17.724 10.323C18.9091 10.1508 19.9928 9.55859 20.7777 8.65419C21.5626 7.7498 21.9964 6.59348 22 5.396V3.396C22 3.13078 21.8946 2.87643 21.7071 2.68889C21.5196 2.50135 21.2652 2.396 21 2.396ZM4 8.225C3.41549 8.01741 2.90951 7.6341 2.55144 7.12761C2.19338 6.62112 2.00076 6.01627 2 5.396V4.396H4V8.225ZM15.279 19.396L15.612 20.396H6.387L6.721 19.396H15.279ZM16 8.396C16 9.72208 15.4732 10.9938 14.5355 11.9315C13.5979 12.8692 12.3261 13.396 11 13.396C9.67392 13.396 8.40215 12.8692 7.46447 11.9315C6.52678 10.9938 6 9.72208 6 8.396V2.396H16V8.396ZM20 5.396C19.9992 6.01627 19.8066 6.62112 19.4486 7.12761C19.0905 7.6341 18.5845 8.01741 18 8.225V4.396H20V5.396ZM9.667 8.063L8 6.688L10 6.396L11 4.396L12 6.396L14 6.688L12.333 8.063L12.854 10.396L11 9.063L9.146 10.396L9.667 8.063Z"
+      fill="#4A4A4A"
+    />
+  </svg>
+);
+
 <GlobalThemeProvider>
-  <CourseProgress>
-    <pre>This component is not ready yet</pre>
+  <CourseProgress progress={progress} icon={<Icon1 />} title="Moje postepy">
+    <strong>Ukonczono {Math.round(40 * progress)} z 40 lekcji</strong>
+    <p>Ukoncz kurs aby zdobyc certyfikat</p>
   </CourseProgress>
+  <button onClick={() => setProgress(Math.random())}>random progress</button>
   <ImageModal images={[img1]} />
 </GlobalThemeProvider>;
 ```

src/components/primitives/CourseTopNav/CourseTopNav.md

@@ -6,8 +6,44 @@ ```js
 
+const onNext = () => console.log("onNext");
+const onPrev = () => console.log("onPrev");
+const onFinish = () => console.log("onFinish");
+
 <GlobalThemeProvider>
-  <CourseTopNav>
-    <pre>This component is not ready yet</pre>
-  </CourseTopNav>
+  <CourseTopNav
+    hasNext
+    hasPrev
+    isFinished
+    onNext={onNext}
+    onPrev={onPrev}
+    onFinish={onFinish}
+  />
+
+  <CourseTopNav
+    hasNext
+    hasPrev
+    isFinished={false}
+    onNext={onNext}
+    onPrev={onPrev}
+    onFinish={onFinish}
+  />
+
+  <CourseTopNav
+    hasNext={false}
+    hasPrev
+    isFinished={false}
+    onNext={onNext}
+    onPrev={onPrev}
+    onFinish={onFinish}
+  />
+
+  <CourseTopNav
+    hasNext
+    hasPrev={false}
+    isFinished={false}
+    onNext={onNext}
+    onPrev={onPrev}
+    onFinish={onFinish}
+  />
   <ImageModal images={[img1]} />
 </GlobalThemeProvider>;
 ```

src/components/primitives/Option/Checkbox.md

@@ -0,12 +1,53 @@
+### Default themes
+
 ```js
+import themes from "../../../theme";
+import { DefaultTheme, ThemeProvider } from "styled-components";
+import img1 from "./Option.png";
+import ImageModal from "../../../styleguide/ImageModal";
+import Text from "../Typography/Text";
+
+import Title from "../Typography/Title";
+
+<React.Fragment>
+  {Object.entries(themes).map((theme) => (
+    <ThemeProvider theme={theme[1]} key={theme[0]}>
+      <Text>Theme {theme[0]}</Text>
+      <Text>Checkbox without label</Text>
+      <Checkbox name={`c1-${theme[0]}`} checked />
+      <Text>Checkbox with primitive label</Text>
+      <Checkbox name={`c2-${theme[0]}`} label="dummy label" />
+      <hr />
+    </ThemeProvider>
+  ))}
+
+  <ImageModal images={[img1]} />
+</React.Fragment>;
+```
+
+```js
 import { GlobalThemeProvider } from "../../../theme/provider";
 import ImageModal from "../../../styleguide/ImageModal";
+import Text from "../Typography/Text";
 import img1 from "./Option.png";
 
 <GlobalThemeProvider>
-  <Checkbox>
-    <pre>This component is not ready yet</pre>
-  </Checkbox>
+  <Text>checked Checkbox without label</Text>
+  <Checkbox name="c3" checked />
+  <Text>Checkbox without label</Text>
+  <Checkbox name="c4" />
+  <Text>Checkbox with primitive label</Text>
+  <Checkbox name="c5" label="dummy label" />
+  <Text>Checkbox with sophisticated label</Text>{" "}
+  <Checkbox
+    name="c6"
+    label={
+      <strong>
+        dummy <em>label</em>
+      </strong>
+    }
+  />
+  <Checkbox name="c7" checked label={<strong>dummy label</strong>} />
   <ImageModal images={[img1]} />
 </GlobalThemeProvider>;
 ```

src/components/primitives/Option/Radio.md

@@ -0,12 +1,53 @@
+### Default themes
+
 ```js
+import themes from "../../../theme";
+import { DefaultTheme, ThemeProvider } from "styled-components";
+import img1 from "./Option.png";
+import ImageModal from "../../../styleguide/ImageModal";
+import Text from "../Typography/Text";
+
+import Title from "../Typography/Title";
+
+<React.Fragment>
+  {Object.entries(themes).map((theme) => (
+    <ThemeProvider theme={theme[1]} key={theme[0]}>
+      <Text>Theme {theme[0]}</Text>
+      <Text>Radio without label</Text>
+      <Radio name={`c1-${theme[0]}`} checked />
+      <Text>Radio with primitive label</Text>
+      <Radio name={`c1-${theme[0]}`} label="dummy label" />
+      <hr />
+    </ThemeProvider>
+  ))}
+
+  <ImageModal images={[img1]} />
+</React.Fragment>;
+```
+
+```js
 import { GlobalThemeProvider } from "../../../theme/provider";
 import ImageModal from "../../../styleguide/ImageModal";
+import Text from "../Typography/Text";
 import img1 from "./Option.png";
 
 <GlobalThemeProvider>
-  <Radio>
-    <pre>This component is not ready yet</pre>
-  </Radio>
+  <Text>checked Radio without label</Text>
+  <Radio name="r3" checked />
+  <Text>Radio without label</Text>
+  <Radio name="r4" />
+  <Text>Radio with primitive label</Text>
+  <Radio name="r5" label="dummy label" />
+  <Text>Radio with sophisticated label</Text>{" "}
+  <Radio
+    name="r6"
+    label={
+      <strong>
+        dummy <em>label</em>
+      </strong>
+    }
+  />
+  <Radio name="r5" checked label={<strong>dummy label</strong>} />
   <ImageModal images={[img1]} />
 </GlobalThemeProvider>;
 ```

src/theme/blue.ts

@@ -8,3 +8,4 @@ import { DefaultTheme } from "styled-components";
   font: "Mulish",
-  buttonRadius: 10,
+  buttonRadius: 0,
+  checkboxRadius: 0,
   headerColor: "#111111",
@@ -11,0 +12,0 @@ };

src/theme/orange.ts

@@ -8,3 +8,4 @@ import { DefaultTheme } from "styled-components";
   font: "Inter",
-  buttonRadius: 10,
+  buttonRadius: 0,
+  checkboxRadius: 0,
   headerColor: "#111111",
@@ -11,0 +12,0 @@ };

src/theme/red.ts

@@ -8,3 +8,4 @@ import { DefaultTheme } from "styled-components";
   font: "Titillium",
-  buttonRadius: 10,
+  buttonRadius: 0,
+  checkboxRadius: 0,
   headerColor: "#111111",
@@ -11,0 +12,0 @@ };

src/theme/velvet.ts

@@ -8,3 +8,4 @@ import { DefaultTheme } from "styled-components";
   font: "Mulish",
-  buttonRadius: 10,
+  buttonRadius: 0,
+  checkboxRadius: 0,
   headerColor: "#111111",
@@ -11,0 +12,0 @@ };

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11423535

increased by17.43%

Number of package files

257

increased by15.77%

Lines of code

2728

increased by58.88%

No dependency changes