4nk/lecoffre-back
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add burger menu & navigation links (#6)

Browse Source 
solve this ticket :
https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28293&t=k&c=657791f3b1c64e6cbbf22f9378c0bdae

Co-authored-by: OxSaitama <arnaud.daubernatali@smart-chain.fr>
This commit is contained in:
Arnaud D. Natali 2023-02-28 10:06:41 +01:00 committed by GitHub
parent ff0e493b67
commit 9bb5241f46
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 266 additions and 338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
Dockerfiles/Dockerfile.front
View File

@ -1,7 +1,7 @@
# Install dependencies only when needed
FROM node:19-alpine AS deps
WORKDIR tezosLink
WORKDIR LEcoffre
COPY package.json ./
@ -10,27 +10,27 @@ RUN npm install --frozen-lockfile
# Rebuild the source code only when needed
FROM node:19-alpine AS builder
WORKDIR tezosLink
WORKDIR LEcoffre
COPY . .
COPY --from=deps tezosLink/node_modules ./node_modules
COPY --from=deps LEcoffre/node_modules ./node_modules
RUN npm run build
# Production image, copy all the files and run next
FROM node:19-alpine AS production
WORKDIR tezosLink
WORKDIR LEcoffre
RUN adduser -D tezoslinkuser --uid 10000 && chown -R tezoslinkuser .
RUN adduser -D lecoffreuser --uid 10000 && chown -R lecoffreuser .
COPY --from=builder --chown=tezoslinkuser tezosLink/node_modules ./node_modules
COPY --from=builder --chown=tezoslinkuser tezosLink/public ./public
COPY --from=builder --chown=tezoslinkuser tezosLink/dist/front ./src/front
COPY --from=builder --chown=tezoslinkuser tezosLink/.next ./.next
COPY --from=builder --chown=lecoffreuser LEcoffre/node_modules ./node_modules
COPY --from=builder --chown=lecoffreuser LEcoffre/public ./public
COPY --from=builder --chown=lecoffreuser LEcoffre/dist/front ./src/front
COPY --from=builder --chown=lecoffreuser LEcoffre/.next ./.next
COPY --from=builder --chown=tezoslinkuser tezosLink/package.json ./package.json
#COPY --from=builder --chown=tezoslinkuser src/front/next.config.js ./next.config.js
COPY --from=builder --chown=lecoffreuser LEcoffre/package.json ./package.json
#COPY --from=builder --chown=lecoffreuser src/front/next.config.js ./next.config.js
USER tezoslinkuser
USER lecoffreuser
CMD ["npm", "run web:start"]

31
src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss Normal file
View File

@ -0,0 +1,31 @@
@import "@Themes/constants.scss";
.root {
display: flex;
flex-direction: column;
background-color: $white;
box-shadow: $shadow-nav;
padding: 24px;
position: absolute;
top: 83px;
width: 100%;
left: 0;
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;
}

38
src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx Normal file
View File

@ -0,0 +1,38 @@
import LogOutButton from "@Front/Components/DesignSystem/LogOutButton";
import React from "react";
import NavigationLink from "../../NavigationLink";
import classes from "./classes.module.scss";
type IProps = {
isOpen: boolean;
closeModal: () => void;
};
type IState = {};
export default class BurgerModal extends React.Component<IProps, IState> {
// TODO isEnabled depending on role given by DB
public override render(): JSX.Element | null {
if (!this.props.isOpen) return null;
return (
<>
<div className={classes["background"]} onClick={this.props.closeModal} />
<div className={classes["root"]}>
<NavigationLink text="Dossiers en cours" />
<NavigationLink text="Dossiers archivés" />
<NavigationLink text="Ancrage" />
<NavigationLink text="Collaborateurs" />
<NavigationLink text="Paramétrage des listes de pièces" />
<NavigationLink text="Gestion des utilisateurs" />
<NavigationLink text="Gestion des offices" />
<NavigationLink text="Gestion des noms de domaine" />
<NavigationLink text="Mon compte" />
<NavigationLink text="CGU" />
<NavigationLink path={"/design-system"} text="Design System" />
<NavigationLink path={"/"} text="Home" />
<div className={classes["separator"]} />
<LogOutButton />
</div>
</>
);
}
}

9
src/front/Components/DesignSystem/Header/BurgerMenu/classes.module.scss Normal file
View File

@ -0,0 +1,9 @@
@import "@Themes/constants.scss";
.root {
.burger-icon {
cursor: pointer;
height: 24px;
width: 24px;
}
}

44
src/front/Components/DesignSystem/Header/BurgerMenu/index.tsx Normal file
View File

@ -0,0 +1,44 @@
import React from "react";
import classes from "./classes.module.scss";
import Image from "next/image";
import BurgerIcon from "@Assets/icons/burger.svg";
import CrossIcon from "@Assets/icons/cross.svg";
import BurgerModal from "./BurgerModal";
type IProps = {};
type IState = {
isModalOpen: boolean;
};
export default class BurgerMenu extends React.Component<IProps, IState> {
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 (
<div className={classes["root"]}>
<Image
alt="burger"
src={this.state.isModalOpen ? CrossIcon : BurgerIcon}
className={classes["burger-icon"]}
onClick={this.openModal}
/>
{this.state.isModalOpen && <BurgerModal isOpen={this.state.isModalOpen} closeModal={this.closeModal} />}
</div>
);
}
private openModal() {
this.setState({ isModalOpen: true });
}
private closeModal() {
this.setState({ isModalOpen: false });
}
}

