@alfalab/core-components-pattern-lock 1.3.2 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/Component.js +5 -3
  2. package/cssm/Component.js +4 -2
  3. package/cssm/index.module.css +9 -5
  4. package/cssm/typings.d.ts +4 -0
  5. package/esm/Component.js +5 -3
  6. package/esm/index.css +18 -14
  7. package/esm/typings.d.ts +4 -0
  8. package/index.css +18 -14
  9. package/modern/Component.js +5 -3
  10. package/modern/index.css +18 -14
  11. package/modern/typings.d.ts +4 -0
  12. package/package.json +3 -3
  13. package/src/Component.tsx +17 -1
  14. package/src/index.module.css +9 -4
  15. package/src/typings.ts +5 -0
  16. package/typings.d.ts +4 -0
package/Component.js CHANGED
@@ -17,12 +17,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
17
17
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
18
18
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
19
19
 
20
- var styles = {"component":"pattern-lock__component_1j5nw","hidden":"pattern-lock__hidden_1j5nw","error":"pattern-lock__error_1j5nw","forgotBtn":"pattern-lock__forgotBtn_1j5nw"};
20
+ var styles = {"component":"pattern-lock__component_74dxy","hidden":"pattern-lock__hidden_74dxy","message":"pattern-lock__message_74dxy","error":"pattern-lock__error_74dxy","forgotBtn":"pattern-lock__forgotBtn_74dxy"};
21
21
  require('./index.css')
22
22
 
23
23
  var PatternLock = React.forwardRef(function (_a, ref) {
24
24
  var _b;
25
- var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _f = _a.forgotCodeBtnText, forgotCodeBtnText = _f === void 0 ? 'Забыли код?' : _f, _g = _a.showForgotCodeBtn, showForgotCodeBtn = _g === void 0 ? false : _g, onForgotBtnClick = _a.onForgotBtnClick, _h = _a.extraBounds, extraBounds = _h === void 0 ? consts.DEFAULT_EXTRA_BOUNDS : _h, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds"]);
25
+ var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _f = _a.forgotCodeBtnText, forgotCodeBtnText = _f === void 0 ? 'Забыли код?' : _f, _g = _a.showForgotCodeBtn, showForgotCodeBtn = _g === void 0 ? false : _g, onForgotBtnClick = _a.onForgotBtnClick, _h = _a.extraBounds, extraBounds = _h === void 0 ? consts.DEFAULT_EXTRA_BOUNDS : _h, message = _a.message, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds", "message"]);
26
26
  var _j = React.useState(), params = _j[0], setParams = _j[1];
27
27
  React.useEffect(function () {
28
28
  var _a = utils.getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
@@ -54,9 +54,11 @@ var PatternLock = React.forwardRef(function (_a, ref) {
54
54
  return function () { return styleObserver === null || styleObserver === void 0 ? void 0 : styleObserver.disconnect(); };
55
55
  // eslint-disable-next-line react-hooks/exhaustive-deps
56
56
  }, [observeTokens]);
57
+ var renderMessage = function () { return (React__default.default.createElement("div", { className: styles.message, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'message') }, message)); };
58
+ var renderError = function () { return (React__default.default.createElement("div", { className: cn__default.default(styles.message, styles.error), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'error') }, error)); };
57
59
  return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className, (_b = {}, _b[styles.hidden] = !params, _b)), "data-test-id": dataTestId },
58
60
  React__default.default.createElement(coreComponentsGap.Gap, { size: 'xs' }),
59
- React__default.default.createElement("div", { className: styles.error }, error),
61
+ error ? renderError() : renderMessage(),
60
62
  React__default.default.createElement(coreComponentsGap.Gap, { size: '3xl' }),
61
63
  React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds })),
62
64
  showForgotCodeBtn ? (React__default.default.createElement(mobile.ButtonMobile, { view: 'link', className: styles.forgotBtn, onClick: onForgotBtnClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: styles.forgotBtn }))));
package/cssm/Component.js CHANGED
@@ -21,7 +21,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
21
21
 
