From 1a6996207316f58d463c472737dc64d7efb9c84c Mon Sep 17 00:00:00 2001 From: Max S Date: Thu, 18 Jul 2024 16:46:29 +0200 Subject: [PATCH 1/4] refacto icons buttons --- .../DesignSystem/Button/classes.module.scss | 250 ++++++++++++++++++ .../Components/DesignSystem/Button/index.tsx | 20 +- .../Components/Layouts/DesignSystem/index.tsx | 125 +++++++-- 3 files changed, 357 insertions(+), 38 deletions(-) diff --git a/src/front/Components/DesignSystem/Button/classes.module.scss b/src/front/Components/DesignSystem/Button/classes.module.scss index d3779766..061818c4 100644 --- a/src/front/Components/DesignSystem/Button/classes.module.scss +++ b/src/front/Components/DesignSystem/Button/classes.module.scss @@ -29,20 +29,39 @@ border: 1px solid var(--button-contained-primary-default-border, rgba(0, 0, 0, 0)); background: var(--button-contained-primary-default-background, #005bcb); + svg { + stroke: var(--button-contained-primary-default-contrast); + } + &:hover { border: 1px solid var(--button-contained-primary-hovered-border, rgba(0, 0, 0, 0)); background: var(--button-contained-primary-hovered-background, #0040a4); + + svg { + stroke: var(--button-contained-primary-hovered-contrast); + } } &:focus, &:active { border: 1px solid var(--button-contained-primary-pressed-border, rgba(0, 0, 0, 0)); background: var(--button-contained-primary-pressed-background, #013391); + + svg { + stroke: var(--button-contained-primary-pressed-contrast); + } } &[styleType="outlined"] { + svg { + stroke: var(--button-outlined-primary-default-contrast); + } + &:hover { background-color: var(--color-primary-50); + svg { + stroke: var(--button-outlined-primary-hovered-contrast); + } } &:focus, @@ -50,12 +69,24 @@ background-color: var(--color-primary-100); color: var(--color-primary-700); border-color: var(--color-primary-700); + + svg { + stroke: var(--button-outlined-primary-pressed-contrast); + } } } &[styleType="text"] { + svg { + stroke: var(--button-text-primary-default-contrast); + } + &:hover { background-color: transparent; + + svg { + stroke: var(--button-text-primary-hovered-contrast); + } } &:focus, @@ -63,6 +94,10 @@ background-color: transparent; color: var(--color-primary-800); border-color: var(--color-primary-800); + + svg { + stroke: var(--button-text-primary-pressed-contrast); + } } } } @@ -72,20 +107,40 @@ background: var(--color-secondary-500); border-color: var(--color-secondary-500); + svg { + stroke: var(--button-contained-secondary-default-contrast); + } + &:hover { background: var(--color-secondary-700); border-color: var(--color-secondary-700); + + svg { + stroke: var(--button-contained-secondary-hovered-contrast); + } } &:focus, &:active { background: var(--color-secondary-800); border-color: var(--color-secondary-800); + + svg { + stroke: var(--button-contained-secondary-pressed-contrast); + } } &[styleType="outlined"] { + svg { + stroke: var(--button-outlined-secondary-default-contrast); + } + &:hover { background-color: var(--color-secondary-50); + + svg { + stroke: var(--button-outlined-secondary-hovered-contrast); + } } &:focus, @@ -93,12 +148,24 @@ background-color: var(--color-secondary-100); color: var(--color-secondary-700); border-color: var(--color-secondary-700); + + svg { + stroke: var(--button-outlined-secondary-pressed-contrast); + } } } &[styleType="text"] { + svg { + stroke: var(--button-text-secondary-default-contrast); + } + &:hover { background-color: transparent; + + svg { + stroke: var(--button-text-secondary-hovered-contrast); + } } &:focus, @@ -106,6 +173,10 @@ background-color: transparent; color: var(--color-secondary-800); border-color: var(--color-secondary-800); + + svg { + stroke: var(--button-text-secondary-pressed-contrast); + } } } } @@ -115,20 +186,40 @@ background: var(--color-neutral-500); border-color: var(--color-neutral-500); + svg { + stroke: var(--button-contained-neutral-default-contrast); + } + &:hover { background: var(--color-neutral-700); border-color: var(--color-neutral-700); + + svg { + stroke: var(--button-contained-neutral-hovered-contrast); + } } &:focus, &:active { background: var(--color-neutral-800); border-color: var(--color-neutral-800); + + svg { + stroke: var(--button-contained-neutral-pressed-contrast); + } } &[styleType="outlined"] { + svg { + stroke: var(--button-outlined-neutral-default-contrast); + } + &:hover { background-color: var(--color-neutral-50); + + svg { + stroke: var(--button-outlined-neutral-hovered-contrast); + } } &:focus, @@ -136,12 +227,24 @@ background-color: var(--color-neutral-100); color: var(--color-neutral-700); border-color: var(--color-neutral-700); + + svg { + stroke: var(--button-outlined-neutral-pressed-contrast); + } } } &[styleType="text"] { + svg { + stroke: var(--button-text-neutral-default-contrast); + } + &:hover { background-color: transparent; + + svg { + stroke: var(--button-text-neutral-hovered-contrast); + } } &:focus, @@ -149,6 +252,10 @@ background-color: transparent; color: var(--color-neutral-800); border-color: var(--color-neutral-800); + + svg { + stroke: var(--button-text-neutral-pressed-contrast); + } } } } @@ -158,21 +265,41 @@ background: var(--color-error-600); border-color: var(--color-error-600); + svg { + stroke: var(--button-contained-error-default-contrast); + } + &:hover { background: var(--color-error-800); border-color: var(--color-error-800); + + svg { + stroke: var(--button-contained-error-hovered-contrast); + } } &:focus, &:active { background: var(--color-error-900); border-color: var(--color-error-900); + + svg { + stroke: var(--button-contained-error-pressed-contrast); + } } &[styleType="outlined"] { + svg { + stroke: var(--button-outlined-error-default-contrast); + } + &:hover { background-color: var(--color-error-50); border-color: var(--color-secondary-700); + + svg { + stroke: var(--button-outlined-error-hovered-contrast); + } } &:focus, @@ -180,14 +307,26 @@ background-color: var(--color-error-100); color: var(--color-secondary-700); border-color: var(--color-secondary-700); + + svg { + stroke: var(--button-outlined-error-pressed-contrast); + } } } &[styleType="text"] { + svg { + stroke: var(--button-text-error-default-contrast); + } + &:hover { background-color: transparent; color: var(--color-error-800); border-color: var(--color-error-800); + + svg { + stroke: var(--button-text-error-hovered-contrast); + } } &:focus, @@ -195,6 +334,10 @@ background-color: transparent; color: var(--color-error-900); border-color: var(--color-error-900); + + svg { + stroke: var(--button-text-error-pressed-contrast); + } } } } @@ -204,22 +347,42 @@ background: var(--color-warning-600); border-color: var(--color-warning-600); + svg { + stroke: var(--button-contained-warning-default-contrast); + } + &:hover { background: var(--color-warning-800); border-color: var(--color-warning-800); + + svg { + stroke: var(--button-contained-warning-hovered-contrast); + } } &:focus, &:active { background: var(--color-warning-900); border-color: var(--color-warning-900); + + svg { + stroke: var(--button-contained-warning-pressed-contrast); + } } &[styleType="outlined"] { + svg { + stroke: var(--button-outlined-warning-default-contrast); + } + &:hover { background-color: var(--color-warning-50); border-color: var(--color-warning-700); color: var(--color-warning-700); + + svg { + stroke: var(--button-outlined-warning-hovered-contrast); + } } &:focus, @@ -227,14 +390,26 @@ background-color: var(--color-warning-100); color: var(--color-warning-700); border-color: var(--color-warning-700); + + svg { + stroke: var(--button-outlined-warning-pressed-contrast); + } } } &[styleType="text"] { + svg { + stroke: var(--button-text-warning-default-contrast); + } + &:hover { background-color: transparent; color: var(--color-warning-800); border-color: var(--color-warning-800); + + svg { + stroke: var(--button-text-warning-hovered-contrast); + } } &:focus, @@ -242,6 +417,10 @@ background-color: transparent; color: var(--color-warning-900); border-color: var(--color-warning-900); + + svg { + stroke: var(--button-text-warning-pressed-contrast); + } } } } @@ -251,22 +430,42 @@ background: var(--color-success-600); border-color: var(--color-success-600); + svg { + stroke: var(--button-contained-success-default-contrast); + } + &:hover { background: var(--color-success-800); border-color: var(--color-success-800); + + svg { + stroke: var(--button-contained-success-hovered-contrast); + } } &:focus, &:active { background: var(--color-success-900); border-color: var(--color-success-900); + + svg { + stroke: var(--button-contained-success-pressed-contrast); + } } &[styleType="outlined"] { + svg { + stroke: var(--button-outlined-success-default-contrast); + } + &:hover { background-color: var(--color-success-50); border-color: var(--color-success-700); color: var(--color-success-700); + + svg { + stroke: var(--button-outlined-success-hovered-contrast); + } } &:focus, @@ -274,14 +473,26 @@ background-color: var(--color-success-100); color: var(--color-success-700); border-color: var(--color-success-700); + + svg { + stroke: var(--button-outlined-success-pressed-contrast); + } } } &[styleType="text"] { + svg { + stroke: var(--button-text-success-default-contrast); + } + &:hover { background-color: transparent; color: var(--color-success-800); border-color: var(--color-success-800); + + svg { + stroke: var(--button-text-success-hovered-contrast); + } } &:focus, @@ -289,6 +500,10 @@ background-color: transparent; color: var(--color-success-900); border-color: var(--color-success-900); + + svg { + stroke: var(--button-text-success-pressed-contrast); + } } } } @@ -298,22 +513,41 @@ background: var(--color-info-700); border-color: var(--color-info-700); + svg { + stroke: var(--button-contained-info-default-contrast); + } + &:hover { background: var(--color-info-900); border-color: var(--color-info-900); + + svg { + stroke: var(--button-contained-info-hovered-contrast); + } } &:focus, &:active { background: var(--color-info-950); border-color: var(--color-info-950); + + svg { + stroke: var(--button-contained-info-pressed-contrast); + } } &[styleType="outlined"] { + svg { + stroke: var(--button-outlined-info-default-contrast); + } &:hover { background-color: var(--color-info-50); border-color: var(--color-info-700); color: var(--color-info-700); + + svg { + stroke: var(--button-outlined-info-hovered-contrast); + } } &:focus, @@ -321,14 +555,26 @@ background-color: var(--color-info-100); color: var(--color-info-700); border-color: var(--color-info-700); + + svg { + stroke: var(--button-outlined-info-pressed-contrast); + } } } &[styleType="text"] { + svg { + stroke: var(--button-text-info-default-contrast); + } + &:hover { background-color: transparent; color: var(--color-info-900); border-color: var(--color-info-900); + + svg { + stroke: var(--button-text-info-hovered-contrast); + } } &:focus, @@ -336,6 +582,10 @@ background-color: transparent; color: var(--color-info-950); border-color: var(--color-info-950); + + svg { + stroke: var(--button-text-info-pressed-contrast); + } } } } diff --git a/src/front/Components/DesignSystem/Button/index.tsx b/src/front/Components/DesignSystem/Button/index.tsx index 4c2e7baa..9bb4aa96 100644 --- a/src/front/Components/DesignSystem/Button/index.tsx +++ b/src/front/Components/DesignSystem/Button/index.tsx @@ -1,8 +1,7 @@ -import Image from "next/image"; +import classNames from "classnames"; import React, { CSSProperties } from "react"; import classes from "./classes.module.scss"; -import classNames from "classnames"; export enum EButtonVariant { PRIMARY = "primary", @@ -33,12 +32,12 @@ type IProps = { size?: EButtonSize; styleType?: EButtonStyleType; fullwidth?: boolean; - icon?: string; + leftIcon?: React.ReactNode; + rightIcon?: React.ReactNode; iconstyle?: CSSProperties; disabled?: boolean; isLoading?: boolean; type?: "button" | "submit"; - iconposition?: "left" | "right"; className?: string; }; @@ -51,12 +50,11 @@ export default function Button(props: IProps) { type = "button", isLoading = false, fullwidth = false, - iconposition = "right", onClick, children, - icon, - iconstyle, className = "", + leftIcon, + rightIcon, } = props; const fullwidthattr = fullwidth.toString(); @@ -64,15 +62,15 @@ export default function Button(props: IProps) { const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr, sizing: size, styleType }; delete attributes.fullwidth; - delete attributes.icon; + delete attributes.leftIcon; + delete attributes.rightIcon; delete attributes.iconstyle; - delete attributes.iconposition; return ( ); } diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx index 9dcea52f..59e1c8e3 100644 --- a/src/front/Components/Layouts/DesignSystem/index.tsx +++ b/src/front/Components/Layouts/DesignSystem/index.tsx @@ -4,11 +4,12 @@ import Newsletter from "@Front/Components/DesignSystem/Newsletter"; import Table from "@Front/Components/DesignSystem/Table"; import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; +import Tabs from "@Front/Components/Elements/Tabs"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; +import { ArrowLongLeftIcon, ArrowLongRightIcon } from "@heroicons/react/24/outline"; +import { useCallback, useMemo, useState } from "react"; import classes from "./classes.module.scss"; -import Tabs from "@Front/Components/Elements/Tabs"; -import { useCallback, useMemo, useState } from "react"; export default function DesignSystem() { const userDb = useMemo( @@ -134,66 +135,136 @@ export default function DesignSystem() { Buttons
- - - +
- - - +
- - - +
- - - +
- - - +
- - - +
- - - +
From 157e858762cd1a470bd33098aa6e4c18e3991e19 Mon Sep 17 00:00:00 2001 From: Max S Date: Thu, 18 Jul 2024 18:40:12 +0200 Subject: [PATCH 2/4] :sparkles: [New] Modal --- .../Components/DesignSystem/Button/index.tsx | 4 +- .../DesignSystem/DepositDocument/index.tsx | 4 +- .../DepositOtherDocument/index.tsx | 4 +- .../DesignSystem/Modal/classes.module.scss | 157 +++++------------ .../Components/DesignSystem/Modal/index.tsx | 165 +++++++----------- .../Alert/classes.module.scss | 0 .../{Modal => OldModal}/Alert/index.tsx | 8 +- .../Confirm/classes.module.scss | 0 .../{Modal => OldModal}/Confirm/index.tsx | 8 +- .../Elements/Footer/classes.module.scss | 0 .../Elements/Footer/index.tsx | 0 .../Elements/Header/classes.module.scss | 0 .../Elements/Header/index.tsx | 0 .../Elements/Loader/classes.module.scss | 0 .../Elements/Loader/index.tsx | 0 .../DesignSystem/OldModal/classes.module.scss | 125 +++++++++++++ .../DesignSystem/OldModal/index.tsx | 111 ++++++++++++ .../DesignSystem/UserFolder/index.tsx | 2 +- .../Layouts/ClientDashboard/index2.tsx | 2 +- .../CollaboratorInformations/index.tsx | 2 +- .../DeedTypes/DeedTypesCreate/index.tsx | 2 +- .../Layouts/DeedTypes/DeedTypesEdit/index.tsx | 2 +- .../DeedTypes/DeedTypesInformations/index.tsx | 2 +- .../Components/Layouts/DesignSystem/index.tsx | 28 ++- .../AskDocuments/ParameterDocuments/index.tsx | 2 +- .../Folder/FolderInformation/index.tsx | 2 +- .../Layouts/Folder/UpdateClient/index.tsx | 2 +- .../Layouts/Folder/ViewDocuments/index.tsx | 2 +- src/front/Components/Layouts/Login/index.tsx | 2 +- .../LoginCustomer/StepPassword/index.tsx | 2 +- .../Layouts/LoginCustomer/index.tsx | 2 +- src/front/Components/Layouts/Rib/index.tsx | 2 +- .../Layouts/Roles/RolesCreate/index.tsx | 2 +- .../Layouts/Roles/RolesInformations/index.tsx | 2 +- .../SubscribeIllimityComponent/index.tsx | 2 +- .../SubscribeStandardComponent/index.tsx | 2 +- .../SubscriptionFacturation/index.tsx | 2 +- .../Layouts/Users/UserInformations/index.tsx | 2 +- 38 files changed, 402 insertions(+), 252 deletions(-) rename src/front/Components/DesignSystem/{Modal => OldModal}/Alert/classes.module.scss (100%) rename src/front/Components/DesignSystem/{Modal => OldModal}/Alert/index.tsx (90%) rename src/front/Components/DesignSystem/{Modal => OldModal}/Confirm/classes.module.scss (100%) rename src/front/Components/DesignSystem/{Modal => OldModal}/Confirm/index.tsx (94%) rename src/front/Components/DesignSystem/{Modal => OldModal}/Elements/Footer/classes.module.scss (100%) rename src/front/Components/DesignSystem/{Modal => OldModal}/Elements/Footer/index.tsx (100%) rename src/front/Components/DesignSystem/{Modal => OldModal}/Elements/Header/classes.module.scss (100%) rename src/front/Components/DesignSystem/{Modal => OldModal}/Elements/Header/index.tsx (100%) rename src/front/Components/DesignSystem/{Modal => OldModal}/Elements/Loader/classes.module.scss (100%) rename src/front/Components/DesignSystem/{Modal => OldModal}/Elements/Loader/index.tsx (100%) create mode 100644 src/front/Components/DesignSystem/OldModal/classes.module.scss create mode 100644 src/front/Components/DesignSystem/OldModal/index.tsx diff --git a/src/front/Components/DesignSystem/Button/index.tsx b/src/front/Components/DesignSystem/Button/index.tsx index 9bb4aa96..1c02e5e2 100644 --- a/src/front/Components/DesignSystem/Button/index.tsx +++ b/src/front/Components/DesignSystem/Button/index.tsx @@ -1,5 +1,5 @@ import classNames from "classnames"; -import React, { CSSProperties } from "react"; +import React from "react"; import classes from "./classes.module.scss"; @@ -34,7 +34,6 @@ type IProps = { fullwidth?: boolean; leftIcon?: React.ReactNode; rightIcon?: React.ReactNode; - iconstyle?: CSSProperties; disabled?: boolean; isLoading?: boolean; type?: "button" | "submit"; @@ -64,7 +63,6 @@ export default function Button(props: IProps) { delete attributes.fullwidth; delete attributes.leftIcon; delete attributes.rightIcon; - delete attributes.iconstyle; return ( + )} + {secondButton && ( + + )} - ); - } - - public override componentDidUpdate(prevProps: IProps): void { - if (prevProps.isOpen !== this.props.isOpen && !this.props.isOpen) { - this.setState({ willClose: true }); - window.setTimeout(() => { - this.setState({ - isOpen: false, - willClose: false, - }); - }, this.props.animationDelay); - document.body.style.overflow = "auto"; - } - if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) { - this.setState({ isOpen: true }); - document.body.style.overflow = "hidden"; - } - this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms")); - } - - public override componentDidMount(): void { - document.addEventListener("keydown", this.handleKeyDown); - } - - public override componentWillUnmount(): void { - document.body.style.overflow = "auto"; - document.removeEventListener("keydown", this.handleKeyDown); - } - - protected close() { - if (this.props.hasContainerClosable === false) return; - if (this.state.willClose) return; - this.props.onClose(); - } - - private handleKeyDown = (e: KeyboardEvent): void => { - if (e.key === "Escape" || e.key === "Esc") { - this.props.onClose(); - } - }; + + ); } diff --git a/src/front/Components/DesignSystem/Modal/Alert/classes.module.scss b/src/front/Components/DesignSystem/OldModal/Alert/classes.module.scss similarity index 100% rename from src/front/Components/DesignSystem/Modal/Alert/classes.module.scss rename to src/front/Components/DesignSystem/OldModal/Alert/classes.module.scss diff --git a/src/front/Components/DesignSystem/Modal/Alert/index.tsx b/src/front/Components/DesignSystem/OldModal/Alert/index.tsx similarity index 90% rename from src/front/Components/DesignSystem/Modal/Alert/index.tsx rename to src/front/Components/DesignSystem/OldModal/Alert/index.tsx index bc00d3b3..d9293647 100644 --- a/src/front/Components/DesignSystem/Modal/Alert/index.tsx +++ b/src/front/Components/DesignSystem/OldModal/Alert/index.tsx @@ -1,5 +1,5 @@ import React from "react"; -import Modal, { IProps as IPropsModal } from ".."; +import OldModal, { IProps as IPropsModal } from ".."; import Button, { EButtonVariant } from "../../Button"; import classes from "./classes.module.scss"; @@ -13,7 +13,7 @@ type IState = { export default class Alert extends React.Component { static defaultProps = { closeText: "Ok", - ...Modal.defaultProps, + ...OldModal.defaultProps, }; constructor(props: IProps) { @@ -26,14 +26,14 @@ export default class Alert extends React.Component { public override render(): JSX.Element | null { return ( - {this.props.children} - + ); } diff --git a/src/front/Components/DesignSystem/Modal/Confirm/classes.module.scss b/src/front/Components/DesignSystem/OldModal/Confirm/classes.module.scss similarity index 100% rename from src/front/Components/DesignSystem/Modal/Confirm/classes.module.scss rename to src/front/Components/DesignSystem/OldModal/Confirm/classes.module.scss diff --git a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx b/src/front/Components/DesignSystem/OldModal/Confirm/index.tsx similarity index 94% rename from src/front/Components/DesignSystem/Modal/Confirm/index.tsx rename to src/front/Components/DesignSystem/OldModal/Confirm/index.tsx index 06e394a7..b5b5cd72 100644 --- a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx +++ b/src/front/Components/DesignSystem/OldModal/Confirm/index.tsx @@ -1,7 +1,7 @@ import Link from "next/link"; import React from "react"; -import Modal, { IProps as IPropsModal } from ".."; +import OldModal, { IProps as IPropsModal } from ".."; import Button, { EButtonStyleType, EButtonVariant } from "../../Button"; import classes from "./classes.module.scss"; @@ -24,19 +24,19 @@ export default class Confirm extends React.Component { confirmText: "Confirm", canConfirm: true, showButtons: true, - ...Modal.defaultProps, + ...OldModal.defaultProps, }; public override render(): JSX.Element | null { return ( - {this.props.children} - + ); } diff --git a/src/front/Components/DesignSystem/Modal/Elements/Footer/classes.module.scss b/src/front/Components/DesignSystem/OldModal/Elements/Footer/classes.module.scss similarity index 100% rename from src/front/Components/DesignSystem/Modal/Elements/Footer/classes.module.scss rename to src/front/Components/DesignSystem/OldModal/Elements/Footer/classes.module.scss diff --git a/src/front/Components/DesignSystem/Modal/Elements/Footer/index.tsx b/src/front/Components/DesignSystem/OldModal/Elements/Footer/index.tsx similarity index 100% rename from src/front/Components/DesignSystem/Modal/Elements/Footer/index.tsx rename to src/front/Components/DesignSystem/OldModal/Elements/Footer/index.tsx diff --git a/src/front/Components/DesignSystem/Modal/Elements/Header/classes.module.scss b/src/front/Components/DesignSystem/OldModal/Elements/Header/classes.module.scss similarity index 100% rename from src/front/Components/DesignSystem/Modal/Elements/Header/classes.module.scss rename to src/front/Components/DesignSystem/OldModal/Elements/Header/classes.module.scss diff --git a/src/front/Components/DesignSystem/Modal/Elements/Header/index.tsx b/src/front/Components/DesignSystem/OldModal/Elements/Header/index.tsx similarity index 100% rename from src/front/Components/DesignSystem/Modal/Elements/Header/index.tsx rename to src/front/Components/DesignSystem/OldModal/Elements/Header/index.tsx diff --git a/src/front/Components/DesignSystem/Modal/Elements/Loader/classes.module.scss b/src/front/Components/DesignSystem/OldModal/Elements/Loader/classes.module.scss similarity index 100% rename from src/front/Components/DesignSystem/Modal/Elements/Loader/classes.module.scss rename to src/front/Components/DesignSystem/OldModal/Elements/Loader/classes.module.scss diff --git a/src/front/Components/DesignSystem/Modal/Elements/Loader/index.tsx b/src/front/Components/DesignSystem/OldModal/Elements/Loader/index.tsx similarity index 100% rename from src/front/Components/DesignSystem/Modal/Elements/Loader/index.tsx rename to src/front/Components/DesignSystem/OldModal/Elements/Loader/index.tsx diff --git a/src/front/Components/DesignSystem/OldModal/classes.module.scss b/src/front/Components/DesignSystem/OldModal/classes.module.scss new file mode 100644 index 00000000..408155b3 --- /dev/null +++ b/src/front/Components/DesignSystem/OldModal/classes.module.scss @@ -0,0 +1,125 @@ +@import "@Themes/constants.scss"; + +@keyframes smooth-appear { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes smooth-disappear { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + +.root { + position: fixed; + z-index: 6; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + --animation-delay: 1ms; + animation: smooth-appear var(--animation-delay) $custom-easing; + + &[data-will-close="true"] { + animation: smooth-disappear var(--animation-delay) $custom-easing; + opacity: 0; + } + + .background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: $modal-background; + } + + .container { + position: relative; + width: 610px; + max-height: 90%; + background: var(--color-generic-white); + box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11); + overflow: auto; + padding: 32px; + + @media (max-width: $screen-s) { + width: 90%; + max-width: 493px; + } + + .cross { + display: flex; + flex-direction: row-reverse; + + .close-icon { + height: 24px; + width: 24px; + cursor: pointer; + } + } + } + + .transparant-background { + background-color: transparent; + box-shadow: none; + } + + &[data-side-background="true"] { + .container { + max-width: 711px; + + .sub-container { + padding: 0; + display: flex; + + p { + max-width: 711px; + } + + @media (max-width: $screen-s) { + display: block; + } + + .banner { + @media (max-width: $screen-s) { + overflow: hidden; + } + } + } + } + + .side-image { + height: 100%; + + @media (max-width: $screen-s) { + display: none; + } + } + + .top-image { + @media (min-width: $screen-s) { + display: none; + } + + @media (max-width: $screen-s) { + width: 100%; + max-height: 82px; + min-height: 82px; + } + } + } +} diff --git a/src/front/Components/DesignSystem/OldModal/index.tsx b/src/front/Components/DesignSystem/OldModal/index.tsx new file mode 100644 index 00000000..2b30c00a --- /dev/null +++ b/src/front/Components/DesignSystem/OldModal/index.tsx @@ -0,0 +1,111 @@ +import CrossIcon from "@Assets/Icons/cross.svg"; +import Image from "next/image"; +import React from "react"; + +import Typography, { ETypo } from "../Typography"; +import classes from "./classes.module.scss"; +import Footer from "./Elements/Footer"; +import Header from "./Elements/Header"; +import Loader from "./Elements/Loader"; + +export type IProps = { + closeBtn?: boolean; + header?: string | JSX.Element; + footer?: JSX.Element | null; + textLoader?: string | JSX.Element; + isOpen: boolean; + onClose: () => void; + hasTransparentBackground?: boolean; + hasContainerClosable?: boolean; + withSideBackground?: boolean; + children?: React.ReactNode; + animationDelay?: number; +}; + +type IState = { + willClose: boolean; + isOpen: boolean; +}; + +export default class OldModal extends React.Component { + static defaultProps = { + animationDelay: 250, + }; + public rootRefElement = React.createRef(); + constructor(props: IProps) { + super(props); + this.close = this.close.bind(this); + + this.state = { + willClose: false, + isOpen: this.props.isOpen, + }; + } + + public override render(): JSX.Element | null { + if (!this.state.isOpen) return null; + return ( +
+
+
+ {this.props.closeBtn && ( +
+ Unplugged +
+ )} +
+ {this.props.header &&
} + + + <>{this.props.children ? this.props.children : } + + {this.props.children && this.props.footer &&
} +
+
+
+ ); + } + + public override componentDidUpdate(prevProps: IProps): void { + if (prevProps.isOpen !== this.props.isOpen && !this.props.isOpen) { + this.setState({ willClose: true }); + window.setTimeout(() => { + this.setState({ + isOpen: false, + willClose: false, + }); + }, this.props.animationDelay); + document.body.style.overflow = "auto"; + } + if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) { + this.setState({ isOpen: true }); + document.body.style.overflow = "hidden"; + } + this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms")); + } + + public override componentDidMount(): void { + document.addEventListener("keydown", this.handleKeyDown); + } + + public override componentWillUnmount(): void { + document.body.style.overflow = "auto"; + document.removeEventListener("keydown", this.handleKeyDown); + } + + protected close() { + if (this.props.hasContainerClosable === false) return; + if (this.state.willClose) return; + this.props.onClose(); + } + + private handleKeyDown = (e: KeyboardEvent): void => { + if (e.key === "Escape" || e.key === "Esc") { + this.props.onClose(); + } + }; +} diff --git a/src/front/Components/DesignSystem/UserFolder/index.tsx b/src/front/Components/DesignSystem/UserFolder/index.tsx index cb1ea3bb..d1371e4a 100644 --- a/src/front/Components/DesignSystem/UserFolder/index.tsx +++ b/src/front/Components/DesignSystem/UserFolder/index.tsx @@ -11,7 +11,7 @@ import Link from "next/link"; import React from "react"; import Button, { EButtonStyleType, EButtonVariant } from "../Button"; -import Confirm from "../Modal/Confirm"; +import Confirm from "../OldModal/Confirm"; import QuantityProgressBar from "../QuantityProgressBar"; import classes from "./classes.module.scss"; import DocumentList from "./DocumentList"; diff --git a/src/front/Components/Layouts/ClientDashboard/index2.tsx b/src/front/Components/Layouts/ClientDashboard/index2.tsx index dd6ebff2..2470db72 100644 --- a/src/front/Components/Layouts/ClientDashboard/index2.tsx +++ b/src/front/Components/Layouts/ClientDashboard/index2.tsx @@ -2,7 +2,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import DepositDocument from "@Front/Components/DesignSystem/DepositDocument"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import Base from "@Front/Components/Layouts/Base"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; diff --git a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx index 04817ea3..d626b94a 100644 --- a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx +++ b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx @@ -4,7 +4,7 @@ import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles"; import Users from "@Front/Api/LeCoffreApi/Admin/Users/Users"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Switch from "@Front/Components/DesignSystem/Switch"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import DefaultCollaboratorDashboard from "@Front/Components/LayoutTemplates/DefaultCollaboratorDashboard"; diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx index b5c3c7bf..d5c491e3 100644 --- a/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx +++ b/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx @@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi import Form from "@Front/Components/DesignSystem/Form"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard"; import Module from "@Front/Config/Module"; diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx index 9a442889..7c7f936b 100644 --- a/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx +++ b/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx @@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi import Form from "@Front/Components/DesignSystem/Form"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard"; import Module from "@Front/Config/Module"; diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx index b032cd01..31ec5a3a 100644 --- a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx +++ b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx @@ -5,7 +5,7 @@ import DocumentTypes from "@Front/Api/LeCoffreApi/Admin/DocumentTypes/DocumentTy import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Form from "@Front/Components/DesignSystem/Form"; import { IOption } from "@Front/Components/DesignSystem/Form/SelectField"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard"; diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx index 59e1c8e3..8a2a6a0a 100644 --- a/src/front/Components/Layouts/DesignSystem/index.tsx +++ b/src/front/Components/Layouts/DesignSystem/index.tsx @@ -10,8 +10,12 @@ import { ArrowLongLeftIcon, ArrowLongRightIcon } from "@heroicons/react/24/outli import { useCallback, useMemo, useState } from "react"; import classes from "./classes.module.scss"; +import useOpenable from "@Front/Hooks/useOpenable"; +import Modal from "@Front/Components/DesignSystem/Modal"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; export default function DesignSystem() { + const { isOpen, open, close } = useOpenable(); const userDb = useMemo( () => [ { @@ -58,15 +62,25 @@ export default function DesignSystem() { DesignSystem - Tabs - tabs={userDbArray} onSelect={onSelect} /> -
- - {selectedTab.id} - {selectedTab.username} - -
+ Modal + + , rightIcon: }} + secondButton={{ text: "Confirmer", leftIcon: , rightIcon: }}> + Modal Content + + + Tabs + tabs={userDbArray} onSelect={onSelect} /> + + {selectedTab.id} - {selectedTab.username} + + Circle Progress
diff --git a/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx index 17e822e2..6b0a7759 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx @@ -1,4 +1,4 @@ -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import classes from "./classes.module.scss"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx index d93b8bcb..d681a3a1 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx +++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx @@ -4,7 +4,7 @@ import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAncho import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation"; import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; diff --git a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx index a22ba91d..11bf9643 100644 --- a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx +++ b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx @@ -2,7 +2,7 @@ import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Form from "@Front/Components/DesignSystem/Form"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import BackArrow from "@Front/Components/Elements/BackArrow"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx index 3de0979e..15256050 100644 --- a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx @@ -3,7 +3,7 @@ import RightArrowIcon from "@Assets/Icons/right-arrow.svg"; import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import FilePreview from "@Front/Components/DesignSystem/FilePreview"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import Module from "@Front/Config/Module"; diff --git a/src/front/Components/Layouts/Login/index.tsx b/src/front/Components/Layouts/Login/index.tsx index 8243bab6..a9083683 100644 --- a/src/front/Components/Layouts/Login/index.tsx +++ b/src/front/Components/Layouts/Login/index.tsx @@ -11,7 +11,7 @@ import classes from "./classes.module.scss"; import LandingImage from "./landing-connect.jpeg"; import { FrontendVariables } from "@Front/Config/VariablesFront"; import Link from "next/link"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; export default function Login() { const router = useRouter(); diff --git a/src/front/Components/Layouts/LoginCustomer/StepPassword/index.tsx b/src/front/Components/Layouts/LoginCustomer/StepPassword/index.tsx index e1f9543e..f05511a9 100644 --- a/src/front/Components/Layouts/LoginCustomer/StepPassword/index.tsx +++ b/src/front/Components/Layouts/LoginCustomer/StepPassword/index.tsx @@ -5,7 +5,7 @@ import Form from "@Front/Components/DesignSystem/Form"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import { ValidationError } from "class-validator"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; type IProps = { onSubmit: (e: React.FormEvent | null, values: { [key: string]: string }) => void; validationErrors: ValidationError[]; diff --git a/src/front/Components/Layouts/LoginCustomer/index.tsx b/src/front/Components/Layouts/LoginCustomer/index.tsx index d73013bb..3b4a7670 100644 --- a/src/front/Components/Layouts/LoginCustomer/index.tsx +++ b/src/front/Components/Layouts/LoginCustomer/index.tsx @@ -5,7 +5,7 @@ import { useCallback, useEffect, useState } from "react"; import classes from "./classes.module.scss"; import LandingImage from "./landing-connect.jpeg"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import StepEmail from "./StepEmail"; import StepTotp from "./StepTotp"; import Auth from "@Front/Api/Auth/Customer/Auth"; diff --git a/src/front/Components/Layouts/Rib/index.tsx b/src/front/Components/Layouts/Rib/index.tsx index 6967e9e6..ee2ac0ba 100644 --- a/src/front/Components/Layouts/Rib/index.tsx +++ b/src/front/Components/Layouts/Rib/index.tsx @@ -7,7 +7,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi import { useRouter } from "next/router"; import OfficeRib from "@Front/Api/LeCoffreApi/Notary/OfficeRib/OfficeRib"; import DepositRib from "@Front/Components/DesignSystem/DepositRib"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Loader from "@Front/Components/DesignSystem/Loader"; export default function Rib() { diff --git a/src/front/Components/Layouts/Roles/RolesCreate/index.tsx b/src/front/Components/Layouts/Roles/RolesCreate/index.tsx index c98a7c8e..a0553f55 100644 --- a/src/front/Components/Layouts/Roles/RolesCreate/index.tsx +++ b/src/front/Components/Layouts/Roles/RolesCreate/index.tsx @@ -2,7 +2,7 @@ import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Form from "@Front/Components/DesignSystem/Form"; import TextField from "@Front/Components/DesignSystem/Form/TextField"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import DefaultRolesDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard"; import Module from "@Front/Config/Module"; diff --git a/src/front/Components/Layouts/Roles/RolesInformations/index.tsx b/src/front/Components/Layouts/Roles/RolesInformations/index.tsx index 07970c9f..f8cd78af 100644 --- a/src/front/Components/Layouts/Roles/RolesInformations/index.tsx +++ b/src/front/Components/Layouts/Roles/RolesInformations/index.tsx @@ -2,7 +2,7 @@ import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles"; import Button from "@Front/Components/DesignSystem/Button"; import CheckBox from "@Front/Components/DesignSystem/CheckBox"; import Form from "@Front/Components/DesignSystem/Form"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import DefaultRoleDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard"; import { OfficeRole, Rule, RulesGroup } from "le-coffre-resources/dist/Admin"; diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx index 9c3bcd2c..da5f7936 100644 --- a/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx +++ b/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx @@ -8,7 +8,7 @@ import { useEffect, useState } from "react"; import Check from "@Front/Components/Elements/Icons/Check"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import RadioBox from "@Front/Components/DesignSystem/RadioBox"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import useOpenable from "@Front/Hooks/useOpenable"; import { EType } from "le-coffre-resources/dist/Admin/Subscription"; import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe"; diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx index c62048d6..e19a3dc5 100644 --- a/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx +++ b/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx @@ -9,7 +9,7 @@ import { useEffect, useState } from "react"; import Check from "@Front/Components/Elements/Icons/Check"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import RadioBox from "@Front/Components/DesignSystem/RadioBox"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import useOpenable from "@Front/Hooks/useOpenable"; // import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe"; // import { EType } from "le-coffre-resources/dist/Admin/Subscription"; diff --git a/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx index 371ec226..4dc1ed1c 100644 --- a/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx +++ b/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx @@ -3,7 +3,7 @@ import classes from "./classes.module.scss"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import { useCallback, useEffect, useState } from "react"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import useOpenable from "@Front/Hooks/useOpenable"; import MessageBox from "@Front/Components/Elements/MessageBox"; import Link from "next/link"; diff --git a/src/front/Components/Layouts/Users/UserInformations/index.tsx b/src/front/Components/Layouts/Users/UserInformations/index.tsx index e3f618df..2ffc406f 100644 --- a/src/front/Components/Layouts/Users/UserInformations/index.tsx +++ b/src/front/Components/Layouts/Users/UserInformations/index.tsx @@ -4,7 +4,7 @@ import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles"; import LiveVotes from "@Front/Api/LeCoffreApi/SuperAdmin/LiveVotes/LiveVotes"; import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users"; import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; import Switch from "@Front/Components/DesignSystem/Switch"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import DefaultUserDashboard from "@Front/Components/LayoutTemplates/DefaultUserDashboard"; From 9aa4dc8b27b4e3d7b2aad48365bf933e73e9f4e3 Mon Sep 17 00:00:00 2001 From: Max S Date: Thu, 18 Jul 2024 19:18:55 +0200 Subject: [PATCH 3/4] :sparkles: icon button --- .../IconButton/classes.module.scss | 98 +++++++++++++++++++ .../DesignSystem/IconButton/index.tsx | 32 ++++++ .../Components/DesignSystem/Modal/index.tsx | 3 +- .../Components/Layouts/DesignSystem/index.tsx | 14 ++- src/front/Themes/variables.scss | 2 +- 5 files changed, 145 insertions(+), 4 deletions(-) create mode 100644 src/front/Components/DesignSystem/IconButton/classes.module.scss create mode 100644 src/front/Components/DesignSystem/IconButton/index.tsx diff --git a/src/front/Components/DesignSystem/IconButton/classes.module.scss b/src/front/Components/DesignSystem/IconButton/classes.module.scss new file mode 100644 index 00000000..0a0b751c --- /dev/null +++ b/src/front/Components/DesignSystem/IconButton/classes.module.scss @@ -0,0 +1,98 @@ +@import "@Themes/constants.scss"; + +.root { + cursor: pointer; + border-radius: var(--button-icon-button-radius, 8px); + + svg { + width: 24px; + min-width: 24px; + stroke: var(--button-icon-button-default-default); + } + + &:hover { + svg { + stroke: var(--button-icon-button-default-hovered); + } + } + + &.neutral { + background: var(--button-icon-button-neutral-default); + + svg { + stroke: var(--button-icon-button-default-default); + } + + &:hover { + background: var(--button-icon-button-neutral-hovered); + + svg { + stroke: var(--button-icon-button-default-hovered); + } + } + } + + &.primary { + background: var(--button-icon-button-primary-default); + + svg { + stroke: var(--button-icon-button-primary-contrast); + } + + &:hover { + background: var(--button-icon-button-primary-hovered); + } + } + + &.error { + background: var(--button-icon-button-error-default); + + svg { + stroke: var(--button-icon-button-error-contrast); + } + + &:hover { + background: var(--button-icon-button-error-hovered); + } + } + &.success { + background: var(--button-icon-button-success-default); + + svg { + stroke: var(--button-icon-button-success-contrast); + } + + &:hover { + background: var(--button-icon-button-success-hovered); + } + } + + &.warning { + background: var(--button-icon-button-warning-default); + + svg { + stroke: var(--button-icon-button-warning-contrast); + } + + &:hover { + background: var(--button-icon-button-warning-hovered); + } + } + + &.info { + background: var(--button-icon-button-info-default); + + svg { + stroke: var(--button-icon-button-info-contrast); + } + + &:hover { + background: var(--button-icon-button-info-hovered); + } + } + + &.disabled { + cursor: default; + opacity: var(--opacity-disabled, 0.3); + } +} diff --git a/src/front/Components/DesignSystem/IconButton/index.tsx b/src/front/Components/DesignSystem/IconButton/index.tsx new file mode 100644 index 00000000..817cee68 --- /dev/null +++ b/src/front/Components/DesignSystem/IconButton/index.tsx @@ -0,0 +1,32 @@ +import classNames from "classnames"; +import React from "react"; + +import classes from "./classes.module.scss"; + +export enum EIconButtonVariant { + DEFAULT = "default", + NEUTRAL = "neutral", + PRIMARY = "primary", + ERROR = "error", + SUCCESS = "success", + WARNING = "warning", + INFO = "info", +} + +type IProps = { + icon: React.ReactNode; + onClick?: React.MouseEventHandler | undefined; + variant?: EIconButtonVariant; + disabled?: boolean; + className?: string; +}; + +export default function IconButton(props: IProps) { + const { icon, onClick, className, variant = EIconButtonVariant.DEFAULT, disabled = false } = props; + + return ( + + {icon} + + ); +} diff --git a/src/front/Components/DesignSystem/Modal/index.tsx b/src/front/Components/DesignSystem/Modal/index.tsx index 1acfbab7..61022860 100644 --- a/src/front/Components/DesignSystem/Modal/index.tsx +++ b/src/front/Components/DesignSystem/Modal/index.tsx @@ -5,6 +5,7 @@ import React from "react"; import Typography, { ETypo } from "../Typography"; import { XMarkIcon } from "@heroicons/react/24/outline"; +import IconButton, { EIconButtonVariant } from "../IconButton"; type IProps = { className?: string; @@ -45,7 +46,7 @@ export default function Modal(props: IProps) { )}>
{title && {title}} - + }/>
{children}
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx index 8a2a6a0a..7a60cacd 100644 --- a/src/front/Components/Layouts/DesignSystem/index.tsx +++ b/src/front/Components/Layouts/DesignSystem/index.tsx @@ -6,13 +6,13 @@ import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag" import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography"; import Tabs from "@Front/Components/Elements/Tabs"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; -import { ArrowLongLeftIcon, ArrowLongRightIcon } from "@heroicons/react/24/outline"; +import { ArrowLongLeftIcon, ArrowLongRightIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { useCallback, useMemo, useState } from "react"; import classes from "./classes.module.scss"; import useOpenable from "@Front/Hooks/useOpenable"; import Modal from "@Front/Components/DesignSystem/Modal"; -import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm"; +import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton"; export default function DesignSystem() { const { isOpen, open, close } = useOpenable(); @@ -281,6 +281,16 @@ export default function DesignSystem() { Info
+
+ } variant={EIconButtonVariant.DEFAULT} /> + } variant={EIconButtonVariant.NEUTRAL} /> + } variant={EIconButtonVariant.PRIMARY} /> + } variant={EIconButtonVariant.ERROR} /> + } variant={EIconButtonVariant.SUCCESS} /> + } variant={EIconButtonVariant.WARNING} /> + } variant={EIconButtonVariant.INFO} /> + } variant={EIconButtonVariant.INFO} disabled /> +
diff --git a/src/front/Themes/variables.scss b/src/front/Themes/variables.scss index ef4cc7da..6661f268 100644 --- a/src/front/Themes/variables.scss +++ b/src/front/Themes/variables.scss @@ -565,7 +565,7 @@ --modal-spacing: var(--spacing-md); --navigation-radius: var(--radius-none); --notification-radius: var(--radius-minimal); - --opacity-disabled: 1.875rem; + --opacity-disabled: 0.3; --radius-none: 0px; --radius-minimal: var(--radius-md); --radius-rounded: var(--radius-lg); From ccad35be6c87d3cdf13b421fe2281196428fd9d6 Mon Sep 17 00:00:00 2001 From: Max S Date: Thu, 18 Jul 2024 19:37:16 +0200 Subject: [PATCH 4/4] fix button primary border-color --- .../DesignSystem/Button/classes.module.scss | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/front/Components/DesignSystem/Button/classes.module.scss b/src/front/Components/DesignSystem/Button/classes.module.scss index 061818c4..84428234 100644 --- a/src/front/Components/DesignSystem/Button/classes.module.scss +++ b/src/front/Components/DesignSystem/Button/classes.module.scss @@ -14,6 +14,7 @@ user-select: none; cursor: pointer; font-family: var(--font-text-family); + border: 1px solid var(--button-contained-primary-default-border, rgba(0, 0, 0, 0)); svg { width: 18px; @@ -26,15 +27,15 @@ &[variant="primary"] { color: var(--color-primary-500); - border: 1px solid var(--button-contained-primary-default-border, rgba(0, 0, 0, 0)); background: var(--button-contained-primary-default-background, #005bcb); + border-color: var(--button-contained-primary-default-border); svg { stroke: var(--button-contained-primary-default-contrast); } &:hover { - border: 1px solid var(--button-contained-primary-hovered-border, rgba(0, 0, 0, 0)); + border-color: var(--button-contained-primary-hovered-border); background: var(--button-contained-primary-hovered-background, #0040a4); svg { @@ -44,7 +45,7 @@ &:focus, &:active { - border: 1px solid var(--button-contained-primary-pressed-border, rgba(0, 0, 0, 0)); + border-color: var(--button-contained-primary-pressed-border); background: var(--button-contained-primary-pressed-background, #013391); svg { @@ -53,12 +54,16 @@ } &[styleType="outlined"] { + border-color: var(--button-outlined-primary-default-border); + svg { stroke: var(--button-outlined-primary-default-contrast); } &:hover { background-color: var(--color-primary-50); + border-color: var(--button-outlined-primary-hovered-border); + svg { stroke: var(--button-outlined-primary-hovered-contrast); } @@ -68,7 +73,7 @@ &:active { background-color: var(--color-primary-100); color: var(--color-primary-700); - border-color: var(--color-primary-700); + border-color: var(--button-outlined-primary-pressed-border); svg { stroke: var(--button-outlined-primary-pressed-contrast); @@ -83,6 +88,7 @@ &:hover { background-color: transparent; + border-color: var(--button-outlined-primary-hovered-border); svg { stroke: var(--button-text-primary-hovered-contrast);