allaw-ui 3.7.7 → 3.7.9
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/assets/images/allaw-icon-file-csv.svg +26 -0
- package/dist/assets/images/allaw-icon-file-xlsx.svg +26 -0
- package/dist/components/atoms/buttons/PrimaryButton.css +14 -0
- package/dist/components/atoms/buttons/PrimaryButton.d.ts +1 -0
- package/dist/components/atoms/buttons/PrimaryButton.js +17 -4
- package/dist/components/atoms/buttons/PrimaryButton.stories.d.ts +24 -11
- package/dist/components/atoms/buttons/PrimaryButton.stories.js +19 -0
- package/package.json +1 -1
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 958.5 1051.85">
|
|
3
|
+
<defs>
|
|
4
|
+
<style>
|
|
5
|
+
.cls-1 {
|
|
6
|
+
fill: #1985e8;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.cls-2 {
|
|
10
|
+
fill: #fff;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.cls-3 {
|
|
14
|
+
fill: #105da7;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.cls-4 {
|
|
18
|
+
fill: #49a5f0;
|
|
19
|
+
}
|
|
20
|
+
</style>
|
|
21
|
+
</defs>
|
|
22
|
+
<path class="cls-4" d="M958.5,304.34v607.52c0,77.31-62.68,139.99-139.99,139.99H275.76c-77.31,0-139.99-62.68-139.99-139.99V140.6C135.77,63.28,198.44.61,275.76.61h377.8l304.94,303.73Z"/>
|
|
23
|
+
<rect class="cls-2" x="22.41" y="448.09" width="729.75" height="287.27"/>
|
|
24
|
+
<path class="cls-1" d="M654.16,0l304.34,304.34h-264.4c-22.06,0-39.94-17.88-39.94-39.94V0Z"/>
|
|
25
|
+
<path class="cls-3" d="M741.54,430.07H34.03c-18.79,0-34.03,15.24-34.03,34.03v255.77c0,18.79,15.24,34.03,34.03,34.03h707.51c18.79,0,34.03-15.24,34.03-34.03v-255.77c0-18.79-15.24-34.03-34.03-34.03ZM210.16,668.82c24.17,0,42.77-10.55,52.44-32.81,3.81-8.64,8.64-12.16,16.85-12.16,10.4,0,17.58,6.88,17.58,16.85,0,4.83-1.17,9.23-3.52,14.21-13.48,28.71-43.51,46-83.06,46-61.08,0-98.73-41.46-98.73-109.28s38.23-109.13,98-109.13c39.11,0,70.02,18.31,83.94,49.22,2.34,4.83,3.52,9.81,3.52,14.21,0,10.11-6.59,16.55-16.7,16.55-8.64,0-14.36-4.1-18.46-13.33-9.81-22.71-29-34.57-52-34.57-36.33,0-59.62,29.88-59.62,77.05s23.14,77.2,59.77,77.2ZM395.11,700.9c-42.19,0-70.31-17.58-78.52-41.6-1.32-3.52-2.05-7.32-2.05-10.84,0-10.55,6.74-17.29,16.7-17.29,8.35,0,13.62,3.37,17.72,11.87,6.59,18.31,24.76,26.51,47.31,26.51,25.49,0,43.36-12.6,43.36-30.18,0-15.23-10.55-24.61-38.09-30.32l-22.71-4.69c-42.33-8.64-62.11-28.56-62.11-59.47,0-37.21,32.67-62.4,78.52-62.4,37.35,0,66.36,16.7,75,44.68.88,2.34,1.32,5.13,1.32,8.64,0,9.23-6.59,15.53-16.41,15.53-8.79,0-14.21-3.81-18.16-12.01-7.18-17.87-22.27-25.49-42.04-25.49-23.44,0-40.14,11.13-40.14,28.86,0,14.36,10.55,23.58,36.91,29.15l22.71,4.69c44.53,9.23,63.28,27.1,63.28,58.45,0,40.43-31.79,65.92-82.62,65.92ZM666.92,510.76l-63.57,168.6c-5.27,14.5-13.33,20.51-27.39,20.51s-22.12-6.01-27.54-20.65l-63.13-167.72c-1.46-3.66-2.05-7.18-2.05-10.55,0-10.4,7.91-17.43,19.63-17.43,9.81,0,15.82,4.39,18.9,14.36l54.35,158.94h.88l54.2-159.23c3.22-9.96,8.64-14.06,18.46-14.06,11.43,0,19.34,7.03,19.34,16.99,0,3.37-.73,6.74-2.05,10.25Z"/>
|
|
26
|
+
</svg>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 958.5 1051.85">
|
|
3
|
+
<defs>
|
|
4
|
+
<style>
|
|
5
|
+
.cls-1 {
|
|
6
|
+
fill: #42bd86;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.cls-2 {
|
|
10
|
+
fill: #1e7d51;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.cls-3 {
|
|
14
|
+
fill: #29a36a;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.cls-4 {
|
|
18
|
+
fill: #fff;
|
|
19
|
+
}
|
|
20
|
+
</style>
|
|
21
|
+
</defs>
|
|
22
|
+
<path class="cls-1" d="M958.5,304.34v607.52c0,77.31-62.68,139.99-139.99,139.99H275.76c-77.31,0-139.99-62.68-139.99-139.99V140.6C135.77,63.28,198.44.61,275.76.61h377.8l304.94,303.73Z"/>
|
|
23
|
+
<rect class="cls-4" x="22.41" y="448.09" width="729.75" height="287.27"/>
|
|
24
|
+
<path class="cls-3" d="M654.16,0l304.34,304.34h-264.4c-22.06,0-39.94-17.88-39.94-39.94V0Z"/>
|
|
25
|
+
<path class="cls-2" d="M741.54,430.07H34.03c-18.79,0-34.03,15.24-34.03,34.03v255.77c0,18.79,15.24,34.03,34.03,34.03h707.51c18.79,0,34.03-15.24,34.03-34.03v-255.77c0-18.79-15.24-34.03-34.03-34.03ZM208.95,669.55c3.37,4.25,4.83,8.5,4.83,13.18,0,9.81-8.06,17.14-18.46,17.14-7.03,0-11.57-2.64-16.41-9.38l-50.24-70.75h-1.17l-49.95,70.61c-4.98,7.18-8.94,9.52-15.97,9.52-10.11,0-18.02-7.18-18.02-16.41,0-4.39,1.46-8.35,4.83-13.18l56.4-78.81v-1.03l-54.64-75.44c-3.96-5.13-5.13-9.23-5.13-13.92,0-10.11,8.2-17.58,19.19-17.58,7.18,0,11.87,2.93,16.99,10.55l48.93,71.34h1.17l50.24-72.51c4.69-6.74,8.35-9.38,15.53-9.38,9.96,0,18.31,7.03,18.31,16.11,0,4.54-1.32,8.5-4.69,13.04l-58.01,78.66v1.03l56.25,77.2ZM358.01,697.38h-99.9c-11.72,0-18.9-7.32-18.9-19.63v-174.61c0-12.45,7.18-19.63,18.9-19.63s18.9,7.18,18.9,19.63v162.3h81.01c10.25,0,17.29,6.15,17.29,15.97s-6.88,15.97-17.29,15.97ZM465.46,700.9c-42.19,0-70.31-17.58-78.52-41.6-1.32-3.52-2.05-7.32-2.05-10.84,0-10.55,6.74-17.29,16.7-17.29,8.35,0,13.62,3.37,17.72,11.87,6.59,18.31,24.76,26.51,47.31,26.51,25.49,0,43.36-12.6,43.36-30.18,0-15.23-10.55-24.61-38.09-30.32l-22.71-4.69c-42.33-8.64-62.11-28.56-62.11-59.47,0-37.21,32.67-62.4,78.52-62.4,37.35,0,66.36,16.7,75,44.68.88,2.34,1.32,5.13,1.32,8.64,0,9.23-6.59,15.53-16.41,15.53-8.79,0-14.21-3.81-18.16-12.01-7.18-17.87-22.27-25.49-42.04-25.49-23.44,0-40.14,11.13-40.14,28.86,0,14.36,10.55,23.58,36.91,29.15l22.71,4.69c44.53,9.23,63.28,27.1,63.28,58.45,0,40.43-31.79,65.92-82.62,65.92ZM725.41,669.55c3.37,4.25,4.83,8.5,4.83,13.18,0,9.81-8.06,17.14-18.46,17.14-7.03,0-11.57-2.64-16.41-9.38l-50.24-70.75h-1.17l-49.95,70.61c-4.98,7.18-8.94,9.52-15.97,9.52-10.11,0-18.02-7.18-18.02-16.41,0-4.39,1.46-8.35,4.83-13.18l56.4-78.81v-1.03l-54.64-75.44c-3.96-5.13-5.13-9.23-5.13-13.92,0-10.11,8.2-17.58,19.19-17.58,7.18,0,11.87,2.93,16.99,10.55l48.93,71.34h1.17l50.24-72.51c4.69-6.74,8.35-9.38,15.53-9.38,9.96,0,18.31,7.03,18.31,16.11,0,4.54-1.32,8.5-4.69,13.04l-58.01,78.66v1.03l56.25,77.2Z"/>
|
|
26
|
+
</svg>
|
|
@@ -50,11 +50,25 @@
|
|
|
50
50
|
color: white;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
+
.primary-button-additional-icon {
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
justify-content: center;
|
|
57
|
+
width: 20px;
|
|
58
|
+
height: 20px;
|
|
59
|
+
object-fit: contain;
|
|
60
|
+
}
|
|
61
|
+
|
|
53
62
|
.primary-button-large .primary-button-icon {
|
|
54
63
|
width: 22px;
|
|
55
64
|
height: 22px;
|
|
56
65
|
}
|
|
57
66
|
|
|
67
|
+
.primary-button-large .primary-button-additional-icon {
|
|
68
|
+
width: 22px;
|
|
69
|
+
height: 22px;
|
|
70
|
+
}
|
|
71
|
+
|
|
58
72
|
.primary-button-label {
|
|
59
73
|
font-family: "Open Sans", sans-serif;
|
|
60
74
|
font-weight: 500;
|
|
@@ -6,6 +6,7 @@ export interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonEleme
|
|
|
6
6
|
endIcon?: React.ReactNode;
|
|
7
7
|
startIconName?: string;
|
|
8
8
|
endIconName?: string;
|
|
9
|
+
additionalIcons?: string[];
|
|
9
10
|
label: string;
|
|
10
11
|
disabled?: boolean;
|
|
11
12
|
onClick?: () => Promise<void> | void;
|
|
@@ -58,15 +58,21 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
58
58
|
return t;
|
|
59
59
|
};
|
|
60
60
|
import React, { forwardRef, useImperativeHandle, useState, useEffect, } from "react";
|
|
61
|
+
import Image from "next/image";
|
|
61
62
|
import "./PrimaryButton.css";
|
|
62
63
|
import "../../../styles/global.css";
|
|
63
64
|
var PrimaryButton = forwardRef(function (_a, ref) {
|
|
64
|
-
var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label,
|
|
65
|
+
var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, _b = _a.additionalIcons, additionalIcons = _b === void 0 ? [] : _b, label = _a.label, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onClick = _a.onClick, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, _e = _a.type, type = _e === void 0 ? "button" : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, variant = _a.variant, _g = _a.size, size = _g === void 0 ? "medium" : _g, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "additionalIcons", "label", "disabled", "onClick", "fullWidth", "type", "isLoading", "variant", "size"]);
|
|
65
66
|
var buttonRef = React.useRef(null);
|
|
66
|
-
var
|
|
67
|
-
var
|
|
67
|
+
var _h = useState(false), internalIsLoading = _h[0], setInternalIsLoading = _h[1];
|
|
68
|
+
var _j = useState(""), loadingDots = _j[0], setLoadingDots = _j[1];
|
|
68
69
|
useImperativeHandle(ref, function () { return buttonRef.current; });
|
|
69
70
|
var isButtonLoading = isLoading || internalIsLoading;
|
|
71
|
+
// Determine where to place additional icons
|
|
72
|
+
var hasStartIcon = startIcon || (startIconName && startIconName.trim() !== "");
|
|
73
|
+
var hasEndIcon = endIcon || (endIconName && endIconName.trim() !== "");
|
|
74
|
+
// Place additional icons at start if there's a start icon, otherwise at start by default
|
|
75
|
+
var shouldPlaceAtStart = hasStartIcon || !hasEndIcon;
|
|
70
76
|
useEffect(function () {
|
|
71
77
|
var interval = null;
|
|
72
78
|
if (isButtonLoading) {
|
|
@@ -108,10 +114,17 @@ var PrimaryButton = forwardRef(function (_a, ref) {
|
|
|
108
114
|
}
|
|
109
115
|
});
|
|
110
116
|
}); };
|
|
117
|
+
var renderAdditionalIcons = function () {
|
|
118
|
+
if (!additionalIcons.length)
|
|
119
|
+
return null;
|
|
120
|
+
return additionalIcons.map(function (iconPath, index) { return (React.createElement(Image, { key: "additional-icon-".concat(index), src: iconPath, alt: "", width: size === "large" ? 22 : 20, height: size === "large" ? 22 : 20, className: "primary-button-additional-icon" })); });
|
|
121
|
+
};
|
|
111
122
|
return (React.createElement("button", __assign({ ref: buttonRef, className: "primary-button ".concat(disabled ? "primary-button-disabled" : "primary-button-enabled", " ").concat(fullWidth ? "primary-button-full-width" : "", " ").concat(isButtonLoading ? "primary-button-loading" : "").concat(variant === "warning" ? "primary-button-warning" : "", " ").concat(size === "large" ? "primary-button-large" : ""), disabled: disabled, onClick: handleClick, type: type }, props),
|
|
123
|
+
shouldPlaceAtStart && renderAdditionalIcons(),
|
|
112
124
|
startIcon && (React.createElement("span", { className: "primary-button-icon ".concat(startIconName) })),
|
|
113
125
|
React.createElement("span", { className: "primary-button-label" }, label),
|
|
114
|
-
isButtonLoading ? (React.createElement("span", { className: "primary-button-loading-dots" }, loadingDots)) : (endIcon && React.createElement("span", { className: "primary-button-icon ".concat(endIconName) }))
|
|
126
|
+
isButtonLoading ? (React.createElement("span", { className: "primary-button-loading-dots" }, loadingDots)) : (endIcon && React.createElement("span", { className: "primary-button-icon ".concat(endIconName) })),
|
|
127
|
+
!shouldPlaceAtStart && renderAdditionalIcons()));
|
|
115
128
|
});
|
|
116
129
|
PrimaryButton.displayName = "PrimaryButton";
|
|
117
130
|
export default PrimaryButton;
|
|
@@ -45,39 +45,47 @@ declare namespace _default {
|
|
|
45
45
|
}
|
|
46
46
|
export { control_3 as control };
|
|
47
47
|
}
|
|
48
|
-
export namespace
|
|
48
|
+
export namespace additionalIcons {
|
|
49
49
|
export namespace control_4 {
|
|
50
|
-
let
|
|
51
|
-
export {
|
|
52
|
-
export let options: string[];
|
|
50
|
+
let type_4: string;
|
|
51
|
+
export { type_4 as type };
|
|
53
52
|
}
|
|
54
53
|
export { control_4 as control };
|
|
54
|
+
export let description: string;
|
|
55
55
|
}
|
|
56
|
-
export
|
|
57
|
-
export namespace isLoading {
|
|
56
|
+
export namespace type_5 {
|
|
58
57
|
export namespace control_5 {
|
|
59
58
|
let type_6: string;
|
|
60
59
|
export { type_6 as type };
|
|
60
|
+
export let options: string[];
|
|
61
61
|
}
|
|
62
62
|
export { control_5 as control };
|
|
63
63
|
}
|
|
64
|
-
export
|
|
64
|
+
export { type_5 as type };
|
|
65
|
+
export namespace isLoading {
|
|
65
66
|
export namespace control_6 {
|
|
66
67
|
let type_7: string;
|
|
67
68
|
export { type_7 as type };
|
|
68
|
-
let options_1: string[];
|
|
69
|
-
export { options_1 as options };
|
|
70
69
|
}
|
|
71
70
|
export { control_6 as control };
|
|
72
71
|
}
|
|
73
|
-
export namespace
|
|
72
|
+
export namespace variant {
|
|
74
73
|
export namespace control_7 {
|
|
75
74
|
let type_8: string;
|
|
76
75
|
export { type_8 as type };
|
|
76
|
+
let options_1: string[];
|
|
77
|
+
export { options_1 as options };
|
|
78
|
+
}
|
|
79
|
+
export { control_7 as control };
|
|
80
|
+
}
|
|
81
|
+
export namespace size {
|
|
82
|
+
export namespace control_8 {
|
|
83
|
+
let type_9: string;
|
|
84
|
+
export { type_9 as type };
|
|
77
85
|
let options_2: string[];
|
|
78
86
|
export { options_2 as options };
|
|
79
87
|
}
|
|
80
|
-
export {
|
|
88
|
+
export { control_8 as control };
|
|
81
89
|
}
|
|
82
90
|
}
|
|
83
91
|
export namespace parameters {
|
|
@@ -105,4 +113,9 @@ export const WarningButton: any;
|
|
|
105
113
|
export const LargeButton: any;
|
|
106
114
|
export const LargeButtonWithIcons: any;
|
|
107
115
|
export const LargeWarningButton: any;
|
|
116
|
+
export const WithAdditionalIconsStart: any;
|
|
117
|
+
export const WithAdditionalIconsEnd: any;
|
|
118
|
+
export const WithAdditionalIconsBoth: any;
|
|
119
|
+
export const LargeWithAdditionalIcons: any;
|
|
120
|
+
export const OnlyAdditionalIcons: any;
|
|
108
121
|
import PrimaryButton from "./PrimaryButton";
|
|
@@ -48,6 +48,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
48
48
|
import React from "react";
|
|
49
49
|
import PrimaryButton from "./PrimaryButton";
|
|
50
50
|
import "../../../styles/global.css";
|
|
51
|
+
import csvIcon from "../../../assets/images/allaw-icon-file-csv.svg";
|
|
52
|
+
import xlsxIcon from "../../../assets/images/allaw-icon-file-xlsx.svg";
|
|
51
53
|
export var ActionsData = {};
|
|
52
54
|
export default {
|
|
53
55
|
title: "Components/Atoms/Buttons/PrimaryButton",
|
|
@@ -84,6 +86,12 @@ export default {
|
|
|
84
86
|
type: "text",
|
|
85
87
|
},
|
|
86
88
|
},
|
|
89
|
+
additionalIcons: {
|
|
90
|
+
control: {
|
|
91
|
+
type: "object",
|
|
92
|
+
},
|
|
93
|
+
description: "Array of image paths for additional icons",
|
|
94
|
+
},
|
|
87
95
|
type: {
|
|
88
96
|
control: {
|
|
89
97
|
type: "select",
|
|
@@ -128,6 +136,7 @@ Default.args = {
|
|
|
128
136
|
endIcon: false,
|
|
129
137
|
startIconName: "allaw-icon-arrow-right",
|
|
130
138
|
endIconName: "allaw-icon-arrow-right",
|
|
139
|
+
additionalIcons: [],
|
|
131
140
|
disabled: false,
|
|
132
141
|
type: "button",
|
|
133
142
|
isLoading: false,
|
|
@@ -166,3 +175,13 @@ export var LargeButtonWithIcons = Template.bind({});
|
|
|
166
175
|
LargeButtonWithIcons.args = __assign(__assign({}, Default.args), { label: "Grand Bouton avec Icônes", startIcon: true, endIcon: true, size: "large" });
|
|
167
176
|
export var LargeWarningButton = Template.bind({});
|
|
168
177
|
LargeWarningButton.args = __assign(__assign({}, Default.args), { label: "Grand Bouton d'Alerte", variant: "warning", size: "large" });
|
|
178
|
+
export var WithAdditionalIconsStart = Template.bind({});
|
|
179
|
+
WithAdditionalIconsStart.args = __assign(__assign({}, Default.args), { label: "Avec Icônes Supplémentaires", startIcon: true, additionalIcons: [csvIcon, xlsxIcon] });
|
|
180
|
+
export var WithAdditionalIconsEnd = Template.bind({});
|
|
181
|
+
WithAdditionalIconsEnd.args = __assign(__assign({}, Default.args), { label: "Icônes à la Fin", endIcon: true, additionalIcons: [csvIcon, xlsxIcon] });
|
|
182
|
+
export var WithAdditionalIconsBoth = Template.bind({});
|
|
183
|
+
WithAdditionalIconsBoth.args = __assign(__assign({}, Default.args), { label: "Icônes Début et Fin", startIcon: true, endIcon: true, additionalIcons: [csvIcon, xlsxIcon] });
|
|
184
|
+
export var LargeWithAdditionalIcons = Template.bind({});
|
|
185
|
+
LargeWithAdditionalIcons.args = __assign(__assign({}, Default.args), { label: "Grand Bouton avec Icônes", startIcon: true, size: "large", additionalIcons: [csvIcon, xlsxIcon] });
|
|
186
|
+
export var OnlyAdditionalIcons = Template.bind({});
|
|
187
|
+
OnlyAdditionalIcons.args = __assign(__assign({}, Default.args), { label: "Seulement Icônes Supplémentaires", startIcon: false, endIcon: false, additionalIcons: [csvIcon, xlsxIcon] });
|