react-gldn-kit 0.1.32 → 0.1.34

package/dist/lib/components/Scratch/index.js

@@ -55,11 +55,12 @@ var types_1 = require("./types");
 var styles = __importStar(require("./Scratch.module.css"));
 // TODO: rewrite this code
 var Scratch = function (props) {
-    var backgroundPath = props.backgroundPath, backgroundScratchDone = props.backgroundScratchDone, scratchPath = props.scratchPath, slotNamePath = props.slotNamePath, audioFirstPath = props.audioFirstPath, audioSecondPath = props.audioSecondPath, textOne = props.textOne, textTwo = props.textTwo, callback = props.callback;
-    var _a = (0, react_1.useState)([]), scratchedBoxes = _a[0], setScratchedBoxes = _a[1];
-    var _b = (0, react_1.useState)({}), scratchedBoxesOpacity = _b[0], setScratchedBoxesOpacity = _b[1];
+    var backgroundPath = props.backgroundPath, backgroundScratchDone = props.backgroundScratchDone, scratchPath = props.scratchPath, slotNamePath = props.slotNamePath, audioFirstPath = props.audioFirstPath, audioSecondPath = props.audioSecondPath, textOne = props.textOne, textTwo = props.textTwo, callback = props.callback, _a = props.boxesAmount, boxesAmount = _a === void 0 ? 9 : _a;
+    var _b = (0, react_1.useState)([]), scratchedBoxes = _b[0], setScratchedBoxes = _b[1];
+    var _c = (0, react_1.useState)({}), scratchedBoxesOpacity = _c[0], setScratchedBoxesOpacity = _c[1];
     var audio1 = new Audio(audioFirstPath);
     var audio2 = new Audio(audioSecondPath);
+    var BOXES = new Array(boxesAmount).fill(0).map(function (_, idx) { return idx; });
     var handleScratch = function (idx) { return function () {
         var _a, _b;
         if (scratchedBoxes.includes(idx)) {
@@ -97,12 +98,12 @@ var Scratch = function (props) {
             }
         };
     }, [scratchedBoxes]);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.scratch, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.scratch, 'KIT_Scratch_scratch'), style: {
             background: backgroundPath,
             backgroundSize: '100% 100%',
             backgroundPosition: 'center',
             backgroundRepeat: 'no-repeat',
-        } }, { children: [types_1.BOXES.map(function (value) {
+        } }, { children: [BOXES.map(function (value) {
                 var _a;
                 return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.box, (_a = {},
                         _a[styles.scratched] = scratchedBoxes.includes(value),
@@ -113,7 +114,7 @@ var Scratch = function (props) {
                         backgroundRepeat: 'no-repeat',
                     }, onClick: handleScratch(value) }, { children: [(0, jsx_runtime_1.jsx)("img", { className: styles.image, src: scratchedBoxes.includes(value) ? scratchPath[0] : scratchPath[1], style: {
                                 opacity: scratchedBoxesOpacity[value],
-                            }, alt: "" }), scratchedBoxes.includes(value) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.scratchText }, { children: scratchedBoxes[0] === value ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { idT: textOne })) : ((0, jsx_runtime_1.jsx)(Text_1.Text, { idT: textTwo })) })))] }), value));
-            }), (0, jsx_runtime_1.jsx)("img", { src: slotNamePath, className: styles.slotName })] })));
+                            }, alt: "" }), scratchedBoxes.includes(value) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.scratchText, 'KIT_Scratch_box_scratchText') }, { children: scratchedBoxes[0] === value ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { idT: textOne })) : ((0, jsx_runtime_1.jsx)(Text_1.Text, { idT: textTwo })) })))] }), value));
+            }), (0, jsx_runtime_1.jsx)("img", { src: slotNamePath, className: (0, classnames_1.default)(styles.slotName, 'KIT_Scratch_slotName') })] })));
 };
 exports.Scratch = Scratch;

package/dist/lib/components/Scratch/types.d.ts

@@ -8,7 +8,7 @@ export type ScratchProps = {
     audioSecondPath: string;
     textOne: string;
     textTwo: string;
+    boxesAmount?: number;
 };
-export declare const BOXES: number[];
 export declare const OPEN_BOX_COUNT = 2;
 export declare const TIMER = 1000;

package/dist/lib/components/Scratch/types.js

@@ -1,8 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TIMER = exports.OPEN_BOX_COUNT = exports.BOXES = void 0;
-var BOXES_AMOUNT = 9; // TODO remove it
-// Need to pass content with flexible data
-exports.BOXES = new Array(BOXES_AMOUNT).fill(0).map(function (_, idx) { return idx; });
+exports.TIMER = exports.OPEN_BOX_COUNT = void 0;
 exports.OPEN_BOX_COUNT = 2; // TODO: we can open only two boxes
 exports.TIMER = 1000; // REMOVE IT _ BAD CODE FLOW

