allaw-ui 2.5.8 → 2.6.0

package/dist/components/atoms/buttons/PrimaryButton.css

@@ -13,6 +13,13 @@
   text-wrap: nowrap;
 }
 
+.primary-button-large {
+  height: 46px;
+  padding: 1.1rem 1.4rem;
+  border-radius: 26px;
+  gap: 0.6rem;
+}
+
 .primary-button-enabled {
   background-color: #171e25;
   color: white;
@@ -43,6 +50,11 @@
   color: white;
 }
 
+.primary-button-large .primary-button-icon {
+  width: 22px;
+  height: 22px;
+}
+
 .primary-button-label {
   font-family: "Open Sans", sans-serif;
   font-weight: 500;
@@ -51,6 +63,11 @@
   letter-spacing: 0em;
 }
 
+.primary-button-large .primary-button-label {
+  font-size: 15px;
+  line-height: 23px;
+}
+
 .primary-button-full-width {
   width: 100%;
 }
@@ -67,6 +84,11 @@
   font-size: 0.9rem;
 }
 
+.primary-button-large .primary-button-loading-dots {
+  width: 1.35rem;
+  font-size: 1rem;
+}
+
 .primary-button-warning {
   background: var(--red-tag-dark, #e15151);
   color: var(--pure-white, #fff);

package/dist/components/atoms/buttons/PrimaryButton.d.ts

@@ -13,6 +13,7 @@ export interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonEleme
     type?: "button" | "submit" | "reset";
     isLoading?: boolean;
     variant?: "default" | "warning";
+    size?: "medium" | "large";
 }
 declare const PrimaryButton: React.ForwardRefExoticComponent<PrimaryButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default PrimaryButton;

package/dist/components/atoms/buttons/PrimaryButton.js

@@ -61,10 +61,10 @@ import React, { forwardRef, useImperativeHandle, useState, useEffect, } from "re
 import "./PrimaryButton.css";
 import "../../../styles/global.css";
 var PrimaryButton = forwardRef(function (_a, ref) {
-    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, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "onClick", "fullWidth", "type", "isLoading", "variant"]);
+    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"]);
     var buttonRef = React.useRef(null);
-    var _f = useState(false), internalIsLoading = _f[0], setInternalIsLoading = _f[1];
-    var _g = useState(""), loadingDots = _g[0], setLoadingDots = _g[1];
+    var _g = useState(false), internalIsLoading = _g[0], setInternalIsLoading = _g[1];
+    var _h = useState(""), loadingDots = _h[0], setLoadingDots = _h[1];
     useImperativeHandle(ref, function () { return buttonRef.current; });
     var isButtonLoading = isLoading || internalIsLoading;
     useEffect(function () {
@@ -108,7 +108,7 @@ var PrimaryButton = forwardRef(function (_a, ref) {
             }
         });
     }); };
-    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" : ""), disabled: disabled, onClick: handleClick, type: type }, props),
+    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),
         startIcon && (React.createElement("span", { className: "primary-button-icon ".concat(startIconName) })),
         React.createElement("span", { className: "primary-button-label" }, label),
         isButtonLoading ? (React.createElement("span", { className: "primary-button-loading-dots" }, loadingDots)) : (endIcon && React.createElement("span", { className: "primary-button-icon ".concat(endIconName) }))));

package/dist/components/atoms/buttons/PrimaryButton.stories.d.ts

@@ -70,6 +70,15 @@ declare namespace _default {
             }
             export { control_6 as control };
         }
+        export namespace size {
+            export namespace control_7 {
+                let type_8: string;
+                export { type_8 as type };
+                let options_2: string[];
+                export { options_2 as options };
+            }
+            export { control_7 as control };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -93,4 +102,7 @@ export const SubmitButton: any;
 export const ResetButton: any;
 export const AsyncButton: any;
 export const WarningButton: any;
+export const LargeButton: any;
+export const LargeButtonWithIcons: any;
+export const LargeWarningButton: any;
 import PrimaryButton from "./PrimaryButton";

package/dist/components/atoms/buttons/PrimaryButton.stories.js

@@ -101,6 +101,12 @@ export default {
                 options: ["default", "warning"],
             },
         },
+        size: {
+            control: {
+                type: "select",
+                options: ["medium", "large"],
+            },
+        },
     },
     parameters: {
         backgrounds: {
@@ -125,6 +131,7 @@ Default.args = {
     disabled: false,
     type: "button",
     isLoading: false,
+    size: "medium",
 };
 export var WithStartIcon = Template.bind({});
 WithStartIcon.args = __assign(__assign({}, Default.args), { startIcon: true });
@@ -153,3 +160,9 @@ AsyncButton.args = __assign(__assign({}, Default.args), { label: "Async Action",
     }); } });
 export var WarningButton = Template.bind({});
 WarningButton.args = __assign(__assign({}, Default.args), { label: "Warning", variant: "warning" });
