From c4659e99e835ac98d5f4c746de58ef69c217443c Mon Sep 17 00:00:00 2001 From: "Arnaud D. Natali" <79214488+0xSaitama@users.noreply.github.com> Date: Mon, 27 Feb 2023 12:29:34 +0100 Subject: [PATCH] add profile (#5) solve this ticket : https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28293&t=k&c=657791f3b1c64e6cbbf22f9378c0bdae add profile content --------- Co-authored-by: OxSaitama Co-authored-by: Hugo Lextrait --- .../Profile/ProfileLink/classes.module.scss | 12 ++ .../Header/Profile/ProfileLink/index.tsx | 28 ++++ .../Profile/ProfileModal/classes.module.scss | 30 ++++ .../Header/Profile/ProfileModal/index.tsx | 30 ++++ .../Header/Profile/classes.module.scss | 1 + .../DesignSystem/Header/Profile/index.tsx | 27 +++- .../DesignSystem/Header/classes.module.scss | 1 + .../LogOutButton/classes.module.scss | 14 ++ .../DesignSystem/LogOutButton/index.tsx | 27 ++++ ...sx~ea121be (refacto css for profile links) | 100 +++++++++++++ src/front/assets/icons/disconnect.svg | 4 + .../components/Layouts/DesignSystem/index.tsx | 141 ++++++++++++++++++ src/front/index.scss | 1 + 13 files changed, 414 insertions(+), 2 deletions(-) create mode 100644 src/front/Components/DesignSystem/Header/Profile/ProfileLink/classes.module.scss create mode 100644 src/front/Components/DesignSystem/Header/Profile/ProfileLink/index.tsx create mode 100644 src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss create mode 100644 src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx create mode 100644 src/front/Components/DesignSystem/LogOutButton/classes.module.scss create mode 100644 src/front/Components/DesignSystem/LogOutButton/index.tsx create mode 100644 src/front/Components/Layouts/DesignSystem/index.tsx~ea121be (refacto css for profile links) create mode 100644 src/front/assets/icons/disconnect.svg create mode 100644 src/front/components/Layouts/DesignSystem/index.tsx diff --git a/src/front/Components/DesignSystem/Header/Profile/ProfileLink/classes.module.scss b/src/front/Components/DesignSystem/Header/Profile/ProfileLink/classes.module.scss new file mode 100644 index 00000000..d8d4c9a3 --- /dev/null +++ b/src/front/Components/DesignSystem/Header/Profile/ProfileLink/classes.module.scss @@ -0,0 +1,12 @@ +@import "@Themes/constants.scss"; + +.root { + display: flex; + position: relative; + width: fit-content; + margin: auto; + + .content{ + align-content: center; + } +} \ No newline at end of file diff --git a/src/front/Components/DesignSystem/Header/Profile/ProfileLink/index.tsx b/src/front/Components/DesignSystem/Header/Profile/ProfileLink/index.tsx new file mode 100644 index 00000000..a0d13494 --- /dev/null +++ b/src/front/Components/DesignSystem/Header/Profile/ProfileLink/index.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import classes from "./classes.module.scss"; +import Link from "next/link"; +import classNames from "classnames"; +import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; + +type IPropsClass = { + text: string | JSX.Element; + path?: string; + isEnabled?: boolean; +}; + +type IStateClass = {}; + +export default class ProfileLink extends React.Component { + public override render(): JSX.Element | null { + if (this.props.isEnabled === false) return null; + return ( + +
+ + {this.props.text} + +
+ + ); + } +} diff --git a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss new file mode 100644 index 00000000..12e7da61 --- /dev/null +++ b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss @@ -0,0 +1,30 @@ +@import "@Themes/constants.scss"; + +.root { + display: flex; + flex-direction: column; + background-color: $white; + box-shadow: $shadow-nav; + padding: 24px; + position: absolute; + top: 107px; + right: 66px; + text-align: center; + > *:not(:last-child) { + margin-bottom: 24px; + } + + .separator { + width: 100%; + border: 1px solid $grey-medium; + } +} + +.background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparent; +} diff --git a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx new file mode 100644 index 00000000..e399cb1a --- /dev/null +++ b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import classes from "./classes.module.scss"; +import ProfileLink from "../ProfileLink"; +import LogOutButton from "@Front/Components/DesignSystem/LogOutButton"; + +type IProps = { + isOpen: boolean; + closeModal: () => void; +}; +type IState = {}; + +export default class ProfileModal extends React.Component { + // TODO isEnabled depending on role given by DB + public override render(): JSX.Element | null { + if (!this.props.isOpen) return null; + return ( + <> +
+
+ + + + +
+ +
+ + ); + } +} diff --git a/src/front/Components/DesignSystem/Header/Profile/classes.module.scss b/src/front/Components/DesignSystem/Header/Profile/classes.module.scss index 43b03265..b02c7865 100644 --- a/src/front/Components/DesignSystem/Header/Profile/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/Profile/classes.module.scss @@ -2,6 +2,7 @@ .root { .profile-icon{ + cursor: pointer; height: 24px; width: 24px; } diff --git a/src/front/Components/DesignSystem/Header/Profile/index.tsx b/src/front/Components/DesignSystem/Header/Profile/index.tsx index 8605842b..2483c9fa 100644 --- a/src/front/Components/DesignSystem/Header/Profile/index.tsx +++ b/src/front/Components/DesignSystem/Header/Profile/index.tsx @@ -2,14 +2,37 @@ import React from "react"; import classes from "./classes.module.scss"; import Image from "next/image"; import ProfileIcon from "@Assets/icons/user.svg"; +import ProfileModal from "./ProfileModal"; type IProps = {}; -type IState = {}; +type IState = { + isModalOpen: boolean; +}; export default class Profile extends React.Component { + + constructor(props: IProps) { + super(props); + this.state = { + isModalOpen: false, + }; + this.openModal = this.openModal.bind(this); + this.closeModal = this.closeModal.bind(this); + + } + public override render(): JSX.Element { return
- notifications + profile + {this.state.isModalOpen && }
; } + + private openModal() { + this.setState({ isModalOpen: true }); + }; + + private closeModal() { + this.setState({ isModalOpen: false }); + }; } diff --git a/src/front/Components/DesignSystem/Header/classes.module.scss b/src/front/Components/DesignSystem/Header/classes.module.scss index 52e65563..2a9c9778 100644 --- a/src/front/Components/DesignSystem/Header/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/classes.module.scss @@ -8,6 +8,7 @@ background-color: $white; box-shadow: $shadow-nav; padding: 0 48px; + position: relative; .logo-container { .logo { diff --git a/src/front/Components/DesignSystem/LogOutButton/classes.module.scss b/src/front/Components/DesignSystem/LogOutButton/classes.module.scss new file mode 100644 index 00000000..684f1bec --- /dev/null +++ b/src/front/Components/DesignSystem/LogOutButton/classes.module.scss @@ -0,0 +1,14 @@ +@import "@Themes/constants.scss"; + +.root { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + + .disconnect-icon { + margin-left: 8px; + width: 24px; + height: 24px; + } +} \ No newline at end of file diff --git a/src/front/Components/DesignSystem/LogOutButton/index.tsx b/src/front/Components/DesignSystem/LogOutButton/index.tsx new file mode 100644 index 00000000..48720703 --- /dev/null +++ b/src/front/Components/DesignSystem/LogOutButton/index.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import Image from "next/image"; +import DisconnectIcon from "@Assets/icons/disconnect.svg"; +import classes from "./classes.module.scss"; +import Typography, { ITypo, ITypoColor } from "../Typography"; + +type IProps = {}; +type IState = { + isLogged: boolean; +}; + +export default class LogOutButton extends React.Component { + public override render(): JSX.Element { + return ( +
+ + Déconnexion + + disconnect +
+ ); + } + + private disconnect() { + console.log("disconnected"); + } +} diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx~ea121be (refacto css for profile links) b/src/front/Components/Layouts/DesignSystem/index.tsx~ea121be (refacto css for profile links) new file mode 100644 index 00000000..529baa0d --- /dev/null +++ b/src/front/Components/Layouts/DesignSystem/index.tsx~ea121be (refacto css for profile links) @@ -0,0 +1,100 @@ +import BasePage from "@Front/Components/Layouts/Base"; +import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; +import classes from "./classes.module.scss"; +import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; +import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; +import Toasts, { IToast } from "@Front/Stores/Toasts"; +import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink"; + +type IState = { + isModalDisplayed: boolean; +}; +type IProps = {}; + +export default class DesignSystem extends BasePage { + constructor(props: IProps) { + super(props); + this.state = { + isModalDisplayed: false, + }; + this.openModal = this.openModal.bind(this); + this.closeModal = this.closeModal.bind(this); + } + + public override render(): JSX.Element { + return ( + +
+
+
+ Website design System +
+
+ + This page allows to gather all the design system of the site. A Design System is a library of components, visuals and principles with reusable code. This evolving kit offers a UX and UI repository for + designers and developers of digital products and services. The construction of a design system offers many advantages. This solution facilitates the work of the teams and reduces the "design debt" and the + "technical debt". The result is a coherent ecosystem and therefore a better experience for users and customers. + +
+
+ +
+
+ Button components +
+ + + +
+ +
+
+ Toaster component +
+ +
+
+
+ Modal components +
+ + + + Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat. Elementum malesuada at sit elit. + +
+ +
+
+ HeaderLink components +
+
+ + +
+
+
+ + ); + } + private openModal() { + this.setState({ + isModalDisplayed: true, + }); + } + private closeModal() { + this.setState({ + isModalDisplayed: false, + }); + } + + private spawnToast() { + const toast: IToast = { title: "Un collaborateur veut rejoindre votre office", text: "12:00 - 1 fev 2023" }; + Toasts.getInstance().open(toast); + } +} diff --git a/src/front/assets/icons/disconnect.svg b/src/front/assets/icons/disconnect.svg new file mode 100644 index 00000000..270b3dc4 --- /dev/null +++ b/src/front/assets/icons/disconnect.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/front/components/Layouts/DesignSystem/index.tsx b/src/front/components/Layouts/DesignSystem/index.tsx new file mode 100644 index 00000000..660d68fc --- /dev/null +++ b/src/front/components/Layouts/DesignSystem/index.tsx @@ -0,0 +1,141 @@ +import BasePage from "@Front/Components/Layouts/Base"; +import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; +import classes from "./classes.module.scss"; +import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; +import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; +import Toasts, { IToast } from "@Front/Stores/Toasts"; +import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; +import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink"; +import CheckBox from "@Front/Components/DesignSystem/CheckBox"; +import ToolTip from "@Front/Components/DesignSystem/ToolTip"; +import RadioBox from "@Front/Components/DesignSystem/RadioBox"; +// import Input from "@Front/Components/DesignSystem/Input"; +import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"; + +type IState = { + isModalDisplayed: boolean; +}; +type IProps = {}; + +export default class DesignSystem extends BasePage { + constructor(props: IProps) { + super(props); + this.state = { + isModalDisplayed: false, + }; + this.openModal = this.openModal.bind(this); + this.closeModal = this.closeModal.bind(this); + } + + public override render(): JSX.Element { + return ( + +
+
+
+ Website design System +
+
+ + This page allows to gather all the design system of the site. A Design System is a library of components, visuals and principles with reusable code. This evolving kit offers a UX and UI repository for + designers and developers of digital products and services. The construction of a design system offers many advantages. This solution facilitates the work of the teams and reduces the "design debt" and the + "technical debt". The result is a coherent ecosystem and therefore a better experience for users and customers. + +
+
+ +
+
+ Button components +
+ + + +
+ +
+
+ Toaster component +
+ +
+
+
+ Modal components +
+ + + + Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat. Elementum malesuada at sit elit. + +
+ +
+
+ HeaderLink components +
+
+ + +
+
+
+
+ CheckBox component +
+ + +
+
+
+ RadioBox component +
+ Radio Box 1 + Radio Box 2 +
+
+
+ Tool tip component +
+ +
+
+
+ Input component +
+
+ +
+
+ +
+
+ +
+
+
+ + ); + } + private openModal() { + this.setState({ + isModalDisplayed: true, + }); + } + private closeModal() { + this.setState({ + isModalDisplayed: false, + }); + } + private spawnToast() { + const toast: IToast = { + title: "Un collaborateur veut rejoindre votre office", + text: "12:00 - 1 fev 2023", + }; + Toasts.getInstance().open(toast); + } +} diff --git a/src/front/index.scss b/src/front/index.scss index b36c6f92..a1fbced5 100644 --- a/src/front/index.scss +++ b/src/front/index.scss @@ -30,6 +30,7 @@ input { a, a:visited { + color: initial; text-decoration: none !important; opacity: 1; transition: opacity 0.15s ease-in-out;