package/dist/lib/components/ui/Buttons/BaseButton/index.js

@@ -44,7 +44,7 @@ var Text_1 = require("components/Text");
 var styles = __importStar(require("./ButtonBase.module.css"));
 var BaseButton = function (props) {
     var _a, _b, _c;
-    var text = props.text, startIcon = props.startIcon, children = props.children, size = props.size, color = props.color, isResized = props.isResized, _d = props.classes, classes = _d === void 0 ? '' : _d, _e = props.marginL, marginL = _e === void 0 ? '' : _e, _f = props.fontSize, fontSize = _f === void 0 ? '' : _f, _g = props.borderR, borderR = _g === void 0 ? '' : _g, classesText = props.classesText, centreText = props.centreText, handleClick = props.handleClick, buttonHeight = props.buttonHeight, marginB = props.marginB, disabled = props.disabled;
+    var text = props.text, startIcon = props.startIcon, children = props.children, size = props.size, color = props.color, isResized = props.isResized, _d = props.classes, classes = _d === void 0 ? '' : _d, _e = props.marginL, marginL = _e === void 0 ? '' : _e, _f = props.fontSize, fontSize = _f === void 0 ? '' : _f, _g = props.borderR, borderR = _g === void 0 ? '' : _g, classesText = props.classesText, centreText = props.centreText, handleClick = props.handleClick, buttonHeight = props.buttonHeight, marginB = props.marginB, disabled = props.disabled, endIconClasses = props.endIconClasses;
     var marginLKey = "marginLeft-".concat(marginL);
     var marginBKey = "marginBottom-".concat(marginB);
     var sizeKey = "size".concat(size);
@@ -65,6 +65,6 @@ var BaseButton = function (props) {
                 _b[styles.center] = centreText,
                 _b)) }, { children: [startIcon, text && ((0, jsx_runtime_1.jsx)("span", __assign({ className: (0, classnames_1.default)(styles.text, (_c = {},
                         _c[styles['marginLeft-base']] = startIcon,
-                        _c)) }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: text }) }))), children && (0, jsx_runtime_1.jsx)("div", __assign({ className: styles.endIcon }, { children: children }))] })) })));
+                        _c)) }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: text }) }))), children && ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.endIcon, endIconClasses) }, { children: children })))] })) })));
 };
 exports.BaseButton = BaseButton;

package/dist/lib/components/ui/Buttons/BaseButton/types.d.ts

@@ -20,6 +20,7 @@ type BaseButton = {
     marginB?: 'base' | 'base-double' | 'base-half';
     disabled?: boolean;
     isResized?: boolean;
+    endIconClasses?: string;
 } & ({
     size: '--button-xs' | '--button-s';
     buttonHeight?: undefined;

package/dist/lib/components/ui/Buttons/DrawerButton/index.js

@@ -56,8 +56,8 @@ var styles = __importStar(require("./DrawerButton.module.css"));
 var DrawerButton = function (props) {
     var _a;
     var classes = props.classes, text = props.text, _b = props.isFullView, isFullView = _b === void 0 ? true : _b, rest = __rest(props, ["classes", "text", "isFullView"]);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.wrapperDrawerButton, classes) }, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles.borderBg }), (0, jsx_runtime_1.jsx)(BaseButton_1.BaseButton, __assign({}, rest, { text: isFullView ? text : '', buttonHeight: "--button-height-xxl", size: "--button-full", color: "transparent", classes: (0, classnames_1.default)(styles.buttonIndex, (_a = {},
-                    _a[styles.center] = !isFullView,
-                    _a)), classesText: styles.full })), (0, jsx_runtime_1.jsx)("div", { className: styles.shadowBg })] })));
+    return ((0, jsx_runtime_1.jsx)(BaseButton_1.BaseButton, __assign({}, rest, { text: isFullView ? text : '', buttonHeight: "--button-height-xxl", size: "--button-full", color: "transparent", classes: (0, classnames_1.default)(styles.buttonIndex, (_a = {},
+            _a[styles.center] = !isFullView,
+            _a), classes), classesText: styles.full })));
 };
 exports.DrawerButton = DrawerButton;

package/dist/lib/components/ui/Inputs/CheckBox/index.js