+export var LargeButton = Template.bind({});
+LargeButton.args = __assign(__assign({}, Default.args), { label: "Grand Bouton", size: "large" });
+export var LargeButtonWithIcons = Template.bind({});
+LargeButtonWithIcons.args = __assign(__assign({}, Default.args), { label: "Grand Bouton avec Icônes", startIcon: true, endIcon: true, size: "large" });
+export var LargeWarningButton = Template.bind({});
+LargeWarningButton.args = __assign(__assign({}, Default.args), { label: "Grand Bouton d'Alerte", variant: "warning", size: "large" });

package/dist/components/atoms/buttons/SecondaryButton.css

@@ -11,10 +11,14 @@
   border-radius: 24px;
   border: 2px solid var(--noir);
   cursor: pointer;
-  transition:
-    background-color 0.2s,
-    opacity 0.2s,
-    color 0.2s;
+  transition: background-color 0.2s, opacity 0.2s, color 0.2s;
+}
+
+.secondary-button-large {
+  height: 46px;
+  padding: 1.1rem 1.4rem;
+  border-radius: 26px;
+  gap: 0.6rem;
 }
 
 .secondary-button-enabled {
@@ -53,6 +57,11 @@
   transition: color 0.2s;
 }
 
+.secondary-button-large .secondary-button-icon {
+  width: 22px;
+  height: 22px;
+}
+
 .secondary-button-enabled:hover .secondary-button-icon {
   color: var(--bleu-allaw);
 }
@@ -65,6 +74,11 @@
   letter-spacing: 0em;
 }
 
+.secondary-button-large .secondary-button-label {
+  font-size: 15px;
+  line-height: 23px;
+}
+
 /* Styles pour le mode dark */
 .secondary-button-dark {
   color: var(--noir);

package/dist/components/atoms/buttons/SecondaryButton.d.ts

@@ -14,6 +14,7 @@ export interface SecondaryButtonProps extends ButtonHTMLAttributes<HTMLButtonEle
     fullWidth?: boolean;
     type?: "button" | "submit" | "reset";
     isLoading?: boolean;
+    size?: "medium" | "large";
 }
 declare const SecondaryButton: React.ForwardRefExoticComponent<SecondaryButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default SecondaryButton;

package/dist/components/atoms/buttons/SecondaryButton.js

@@ -61,10 +61,10 @@ import React, { forwardRef, useImperativeHandle, useState, useEffect, } from "re
 import "./SecondaryButton.css";
 import "../../../styles/global.css";
 var SecondaryButton = forwardRef(function (_a, ref) {
-    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, _c = _a.mode, mode = _c === void 0 ? "dark" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d, onClick = _a.onClick, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? "button" : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "mode", "color", "onClick", "fullWidth", "type", "isLoading"]);
+    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, _c = _a.mode, mode = _c === void 0 ? "dark" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d, onClick = _a.onClick, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? "button" : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, _h = _a.size, size = _h === void 0 ? "medium" : _h, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "mode", "color", "onClick", "fullWidth", "type", "isLoading", "size"]);
     var buttonRef = React.useRef(null);
-    var _h = useState(false), internalIsLoading = _h[0], setInternalIsLoading = _h[1];
-    var _j = useState(""), loadingDots = _j[0], setLoadingDots = _j[1];
+    var _j = useState(false), internalIsLoading = _j[0], setInternalIsLoading = _j[1];
+    var _k = useState(""), loadingDots = _k[0], setLoadingDots = _k[1];
     useImperativeHandle(ref, function () { return buttonRef.current; });
     var isButtonLoading = isLoading || internalIsLoading;
     useEffect(function () {
@@ -108,7 +108,7 @@ var SecondaryButton = forwardRef(function (_a, ref) {
             }
         });
     }); };
