@stokr/components-library 2.3.43 → 2.3.44-beta.1
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.
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
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); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.ChecklistCard = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
+
var _Icon = require("../Icon/Icon.style");
|
|
11
|
+
var _ChecklistCard = require("./ChecklistCard.styles");
|
|
12
|
+
var _ToDoListTask = require("../ToDoList/ToDoListTask.styles");
|
|
13
|
+
var _colors = _interopRequireDefault(require("../../styles/colors"));
|
|
14
|
+
var _warningFilled = require("../../static/images/warning-filled.svg");
|
|
15
|
+
var _excluded = ["iconState", "title", "description", "link", "onClick", "tooltip", "iconCopy", "disabled"];
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
18
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
19
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
20
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
21
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
22
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
23
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
24
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
25
|
+
// Only three icon states: done, missing, in_progress
|
|
26
|
+
var ICON_MAP = {
|
|
27
|
+
done: {
|
|
28
|
+
icon: _Icon.iconsMap.check,
|
|
29
|
+
color: _colors.default.freshGreen
|
|
30
|
+
},
|
|
31
|
+
missing: {
|
|
32
|
+
icon: /*#__PURE__*/_react.default.createElement(_warningFilled.ReactComponent, null),
|
|
33
|
+
color: _colors.default.warningYellow
|
|
34
|
+
},
|
|
35
|
+
in_progress: {
|
|
36
|
+
icon: _Icon.iconsMap.inProgress,
|
|
37
|
+
color: _colors.default.lightGrey
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
var ChecklistCard = function ChecklistCard(_ref) {
|
|
41
|
+
var _icon$props;
|
|
42
|
+
var _ref$iconState = _ref.iconState,
|
|
43
|
+
iconState = _ref$iconState === void 0 ? 'in_progress' : _ref$iconState,
|
|
44
|
+
title = _ref.title,
|
|
45
|
+
description = _ref.description,
|
|
46
|
+
link = _ref.link,
|
|
47
|
+
onClick = _ref.onClick,
|
|
48
|
+
tooltip = _ref.tooltip,
|
|
49
|
+
iconCopy = _ref.iconCopy,
|
|
50
|
+
_ref$disabled = _ref.disabled,
|
|
51
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
52
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
53
|
+
// Fallback to in_progress if iconState is not recognized
|
|
54
|
+
var _ref2 = ICON_MAP[iconState] || ICON_MAP['in_progress'],
|
|
55
|
+
icon = _ref2.icon,
|
|
56
|
+
color = _ref2.color;
|
|
57
|
+
|
|
58
|
+
// Render font icon if string, or SVG if React element
|
|
59
|
+
var iconElement = typeof icon === 'string' ? /*#__PURE__*/_react.default.createElement(_ToDoListTask.Icon, {
|
|
60
|
+
icon: icon,
|
|
61
|
+
style: {
|
|
62
|
+
color: color,
|
|
63
|
+
display: 'block',
|
|
64
|
+
fontSize: 16
|
|
65
|
+
}
|
|
66
|
+
}) : /*#__PURE__*/_react.default.cloneElement(icon, {
|
|
67
|
+
style: _objectSpread({
|
|
68
|
+
color: color,
|
|
69
|
+
width: 20,
|
|
70
|
+
height: 20
|
|
71
|
+
}, (_icon$props = icon.props) === null || _icon$props === void 0 ? void 0 : _icon$props.style)
|
|
72
|
+
});
|
|
73
|
+
var content = /*#__PURE__*/_react.default.createElement(_ChecklistCard.CardContainer, _extends({
|
|
74
|
+
"aria-disabled": disabled,
|
|
75
|
+
tabIndex: disabled ? -1 : 0
|
|
76
|
+
}, onClick ? {
|
|
77
|
+
role: 'button',
|
|
78
|
+
onClick: onClick
|
|
79
|
+
} : {}, rest), /*#__PURE__*/_react.default.createElement(_ChecklistCard.IconBlock, null, iconElement, /*#__PURE__*/_react.default.createElement(_ChecklistCard.IconCopy, null, iconCopy)), /*#__PURE__*/_react.default.createElement(_ChecklistCard.CardTitle, null, title), /*#__PURE__*/_react.default.createElement(_ChecklistCard.CardDescription, null, description));
|
|
80
|
+
if (link && !onClick && !disabled) {
|
|
81
|
+
return /*#__PURE__*/_react.default.createElement("a", {
|
|
82
|
+
href: link,
|
|
83
|
+
tabIndex: 0,
|
|
84
|
+
"aria-disabled": disabled,
|
|
85
|
+
style: {
|
|
86
|
+
textDecoration: 'none',
|
|
87
|
+
color: 'inherit'
|
|
88
|
+
}
|
|
89
|
+
}, content);
|
|
90
|
+
}
|
|
91
|
+
return content;
|
|
92
|
+
};
|
|
93
|
+
exports.ChecklistCard = ChecklistCard;
|
|
94
|
+
ChecklistCard.propTypes = {
|
|
95
|
+
iconState: _propTypes.default.oneOf(['done', 'missing', 'in_progress']),
|
|
96
|
+
title: _propTypes.default.string.isRequired,
|
|
97
|
+
description: _propTypes.default.string.isRequired,
|
|
98
|
+
link: _propTypes.default.string,
|
|
99
|
+
onClick: _propTypes.default.func,
|
|
100
|
+
tooltip: _propTypes.default.string,
|
|
101
|
+
iconCopy: _propTypes.default.string.isRequired,
|
|
102
|
+
disabled: _propTypes.default.bool
|
|
103
|
+
};
|
|
104
|
+
var _default = ChecklistCard;
|
|
105
|
+
exports.default = _default;
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.WithOnClick = exports.WithLink = exports.Missing = exports.InProgress = exports.GridOfCards = exports.DoneVerified = exports.DoneRegistered = exports.DoneApproved = exports.Disabled = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _ChecklistCard = _interopRequireDefault(require("./ChecklistCard"));
|
|
10
|
+
var _global = _interopRequireDefault(require("../../styles/global"));
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
// Adjust path as needed
|
|
13
|
+
var _default = {
|
|
14
|
+
title: 'Checklist/ChecklistCard',
|
|
15
|
+
component: _ChecklistCard.default,
|
|
16
|
+
decorators: [function (Story) {
|
|
17
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(Story, null));
|
|
18
|
+
}]
|
|
19
|
+
};
|
|
20
|
+
exports.default = _default;
|
|
21
|
+
var DoneRegistered = function DoneRegistered() {
|
|
22
|
+
return /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
|
|
23
|
+
iconState: "done",
|
|
24
|
+
iconCopy: "REGISTERED",
|
|
25
|
+
title: "Country of Residence",
|
|
26
|
+
description: "We ask for your country of residence to ensure legal access to the right investment opportunities."
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
exports.DoneRegistered = DoneRegistered;
|
|
30
|
+
var DoneVerified = function DoneVerified() {
|
|
31
|
+
return /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
|
|
32
|
+
iconState: "done",
|
|
33
|
+
iconCopy: "VERIFIED",
|
|
34
|
+
title: "Verify Identity",
|
|
35
|
+
description: "KYC is required to confirm your identity before you can invest or trade."
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
exports.DoneVerified = DoneVerified;
|
|
39
|
+
var DoneApproved = function DoneApproved() {
|
|
40
|
+
return /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
|
|
41
|
+
iconState: "done",
|
|
42
|
+
iconCopy: "APPROVED",
|
|
43
|
+
title: "Tax ID",
|
|
44
|
+
description: "Some offers require you to provide your Tax ID before being able to invest in."
|
|
45
|
+
});
|
|
46
|
+
};
|
|
47
|
+
exports.DoneApproved = DoneApproved;
|
|
48
|
+
var Missing = function Missing() {
|
|
49
|
+
return /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
|
|
50
|
+
iconState: "missing",
|
|
51
|
+
iconCopy: "MISSING STEP",
|
|
52
|
+
title: "Liquid Address",
|
|
53
|
+
description: "This is your wallet address on the Liquid Network, required for token delivery."
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
exports.Missing = Missing;
|
|
57
|
+
var InProgress = function InProgress() {
|
|
58
|
+
return /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
|
|
59
|
+
iconState: "in_progress",
|
|
60
|
+
iconCopy: "IN PROGRESS",
|
|
61
|
+
title: "Verify Identity",
|
|
62
|
+
description: "Our anti-fraud squad is still working."
|
|
63
|
+
});
|
|
64
|
+
};
|
|
65
|
+
exports.InProgress = InProgress;
|
|
66
|
+
var WithLink = function WithLink() {
|
|
67
|
+
return /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
|
|
68
|
+
iconState: "missing",
|
|
69
|
+
iconCopy: "MISSING STEP",
|
|
70
|
+
title: "Liquid Address",
|
|
71
|
+
description: "Clicking this card will take you to the registration page.",
|
|
72
|
+
link: "/register-liquid"
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
exports.WithLink = WithLink;
|
|
76
|
+
var WithOnClick = function WithOnClick() {
|
|
77
|
+
return /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
|
|
78
|
+
iconState: "done",
|
|
79
|
+
iconCopy: "VERIFIED",
|
|
80
|
+
title: "Clickable Card",
|
|
81
|
+
description: "This card is clickable and calls an onClick handler.",
|
|
82
|
+
onClick: function onClick() {
|
|
83
|
+
return alert('Card clicked!');
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
};
|
|
87
|
+
exports.WithOnClick = WithOnClick;
|
|
88
|
+
var Disabled = function Disabled() {
|
|
89
|
+
return /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
|
|
90
|
+
iconState: "missing",
|
|
91
|
+
iconCopy: "MISSING STEP",
|
|
92
|
+
title: "Disabled Card",
|
|
93
|
+
description: "This card is disabled and not interactive.",
|
|
94
|
+
disabled: true
|
|
95
|
+
});
|
|
96
|
+
};
|
|
97
|
+
exports.Disabled = Disabled;
|
|
98
|
+
var Grid = _styledComponents.default.div.withConfig({
|
|
99
|
+
displayName: "ChecklistCardstories__Grid",
|
|
100
|
+
componentId: "sc-no624-0"
|
|
101
|
+
})(["display:grid;grid-template-columns:repeat(4,1fr);gap:32px;@media (max-width:900px){grid-template-columns:1fr;}"]);
|
|
102
|
+
var GridOfCards = function GridOfCards() {
|
|
103
|
+
return /*#__PURE__*/_react.default.createElement(Grid, null, /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
|
|
104
|
+
iconState: "done",
|
|
105
|
+
iconCopy: "REGISTERED",
|
|
106
|
+
title: "Country of Residence",
|
|
107
|
+
description: "We ask for your country of residence to ensure legal access to the right investment opportunities."
|
|
108
|
+
}), /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
|
|
109
|
+
iconState: "done",
|
|
110
|
+
iconCopy: "VERIFIED",
|
|
111
|
+
title: "Verify Identity",
|
|
112
|
+
description: "KYC is required to confirm your identity before you can invest or trade."
|
|
113
|
+
}), /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
|
|
114
|
+
iconState: "missing",
|
|
115
|
+
iconCopy: "MISSING STEP",
|
|
116
|
+
title: "Liquid Address",
|
|
117
|
+
description: "This is your wallet address on the Liquid Network, required for token delivery."
|
|
118
|
+
}), /*#__PURE__*/_react.default.createElement(_ChecklistCard.default, {
|
|
119
|
+
iconState: "in_progress",
|
|
120
|
+
iconCopy: "IN PROGRESS",
|
|
121
|
+
title: "Tax ID",
|
|
122
|
+
description: "Some offers require you to provide your Tax ID before being able to invest in."
|
|
123
|
+
}));
|
|
124
|
+
};
|
|
125
|
+
exports.GridOfCards = GridOfCards;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.IconCopy = exports.IconBlock = exports.CardTitle = exports.CardDescription = exports.CardContainer = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
var _rwd = _interopRequireDefault(require("../../styles/rwd"));
|
|
9
|
+
var _templateObject, _templateObject2;
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
12
|
+
var CardContainer = _styledComponents.default.div.withConfig({
|
|
13
|
+
displayName: "ChecklistCardstyles__CardContainer",
|
|
14
|
+
componentId: "sc-rufrg1-0"
|
|
15
|
+
})(["display:flex;flex-direction:column;align-items:flex-start;border:1px solid #eaeaea;border-radius:1px;background:#fff;padding:32px 32px 32px 32px;min-width:320px;min-height:220px;box-sizing:border-box;transition:box-shadow 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.01);position:relative;cursor:pointer;&:hover{box-shadow:0 4px 16px rgba(0,0,0,0.04);}&[aria-disabled='true']{opacity:0.5;cursor:not-allowed;}"]);
|
|
16
|
+
exports.CardContainer = CardContainer;
|
|
17
|
+
var IconBlock = _styledComponents.default.div.withConfig({
|
|
18
|
+
displayName: "ChecklistCardstyles__IconBlock",
|
|
19
|
+
componentId: "sc-rufrg1-1"
|
|
20
|
+
})(["display:flex;align-items:center;margin-bottom:64px;"]);
|
|
21
|
+
exports.IconBlock = IconBlock;
|
|
22
|
+
var IconCopy = _styledComponents.default.span.withConfig({
|
|
23
|
+
displayName: "ChecklistCardstyles__IconCopy",
|
|
24
|
+
componentId: "sc-rufrg1-2"
|
|
25
|
+
})(["font-size:11px;font-weight:400;letter-spacing:2px;margin-left:8px;line-height:16px;text-transform:uppercase;"]);
|
|
26
|
+
exports.IconCopy = IconCopy;
|
|
27
|
+
var CardTitle = _styledComponents.default.div.withConfig({
|
|
28
|
+
displayName: "ChecklistCardstyles__CardTitle",
|
|
29
|
+
componentId: "sc-rufrg1-3"
|
|
30
|
+
})(["margin-bottom:32px;text-transform:uppercase;color:#202020;font-weight:800;word-wrap:break-word;font-size:16px;line-height:24px;letter-spacing:0.6px;", ""], _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: 22px;\n letter-spacing: 0.8px;\n line-height: 28px;\n"]))));
|
|
31
|
+
exports.CardTitle = CardTitle;
|
|
32
|
+
var CardDescription = _styledComponents.default.div.withConfig({
|
|
33
|
+
displayName: "ChecklistCardstyles__CardDescription",
|
|
34
|
+
componentId: "sc-rufrg1-4"
|
|
35
|
+
})(["color:#202020;font-size:14px;font-weight:300;line-height:20px;letter-spacing:0.5px;word-wrap:break-word;", ""], _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 16px;\n line-height: 24px;\n letter-spacing: 0.8px;\n"]))));
|
|
36
|
+
exports.CardDescription = CardDescription;
|
package/dist/index.js
CHANGED
|
@@ -1377,4 +1377,15 @@ Object.keys(_ChipWrapper).forEach(function (key) {
|
|
|
1377
1377
|
return _ChipWrapper[key];
|
|
1378
1378
|
}
|
|
1379
1379
|
});
|
|
1380
|
+
});
|
|
1381
|
+
var _ChecklistCard = require("./components/Checklist/ChecklistCard");
|
|
1382
|
+
Object.keys(_ChecklistCard).forEach(function (key) {
|
|
1383
|
+
if (key === "default" || key === "__esModule") return;
|
|
1384
|
+
if (key in exports && exports[key] === _ChecklistCard[key]) return;
|
|
1385
|
+
Object.defineProperty(exports, key, {
|
|
1386
|
+
enumerable: true,
|
|
1387
|
+
get: function get() {
|
|
1388
|
+
return _ChecklistCard[key];
|
|
1389
|
+
}
|
|
1390
|
+
});
|
|
1380
1391
|
});
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.78444 1.69789C10.017 1.83078 10.2097 2.0235 10.3426 2.25605L16.7578 13.4827C17.1688 14.202 16.9189 15.1183 16.1997 15.5293C15.973 15.6588 15.7165 15.7269 15.4555 15.7269H2.625C1.79657 15.7269 1.125 15.0553 1.125 14.2269C1.125 13.9659 1.19312 13.7093 1.32264 13.4827L7.73787 2.25605C8.14888 1.53677 9.06516 1.28688 9.78444 1.69789ZM9 11.0625C8.46429 11.0625 8.0625 11.4585 8.0625 11.9865C8.0625 12.5385 8.45211 12.9345 9 12.9345C9.53571 12.9345 9.9375 12.5385 9.9375 11.9985C9.9375 11.4585 9.53571 11.0625 9 11.0625ZM9.75 5.25H8.25V9.75H9.75V5.25Z" fill="#F19112"/>
|
|
3
|
+
</svg>
|