@axa-fr/design-system-slash-react 0.2.0-beta.316 → 0.2.0-beta.317

package/dist/Restitution/ArticleRestitution.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+type ArticleRestitutionProps = ComponentPropsWithoutRef<"article"> & {
+    classModifier?: string;
+};
+export declare const ArticleRestitution: ({ children, className, classModifier, ...otherProps }: PropsWithChildren<ArticleRestitutionProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Restitution/ArticleRestitution.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../utilities";
+export const ArticleRestitution = ({ children, className, classModifier, ...otherProps }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-restitution");
+    return (_jsx("article", { className: componentClassName, ...otherProps, children: children }));
+};

package/dist/Restitution/HeaderRestitution.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type HeaderRestitutionProps = {
+    className?: string;
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    rightTitle?: React.ReactNode;
+    classModifier?: string;
+};
+export declare const HeaderRestitution: ({ title, subtitle, rightTitle, className, classModifier, }: HeaderRestitutionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Restitution/HeaderRestitution.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getComponentClassName } from "../utilities";
+export const HeaderRestitution = ({ title, subtitle, rightTitle, className, classModifier, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-restitution__header");
+    return (_jsxs("header", { className: componentClassName, children: [_jsx("div", { className: "af-restitution__header-left", children: _jsxs("div", { className: "af-restitution__title", children: [_jsx("span", { className: "af-restitution__title-main", children: title }), subtitle ? (_jsx("span", { className: "af-restitution__title-subtitle", children: subtitle })) : null] }) }), rightTitle ? (_jsx("div", { className: "af-restitution__header-right", children: _jsx("span", { className: "af-restitution__title", children: rightTitle }) })) : null] }));
+};

package/dist/Restitution/Restitution.d.ts

@@ -0,0 +1,7 @@
+import "@axa-fr/design-system-slash-css/dist/Restitution/Restitution.scss";
+import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+export type RestitutionProps = ComponentPropsWithoutRef<"dl"> & {
+    label: string;
+    classModifier?: string;
+};
+export declare const Restitution: ({ label, children, className, classModifier, }: PropsWithChildren<RestitutionProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/Restitution/Restitution.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Restitution/Restitution.scss";
+import { getComponentClassName } from "../utilities";
+export const Restitution = ({ label, children = "-", className, classModifier, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-restitution__listdef");
+    return (_jsxs("dl", { className: componentClassName, children: [_jsx("dt", { className: "af-restitution__listdef-item", children: _jsx("span", { className: "af-restitution__text", children: label }) }), _jsx("dd", { className: "af-restitution__listdef-value", children: children })] }));
+};

package/dist/Restitution/Restitution.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;

package/dist/Restitution/Restitution.stories.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArticleRestitution } from "./ArticleRestitution";
+import { HeaderRestitution } from "./HeaderRestitution";
+import { Restitution } from "./Restitution";
+import { RestitutionList } from "./RestitutionList";
+import { SectionRestitution } from "./SectionRestitution";
+import { SectionRestitutionColumn } from "./SectionRestitutionColumn";
+import { SectionRestitutionRow } from "./SectionRestitutionRow";
+const meta = {
+    title: "Components/Restitution",
+    component: Restitution,
+    args: {
+        classModifier: "",
+    },
+};
+export default meta;
+export const Default = {
+    name: "Restitution",
+    render: ({ ...args }) => (_jsxs(ArticleRestitution, { ...args, children: [_jsx(HeaderRestitution, { title: "Tarifs", subtitle: "Tout adh\u00E9rent, assur\u00E9, base (sans EAC ou sans PAC)", rightTitle: _jsxs("a", { className: "af-link af-link--hasIconLeft", href: "/#", children: [_jsx("i", { className: "glyphicon glyphicon-pencil" }), _jsx("span", { className: "af-link__text", children: "Modifier" })] }) }), _jsxs(SectionRestitution, { children: [_jsxs(SectionRestitutionRow, { title: "Base de calcul des prestations", children: [_jsxs(SectionRestitutionColumn, { children: [_jsx(Restitution, { label: "TA", children: "99,99 %" }), _jsx(Restitution, { label: "EURO", children: "EURO" }), _jsx(Restitution, { label: "TT" }), _jsx(Restitution, { label: "Garanties compl\u00E9mentaires", classModifier: "marge", children: _jsx(RestitutionList, { values: [
+                                                "Vol au domicile",
+                                                "Vol étendu aux appareils nomades",
+                                                "Bris de glace",
+                                                "Plomberie et électricité",
+                                                "Jardin",
+                                            ] }) })] }), _jsxs(SectionRestitutionColumn, { classModifier: "test", children: [_jsx(Restitution, { label: "TA", children: "99,99 %" }), _jsx(Restitution, { label: "EURO", children: "EURO" }), _jsx(Restitution, { label: "TT" }), _jsx(Restitution, { label: "Garanties compl\u00E9mentaires", classModifier: "marge", children: _jsx(RestitutionList, { values: [
+                                                "Vol au domicile",
+                                                "Vol étendu aux appareils nomades",
+                                                "Bris de glace",
+                                                "Plomberie et électricité",
+                                                "Jardin",
+                                            ] }) })] })] }), _jsxs(SectionRestitutionRow, { title: "Base de calcul des prestations", children: [_jsxs(SectionRestitutionColumn, { children: [_jsx(Restitution, { label: "TA", children: "99,99 %" }), _jsx(Restitution, { label: "EURO", children: "EURO" }), _jsx(Restitution, { label: "TT" }), _jsx(Restitution, { label: "Garanties compl\u00E9mentaires", classModifier: "marge", children: _jsx(RestitutionList, { values: [
+                                                "Vol au domicile",
+                                                "Vol étendu aux appareils nomades",
+                                                "Bris de glace",
+                                                "Plomberie et électricité",
+                                                "Jardin",
+                                            ] }) })] }), _jsxs(SectionRestitutionColumn, { children: [_jsx(Restitution, { label: "TA", children: "99,99 %" }), _jsx(Restitution, { label: "EURO", children: _jsx("span", { style: { textDecoration: "underline" }, children: "EURO" }) }), _jsx(Restitution, { label: "Garanties compl\u00E9mentaires", classModifier: "marge", children: _jsx(RestitutionList, { values: [
+                                                "Vol au domicile",
+                                                "Vol étendu aux appareils nomades",
+                                                "Bris de glace",
+                                                "Plomberie et électricité",
+                                                "Jardin",
+                                            ] }) })] })] }), _jsxs(SectionRestitutionRow, { children: [_jsxs(SectionRestitutionColumn, { title: "Base de calcul des prestations", children: [_jsx(Restitution, { label: "TA", children: "99,99 %" }), _jsx(Restitution, { label: "EURO", children: "EURO" })] }), _jsxs(SectionRestitutionColumn, { title: "Base de calcul des prestations", children: [_jsx(Restitution, { label: "TA", children: "99,99 %" }), _jsx(Restitution, { label: "EURO", children: _jsx("span", { style: { textDecoration: "underline" }, children: "EURO" }) })] })] })] })] })),
+};

package/dist/Restitution/RestitutionList.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef } from "react";
+type RestitutionListProps = ComponentPropsWithoutRef<"ul"> & {
+    values: string[];
+};
+export declare const RestitutionList: ({ values, ...props }: RestitutionListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Restitution/RestitutionList.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const RestitutionList = ({ values, ...props }) => {
+    return (_jsx("ul", { className: "af-restitution__listul", ...props, children: values.map((value) => (_jsx("li", { className: "af-restitution__listul-item", children: value }, value))) }));
+};

package/dist/Restitution/SectionRestitution.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from "react";
+export type SectionRestitutionProps = {
+    className?: string;
+    classModifier?: string;
+};
+export declare const SectionRestitution: ({ children, className, classModifier, }: PropsWithChildren<SectionRestitutionProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/Restitution/SectionRestitution.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../utilities";
+export const SectionRestitution = ({ children, className, classModifier, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-restitution__content");
+    return _jsx("section", { className: componentClassName, children: children });
+};

package/dist/Restitution/SectionRestitutionColumn.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+export type SectionRestitutionColumnProps = {
+    className?: string;
+    title?: string;
+    classModifier?: string;
+};
+export declare const SectionRestitutionColumn: ({ children, className, title, classModifier, }: PropsWithChildren<SectionRestitutionColumnProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/Restitution/SectionRestitutionColumn.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getComponentClassName } from "../utilities";
+import { SectionRestitutionTitle } from "./SectionRestitutionTitle";
+export const SectionRestitutionColumn = ({ children, className, title, classModifier, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "col-sm-12 col-md-12 col-lg-6 col-xl-6");
+    return (_jsxs("div", { className: componentClassName, children: [title ? _jsx(SectionRestitutionTitle, { title: title }) : null, children] }));
+};

package/dist/Restitution/SectionRestitutionRow.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from "react";
+export type SectionRestitutionRowProps = {
+    title?: React.ReactNode;
+    classNameContainer?: string;
+    className?: string;
+    classModifier?: string;
+};
+export declare const SectionRestitutionRow: ({ title, className, classNameContainer, children, classModifier, }: PropsWithChildren<SectionRestitutionRowProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/Restitution/SectionRestitutionRow.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getComponentClassName } from "../utilities";
+import { SectionRestitutionTitle } from "./SectionRestitutionTitle";
+const DEFAULT_CLASSNAME = "col col-sm-12 col-md-12 col-lg-12 col-xl-12";
+export const SectionRestitutionRow = ({ title, className = DEFAULT_CLASSNAME, classNameContainer = "row af-restitution__content-left", children, classModifier, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, DEFAULT_CLASSNAME);
+    return (_jsxs("div", { className: componentClassName, children: [title ? _jsx(SectionRestitutionTitle, { title: title }) : null, _jsx("div", { className: classNameContainer, children: children })] }));
+};

package/dist/Restitution/SectionRestitutionTitle.d.ts

@@ -0,0 +1,6 @@
+export type SectionRestitutionTitleProps = {
+    title: React.ReactNode;
+    className?: string;
+    classModifier?: string;
+};
+export declare const SectionRestitutionTitle: ({ title, className, classModifier, }: SectionRestitutionTitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Restitution/SectionRestitutionTitle.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../utilities";
+export const SectionRestitutionTitle = ({ title, className, classModifier, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-restitution__content-title");
+    return _jsx("div", { className: componentClassName, children: title });
+};

package/dist/Restitution/index.d.ts

@@ -0,0 +1,8 @@
+export { ArticleRestitution } from "./ArticleRestitution";
+export { HeaderRestitution } from "./HeaderRestitution";
+export { SectionRestitution } from "./SectionRestitution";
+export { SectionRestitutionTitle } from "./SectionRestitutionTitle";
+export { SectionRestitutionRow } from "./SectionRestitutionRow";
+export { SectionRestitutionColumn } from "./SectionRestitutionColumn";
+export { Restitution } from "./Restitution";
+export { RestitutionList } from "./RestitutionList";

package/dist/Restitution/index.js

@@ -0,0 +1,8 @@
+export { ArticleRestitution } from "./ArticleRestitution";
+export { HeaderRestitution } from "./HeaderRestitution";
+export { SectionRestitution } from "./SectionRestitution";
+export { SectionRestitutionTitle } from "./SectionRestitutionTitle";
+export { SectionRestitutionRow } from "./SectionRestitutionRow";
+export { SectionRestitutionColumn } from "./SectionRestitutionColumn";
+export { Restitution } from "./Restitution";
+export { RestitutionList } from "./RestitutionList";

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { Badge } from "./Badge/Badge";
 export { Button } from "./Button/Button";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox";
 export { Choice, ChoiceInput } from "./Form/Choice";
+export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
 export { Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";
 export { Date, DateInput } from "./Form/Date";
 export { MultiSelect, MultiSelectInput } from "./Form/MultiSelect";

package/dist/index.js

@@ -6,6 +6,7 @@ export { Badge } from "./Badge/Badge";
 export { Button } from "./Button/Button";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox";
 export { Choice, ChoiceInput } from "./Form/Choice";
+export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
 export { Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";
 export { Date, DateInput } from "./Form/Date";
 export { MultiSelect, MultiSelectInput } from "./Form/MultiSelect";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "0.2.0-beta.316",
+  "version": "0.2.0-beta.317",
   "description": "",
   "exports": {
     ".": {
@@ -41,7 +41,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "0.2.0-beta.316",
+    "@axa-fr/design-system-slash-css": "0.2.0-beta.317",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },