allaw-ui 2.8.7 → 2.8.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.
Files changed (7) hide show
  1. package/dist/assets/images/allaw-icon-unlink-red.svg +22 -0
  2. package/dist/components/molecules/checkboxForm/ColoredCheckbox.d.ts +2 -0
  3. package/dist/components/molecules/checkboxForm/ColoredCheckbox.js +7 -2
  4. package/dist/components/molecules/checkboxForm/ColoredCheckbox.module.css +6 -0
  5. package/dist/components/molecules/checkboxForm/ColoredCheckbox.stories.d.ts +18 -0
  6. package/dist/components/molecules/checkboxForm/ColoredCheckbox.stories.js +23 -2
  7. package/package.json +1 -1
package/dist/assets/images/allaw-icon-unlink-red.svg ADDED
@@ -0,0 +1,22 @@
1
+ <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+ <!-- Created with Inkscape (http://www.inkscape.org/) -->
3
+
4
+ <svg
5
+ version="1.1"
6
+ id="svg1"
7
+ width="2335.7976"
8
+ height="1866.5605"
9
+ viewBox="0 0 2335.7976 1866.5605"
10
+ xmlns="http://www.w3.org/2000/svg"
11
+ xmlns:svg="http://www.w3.org/2000/svg">
12
+ <defs
13
+ id="defs1" />
14
+ <g
15
+ id="g1"
16
+ transform="translate(-4.4480934,-12.748703)">
17
+ <path
18
+ style="fill:#e15151;fill-opacity:1"
19
+ d="m 2269.7815,1878.0966 c -13.593,-2.635 -23.5249,-9.5969 -100,-70.096 C 2044.8682,1709.182 994.04249,879.65701 496.44811,487.06609 238.78822,283.77814 27.323043,116.00988 23.458207,111.81426 12.625553,100.05446 4.4480936,82.050354 4.4480936,69.960164 c 0,-13.02018 8.1553014,-31.97103 17.1751034,-39.91058 22.736142,-20.01315 52.503929,-22.8848301 77.313623,-7.45839 3.79827,2.36173 113.84214,88.941856 244.54195,192.400286 130.6998,103.45844 486.03602,384.58766 789.63603,624.73163 303.6,240.14389 693.3001,548.40379 866.0001,685.02189 172.7,136.6182 317.1836,251.489 321.0748,255.2685 9.5783,9.3035 14.4999,17.0576 17.8711,28.1566 2.4862,8.1852 2.6647,10.4765 1.4651,18.8037 -3.5208,24.4389 -21.5986,43.8132 -47.2523,50.6411 -7.9178,2.1074 -13.4903,2.2268 -22.4921,0.4817 z M 680.44812,1526.6632 c -51.04044,-2.7526 -110.96477,-14.0971 -160.28889,-30.345 -31.28393,-10.3052 -43.69596,-15.4028 -74.21337,-30.4796 -57.63055,-28.4716 -103.18031,-61.3968 -151.56211,-109.555 -33.63747,-33.482 -59.98711,-66.3934 -83.98212,-104.8961 -13.05937,-20.9552 -35.8899,-65.8915 -43.94867,-86.5022 -8.29405,-21.2125 -19.13701,-55.4351 -24.70293,-77.9677 -23.24257,-94.09279 -23.79635,-180.00469 -1.7793,-276.03229 18.81484,-82.0611 57.088,-161.65037 109.00027,-226.66671 9.76161,-12.2257 36.62492,-43.33334 37.42095,-43.33334 0.93498,0 89.45114,70.99954 89.82343,72.04812 0.23867,0.67221 -5.19645,7.08638 -12.07804,14.25371 -23.31589,24.28403 -42.82657,49.50436 -58.96194,76.21672 -43.1206,71.3868 -65.16858,152.7644 -65.24498,240.8148 -0.0466,53.6611 6.31376,95.26539 22.72763,148.66659 28.51889,92.7841 91.65512,178.2136 174.45673,236.057 50.17016,35.0478 115.64465,62.1678 177.33333,73.4527 46.23683,8.4582 39.04763,8.168 224.66668,9.0707 l 170.00001,0.8268 7.8935,2.9693 c 20.5598,7.7341 30.6449,18.8701 36.1176,39.8813 6.6256,25.4372 -4.9211,54.3885 -25.9397,65.0394 -14.9045,7.5527 -9.7212,7.3498 -181.40474,7.1032 -86.90001,-0.1248 -161.30001,-0.4049 -165.33334,-0.6224 z M 2014.8325,1313.1135 c -25.4553,-19.5589 -46.3053,-36.1766 -46.3333,-36.9283 -0.028,-0.7517 4.4949,-5.8517 10.0509,-11.3333 42.6738,-42.1022 80.7458,-103.8909 101.4413,-164.6333 16.6253,-48.7961 24.9272,-100.2101 24.9745,-154.66669 0.047,-54.3756 -7.3218,-100.8794 -24.4397,-154.2325 -28.8724,-89.9896 -91.787,-173.93582 -172.7447,-230.49106 -50.0575,-34.96908 -116.037,-62.36535 -176.6666,-73.35613 -47.3808,-8.58908 -39.4076,-8.26568 -225.3334,-9.13955 l -170,-0.79902 -9.048,-3.50947 c -19.6654,-7.62765 -29.6058,-18.82855 -34.9631,-39.39665 -6.6515,-25.53687 4.9927,-54.42477 26.2872,-65.21553 14.9632,-7.58243 9.2982,-7.37985 190.9032,-6.8268 159.7312,0.48643 167.7862,0.62716 189.5397,3.31138 46.3542,5.71979 86.5698,14.48922 125.9801,27.47126 31.5765,10.40152 43.8981,15.46042 74.6,30.62867 57.4597,28.38792 104.7103,62.55176 151.4326,109.49107 48.1582,48.3818 81.0834,93.93156 109.555,151.5621 15.0768,30.51743 20.1744,42.92943 30.4797,74.21333 34.6407,105.16 39.6741,210.9927 15.1379,318.28889 -19.0214,83.1805 -57.5484,165.5223 -106.3669,227.3334 -12.3679,15.6594 -36.6347,44.0358 -37.5374,43.8943 -0.3666,-0.057 -21.4937,-16.1072 -46.949,-35.6661 z M 670.44812,1002.2166 c -22.284,-3.35159 -36.00605,-12.22709 -44.04198,-28.48669 -9.37704,-18.9731 -9.37704,-38.7161 0,-57.6893 4.8759,-9.8657 10.2903,-15.4084 21.05229,-21.5511 9.92689,-5.6661 18.89143,-7.1454 47.80391,-7.8885 l 27.48089,-0.7062 70.51911,56.3324 c 38.78552,30.9828 71.70245,57.4557 73.14875,58.82859 2.57097,2.4405 0.48895,2.4924 -93.33334,2.3298 -52.77963,-0.091 -98.96297,-0.6176 -102.62963,-1.169 z m 881.54678,-55.78969 c -40.216,-31.4865 -73.8145,-57.9427 -74.6633,-58.7915 -1.1688,-1.1689 22.8808,-1.4332 99.12,-1.0896 94.5402,0.4262 101.1499,0.6081 108.6633,2.9912 21.3695,6.778 33.1464,19.0365 38.673,40.2544 6.3781,24.4872 -3.707,52.1861 -23.1211,63.5026 -13.1175,7.64619 -20.5851,9.12079 -49.5519,9.78499 l -26,0.5962 z"
20
+ id="path1" />
21
+ </g>
22
+ </svg>
package/dist/components/molecules/checkboxForm/ColoredCheckbox.d.ts CHANGED
@@ -10,6 +10,8 @@ export interface ColoredCheckboxProps {
10
10
  textColor?: string;
11
11
  size?: "default" | "small";
12
12
  markType?: "cross" | "check";
13
+ isSignedIn?: boolean;
14
+ unlinkIconPath?: string;
13
15
  }
14
16
  declare const ColoredCheckbox: React.FC<ColoredCheckboxProps>;
15
17
  export default ColoredCheckbox;
package/dist/components/molecules/checkboxForm/ColoredCheckbox.js CHANGED
@@ -1,6 +1,9 @@
1
1
  import React, { useState } from "react";
2
2
  import styles from "./ColoredCheckbox.module.css";
3
3
  import "../../../styles/global.css"; // Pour importer les icônes allaw
4
+ // URL data en base64 pour l'icône de déconnexion (solution de secours)
5
+ // Cette icône représente un lien brisé/déconnecté en rouge
6
+ var DEFAULT_UNLINK_ICON = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuNjY3IDEwLjY2N0w4LjY2NyA4LjY2NyIgc3Ryb2tlPSIjRkYwMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTEyLjY2NyA0LjY2N0MxMy40MDMgNS40MDMgMTMuNDAzIDYuNTk3IDEyLjY2NyA3LjMzM0MxMS45MyA4LjA3IDEwLjczNyA4LjA3IDEwIDcuMzMzQzkuMjYzIDYuNTk3IDkuMjYzIDUuNDAzIDEwIDQuNjY3QzEwLjczNyAzLjkzIDExLjkzIDMuOTMgMTIuNjY3IDQuNjY3WiIgc3Ryb2tlPSIjRkYwMDAwIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTUuMzMzIDExLjMzM0M2LjA3IDEyLjA3IDcuMjYzIDEyLjA3IDggMTEuMzMzQzguNzM3IDEwLjU5NyA4LjczNyA5LjQwMyA4IDguNjY3QzcuMjYzIDcuOTMgNi4wNyA3LjkzIDUuMzMzIDguNjY3QzQuNTk3IDkuNDAzIDQuNTk3IDEwLjU5NyA1LjMzMyAxMS4zMzNaIiBzdHJva2U9IiNGRjAwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNNy4zMzMgNy4zMzNMNS4zMzMgNS4zMzMiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";
4
7
  // Fonction pour formater l'email avec des ellipses intelligentes
5
8
  var formatEmail = function (email) {
6
9
  if (!email || typeof email !== "string" || !email.includes("@")) {
@@ -19,8 +22,9 @@ var formatEmail = function (email) {
19
22
  React.createElement("span", { className: styles.emailTLD }, tld)));
20
23
  };
21
24
  var ColoredCheckbox = function (_a) {
22
- var id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.boxColor, boxColor = _c === void 0 ? "#000000" : _c, _d = _a.markColor, markColor = _d === void 0 ? "#FFFFFF" : _d, _e = _a.textColor, textColor = _e === void 0 ? "#000000" : _e, _f = _a.size, size = _f === void 0 ? "default" : _f, _g = _a.markType, markType = _g === void 0 ? "cross" : _g;
23
- var _h = useState(checked), isChecked = _h[0], setIsChecked = _h[1];
25
+ var id = _a.id, _b = _a.label, label = _b === void 0 ? "mon-email@provider.com" : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.boxColor, boxColor = _d === void 0 ? "#000000" : _d, _e = _a.markColor, markColor = _e === void 0 ? "#FFFFFF" : _e, _f = _a.textColor, textColor = _f === void 0 ? "#000000" : _f, _g = _a.size, size = _g === void 0 ? "default" : _g, _h = _a.markType, markType = _h === void 0 ? "cross" : _h, _j = _a.isSignedIn, isSignedIn = _j === void 0 ? true : _j, _k = _a.unlinkIconPath, unlinkIconPath = _k === void 0 ? "/assets/images/allaw-icon-unlink-red.svg" : _k;
26
+ var _l = useState(checked), isChecked = _l[0], setIsChecked = _l[1];
27
+ var _m = useState(false), iconError = _m[0], setIconError = _m[1];
24
28
  // Generate a random ID if none is provided
25
29
  var checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
26
30
  var handleClick = function (e) {
@@ -53,6 +57,7 @@ var ColoredCheckbox = function (_a) {
53
57
  : label;
54
58
  return (React.createElement("div", { className: styles.container },
55
59
  React.createElement("button", { id: checkboxId, className: "".concat(styles.checkbox, " ").concat(isChecked ? styles.checked : "", " ").concat(size === "small" ? styles.small : ""), onClick: handleClick, style: checkboxStyle, "aria-checked": isChecked, role: "checkbox", "data-cy": "checkbox-".concat(checkboxId) }, isChecked && (React.createElement("span", { className: "".concat(styles.icon, " ").concat(markType === "cross" ? "allaw-icon-close" : "allaw-icon-check"), style: markStyle }))),
60
+ isSignedIn === false && (React.createElement("img", { src: iconError ? DEFAULT_UNLINK_ICON : unlinkIconPath, alt: "Non connect\u00E9", className: styles.unlinkIcon, width: "16", height: "16", style: { width: "16px", height: "16px" }, onError: function () { return setIconError(true); } })),
56
61
  label && (React.createElement("label", { htmlFor: checkboxId, className: styles.label, style: labelStyle, onClick: handleClick }, formattedLabel))));
57
62
  };
58
63
  export default ColoredCheckbox;
package/dist/components/molecules/checkboxForm/ColoredCheckbox.module.css CHANGED
@@ -43,6 +43,12 @@
43
43
  font-size: 11px;
44
44
  }
45
45
 
46
+ .unlinkIcon {
47
+ width: 16px;
48
+ height: 16px;
49
+ flex-shrink: 0;
50
+ }
51
+
46
52
  .label {
47
53
  font-family: "Open Sans", sans-serif;
48
54
  font-size: 14px;
package/dist/components/molecules/checkboxForm/ColoredCheckbox.stories.d.ts CHANGED
@@ -53,6 +53,20 @@ declare namespace _default {
53
53
  }
54
54
  export { control_6 as control };
55
55
  }
56
+ export namespace isSignedIn {
57
+ export namespace control_7 {
58
+ let type_3: string;
59
+ export { type_3 as type };
60
+ }
61
+ export { control_7 as control };
62
+ let defaultValue_3: boolean;
63
+ export { defaultValue_3 as defaultValue };
64
+ }
65
+ export namespace unlinkIconPath {
66
+ let control_8: string;
67
+ export { control_8 as control };
68
+ export let description: string;
69
+ }
56
70
  }
57
71
  export namespace parameters {
58
72
  namespace backgrounds {
@@ -81,4 +95,8 @@ export const EmailLabelVerySmallContainer: any;
81
95
  export const LongEmailLabel: any;
82
96
  export const LongEmailLabelSmallContainer: any;
83
97
  export const LongEmailLabelVerySmallContainer: any;
98
+ export const NotSignedIn: any;
99
+ export const NotSignedInEmail: any;
100
+ export const NotSignedInChecked: any;
101
+ export const CustomIconPath: any;
84
102
  import ColoredCheckbox from "./ColoredCheckbox";
package/dist/components/molecules/checkboxForm/ColoredCheckbox.stories.js CHANGED
@@ -30,7 +30,7 @@ export default {
30
30
  },
31
31
  boxColor: {
32
32
  control: "color",
33
- defaultValue: "#000000",
33
+ defaultValue: "#25beeb",
34
34
  },
35
35
  markColor: {
36
36
  control: "color",
@@ -49,9 +49,19 @@ export default {
49
49
  markType: {
50
50
  control: {
51
51
  type: "select",
52
- options: ["cross", "check"],
52
+ options: ["check", "cross"],
53
53
  },
54
54
  },
55
+ isSignedIn: {
56
+ control: {
57
+ type: "boolean",
58
+ },
59
+ defaultValue: true,
60
+ },
61
+ unlinkIconPath: {
62
+ control: "text",
63
+ description: "Chemin vers l'icône de déconnexion",
64
+ },
55
65
  },
56
66
  parameters: {
57
67
  backgrounds: {
@@ -82,6 +92,7 @@ Default.args = {
82
92
  textColor: "#000000",
83
93
  size: "default",
84
94
  markType: "cross",
95
+ isSignedIn: true,
85
96
  };
86
97
  export var Checked = Template.bind({});
87
98
  Checked.args = __assign(__assign({}, Default.args), { checked: true, label: "Checked Checkbox" });
@@ -115,3 +126,13 @@ export var LongEmailLabelSmallContainer = Template.bind({});
115
126
  LongEmailLabelSmallContainer.args = __assign(__assign({}, LongEmailLabel.args), { containerWidth: "300px" });
116
127
  export var LongEmailLabelVerySmallContainer = Template.bind({});
117
128
  LongEmailLabelVerySmallContainer.args = __assign(__assign({}, LongEmailLabel.args), { containerWidth: "200px" });
129
+ // Exemples avec isSignedIn
130
+ export var NotSignedIn = Template.bind({});
131
+ NotSignedIn.args = __assign(__assign({}, Default.args), { label: "User not signed in", isSignedIn: false });
132
+ export var NotSignedInEmail = Template.bind({});
133
+ NotSignedInEmail.args = __assign(__assign({}, EmailLabel.args), { label: "vincent.desbrosses@hotmail.com", isSignedIn: false });
134
+ export var NotSignedInChecked = Template.bind({});
135
+ NotSignedInChecked.args = __assign(__assign({}, NotSignedIn.args), { checked: true });
136
+ // Exemple avec un chemin d'icône personnalisé
137
+ export var CustomIconPath = Template.bind({});
138
+ CustomIconPath.args = __assign({}, NotSignedIn.args);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "2.8.7",
3
+ "version": "2.8.9",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",