allaw-ui 3.7.8 → 3.8.0

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

@@ -71,7 +71,8 @@ var PrimaryButton = forwardRef(function (_a, ref) {
     // Determine where to place additional icons
     var hasStartIcon = startIcon || (startIconName && startIconName.trim() !== "");
     var hasEndIcon = endIcon || (endIconName && endIconName.trim() !== "");
-    var shouldPlaceAtStart = hasStartIcon;
+    // Place additional icons at start if there's a start icon, otherwise at start by default
+    var shouldPlaceAtStart = hasStartIcon || !hasEndIcon;
     useEffect(function () {
         var interval = null;
         if (isButtonLoading) {
@@ -123,7 +124,7 @@ var PrimaryButton = forwardRef(function (_a, ref) {
         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) })),
-        !shouldPlaceAtStart && hasEndIcon && renderAdditionalIcons()));
+        !shouldPlaceAtStart && renderAdditionalIcons()));
 });
 PrimaryButton.displayName = "PrimaryButton";
 export default PrimaryButton;

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

@@ -117,4 +117,5 @@ export const WithAdditionalIconsStart: any;
 export const WithAdditionalIconsEnd: any;
 export const WithAdditionalIconsBoth: any;
 export const LargeWithAdditionalIcons: any;
+export const OnlyAdditionalIcons: any;
 import PrimaryButton from "./PrimaryButton";

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

@@ -183,3 +183,5 @@ export var WithAdditionalIconsBoth = Template.bind({});
 WithAdditionalIconsBoth.args = __assign(__assign({}, Default.args), { label: "Icônes Début et Fin", startIcon: true, endIcon: true, additionalIcons: [csvIcon, xlsxIcon] });
 export var LargeWithAdditionalIcons = Template.bind({});
 LargeWithAdditionalIcons.args = __assign(__assign({}, Default.args), { label: "Grand Bouton avec Icônes", startIcon: true, size: "large", additionalIcons: [csvIcon, xlsxIcon] });
+export var OnlyAdditionalIcons = Template.bind({});
+OnlyAdditionalIcons.args = __assign(__assign({}, Default.args), { label: "Seulement Icônes Supplémentaires", startIcon: false, endIcon: false, additionalIcons: [csvIcon, xlsxIcon] });

package/dist/components/atoms/selects/Select.js

@@ -232,7 +232,7 @@ function Select(_a, ref) {
                 : !Array.isArray(selected) && selected
                     ? (_b = items.find(function (item) { return item.value === selected; })) === null || _b === void 0 ? void 0 : _b.label
                     : placeholder),
-            React.createElement("span", { className: "".concat(styles.selectIcon, " ").concat(isOpen ? styles.allawIconChevronUp : styles.allawIconChevronDown) })),
+            React.createElement("i", { className: "".concat(styles.selectIcon, " allaw-icon-chevron-down ").concat(isOpen ? styles.chevronUp : styles.chevronDown) })),
         isOpen && ReactDOM.createPortal(renderList(), document.body),
         isRequired && showError && error && (React.createElement("div", { className: styles.errorMessage },
             React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error })))));

package/dist/components/atoms/selects/Select.module.css

@@ -6,19 +6,28 @@
 .select {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
-  gap: 11px;
-  border-radius: 8px;
-  background: var(--secondary-light-grey, #f4f7fb);
+  align-items: center;
+  gap: 8px;
+  border-radius: 10px;
+  border: 2px solid var(--grey-venom, #e6edf5);
+  background: var(--Primary-Blanc, #fff);
   cursor: pointer;
+  outline: none;
+  font-family: "Open Sans";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  width: 100%;
 }
 
 .select:hover {
-  background: var(--grey-venom, #e6edf5);
+  border-color: var(--venom-grey-dark, #d1dce8);
 }
 
 .select:focus {
-  background: var(--grey-venom, #e6edf5);
+  border-color: var(--venom-grey-dark, #d1dce8);
 }
 
 .selectText {
@@ -45,6 +54,20 @@
   align-items: center;
   justify-content: center;
   padding-top: 2px;
+  transition: transform 0.3s ease-in-out;
+  color: var(--venom-grey-dark, #d1dce8);
+}
+
+.selectIcon:hover {
+  color: var(--mid-grey, #728ea7);
+}
+
+.chevronDown {
+  transform: rotate(0deg);
+}
+
+.chevronUp {
+  transform: rotate(180deg);
 }
 
 .selectList {
@@ -55,8 +78,8 @@
   display: flex;
   flex-direction: column;
   background: #fff;
-  border-radius: 8px;
-  padding: 8px 0;
+  border-radius: 12px;
+  padding: 3px 5px;
   color: var(--Primary-Mid-black, var(--primary-black, #171e25));
   font-family: "Open Sans";
   font-size: 14px;
@@ -75,13 +98,15 @@
 .selectItem {
   display: flex;
   align-items: center;
-  padding: 8px 16px;
+  padding: 8px 12px;
+  margin: 2px 0;
   cursor: pointer;
   width: 100%;
 }
 
 .selectItem:hover {
   background: var(--grey-venom, #e6edf5);
+  border-radius: 8px;
 }
 
 .selectItem .selectItemIcon {
@@ -116,6 +141,7 @@
 
 .selectItem.highlighted {
   background-color: var(--venom-grey-dark, #d1dce8);
+  border-radius: 8px;
 }
 
 .tagContainer {
@@ -152,7 +178,7 @@
 }
 
 .selectMultiple {
-  padding: 6px 8px;
+  padding: 8px 16px;
 }
 
 .selectSingle {

package/package.json

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