kelt-ui-kit-react 2.0.8 → 2.0.9

package/src/addressSearch/AddressSearch.view.tsx

@@ -1,52 +1,52 @@
-import { useMemo } from "react";
-import { DynamicForm } from "../form/Form";
-import { TypeInputEnum } from "../form/form.enum";
-import { FormInterface } from "../form/form.interface";
-
-export const AddressSearchView = () => {
-    const fields = useMemo<FormInterface[]>(
-        () => [
-            {
-                name: "adresse1",
-                label: "Adresse",
-                type: TypeInputEnum.ADDRESS,
-                value: "",
-                col: { xs: 12, md: 6 },
-                addressSearch: {
-                    mapAddress: (address) => ({
-                        adresse1: address.addressLine,
-                        codePostal: address.postalCode,
-                        ville: address.city,
-                        paysIso2: address.countryCode,
-                    }),
-                },
-            },
-            {
-                name: "codePostal",
-                label: "Code postal",
-                type: TypeInputEnum.TEXT,
-                value: "",
-                col: { xs: 12, md: 6 },
-            },
-            {
-                name: "ville",
-                label: "Ville",
-                type: TypeInputEnum.TEXT,
-                value: "",
-                col: { xs: 12, md: 6 },
-            },
-            {
-                name: "paysIso2",
-                label: "Pays",
-                type: TypeInputEnum.TEXT,
-                value: "FR",
-                col: { xs: 12, md: 6 },
-            },
-        ],
-        [],
-    );
-
-    return (
-        <DynamicForm initialForm={fields} hideSubmit />
-    );
-};
+import { useMemo } from "react";
+import { DynamicForm } from "../form/Form";
+import { TypeInputEnum } from "../form/form.enum";
+import { FormInterface } from "../form/form.interface";
+
+export const AddressSearchView = () => {
+    const fields = useMemo<FormInterface[]>(
+        () => [
+            {
+                name: "adresse1",
+                label: "Adresse",
+                type: TypeInputEnum.ADDRESS,
+                value: "",
+                col: { xs: 12, md: 6 },
+                addressSearch: {
+                    mapAddress: (address) => ({
+                        adresse1: address.addressLine,
+                        codePostal: address.postalCode,
+                        ville: address.city,
+                        paysIso2: address.countryCode,
+                    }),
+                },
+            },
+            {
+                name: "codePostal",
+                label: "Code postal",
+                type: TypeInputEnum.TEXT,
+                value: "",
+                col: { xs: 12, md: 6 },
+            },
+            {
+                name: "ville",
+                label: "Ville",
+                type: TypeInputEnum.TEXT,
+                value: "",
+                col: { xs: 12, md: 6 },
+            },
+            {
+                name: "paysIso2",
+                label: "Pays",
+                type: TypeInputEnum.TEXT,
+                value: "FR",
+                col: { xs: 12, md: 6 },
+            },
+        ],
+        [],
+    );
+
+    return (
+        <DynamicForm initialForm={fields} hideSubmit />
+    );
+};

package/src/addressSearch/addressSearch.css