22
22
  var PatternLock = React.forwardRef(function (_a, ref) {
23
23
  var _b;
24
- var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _f = _a.forgotCodeBtnText, forgotCodeBtnText = _f === void 0 ? 'Забыли код?' : _f, _g = _a.showForgotCodeBtn, showForgotCodeBtn = _g === void 0 ? false : _g, onForgotBtnClick = _a.onForgotBtnClick, _h = _a.extraBounds, extraBounds = _h === void 0 ? consts.DEFAULT_EXTRA_BOUNDS : _h, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds"]);
24
+ var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _f = _a.forgotCodeBtnText, forgotCodeBtnText = _f === void 0 ? 'Забыли код?' : _f, _g = _a.showForgotCodeBtn, showForgotCodeBtn = _g === void 0 ? false : _g, onForgotBtnClick = _a.onForgotBtnClick, _h = _a.extraBounds, extraBounds = _h === void 0 ? consts.DEFAULT_EXTRA_BOUNDS : _h, message = _a.message, restProps = tslib.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds", "message"]);
25
25
  var _j = React.useState(), params = _j[0], setParams = _j[1];
26
26
  React.useEffect(function () {
27
27
  var _a = utils.getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
@@ -53,9 +53,11 @@ var PatternLock = React.forwardRef(function (_a, ref) {
53
53
  return function () { return styleObserver === null || styleObserver === void 0 ? void 0 : styleObserver.disconnect(); };
54
54
  // eslint-disable-next-line react-hooks/exhaustive-deps
55
55
  }, [observeTokens]);
56
+ var renderMessage = function () { return (React__default.default.createElement("div", { className: styles__default.default.message, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'message') }, message)); };
57
+ var renderError = function () { return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.message, styles__default.default.error), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'error') }, error)); };
56
58
  return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className, (_b = {}, _b[styles__default.default.hidden] = !params, _b)), "data-test-id": dataTestId },
57
59
  React__default.default.createElement(coreComponentsGap.Gap, { size: 'xs' }),
58
- React__default.default.createElement("div", { className: styles__default.default.error }, error),
60
+ error ? renderError() : renderMessage(),
59
61
  React__default.default.createElement(coreComponentsGap.Gap, { size: '3xl' }),
60
62
  React__default.default.createElement(reactCanvasPatternLock.ReactCanvasPatternLock, tslib.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds })),
61
63
  showForgotCodeBtn ? (React__default.default.createElement(mobile.ButtonMobile, { view: 'link', className: styles__default.default.forgotBtn, onClick: onForgotBtnClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React__default.default.createElement("div", { className: styles__default.default.forgotBtn }))));
