ecomlab-components-next 0.1.214 → 0.1.216
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.
- package/dist/components/Buttons/ButtonSignUp/ButtonSignUp.js +75 -0
- package/dist/components/Buttons/ButtonSignUp/ButtonSignUp.module.scss +92 -0
- package/dist/components/Buttons/ButtonSignUp/ButtonSignUp.stories.js +30 -0
- package/dist/components/Buttons/ButtonSignUp/calendar.svg +14 -0
- package/dist/components/Buttons/SignUpButton/ButtonSignUp.js +75 -0
- package/dist/components/Buttons/SignUpButton/ButtonSignUp.module.scss +92 -0
- package/dist/components/Buttons/SignUpButton/ButtonSignUp.stories.js +30 -0
- package/dist/components/Buttons/SignUpButton/calendar.svg +14 -0
- package/dist/index.js +7 -0
- package/package.json +1 -1
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _image = _interopRequireDefault(require("next/image"));
|
|
11
|
+
var _ButtonSignUpModule = _interopRequireDefault(require("./ButtonSignUp.module.scss"));
|
|
12
|
+
var _calendar = _interopRequireDefault(require("./calendar.svg"));
|
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
14
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
15
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
16
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
17
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
18
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
19
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
20
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
21
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
22
|
+
var ButtonSignUp = function ButtonSignUp(_ref) {
|
|
23
|
+
var onClick = _ref.onClick,
|
|
24
|
+
_ref$media = _ref.media,
|
|
25
|
+
media = _ref$media === void 0 ? '1000px' : _ref$media,
|
|
26
|
+
_ref$isMobile = _ref.isMobile,
|
|
27
|
+
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
|
|
28
|
+
var _useState = (0, _react.useState)(getMatches),
|
|
29
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
30
|
+
screenWidth = _useState2[0],
|
|
31
|
+
setScreenWidth = _useState2[1];
|
|
32
|
+
var getMatches = function getMatches() {
|
|
33
|
+
return typeof window !== 'undefined' ? window.matchMedia("(max-width:".concat(media, ")")).matches : false;
|
|
34
|
+
};
|
|
35
|
+
(0, _react.useEffect)(function () {
|
|
36
|
+
var mediaQuery = window.matchMedia("(max-width: ".concat(media, ")"));
|
|
37
|
+
var onResize = function onResize(e) {
|
|
38
|
+
return setScreenWidth(e.matches);
|
|
39
|
+
};
|
|
40
|
+
mediaQuery.addEventListener('change', onResize);
|
|
41
|
+
return function () {
|
|
42
|
+
return mediaQuery.removeEventListener('change', onResize);
|
|
43
|
+
};
|
|
44
|
+
}, [media]);
|
|
45
|
+
var collapsed = !isMobile && screenWidth;
|
|
46
|
+
var buttonClassName = [_ButtonSignUpModule["default"].buttonSignUp, isMobile ? _ButtonSignUpModule["default"].small : '', collapsed ? _ButtonSignUpModule["default"].collapsed : ''].join(' ').trim();
|
|
47
|
+
var buttonStyles = {
|
|
48
|
+
maxWidth: collapsed && '56px',
|
|
49
|
+
padding: collapsed ? '0' : '0 16px',
|
|
50
|
+
justifyContent: collapsed && 'center'
|
|
51
|
+
};
|
|
52
|
+
var imageWrapperStyles = {
|
|
53
|
+
'--after-left': collapsed ? '-11px' : 'calc(100% - 6px)',
|
|
54
|
+
'--after-top': collapsed ? '-11px' : '-2px'
|
|
55
|
+
};
|
|
56
|
+
return /*#__PURE__*/_react["default"].createElement("button", {
|
|
57
|
+
className: buttonClassName,
|
|
58
|
+
style: buttonStyles,
|
|
59
|
+
type: "button",
|
|
60
|
+
onClick: onClick
|
|
61
|
+
}, isMobile ? /*#__PURE__*/_react["default"].createElement("span", {
|
|
62
|
+
className: _ButtonSignUpModule["default"].secondaryText
|
|
63
|
+
}, "\u0417\u0430\u043F\u0438\u0441\u0430\u0442\u044C\u0441\u044F") : !collapsed ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
|
|
64
|
+
className: _ButtonSignUpModule["default"].primaryText
|
|
65
|
+
}, "\u041E\u043D\u043B\u0430\u0439\u043D \u0437\u0430\u043F\u0438\u0441\u044C"), /*#__PURE__*/_react["default"].createElement("span", {
|
|
66
|
+
className: _ButtonSignUpModule["default"].secondaryText
|
|
67
|
+
}, "\u0417\u0430\u043F\u0438\u0441\u0430\u0442\u044C\u0441\u044F")) : null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
68
|
+
className: _ButtonSignUpModule["default"].imageWrapper,
|
|
69
|
+
style: imageWrapperStyles
|
|
70
|
+
}, /*#__PURE__*/_react["default"].createElement(_image["default"], {
|
|
71
|
+
src: _calendar["default"],
|
|
72
|
+
alt: "icon-calendar"
|
|
73
|
+
})));
|
|
74
|
+
};
|
|
75
|
+
var _default = exports["default"] = ButtonSignUp;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
.buttonSignUp {
|
|
2
|
+
align-items: center;
|
|
3
|
+
background: #fff;
|
|
4
|
+
border: 1px solid #c6e7c9;
|
|
5
|
+
border-radius: 12px;
|
|
6
|
+
color: #042b8f;
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
display: flex;
|
|
9
|
+
gap: 8px;
|
|
10
|
+
justify-content: space-between;
|
|
11
|
+
line-height: 16px;
|
|
12
|
+
min-height: 56px;
|
|
13
|
+
max-width: 188px;
|
|
14
|
+
padding: 0 16px;
|
|
15
|
+
transition: background 0.3s, box-shadow 0.3s;
|
|
16
|
+
|
|
17
|
+
&:hover, &:focus {
|
|
18
|
+
opacity: none;
|
|
19
|
+
background: #225df4;
|
|
20
|
+
box-shadow: inset 0 0 24px 0 rgba(27, 54, 123, 0.16);
|
|
21
|
+
|
|
22
|
+
.primaryText {
|
|
23
|
+
display: none;
|
|
24
|
+
opacity: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.secondaryText {
|
|
28
|
+
display: block;
|
|
29
|
+
opacity: 1;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.small {
|
|
35
|
+
max-width: 146px;
|
|
36
|
+
min-height: 32px;
|
|
37
|
+
padding: 16px;
|
|
38
|
+
|
|
39
|
+
&:hover .secondaryText {
|
|
40
|
+
color: #fff;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.secondaryText {
|
|
44
|
+
display: block;
|
|
45
|
+
color: inherit;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.imageWrapper {
|
|
50
|
+
align-items: center;
|
|
51
|
+
display: flex;
|
|
52
|
+
height: 22px;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
width: 22px;
|
|
55
|
+
position: relative;
|
|
56
|
+
|
|
57
|
+
&::after {
|
|
58
|
+
content: '';
|
|
59
|
+
width: 12px;
|
|
60
|
+
height: 12px;
|
|
61
|
+
position: absolute;
|
|
62
|
+
z-index: 1;
|
|
63
|
+
top: var(--after-top);
|
|
64
|
+
left: var(--after-left);
|
|
65
|
+
background-color: #57cc6a;
|
|
66
|
+
border-radius: 50%;
|
|
67
|
+
border: 2px solid #9ae0a6;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
img {
|
|
71
|
+
min-height: 100%;
|
|
72
|
+
min-width: 100%;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.primaryText,
|
|
77
|
+
.secondaryText {
|
|
78
|
+
font-family: 'Open Sans', sans-serif;
|
|
79
|
+
font-size: 13px;
|
|
80
|
+
font-style: normal;
|
|
81
|
+
font-weight: 700;
|
|
82
|
+
text-align: center;
|
|
83
|
+
line-height: 16px;
|
|
84
|
+
display: inline-block;
|
|
85
|
+
width: 100%;
|
|
86
|
+
transition: opacity 0.3s, color 0.3s;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.secondaryText {
|
|
90
|
+
display: none;
|
|
91
|
+
color: #fff;
|
|
92
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.Default = void 0;
|
|
7
|
+
var _ButtonSignUp = _interopRequireDefault(require("./ButtonSignUp"));
|
|
8
|
+
var _addonActions = require("@storybook/addon-actions");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
11
|
+
var _default = exports["default"] = {
|
|
12
|
+
title: 'ButtonSignUp',
|
|
13
|
+
component: _ButtonSignUp["default"],
|
|
14
|
+
args: {
|
|
15
|
+
onClick: _addonActions.action
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
var Default = exports.Default = {
|
|
19
|
+
render: function render(args) {
|
|
20
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
21
|
+
style: {
|
|
22
|
+
display: 'flex',
|
|
23
|
+
gap: '10px',
|
|
24
|
+
flexDirection: 'column'
|
|
25
|
+
}
|
|
26
|
+
}, /*#__PURE__*/React.createElement(_ButtonSignUp["default"], args), /*#__PURE__*/React.createElement(_ButtonSignUp["default"], _extends({}, args, {
|
|
27
|
+
isMobile: true
|
|
28
|
+
})));
|
|
29
|
+
}
|
|
30
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 30 30" fill="none">
|
|
2
|
+
<path
|
|
3
|
+
d="M9 0.5C4.30558 0.5 0.5 4.30558 0.5 9V21C0.5 25.6944 4.30558 29.5 9 29.5H21C25.6944 29.5 29.5 25.6944 29.5 21V9C29.5 4.30558 25.6944 0.5 21 0.5H9Z"
|
|
4
|
+
fill="#225DF4" />
|
|
5
|
+
<path
|
|
6
|
+
d="M9 0.5C4.30558 0.5 0.5 4.30558 0.5 9V21C0.5 25.6944 4.30558 29.5 9 29.5H21C25.6944 29.5 29.5 25.6944 29.5 21V9C29.5 4.30558 25.6944 0.5 21 0.5H9Z" />
|
|
7
|
+
<path
|
|
8
|
+
d="M18.0625 8.67V7.5C18.0625 7.1925 17.8075 6.9375 17.5 6.9375C17.1925 6.9375 16.9375 7.1925 16.9375 7.5V8.625H12.0625V7.5C12.0625 7.1925 11.8075 6.9375 11.5 6.9375C11.1925 6.9375 10.9375 7.1925 10.9375 7.5V8.67C8.9125 8.8575 7.93 10.065 7.78 11.8575C7.765 12.075 7.945 12.255 8.155 12.255H20.845C21.0625 12.255 21.2425 12.0675 21.22 11.8575C21.07 10.065 20.0875 8.8575 18.0625 8.67Z"
|
|
9
|
+
fill="white" />
|
|
10
|
+
<path
|
|
11
|
+
d="M20.5 13.38H8.5C8.0875 13.38 7.75 13.7175 7.75 14.13V18.75C7.75 21 8.875 22.5 11.5 22.5H17.5C20.125 22.5 21.25 21 21.25 18.75V14.13C21.25 13.7175 20.9125 13.38 20.5 13.38ZM12.4075 19.6575C12.3325 19.725 12.25 19.7775 12.16 19.815C12.07 19.8525 11.9725 19.875 11.875 19.875C11.7775 19.875 11.68 19.8525 11.59 19.815C11.5 19.7775 11.4175 19.725 11.3425 19.6575C11.2075 19.515 11.125 19.32 11.125 19.125C11.125 18.93 11.2075 18.735 11.3425 18.5925C11.4175 18.525 11.5 18.4725 11.59 18.435C11.77 18.36 11.98 18.36 12.16 18.435C12.25 18.4725 12.3325 18.525 12.4075 18.5925C12.5425 18.735 12.625 18.93 12.625 19.125C12.625 19.32 12.5425 19.515 12.4075 19.6575ZM12.565 16.785C12.5275 16.875 12.475 16.9575 12.4075 17.0325C12.3325 17.1 12.25 17.1525 12.16 17.19C12.07 17.2275 11.9725 17.25 11.875 17.25C11.7775 17.25 11.68 17.2275 11.59 17.19C11.5 17.1525 11.4175 17.1 11.3425 17.0325C11.275 16.9575 11.2225 16.875 11.185 16.785C11.1475 16.695 11.125 16.5975 11.125 16.5C11.125 16.4025 11.1475 16.305 11.185 16.215C11.2225 16.125 11.275 16.0425 11.3425 15.9675C11.4175 15.9 11.5 15.8475 11.59 15.81C11.77 15.735 11.98 15.735 12.16 15.81C12.25 15.8475 12.3325 15.9 12.4075 15.9675C12.475 16.0425 12.5275 16.125 12.565 16.215C12.6025 16.305 12.625 16.4025 12.625 16.5C12.625 16.5975 12.6025 16.695 12.565 16.785ZM15.0325 17.0325C14.9575 17.1 14.875 17.1525 14.785 17.19C14.695 17.2275 14.5975 17.25 14.5 17.25C14.4025 17.25 14.305 17.2275 14.215 17.19C14.125 17.1525 14.0425 17.1 13.9675 17.0325C13.8325 16.89 13.75 16.695 13.75 16.5C13.75 16.305 13.8325 16.11 13.9675 15.9675C14.0425 15.9 14.125 15.8475 14.215 15.81C14.395 15.7275 14.605 15.7275 14.785 15.81C14.875 15.8475 14.9575 15.9 15.0325 15.9675C15.1675 16.11 15.25 16.305 15.25 16.5C15.25 16.695 15.1675 16.89 15.0325 17.0325Z"
|
|
12
|
+
fill="white" />
|
|
13
|
+
<script xmlns="" />
|
|
14
|
+
</svg>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _image = _interopRequireDefault(require("next/image"));
|
|
11
|
+
var _ButtonSignUpModule = _interopRequireDefault(require("./ButtonSignUp.module.scss"));
|
|
12
|
+
var _calendar = _interopRequireDefault(require("./calendar.svg"));
|
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
14
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
15
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
16
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
17
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
18
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
19
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
20
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
21
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
22
|
+
var ButtonSignUp = function ButtonSignUp(_ref) {
|
|
23
|
+
var onClick = _ref.onClick,
|
|
24
|
+
_ref$media = _ref.media,
|
|
25
|
+
media = _ref$media === void 0 ? '1000px' : _ref$media,
|
|
26
|
+
_ref$isMobile = _ref.isMobile,
|
|
27
|
+
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
|
|
28
|
+
var _useState = (0, _react.useState)(getMatches),
|
|
29
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
30
|
+
screenWidth = _useState2[0],
|
|
31
|
+
setScreenWidth = _useState2[1];
|
|
32
|
+
var getMatches = function getMatches() {
|
|
33
|
+
return typeof window !== 'undefined' ? window.matchMedia("(max-width:".concat(media, ")")).matches : false;
|
|
34
|
+
};
|
|
35
|
+
(0, _react.useEffect)(function () {
|
|
36
|
+
var mediaQuery = window.matchMedia("(max-width: ".concat(media, ")"));
|
|
37
|
+
var onResize = function onResize(e) {
|
|
38
|
+
return setScreenWidth(e.matches);
|
|
39
|
+
};
|
|
40
|
+
mediaQuery.addEventListener('change', onResize);
|
|
41
|
+
return function () {
|
|
42
|
+
return mediaQuery.removeEventListener('change', onResize);
|
|
43
|
+
};
|
|
44
|
+
}, [media]);
|
|
45
|
+
var collapsed = !isMobile && screenWidth;
|
|
46
|
+
var buttonClassName = [_ButtonSignUpModule["default"].buttonSignUp, isMobile ? _ButtonSignUpModule["default"].small : '', collapsed ? _ButtonSignUpModule["default"].collapsed : ''].join(' ').trim();
|
|
47
|
+
var buttonStyles = {
|
|
48
|
+
maxWidth: collapsed && '56px',
|
|
49
|
+
padding: collapsed ? '0' : '0 16px',
|
|
50
|
+
justifyContent: collapsed && 'center'
|
|
51
|
+
};
|
|
52
|
+
var imageWrapperStyles = {
|
|
53
|
+
'--after-left': collapsed ? '-11px' : 'calc(100% - 6px)',
|
|
54
|
+
'--after-top': collapsed ? '-11px' : '-2px'
|
|
55
|
+
};
|
|
56
|
+
return /*#__PURE__*/_react["default"].createElement("button", {
|
|
57
|
+
className: buttonClassName,
|
|
58
|
+
style: buttonStyles,
|
|
59
|
+
type: "button",
|
|
60
|
+
onClick: onClick
|
|
61
|
+
}, isMobile ? /*#__PURE__*/_react["default"].createElement("span", {
|
|
62
|
+
className: _ButtonSignUpModule["default"].secondaryText
|
|
63
|
+
}, "\u0417\u0430\u043F\u0438\u0441\u0430\u0442\u044C\u0441\u044F") : !collapsed ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
|
|
64
|
+
className: _ButtonSignUpModule["default"].primaryText
|
|
65
|
+
}, "\u041E\u043D\u043B\u0430\u0439\u043D \u0437\u0430\u043F\u0438\u0441\u044C"), /*#__PURE__*/_react["default"].createElement("span", {
|
|
66
|
+
className: _ButtonSignUpModule["default"].secondaryText
|
|
67
|
+
}, "\u0417\u0430\u043F\u0438\u0441\u0430\u0442\u044C\u0441\u044F")) : null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
68
|
+
className: _ButtonSignUpModule["default"].imageWrapper,
|
|
69
|
+
style: imageWrapperStyles
|
|
70
|
+
}, /*#__PURE__*/_react["default"].createElement(_image["default"], {
|
|
71
|
+
src: _calendar["default"],
|
|
72
|
+
alt: "icon-calendar"
|
|
73
|
+
})));
|
|
74
|
+
};
|
|
75
|
+
var _default = exports["default"] = ButtonSignUp;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
.buttonSignUp {
|
|
2
|
+
align-items: center;
|
|
3
|
+
background: #fff;
|
|
4
|
+
border: 1px solid #c6e7c9;
|
|
5
|
+
border-radius: 12px;
|
|
6
|
+
color: #042b8f;
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
display: flex;
|
|
9
|
+
gap: 8px;
|
|
10
|
+
justify-content: space-between;
|
|
11
|
+
line-height: 16px;
|
|
12
|
+
min-height: 56px;
|
|
13
|
+
max-width: 188px;
|
|
14
|
+
padding: 0 16px;
|
|
15
|
+
transition: background 0.3s, box-shadow 0.3s;
|
|
16
|
+
|
|
17
|
+
&:hover, &:focus {
|
|
18
|
+
opacity: none;
|
|
19
|
+
background: #225df4;
|
|
20
|
+
box-shadow: inset 0 0 24px 0 rgba(27, 54, 123, 0.16);
|
|
21
|
+
|
|
22
|
+
.primaryText {
|
|
23
|
+
display: none;
|
|
24
|
+
opacity: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.secondaryText {
|
|
28
|
+
display: block;
|
|
29
|
+
opacity: 1;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.small {
|
|
35
|
+
max-width: 146px;
|
|
36
|
+
min-height: 32px;
|
|
37
|
+
padding: 16px;
|
|
38
|
+
|
|
39
|
+
&:hover .secondaryText {
|
|
40
|
+
color: #fff;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.secondaryText {
|
|
44
|
+
display: block;
|
|
45
|
+
color: inherit;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.imageWrapper {
|
|
50
|
+
align-items: center;
|
|
51
|
+
display: flex;
|
|
52
|
+
height: 22px;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
width: 22px;
|
|
55
|
+
position: relative;
|
|
56
|
+
|
|
57
|
+
&::after {
|
|
58
|
+
content: '';
|
|
59
|
+
width: 12px;
|
|
60
|
+
height: 12px;
|
|
61
|
+
position: absolute;
|
|
62
|
+
z-index: 1;
|
|
63
|
+
top: var(--after-top);
|
|
64
|
+
left: var(--after-left);
|
|
65
|
+
background-color: #57cc6a;
|
|
66
|
+
border-radius: 50%;
|
|
67
|
+
border: 2px solid #9ae0a6;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
img {
|
|
71
|
+
min-height: 100%;
|
|
72
|
+
min-width: 100%;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.primaryText,
|
|
77
|
+
.secondaryText {
|
|
78
|
+
font-family: 'Open Sans', sans-serif;
|
|
79
|
+
font-size: 13px;
|
|
80
|
+
font-style: normal;
|
|
81
|
+
font-weight: 700;
|
|
82
|
+
text-align: center;
|
|
83
|
+
line-height: 16px;
|
|
84
|
+
display: inline-block;
|
|
85
|
+
width: 100%;
|
|
86
|
+
transition: opacity 0.3s, color 0.3s;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.secondaryText {
|
|
90
|
+
display: none;
|
|
91
|
+
color: #fff;
|
|
92
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.Default = void 0;
|
|
7
|
+
var _ButtonSignUp = _interopRequireDefault(require("./ButtonSignUp"));
|
|
8
|
+
var _addonActions = require("@storybook/addon-actions");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
11
|
+
var _default = exports["default"] = {
|
|
12
|
+
title: 'ButtonSignUp',
|
|
13
|
+
component: _ButtonSignUp["default"],
|
|
14
|
+
args: {
|
|
15
|
+
onClick: _addonActions.action
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
var Default = exports.Default = {
|
|
19
|
+
render: function render(args) {
|
|
20
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
21
|
+
style: {
|
|
22
|
+
display: 'flex',
|
|
23
|
+
gap: '10px',
|
|
24
|
+
flexDirection: 'column'
|
|
25
|
+
}
|
|
26
|
+
}, /*#__PURE__*/React.createElement(_ButtonSignUp["default"], args), /*#__PURE__*/React.createElement(_ButtonSignUp["default"], _extends({}, args, {
|
|
27
|
+
isMobile: true
|
|
28
|
+
})));
|
|
29
|
+
}
|
|
30
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 30 30" fill="none">
|
|
2
|
+
<path
|
|
3
|
+
d="M9 0.5C4.30558 0.5 0.5 4.30558 0.5 9V21C0.5 25.6944 4.30558 29.5 9 29.5H21C25.6944 29.5 29.5 25.6944 29.5 21V9C29.5 4.30558 25.6944 0.5 21 0.5H9Z"
|
|
4
|
+
fill="#225DF4" />
|
|
5
|
+
<path
|
|
6
|
+
d="M9 0.5C4.30558 0.5 0.5 4.30558 0.5 9V21C0.5 25.6944 4.30558 29.5 9 29.5H21C25.6944 29.5 29.5 25.6944 29.5 21V9C29.5 4.30558 25.6944 0.5 21 0.5H9Z" />
|
|
7
|
+
<path
|
|
8
|
+
d="M18.0625 8.67V7.5C18.0625 7.1925 17.8075 6.9375 17.5 6.9375C17.1925 6.9375 16.9375 7.1925 16.9375 7.5V8.625H12.0625V7.5C12.0625 7.1925 11.8075 6.9375 11.5 6.9375C11.1925 6.9375 10.9375 7.1925 10.9375 7.5V8.67C8.9125 8.8575 7.93 10.065 7.78 11.8575C7.765 12.075 7.945 12.255 8.155 12.255H20.845C21.0625 12.255 21.2425 12.0675 21.22 11.8575C21.07 10.065 20.0875 8.8575 18.0625 8.67Z"
|
|
9
|
+
fill="white" />
|
|
10
|
+
<path
|
|
11
|
+
d="M20.5 13.38H8.5C8.0875 13.38 7.75 13.7175 7.75 14.13V18.75C7.75 21 8.875 22.5 11.5 22.5H17.5C20.125 22.5 21.25 21 21.25 18.75V14.13C21.25 13.7175 20.9125 13.38 20.5 13.38ZM12.4075 19.6575C12.3325 19.725 12.25 19.7775 12.16 19.815C12.07 19.8525 11.9725 19.875 11.875 19.875C11.7775 19.875 11.68 19.8525 11.59 19.815C11.5 19.7775 11.4175 19.725 11.3425 19.6575C11.2075 19.515 11.125 19.32 11.125 19.125C11.125 18.93 11.2075 18.735 11.3425 18.5925C11.4175 18.525 11.5 18.4725 11.59 18.435C11.77 18.36 11.98 18.36 12.16 18.435C12.25 18.4725 12.3325 18.525 12.4075 18.5925C12.5425 18.735 12.625 18.93 12.625 19.125C12.625 19.32 12.5425 19.515 12.4075 19.6575ZM12.565 16.785C12.5275 16.875 12.475 16.9575 12.4075 17.0325C12.3325 17.1 12.25 17.1525 12.16 17.19C12.07 17.2275 11.9725 17.25 11.875 17.25C11.7775 17.25 11.68 17.2275 11.59 17.19C11.5 17.1525 11.4175 17.1 11.3425 17.0325C11.275 16.9575 11.2225 16.875 11.185 16.785C11.1475 16.695 11.125 16.5975 11.125 16.5C11.125 16.4025 11.1475 16.305 11.185 16.215C11.2225 16.125 11.275 16.0425 11.3425 15.9675C11.4175 15.9 11.5 15.8475 11.59 15.81C11.77 15.735 11.98 15.735 12.16 15.81C12.25 15.8475 12.3325 15.9 12.4075 15.9675C12.475 16.0425 12.5275 16.125 12.565 16.215C12.6025 16.305 12.625 16.4025 12.625 16.5C12.625 16.5975 12.6025 16.695 12.565 16.785ZM15.0325 17.0325C14.9575 17.1 14.875 17.1525 14.785 17.19C14.695 17.2275 14.5975 17.25 14.5 17.25C14.4025 17.25 14.305 17.2275 14.215 17.19C14.125 17.1525 14.0425 17.1 13.9675 17.0325C13.8325 16.89 13.75 16.695 13.75 16.5C13.75 16.305 13.8325 16.11 13.9675 15.9675C14.0425 15.9 14.125 15.8475 14.215 15.81C14.395 15.7275 14.605 15.7275 14.785 15.81C14.875 15.8475 14.9575 15.9 15.0325 15.9675C15.1675 16.11 15.25 16.305 15.25 16.5C15.25 16.695 15.1675 16.89 15.0325 17.0325Z"
|
|
12
|
+
fill="white" />
|
|
13
|
+
<script xmlns="" />
|
|
14
|
+
</svg>
|
package/dist/index.js
CHANGED
|
@@ -45,6 +45,12 @@ Object.defineProperty(exports, "ButtonBasic", {
|
|
|
45
45
|
return _ButtonBasic["default"];
|
|
46
46
|
}
|
|
47
47
|
});
|
|
48
|
+
Object.defineProperty(exports, "ButtonSignUp", {
|
|
49
|
+
enumerable: true,
|
|
50
|
+
get: function get() {
|
|
51
|
+
return _ButtonSignUp["default"];
|
|
52
|
+
}
|
|
53
|
+
});
|
|
48
54
|
Object.defineProperty(exports, "CardsGrey", {
|
|
49
55
|
enumerable: true,
|
|
50
56
|
get: function get() {
|
|
@@ -301,6 +307,7 @@ var _PointsList = _interopRequireDefault(require("./components/ConstructorCompon
|
|
|
301
307
|
var _Footer = _interopRequireDefault(require("./components/ConstructorComponents/Footer/Footer"));
|
|
302
308
|
var _PagePreviews = _interopRequireDefault(require("./components/ConstructorComponents/PagePreviews/PagePreviews"));
|
|
303
309
|
var _ButtonBasic = _interopRequireDefault(require("./components/Buttons/ButtonBasic/ButtonBasic"));
|
|
310
|
+
var _ButtonSignUp = _interopRequireDefault(require("./components/Buttons/ButtonSignUp/ButtonSignUp"));
|
|
304
311
|
var _InputDinamycPlaceholder = _interopRequireDefault(require("./components/Inputs/InputDinamycPlaceholder/InputDinamycPlaceholder"));
|
|
305
312
|
var _ModalCrm = _interopRequireDefault(require("./components/ModalCrm/ModalCrm"));
|
|
306
313
|
var _ModalBitrixFormV = _interopRequireDefault(require("./components/Article/ModalBitrixFormV2/ModalBitrixFormV2"));
|