@axa-fr/canopee-react 1.7.1-alpha.29 → 1.7.1-alpha.30

package/dist/distributeur/Timeline/Timeline.d.ts

@@ -0,0 +1,26 @@
+import "@axa-fr/canopee-css/distributeur/Timeline/Timeline.css";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+type TimelineBaseItem = {
+    header: ReactNode;
+    date?: Date;
+};
+export type TimelineItem = TimelineBaseItem & {
+    details: ReactNode;
+};
+export type TimelineItemWithoutDetails = TimelineBaseItem & {
+    details?: ReactNode;
+};
+export type TimelineListItem = TimelineItem | TimelineItemWithoutDetails;
+export type TimelineVariants = "default" | "withoutDetails";
+type TimelineBaseProps = Omit<ComponentPropsWithoutRef<"ol">, "children">;
+type TimelineDefaultProps = TimelineBaseProps & {
+    items: TimelineItem[];
+    variant?: "default";
+};
+type TimelineWithoutDetailsProps = TimelineBaseProps & {
+    items: TimelineItemWithoutDetails[];
+    variant: "withoutDetails";
+};
+export type TimelineProps = TimelineDefaultProps | TimelineWithoutDetailsProps;
+export declare const Timeline: ({ items, variant, className, ...otherProps }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/distributeur/Timeline/Timeline.helpers.d.ts

@@ -0,0 +1,4 @@
+import type { TimelineListItem } from "./Timeline";
+export declare const formatDate: (date?: Date) => string;
+export declare const isDateInFuture: (date?: Date) => boolean;
+export declare const getTimelineItemKey: (item: TimelineListItem) => string;

package/dist/distributeur/Timeline/Timeline.helpers.js

@@ -0,0 +1,21 @@
+export const formatDate = (date) => {
+    if (!date) {
+        return "";
+    }
+    const day = String(date.getUTCDate()).padStart(2, "0");
+    const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+    const year = date.getUTCFullYear();
+    return `${day}/${month}/${year}`;
+};
+export const isDateInFuture = (date) => {
+    if (!date) {
+        return true;
+    }
+    return date > new Date();
+};
+export const getTimelineItemKey = (item) => {
+    const dateKey = item.date ? item.date.toISOString() : "without-date";
+    const headerKey = typeof item.header === "string" ? item.header : "header";
+    const detailsKey = typeof item.details === "string" ? item.details : "details";
+    return `timeline-item-${dateKey}-${headerKey}-${detailsKey}`;
+};

package/dist/distributeur/Timeline/Timeline.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import "@axa-fr/canopee-css/distributeur/Timeline/Timeline.css";
+import { getTimelineItemKey } from "./Timeline.helpers";
+import { TimelineDetails } from "./TimelineDetails";
+import { TimelineCircle } from "./TimelineCircle";
+export const Timeline = ({ items, variant = "default", className, ...otherProps }) => {
+    const isWithoutDetails = variant === "withoutDetails";
+    return (_jsx("ol", { className: classNames("af-timeline", {
+            "af-timeline--single-item": items.length === 1,
+            "af-timeline--without-details": isWithoutDetails,
+        }, className), ...otherProps, children: items.map((item) => (_jsx("li", { className: "af-timeline__item", children: isWithoutDetails ? (_jsxs("div", { className: "af-timeline__without-details", children: [_jsx(TimelineCircle, { date: item.date }), _jsx("div", { className: "af-timeline__without-details-content", children: item.header })] })) : (_jsx(TimelineDetails, { date: item.date, details: item.details, header: item.header })) }, getTimelineItemKey(item)))) }));
+};

package/dist/distributeur/Timeline/TimelineCircle.d.ts

@@ -0,0 +1,5 @@
+type TimelineCircleProps = {
+    date?: Date;
+};
+export declare const TimelineCircle: ({ date }: TimelineCircleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/distributeur/Timeline/TimelineCircle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { isDateInFuture } from "./Timeline.helpers";
+export const TimelineCircle = ({ date }) => {
+    return (_jsx("span", { className: classNames("af-timeline__circle", {
+            "af-timeline__circle--half": isDateInFuture(date),
+        }), role: "presentation" }));
+};

package/dist/distributeur/Timeline/TimelineDetails.d.ts

@@ -0,0 +1,2 @@
+import type { TimelineItem } from "./Timeline";
+export declare const TimelineDetails: ({ header, details, date }: TimelineItem) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Timeline/TimelineDetails.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import keyboardArrowDownIcon from "@material-symbols/svg-400/outlined/keyboard_arrow_down.svg";
+import { useState } from "react";
+import { Svg } from "../Svg";
+import { formatDate } from "./Timeline.helpers";
+import { TimelineCircle } from "./TimelineCircle";
+export const TimelineDetails = ({ header, details, date }) => {
+    const [detailOpen, setDetailOpen] = useState(false);
+    return (_jsxs("details", { className: "af-timeline__details", onToggle: (event) => setDetailOpen(event.currentTarget.open), children: [_jsxs("summary", { className: "af-timeline__summary", children: [_jsx(TimelineCircle, { date: date }), header, _jsx(Svg, { src: keyboardArrowDownIcon, width: 20, height: 20, className: "af-timeline__show-and-hide-icon", "aria-label": `${detailOpen ? "Masquer" : "Devoiler"} le detail de la date ${formatDate(date)}`, role: "img" })] }), _jsxs("div", { className: "af-timeline__results", children: [_jsx("span", { className: "af-timeline__vertical-line" }), _jsx("div", { className: "af-timeline__content", children: details })] })] }));
+};

package/dist/distributeur.d.ts

@@ -63,3 +63,4 @@ export { Loader } from "./distributeur/Loader/Loader";
 export { CardData } from "./distributeur/CardData/CardData";
 export type { CardDataVariant } from "./distributeur/CardData/CardData";
 export { EditorialMessage, type EditorialMessageProps, type EditorialMessageType, } from "./distributeur/EditorialMessage/EditorialMessage";
+export { Timeline, type TimelineProps, type TimelineVariants, } from "./distributeur/Timeline/Timeline";

package/dist/distributeur.js

@@ -55,3 +55,4 @@ export { HelpButton } from "./distributeur/HelpButton";
 export { Loader } from "./distributeur/Loader/Loader";
 export { CardData } from "./distributeur/CardData/CardData";
 export { EditorialMessage, } from "./distributeur/EditorialMessage/EditorialMessage";
+export { Timeline, } from "./distributeur/Timeline/Timeline";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "1.7.1-alpha.29",
+  "version": "1.7.1-alpha.30",
   "description": "Package React - Design System Canopée",
   "exports": {
     "./distributeur": {
@@ -49,7 +49,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/canopee-css": "1.7.1-alpha.29",
+    "@axa-fr/canopee-css": "1.7.1-alpha.30",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"