package/cssm/index.module.css CHANGED
@@ -1,6 +1,7 @@
1
1
  :root {
2
2
  } /* deprecated */ :root {
3
- --color-light-text-negative: #d91d0b; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
+ --color-light-text-negative: #d91d0b;
4
+ --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
5
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
6
  } :root {
6
7
  } :root {
@@ -33,16 +34,19 @@
33
34
  margin: 0 auto;
34
35
  } .hidden {
35
36
  visibility: hidden;
36
- } .error {
37
+ } .message {
37
38
  font-size: 16px;
38
39
  line-height: 24px;
39
40
  font-weight: 400;
40
41
 
41
- display: flex;
42
- justify-content: center;
43
- align-items: center;
42
+ text-align: center;
44
43
  padding: 0 var(--gap-m);
45
44
  min-height: 24px;
45
+ overflow: hidden;
46
+ text-overflow: ellipsis;
47
+ white-space: nowrap;
48
+ color: var(--color-light-text-primary);
49
+ } .error {
46
50
  color: var(--color-light-text-negative);
47
51
  } .forgotBtn {
48
52
  display: block;
package/cssm/typings.d.ts CHANGED
@@ -29,6 +29,10 @@ type PatternLockProps = {
29
29
  * Сообщение об ошибке
30
30
  */
31
31
  error?: ReactNode;
32
+ /**
33
+ * Сообщение над графическим ключом
34
+ */
35
+ message?: ReactNode;
32
36
  /**
33
37
  * Идентификатор для систем автоматизированного тестирования.
34
38
  */
package/esm/Component.js CHANGED
@@ -8,12 +8,12 @@ import { getDataTestId } from '@alfalab/core-components-shared/esm';
8
8
  import { THEME_STATE, DEFAULT_EXTRA_BOUNDS, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from './consts.js';
9
9
  import { getSizes, getTheme, getColorByToken, getDefaultObserveTarget } from './utils.js';
10
10
 
11
- var styles = {"component":"pattern-lock__component_1j5nw","hidden":"pattern-lock__hidden_1j5nw","error":"pattern-lock__error_1j5nw","forgotBtn":"pattern-lock__forgotBtn_1j5nw"};
11
+ var styles = {"component":"pattern-lock__component_74dxy","hidden":"pattern-lock__hidden_74dxy","message":"pattern-lock__message_74dxy","error":"pattern-lock__error_74dxy","forgotBtn":"pattern-lock__forgotBtn_74dxy"};
12
12
  require('./index.css')
13
13
 
14
14
  var PatternLock = forwardRef(function (_a, ref) {
15
15
  var _b;
16
- var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _f = _a.forgotCodeBtnText, forgotCodeBtnText = _f === void 0 ? 'Забыли код?' : _f, _g = _a.showForgotCodeBtn, showForgotCodeBtn = _g === void 0 ? false : _g, onForgotBtnClick = _a.onForgotBtnClick, _h = _a.extraBounds, extraBounds = _h === void 0 ? DEFAULT_EXTRA_BOUNDS : _h, restProps = __rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds"]);
16
+ var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, _f = _a.forgotCodeBtnText, forgotCodeBtnText = _f === void 0 ? 'Забыли код?' : _f, _g = _a.showForgotCodeBtn, showForgotCodeBtn = _g === void 0 ? false : _g, onForgotBtnClick = _a.onForgotBtnClick, _h = _a.extraBounds, extraBounds = _h === void 0 ? DEFAULT_EXTRA_BOUNDS : _h, message = _a.message, restProps = __rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId", "forgotCodeBtnText", "showForgotCodeBtn", "onForgotBtnClick", "extraBounds", "message"]);
17
17
  var _j = useState(), params = _j[0], setParams = _j[1];
18
18
  useEffect(function () {
19
19
  var _a = getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
@@ -45,9 +45,11 @@ var PatternLock = forwardRef(function (_a, ref) {
45
45
  return function () { return styleObserver === null || styleObserver === void 0 ? void 0 : styleObserver.disconnect(); };
46
46
  // eslint-disable-next-line react-hooks/exhaustive-deps
47
47
  }, [observeTokens]);
48
+ var renderMessage = function () { return (React.createElement("div", { className: styles.message, "data-test-id": getDataTestId(dataTestId, 'message') }, message)); };
49
+ var renderError = function () { return (React.createElement("div", { className: cn(styles.message, styles.error), "data-test-id": getDataTestId(dataTestId, 'error') }, error)); };
48
50
  return (React.createElement("div", { className: cn(styles.component, className, (_b = {}, _b[styles.hidden] = !params, _b)), "data-test-id": dataTestId },
49
51
  React.createElement(Gap, { size: 'xs' }),
50
- React.createElement("div", { className: styles.error }, error),
52
+ error ? renderError() : renderMessage(),
51
53
  React.createElement(Gap, { size: '3xl' }),
52
54
  React.createElement(ReactCanvasPatternLock, __assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds })),
53
55
  showForgotCodeBtn ? (React.createElement(ButtonMobile, { view: 'link', className: styles.forgotBtn, onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React.createElement("div", { className: styles.forgotBtn }))));
package/esm/index.css CHANGED
@@ -1,7 +1,8 @@
1
- /* hash: 8u5ns */
1
+ /* hash: xg4fu */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-text-negative: #d91d0b; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
+ --color-light-text-negative: #d91d0b;
5
+ --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
6
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
7
  } :root {
7
8
  } :root {
@@ -26,44 +27,47 @@
26
27
  --size-m-height: 56px;
27
28
  } :root {
28
29
  --pattern-lock-max-width: 500px;
29
- } .pattern-lock__component_1j5nw {
30
+ } .pattern-lock__component_74dxy {
30
31
  max-width: var(--pattern-lock-max-width);
31
32
  margin: var(--gap-xs) 0 var(--gap-xl) 0
32
- } .pattern-lock__component_1j5nw canvas {
33
+ } .pattern-lock__component_74dxy canvas {
33
34
  display: block;
34
35
  margin: 0 auto;
35
- } .pattern-lock__hidden_1j5nw {
36
+ } .pattern-lock__hidden_74dxy {
36
37
  visibility: hidden;
37
- } .pattern-lock__error_1j5nw {
38
+ } .pattern-lock__message_74dxy {
38
39
  font-size: 16px;
39
40
  line-height: 24px;
40
41
  font-weight: 400;
41
42
 
42
- display: flex;
43
- justify-content: center;
44
- align-items: center;
43
+ text-align: center;
45
44
  padding: 0 var(--gap-m);
46
45
  min-height: 24px;
46
+ overflow: hidden;
47
+ text-overflow: ellipsis;
48
+ white-space: nowrap;
49
+ color: var(--color-light-text-primary);
50
+ } .pattern-lock__error_74dxy {
47
51
  color: var(--color-light-text-negative);
48
- } .pattern-lock__forgotBtn_1j5nw {
52
+ } .pattern-lock__forgotBtn_74dxy {
49
53
  display: block;
50
54
  min-height: var(--size-xs-height);
51
55
  margin: var(--gap-xl) auto 0;
52
56
  } @media screen and (min-width: 360px) {
53
- .pattern-lock__forgotBtn_1j5nw {
57
+ .pattern-lock__forgotBtn_74dxy {
54
58
  margin-top: var(--gap-2xl);
55
59
  min-height: var(--size-s-height);
56
60
  }
57
61
 
58
- .pattern-lock__component_1j5nw {
62
+ .pattern-lock__component_74dxy {
59
63
  margin-bottom: var(--gap-s);
60
64
  }
61
65
  } @media screen and (min-width: 390px) {
62
- .pattern-lock__forgotBtn_1j5nw {
66
+ .pattern-lock__forgotBtn_74dxy {
63
67
  min-height: var(--size-m-height);
64
68
  }
65
69
 
66
- .pattern-lock__component_1j5nw {
70
+ .pattern-lock__component_74dxy {
67
71
  margin-bottom: var(--gap-l);
68
72
  }
69
73
  }
package/esm/typings.d.ts CHANGED
@@ -29,6 +29,10 @@ type PatternLockProps = {
29
29
  * Сообщение об ошибке
30
30
  */
31
31
  error?: ReactNode;
32
+ /**
33
+ * Сообщение над графическим ключом
34
+ */
35
+ message?: ReactNode;
32
36
  /**
33
37
  * Идентификатор для систем автоматизированного тестирования.
34
38
  */
package/index.css CHANGED
@@ -1,7 +1,8 @@
1
- /* hash: 8u5ns */
1
+ /* hash: xg4fu */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-text-negative: #d91d0b; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
+ --color-light-text-negative: #d91d0b;
5
+ --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
6
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
7
  } :root {
7
8
  } :root {
@@ -26,44 +27,47 @@
26
27
  --size-m-height: 56px;
27
28
  } :root {
28
29
  --pattern-lock-max-width: 500px;
29
- } .pattern-lock__component_1j5nw {
30
+ } .pattern-lock__component_74dxy {
30
31
  max-width: var(--pattern-lock-max-width);
31
32
  margin: var(--gap-xs) 0 var(--gap-xl) 0
32
- } .pattern-lock__component_1j5nw canvas {
33
+ } .pattern-lock__component_74dxy canvas {
33
34
  display: block;
34
35
  margin: 0 auto;
35
- } .pattern-lock__hidden_1j5nw {
36
+ } .pattern-lock__hidden_74dxy {
36
37
  visibility: hidden;
37
- } .pattern-lock__error_1j5nw {
38
+ } .pattern-lock__message_74dxy {
38
39
  font-size: 16px;
39
40
  line-height: 24px;
40
41
  font-weight: 400;
41
42
 
42
- display: flex;
43
- justify-content: center;
44
- align-items: center;
43
+ text-align: center;
45
44
  padding: 0 var(--gap-m);
46
45
  min-height: 24px;
46
+ overflow: hidden;
47
+ text-overflow: ellipsis;
48
+ white-space: nowrap;
49
+ color: var(--color-light-text-primary);
50
+ } .pattern-lock__error_74dxy {
47
51
  color: var(--color-light-text-negative);
48
- } .pattern-lock__forgotBtn_1j5nw {
52
+ } .pattern-lock__forgotBtn_74dxy {
49
53
  display: block;
50
54
  min-height: var(--size-xs-height);
51
55
  margin: var(--gap-xl) auto 0;
52
56
  } @media screen and (min-width: 360px) {
53
- .pattern-lock__forgotBtn_1j5nw {
57
+ .pattern-lock__forgotBtn_74dxy {
54
58
  margin-top: var(--gap-2xl);
55
59
  min-height: var(--size-s-height);
56
60
  }
57
61
 
58
- .pattern-lock__component_1j5nw {
62
+ .pattern-lock__component_74dxy {
59
63
  margin-bottom: var(--gap-s);
60
64
  }
61
65
  } @media screen and (min-width: 390px) {
62
- .pattern-lock__forgotBtn_1j5nw {
66
+ .pattern-lock__forgotBtn_74dxy {
63
67
  min-height: var(--size-m-height);
64
68
  }
65
69
 
66
- .pattern-lock__component_1j5nw {
70
+ .pattern-lock__component_74dxy {
67
71
  margin-bottom: var(--gap-l);
68
72
  }
69
73
  }
package/modern/Component.js CHANGED
@@ -7,10 +7,10 @@ import { getDataTestId } from '@alfalab/core-components-shared/modern';
7
7
  import { THEME_STATE, DEFAULT_EXTRA_BOUNDS, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from './consts.js';
8
8
  import { getSizes, getTheme, getColorByToken, getDefaultObserveTarget } from './utils.js';
9
9
 
10
- const styles = {"component":"pattern-lock__component_1j5nw","hidden":"pattern-lock__hidden_1j5nw","error":"pattern-lock__error_1j5nw","forgotBtn":"pattern-lock__forgotBtn_1j5nw"};
10
+ const styles = {"component":"pattern-lock__component_74dxy","hidden":"pattern-lock__hidden_74dxy","message":"pattern-lock__message_74dxy","error":"pattern-lock__error_74dxy","forgotBtn":"pattern-lock__forgotBtn_74dxy"};
11
11
  require('./index.css')
12
12
 
13
- const PatternLock = forwardRef(({ observeTokens = false, observerParams = {}, justifyNodes = 'space-between', className, error, dataTestId, forgotCodeBtnText = 'Забыли код?', showForgotCodeBtn = false, onForgotBtnClick, extraBounds = DEFAULT_EXTRA_BOUNDS, ...restProps }, ref) => {
13
+ const PatternLock = forwardRef(({ observeTokens = false, observerParams = {}, justifyNodes = 'space-between', className, error, dataTestId, forgotCodeBtnText = 'Забыли код?', showForgotCodeBtn = false, onForgotBtnClick, extraBounds = DEFAULT_EXTRA_BOUNDS, message, ...restProps }, ref) => {
14
14
  const [params, setParams] = useState();
15
15
  useEffect(() => {
16
16
  const { elementSizes, width, height } = getSizes();
@@ -40,9 +40,11 @@ const PatternLock = forwardRef(({ observeTokens = false, observerParams = {}, ju
40
40
  return () => styleObserver?.disconnect();
41
41
  // eslint-disable-next-line react-hooks/exhaustive-deps
42
42
  }, [observeTokens]);
43
+ const renderMessage = () => (React.createElement("div", { className: styles.message, "data-test-id": getDataTestId(dataTestId, 'message') }, message));
44
+ const renderError = () => (React.createElement("div", { className: cn(styles.message, styles.error), "data-test-id": getDataTestId(dataTestId, 'error') }, error));
43
45
  return (React.createElement("div", { className: cn(styles.component, className, { [styles.hidden]: !params }), "data-test-id": dataTestId },
44
46
  React.createElement(Gap, { size: 'xs' }),
45
- React.createElement("div", { className: styles.error }, error),
47
+ error ? renderError() : renderMessage(),
46
48
  React.createElement(Gap, { size: '3xl' }),
47
49
  React.createElement(ReactCanvasPatternLock, { ...restProps, ...params, ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds }),
48
50
  showForgotCodeBtn ? (React.createElement(ButtonMobile, { view: 'link', className: styles.forgotBtn, onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React.createElement("div", { className: styles.forgotBtn }))));
package/modern/index.css CHANGED
@@ -1,7 +1,8 @@
1
- /* hash: 8u5ns */
1
+ /* hash: xg4fu */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-text-negative: #d91d0b; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
+ --color-light-text-negative: #d91d0b;
5
+ --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
6
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
7
  } :root {
7
8
  } :root {
@@ -26,44 +27,47 @@
26
27
  --size-m-height: 56px;
27
28
  } :root {
28
29
  --pattern-lock-max-width: 500px;
29
- } .pattern-lock__component_1j5nw {
30
+ } .pattern-lock__component_74dxy {
30
31
  max-width: var(--pattern-lock-max-width);
31
32
  margin: var(--gap-xs) 0 var(--gap-xl) 0
32
- } .pattern-lock__component_1j5nw canvas {
33
+ } .pattern-lock__component_74dxy canvas {
33
34
  display: block;
34
35
  margin: 0 auto;
35
- } .pattern-lock__hidden_1j5nw {
36
+ } .pattern-lock__hidden_74dxy {
36
37
  visibility: hidden;
37
- } .pattern-lock__error_1j5nw {
38
+ } .pattern-lock__message_74dxy {
38
39
  font-size: 16px;
39
40
  line-height: 24px;
40
41
  font-weight: 400;
41
42
 
42
- display: flex;
43
- justify-content: center;
44
- align-items: center;
43
+ text-align: center;
45
44
  padding: 0 var(--gap-m);
46
45
  min-height: 24px;
46
+ overflow: hidden;
47
+ text-overflow: ellipsis;
48
+ white-space: nowrap;
49
+ color: var(--color-light-text-primary);
50
+ } .pattern-lock__error_74dxy {
47
51
  color: var(--color-light-text-negative);
48
- } .pattern-lock__forgotBtn_1j5nw {
52
+ } .pattern-lock__forgotBtn_74dxy {
49
53
  display: block;
50
54
  min-height: var(--size-xs-height);
51
55
  margin: var(--gap-xl) auto 0;
52
56
  } @media screen and (min-width: 360px) {
53
- .pattern-lock__forgotBtn_1j5nw {
57
+ .pattern-lock__forgotBtn_74dxy {
54
58
  margin-top: var(--gap-2xl);
55
59
  min-height: var(--size-s-height);
56
60
  }
57
61
 
58
- .pattern-lock__component_1j5nw {
62
+ .pattern-lock__component_74dxy {
59
63
  margin-bottom: var(--gap-s);
60
64
  }
61
65
  } @media screen and (min-width: 390px) {
62
- .pattern-lock__forgotBtn_1j5nw {
66
+ .pattern-lock__forgotBtn_74dxy {
63
67
  min-height: var(--size-m-height);
64
68
  }
65
69
 
66
- .pattern-lock__component_1j5nw {
70
+ .pattern-lock__component_74dxy {
67
71
  margin-bottom: var(--gap-l);
68
72
  }
69
73
  }
package/modern/typings.d.ts CHANGED
@@ -29,6 +29,10 @@ type PatternLockProps = {
29
29
  * Сообщение об ошибке
30
30
  */
31
31
  error?: ReactNode;
32
+ /**
33
+ * Сообщение над графическим ключом
34
+ */
35
+ message?: ReactNode;
32
36
  /**
33
37
  * Идентификатор для систем автоматизированного тестирования.
34
38
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-pattern-lock",
3
- "version": "1.3.2",
3
+ "version": "1.4.0",
4
4
  "description": "Pattern lock",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,9 +15,9 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-button": "^9.0.2",
18
+ "@alfalab/core-components-button": "^9.0.3",
19
19
  "@alfalab/core-components-gap": "^1.2.0",
20
- "@alfalab/core-components-shared": "^0.2.0",
20
+ "@alfalab/core-components-shared": "^0.3.0",
21
21
  "react-canvas-pattern-lock": "^1.1.1",
22
22
  "classnames": "^2.3.1",
23
23
  "tslib": "^2.4.0"
package/src/Component.tsx CHANGED
@@ -26,6 +26,7 @@ export const PatternLock = forwardRef<TPatternLockInstance, PatternLockProps>(
26
26
  showForgotCodeBtn = false,
27
27
  onForgotBtnClick,
28
28
  extraBounds = DEFAULT_EXTRA_BOUNDS,
29
+ message,
29
30
  ...restProps
30
31
  },
31
32
  ref,
@@ -75,6 +76,21 @@ export const PatternLock = forwardRef<TPatternLockInstance, PatternLockProps>(
75
76
  // eslint-disable-next-line react-hooks/exhaustive-deps
76
77
  }, [observeTokens]);
77
78
 
79
+ const renderMessage = () => (
80
+ <div className={styles.message} data-test-id={getDataTestId(dataTestId, 'message')}>
81
+ {message}
82
+ </div>
83
+ );
84
+
85
+ const renderError = () => (
86
+ <div
87
+ className={cn(styles.message, styles.error)}
88
+ data-test-id={getDataTestId(dataTestId, 'error')}
89
+ >
90
+ {error}
91
+ </div>
92
+ );
93
+
78
94
  return (
79
95
  <div
80
96
  className={cn(styles.component, className, { [styles.hidden]: !params })}
@@ -82,7 +98,7 @@ export const PatternLock = forwardRef<TPatternLockInstance, PatternLockProps>(
82
98
  >
83
99
  <Gap size='xs' />
84
100
 
85
- <div className={styles.error}>{error}</div>
101
+ {error ? renderError() : renderMessage()}
86
102
 
87
103
  <Gap size='3xl' />
88
104
 
package/src/index.module.css CHANGED
@@ -15,14 +15,19 @@
15
15
  visibility: hidden;
16
16
  }
17
17
 
18
- .error {
18
+ .message {
19
19
  @mixin paragraph_primary_medium;
20
20
 
21
- display: flex;
22
- justify-content: center;
23
- align-items: center;
21
+ text-align: center;
24
22
  padding: 0 var(--gap-m);
25
23
  min-height: 24px;
24
+ overflow: hidden;
25
+ text-overflow: ellipsis;
26
+ white-space: nowrap;
27
+ color: var(--color-light-text-primary);
28
+ }
29
+
30
+ .error {
26
31
  color: var(--color-light-text-negative);
27
32
  }
28
33
 
package/src/typings.ts CHANGED
@@ -37,6 +37,11 @@ export type PatternLockProps = {
37
37
  */
38
38
  error?: ReactNode;
39
39
 
40
+ /**
41
+ * Сообщение над графическим ключом
42
+ */
43
+ message?: ReactNode;
44
+
40
45
  /**
41
46
  * Идентификатор для систем автоматизированного тестирования.
42
47
  */
package/typings.d.ts CHANGED
@@ -29,6 +29,10 @@ type PatternLockProps = {
29
29
  * Сообщение об ошибке
30
30
  */
31
31
  error?: ReactNode;
32
+ /**
33
+ * Сообщение над графическим ключом
34
+ */
35
+ message?: ReactNode;
32
36
  /**
33
37
  * Идентификатор для систем автоматизированного тестирования.
34
38
  */