@typeolymp/ui-components 1.19.1 → 1.19.3

package/build/components/atoms/Tag/index.d.ts

@@ -1,6 +1,8 @@
 import { FC, ReactNode } from "react";
+import { Color } from "@typeolymp/utils/enums";
 export declare type PropsType = {
     children?: ReactNode;
+    color?: Color;
 };
 declare const Tag: FC<PropsType>;
 export default Tag;

package/build/components/atoms/Tag/stories.d.ts

@@ -5,3 +5,4 @@ declare const _default: {
 };
 export default _default;
 export declare const Overview: () => JSX.Element;
+export declare const Playground: (args: any) => JSX.Element;

package/build/components/organisms/Chart/index.d.ts

@@ -1,9 +1,11 @@
 import { FC } from "react";
 import { Locale } from "@typeolymp/utils/enums";
-import { ExerciseResult } from "./utils";
+import { Period, ExerciseResult } from "./utils";
 declare type BasePropsType = {
     exerciseResults: ExerciseResult[];
     locale: Locale;
+    defaultPeriod?: Period;
+    onChangePeriod?: (period: Period) => void;
 };
 export declare type PropsType = (BasePropsType & {
     type: "accuracy" | "hits" | "results" | "speed" | "time";

package/build/components/organisms/Chart/stories.d.ts

@@ -11,6 +11,7 @@ export declare const Progress: () => JSX.Element;
 export declare const Results: () => JSX.Element;
 export declare const Speed: () => JSX.Element;
 export declare const Time: () => JSX.Element;
+export declare const Multiple: () => JSX.Element;
 export declare const Playground: {
     (args: any): JSX.Element;
     args: {

package/build/index.es.js

@@ -8225,11 +8225,32 @@ var DataSummary = function (_a) {
                     }) })] }) }));
 };
 
-var Container$o = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject$1(["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: 0 2px 0 ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  color: ", ";\n"], ["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: 0 2px 0 ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  color: ", ";\n"])), theme.colors.lightGray.base, theme.colors.lightGray.darker, theme.colors.lightGray.darker, theme.fonts.paragraph, theme.subheading.small.fontSize, theme.subheading.small.fontWeight, theme.colors.darkGray.light);
+var Container$o = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject$1(["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  color: ", ";\n"], ["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  color: ", ";\n"])), function (_a) {
+    var color = _a.color;
+    if (!color)
+        return theme.colors.lightGray.base;
+    return theme.colors[color].light;
+}, function (_a) {
+    var color = _a.color;
+    if (!color)
+        return "0 2px 0 ".concat(theme.colors.lightGray.darker);
+    return "0 2px 0 ".concat(theme.colors[color].dark);
+}, function (_a) {
+    var color = _a.color;
+    if (!color)
+        return theme.colors.lightGray.darker;
+    return theme.colors[color].dark;
+}, theme.fonts.paragraph, theme.subheading.small.fontSize, theme.subheading.small.fontWeight, function (_a) {
+    var color = _a.color;
+    if (!color)
+        return theme.colors.darkGray.light;
+    return theme.colors[color].darker;
+});
 var templateObject_1$G;
 
-var Tag = function (props) {
-    return jsx$1(Container$o, { children: props.children });
+var Tag = function (_a) {
+    var color = _a.color, children = _a.children;
+    return jsx$1(Container$o, __assign$2({ color: color }, { children: children }));
 };
 
 var Container$n = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject$1(["\n  width: 46px;\n  min-width: 46px;\n  max-width: 46px;\n  height: 27px;\n  min-height: 27px;\n  max-height: 27px;\n  border-radius: 14px;\n  cursor: ", ";\n  position: relative;\n  background-color: ", ";\n\n  :after {\n    content: \"\";\n    width: 21px;\n    height: 21px;\n    border-radius: 50%;\n    position: absolute;\n    top: 3px;\n    right: ", ";\n    left: ", ";\n    background-color: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 46px;\n  min-width: 46px;\n  max-width: 46px;\n  height: 27px;\n  min-height: 27px;\n  max-height: 27px;\n  border-radius: 14px;\n  cursor: ", ";\n  position: relative;\n  background-color: ", ";\n\n  :after {\n    content: \"\";\n    width: 21px;\n    height: 21px;\n    border-radius: 50%;\n    position: absolute;\n    top: 3px;\n    right: ", ";\n    left: ", ";\n    background-color: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
@@ -47822,8 +47843,11 @@ var TimeChart = function (_a) {
 };
 
 var Chart = function (_a) {
-    var type = _a.type, locale = _a.locale, exerciseResults = _a.exerciseResults, nExercisesInCourse = _a.nExercisesInCourse;
-    var _b = useState(Period.TODAY), period = _b[0], setPeriod = _b[1];
+    var type = _a.type, locale = _a.locale, exerciseResults = _a.exerciseResults, _b = _a.defaultPeriod, defaultPeriod = _b === void 0 ? Period.TODAY : _b, onChangePeriod = _a.onChangePeriod, nExercisesInCourse = _a.nExercisesInCourse;
+    var _c = useState(defaultPeriod), period = _c[0], setPeriod = _c[1];
+    useEffect(function () {
+        setPeriod(defaultPeriod);
+    }, [defaultPeriod]);
     var periods = [
         { value: Period.TODAY, label: translations[locale]["Today"] },
         { value: Period.LAST_7_DAYS, label: translations[locale]["Last 7 days"] },
@@ -47863,10 +47887,13 @@ var Chart = function (_a) {
                     justifyContent: "space-between",
                     marginBottom: 10,
                     padding: "0 15px 0 5px",
-                } }, { children: [jsx$1(Heading, __assign$2({ type: "h3" }, { children: titles[type] })), jsx$1(Select, __assign$2({ defaultValue: period, onChange: function (value) { return setPeriod(value); }, id: "period", name: "period" }, { children: periods.map(function (_a) {
+                } }, { children: [jsx$1(Heading, __assign$2({ type: "h3" }, { children: titles[type] })), jsx$1(Select, __assign$2({ defaultValue: period, onChange: function (value) {
+                            setPeriod(value);
+                            onChangePeriod(value);
+                        }, id: "period", name: "period" }, { children: periods.map(function (_a) {
                             var value = _a.value, label = _a.label;
                             return (jsx$1("option", __assign$2({ value: value }, { children: label }), value));
-                        }) }))] })), renderChart()] }));
+                        }) }), period)] })), renderChart()] }));
 };
 
 var StyledTextarea = styled.textarea(templateObject_1$a || (templateObject_1$a = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 228px;\n  min-height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  resize: vertical;\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 100%;\n  min-width: 228px;\n  min-height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  resize: vertical;\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {