allaw-ui 5.6.0 → 5.6.5

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 (6) hide show
  1. package/dist/components/atoms/buttons/OAuthProviderButton.css +111 -93
  2. package/dist/components/atoms/buttons/OAuthProviderButton.d.ts +2 -1
  3. package/dist/components/atoms/buttons/OAuthProviderButton.js +6 -5
  4. package/dist/components/molecules/selectForm/SelectForm.d.ts +1 -1
  5. package/dist/components/molecules/selectForm/SelectForm.js +2 -2
  6. package/package.json +1 -1
package/dist/components/atoms/buttons/OAuthProviderButton.css CHANGED
@@ -1,149 +1,167 @@
1
1
  @import "../../../styles/colors.css";
2
2
 
3
3
  .oauth-provider-button {
4
- display: flex;
5
- align-items: center;
6
- justify-content: center;
7
- gap: 15px;
8
- cursor: pointer;
9
- min-width: 210px;
10
- max-width: 100%;
11
- border-radius: 10px;
12
- padding: 6px;
13
- box-sizing: border-box;
4
+ display: flex;
5
+ align-items: center;
6
+ justify-content: center;
7
+ gap: 15px;
8
+ cursor: pointer;
9
+ min-width: 210px;
10
+ max-width: 100%;
11
+ border-radius: 10px;
12
+ padding: 6px;
13
+ box-sizing: border-box;
14
14
  }
15
15
 
16
16
  .oauth-provider-button:hover {
17
- opacity: 0.8;
17
+ opacity: 0.8;
18
18
  }
19
19
 
20
20
  .oauth-provider-button:active {
21
- opacity: 1;
21
+ opacity: 1;
22
22
  }
23
23
 
24
24
  .oauth-provider-button.google {
25
- width: 100%;
26
- max-width: 100%;
27
- background: #ffffff;
28
- box-shadow: 0px 2px 3px 0px #0000002b, 0px 0px 3px 0px #00000015;
25
+ width: 100%;
26
+ max-width: 100%;
27
+ background: #ffffff;
28
+ box-shadow:
29
+ 0px 2px 3px 0px #0000002b,
30
+ 0px 0px 3px 0px #00000015;
29
31
  }
30
32
 
31
33
  .oauth-provider-button.google .label {
32
- font-family: Roboto;
33
- font-weight: 500;
34
- text-align: left;
35
- color: #0000008a;
36
- white-space: nowrap;
37
- overflow: hidden;
38
- text-overflow: ellipsis;
39
- text-transform: none !important;
34
+ font-family: Roboto;
35
+ font-weight: 500;
36
+ text-align: left;
37
+ color: #0000008a;
38
+ white-space: nowrap;
39
+ overflow: hidden;
40
+ text-overflow: ellipsis;
41
+ text-transform: none !important;
40
42
  }
41
43
 
42
44
  .oauth-provider-button.apple {
43
- background: #000000;
44
- width: 100%;
45
- max-width: 100%;
45
+ background: #000000;
46
+ width: 100%;
47
+ max-width: 100%;
46
48
  }
47
49
 
48
50
  .oauth-provider-button.linkedin {
49
- background: #0a66c2;
50
- width: 100%;
51
- max-width: 100%;
52
- padding-left: 10px;
53
- padding-right: 10px;
51
+ background: #0a66c2;
52
+ width: 100%;
53
+ max-width: 100%;
54
+ padding-left: 10px;
55
+ padding-right: 10px;
54
56
  }
55
57
 
56
58
  .oauth-provider-button.apple .label {
57
- font-family: "SF Pro Display", sans-serif;
58
- font-weight: 500;
59
- text-align: left;
60
- color: #ffffff;
61
- letter-spacing: 0.005em;
62
- white-space: nowrap;
63
- overflow: hidden;
64
- text-overflow: ellipsis;
65
- text-transform: none !important;
59
+ font-family: "SF Pro Display", sans-serif;
60
+ font-weight: 500;
61
+ text-align: left;
62
+ color: #ffffff;
63
+ letter-spacing: 0.005em;
64
+ white-space: nowrap;
65
+ overflow: hidden;
66
+ text-overflow: ellipsis;
67
+ text-transform: none !important;
66
68
  }
67
69
 
68
70
  .oauth-provider-button.linkedin .label {
69
- font-family: "Source Sans Pro", sans-serif;
70
- font-weight: 500;
71
- text-align: left;
72
- color: #ffffff;
73
- white-space: nowrap;
74
- overflow: hidden;
75
- text-overflow: ellipsis;
76
- text-transform: none !important;
71
+ font-family: "Source Sans Pro", sans-serif;
72
+ font-weight: 500;
73
+ text-align: left;
74
+ color: #ffffff;
75
+ white-space: nowrap;
76
+ overflow: hidden;
77
+ text-overflow: ellipsis;
78
+ text-transform: none !important;
77
79
  }
78
80
 
79
81
  .allaw-icon-google {
80
- display: flex;
82
+ display: flex;
81
83
  }
82
84
 
83
85
  .allaw-icon-apple {
84
- display: flex;
85
- color: #ffffff;
86
- padding-bottom: 2px;
86
+ display: flex;
87
+ color: #ffffff;
88
+ padding-bottom: 2px;
87
89
  }
88
90
 
89
91
  .allaw-icon-linkedin {
90
- display: flex;
91
- color: #0a66c2;
92
- padding-bottom: 0px;
92
+ display: flex;
93
+ color: #0a66c2;
94
+ padding-bottom: 0px;
93
95
  }
94
96
 
95
97
  .linkedin-icon-container {
96
- display: flex;
97
- align-items: center;
98
- justify-content: center;
99
- width: 24px;
100
- height: 24px;
101
- border-radius: 4px;
102
- background: #ffffff;
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: center;
101
+ width: 24px;
102
+ height: 24px;
103
+ border-radius: 4px;
104
+ background: #ffffff;
103
105
  }
104
106
 
105
107
  .oauth-provider-button.microsoft {
106
- width: 100%;
107
- max-width: 100%;
108
- background: #ffffff;
109
- box-shadow: 0px 2px 3px 0px #0000002b, 0px 0px 3px 0px #00000015;
110
- font-family: Roboto;
111
- font-size: 20px;
112
- font-weight: 500;
113
- color: #0000008a;
114
- display: flex;
115
- align-items: center;
116
- justify-content: center;
117
- gap: 12px;
118
- border-radius: 10px;
119
- padding: 6px;
120
- cursor: pointer;
108
+ width: 100%;
109
+ max-width: 100%;
110
+ background: #ffffff;
111
+ box-shadow:
112
+ 0px 2px 3px 0px #0000002b,
113
+ 0px 0px 3px 0px #00000015;
114
+ font-family: Roboto;
115
+ font-size: 20px;
116
+ font-weight: 500;
117
+ color: #0000008a;
118
+ display: flex;
119
+ align-items: center;
120
+ justify-content: center;
121
+ gap: 12px;
122
+ border-radius: 10px;
123
+ padding: 6px;
124
+ cursor: pointer;
121
125
  }
122
126
 
123
127
  .oauth-provider-button.microsoft .label {
124
- text-align: left;
125
- white-space: nowrap;
126
- overflow: hidden;
127
- text-overflow: ellipsis;
128
- text-transform: none !important;
128
+ text-align: left;
129
+ white-space: nowrap;
130
+ overflow: hidden;
131
+ text-overflow: ellipsis;
132
+ text-transform: none !important;
129
133
  }
130
134
 
131
135
  /* Ajoutez cette règle spécifique pour forcer le texte à ne pas être en majuscules */
132
136
  .oauth-provider-button .label {
133
- text-transform: none !important;
137
+ text-transform: none !important;
134
138
  }
135
139
 
136
- /* Assurez-vous que cette règle est appliquée à tous les fournisseurs */
137
- .oauth-provider-button.google .label,
138
- .oauth-provider-button.apple .label,
139
- .oauth-provider-button.linkedin .label,
140
- .oauth-provider-button.microsoft .label {
141
- text-transform: none !important;
140
+ .oauth-provider-button.white-bg {
141
+ background: #ffffff !important;
142
+ box-shadow:
143
+ 0px 2px 3px 0px #0000002b,
144
+ 0px 0px 3px 0px #00000015 !important;
145
+ }
146
+
147
+ .oauth-provider-button.white-bg.apple .label,
148
+ .oauth-provider-button.white-bg.microsoft .label,
149
+ .oauth-provider-button.white-bg.google .label {
150
+ color: #0000008a !important;
151
+ }
152
+
153
+ .oauth-provider-button.white-bg.linkedin .label {
154
+ color: #0a66c2 !important;
155
+ }
156
+
157
+ .oauth-provider-button.white-bg .allaw-icon-apple {
158
+ color: #000000 !important;
142
159
  }
143
160
 
144
161
  /* Styles pour les boutons avec label court */
145
162
  .oauth-provider-button.short-label {
146
- min-width: 150px;
147
- max-width: 200px;
148
- gap: 10px;
163
+ min-width: 150px;
164
+ max-width: 200px;
165
+ gap: 10px;
149
166
  }
167
+ /*s*/
package/dist/components/atoms/buttons/OAuthProviderButton.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
- import "./OAuthProviderButton.css";
3
2
  import "../../../styles/global.css";
3
+ import "./OAuthProviderButton.css";
4
4
  export interface OAuthProviderButtonProps {
5
5
  provider: "google" | "apple" | "linkedin" | "microsoft";
6
6
  type: "login" | "signup" | "calendar";
@@ -8,6 +8,7 @@ export interface OAuthProviderButtonProps {
8
8
  size: 14 | 16 | 18 | 20 | 22 | 24;
9
9
  onClick?: () => void;
10
10
  displayShortLabel?: boolean;
11
+ whiteBackground?: boolean;
11
12
  }
12
13
  declare const OAuthProviderButton: React.FC<OAuthProviderButtonProps>;
13
14
  export default OAuthProviderButton;
package/dist/components/atoms/buttons/OAuthProviderButton.js CHANGED
@@ -1,9 +1,9 @@
1
- import React, { useState, useEffect, useRef } from "react";
2
- import "./OAuthProviderButton.css";
1
+ import React, { useEffect, useRef, useState } from "react";
3
2
  import "../../../styles/global.css";
3
+ import "./OAuthProviderButton.css";
4
4
  var OAuthProviderButton = function (_a) {
5
- var provider = _a.provider, type = _a.type, url = _a.url, size = _a.size, onClick = _a.onClick, _b = _a.displayShortLabel, displayShortLabel = _b === void 0 ? false : _b;
6
- var _c = useState(""), label = _c[0], setLabel = _c[1];
5
+ var provider = _a.provider, type = _a.type, url = _a.url, size = _a.size, onClick = _a.onClick, _b = _a.displayShortLabel, displayShortLabel = _b === void 0 ? false : _b, _c = _a.whiteBackground, whiteBackground = _c === void 0 ? false : _c;
6
+ var _d = useState(""), label = _d[0], setLabel = _d[1];
7
7
  var buttonRef = useRef(null);
8
8
  var getLabels = function () {
9
9
  var labels = {
@@ -173,8 +173,9 @@ var OAuthProviderButton = function (_a) {
173
173
  }
174
174
  };
175
175
  var maxWidth = getMaxWidth();
176
- return (React.createElement("button", { ref: buttonRef, className: "oauth-provider-button ".concat(provider).concat(displayShortLabel ? " short-label" : ""), onClick: handleClick, style: { height: "".concat(size * 2.55, "px"), maxWidth: maxWidth } },
176
+ return (React.createElement("button", { ref: buttonRef, className: "oauth-provider-button ".concat(provider).concat(displayShortLabel ? " short-label" : "").concat(whiteBackground ? " white-bg" : ""), onClick: handleClick, style: { height: "".concat(size * 2.55, "px"), maxWidth: maxWidth } },
177
177
  renderIcon(),
178
178
  React.createElement("span", { className: "label", style: { fontSize: "".concat(size, "px") } }, label)));
179
179
  };
180
180
  export default OAuthProviderButton;
181
+ // s
package/dist/components/molecules/selectForm/SelectForm.d.ts CHANGED
@@ -7,7 +7,7 @@ export interface SelectFormProps {
7
7
  isRequired: boolean;
8
8
  options: SelectItem[];
9
9
  isMultiple: boolean;
10
- placeHolder?: string;
10
+ placeholder?: string;
11
11
  width?: number;
12
12
  selectedItem?: string | string[];
13
13
  maxItems?: number;
package/dist/components/molecules/selectForm/SelectForm.js CHANGED
@@ -4,12 +4,12 @@ import "../../../styles/global.css";
4
4
  import Paragraph from "../../atoms/typography/Paragraph";
5
5
  import Select from "../../atoms/selects/Select";
6
6
  var SelectForm = function (_a) {
7
- var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.placeHolder, placeHolder = _b === void 0 ? "Sélectionner une valeur" : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, selectedItem = _a.selectedItem, maxItems = _a.maxItems, onChange = _a.onChange, _d = _a.variant, variant = _d === void 0 ? "medium" : _d, _e = _a.color, color = _e === void 0 ? "noir" : _e, _f = _a.isPrefilled, isPrefilled = _f === void 0 ? false : _f;
7
+ var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une valeur" : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, selectedItem = _a.selectedItem, maxItems = _a.maxItems, onChange = _a.onChange, _d = _a.variant, variant = _d === void 0 ? "medium" : _d, _e = _a.color, color = _e === void 0 ? "noir" : _e, _f = _a.isPrefilled, isPrefilled = _f === void 0 ? false : _f;
8
8
  return (React.createElement("div", { className: "select-form" },
9
9
  React.createElement(Paragraph, { variant: variant, color: color, text: React.createElement(React.Fragment, null,
10
10
  label,
11
11
  " ",
12
12
  isRequired && React.createElement("span", { className: "select-form-required" }, "*")), size: "default" }),
13
- React.createElement(Select, { items: options, multiple: isMultiple, isRequired: isRequired, width: width, placeholder: placeHolder, selectedItem: selectedItem, maxItems: maxItems, onChange: onChange, isPrefilled: isPrefilled })));
13
+ React.createElement(Select, { items: options, multiple: isMultiple, isRequired: isRequired, width: width, placeholder: placeholder, selectedItem: selectedItem, maxItems: maxItems, onChange: onChange, isPrefilled: isPrefilled })));
14
14
  };
15
15
  export default SelectForm;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "5.6.0",
3
+ "version": "5.6.5",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",