allaw-ui 3.7.9 → 3.8.1

package/dist/components/atoms/selects/Select.d.ts

@@ -13,6 +13,7 @@ export interface SelectProps<T extends string | string[]> {
     showError?: boolean;
     width?: number;
     maxItems?: number;
+    requireAttention?: boolean;
     onChange?: (selected: T) => void;
     onError?: (error: string) => void;
 }

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

@@ -14,21 +14,21 @@ import "../../../styles/global.css";
 import TinyInfo from "../typography/TinyInfo";
 function Select(_a, ref) {
     var _b;
-    var items = _a.items, selectedItem = _a.selectedItem, _c = _a.placeholder, placeholder = _c === void 0 ? "Choisir..." : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.showError, showError = _f === void 0 ? false : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, maxItems = _a.maxItems, onChange = _a.onChange, onError = _a.onError;
-    var _h = useState(false), isOpen = _h[0], setIsOpen = _h[1];
-    var _j = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _j[0], setSelected = _j[1];
-    var _k = useState(""), error = _k[0], setError = _k[1];
+    var items = _a.items, selectedItem = _a.selectedItem, _c = _a.placeholder, placeholder = _c === void 0 ? "Choisir..." : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.showError, showError = _f === void 0 ? false : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, maxItems = _a.maxItems, _h = _a.requireAttention, requireAttention = _h === void 0 ? false : _h, onChange = _a.onChange, onError = _a.onError;
+    var _j = useState(false), isOpen = _j[0], setIsOpen = _j[1];
+    var _k = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _k[0], setSelected = _k[1];
+    var _l = useState(""), error = _l[0], setError = _l[1];
     var selectRef = useRef(null);
     var listRef = useRef(null);
     var tagContainerRef = useRef(null);
-    var _l = useState([]), visibleTags = _l[0], setVisibleTags = _l[1];
-    var _m = useState(0), hiddenCount = _m[0], setHiddenCount = _m[1];
-    var _o = useState({
+    var _m = useState([]), visibleTags = _m[0], setVisibleTags = _m[1];
+    var _o = useState(0), hiddenCount = _o[0], setHiddenCount = _o[1];
+    var _p = useState({
         top: 0,
         left: 0,
         width: 0,
-    }), listPosition = _o[0], setListPosition = _o[1];
-    var _p = useState("bottom"), placement = _p[0], setPlacement = _p[1];
+    }), listPosition = _p[0], setListPosition = _p[1];
+    var _q = useState("bottom"), placement = _q[0], setPlacement = _q[1];
     useEffect(function () {
         setSelected((multiple ? selectedItem || [] : selectedItem || ""));
     }, [selectedItem, multiple]);
@@ -226,13 +226,13 @@ function Select(_a, ref) {
         validate: function () { return validateSelect(selected); },
     }); });
     return (React.createElement("div", { ref: selectRef, className: "".concat(styles.selectContainer, " ").concat(isOpen ? styles.selectPressed : ""), style: { width: "".concat(width, "%") } },
-        React.createElement("button", { type: "button", className: "".concat(styles.select, " ").concat(isOpen ? styles.selectPressed : styles.selectDefault, " ").concat(multiple ? styles.selectMultiple : styles.selectSingle), onClick: toggleOpen, style: { width: "100%" } },
+        React.createElement("button", { type: "button", className: "".concat(styles.select, " ").concat(isOpen ? styles.selectPressed : styles.selectDefault, " ").concat(multiple ? styles.selectMultiple : styles.selectSingle, " ").concat(requireAttention ? styles.selectRequireAttention : ""), onClick: toggleOpen, style: { width: "100%" } },
             React.createElement("span", { className: styles.selectText }, Array.isArray(selected) && selected.length > 0
                 ? renderTags(selected)
                 : !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,9 +178,21 @@
 }
 
 .selectMultiple {
-  padding: 6px 8px;
+  padding: 8px 16px;
 }
 
 .selectSingle {
   padding: 8px 16px;
 }
+
+.selectRequireAttention {
+  border-color: #25beeb !important;
+}
+
+.selectRequireAttention:hover {
+  border-color: #1d9cc9 !important;
+}
+
+.selectRequireAttention:focus {
+  border-color: #1d9cc9 !important;
+}

package/dist/components/atoms/selects/Select.stories.d.ts

@@ -32,35 +32,42 @@ declare namespace _default {
             }
             export { control_3 as control };
         }
-        namespace selectedItem {
+        namespace requireAttention {
             export namespace control_4 {
                 let type_4: string;
                 export { type_4 as type };
             }
             export { control_4 as control };
         }
-        namespace maxItems {
+        namespace selectedItem {
             export namespace control_5 {
                 let type_5: string;
                 export { type_5 as type };
-                export let min: number;
             }
             export { control_5 as control };
         }
+        namespace maxItems {
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+                export let min: number;
+            }
+            export { control_6 as control };
+        }
         namespace onChange {
             namespace table {
                 let disable: boolean;
             }
         }
         namespace width {
-            export namespace control_6 {
-                let type_6: string;
-                export { type_6 as type };
+            export namespace control_7 {
+                let type_7: string;
+                export { type_7 as type };
                 let min_1: number;
                 export { min_1 as min };
                 export let max: number;
             }
-            export { control_6 as control };
+            export { control_7 as control };
         }
     }
     export namespace parameters {
@@ -92,4 +99,5 @@ export const Pressed: any;
 export const Multiple: any;
 export const Required: any;
 export const CustomWidth: any;
+export const RequireAttention: any;
 import Select from "./Select";

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

@@ -40,6 +40,11 @@ export default {
                 type: "boolean",
             },
         },
+        requireAttention: {
+            control: {
+                type: "boolean",
+            },
+        },
         selectedItem: {
             control: {
                 type: "text",
@@ -109,6 +114,7 @@ Default.args = {
     placeholder: "Select...",
     multiple: false,
     isRequired: false,
+    requireAttention: false,
     width: 100,
 };
 export var Pressed = Template.bind({});
@@ -125,6 +131,7 @@ Pressed.args = {
     placeholder: "Select...",
     multiple: false,
     isRequired: false,
+    requireAttention: false,
 };
 export var Multiple = Template.bind({});
 Multiple.args = {
@@ -140,6 +147,7 @@ Multiple.args = {
     placeholder: "Select...",
     multiple: true,
     isRequired: false,
+    requireAttention: false,
     maxItems: 3,
 };
 export var Required = Template.bind({});
@@ -156,6 +164,24 @@ Required.args = {
     placeholder: "Select...",
     multiple: false,
     isRequired: true,
+    requireAttention: false,
 };
 export var CustomWidth = Template.bind({});
 CustomWidth.args = __assign(__assign({}, Default.args), { width: 50 });
+export var RequireAttention = Template.bind({});
+RequireAttention.args = {
+    items: [
+        { label: "Lundi 12 août", value: "lundi-12-aout" },
+        { label: "Mardi 13 août", value: "mardi-13-aout" },
+        { label: "Mercredi 14 août", value: "mercredi-14-aout" },
+        { label: "Jeudi 15 août", value: "jeudi-15-aout" },
+        { label: "Vendredi 16 août", value: "vendredi-16-aout" },
+        { label: "Samedi 17 août", value: "samedi-17-aout" },
+    ],
+    selectedItem: "",
+    placeholder: "Choisir une date...",
+    multiple: false,
+    isRequired: false,
+    requireAttention: true,
+    width: 100,
+};

package/package.json

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