allaw-ui 2.6.2 → 2.6.4
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/atoms/buttons/ActionButton.d.ts +19 -0
- package/dist/components/atoms/buttons/ActionButton.js +117 -0
- package/dist/components/atoms/buttons/ActionButton.modules.css +112 -0
- package/dist/components/atoms/buttons/ActionButton.stories.d.ts +108 -0
- package/dist/components/atoms/buttons/ActionButton.stories.js +168 -0
- package/dist/components/molecules/stepper/Stepper.css +18 -1
- package/dist/components/molecules/stepper/Stepper.d.ts +2 -0
- package/dist/components/molecules/stepper/Stepper.js +4 -4
- package/package.json +1 -1
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React, { ButtonHTMLAttributes } from "react";
|
|
2
|
+
import "./ActionButton.modules.css";
|
|
3
|
+
import "../../../styles/global.css";
|
|
4
|
+
export interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
startIcon?: React.ReactNode;
|
|
6
|
+
endIcon?: React.ReactNode;
|
|
7
|
+
startIconName?: string;
|
|
8
|
+
endIconName?: string;
|
|
9
|
+
label: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
onClick?: () => Promise<void> | void;
|
|
12
|
+
fullWidth?: boolean;
|
|
13
|
+
type?: "button" | "submit" | "reset";
|
|
14
|
+
isLoading?: boolean;
|
|
15
|
+
variant?: "default" | "warning";
|
|
16
|
+
size?: "medium" | "large";
|
|
17
|
+
}
|
|
18
|
+
declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
19
|
+
export default ActionButton;
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
14
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
15
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
16
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
17
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
18
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
19
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
23
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
|
|
24
|
+
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
25
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
26
|
+
function step(op) {
|
|
27
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
28
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
29
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
30
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
31
|
+
switch (op[0]) {
|
|
32
|
+
case 0: case 1: t = op; break;
|
|
33
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
34
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
35
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
36
|
+
default:
|
|
37
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
38
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
39
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
40
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
41
|
+
if (t[2]) _.ops.pop();
|
|
42
|
+
_.trys.pop(); continue;
|
|
43
|
+
}
|
|
44
|
+
op = body.call(thisArg, _);
|
|
45
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
46
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
50
|
+
var t = {};
|
|
51
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
52
|
+
t[p] = s[p];
|
|
53
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
54
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
55
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
56
|
+
t[p[i]] = s[p[i]];
|
|
57
|
+
}
|
|
58
|
+
return t;
|
|
59
|
+
};
|
|
60
|
+
import React, { forwardRef, useImperativeHandle, useState, useEffect, } from "react";
|
|
61
|
+
import "./ActionButton.modules.css";
|
|
62
|
+
import "../../../styles/global.css";
|
|
63
|
+
var ActionButton = forwardRef(function (_a, ref) {
|
|
64
|
+
var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onClick = _a.onClick, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? "button" : _d, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, variant = _a.variant, _f = _a.size, size = _f === void 0 ? "medium" : _f, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "onClick", "fullWidth", "type", "isLoading", "variant", "size"]);
|
|
65
|
+
var buttonRef = React.useRef(null);
|
|
66
|
+
var _g = useState(false), internalIsLoading = _g[0], setInternalIsLoading = _g[1];
|
|
67
|
+
var _h = useState(""), loadingDots = _h[0], setLoadingDots = _h[1];
|
|
68
|
+
useImperativeHandle(ref, function () { return buttonRef.current; });
|
|
69
|
+
var isButtonLoading = isLoading || internalIsLoading;
|
|
70
|
+
useEffect(function () {
|
|
71
|
+
var interval = null;
|
|
72
|
+
if (isButtonLoading) {
|
|
73
|
+
interval = setInterval(function () {
|
|
74
|
+
setLoadingDots(function (prev) {
|
|
75
|
+
if (prev.length >= 3)
|
|
76
|
+
return "";
|
|
77
|
+
return prev + ".";
|
|
78
|
+
});
|
|
79
|
+
}, 500);
|
|
80
|
+
}
|
|
81
|
+
return function () {
|
|
82
|
+
if (interval) {
|
|
83
|
+
clearInterval(interval);
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
}, [isButtonLoading]);
|
|
87
|
+
var handleClick = function (event) { return __awaiter(void 0, void 0, void 0, function () {
|
|
88
|
+
return __generator(this, function (_a) {
|
|
89
|
+
switch (_a.label) {
|
|
90
|
+
case 0:
|
|
91
|
+
if (isButtonLoading) {
|
|
92
|
+
event.preventDefault();
|
|
93
|
+
return [2 /*return*/];
|
|
94
|
+
}
|
|
95
|
+
if (!onClick) return [3 /*break*/, 4];
|
|
96
|
+
setInternalIsLoading(true);
|
|
97
|
+
_a.label = 1;
|
|
98
|
+
case 1:
|
|
99
|
+
_a.trys.push([1, , 3, 4]);
|
|
100
|
+
return [4 /*yield*/, onClick()];
|
|
101
|
+
case 2:
|
|
102
|
+
_a.sent();
|
|
103
|
+
return [3 /*break*/, 4];
|
|
104
|
+
case 3:
|
|
105
|
+
setInternalIsLoading(false);
|
|
106
|
+
return [7 /*endfinally*/];
|
|
107
|
+
case 4: return [2 /*return*/];
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
}); };
|
|
111
|
+
return (React.createElement("button", __assign({ ref: buttonRef, className: "action-button ".concat(disabled ? "action-button-disabled" : "action-button-enabled", " ").concat(fullWidth ? "action-button-full-width" : "", " ").concat(isButtonLoading ? "action-button-loading" : "").concat(variant === "warning" ? "action-button-warning" : "", " ").concat(size === "large" ? "action-button-large" : ""), disabled: disabled, onClick: handleClick, type: type }, props),
|
|
112
|
+
startIcon && (React.createElement("span", { className: "action-button-icon ".concat(startIconName) })),
|
|
113
|
+
React.createElement("span", { className: "action-button-label" }, label),
|
|
114
|
+
isButtonLoading ? (React.createElement("span", { className: "action-button-loading-dots" }, loadingDots)) : (endIcon && React.createElement("span", { className: "action-button-icon ".concat(endIconName) }))));
|
|
115
|
+
});
|
|
116
|
+
ActionButton.displayName = "ActionButton";
|
|
117
|
+
export default ActionButton;
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
.action-button {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
gap: 0.5rem;
|
|
6
|
+
width: auto;
|
|
7
|
+
height: 42px;
|
|
8
|
+
padding: 1rem 1.3rem;
|
|
9
|
+
border-radius: 24px;
|
|
10
|
+
transition: background-color 0.2s, opacity 0.2s;
|
|
11
|
+
border: 0px;
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
text-wrap: nowrap;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.action-button-large {
|
|
17
|
+
height: 46px;
|
|
18
|
+
padding: 1.1rem 1.4rem;
|
|
19
|
+
border-radius: 26px;
|
|
20
|
+
gap: 0.6rem;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.action-button-enabled {
|
|
24
|
+
background-color: #171e25;
|
|
25
|
+
color: white;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.action-button-enabled:hover {
|
|
29
|
+
background-color: #1985e8;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.action-button-enabled:active {
|
|
33
|
+
background-color: #1985e8;
|
|
34
|
+
opacity: 0.7;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.action-button-disabled {
|
|
38
|
+
background-color: #b9b9b9;
|
|
39
|
+
opacity: 0.5;
|
|
40
|
+
color: #9b9b9b;
|
|
41
|
+
cursor: not-allowed;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.action-button-icon {
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
width: 20px;
|
|
49
|
+
height: 20px;
|
|
50
|
+
color: white;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.action-button-large .action-button-icon {
|
|
54
|
+
width: 22px;
|
|
55
|
+
height: 22px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.action-button-label {
|
|
59
|
+
font-family: "Open Sans", sans-serif;
|
|
60
|
+
font-weight: 500;
|
|
61
|
+
font-size: 14px;
|
|
62
|
+
line-height: 22px;
|
|
63
|
+
letter-spacing: 0em;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.action-button-large .action-button-label {
|
|
67
|
+
font-size: 15px;
|
|
68
|
+
line-height: 23px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.action-button-full-width {
|
|
72
|
+
width: 100%;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.action-button-loading {
|
|
76
|
+
animation: pulse-background 1.5s infinite alternate;
|
|
77
|
+
pointer-events: none;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.action-button-loading-dots {
|
|
81
|
+
width: 1.25rem;
|
|
82
|
+
display: inline-block;
|
|
83
|
+
text-align: left;
|
|
84
|
+
font-size: 0.9rem;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.action-button-large .action-button-loading-dots {
|
|
88
|
+
width: 1.35rem;
|
|
89
|
+
font-size: 1rem;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.action-button-warning {
|
|
93
|
+
background: var(--red-tag-dark, #e15151);
|
|
94
|
+
color: var(--pure-white, #fff);
|
|
95
|
+
border: none;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.action-button-warning:hover {
|
|
99
|
+
background: #c14040;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
@keyframes pulse-background {
|
|
103
|
+
0% {
|
|
104
|
+
background-color: #171e25;
|
|
105
|
+
}
|
|
106
|
+
50% {
|
|
107
|
+
background-color: #171e25;
|
|
108
|
+
}
|
|
109
|
+
100% {
|
|
110
|
+
background-color: #1985e8;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
export const ActionsData: {};
|
|
2
|
+
declare namespace _default {
|
|
3
|
+
export let title: string;
|
|
4
|
+
export { ActionButton as component };
|
|
5
|
+
export let tags: string[];
|
|
6
|
+
export let excludeStories: RegExp;
|
|
7
|
+
export let args: {};
|
|
8
|
+
export namespace argTypes {
|
|
9
|
+
export namespace startIcon {
|
|
10
|
+
namespace control {
|
|
11
|
+
let type: string;
|
|
12
|
+
}
|
|
13
|
+
namespace mapping {
|
|
14
|
+
let _true: string;
|
|
15
|
+
export { _true as true };
|
|
16
|
+
let _false: null;
|
|
17
|
+
export { _false as false };
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
export namespace endIcon {
|
|
21
|
+
export namespace control_1 {
|
|
22
|
+
let type_1: string;
|
|
23
|
+
export { type_1 as type };
|
|
24
|
+
}
|
|
25
|
+
export { control_1 as control };
|
|
26
|
+
export namespace mapping_1 {
|
|
27
|
+
let _true_1: string;
|
|
28
|
+
export { _true_1 as true };
|
|
29
|
+
let _false_1: null;
|
|
30
|
+
export { _false_1 as false };
|
|
31
|
+
}
|
|
32
|
+
export { mapping_1 as mapping };
|
|
33
|
+
}
|
|
34
|
+
export namespace startIconName {
|
|
35
|
+
export namespace control_2 {
|
|
36
|
+
let type_2: string;
|
|
37
|
+
export { type_2 as type };
|
|
38
|
+
}
|
|
39
|
+
export { control_2 as control };
|
|
40
|
+
}
|
|
41
|
+
export namespace endIconName {
|
|
42
|
+
export namespace control_3 {
|
|
43
|
+
let type_3: string;
|
|
44
|
+
export { type_3 as type };
|
|
45
|
+
}
|
|
46
|
+
export { control_3 as control };
|
|
47
|
+
}
|
|
48
|
+
export namespace type_4 {
|
|
49
|
+
export namespace control_4 {
|
|
50
|
+
let type_5: string;
|
|
51
|
+
export { type_5 as type };
|
|
52
|
+
export let options: string[];
|
|
53
|
+
}
|
|
54
|
+
export { control_4 as control };
|
|
55
|
+
}
|
|
56
|
+
export { type_4 as type };
|
|
57
|
+
export namespace isLoading {
|
|
58
|
+
export namespace control_5 {
|
|
59
|
+
let type_6: string;
|
|
60
|
+
export { type_6 as type };
|
|
61
|
+
}
|
|
62
|
+
export { control_5 as control };
|
|
63
|
+
}
|
|
64
|
+
export namespace variant {
|
|
65
|
+
export namespace control_6 {
|
|
66
|
+
let type_7: string;
|
|
67
|
+
export { type_7 as type };
|
|
68
|
+
let options_1: string[];
|
|
69
|
+
export { options_1 as options };
|
|
70
|
+
}
|
|
71
|
+
export { control_6 as control };
|
|
72
|
+
}
|
|
73
|
+
export namespace size {
|
|
74
|
+
export namespace control_7 {
|
|
75
|
+
let type_8: string;
|
|
76
|
+
export { type_8 as type };
|
|
77
|
+
let options_2: string[];
|
|
78
|
+
export { options_2 as options };
|
|
79
|
+
}
|
|
80
|
+
export { control_7 as control };
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
export namespace parameters {
|
|
84
|
+
namespace backgrounds {
|
|
85
|
+
let _default: string;
|
|
86
|
+
export { _default as default };
|
|
87
|
+
export let values: {
|
|
88
|
+
name: string;
|
|
89
|
+
value: string;
|
|
90
|
+
}[];
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
export default _default;
|
|
95
|
+
export const Default: any;
|
|
96
|
+
export const WithStartIcon: any;
|
|
97
|
+
export const WithEndIcon: any;
|
|
98
|
+
export const WithStartAndEndIcons: any;
|
|
99
|
+
export const Disabled: any;
|
|
100
|
+
export const Loading: any;
|
|
101
|
+
export const SubmitButton: any;
|
|
102
|
+
export const ResetButton: any;
|
|
103
|
+
export const AsyncButton: any;
|
|
104
|
+
export const WarningButton: any;
|
|
105
|
+
export const LargeButton: any;
|
|
106
|
+
export const LargeButtonWithIcons: any;
|
|
107
|
+
export const LargeWarningButton: any;
|
|
108
|
+
import ActionButton from "./ActionButton";
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
13
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
14
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
15
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
16
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
17
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
18
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
22
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
|
|
23
|
+
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
24
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
25
|
+
function step(op) {
|
|
26
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
27
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
28
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
29
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
30
|
+
switch (op[0]) {
|
|
31
|
+
case 0: case 1: t = op; break;
|
|
32
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
33
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
34
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
35
|
+
default:
|
|
36
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
37
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
38
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
39
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
40
|
+
if (t[2]) _.ops.pop();
|
|
41
|
+
_.trys.pop(); continue;
|
|
42
|
+
}
|
|
43
|
+
op = body.call(thisArg, _);
|
|
44
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
45
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
import React from "react";
|
|
49
|
+
import ActionButton from "./ActionButton";
|
|
50
|
+
import "../../../styles/global.css";
|
|
51
|
+
export var ActionsData = {};
|
|
52
|
+
export default {
|
|
53
|
+
title: "Components/Atoms/Buttons/ActionButton",
|
|
54
|
+
component: ActionButton,
|
|
55
|
+
tags: ["autodocs"],
|
|
56
|
+
excludeStories: /.*Data$/,
|
|
57
|
+
args: __assign({}, ActionsData),
|
|
58
|
+
argTypes: {
|
|
59
|
+
startIcon: {
|
|
60
|
+
control: {
|
|
61
|
+
type: "boolean",
|
|
62
|
+
},
|
|
63
|
+
mapping: {
|
|
64
|
+
true: "allaw-icon-arrow-right",
|
|
65
|
+
false: null,
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
endIcon: {
|
|
69
|
+
control: {
|
|
70
|
+
type: "boolean",
|
|
71
|
+
},
|
|
72
|
+
mapping: {
|
|
73
|
+
true: "allaw-icon-arrow-right",
|
|
74
|
+
false: null,
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
startIconName: {
|
|
78
|
+
control: {
|
|
79
|
+
type: "text",
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
endIconName: {
|
|
83
|
+
control: {
|
|
84
|
+
type: "text",
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
type: {
|
|
88
|
+
control: {
|
|
89
|
+
type: "select",
|
|
90
|
+
options: ["button", "submit", "reset"],
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
isLoading: {
|
|
94
|
+
control: {
|
|
95
|
+
type: "boolean",
|
|
96
|
+
},
|
|
97
|
+
},
|
|
98
|
+
variant: {
|
|
99
|
+
control: {
|
|
100
|
+
type: "select",
|
|
101
|
+
options: ["default", "warning"],
|
|
102
|
+
},
|
|
103
|
+
},
|
|
104
|
+
size: {
|
|
105
|
+
control: {
|
|
106
|
+
type: "select",
|
|
107
|
+
options: ["medium", "large"],
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
},
|
|
111
|
+
parameters: {
|
|
112
|
+
backgrounds: {
|
|
113
|
+
default: "light",
|
|
114
|
+
values: [
|
|
115
|
+
{ name: "light", value: "#ffffff" },
|
|
116
|
+
{ name: "grey", value: "#728ea7" },
|
|
117
|
+
{ name: "figma", value: "#404040" },
|
|
118
|
+
{ name: "dark", value: "#171e25" },
|
|
119
|
+
],
|
|
120
|
+
},
|
|
121
|
+
},
|
|
122
|
+
};
|
|
123
|
+
var Template = function (args) { return React.createElement(ActionButton, __assign({}, args)); };
|
|
124
|
+
export var Default = Template.bind({});
|
|
125
|
+
Default.args = {
|
|
126
|
+
label: "Bouton",
|
|
127
|
+
startIcon: false,
|
|
128
|
+
endIcon: false,
|
|
129
|
+
startIconName: "allaw-icon-arrow-right",
|
|
130
|
+
endIconName: "allaw-icon-arrow-right",
|
|
131
|
+
disabled: false,
|
|
132
|
+
type: "button",
|
|
133
|
+
isLoading: false,
|
|
134
|
+
size: "medium",
|
|
135
|
+
};
|
|
136
|
+
export var WithStartIcon = Template.bind({});
|
|
137
|
+
WithStartIcon.args = __assign(__assign({}, Default.args), { startIcon: true });
|
|
138
|
+
export var WithEndIcon = Template.bind({});
|
|
139
|
+
WithEndIcon.args = __assign(__assign({}, Default.args), { endIcon: true });
|
|
140
|
+
export var WithStartAndEndIcons = Template.bind({});
|
|
141
|
+
WithStartAndEndIcons.args = __assign(__assign({}, Default.args), { startIcon: true, endIcon: true });
|
|
142
|
+
export var Disabled = Template.bind({});
|
|
143
|
+
Disabled.args = __assign(__assign({}, Default.args), { disabled: true });
|
|
144
|
+
export var Loading = Template.bind({});
|
|
145
|
+
Loading.args = __assign(__assign({}, Default.args), { isLoading: true });
|
|
146
|
+
export var SubmitButton = Template.bind({});
|
|
147
|
+
SubmitButton.args = __assign(__assign({}, Default.args), { type: "submit", label: "Submit" });
|
|
148
|
+
export var ResetButton = Template.bind({});
|
|
149
|
+
ResetButton.args = __assign(__assign({}, Default.args), { type: "reset", label: "Reset" });
|
|
150
|
+
export var AsyncButton = Template.bind({});
|
|
151
|
+
AsyncButton.args = __assign(__assign({}, Default.args), { label: "Async Action", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
152
|
+
return __generator(this, function (_a) {
|
|
153
|
+
switch (_a.label) {
|
|
154
|
+
case 0: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 2000); })];
|
|
155
|
+
case 1:
|
|
156
|
+
_a.sent();
|
|
157
|
+
return [2 /*return*/];
|
|
158
|
+
}
|
|
159
|
+
});
|
|
160
|
+
}); } });
|
|
161
|
+
export var WarningButton = Template.bind({});
|
|
162
|
+
WarningButton.args = __assign(__assign({}, Default.args), { label: "Warning", variant: "warning" });
|
|
163
|
+
export var LargeButton = Template.bind({});
|
|
164
|
+
LargeButton.args = __assign(__assign({}, Default.args), { label: "Grand Bouton", size: "large" });
|
|
165
|
+
export var LargeButtonWithIcons = Template.bind({});
|
|
166
|
+
LargeButtonWithIcons.args = __assign(__assign({}, Default.args), { label: "Grand Bouton avec Icônes", startIcon: true, endIcon: true, size: "large" });
|
|
167
|
+
export var LargeWarningButton = Template.bind({});
|
|
168
|
+
LargeWarningButton.args = __assign(__assign({}, Default.args), { label: "Grand Bouton d'Alerte", variant: "warning", size: "large" });
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
|
|
113
113
|
@media (max-width: 800px) {
|
|
114
114
|
.stepper-container {
|
|
115
|
-
height:
|
|
115
|
+
height: 96dvh;
|
|
116
116
|
position: fixed;
|
|
117
117
|
bottom: 0;
|
|
118
118
|
justify-content: flex-start;
|
|
@@ -125,6 +125,7 @@
|
|
|
125
125
|
.stepper-overlay {
|
|
126
126
|
padding-top: 0 !important;
|
|
127
127
|
padding-bottom: 0 !important;
|
|
128
|
+
z-index: 4000;
|
|
128
129
|
}
|
|
129
130
|
}
|
|
130
131
|
|
|
@@ -199,3 +200,19 @@
|
|
|
199
200
|
transform: scale(1);
|
|
200
201
|
}
|
|
201
202
|
}
|
|
203
|
+
|
|
204
|
+
.stepper-button-container.auto-width {
|
|
205
|
+
width: auto;
|
|
206
|
+
margin: 0 auto;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.stepper-button-container.auto-width button {
|
|
210
|
+
width: auto;
|
|
211
|
+
min-width: 150px;
|
|
212
|
+
padding-left: 24px;
|
|
213
|
+
padding-right: 24px;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.stepper-buttons .primary-button-container.auto-width:only-child {
|
|
217
|
+
width: auto;
|
|
218
|
+
}
|
|
@@ -16,6 +16,7 @@ export interface StepperProps {
|
|
|
16
16
|
startIconName?: string;
|
|
17
17
|
endIconName?: string;
|
|
18
18
|
onSecondaryButtonClick?: (step: number) => void;
|
|
19
|
+
fullWidth?: boolean;
|
|
19
20
|
}[];
|
|
20
21
|
primaryButton?: {
|
|
21
22
|
show: boolean;
|
|
@@ -26,6 +27,7 @@ export interface StepperProps {
|
|
|
26
27
|
endIconName?: string;
|
|
27
28
|
onPrimaryButtonClick?: (step: number) => void;
|
|
28
29
|
disabled?: boolean;
|
|
30
|
+
fullWidth?: boolean;
|
|
29
31
|
}[];
|
|
30
32
|
showProgressBar?: boolean[];
|
|
31
33
|
onClose?: () => void;
|
|
@@ -131,10 +131,10 @@ var Stepper = function (_a) {
|
|
|
131
131
|
React.createElement("div", { className: "stepper-buttons ".concat(!(currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && !(currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show)
|
|
132
132
|
? "no-buttons"
|
|
133
133
|
: "") },
|
|
134
|
-
(currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && (React.createElement("div", { className: "stepper-button-container secondary-button-container" },
|
|
135
|
-
React.createElement(SecondaryButton, { fullWidth:
|
|
136
|
-
(currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show) && (React.createElement("div", { className: "stepper-button-container primary-button-container" },
|
|
137
|
-
React.createElement(PrimaryButton, { fullWidth:
|
|
134
|
+
(currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && (React.createElement("div", { className: "stepper-button-container secondary-button-container ".concat(currentSecondaryButton.fullWidth === false ? "auto-width" : "") },
|
|
135
|
+
React.createElement(SecondaryButton, { fullWidth: currentSecondaryButton.fullWidth !== false, label: currentSecondaryButton.label, startIcon: currentSecondaryButton.startIconName ? true : undefined, endIcon: currentSecondaryButton.endIconName ? true : undefined, startIconName: currentSecondaryButton.startIconName, endIconName: currentSecondaryButton.endIconName, onClick: function () { var _a; return (_a = currentSecondaryButton.onSecondaryButtonClick) === null || _a === void 0 ? void 0 : _a.call(currentSecondaryButton, currentStep); } }))),
|
|
136
|
+
(currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show) && (React.createElement("div", { className: "stepper-button-container primary-button-container ".concat(currentPrimaryButton.fullWidth === false ? "auto-width" : "") },
|
|
137
|
+
React.createElement(PrimaryButton, { fullWidth: currentPrimaryButton.fullWidth !== false, label: currentPrimaryButton.label, startIcon: currentPrimaryButton.startIconName ? true : undefined, endIcon: currentPrimaryButton.endIconName ? true : undefined, startIconName: currentPrimaryButton.startIconName, endIconName: currentPrimaryButton.endIconName, disabled: currentPrimaryButton.disabled, onClick: handleNext })))),
|
|
138
138
|
React.createElement(ConfirmationModal, { show: (_b = confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.show) !== null && _b !== void 0 ? _b : false, title: (_c = confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.title) !== null && _c !== void 0 ? _c : "Confirmation", description: (_d = confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.description) !== null && _d !== void 0 ? _d : "Voulez-vous continuer ?", confirmLabel: (_e = confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.confirmLabel) !== null && _e !== void 0 ? _e : "Confirmer", cancelLabel: (_f = confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.cancelLabel) !== null && _f !== void 0 ? _f : "Annuler", onConfirm: onModalConfirm !== null && onModalConfirm !== void 0 ? onModalConfirm : (function () { }), onCancel: onModalCancel !== null && onModalCancel !== void 0 ? onModalCancel : (function () { }), isDanger: confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.isDanger }))));
|
|
139
139
|
return portalContainerRef.current && isVisible
|
|
140
140
|
? ReactDOM.createPortal(stepperContent, portalContainerRef.current)
|