@@ -1,133 +1,133 @@
-.address-search {
-    position: relative;
-    width: 100%;
-
-    >label {
-        display: block;
-        padding-bottom: 0.15rem;
-        font-size: 0.85rem;
-        font-weight: 600;
-    }
-}
-
-.address-search-input {
-    position: relative;
-    display: flex;
-    align-items: center;
-
-    >.bi {
-        position: absolute;
-        left: 0.75rem;
-        z-index: 1;
-        color: var(--primary-color);
-    }
-
-    >input {
-        box-sizing: border-box;
-        width: 100%;
-        min-width: 0;
-        padding-left: 2.25rem;
-        padding-right: 2.25rem;
-    }
-}
-
-.address-search-spinner {
-    position: absolute;
-    right: 0.75rem;
-    width: 0.9rem;
-    height: 0.9rem;
-    border: 2px solid #dedede;
-    border-top-color: var(--primary-color);
-    border-radius: 50%;
-    animation: address-search-spin 0.7s linear infinite;
-}
-
-.address-search-results {
-    position: absolute;
-    top: calc(100% + 0.25rem);
-    right: 0;
-    left: 0;
-    z-index: 20;
-    overflow: hidden;
-    border: 1px solid #cfbdbd;
-    border-radius: 4px;
-    background: #fff;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
-
-    [role="listbox"] {
-        max-height: 15rem;
-        overflow-y: auto;
-    }
-
-    [role="listbox"]>button {
-        display: flex;
-        width: 100%;
-        min-width: 0;
-        max-height: none;
-        margin: 0;
-        padding: 0.65rem 0.75rem;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.2rem;
-        border: 0;
-        border-bottom: 1px solid #ece8e8;
-        border-radius: 0;
-        background: #fff;
-        color: inherit;
-        font-size: 0.85rem;
-        line-height: 1.3;
-        text-align: left;
-        overflow-wrap: anywhere;
-        cursor: pointer;
-
-        &:last-child {
-            border-bottom: 0;
-        }
-
-        &:hover,
-        &.active {
-            background: color-mix(in srgb, var(--primary-color), white 92%);
-        }
-
-        >small {
-            color: #686868;
-        }
-    }
-}
-
-.address-search-manual {
-    display: flex;
-    width: 100%;
-    min-width: 0;
-    max-height: none;
-    margin: 0;
-    padding: 0.65rem 0.75rem;
-    align-items: center;
-    gap: 0.5rem;
-    border: 0;
-    border-top: 1px solid #dedede;
-    border-radius: 0;
-    background: #fff;
-    color: var(--primary-color);
-    font-size: 0.85rem;
-    font-weight: 600;
-    text-align: left;
-    cursor: pointer;
-
-    &:hover,
-    &:focus-visible {
-        background: color-mix(in srgb, var(--primary-color), white 92%);
-    }
-}
-
-.address-search-status {
-    padding: 0.75rem;
-    color: #686868;
-    font-size: 0.85rem;
-}
-
-@keyframes address-search-spin {
-    to {
-        transform: rotate(360deg);
-    }
+.address-search {
+    position: relative;
+    width: 100%;
+
+    >label {
+        display: block;
+        padding-bottom: 0.15rem;
+        font-size: 0.85rem;
+        font-weight: 600;
+    }
+}
+
+.address-search-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    >.bi {
+        position: absolute;
+        left: 0.75rem;
+        z-index: 1;
+        color: var(--primary-color);
+    }
+
+    >input {
+        box-sizing: border-box;
+        width: 100%;
+        min-width: 0;
+        padding-left: 2.25rem;
+        padding-right: 2.25rem;
+    }
+}
+
+.address-search-spinner {
+    position: absolute;
+    right: 0.75rem;
+    width: 0.9rem;
+    height: 0.9rem;
+    border: 2px solid #dedede;
+    border-top-color: var(--primary-color);
+    border-radius: 50%;
+    animation: address-search-spin 0.7s linear infinite;
+}
+
+.address-search-results {
+    position: absolute;
+    top: calc(100% + 0.25rem);
+    right: 0;
+    left: 0;
+    z-index: 20;
+    overflow: hidden;
+    border: 1px solid #cfbdbd;
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
+
+    [role="listbox"] {
+        max-height: 15rem;
+        overflow-y: auto;
+    }
+
+    [role="listbox"]>button {
+        display: flex;
+        width: 100%;
+        min-width: 0;
+        max-height: none;
+        margin: 0;
+        padding: 0.65rem 0.75rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.2rem;
+        border: 0;
+        border-bottom: 1px solid #ece8e8;
+        border-radius: 0;
+        background: #fff;
+        color: inherit;
+        font-size: 0.85rem;
+        line-height: 1.3;
+        text-align: left;
+        overflow-wrap: anywhere;
+        cursor: pointer;
+
+        &:last-child {
+            border-bottom: 0;
+        }
+
+        &:hover,
+        &.active {
+            background: color-mix(in srgb, var(--primary-color), white 92%);
+        }
+
+        >small {
+            color: #686868;
+        }
+    }
+}
+
+.address-search-manual {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    max-height: none;
+    margin: 0;
+    padding: 0.65rem 0.75rem;
+    align-items: center;
+    gap: 0.5rem;
+    border: 0;
+    border-top: 1px solid #dedede;
+    border-radius: 0;
+    background: #fff;
+    color: var(--primary-color);
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover,
+    &:focus-visible {
+        background: color-mix(in srgb, var(--primary-color), white 92%);
+    }
+}
+
+.address-search-status {
+    padding: 0.75rem;
+    color: #686868;
+    font-size: 0.85rem;
+}
+
+@keyframes address-search-spin {
+    to {
+        transform: rotate(360deg);
+    }
 }

package/src/badge/Badge.tsx

