@axa-fr/design-system-slash-react 1.2.1-alpha.106 → 1.2.1-alpha.109

package/dist/Layout/Header/Infos/Infos.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
+import infoIcon from "@material-symbols/svg-400/outlined/info-fill.svg";
 import { getComponentClassName } from "../../../utilities";
 import { generateId } from "../../../utilities/helpers/generateId";
 import "@axa-fr/design-system-slash-css/dist/Layout/Header/Infos/Infos.scss";
+import { Svg } from "../../../Svg";
 const defaultClassName = "af-contrat";
 const Infos = ({ infos, className, classModifier }) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
-    return (_jsxs("div", { className: componentClassName, children: [_jsx("i", { className: "glyphicon glyphicon-info-sign" }), _jsx("dl", { className: `${defaultClassName}__list`, children: infos.map((info) => {
+    return (_jsxs("div", { className: componentClassName, children: [_jsx(Svg, { className: "af-contrat__icon", src: infoIcon, "aria-hidden": "true" }), _jsx("dl", { className: `${defaultClassName}__list`, children: infos.map((info) => {
                     const idTerm = info.id ?? `info-${generateId(info)}`;
                     return (_jsxs(Fragment, { children: [_jsx("dt", { id: idTerm, className: `${defaultClassName}__word`, children: info.word }), _jsx("dd", { className: `${defaultClassName}__def`, "aria-labelledby": idTerm, children: info.definition })] }, idTerm));
                 }) })] }));

package/dist/Table/Pagination/Items.d.ts

@@ -7,7 +7,7 @@ export type Props = {
      */
     displayLabel?: string;
     /**
-     * Text displayed after the per-page select
+     * Text displayed after the per-page select and used in page selection links label
      */
     elementsLabel?: string;
     /**

package/dist/Table/Pagination/Li.d.ts

@@ -2,9 +2,10 @@ type LiProps = {
     isVisible?: boolean;
     active?: boolean;
     value: number;
+    pageLinkLabel: string;
     onChange: (e: {
         value: number;
     }) => void;
 };
-declare const Li: ({ isVisible, active, value, ...props }: LiProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const Li: ({ isVisible, active, value, pageLinkLabel, onChange }: LiProps) => import("react/jsx-runtime").JSX.Element | null;
 export { Li };

package/dist/Table/Pagination/Li.js

@@ -5,10 +5,10 @@ const onClick = ({ onChange, value }) => (event) => {
         value: Number(value),
     });
 };
-const Li = ({ isVisible, active, value, ...props }) => {
+const Li = ({ isVisible, active, value, pageLinkLabel, onChange }) => {
     if (!isVisible) {
         return null;
     }
-    return (_jsx("li", { className: "af-pager__item", children: _jsx("a", { "aria-current": active ? "page" : undefined, className: "af-pager__item-link", href: "/#", onClick: onClick({ ...props, value }), children: _jsx("span", { children: value }) }) }));
+    return (_jsx("li", { className: "af-pager__item", children: _jsx("a", { "aria-current": active ? "page" : undefined, className: "af-pager__item-link", href: "/#", "aria-label": `Page ${value} des ${pageLinkLabel}`, onClick: onClick({ onChange, value }), children: _jsx("span", { children: value }) }) }));
 };
 export { Li };

package/dist/Table/Pagination/Pager.d.ts

@@ -27,11 +27,15 @@ export type PagerComponentProps = Pick<ComponentPropsWithoutRef<typeof Paginatio
      * Label for the next button
      */
     nextLabel?: string;
+    /**
+     * Label for page links and select
+     */
+    elementsLabel?: string;
     /**
      * Label for text betweeen current page a total number of pages. Only used in "light" mode
      * @default "sur"
      */
     ofLabel?: string;
 };
-declare const Pager: ({ className, classModifier, numberPages, currentPage, onChange, mode, previousLabel, nextLabel, ofLabel, }: PagerComponentProps) => import("react/jsx-runtime").JSX.Element;
+declare const Pager: ({ className, classModifier, numberPages, currentPage, onChange, mode, previousLabel, nextLabel, elementsLabel, ofLabel, }: PagerComponentProps) => import("react/jsx-runtime").JSX.Element;
 export { Pager };

package/dist/Table/Pagination/Pager.js

@@ -4,13 +4,13 @@ import { getComponentClassName } from "../..";
 import { Li } from "./Li";
 import { LiPoint } from "./LiPoint";
 import { PaginationButton } from "./PaginationButton";
-const Pager = ({ className, classModifier, numberPages = 1, currentPage = 1, onChange, mode = "default", previousLabel = "« Précédent", nextLabel = "Suivant »", ofLabel = "sur", }) => {
+const Pager = ({ className, classModifier, numberPages = 1, currentPage = 1, onChange, mode = "default", previousLabel = "« Précédent", nextLabel = "Suivant »", elementsLabel = "éléments", ofLabel = "sur", }) => {
     const hasNext = currentPage < numberPages;
     const hasPrevious = currentPage > 1;
     const componentClassName = getComponentClassName(className, classModifier, "af-pager");
     if (mode === "light") {
-        return (_jsx("nav", { className: componentClassName, children: _jsxs("ul", { className: "af-pager__pagination", children: [_jsx(PaginationButton, { onChange: onChange, value: currentPage - 1, active: hasPrevious, isVisible: true, children: _jsx("i", { className: "glyphicon glyphicon-chevron-left", "aria-hidden": "true" }) }), _jsxs(LiPoint, { isVisible: true, children: [currentPage, " ", ofLabel, " ", numberPages] }), _jsx(PaginationButton, { onChange: onChange, value: currentPage + 1, active: hasNext, isVisible: true, children: _jsx("i", { className: "glyphicon glyphicon-chevron-right", "aria-hidden": "true" }) })] }) }));
+        return (_jsx("nav", { className: componentClassName, children: _jsxs("ul", { className: "af-pager__pagination", children: [_jsx(PaginationButton, { onChange: onChange, value: currentPage - 1, active: hasPrevious, isVisible: true, ariaLabel: `Page précédente des ${elementsLabel}`, children: _jsx("i", { className: "glyphicon glyphicon-chevron-left", "aria-hidden": "true" }) }), _jsxs(LiPoint, { isVisible: true, children: [currentPage, " ", ofLabel, " ", numberPages] }), _jsx(PaginationButton, { onChange: onChange, value: currentPage + 1, active: hasNext, isVisible: true, ariaLabel: `Page suivante des ${elementsLabel}`, children: _jsx("i", { className: "glyphicon glyphicon-chevron-right", "aria-hidden": "true" }) })] }) }));
     }
-    return (_jsx("nav", { className: componentClassName, children: _jsxs("ul", { className: "af-pager__pagination", children: [_jsx(PaginationButton, { onChange: onChange, value: currentPage - 1, active: hasPrevious, isVisible: true, children: previousLabel }), _jsx(Li, { onChange: onChange, value: 1, isVisible: numberPages > 1 && currentPage > 1 }), _jsx(LiPoint, { isVisible: currentPage > 3, children: "..." }), _jsx(Li, { onChange: onChange, value: currentPage - 1, isVisible: numberPages > 2 && currentPage > 2 }), _jsx(Li, { onChange: onChange, value: currentPage, active: true, isVisible: numberPages > 0 }), _jsx(Li, { onChange: onChange, value: currentPage + 1, isVisible: currentPage < numberPages - 1 }), _jsx(LiPoint, { isVisible: currentPage < numberPages - 2, children: "..." }), _jsx(Li, { onChange: onChange, value: numberPages, isVisible: currentPage < numberPages }), _jsx(PaginationButton, { onChange: onChange, value: currentPage + 1, active: hasNext, isVisible: true, children: nextLabel })] }) }));
+    return (_jsx("nav", { className: componentClassName, children: _jsxs("ul", { className: "af-pager__pagination", children: [_jsx(PaginationButton, { onChange: onChange, value: currentPage - 1, active: hasPrevious, isVisible: true, ariaLabel: `Page précédente des ${elementsLabel}`, children: previousLabel }), _jsx(Li, { onChange: onChange, value: 1, isVisible: numberPages > 1 && currentPage > 1, pageLinkLabel: elementsLabel }), _jsx(LiPoint, { isVisible: currentPage > 3, children: "..." }), _jsx(Li, { onChange: onChange, value: currentPage - 1, isVisible: numberPages > 2 && currentPage > 2, pageLinkLabel: elementsLabel }), _jsx(Li, { onChange: onChange, value: currentPage, active: true, isVisible: numberPages > 0, pageLinkLabel: elementsLabel }), _jsx(Li, { onChange: onChange, value: currentPage + 1, isVisible: currentPage < numberPages - 1, pageLinkLabel: elementsLabel }), _jsx(LiPoint, { isVisible: currentPage < numberPages - 2, children: "..." }), _jsx(Li, { onChange: onChange, value: numberPages, isVisible: currentPage < numberPages, pageLinkLabel: elementsLabel }), _jsx(PaginationButton, { onChange: onChange, value: currentPage + 1, active: hasNext, isVisible: true, ariaLabel: `Page suivante des ${elementsLabel}`, children: nextLabel })] }) }));
 };
 export { Pager };

package/dist/Table/Pagination/PaginationButton.d.ts

@@ -7,6 +7,7 @@ type PaginationButtonProps = {
     onChange: (e: {
         value: number;
     }) => void;
+    ariaLabel: string;
 };
-declare const PaginationButton: ({ isVisible, active, children, value, onChange, }: PaginationButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const PaginationButton: ({ isVisible, active, children, value, onChange, ariaLabel, }: PaginationButtonProps) => import("react/jsx-runtime").JSX.Element | null;
 export { PaginationButton };

package/dist/Table/Pagination/PaginationButton.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const PaginationButton = ({ isVisible, active, children, value, onChange, }) => {
+const PaginationButton = ({ isVisible, active, children, value, onChange, ariaLabel, }) => {
     if (!isVisible) {
         return null;
     }
     if (active) {
-        return (_jsx("li", { className: "af-pager__item", children: _jsx("a", { className: "af-pager__item-link", href: "/#", role: "button", onClick: (e) => {
+        return (_jsx("li", { className: "af-pager__item", children: _jsx("a", { className: "af-pager__item-link", href: "/#", role: "button", "aria-label": ariaLabel, onClick: (e) => {
                     e.preventDefault();
                     onChange({ value });
                 }, children: children }) }));

package/dist/Table/Pagination/Paging.d.ts

@@ -9,6 +9,7 @@ type OnChangePager = (e: {
 }) => void;
 export type Props = Omit<PagingComponentProps, "onChange"> & {
     onChange?: OnChangePager;
+    selectPageSizeLabel?: string;
 };
-declare const Paging: ({ className, classModifier, currentPage, displayLabel, selectAriaLabel, elementsLabel, id, mode, nextLabel, numberItems, numberPages, ofLabel, previousLabel, items, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Paging: ({ className, classModifier, currentPage, displayLabel, elementsLabel, selectPageSizeLabel, id, mode, nextLabel, numberItems, numberPages, ofLabel, previousLabel, items, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
 export { Paging };

package/dist/Table/Pagination/Paging.js

@@ -4,7 +4,7 @@ import { useCallback } from "react";
 import { getComponentClassName } from "../..";
 import { Items } from "./Items";
 import { Pager } from "./Pager";
-const Paging = ({ className, classModifier, currentPage = 1, displayLabel, selectAriaLabel, elementsLabel, id, mode, nextLabel, numberItems = 10, numberPages, ofLabel, previousLabel, items, onChange, }) => {
+const Paging = ({ className, classModifier, currentPage = 1, displayLabel, elementsLabel, selectPageSizeLabel, id, mode, nextLabel, numberItems = 10, numberPages, ofLabel, previousLabel, items, onChange, }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-paging");
     const handleChangeItems = useCallback((e) => onChange &&
         onChange({
@@ -16,6 +16,6 @@ const Paging = ({ className, classModifier, currentPage = 1, displayLabel, selec
             numberItems,
             page: e.value,
         }), [numberItems, onChange]);
-    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { className: "af-paging__limit", children: _jsx(Items, { onChange: handleChangeItems, numberItems: numberItems, id: id, displayLabel: displayLabel, selectAriaLabel: selectAriaLabel, elementsLabel: elementsLabel, items: items }) }), _jsx("div", { className: "af-paging__pager", children: _jsx(Pager, { onChange: handleChangePager, currentPage: currentPage, numberPages: numberPages, previousLabel: previousLabel, nextLabel: nextLabel, ofLabel: ofLabel, mode: mode }) })] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { className: "af-paging__limit", children: _jsx(Items, { onChange: handleChangeItems, numberItems: numberItems, id: id, displayLabel: displayLabel, selectAriaLabel: selectPageSizeLabel, elementsLabel: elementsLabel, items: items }) }), _jsx("div", { className: "af-paging__pager", children: _jsx(Pager, { onChange: handleChangePager, currentPage: currentPage, numberPages: numberPages, previousLabel: previousLabel, nextLabel: nextLabel, elementsLabel: elementsLabel, ofLabel: ofLabel, mode: mode }) })] }));
 };
 export { Paging };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.2.1-alpha.106",
+  "version": "1.2.1-alpha.109",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "1.2.1-alpha.106",
+    "@axa-fr/design-system-slash-css": "1.2.1-alpha.109",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },