allaw-ui 0.0.18 → 0.0.34

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

@@ -0,0 +1,63 @@
+@import "../../../styles/colors.css";
+
+.ghost-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition:
+    color 0.15s,
+    transform 0.03s;
+}
+
+.ghost-button:active {
+  transform: scale(0.98);
+}
+
+.ghost-button-default {
+  color: var(--Primary-Blanc, #fff);
+}
+
+.ghost-button-default:hover {
+  color: var(--Primary-Blanc, #fff);
+}
+
+.ghost-button-variant {
+  color: var(--actions-error, #e15151);
+}
+
+.ghost-button-variant:hover {
+  color: var(--actions-error, #e15151);
+}
+
+.ghost-button-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 3.333px;
+}
+
+.ghost-button-label {
+  font-family: "Open Sans", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: 0em;
+}
+
+/* Styles spécifiques pour variant=false */
+.ghost-button-default .ghost-button-label {
+  font-weight: 400;
+  color: var(--Primary-Blanc, #fff);
+}
+
+/* Styles spécifiques pour variant=true */
+.ghost-button-variant .ghost-button-label {
+  font-weight: 400;
+  color: var(--actions-error, #e15151);
+}

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

@@ -0,0 +1,14 @@
+import React from "react";
+import "./GhostButton.css";
+import "../../../styles/global.css";
+export interface GhostButtonProps {
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    label: string;
+    variant?: boolean;
+    startIconName?: string;
+    endIconName?: string;
+    onClick?: () => void;
+}
+declare const GhostButton: React.FC<GhostButtonProps>;
+export default GhostButton;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import "./GhostButton.css";
+import "../../../styles/global.css";
+var GhostButton = function (_a) {
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, label = _a.label, _b = _a.variant, variant = _b === void 0 ? false : _b, startIconName = _a.startIconName, endIconName = _a.endIconName, onClick = _a.onClick;
+    return (React.createElement("button", { className: "ghost-button ".concat(variant ? "ghost-button-variant" : "ghost-button-default"), onClick: onClick },
+        startIcon && React.createElement("span", { className: "ghost-button-icon ".concat(startIconName) }),
+        React.createElement("span", { className: "ghost-button-label" }, label),
+        endIcon && React.createElement("span", { className: "ghost-button-icon ".concat(endIconName) })));
+};
+export default GhostButton;

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

@@ -0,0 +1,111 @@
+@import "../../../styles/colors.css";
+
+/* Small, square, with background and icon */
+.icon-button.smallFilled {
+  display: flex;
+  flex-direction: row;
+  width: 24px;
+  height: 24px;
+  padding: 6px 6px 6px 6px;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 3px;
+  background: var(--secondary-light-grey, #f4f7fb);
+  cursor: pointer;
+}
+
+.icon-button.smallFilled:hover {
+  background: var(--grey-venom, #e6edf5);
+}
+
+.icon-button.smallFilled:active {
+  background: #d8e1eb;
+}
+
+.icon-button.smallFilled .icon {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  color: #456073;
+  font-size: 11px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Large, square, with background and icon */
+.icon-button.largeFilled {
+  display: flex;
+  flex-direction: row;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 4px;
+  background: var(--secondary-light-grey, #f4f7fb);
+  cursor: pointer;
+}
+
+.icon-button.largeFilled:hover {
+  background: var(--grey-venom, #e6edf5);
+}
+
+.icon-button.largeFilled:active {
+  background: #d8e1eb;
+}
+
+.icon-button.largeFilled .icon {
+  width: 19px;
+  height: 19px;
+  flex-shrink: 0;
+  color: #456073;
+  font-size: 18px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Medium, square, transparent background with outline */
+.icon-button.mediumOutline {
+  display: flex;
+  width: 35px;
+  height: 35px;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  border: 1px solid var(--primary-blue, #25beeb);
+  background: transparent;
+}
+
+.icon-button.mediumOutline .icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: var(--bleu-allaw, #25beeb);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+}
+
+/* Just the outline icons */
+.icon-button.iconOnly {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  color: #25beeb;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+  background: transparent;
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import "./IconButton.css";
+import "../../../styles/global.css";
+export interface IconButtonProps {
+    style: "smallFilled" | "largeFilled" | "mediumOutline" | "iconOnly";
+    iconName: string;
+    onClick?: () => void;
+}
+declare const IconButton: React.FC<IconButtonProps>;
+export default IconButton;

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

@@ -0,0 +1,14 @@
+import React from "react";
+import "./IconButton.css";
+import "../../../styles/global.css";
+var IconButton = function (_a) {
+    var style = _a.style, iconName = _a.iconName, onClick = _a.onClick;
+    return (React.createElement("button", { className: "icon-button ".concat(style), onClick: onClick },
+        React.createElement("i", { className: "icon ".concat(iconName) })));
+};
+IconButton.defaultProps = {
+    style: "smallFilled",
+    iconName: "allaw-icon-calendar",
+    onClick: function () { },
+};
+export default IconButton;

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

@@ -0,0 +1,117 @@
+@import "../../../styles/colors.css";
+
+.oauth-provider-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  cursor: pointer;
+  min-width: 210px;
+  border-radius: 10px;
+  padding: 6px;
+}
+
+.oauth-provider-button:hover {
+  opacity: 0.8;
+}
+
+.oauth-provider-button:active {
+  opacity: 1;
+}
+
+.oauth-provider-button.google {
+  width: 100%;
+  background: #ffffff;
+  box-shadow:
+    0px 2px 3px 0px #0000002b,
+    0px 0px 3px 0px #00000015;
+}
+
+.oauth-provider-button.google .label {
+  font-family: Roboto;
+  font-weight: 500;
+  text-align: left;
+  color: #0000008a;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.oauth-provider-button.apple {
+  background: #000000;
+  width: 100%;
+}
+
+.oauth-provider-button.linkedin {
+  background: #0a66c2;
+  width: 100%;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.oauth-provider-button.apple .label {
+  font-family: "SF Pro Display", sans-serif;
+  font-weight: 500;
+  text-align: left;
+  color: #ffffff;
+  letter-spacing: 0.005em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.oauth-provider-button.linkedin .label {
+  font-family: "Source Sans Pro", sans-serif;
+  font-weight: 500;
+  text-align: left;
+  color: #ffffff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.allaw-icon-google {
+  display: flex;
+}
+
+.allaw-icon-apple {
+  display: flex;
+  color: #ffffff;
+  padding-bottom: 2px;
+}
+
+.allaw-icon-linkedin {
+  display: flex;
+  color: #0a66c2;
+  padding-bottom: 0px;
+}
+
+.allaw-icon-google .path1:before {
+  content: "\e94a";
+  color: rgb(66, 133, 244);
+}
+.allaw-icon-google .path2:before {
+  content: "\e94b";
+  margin-left: -1em;
+  color: rgb(52, 168, 83);
+}
+.allaw-icon-google .path3:before {
+  content: "\e94c";
+  margin-left: -1em;
+  color: rgb(251, 188, 5);
+}
+.allaw-icon-google .path4:before {
+  content: "\e94d";
+  margin-left: -1em;
+  color: rgb(235, 67, 53);
+}
+
+.linkedin-icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background: #ffffff;
+}

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

@@ -0,0 +1,12 @@
+import React from "react";
+import "./OAuthProviderButton.css";
+import "../../../styles/global.css";
+export interface OAuthProviderButtonProps {
+    provider: "google" | "apple" | "linkedin";
+    type: "login" | "signup";
+    url: string;
+    size: 14 | 16 | 18 | 20 | 22 | 24;
+    onClick?: () => void;
+}
+declare const OAuthProviderButton: React.FC<OAuthProviderButtonProps>;
+export default OAuthProviderButton;

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

@@ -0,0 +1,143 @@
+import React, { useState, useEffect, useRef } from "react";
+import "./OAuthProviderButton.css";
+import "../../../styles/global.css";
+var OAuthProviderButton = function (_a) {
+    var provider = _a.provider, type = _a.type, url = _a.url, size = _a.size, onClick = _a.onClick;
+    var _b = useState(""), label = _b[0], setLabel = _b[1];
+    var buttonRef = useRef(null);
+    var getLabels = function () {
+        var labels = {
+            google: {
+                login: "Continuer avec Google",
+                signup: "S'inscrire avec Google",
+            },
+            apple: {
+                login: "Continuer avec Apple",
+                signup: "S'inscrire avec Apple",
+            },
+            linkedin: {
+                login: "Continuer avec LinkedIn",
+                signup: "S'inscrire avec LinkedIn",
+            },
+        };
+        var shortLabels = {
+            google: "Google",
+            apple: "Apple",
+            linkedin: "LinkedIn",
+        };
+        return { labels: labels, shortLabels: shortLabels };
+    };
+    var getThresholdWidth = function (size) {
+        switch (size) {
+            case 14:
+                return 210;
+            case 16:
+                return 220;
+            case 18:
+                return 230;
+            case 20:
+                return 240;
+            case 22:
+                return 260;
+            case 24:
+                return 290;
+            default:
+                return 250;
+        }
+    };
+    var updateLabel = function () {
+        var _a, _b;
+        var _c = getLabels(), labels = _c.labels, shortLabels = _c.shortLabels;
+        var maxWidth = (_b = (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
+        var thresholdWidth = getThresholdWidth(size);
+        var newLabel = maxWidth < thresholdWidth
+            ? shortLabels[provider]
+            : labels[provider][type];
+        setLabel(newLabel);
+    };
+    useEffect(function () {
+        var resizeObserver = new ResizeObserver(function () {
+            updateLabel();
+        });
+        if (buttonRef.current) {
+            resizeObserver.observe(buttonRef.current);
+        }
+        return function () {
+            if (buttonRef.current) {
+                resizeObserver.unobserve(buttonRef.current);
+            }
+        };
+    }, [provider, type, size]);
+    // Force an update after the first render to ensure the correct label is set
+    useEffect(function () {
+        if (buttonRef.current) {
+            updateLabel();
+        }
+    }, []);
+    var renderIcon = function () {
+        var iconSizes = {
+            google: size * 0.8,
+            apple: size * 1.2,
+            linkedin: size * 0.8,
+        };
+        var iconClasses = {
+            google: "allaw-icon-google",
+            apple: "allaw-icon-apple",
+            linkedin: "allaw-icon-linkedin",
+        };
+        var iconSize = iconSizes[provider];
+        var iconClass = iconClasses[provider];
+        if (provider === "google") {
+            return (React.createElement("span", { className: iconClass, style: { fontSize: "".concat(iconSize, "px") } },
+                React.createElement("span", { className: "path1" }),
+                React.createElement("span", { className: "path2" }),
+                React.createElement("span", { className: "path3" }),
+                React.createElement("span", { className: "path4" })));
+        }
+        else if (provider === "linkedin") {
+            var containerSize = size * 1.4;
+            return (React.createElement("div", { className: "linkedin-icon-container", style: {
+                    fontSize: "".concat(iconSize, "px"),
+                    width: "".concat(containerSize, "px"),
+                    height: "".concat(containerSize, "px"),
+                    minWidth: "".concat(containerSize, "px"),
+                    minHeight: "".concat(containerSize, "px"),
+                } },
+                React.createElement("i", { className: iconClass, style: { fontSize: "".concat(iconSize, "px") } })));
+        }
+        else {
+            return (React.createElement("i", { className: iconClass, style: { fontSize: "".concat(iconSize, "px") } }));
+        }
+    };
+    var handleClick = function () {
+        if (onClick) {
+            onClick();
+        }
+        else {
+            window.open(url, "_blank");
+        }
+    };
+    var getMaxWidth = function () {
+        switch (size) {
+            case 14:
+                return "200px";
+            case 16:
+                return "300px";
+            case 18:
+                return "320px";
+            case 20:
+                return "370px";
+            case 22:
+                return "380px";
+            case 24:
+                return "400px";
+            default:
+                return "400px";
+        }
+    };
+    var maxWidth = getMaxWidth();
+    return (React.createElement("button", { ref: buttonRef, className: "oauth-provider-button ".concat(provider), onClick: handleClick, style: { height: "".concat(size * 2.55, "px"), maxWidth: maxWidth } },
+        renderIcon(),
+        React.createElement("span", { className: "label", style: { fontSize: "".concat(size, "px") } }, label)));
+};
+export default OAuthProviderButton;

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

@@ -0,0 +1,53 @@
+.pending-documents {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 8px;
+  justify-content: center;
+  color: inherit;
+  transition: transform 0.03s;
+}
+
+.pending-documents-pending {
+  background: var(--tag-red-light, #fdf2f2);
+  color: var(--Tags-Rouge, #e15151);
+  cursor: pointer;
+}
+
+.pending-documents-pending:active {
+  transform: scale(0.98);
+}
+
+.pending-documents-none {
+  background: var(--tag-blue-light, #daebfb);
+  color: var(--Tags-Bleu-fonc, var(--tag-blue, #1985e8));
+}
+
+.pending-documents-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: inherit;
+  font-size: 24px;
+}
+
+.pending-documents-label {
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 0em;
+  color: inherit;
+}
+
+.pending-documents-pending .pending-documents-label {
+  color: var(--Tags-Rouge, #e15151);
+}
+
+.pending-documents-none .pending-documents-label {
+  color: var(--Tags-Bleu-fonc, var(--tag-blue, #1985e8));
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import "./PendingDocuments.css";
+import "../../../styles/global.css";
+export interface PendingDocumentsProps {
+    icon?: React.ReactNode;
+    pendingCount: number;
+    onClick?: () => void;
+}
+declare const PendingDocuments: React.FC<PendingDocumentsProps>;
+export default PendingDocuments;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import "./PendingDocuments.css";
+import "../../../styles/global.css";
+var PendingDocuments = function (_a) {
+    var icon = _a.icon, pendingCount = _a.pendingCount, onClick = _a.onClick;
+    var isPending = pendingCount > 0;
+    return (React.createElement("div", { className: "pending-documents ".concat(isPending ? "pending-documents-pending" : "pending-documents-none"), onClick: isPending ? onClick : undefined },
+        icon && React.createElement("span", { className: "pending-documents-icon" }, icon),
+        React.createElement("span", { className: "pending-documents-label" }, isPending
+            ? "".concat(pendingCount, " demandes en attente")
+            : "Aucune demande en attente")));
+};
+export default PendingDocuments;

package/dist/components/{buttons/ButtonPrimary.css → atoms/buttons/PrimaryButton.css}

@@ -1,4 +1,4 @@
-.button-primary {
+.primary-button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11,30 +11,31 @@
     background-color 0.2s,
     opacity 0.2s;
   border: 0px;
+  cursor: pointer;
 }
 
-.button-primary-enabled {
+.primary-button-enabled {
   background-color: #171e25;
   color: white;
 }
 
-.button-primary-enabled:hover {
+.primary-button-enabled:hover {
   background-color: #1985e8;
 }
 
-.button-primary-enabled:active {
+.primary-button-enabled:active {
   background-color: #1985e8;
   opacity: 0.7;
 }
 
-.button-primary-disabled {
+.primary-button-disabled {
   background-color: #b9b9b9;
   opacity: 0.5;
   color: #9b9b9b;
   cursor: not-allowed;
 }
 
-.button-primary-icon {
+.primary-button-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -43,10 +44,14 @@
   color: white;
 }
 
-.button-primary-label {
+.primary-button-label {
   font-family: "Open Sans", sans-serif;
   font-weight: 500;
   font-size: 14px;
   line-height: 22px;
   letter-spacing: 0em;
 }
+
+.primary-button-full-width {
+  width: 100%;
+}

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

@@ -0,0 +1,16 @@
+import React, { ButtonHTMLAttributes } from "react";
+import "./PrimaryButton.css";
+import "../../../styles/global.css";
+export interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    startIconName?: string;
+    endIconName?: string;
+    label: string;
+    disabled?: boolean;
+    onClick?: () => void;
+    fullWidth?: boolean;
+    type?: "button" | "submit" | "reset";
+}
+declare const PrimaryButton: React.FC<PrimaryButtonProps>;
+export default PrimaryButton;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import "./PrimaryButton.css";
+import "../../../styles/global.css";
+var PrimaryButton = function (_a) {
+    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;
+    return (React.createElement("button", { className: "primary-button ".concat(disabled ? "primary-button-disabled" : "primary-button-enabled", " ").concat(fullWidth ? "primary-button-full-width" : ""), disabled: disabled, onClick: onClick, type: type },
+        startIcon && React.createElement("span", { className: "primary-button-icon ".concat(startIconName) }),
+        React.createElement("span", { className: "primary-button-label" }, label),
+        endIcon && React.createElement("span", { className: "primary-button-icon ".concat(endIconName) })));
+};
+export default PrimaryButton;