@axa-fr/design-system-slash-react 1.2.1-alpha.52 → 1.2.1-alpha.54

package/dist/Steps/VerticalStep.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import type { VerticalStepMode } from "./types";
+import "@axa-fr/design-system-slash-css/dist/Steps/VerticalStep.css";
+type Props = {
+    title: string;
+    id: string;
+    stepMode: VerticalStepMode;
+    onEdit: React.MouseEventHandler<HTMLButtonElement>;
+    form: ReactNode;
+    restitution: ReactNode;
+    editButtonLabel?: string;
+    editButtonAriaLabel?: string;
+    showRestitution?: boolean;
+};
+export declare const VerticalStep: ({ title, id, stepMode, editButtonLabel, editButtonAriaLabel, onEdit, form, restitution, showRestitution, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Steps/VerticalStep.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import edit from "@material-symbols/svg-400/sharp/edit-fill.svg";
+import check from "@material-symbols/svg-400/sharp/check.svg";
+import lock from "@material-symbols/svg-400/sharp/lock-fill.svg";
+import { Title } from "../Title/Title";
+import { Svg } from "../Svg";
+import "@axa-fr/design-system-slash-css/dist/Steps/VerticalStep.css";
+import { Button } from "../Button/Button";
+const defaultClassName = "af-vertical-step";
+export const VerticalStep = ({ title, id, stepMode, editButtonLabel = "Modifier", editButtonAriaLabel = `Modifier l'étape ${title}`, onEdit, form, restitution, showRestitution = true, }) => {
+    const isStepInEdition = stepMode === "edited";
+    const isStepValidated = stepMode === "validated";
+    const isStepLocked = stepMode === "locked";
+    return (_jsxs("div", { className: classNames(defaultClassName, {
+            [`${defaultClassName}--edition`]: isStepInEdition,
+        }), children: [_jsxs("div", { className: classNames("af-vertical-step-icon", {
+                    [`${defaultClassName}-icon--validated`]: isStepValidated,
+                    [`${defaultClassName}-icon--locked`]: isStepLocked,
+                    [`${defaultClassName}-icon--edited`]: isStepInEdition,
+                }), children: [isStepValidated ? _jsx(Svg, { role: "presentation", src: check }) : null, isStepLocked ? _jsx(Svg, { role: "presentation", src: lock }) : null, isStepInEdition ? _jsx(Svg, { role: "presentation", src: edit }) : null] }), _jsxs(Title, { className: classNames("af-title", `${defaultClassName}-title`), id: id, children: [title, isStepValidated ? (_jsxs(Button, { "aria-label": editButtonAriaLabel, onClick: onEdit, className: "af-vertical-step-title-button", children: [_jsx(Svg, { role: "presentation", src: edit }), editButtonLabel] })) : null] }), isStepInEdition ? _jsx("section", { children: form }) : null, isStepValidated && showRestitution ? (_jsx("section", { children: restitution })) : null, isStepInEdition ? (_jsx("div", { className: classNames(`${defaultClassName}-icon ${defaultClassName}-icon--lastIcon`), children: _jsx(Svg, { role: "presentation", src: check }) })) : null] }));
+};

package/dist/Steps/index.d.ts

@@ -2,3 +2,4 @@ import "@axa-fr/design-system-slash-css/dist/Steps/Steps.scss";
 export { Step } from "./Step";
 export { StepBase } from "./StepBase";
 export { Steps } from "./Steps";
+export { VerticalStep } from "./VerticalStep";

package/dist/Steps/index.js

@@ -2,3 +2,4 @@ import "@axa-fr/design-system-slash-css/dist/Steps/Steps.scss";
 export { Step } from "./Step";
 export { StepBase } from "./StepBase";
 export { Steps } from "./Steps";
+export { VerticalStep } from "./VerticalStep";

package/dist/Steps/types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+export type CustomClickEvent = {
+    href: string;
+    number?: ReactNode;
+    id: string;
+    title: string;
+};
+export type VerticalStepMode = "edited" | "locked" | "validated";

package/dist/Steps/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -26,7 +26,7 @@ export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase,
 export { Link, type LinkProps } from "./Link/Link";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
-export { Step, StepBase, Steps } from "./Steps";
+export { Step, StepBase, Steps, VerticalStep } from "./Steps";
 export { Summary } from "./Summary";
 export { Svg } from "./Svg";
 export { Tabs } from "./Tabs/Tabs";

package/dist/index.js

@@ -26,7 +26,7 @@ export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase,
 export { Link } from "./Link/Link";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
-export { Step, StepBase, Steps } from "./Steps";
+export { Step, StepBase, Steps, VerticalStep } from "./Steps";
 export { Summary } from "./Summary";
 export { Svg } from "./Svg";
 export { Tabs } from "./Tabs/Tabs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.2.1-alpha.52",
+  "version": "1.2.1-alpha.54",
   "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.52",
+    "@axa-fr/design-system-slash-css": "1.2.1-alpha.54",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },