allaw-ui 0.0.19 → 0.0.294

package/README.md

@@ -15,6 +15,21 @@ Importez les composants dont vous avez besoin dans votre application React.
 - Button
 - Icon
 - Tag
+- EmployeeCard
+- CaseCard
+- DocumentCard
+- ContactCard
+- Stepper
+- ProgressBar
+- Input
+- SearchBar
+- Typography (Heading, Subtitle, Paragraph, TinyInfo, SmallTitle)
+- AppointementStatusTag
+- FolderStatusTag
+- PendingDocuments
+- ActionCircleButton
+- GhostButton
+- Checkbox
 
 Pour une documentation complète de chaque composant, veuillez consulter notre Storybook.
 
@@ -28,7 +43,7 @@ Pour une documentation complète de chaque composant, veuillez consulter notre S
 
 ### Installation des dépendances
 
-npm install
+    npm install
 
 Storybook sera disponible à l'adresse [http://localhost:6006](http://localhost:6006).
 
@@ -36,9 +51,9 @@ Storybook sera disponible à l'adresse [http://localhost:6006](http://localhost:
 
 import "../node_modules/allaw-ui/dist/styles/colors.css";
 
-<div className={styles.testCouleur}>
-Test couleur variable --bleu-allaw
-</div>
+    <div className={styles.testCouleur}>
+    Test couleur variable --bleu-allaw
+    </div>
 
 Fichier page.modules.css :
 .testCouleur {
@@ -47,9 +62,9 @@ color: var(--bleu-allaw);
 
 ### Utilisation des Boutons
 
-import { Button } from "allaw-ui";
+    import PrimaryButton from "allaw-ui/dist/components/atoms/buttons/PrimaryButton";
 
-        <Button
+    <Button
           label="click me"
           startIcon="allaw-icon-arrow-right"
           endIcon="allaw-icon-arrow-left"
@@ -57,15 +72,20 @@ import { Button } from "allaw-ui";
 
 ### Utilisation des Tags
 
-import { Tag } from "allaw-ui";
-
-<Tag status="passed" variant="big" />
+    import { Tag } from "allaw-ui";
+    <Tag status="passed" variant="big" />
 
 ### Build
 
 Pour construire la bibliothèque :
 
-npm run build
+    npm run build
+
+### Storybook
+
+Pour lancer Storybook en mode développement :
+
+    npm run build-storybook
 
 ## Contribution
 

package/dist/app/globals.css

@@ -0,0 +1,5 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}

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