2
src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
View File

@ -19,7 +19,7 @@ class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
return (
<Link href={this.props.path ?? ""} className={classNames(classes["root"], this.props.isActive && [classes["active"]])}>
<div className={classes["content"]}>
<Typography typo={ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
<Typography typo={this.props.isActive ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
</div>
{this.props.isActive && <div className={classes["underline"]} />}
</Link>

0
src/front/Components/DesignSystem/Header/Profile/ProfileLink/classes.module.scss → src/front/Components/DesignSystem/Header/NavigationLink/classes.module.scss
View File

41
src/front/Components/DesignSystem/Header/NavigationLink/index.tsx Normal file
View File

@ -0,0 +1,41 @@
import React from "react";
import classes from "./classes.module.scss";
import Link from "next/link";
import classNames from "classnames";
import router from "next/router";
import { useEffect, useState } from "react";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
type IPropsClass = {
text: string | JSX.Element;
path?: string;
onClick?: () => void;
isEnabled?: boolean;
isActive?: boolean;
};
type IStateClass = {};
class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
static defaultProps = { isEnabled: true };
public override render(): JSX.Element | null {
if (!this.props.isEnabled) return null;
return (
<Link
href={this.props.path ?? ""}
className={classNames(classes["root"], this.props.isActive && [classes["active"]])}
onClick={this.props.onClick}>
<div className={classes["content"]}>
<Typography typo={this.props.isActive ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
</div>
</Link>
);
}
}
export default function NavigationLink(props: IPropsClass) {
const [url, setUrl] = useState("");
useEffect(() => setUrl(router?.asPath), []);
const isActive = url === props.path;
return <NavigationLinkClass {...props} isActive={isActive} />;
}

14
src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
View File

@ -3,8 +3,8 @@
.root {
display: flex;
flex-direction: column;
width: 300px;
max-height: 80%;
width: 390px;
max-height: 80vh;
background-color: $white;
box-shadow: $shadow-nav;
padding: 24px;
@ -24,6 +24,16 @@
margin-top: 24px;
overflow: hidden;
overflow-y: auto;
.missing-notification {
padding: 56px 0;
text-align: center;
}
}
@media (max-width: $screen-s) {
width: 100%;
left: 0;
}
}

8
src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import CloseIcon from "@Assets/icons/cross.svg";
import Image from "next/image";
import ToastHandler from "@Front/Components/DesignSystem/Toasts/ToastsHandler";
@ -41,8 +41,10 @@ export default class NotificationModal extends React.Component<IProps, IState> {
<div className={classes["notification-body"]}>
<>
{Toasts.getInstance().toasts.length === 0 ? (
<div>
<Typography typo={ITypo.P_16}>No notification yet</Typography>
<div className={classes["missing-notification"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
Vous n’avez pas de notifications.
</Typography>
</div>
) : (
<ToastHandler />

28
src/front/Components/DesignSystem/Header/Profile/ProfileLink/index.tsx
View File

@ -1,28 +0,0 @@
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<IPropsClass, IStateClass> {
public override render(): JSX.Element | null {
if (this.props.isEnabled === false) return null;
return (
<Link href={this.props.path ?? ""} className={classNames(classes["root"])}>
<div className={classes["content"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
{this.props.text}
</Typography>
</div>
</Link>
);
}
}

12
src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import classes from "./classes.module.scss";
import ProfileLink from "../ProfileLink";
import NavigationLink from "../../NavigationLink";
import LogOutButton from "@Front/Components/DesignSystem/LogOutButton";
type IProps = {
@ -17,10 +17,12 @@ export default class ProfileModal extends React.Component<IProps, IState> {
<>
<div className={classes["background"]} onClick={this.props.closeModal} />
<div className={classes["root"]}>
<ProfileLink text="Mon compte" path={""} isEnabled={true} />
<ProfileLink text="Gestion des utilisateurs" path={""} isEnabled={true} />
<ProfileLink text="Gestion des offices" path={""} isEnabled={true} />
<ProfileLink text="CGU" path={""} isEnabled={true} />
<NavigationLink text="Mon compte" />
<NavigationLink text="Gestion des utilisateurs" />
<NavigationLink text="Gestion des offices" />
<NavigationLink text="CGU" />
<NavigationLink path={"/design-system"} text="Design System" />
<NavigationLink path={"/"} text="Home" />
<div className={classes["separator"]} />
<LogOutButton />
</div>

30
src/front/Components/DesignSystem/Header/classes.module.scss
View File

@ -18,9 +18,33 @@
}
.right-section {
display: inline-flex;
> :first-child {
margin-right: 32px;
.profile-section {
display: inline-flex;
> :first-child {
margin-right: 32px;
}
@media (max-width: $screen-ls) {
display: none;
}
}
.notification-section {
display: inline-flex;
> :first-child {
margin-right: 32px;
}
}
}
.burger-menu {
display: none;
@media (max-width: $screen-ls) {
display: inline-flex;
.icon {
width: 24px;
height: 24px;
}
}
}
}

12
src/front/Components/DesignSystem/Header/index.tsx
View File

@ -6,6 +6,7 @@ import Link from "next/link";
import Navigation from "./Navigation";
import Notifications from "./Notifications";
import Profile from "./Profile";
import BurgerMenu from "./BurgerMenu";
type IProps = {};
type IState = {};
@ -21,8 +22,15 @@ export default class Header extends React.Component<IProps, IState> {
</div>
<Navigation />
<div className={classes["right-section"]}>
<Notifications />
<Profile />
<div className={classes["notification-section"]}>
<Notifications />
</div>
<div className={classes["profile-section"]}>
<Profile />
</div>
<div className={classes["burger-menu"]}>
<BurgerMenu />
</div>
</div>
</div>
);

4
src/front/Components/DesignSystem/LogIn/classes.module.scss
View File

@ -1,4 +0,0 @@
@import "@Themes/constants.scss";
.root {
}

13
src/front/Components/DesignSystem/LogIn/index.tsx
View File

@ -1,13 +0,0 @@
import React from "react";
import classes from "./classes.module.scss";
type IProps = {};
type IState = {
logged: boolean;
};
export default class Login extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return <div className={classes["root"]}></div>;
}
}

6
src/front/Components/DesignSystem/LogOutButton/index.tsx
View File

@ -2,7 +2,7 @@ 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";
import Typography, { ITypo } from "../Typography";
type IProps = {};
type IState = {
@ -13,9 +13,7 @@ export default class LogOutButton extends React.Component<IProps, IState> {
public override render(): JSX.Element {
return (
<div className={classes["root"]} onClick={this.disconnect}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
Déconnexion
</Typography>
<Typography typo={ITypo.NAV_HEADER_18}>Déconnexion</Typography>
<Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" />
</div>
);

2
src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss
View File

@ -8,7 +8,7 @@
position: fixed;
transition: opacity 0.2s ease-in-out;
text-align: left;
filter: drop-shadow(0px 9px 18px $shadow-tooltip);
filter: drop-shadow($shadow-tooltip);
opacity: 0;
pointer-events: none;
img {

1
src/front/Components/DesignSystem/Typography/classes.module.scss
View File

@ -61,6 +61,7 @@
font-size: 18px;
line-height: 22px;
letter-spacing: 0.5px;
color: $grey;
}
&.Paragraphe-18-error {

25
src/front/Components/Layouts/DesignSystem/index.tsx
View File

@ -36,9 +36,11 @@ export default class DesignSystem extends BasePage<IProps, IState> {
</div>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.P_18}>
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.
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.
</Typography>
</div>
</div>
@ -68,8 +70,15 @@ export default class DesignSystem extends BasePage<IProps, IState> {
Show Modal
</Button>
<Confirm isOpen={this.state.isModalDisplayed} onClose={this.closeModal} closeBtn header={"Title"} cancelText={"Cancel"} confirmText={"Confirmer"}>
Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat. Elementum malesuada at sit elit.
<Confirm
isOpen={this.state.isModalDisplayed}
onClose={this.closeModal}
closeBtn
header={"Title"}
cancelText={"Cancel"}
confirmText={"Confirmer"}>
Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat.
Elementum malesuada at sit elit.
</Confirm>
</div>
@ -86,14 +95,16 @@ export default class DesignSystem extends BasePage<IProps, IState> {
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>CheckBox component</Typography>
</div>
<CheckBox name="Check Box 1" toolTip="Checkbox with tooltip"/>
<CheckBox name="Check Box 1" toolTip="Checkbox with tooltip" />
<CheckBox name="Check Box 2" />
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>RadioBox component</Typography>
</div>
<RadioBox name="RadioBox" toolTip="Radiobox with tooltip">Radio Box 1</RadioBox>
<RadioBox name="RadioBox" toolTip="Radiobox with tooltip">
Radio Box 1
</RadioBox>
<RadioBox name="RadioBox">Radio Box 2</RadioBox>
</div>
<div className={classes["section"]}>

100
src/front/Components/Layouts/DesignSystem/index.tsx~ea121be (refacto css for profile links)
View File

@ -1,100 +0,0 @@
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<IProps, IState> {
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 (
<DefaultTemplate title={"HomePage"}>
<div className={classes["root"]}>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H1}>Website design System</Typography>
</div>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.P_18}>
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.
</Typography>
</div>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Button components</Typography>
</div>
<Button variant={EButtonVariant.PRIMARY}>Primary</Button>
<Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
<Button variant={EButtonVariant.GHOST}>Ghost</Button>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Toaster component</Typography>
</div>
<Button variant={EButtonVariant.PRIMARY} onClick={this.spawnToast}>
Spawn a toast
</Button>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Modal components</Typography>
</div>
<Button variant={EButtonVariant.PRIMARY} onClick={this.openModal}>
Show Modal
</Button>
<Confirm isOpen={this.state.isModalDisplayed} onClose={this.closeModal} closeBtn header={"Title"} cancelText={"Cancel"} confirmText={"Confirmer"}>
Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat. Elementum malesuada at sit elit.
</Confirm>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>HeaderLink components</Typography>
</div>
<div className={classes["inline-flex"]}>
<HeaderLink text={"Home"} path={"/"} />
<HeaderLink text={"Design-system"} path={"/design-system"} />
</div>
</div>
</div>
</DefaultTemplate>
);
}
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);
}
}

6
src/front/assets/icons/burger.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 18.5H7" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 14.5H3" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 10.5H7" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 6.5H3" stroke="#101010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 518 B

152
src/front/components/Layouts/DesignSystem/index.tsx
View File

@ -1,152 +0,0 @@
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<IProps, IState> {
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 (
<DefaultTemplate title={"HomePage"}>
<div className={classes["root"]}>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H1}>Website design System</Typography>
</div>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.P_18}>
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.
</Typography>
</div>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Button components</Typography>
</div>
<Button variant={EButtonVariant.PRIMARY}>Primary</Button>
<Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
<Button variant={EButtonVariant.GHOST}>Ghost</Button>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Toaster component</Typography>
</div>
<Button variant={EButtonVariant.PRIMARY} onClick={this.spawnToast}>
Spawn a toast
</Button>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Modal components</Typography>
</div>
<Button variant={EButtonVariant.PRIMARY} onClick={this.openModal}>
Show Modal
</Button>
<Confirm
isOpen={this.state.isModalDisplayed}
onClose={this.closeModal}
closeBtn
header={"Title"}
cancelText={"Cancel"}
confirmText={"Confirmer"}>
Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat.
Elementum malesuada at sit elit.
</Confirm>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>HeaderLink components</Typography>
</div>
<div className={classes["inline-flex"]}>
<HeaderLink text={"Home"} path={"/"} />
<HeaderLink text={"Design-system"} path={"/design-system"} />
</div>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>CheckBox component</Typography>
</div>
<CheckBox name="Check Box 1" toolTip="Checkbox with tooltip" />
<CheckBox name="Check Box 2" />
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>RadioBox component</Typography>
</div>
<RadioBox name="RadioBox" toolTip="Radiobox with tooltip">
Radio Box 1
</RadioBox>
<RadioBox name="RadioBox">Radio Box 2</RadioBox>
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Tool tip component</Typography>
</div>
<ToolTip title="toolTip" text="tooltip content" isNotFlex={true} />
</div>
<div className={classes["section"]}>
<div className={classes["sub-section"]}>
<Typography typo={ITypo.H3}>Input component</Typography>
</div>
<div className={classes["sub-section"]}>
<InputField name="input field" fakeplaceholder="input place hodler" />
</div>
<div className={classes["sub-section"]}>
<InputField name="input field" fakeplaceholder="text area place hodler" large={true} />
</div>
<div className={classes["sub-section"]}>
<InputField name="input field" fakeplaceholder="number place hodler" type="number" />
</div>
</div>
</div>
</DefaultTemplate>
);
}
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);
}
}

2
src/front/themes/constants.scss
View File

@ -1,6 +1,6 @@
// $screen-xl: 2559px;
$screen-l: 1440px;
$screen-ls: 1210px;
$screen-ls: 1300px;
$screen-m: 1023px;
$screen-s: 767px;
// $screen-xs: 424px;