@@ -1,34 +1,41 @@
-import { useCallback } from "react";
-import { Icon } from "../icon/Icon";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-import "./badge.css";
-export type BadgeInterface = {
-  className?: string;
-  onClick?: (e: React.MouseEvent) => void;
-  title?: string;
-  sizeIcon?: IconSizeEnum;
-  classIcon?: string;
-};
-export const Badge = ({
-  className,
-  onClick,
-  title,
-  sizeIcon,
-  classIcon,
-}: BadgeInterface) => {
-  const handleClick = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (onClick) {
-      onClick(e);
-    }
-  }, []);
-  return (
-    <div
-      onClick={handleClick}
-      className={`badge ${className ? className : ""}`}
-    >
-      {classIcon && <Icon size={sizeIcon} classIcon={classIcon}></Icon>}
-      <span>{title}</span>
-    </div>
-  );
-};
+import { useCallback } from "react";
+import { Icon } from "../icon/Icon";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import "./badge.css";
+export type BadgeInterface = {
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  title?: string;
+  sizeIcon?: IconSizeEnum;
+  classIcon?: string;
+  color?: string;
+  onRemove?: (event: React.MouseEvent) => void;
+};
+export const Badge = ({
+  className,
+  onClick,
+  title,
+  sizeIcon,
+  classIcon,
+  color,
+  onRemove,
+}: BadgeInterface) => {
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onClick) {
+      onClick(e);
+    }
+  }, [onClick]);
+  return (
+    <div
+      onClick={handleClick}
+      style={color ? { backgroundColor: color } : undefined}
+      className={`badge ${className ? className : ""}`}
+    >
+      {classIcon && <Icon size={sizeIcon} classIcon={classIcon}></Icon>}
+      <span>{title}</span>
+      {onRemove && <button type="button" className="badge-remove" aria-label={`Retirer ${title ?? "le filtre"}`}
+        onClick={(event) => { event.stopPropagation(); onRemove(event); }}><Icon classIcon="bi-x" /></button>}
+    </div>
+  );
+};

package/src/badge/Badge.view.tsx

@@ -1,15 +1,15 @@
-import { Badge } from "./Badge";
-
-export const BadgeView = (): JSX.Element => {
-  return (
-    <>
-      <Badge
-        className="badge--primary"
-        title="Badge"
-        sizeIcon={undefined}
-        classIcon="bi-check-circle"
-        onClick={() => console.log("Badge clicked")}
-      />
-    </>
-  );
-};
+import { Badge } from "./Badge";
+
+export const BadgeView = (): JSX.Element => {
+  return (
+    <>
+      <Badge
+        className="badge--primary"
+        title="Badge"
+        sizeIcon={undefined}
+        classIcon="bi-check-circle"
+        onClick={() => console.log("Badge clicked")}
+      />
+    </>
+  );
+};

package/src/badge/badge.css

@@ -1,55 +1,63 @@
-.badge {
-  display: flex;
-  align-items: center;
-  padding: 0.25em 0.4em;
-  font-size: 0.5rem;
-  font-weight: 700;
-  line-height: 1;
-  color: #fff;
-  width: fit-content;
-  text-transform: uppercase;
-  border-radius: 0.2rem;
-  background-color: #007bff;
-  border: 1px solid transparent;
-  .bi {
-    font-size: 0.8rem;
-    margin-right: 0.25rem;
-  }
-  &.badge-primary {
-    background-color: var(--primary-color);
-    border-color: var(--primary-color);
-  }
-  &.badge-secondary {
-    background-color: var(--secondary-color);
-    border-color: var(--secondary-color);
-  }
-  &.badge-success {
-    background-color: #28a745;
-    border-color: #28a745;
-  }
-  &.badge-danger {
-    background-color: #dc3545;
-    border-color: #dc3545;
-  }
-  &.badge-warning {
-    background-color: #ffc107;
-    border-color: #ffc107;
-  }
-  &.badge-info {
-    background-color: #17a2b8;
-    border-color: #17a2b8;
-  }
-  &.badge-light {
-    background-color: #f8f9fa;
-    border-color: #f8f9fa;
-    color: #212529;
-  }
-  &.badge-dark {
-    background-color: #343a40;
-    border-color: #343a40;
-  }
-  &.badge-link {
-    color: #007bff;
-    text-decoration: none;
-  }
-}
+.badge {
+  display: flex;
+  align-items: center;
+  padding: 0.25em 0.4em;
+  font-size: 0.5rem;
+  font-weight: 700;
+  line-height: 1;
+  color: #fff;
+  width: fit-content;
+  text-transform: uppercase;
+  border-radius: 0.2rem;
+  background-color: #007bff;
+  border: 1px solid transparent;
+  .bi {
+    font-size: 0.8rem;
+    margin-right: 0.25rem;
+  }
+  &.badge-primary {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+  }
+  &.badge-secondary {
+    background-color: var(--secondary-color);
+    border-color: var(--secondary-color);
+  }
+  &.badge-success {
+    background-color: #28a745;
+    border-color: #28a745;
+  }
+  &.badge-danger {
+    background-color: #dc3545;
+    border-color: #dc3545;
+  }
+  &.badge-warning {
+    background-color: #ffc107;
+    border-color: #ffc107;
+  }
+  &.badge-info {
+    background-color: #17a2b8;
+    border-color: #17a2b8;
+  }
+  &.badge-light {
+    background-color: #f8f9fa;
+    border-color: #f8f9fa;
+    color: #212529;
+  }
+  &.badge-dark {
+    background-color: #343a40;
+    border-color: #343a40;
+  }
+  &.badge-link {
+    color: #007bff;
+    text-decoration: none;
+  }
+}
+.badge .badge-remove {
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  display: inline-flex;
+}