kelt-ui-kit-react 2.0.3 → 2.0.4

package/src/card/card.css

@@ -19,12 +19,9 @@
     bottom: 0;
     pointer-events: none;
   }
-
-  .bi-three-dots-vertical,
-  .bi-filter {
+  .bi-three-dots-vertical {
     display: none;
   }
-
   .card-custom-action {
     display: flex;
     flex: 1;
@@ -35,25 +32,21 @@
   .bi-trash3 {
     font-size: 1rem;
   }
-
   .card-text {
     width: 100%;
   }
-
   .card-footer {
     display: flex;
     flex: 1;
     align-items: center;
     justify-content: space-between;
   }
-
   &.card--horizontal {
     display: flex;
     flex-direction: row;
     align-items: center;
     min-height: 56px;
     max-width: initial;
-
     .card-img {
       margin-right: 0.5rem;
     }
@@ -67,19 +60,16 @@
       width: calc(100% - 20px);
       margin-bottom: 1rem;
     }
-
     .card-action {
       position: absolute;
       right: 10px;
       top: 10px;
     }
-
     .card-prix {
       flex: 1;
       display: flex;
       justify-content: flex-end;
-    }
-  }
+    }  }
 
   &:not(.card--horizontal) {
     .card-title {
@@ -96,65 +86,54 @@
   }
 
   .card-title {
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 600;
   }
 
   .card-content {
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 400;
     display: none;
   }
 }
-
-@container (min-width: 992px) {
+@container app-container (min-width: 992px) {
   .card {
     .card-custom-action {
       justify-content: end;
     }
-
-    .bi-three-dots-vertical,
-    .bi-filter {
+    .bi-three-dots-vertical {
       display: block;
     }
-
     .bi-three-dots {
       display: none;
     }
-
     &.card--horizontal {
       .card-actions {
         margin-left: 0.5rem;
       }
-
       .card-footer {
         display: flex;
         flex: 1;
         justify-content: space-between;
       }
-
       .card-text {
         width: 300px;
         display: flex;
         align-items: center;
       }
-
       .card-content {
         display: flex;
       }
-
       .card-title {
         min-width: auto;
         width: auto;
         margin-right: 1rem;
         margin-bottom: 0;
       }
-
       .card-prix {
         flex: inherit;
         min-width: auto;
       }
-
       .card-action {
         position: relative;
         right: initial;
@@ -162,4 +141,4 @@
       }
     }
   }
-}
+}

package/src/card/cardAction/CardAction.tsx

@@ -36,7 +36,7 @@ export const CardAction = ({
     setCoords?: (coords: { top: number; left: number }) => void;
   }>(null);
   const [position, setPosition] = useState<PositionOverlay | undefined>(
-    positionOverlay,
+    positionOverlay
   );
   const refButton = useRef<HTMLDivElement>(null);
   const [openOverlay, setOpenOverlay] = useState(openActions ?? false);
@@ -56,7 +56,7 @@ export const CardAction = ({
         setOpenActions(openOverlay);
       }
     },
-    [setPosition, setOpenActions],
+    [setPosition, setOpenActions]
   );
 
   const closeOverlay = useCallback(() => {
@@ -107,11 +107,11 @@ export const CardAction = ({
       >
         <Icon
           size={IconSizeEnum.MEDIUM}
-          classIcon={"bi-filter cursor-pointer"}
+          classIcon={"bi-three-dots-vertical cursor-pointer"}
         />
         <Icon
           size={IconSizeEnum.MEDIUM}
-          classIcon={"bi-filter cursor-pointer"}
+          classIcon={"bi-three-dots cursor-pointer"}
         />
       </div>
 

package/src/damier/Damier.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { CSSProperties, useEffect, useMemo, useState } from "react";
 import "./damier.css";
 import { DamierCell } from "./damierCell/DamierCell";
 import { DamierCellInterface } from "./damierCell/damierCell.interface";
@@ -17,7 +17,7 @@ export const Damier = ({
   onClick,
 }: DamierProps) => {
   const nbCols = useMemo(() => cols ?? 9, [cols]);
-  const nbRows = useMemo(() => rows ?? 9, [rows]);
+  const nbRows = useMemo(() => Math.max(1, rows ?? 9), [rows]);
   const [currentPage, setCurrentPage] = useState(1);
   useEffect(() => {
     setCurrentPage(page);
@@ -30,26 +30,35 @@ export const Damier = ({
       for (let col = 0; col < nbCols; col++) {
         const position = col + row * nbCols;
         const cell = damierCells?.find(
-          (cell) => cell.position === position + 1
+          (cell) => cell.position === position + 1,
         );
         if (!cell) {
           colsArray.push(
-            <div key={`${row}-${col}`} className="cell cell--empty"></div>
+            <div key={`${row}-${col}`} className="cell cell--empty"></div>,
           );
         } else {
           colsArray.push(
-            <DamierCell onClick={onClick} key={`${row}-${col}`} cell={cell} />
+            <DamierCell onClick={onClick} key={`${row}-${col}`} cell={cell} />,
           );
         }
       }
       rowsArray.push(
         <div key={row} className="row">
           {colsArray}
-        </div>
+        </div>,
       );
     }
     return rowsArray;
   }, [nbCols, nbRows, currentPage]);
 
-  return <div className="damier">{grid}</div>;
+  const damierStyle = useMemo(
+    () => ({ "--rows": String(nbRows) }) as CSSProperties,
+    [nbRows],
+  );
+
+  return (
+    <div className="damier" style={damierStyle}>
+      {grid}
+    </div>
+  );
 };

package/src/damier/damier.css

@@ -5,14 +5,17 @@
   margin-bottom: 1rem;
   width: 100%;
   --sizeDamier: 630;
+  --rows: 9;
+
   .row {
     display: flex;
     height: 90px;
-    width: calc(var(--sizeDamier) / 9);
+    width: calc(var(--sizeDamier) / var(--rows));
     min-height: 40px;
   }
 
   .cell {
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
     overflow: hidden;
@@ -22,9 +25,11 @@
     align-items: center;
     justify-content: center;
     background-color: #fff;
+
     &.cell--empty {
       background: #f9f9f9;
     }
+
     &:not(.cell--empty) {
       cursor: pointer;
     }
@@ -34,11 +39,13 @@
 @media (min-width: 768px) {
   .damier {
     --sizeDamier: 990;
+
     .row {
-      height: calc(100vh / 9.6);
+      height: calc((100vh - var(--damier-offset, 0px)) / var(--rows));
     }
+
     .cell {
-      height: calc(100vh / 9) - 1;
+      height: calc((100vh - var(--damier-offset, 0px)) / var(--rows));
     }
   }
-}
+}