@@ -49,6 +49,6 @@ var CheckBox = function (props) {
         e.preventDefault();
         onChange(!value);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.checkboxWrapper, classes) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.checkboxWrapperBig, onClick: handleToggle }, { children: (0, jsx_runtime_1.jsxs)("label", __assign({ className: styles.switch }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: value, readOnly: true }), (0, jsx_runtime_1.jsx)("div", { className: styles.slider })] })) })), text && ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.checkboxText, classesText), onClick: handleText }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: text }) })))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.checkboxWrapper, classes) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.checkboxWrapperBig }, { children: (0, jsx_runtime_1.jsxs)("label", __assign({ className: styles.switch }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: value, onChange: handleToggle }), (0, jsx_runtime_1.jsx)("div", { className: styles.slider })] })) })), text && ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.checkboxText, classesText), onClick: handleText }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: text }) })))] })));
 };
 exports.CheckBox = CheckBox;

package/dist/main.css

@@ -456,7 +456,6 @@
 .KIT__DrawerButton-module__wrapperDrawerButton___VXojY {
   --drawer-button-text-color: white;
   --border-button: var(--border-l);
-  --border-background: var(--drawer-button-border-background);
 
   --drawer-button-bg: rgb(var(--dark-gray));
 
@@ -472,48 +471,30 @@
 }
 
 .KIT__DrawerButton-module__buttonIndex___OnNej {
+  --height: var(--height-48);
+  height: var(--height);
   position: relative;
   z-index: calc(var(--layout-lvl-1) + 1);
   border-radius: var(--border-button);
-  margin: 2px;
-  background: var(--drawer-modal-content-color);
-  padding-left: var(--indent-l);
+  padding: var(--indent-m) 0;
   color: var(--drawer-modal-content-text-color);
 }
 
-.KIT__DrawerButton-module__center___VojH7 {
-  justify-content: center;
+@media screen and (min-width: 768px) {
+
+.KIT__DrawerButton-module__buttonIndex___OnNej {
+    padding: var(--indent-m) var(--indent-l);
 }
+  }
 
 .KIT__DrawerButton-module__center___VojH7 {
   justify-content: center;
 }
 
-.KIT__DrawerButton-module__borderBg___OHEWy {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: var(--layout-lvl-1);
-  background: var(--drawer-button-border-background);
-}
-
-.KIT__DrawerButton-module__shadowBg___k4cHp {
-  position: absolute;
-  right: 0%;
-  top: 2px;
-  width: calc(100% - 2px);
-  height: calc(100% - 4px);
-
-  background: var(--drawer-button-shadow-background);
-  z-index: var(--layout-lvl-1);
-  border-radius: var(--border-button);
-}
-
 .KIT__DrawerButton-module__full___AsBjM {
   width: 100%;
 }
+
 .KIT__CasinoCategoryButton-module__wrapperCasinoCategory___Kn74K {
   flex-shrink: 0;
   cursor: pointer;
@@ -1940,14 +1921,16 @@
   --drawer-min-width: 100px;
 
   width: 90%;
-  height: 100%;
+  height: calc(100% - var(--height-48));
   overflow-x: hidden;
-  overflow-y: auto;
   position: relative;
   background: var(--drawer-modal-content-color);
   padding: var(--indent-l);
   z-index: var(--layout-lvl-1);
   transition: 0.3s;
+  display: flex;
+  flex-direction: column;
+  gap: var(--indent-m);
 }
 
 .KIT__DrawerLayout-module__animationOpenDrawer___Z3IOK {
@@ -2017,16 +2000,14 @@
   .KIT__DrawerLayout-module__wrapperDrawer___DnsQm {
     width: var(--drawer-full-width);
     flex-shrink: 0;
-    overflow-y: hidden;
-    display: flex;
-    flex-direction: column;
     justify-content: space-between;
     height: var(--app-height);
     position: sticky;
     background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
     background: initial;
     top: 0;
-    padding: 0;
+    padding: 0 var(--indent-xxxl) var(--indent-xl);
+    gap: var(--indent-xl);
   }
 
   .KIT__DrawerLayout-module__animationCasinoDrawerGrowing___wpvdM {
@@ -2039,6 +2020,7 @@
     animation: none;
   }
 }
+
 .KIT__Logos-module__wrapperLogo___jKLCC {
   --width: 100px;
   --height: calc(var(--height-48) - var(--indent-m) / 2);
@@ -3393,16 +3375,13 @@
 .KIT__Scratch-module__scratch___n0TBg {
   width: 100%;
   height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
 
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: var(--indent-m);
+  gap: var(--indent-m);
   padding: var(--indent-l);
-  z-index: 1;
+  position: relative;
 }
 
 .KIT__Scratch-module__scratchText___jISwD {
@@ -3424,8 +3403,6 @@
 }
 
 .KIT__Scratch-module__box___NjFhi {
-  width: 32%;
-  height: 32%;
   position: relative;
   cursor: pointer;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-gldn-kit",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "description": "",
   "main": "./dist/index.js",
   "keywords": [],