@lideralia/alife-uikit 1.3.13 → 1.3.15
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/atoms/Input/styles.js +1 -0
- package/dist/atoms/Typography/Typography.js +4 -1
- package/dist/atoms/Uploader/Uploader.js +18 -8
- package/dist/atoms/imgs/AI.js +39 -0
- package/dist/atoms/imgs/BiographicalEditor.js +240 -0
- package/dist/atoms/imgs/Briefcase.js +39 -0
- package/dist/atoms/imgs/Camera.js +41 -0
- package/dist/atoms/imgs/Cover.js +170 -0
- package/dist/atoms/imgs/Diamond.js +41 -0
- package/dist/atoms/imgs/Happy.js +38 -0
- package/dist/atoms/imgs/Heart.js +38 -0
- package/dist/atoms/imgs/Music.js +38 -0
- package/dist/atoms/imgs/Plant.js +38 -0
- package/dist/atoms/imgs/Sunrise.js +39 -0
- package/dist/atoms/imgs/index.js +88 -0
- package/dist/index.js +63 -0
- package/dist/molecules/BiographicalEditor/QuestionCard/QuestionCard.js +86 -0
- package/dist/molecules/BiographicalEditor/QuestionCard/QuestionCard.stories.js +120 -0
- package/dist/molecules/BiographicalEditor/QuestionCard/index.js +13 -0
- package/dist/molecules/BlockCard/BlockCard.js +140 -0
- package/dist/molecules/BlockCard/BlockCard.stories.js +130 -0
- package/dist/molecules/BlockCard/index.js +13 -0
- package/dist/organisms/BiographicalEditor/BlockProgress/BlockProgress.js +89 -0
- package/dist/organisms/BiographicalEditor/BlockProgress/BlockProgress.stories.js +159 -0
- package/dist/organisms/BiographicalEditor/BlockProgress/index.js +15 -0
- package/dist/organisms/BiographicalEditor/EditorBanner/EditorBanner.js +97 -0
- package/dist/organisms/BiographicalEditor/EditorBanner/EditorBanner.stories.js +46 -0
- package/dist/organisms/BiographicalEditor/EditorBanner/index.js +13 -0
- package/dist/organisms/BiographicalEditor/EditorBlockFooter/EditorBlockFooter.js +147 -0
- package/dist/organisms/BiographicalEditor/EditorBlockFooter/EditorBlockFooter.stories.js +166 -0
- package/dist/organisms/BiographicalEditor/EditorBlockFooter/index.js +15 -0
- package/dist/organisms/BiographicalEditor/EditorGeneratingCard/EditorGeneratingCard.js +146 -0
- package/dist/organisms/BiographicalEditor/EditorGeneratingCard/EditorGeneratingCard.stories.js +113 -0
- package/dist/organisms/BiographicalEditor/EditorGeneratingCard/index.js +15 -0
- package/dist/organisms/BiographicalEditor/EditorProgress/EditorProgress.js +136 -0
- package/dist/organisms/BiographicalEditor/EditorProgress/EditorProgress.stories.js +213 -0
- package/dist/organisms/BiographicalEditor/EditorProgress/index.js +15 -0
- package/dist/organisms/Cards/Adviser.js +1 -0
- package/dist/organisms/Cards/Badges.js +1 -0
- package/dist/organisms/Cards/CardUsersResultOfFlowers.js +1 -0
- package/dist/organisms/Cards/Ceremony.js +2 -0
- package/dist/organisms/Cards/Content.js +1 -0
- package/dist/organisms/Cards/Gone.js +7 -3
- package/dist/organisms/Cards/GoneBasic.js +2 -1
- package/dist/organisms/Cards/GoneCeremony.js +3 -0
- package/dist/organisms/Cards/PersonalData.js +5 -0
- package/dist/organisms/Cards/Udiana.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = exports.WithMaxLength = exports.PremiumThreeQuestions = exports.FreeFilled = exports.FreeEmpty = void 0;
|
|
9
|
+
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
|
|
14
|
+
var _QuestionCard = require("./QuestionCard");
|
|
15
|
+
|
|
16
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
|
+
|
|
18
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
|
+
|
|
20
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
21
|
+
|
|
22
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
23
|
+
|
|
24
|
+
var _default = {
|
|
25
|
+
title: 'Molecules/BiographicalEditor/QuestionCard',
|
|
26
|
+
component: _QuestionCard.QuestionCard,
|
|
27
|
+
parameters: {
|
|
28
|
+
layout: 'padded'
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
exports.default = _default;
|
|
32
|
+
|
|
33
|
+
const Controlled = _ref => {
|
|
34
|
+
let {
|
|
35
|
+
questions,
|
|
36
|
+
initialAnswers = {},
|
|
37
|
+
maxLength
|
|
38
|
+
} = _ref;
|
|
39
|
+
const [answers, setAnswers] = (0, _react.useState)(initialAnswers);
|
|
40
|
+
|
|
41
|
+
const handleChange = (key, value) => setAnswers(prev => _objectSpread(_objectSpread({}, prev), {}, {
|
|
42
|
+
[key]: value
|
|
43
|
+
}));
|
|
44
|
+
|
|
45
|
+
return _react.default.createElement("div", {
|
|
46
|
+
style: {
|
|
47
|
+
maxWidth: 480,
|
|
48
|
+
margin: '0 auto'
|
|
49
|
+
}
|
|
50
|
+
}, _react.default.createElement(_QuestionCard.QuestionCard, {
|
|
51
|
+
questions: questions,
|
|
52
|
+
answers: answers,
|
|
53
|
+
onChange: handleChange,
|
|
54
|
+
maxLength: maxLength
|
|
55
|
+
}));
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
Controlled.defaultProps = {
|
|
59
|
+
questions: [],
|
|
60
|
+
initialAnswers: {},
|
|
61
|
+
maxLength: undefined
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const FreeEmpty = () => _react.default.createElement(Controlled, {
|
|
65
|
+
questions: [{
|
|
66
|
+
questionKey: 'free',
|
|
67
|
+
question: '¿Cómo describirías a esta persona en pocas palabras?',
|
|
68
|
+
hint: 'Cómo era, qué la definía',
|
|
69
|
+
placeholder: 'Por ejemplo:\n"Era una persona alegre y cercana, siempre dispuesta a ayudar. Le encantaba reunir a la familia y hacía que todos se sintieran bienvenidos..."'
|
|
70
|
+
}]
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
exports.FreeEmpty = FreeEmpty;
|
|
74
|
+
|
|
75
|
+
const FreeFilled = () => _react.default.createElement(Controlled, {
|
|
76
|
+
questions: [{
|
|
77
|
+
questionKey: 'free',
|
|
78
|
+
question: '¿Cómo describirías a esta persona en pocas palabras?',
|
|
79
|
+
hint: 'Cómo era, qué la definía',
|
|
80
|
+
placeholder: 'Por ejemplo: "Era una persona alegre y cercana..."'
|
|
81
|
+
}],
|
|
82
|
+
initialAnswers: {
|
|
83
|
+
free: 'Jaime era un hombre tranquilo, de pocas palabras pero muy observador. Transmitía seguridad sólo con estar presente.'
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
exports.FreeFilled = FreeFilled;
|
|
88
|
+
|
|
89
|
+
const PremiumThreeQuestions = () => _react.default.createElement(Controlled, {
|
|
90
|
+
questions: [{
|
|
91
|
+
questionKey: 'premium_0',
|
|
92
|
+
question: '¿Cómo describirías a esta persona en pocas palabras?',
|
|
93
|
+
hint: 'Cómo era, qué la definía',
|
|
94
|
+
placeholder: 'Por ejemplo: "Era una persona alegre y cercana..."'
|
|
95
|
+
}, {
|
|
96
|
+
questionKey: 'premium_1',
|
|
97
|
+
question: '¿Qué recuerdas con más cariño de ella?',
|
|
98
|
+
hint: 'Momentos, detalles, anécdotas',
|
|
99
|
+
placeholder: 'Por ejemplo: "Recuerdo especialmente su risa..."'
|
|
100
|
+
}, {
|
|
101
|
+
questionKey: 'premium_2',
|
|
102
|
+
question: '¿Cómo era en el día a día?',
|
|
103
|
+
hint: 'Costumbres, rutinas, pasiones',
|
|
104
|
+
placeholder: 'Por ejemplo: "Cada mañana preparaba café para todos..."'
|
|
105
|
+
}]
|
|
106
|
+
});
|
|
107
|
+
|
|
108
|
+
exports.PremiumThreeQuestions = PremiumThreeQuestions;
|
|
109
|
+
|
|
110
|
+
const WithMaxLength = () => _react.default.createElement(Controlled, {
|
|
111
|
+
questions: [{
|
|
112
|
+
questionKey: 'free',
|
|
113
|
+
question: '¿Cómo describirías a esta persona en pocas palabras?',
|
|
114
|
+
hint: 'Cómo era, qué la definía',
|
|
115
|
+
placeholder: 'Máximo 500 caracteres'
|
|
116
|
+
}],
|
|
117
|
+
maxLength: 500
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
exports.WithMaxLength = WithMaxLength;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "QuestionCard", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _QuestionCard.QuestionCard;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
var _QuestionCard = require("./QuestionCard");
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = exports.BlockCard = void 0;
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
+
|
|
14
|
+
var _Layout = require("../../atoms/Layout");
|
|
15
|
+
|
|
16
|
+
var _Typography = require("../../atoms/Typography");
|
|
17
|
+
|
|
18
|
+
const STATUS_STYLE_MAP = {
|
|
19
|
+
pending: {
|
|
20
|
+
bg: '#E5E5E8',
|
|
21
|
+
text: '#7F7F8A',
|
|
22
|
+
overlay: 0
|
|
23
|
+
},
|
|
24
|
+
in_progress: {
|
|
25
|
+
bg: '#8C88E7',
|
|
26
|
+
text: '#5A56DC',
|
|
27
|
+
overlay: 0.84
|
|
28
|
+
},
|
|
29
|
+
completed: {
|
|
30
|
+
bg: '#ACC64E',
|
|
31
|
+
text: '#8A9C49',
|
|
32
|
+
overlay: 0.84
|
|
33
|
+
},
|
|
34
|
+
overdue: {
|
|
35
|
+
bg: '#E83060',
|
|
36
|
+
text: '#D43646',
|
|
37
|
+
overlay: 0.90
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
const Card = (0, _styledComponents.default)(_Layout.Flex).withConfig({
|
|
41
|
+
displayName: "BlockCard__Card",
|
|
42
|
+
componentId: "sc-9xwg01-0"
|
|
43
|
+
})(["align-items:center;gap:9px;padding:6px 12px 6px 6px;border-radius:18px;background:#fff;box-shadow:0px 8px 18px 0px rgba(60,54,58,0.1);cursor:", ";"], _ref => {
|
|
44
|
+
let {
|
|
45
|
+
onClick
|
|
46
|
+
} = _ref;
|
|
47
|
+
return onClick ? 'pointer' : 'default';
|
|
48
|
+
});
|
|
49
|
+
const IconWrap = (0, _styledComponents.default)(_Layout.Flex).withConfig({
|
|
50
|
+
displayName: "BlockCard__IconWrap",
|
|
51
|
+
componentId: "sc-9xwg01-1"
|
|
52
|
+
})(["width:42px;height:42px;border-radius:14px;align-items:center;justify-content:center;flex-shrink:0;position:relative;overflow:hidden;padding:9px;"]);
|
|
53
|
+
|
|
54
|
+
const IconOverlay = _styledComponents.default.div.withConfig({
|
|
55
|
+
displayName: "BlockCard__IconOverlay",
|
|
56
|
+
componentId: "sc-9xwg01-2"
|
|
57
|
+
})(["position:absolute;inset:0;background:white;opacity:0.84;pointer-events:none;"]);
|
|
58
|
+
|
|
59
|
+
const IconContent = _styledComponents.default.div.withConfig({
|
|
60
|
+
displayName: "BlockCard__IconContent",
|
|
61
|
+
componentId: "sc-9xwg01-3"
|
|
62
|
+
})(["position:relative;z-index:1;display:flex;align-items:center;justify-content:center;"]);
|
|
63
|
+
|
|
64
|
+
const Meta = (0, _styledComponents.default)(_Layout.Flex).withConfig({
|
|
65
|
+
displayName: "BlockCard__Meta",
|
|
66
|
+
componentId: "sc-9xwg01-4"
|
|
67
|
+
})(["flex-direction:column;min-width:0;flex:1;"]);
|
|
68
|
+
|
|
69
|
+
const PillRoot = _styledComponents.default.div.withConfig({
|
|
70
|
+
displayName: "BlockCard__PillRoot",
|
|
71
|
+
componentId: "sc-9xwg01-5"
|
|
72
|
+
})(["position:relative;height:30px;padding:3px 12px;border-radius:8px;font-family:inherit;font-weight:600;font-size:11px;line-height:18px;overflow:hidden;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;"]);
|
|
73
|
+
|
|
74
|
+
const PillOverlay = _styledComponents.default.div.withConfig({
|
|
75
|
+
displayName: "BlockCard__PillOverlay",
|
|
76
|
+
componentId: "sc-9xwg01-6"
|
|
77
|
+
})(["position:absolute;inset:0;background:white;pointer-events:none;"]);
|
|
78
|
+
|
|
79
|
+
const PillLabel = _styledComponents.default.span.withConfig({
|
|
80
|
+
displayName: "BlockCard__PillLabel",
|
|
81
|
+
componentId: "sc-9xwg01-7"
|
|
82
|
+
})(["position:relative;z-index:1;"]);
|
|
83
|
+
|
|
84
|
+
const BlockCard = _ref2 => {
|
|
85
|
+
let {
|
|
86
|
+
blockKey,
|
|
87
|
+
name,
|
|
88
|
+
icon,
|
|
89
|
+
iconColor,
|
|
90
|
+
status,
|
|
91
|
+
statusLabel,
|
|
92
|
+
onClick,
|
|
93
|
+
style
|
|
94
|
+
} = _ref2;
|
|
95
|
+
const bgColor = iconColor || '#2396FB';
|
|
96
|
+
const pillStyle = status ? STATUS_STYLE_MAP[status] : null;
|
|
97
|
+
return _react.default.createElement(Card, {
|
|
98
|
+
onClick: onClick,
|
|
99
|
+
role: onClick ? 'button' : undefined,
|
|
100
|
+
tabIndex: onClick ? 0 : undefined,
|
|
101
|
+
onKeyDown: e => e.key === 'Enter' && onClick && onClick(),
|
|
102
|
+
"data-block-key": blockKey,
|
|
103
|
+
style: style
|
|
104
|
+
}, _react.default.createElement(IconWrap, {
|
|
105
|
+
style: {
|
|
106
|
+
background: bgColor
|
|
107
|
+
}
|
|
108
|
+
}, _react.default.createElement(IconOverlay, null), _react.default.createElement(IconContent, null, icon)), _react.default.createElement(Meta, null, _react.default.createElement(_Typography.Text, {
|
|
109
|
+
sizeText: "display14",
|
|
110
|
+
color: "black96",
|
|
111
|
+
fontWeight: "bold",
|
|
112
|
+
style: {
|
|
113
|
+
overflow: 'hidden',
|
|
114
|
+
textOverflow: 'ellipsis',
|
|
115
|
+
whiteSpace: 'nowrap',
|
|
116
|
+
fontSize: 13
|
|
117
|
+
}
|
|
118
|
+
}, name)), pillStyle && statusLabel && _react.default.createElement(PillRoot, {
|
|
119
|
+
style: {
|
|
120
|
+
background: pillStyle.bg,
|
|
121
|
+
color: pillStyle.text
|
|
122
|
+
}
|
|
123
|
+
}, pillStyle.overlay > 0 && _react.default.createElement(PillOverlay, {
|
|
124
|
+
style: {
|
|
125
|
+
opacity: pillStyle.overlay
|
|
126
|
+
}
|
|
127
|
+
}), _react.default.createElement(PillLabel, null, statusLabel)));
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
exports.BlockCard = BlockCard;
|
|
131
|
+
BlockCard.defaultProps = {
|
|
132
|
+
icon: null,
|
|
133
|
+
iconColor: '#2396FB',
|
|
134
|
+
status: undefined,
|
|
135
|
+
statusLabel: undefined,
|
|
136
|
+
onClick: undefined,
|
|
137
|
+
style: undefined
|
|
138
|
+
};
|
|
139
|
+
var _default = BlockCard;
|
|
140
|
+
exports.default = _default;
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = exports.Default = void 0;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
|
|
14
|
+
var _imgs = require("../../atoms/imgs");
|
|
15
|
+
|
|
16
|
+
var _Layout = require("../../atoms/Layout");
|
|
17
|
+
|
|
18
|
+
var _BlockCard = require("./BlockCard");
|
|
19
|
+
|
|
20
|
+
const STATUS_LABELS = {
|
|
21
|
+
pending: 'Pendiente',
|
|
22
|
+
in_progress: 'En progreso',
|
|
23
|
+
completed: 'Completado',
|
|
24
|
+
overdue: 'Pendiente'
|
|
25
|
+
};
|
|
26
|
+
var _default = {
|
|
27
|
+
title: 'Molecules/BlockCard',
|
|
28
|
+
component: _BlockCard.BlockCard,
|
|
29
|
+
argTypes: {
|
|
30
|
+
name: {
|
|
31
|
+
control: 'text'
|
|
32
|
+
},
|
|
33
|
+
blockKey: {
|
|
34
|
+
control: 'text'
|
|
35
|
+
},
|
|
36
|
+
iconColor: {
|
|
37
|
+
control: {
|
|
38
|
+
type: 'select',
|
|
39
|
+
options: ['green', 'purple', 'pink', 'orange', 'yellow', 'blue']
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
status: {
|
|
43
|
+
control: {
|
|
44
|
+
type: 'select',
|
|
45
|
+
options: [undefined, 'pending', 'in_progress', 'completed', 'overdue']
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
statusLabel: {
|
|
49
|
+
control: 'text'
|
|
50
|
+
},
|
|
51
|
+
onClick: {
|
|
52
|
+
action: 'clicked'
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
exports.default = _default;
|
|
57
|
+
const MOCK_BLOCKS = [{
|
|
58
|
+
blockKey: 'contexto_raices',
|
|
59
|
+
name: 'Contexto y raíces',
|
|
60
|
+
iconColor: '#ACC64E',
|
|
61
|
+
icon: _react.default.createElement(_imgs.Plant, null),
|
|
62
|
+
status: 'completed'
|
|
63
|
+
}, {
|
|
64
|
+
blockKey: 'recuerdos_anecdotas',
|
|
65
|
+
name: 'Recuerdos y anécdotas',
|
|
66
|
+
iconColor: '#8C88E7',
|
|
67
|
+
icon: _react.default.createElement(_imgs.Camera, null),
|
|
68
|
+
status: 'in_progress'
|
|
69
|
+
}, {
|
|
70
|
+
blockKey: 'familia_relaciones',
|
|
71
|
+
name: 'Familia y relaciones',
|
|
72
|
+
iconColor: '#E83060',
|
|
73
|
+
icon: _react.default.createElement(_imgs.Heart, null),
|
|
74
|
+
status: 'overdue'
|
|
75
|
+
}, {
|
|
76
|
+
blockKey: 'despedida',
|
|
77
|
+
name: 'Despedida',
|
|
78
|
+
iconColor: '#F87818',
|
|
79
|
+
icon: _react.default.createElement(_imgs.Sunrise, null),
|
|
80
|
+
status: 'pending'
|
|
81
|
+
}, {
|
|
82
|
+
blockKey: 'forma_ser',
|
|
83
|
+
name: 'Forma de ser',
|
|
84
|
+
iconColor: '#F698D7',
|
|
85
|
+
icon: _react.default.createElement(_imgs.Happy, null),
|
|
86
|
+
status: 'pending'
|
|
87
|
+
}, {
|
|
88
|
+
blockKey: 'vida_adulta_trabajo',
|
|
89
|
+
name: 'Vida adulta y trabajo',
|
|
90
|
+
iconColor: '#5A56DC',
|
|
91
|
+
icon: _react.default.createElement(_imgs.Briefcase, null),
|
|
92
|
+
status: 'pending'
|
|
93
|
+
}, {
|
|
94
|
+
blockKey: 'valores_legado',
|
|
95
|
+
name: 'Valores y legado',
|
|
96
|
+
iconColor: '#5FB3FC',
|
|
97
|
+
icon: _react.default.createElement(_imgs.Diamond, null),
|
|
98
|
+
status: 'pending'
|
|
99
|
+
}, {
|
|
100
|
+
blockKey: 'aficiones_forma_ser',
|
|
101
|
+
name: 'Aficiones y forma de ser',
|
|
102
|
+
iconColor: '#FEAE36',
|
|
103
|
+
icon: _react.default.createElement(_imgs.Music, null),
|
|
104
|
+
status: undefined
|
|
105
|
+
}];
|
|
106
|
+
|
|
107
|
+
const Template = args => _react.default.createElement(_Layout.Container, null, _react.default.createElement(_Layout.Row, {
|
|
108
|
+
justifyContent: "center"
|
|
109
|
+
}, _react.default.createElement(_Layout.Col, {
|
|
110
|
+
width: [1, 1, 2 / 3]
|
|
111
|
+
}, _react.default.createElement(_Layout.Flex, {
|
|
112
|
+
flexDirection: "column",
|
|
113
|
+
gap: "8px"
|
|
114
|
+
}, MOCK_BLOCKS.map(block => _react.default.createElement(_BlockCard.BlockCard, (0, _extends2.default)({
|
|
115
|
+
key: block.blockKey
|
|
116
|
+
}, block, {
|
|
117
|
+
statusLabel: block.status ? STATUS_LABELS[block.status] : undefined,
|
|
118
|
+
onClick: args.onClick
|
|
119
|
+
})))))));
|
|
120
|
+
|
|
121
|
+
const Default = Template.bind({});
|
|
122
|
+
exports.Default = Default;
|
|
123
|
+
Default.args = {};
|
|
124
|
+
Default.storyName = 'BlockCard — índice de bloques';
|
|
125
|
+
Default.parameters = {
|
|
126
|
+
design: {
|
|
127
|
+
type: 'figma',
|
|
128
|
+
url: 'https://www.figma.com/design/2PtpPtWT9wUKUrteJBkvlV?node-id=17941-93279'
|
|
129
|
+
}
|
|
130
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "BlockCard", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _BlockCard.BlockCard;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
var _BlockCard = require("./BlockCard");
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = exports.BlockProgress = void 0;
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
+
|
|
14
|
+
var _Layout = require("../../../atoms/Layout");
|
|
15
|
+
|
|
16
|
+
var _Typography = require("../../../atoms/Typography");
|
|
17
|
+
|
|
18
|
+
const Wrap = _styledComponents.default.div.withConfig({
|
|
19
|
+
displayName: "BlockProgress__Wrap",
|
|
20
|
+
componentId: "sc-114x50b-0"
|
|
21
|
+
})(["width:100%;display:flex;flex-direction:column;gap:6px;"]);
|
|
22
|
+
|
|
23
|
+
const Track = _styledComponents.default.div.withConfig({
|
|
24
|
+
displayName: "BlockProgress__Track",
|
|
25
|
+
componentId: "sc-114x50b-1"
|
|
26
|
+
})(["width:100%;height:4px;border-radius:999px;background:#e5e5e8;overflow:hidden;"]);
|
|
27
|
+
|
|
28
|
+
const Fill = _styledComponents.default.div.withConfig({
|
|
29
|
+
displayName: "BlockProgress__Fill",
|
|
30
|
+
componentId: "sc-114x50b-2"
|
|
31
|
+
})(["height:100%;border-radius:999px;transition:width 0.4s ease;"]);
|
|
32
|
+
|
|
33
|
+
const LabelRow = (0, _styledComponents.default)(_Layout.Flex).withConfig({
|
|
34
|
+
displayName: "BlockProgress__LabelRow",
|
|
35
|
+
componentId: "sc-114x50b-3"
|
|
36
|
+
})(["align-items:center;justify-content:space-between;gap:6px;"]);
|
|
37
|
+
const CountersRow = (0, _styledComponents.default)(_Layout.Flex).withConfig({
|
|
38
|
+
displayName: "BlockProgress__CountersRow",
|
|
39
|
+
componentId: "sc-114x50b-4"
|
|
40
|
+
})(["align-items:center;gap:6px;"]);
|
|
41
|
+
|
|
42
|
+
const BlockProgress = _ref => {
|
|
43
|
+
let {
|
|
44
|
+
requiredCompleted,
|
|
45
|
+
requiredTotal,
|
|
46
|
+
optionalCompleted,
|
|
47
|
+
optionalTotal,
|
|
48
|
+
percentage,
|
|
49
|
+
message,
|
|
50
|
+
color
|
|
51
|
+
} = _ref;
|
|
52
|
+
const showOptional = optionalTotal != null && optionalTotal > 0;
|
|
53
|
+
const clampedPct = Math.min(100, Math.max(0, percentage));
|
|
54
|
+
return _react.default.createElement(Wrap, null, _react.default.createElement(Track, null, _react.default.createElement(Fill, {
|
|
55
|
+
style: {
|
|
56
|
+
width: "".concat(clampedPct, "%"),
|
|
57
|
+
background: color
|
|
58
|
+
}
|
|
59
|
+
})), _react.default.createElement(LabelRow, null, _react.default.createElement(CountersRow, null, _react.default.createElement(_Typography.Text, {
|
|
60
|
+
sizeText: "display12",
|
|
61
|
+
color: "black60",
|
|
62
|
+
fontWeight: "medium"
|
|
63
|
+
}, requiredCompleted, " / ", requiredTotal), showOptional && _react.default.createElement(_Typography.Text, {
|
|
64
|
+
sizeText: "display12",
|
|
65
|
+
color: "black60",
|
|
66
|
+
fontWeight: "medium"
|
|
67
|
+
}, optionalCompleted, " / ", optionalTotal), _react.default.createElement(_Typography.Text, {
|
|
68
|
+
sizeText: "display12",
|
|
69
|
+
color: "black84",
|
|
70
|
+
fontWeight: "bold"
|
|
71
|
+
}, clampedPct, "%")), message && _react.default.createElement(_Typography.Text, {
|
|
72
|
+
sizeText: "display12",
|
|
73
|
+
fontWeight: "bold",
|
|
74
|
+
style: {
|
|
75
|
+
color,
|
|
76
|
+
flexShrink: 0
|
|
77
|
+
}
|
|
78
|
+
}, message)));
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
exports.BlockProgress = BlockProgress;
|
|
82
|
+
BlockProgress.defaultProps = {
|
|
83
|
+
optionalCompleted: undefined,
|
|
84
|
+
optionalTotal: undefined,
|
|
85
|
+
message: undefined,
|
|
86
|
+
color: '#ACC64E'
|
|
87
|
+
};
|
|
88
|
+
var _default = BlockProgress;
|
|
89
|
+
exports.default = _default;
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = exports.PremiumPartial = exports.PremiumComplete = exports.FreePlanPartial = exports.FreePlanEmpty = exports.FreePlanComplete = void 0;
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _Layout = require("../../../atoms/Layout");
|
|
13
|
+
|
|
14
|
+
var _BlockProgress = require("./BlockProgress");
|
|
15
|
+
|
|
16
|
+
var _default = {
|
|
17
|
+
title: 'Organisms/BiographicalEditor/BlockProgress',
|
|
18
|
+
component: _BlockProgress.BlockProgress,
|
|
19
|
+
argTypes: {
|
|
20
|
+
requiredCompleted: {
|
|
21
|
+
control: {
|
|
22
|
+
type: 'number',
|
|
23
|
+
min: 0,
|
|
24
|
+
max: 4,
|
|
25
|
+
step: 1
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
requiredTotal: {
|
|
29
|
+
control: {
|
|
30
|
+
type: 'number',
|
|
31
|
+
min: 1,
|
|
32
|
+
max: 4,
|
|
33
|
+
step: 1
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
optionalCompleted: {
|
|
37
|
+
control: {
|
|
38
|
+
type: 'number',
|
|
39
|
+
min: 0,
|
|
40
|
+
max: 4,
|
|
41
|
+
step: 1
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
optionalTotal: {
|
|
45
|
+
control: {
|
|
46
|
+
type: 'number',
|
|
47
|
+
min: 0,
|
|
48
|
+
max: 4,
|
|
49
|
+
step: 1
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
percentage: {
|
|
53
|
+
control: {
|
|
54
|
+
type: 'range',
|
|
55
|
+
min: 0,
|
|
56
|
+
max: 100,
|
|
57
|
+
step: 1
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
message: {
|
|
61
|
+
control: 'text'
|
|
62
|
+
},
|
|
63
|
+
color: {
|
|
64
|
+
control: 'color'
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
exports.default = _default;
|
|
69
|
+
|
|
70
|
+
const Wrapper = _ref => {
|
|
71
|
+
let {
|
|
72
|
+
children
|
|
73
|
+
} = _ref;
|
|
74
|
+
return _react.default.createElement(_Layout.Container, null, _react.default.createElement(_Layout.Row, {
|
|
75
|
+
justifyContent: "center"
|
|
76
|
+
}, _react.default.createElement(_Layout.Col, {
|
|
77
|
+
width: [1, 1, 2 / 3]
|
|
78
|
+
}, _react.default.createElement(_Layout.Flex, {
|
|
79
|
+
flexDirection: "column",
|
|
80
|
+
gap: "24px",
|
|
81
|
+
padding: "24px 0"
|
|
82
|
+
}, children))));
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
const FreePlanEmpty = args => _react.default.createElement(Wrapper, null, _react.default.createElement(_BlockProgress.BlockProgress, args));
|
|
86
|
+
|
|
87
|
+
exports.FreePlanEmpty = FreePlanEmpty;
|
|
88
|
+
FreePlanEmpty.args = {
|
|
89
|
+
requiredCompleted: 0,
|
|
90
|
+
requiredTotal: 4,
|
|
91
|
+
percentage: 0,
|
|
92
|
+
message: 'Completa los 4 bloques para continuar',
|
|
93
|
+
color: '#2396FB'
|
|
94
|
+
};
|
|
95
|
+
FreePlanEmpty.storyName = 'Free — sin completar';
|
|
96
|
+
|
|
97
|
+
const FreePlanPartial = args => _react.default.createElement(Wrapper, null, _react.default.createElement(_BlockProgress.BlockProgress, args));
|
|
98
|
+
|
|
99
|
+
exports.FreePlanPartial = FreePlanPartial;
|
|
100
|
+
FreePlanPartial.args = {
|
|
101
|
+
requiredCompleted: 2,
|
|
102
|
+
requiredTotal: 4,
|
|
103
|
+
percentage: 50,
|
|
104
|
+
message: '¡Vas por la mitad!',
|
|
105
|
+
color: '#2396FB'
|
|
106
|
+
};
|
|
107
|
+
FreePlanPartial.storyName = 'Free — a medias';
|
|
108
|
+
|
|
109
|
+
const FreePlanComplete = args => _react.default.createElement(Wrapper, null, _react.default.createElement(_BlockProgress.BlockProgress, args));
|
|
110
|
+
|
|
111
|
+
exports.FreePlanComplete = FreePlanComplete;
|
|
112
|
+
FreePlanComplete.args = {
|
|
113
|
+
requiredCompleted: 4,
|
|
114
|
+
requiredTotal: 4,
|
|
115
|
+
percentage: 100,
|
|
116
|
+
message: '¡Listo para generar!',
|
|
117
|
+
color: '#2396FB'
|
|
118
|
+
};
|
|
119
|
+
FreePlanComplete.storyName = 'Free — completado';
|
|
120
|
+
|
|
121
|
+
const PremiumPartial = args => _react.default.createElement(Wrapper, null, _react.default.createElement(_BlockProgress.BlockProgress, args));
|
|
122
|
+
|
|
123
|
+
exports.PremiumPartial = PremiumPartial;
|
|
124
|
+
PremiumPartial.args = {
|
|
125
|
+
requiredCompleted: 4,
|
|
126
|
+
requiredTotal: 4,
|
|
127
|
+
optionalCompleted: 2,
|
|
128
|
+
optionalTotal: 4,
|
|
129
|
+
percentage: 75,
|
|
130
|
+
message: 'Está casi perfecto',
|
|
131
|
+
color: '#ACC64E'
|
|
132
|
+
};
|
|
133
|
+
PremiumPartial.storyName = 'Premium — parcial (Figma)';
|
|
134
|
+
PremiumPartial.parameters = {
|
|
135
|
+
design: {
|
|
136
|
+
type: 'figma',
|
|
137
|
+
url: 'https://www.figma.com/design/2PtpPtWT9wUKUrteJBkvlV?node-id=17941-42499'
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
const PremiumComplete = args => _react.default.createElement(Wrapper, null, _react.default.createElement(_BlockProgress.BlockProgress, args));
|
|
142
|
+
|
|
143
|
+
exports.PremiumComplete = PremiumComplete;
|
|
144
|
+
PremiumComplete.args = {
|
|
145
|
+
requiredCompleted: 4,
|
|
146
|
+
requiredTotal: 4,
|
|
147
|
+
optionalCompleted: 4,
|
|
148
|
+
optionalTotal: 4,
|
|
149
|
+
percentage: 100,
|
|
150
|
+
message: '¡Todo completado!',
|
|
151
|
+
color: '#ACC64E'
|
|
152
|
+
};
|
|
153
|
+
PremiumComplete.storyName = 'Premium — todo completado';
|
|
154
|
+
PremiumComplete.parameters = {
|
|
155
|
+
design: {
|
|
156
|
+
type: 'figma',
|
|
157
|
+
url: 'https://www.figma.com/design/2PtpPtWT9wUKUrteJBkvlV?node-id=17941-42519'
|
|
158
|
+
}
|
|
159
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "BlockProgress", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function () {
|
|
11
|
+
return _BlockProgress.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
var _BlockProgress = _interopRequireDefault(require("./BlockProgress"));
|