@@ -0,0 +1,143 @@
+.approved-circle {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  border: 1px solid var(--Tags-Vert, #29a36a);
+  background: var(--tag-green-light, #daf6e9);
+  cursor: pointer;
+}
+
+.approved-icon {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  color: var(--Tags-Vert, #29a36a);
+  font-size: 14px;
+  transition: transform 0.15s ease;
+}
+
+.approved-circle:hover .approved-icon {
+  transform: scale(1.1);
+  transform-origin: center;
+  cursor: pointer;
+}
+
+.approved-circle:active .approved-icon {
+  transform: scale(1.2);
+  transform-origin: center;
+}
+
+/* Styles pour le bouton rejeté */
+.rejected-circle {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  border: 1px solid var(--red-tag-dark, #e15151);
+  background: var(--red-tag-light, #fdf2f2);
+  cursor: pointer;
+}
+
+.rejected-icon {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  color: var(--red-tag-dark, #e15151);
+  font-size: 9px;
+  transition: transform 0.15s ease;
+}
+
+.rejected-circle:hover .rejected-icon {
+  transform: scale(1.1);
+  transform-origin: center;
+  cursor: pointer;
+}
+
+.rejected-circle:active .rejected-icon {
+  transform: scale(1.2);
+  transform-origin: center;
+}
+
+/* Styles pour le bouton dual */
+.dual-button {
+  display: flex;
+  height: 32px;
+  width: 64px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  background: var(--secondary-light-grey, #f4f7fb);
+}
+
+.dual-rejected-icon {
+  width: 24px;
+  height: 24px;
+  color: #e15151;
+  background: none;
+  font-size: 9px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding-right: 4px;
+  transition: transform 0.15s ease;
+}
+
+.dual-rejected-icon:hover {
+  transform: scale(1.1);
+  transform-origin: center;
+  cursor: pointer;
+}
+
+.dual-rejected-icon:active {
+  transform: scale(1.2);
+  transform-origin: center;
+}
+
+.separator {
+  width: 1px;
+  height: 18px;
+  background-color: var(--light-grey, #728ea7);
+  opacity: 0.4;
+}
+
+.dual-approved-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--Tags-Vert, #29a36a);
+  background: none;
+  padding-left: 4px;
+  transition: transform 0.15s ease;
+}
+
+.dual-approved-icon:hover {
+  transform: scale(1.1);
+  transform-origin: center;
+  cursor: pointer;
+}
+
+.dual-approved-icon:active {
+  transform: scale(1.2);
+  transform-origin: center;
+}

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

@@ -0,0 +1,9 @@
+import React from "react";
+import "./ActionCircleButton.css";
+interface ActionCircleButtonProps {
+    status: "approved" | "rejected" | "dual";
+    onApprove?: () => void;
+    onReject?: () => void;
+}
+declare const ActionCircleButton: React.FC<ActionCircleButtonProps>;
+export default ActionCircleButton;

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

@@ -0,0 +1,23 @@
+import React from "react";
+import "./ActionCircleButton.css";
+var ActionCircleButton = function (_a) {
+    var status = _a.status, onApprove = _a.onApprove, onReject = _a.onReject;
+    if (status === "approved") {
+        return (React.createElement("button", { className: "approved-circle", onClick: onApprove },
+            React.createElement("span", { className: "allaw-icon-check approved-icon" })));
+    }
+    if (status === "rejected") {
+        return (React.createElement("button", { className: "rejected-circle", onClick: onReject },
+            React.createElement("span", { className: "allaw-icon-close rejected-icon" })));
+    }
+    if (status === "dual") {
+        return (React.createElement("div", { className: "dual-button" },
+            React.createElement("button", { className: "dual-rejected-icon", onClick: onReject },
+                React.createElement("span", { className: "allaw-icon-close" })),
+            React.createElement("span", { className: "separator" }),
+            React.createElement("button", { className: "dual-approved-icon", onClick: onApprove },
+                React.createElement("span", { className: "allaw-icon-check" }))));
+    }
+    return null;
+};
+export default ActionCircleButton;

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

@@ -0,0 +1,116 @@
+.agenda-slot {
+  display: flex;
+  width: 149.333px;
+  padding: 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  text-align: center;
+}
+
+.agenda-slot.pro {
+  background: var(--secondary-light-grey, #f4f7fb);
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+}
+
+.agenda-slot.pro:hover {
+  background: #cfdeec;
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+}
+
+.agenda-slot.pro:active {
+  background: #cfdeec;
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+}
+
+.agenda-slot.pro.disabled {
+  background: var(--venom-grey, #e6edf5);
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  font-weight: 700;
+  cursor: not-allowed;
+}
+
+.agenda-slot.hybride {
+  width: 104px;
+  height: 48px;
+  padding: 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: var(--tag-blue-light, #daebfb);
+  color: var(--Tags-Bleu-fonc, var(--tag-blue, #1985e8));
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.agenda-slot.hybride:active {
+  background: var(--tag-blue, #1985e8);
+  color: var(--Tags-Bleu-clair, var(--tag-blue-light, #daebfb));
+}
+
+.agenda-slot.hybride.disabled {
+  background: var(--secondary-light-grey, #f4f7fb);
+  color: #bfd5e9;
+  cursor: not-allowed;
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.agenda-slot.user {
+  width: 64px;
+  height: 40px;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: var(--tag-blue-light, #daebfb);
+  color: var(--Tags-Bleu-fonc, var(--tag-blue, #1985e8));
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 21px;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.agenda-slot.user:active {
+  background: var(--tag-blue, #1985e8);
+  color: var(--Tags-Bleu-clair, var(--tag-blue-light, #daebfb));
+}
+
+.agenda-slot.user.disabled {
+  background: var(--secondary-light-grey, #f4f7fb);
+  color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
+  cursor: not-allowed;
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 21px;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.agenda-slot.disabled {
+  background-color: var(--disabled-bg, #e0e0e0);
+  color: #a0a0a0;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import "./AgendaSlot.css";
+interface AgendaSlotProps {
+    time: string;
+    appearance: "pro" | "hybride" | "user";
+    isDisabled?: boolean;
+    onClick?: () => void;
+}
+declare const AgendaSlot: React.FC<AgendaSlotProps>;
+export default AgendaSlot;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import "./AgendaSlot.css";
+var AgendaSlot = function (_a) {
+    var time = _a.time, appearance = _a.appearance, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, onClick = _a.onClick;
+    return (React.createElement("div", { className: "agenda-slot ".concat(appearance, " ").concat(isDisabled ? "disabled" : ""), onClick: !isDisabled ? onClick : undefined }, time));
+};
+export default AgendaSlot;

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

@@ -0,0 +1,35 @@
+@import "../../../styles/colors.css";
+
+.favorite-toggle {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.favorite-toggle .icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  font-size: 24px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.15s ease;
+}
+
+.favorite-toggle .icon.favorite {
+  color: #fcc812;
+}
+
+.favorite-toggle .icon.not-favorite {
+  color: #000000;
+}
+
+.favorite-toggle .icon:active {
+  transform: scale(1.05);
+}

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

@@ -0,0 +1,8 @@
+import React from "react";
+import "./FavoriteToggle.css";
+export interface FavoriteToggleProps {
+    isFavorite: boolean;
+    onToggle: (isFavorite: boolean) => void;
+}
+declare const FavoriteToggle: React.FC<FavoriteToggleProps>;
+export default FavoriteToggle;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import "./FavoriteToggle.css";
+var FavoriteToggle = function (_a) {
+    var isFavorite = _a.isFavorite, onToggle = _a.onToggle;
+    var handleToggle = function () {
+        onToggle(!isFavorite);
+    };
+    return (React.createElement("div", { className: "favorite-toggle", onClick: handleToggle },
+        React.createElement("i", { className: "icon ".concat(isFavorite ? "favorite allaw-icon-star-fill" : "not-favorite allaw-icon-star-unfill") })));
+};
+export default FavoriteToggle;

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

@@ -0,0 +1,55 @@
+@import "../../../styles/colors.css";
+
+/* Styles pour le bouton actif */
+.filter-button-active {
+  display: inline-flex;
+  height: 35px;
+  padding: 12px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 56px;
+  background: var(--dark-grey, #456073);
+}
+
+.filter-button-active .filter-button-label {
+  color: var(--Primary-Blanc, #fff);
+  font-family: "Open Sans";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+/* Styles pour le bouton inactif */
+.filter-button-inactive {
+  display: inline-flex;
+  height: 35px;
+  padding: 12px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 56px;
+  border: 1px solid var(--venom-grey, #e6edf5);
+  background: var(--secondary-light-grey, #f4f7fb);
+}
+
+.filter-button-inactive:hover {
+  background: var(--grey-venom, #e6edf5);
+  cursor: pointer;
+}
+
+.filter-button-inactive:active {
+  background: #d8e1eb;
+}
+
+.filter-button-inactive .filter-button-label {
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  font-family: "Open Sans";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}

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

@@ -0,0 +1,9 @@
+import React from "react";
+import "./FilterButton.css";
+import "../../../styles/global.css";
+export interface FilterButtonProps {
+    label: string;
+    isActive: boolean;
+}
+declare const FilterButton: React.FC<FilterButtonProps>;
+export default FilterButton;

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

@@ -0,0 +1,9 @@
+import React from "react";
+import "./FilterButton.css";
+import "../../../styles/global.css";
+var FilterButton = function (_a) {
+    var label = _a.label, isActive = _a.isActive;
+    return (React.createElement("button", { className: "filter-button ".concat(isActive ? "filter-button-active" : "filter-button-inactive") },
+        React.createElement("span", { className: "filter-button-label" }, label)));
+};
+export default FilterButton;

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;