allaw-ui 3.8.1 → 3.8.3

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

@@ -14,6 +14,7 @@ export interface SelectProps<T extends string | string[]> {
     width?: number;
     maxItems?: number;
     requireAttention?: boolean;
+    disabledItems?: string[];
     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, _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 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, _j = _a.disabledItems, disabledItems = _j === void 0 ? [] : _j, onChange = _a.onChange, onError = _a.onError;
+    var _k = useState(false), isOpen = _k[0], setIsOpen = _k[1];
+    var _l = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _l[0], setSelected = _l[1];
+    var _m = useState(""), error = _m[0], setError = _m[1];
     var selectRef = useRef(null);
     var listRef = useRef(null);
     var tagContainerRef = useRef(null);
-    var _m = useState([]), visibleTags = _m[0], setVisibleTags = _m[1];
-    var _o = useState(0), hiddenCount = _o[0], setHiddenCount = _o[1];
-    var _p = useState({
+    var _o = useState([]), visibleTags = _o[0], setVisibleTags = _o[1];
+    var _p = useState(0), hiddenCount = _p[0], setHiddenCount = _p[1];
+    var _q = useState({
         top: 0,
         left: 0,
         width: 0,
-    }), listPosition = _p[0], setListPosition = _p[1];
-    var _q = useState("bottom"), placement = _q[0], setPlacement = _q[1];
+    }), listPosition = _q[0], setListPosition = _q[1];
+    var _r = useState("bottom"), placement = _r[0], setPlacement = _r[1];
     useEffect(function () {
         setSelected((multiple ? selectedItem || [] : selectedItem || ""));
     }, [selectedItem, multiple]);
@@ -207,11 +207,16 @@ function Select(_a, ref) {
             left: "".concat(listPosition.left, "px"),
             width: "".concat(listPosition.width, "px"),
             margin: placement === "bottom" ? "4px 0 0 0" : "0 0 4px 0",
-        } }, items.map(function (item) { return (React.createElement("div", { key: item.value, "data-value": item.value, className: "".concat(styles.selectItem, " ").concat(Array.isArray(selected) && selected.includes(item.value)
-            ? styles.selected
-            : "", " ").concat(!multiple && item.value === selectedItem ? styles.highlighted : "", " ").concat(!multiple ? styles.singleSelect : ""), onClick: function () { return handleSelect(item); } },
-        multiple && React.createElement("span", { className: styles.selectItemIcon }),
-        React.createElement("span", { className: styles.selectItemText }, item.label))); }))); };
+        } }, items.map(function (item) {
+        var isDisabled = disabledItems.includes(item.value);
+        var isSelected = Array.isArray(selected)
+            ? selected.includes(item.value)
+            : item.value === selectedItem;
+        var isHighlighted = !multiple && item.value === selectedItem;
+        return (React.createElement("div", { key: item.value, "data-value": item.value, className: "".concat(styles.selectItem, " ").concat(isSelected ? styles.selected : "", " ").concat(isHighlighted ? styles.highlighted : "", " ").concat(!multiple ? styles.singleSelect : "", " ").concat(isDisabled ? styles.disabledItem : ""), onClick: function () { return !isDisabled && handleSelect(item); }, "aria-disabled": isDisabled },
+            multiple && React.createElement("span", { className: styles.selectItemIcon }),
+            React.createElement("span", { className: styles.selectItemText }, item.label)));
+    }))); };
     var renderTags = function (selectedValues) {
         if (!selectedValues.length)
             return null;

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

@@ -144,6 +144,16 @@
   border-radius: 8px;
 }
 