-    return (React.createElement("button", __assign({ ref: buttonRef, className: "secondary-button ".concat(disabled ? "secondary-button-disabled" : "secondary-button-enabled", " secondary-button-").concat(mode, " ").concat(fullWidth ? "secondary-button-full-width" : "", " ").concat(isButtonLoading ? "secondary-button-loading" : "", " ").concat(color ? "secondary-button-color-".concat(color) : ""), disabled: disabled, onClick: handleClick, type: type }, props),
+    return (React.createElement("button", __assign({ ref: buttonRef, className: "secondary-button ".concat(disabled ? "secondary-button-disabled" : "secondary-button-enabled", " secondary-button-").concat(mode, " ").concat(fullWidth ? "secondary-button-full-width" : "", " ").concat(isButtonLoading ? "secondary-button-loading" : "", " ").concat(color ? "secondary-button-color-".concat(color) : "", " ").concat(size === "large" ? "secondary-button-large" : ""), disabled: disabled, onClick: handleClick, type: type }, props),
         startIcon && (React.createElement("span", { className: "secondary-button-icon ".concat(startIconName) })),
         React.createElement("span", { className: "secondary-button-label" }, label),
         isButtonLoading ? (React.createElement("span", { className: "secondary-button-loading-dots" }, loadingDots)) : (endIcon && React.createElement("span", { className: "secondary-button-icon ".concat(endIconName) }))));

package/dist/components/atoms/buttons/SecondaryButton.stories.d.ts

@@ -43,6 +43,15 @@ declare namespace _default {
             export let options: string[];
             export let defaultValue: string;
         }
+        namespace size {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_3 as control };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -69,4 +78,7 @@ export const AsyncClick: any;
 export const WithCustomColor: any;
 export const WithErrorColor: any;
 export const WithValidColor: any;
+export const LargeButton: any;
+export const LargeButtonWithIcons: any;
+export const LargeColoredButton: any;
 import SecondaryButton from "./SecondaryButton";

package/dist/components/atoms/buttons/SecondaryButton.stories.js

@@ -90,6 +90,12 @@ export default {
             ],
             defaultValue: "noir",
         },
+        size: {
+            control: {
+                type: "select",
+                options: ["medium", "large"],
+            },
+        },
     },
     parameters: {
         backgrounds: {
@@ -113,6 +119,7 @@ Default.args = {
     fullWidth: false,
     type: "button",
     isLoading: false,
+    size: "medium",
 };
 export var WithStartIcon = Template.bind({});
 WithStartIcon.args = __assign(__assign({}, Default.args), { startIcon: true, endIcon: false });
@@ -147,3 +154,9 @@ export var WithErrorColor = Template.bind({});
 WithErrorColor.args = __assign(__assign({}, Default.args), { color: "actions-error" });
 export var WithValidColor = Template.bind({});
 WithValidColor.args = __assign(__assign({}, Default.args), { color: "actions-valid" });
+export var LargeButton = Template.bind({});
+LargeButton.args = __assign(__assign({}, Default.args), { label: "Grand Bouton", size: "large" });
+export var LargeButtonWithIcons = Template.bind({});
+LargeButtonWithIcons.args = __assign(__assign({}, Default.args), { label: "Grand Bouton avec Icônes", startIcon: true, endIcon: true, size: "large" });
+export var LargeColoredButton = Template.bind({});
+LargeColoredButton.args = __assign(__assign({}, Default.args), { label: "Grand Bouton Coloré", color: "bleu-allaw", size: "large" });

package/dist/components/atoms/inputs/Input.d.ts

@@ -16,6 +16,8 @@ export interface InputProps {
     value?: string;
     error?: string;
     type?: string;
+    name?: string;
+    onKeyDown?: any;
     color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
     variant?: "bold" | "semiBold" | "medium";
 }

package/dist/components/atoms/inputs/Input.js

@@ -6,7 +6,7 @@ import { commonRegex } from "../../../utils/regex";
 import TinyInfo from "../typography/TinyInfo";
 import Paragraph from "../typography/Paragraph";
 var Input = forwardRef(function (_a, ref) {
-    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, rowChange = _a.rowChange, placeholder = _a.placeholder, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, _d = _a.type, type = _d === void 0 ? "text" : _d, propError = _a.error, _e = _a.color, color = _e === void 0 ? "noir" : _e, _f = _a.variant, variant = _f === void 0 ? "medium" : _f;
+    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, rowChange = _a.rowChange, placeholder = _a.placeholder, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, _d = _a.type, type = _d === void 0 ? "text" : _d, propError = _a.error, _e = _a.color, color = _e === void 0 ? "noir" : _e, _f = _a.variant, variant = _f === void 0 ? "medium" : _f, onKeyDown = _a.onKeyDown, name = _a.name;
     var _g = useState(false), isPasswordVisible = _g[0], setIsPasswordVisible = _g[1];
     var _h = useState(propValue || ""), value = _h[0], setValue = _h[1];
     var _j = useState(propError || ""), error = _j[0], setError = _j[1];
@@ -85,7 +85,7 @@ var Input = forwardRef(function (_a, ref) {
                     React.createElement("input", { ref: inputRef, type: style === "password" && !isPasswordVisible ? "password" : type, placeholder: placeholder, className: "Input-placeholder", value: value, onChange: function (e) {
                             handleChange(e);
                             rowChange && rowChange(e);
-                        }, onBlur: handleBlur })),
+                        }, name: name, onKeyDown: onKeyDown, onBlur: handleBlur })),
                 renderEndIcon()),
             error && isTouched && (React.createElement("div", { className: "error-message" },
                 React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "2.5.8",
+  "version": "2.6.0",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",