+.disabledItem {
+  color: var(--mid-grey) !important;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.disabledItem:hover {
+  background: transparent !important;
+}
+
 .tagContainer {
   display: flex;
   flex-wrap: nowrap;

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

@@ -54,20 +54,27 @@ declare namespace _default {
             }
             export { control_6 as control };
         }
+        namespace disabledItems {
+            export namespace control_7 {
+                let type_7: string;
+                export { type_7 as type };
+            }
+            export { control_7 as control };
+        }
         namespace onChange {
             namespace table {
                 let disable: boolean;
             }
         }
         namespace width {
-            export namespace control_7 {
-                let type_7: string;
-                export { type_7 as type };
+            export namespace control_8 {
+                let type_8: string;
+                export { type_8 as type };
                 let min_1: number;
                 export { min_1 as min };
                 export let max: number;
             }
-            export { control_7 as control };
+            export { control_8 as control };
         }
     }
     export namespace parameters {
@@ -100,4 +107,6 @@ export const Multiple: any;
 export const Required: any;
 export const CustomWidth: any;
 export const RequireAttention: any;
+export const WithDisabledItems: any;
+export const MultipleWithDisabledItems: any;
 import Select from "./Select";

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

@@ -56,6 +56,11 @@ export default {
                 min: 1,
             },
         },
+        disabledItems: {
+            control: {
+                type: "array",
+            },
+        },
         onChange: {
             table: {
                 disable: true,
@@ -185,3 +190,40 @@ RequireAttention.args = {
     requireAttention: true,
     width: 100,
 };
+export var WithDisabledItems = Template.bind({});
+WithDisabledItems.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: "Sélectionner une option...",
+    multiple: false,
+    isRequired: false,
+    requireAttention: false,
+    disabledItems: ["mardi-13-aout", "jeudi-15-aout"],
+    width: 100,
+};
+export var MultipleWithDisabledItems = Template.bind({});
+MultipleWithDisabledItems.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: "Sélectionner des options...",
+    multiple: true,
+    isRequired: false,
+    requireAttention: false,
+    disabledItems: ["mardi-13-aout", "vendredi-16-aout"],
+    maxItems: 4,
+    width: 100,
+};

package/dist/components/molecules/caseCard/CaseCard.css

@@ -10,25 +10,40 @@
   justify-content: space-between;
   align-items: flex-start;
   flex-shrink: 0;
-  border-radius: 8px;
-  background: var(--Primary-Blanc, #fff);
-  box-shadow: 0px 1px 9px 0px rgba(15, 133, 168, 0.08);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.18);
+  box-shadow: 0 2px 8px 0 rgba(37, 190, 235, 0.07), 0 1px 3px 0 rgba(114, 142, 167, 0.04);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all 0.18s cubic-bezier(0.4, 0.2, 0.2, 1);
   width: 100%;
-  border: 2px solid var(--grey-venom, #e6edf5);
-  /* border: 1px solid var(-grey-venom, #e6edf5); */
+  border: 1px solid rgba(200, 220, 235, 0.25);
+  backdrop-filter: blur(6px) saturate(140%);
+  -webkit-backdrop-filter: blur(6px) saturate(140%);
+  position: relative;
+  overflow: hidden;
+}
+
+.case-card-wrapper::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 18px;
+  pointer-events: none;
+  border: 1px solid rgba(255,255,255,0.10);
+  z-index: 1;
 }
 
 .case-card-wrapper:hover {
-  box-shadow: 0px 4px 12px rgba(15, 133, 168, 0.12);
-  transform: scale(1.01);
-  border: 2px solid var(--bleu-allaw, #25beeb);
+  box-shadow: 0 6px 18px 0 rgba(37, 190, 235, 0.13), 0 2px 8px 0 rgba(114, 142, 167, 0.08);
+  transform: scale(1.01) translateY(-2px);
+  border: 1.5px solid var(--bleu-allaw, #25beeb);
+  background: rgba(255,255,255,0.28);
 }
 
 .case-card-wrapper:active {
-  transform: scale(1.015);
-  background-color: var(--grey-light), #f6fcfe;
+  transform: scale(1.01);
+  background: rgba(246, 252, 254, 0.45);
+  border: 1.5px solid var(--bleu-allaw, #25beeb);
 }
 
 .case-card-wrapper.case-card-mobile,
@@ -44,6 +59,8 @@
   align-self: stretch;
   width: calc(100% - 100px);
   overflow: hidden;
+  position: relative;
+  z-index: 2;
 }
 
 .case-card-header {
@@ -56,12 +73,13 @@
 }
 
 .case-card-client-name {
-  color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
+  color: var(--mid-grey, #728ea7);
   font-family: "Open Sans", sans-serif;
   font-size: 12px;
   font-weight: 400;
   line-height: 15px;
   letter-spacing: 0.3px;
+  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
 }
 
 .case-card-title {
@@ -69,14 +87,15 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--dark-grey, #171e25);
+  color: var(--noir, #171e25);
   font-family: Inter, sans-serif;
-  font-size: 17px;
-  font-weight: 600;
+  font-size: 18px;
+  font-weight: 700;
   line-height: 1.2;
   letter-spacing: 0.1px;
   padding-top: 4px;
   margin: 0;
+  text-shadow: 0 1px 2px rgba(255,255,255,0.4);
 }
 
 .case-card-title.closed {
@@ -91,27 +110,28 @@
   height: 100%;
   min-width: 100px;
   flex-shrink: 0;
+  position: relative;
+  z-index: 2;
 }
 
 .case-card-next-appointment-label {
-  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  color: var(--dark-grey, #456073);
   font-family: "Open Sans", sans-serif;
   font-size: 12px;
   font-weight: 400;
   line-height: normal;
   letter-spacing: 0.12px;
+  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
 }
 
 .case-card-categories {
   display: flex;
   gap: 8px;
-  /* margin-top: 8px; */
   margin-top: 16px;
-  /* background-color: red; */
 }
 
 .case-card-mobile .case-card-next-appointment-label {
-  color: var(--Primary-Dark-grey, var(--dark-grey, #456073));
+  color: var(--dark-grey, #456073);
 }
 
 .case-card-archived .case-card-next-appointment {
@@ -119,7 +139,8 @@
 }
 
 .case-card-progress-bar {
-  /* background-color: lightgray; */
   width: 100%;
   margin-left: -10px;
+  margin-bottom: 2px;
+  z-index: 2;
 }

package/package.json

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