diff --git a/src/front/Components/DesignSystem/Autocomplete/index.tsx b/src/front/Components/DesignSystem/Autocomplete/index.tsx index 8ecfc3db..a5169574 100644 --- a/src/front/Components/DesignSystem/Autocomplete/index.tsx +++ b/src/front/Components/DesignSystem/Autocomplete/index.tsx @@ -6,18 +6,19 @@ import { IOption } from "../Dropdown/DropdownMenu/DropdownOption"; import SearchBar from "../SearchBar"; import Typography, { ETypo, ETypoColor } from "../Typography"; import classes from "./classes.module.scss"; +import { getLabel } from "../Dropdown"; type IProps = { options: IOption[]; placeholder?: string; disabled?: boolean; label?: string; - onSelect?: (option: IOption) => void; + onSelectionChange?: (option: IOption | null) => void; selectedOption?: IOption | null; }; export default function Autocomplete(props: IProps) { - const { options, placeholder, disabled, label, selectedOption: selectedOptionProps } = props; + const { onSelectionChange, options, placeholder, disabled, label, selectedOption: selectedOptionProps } = props; const [selectedOption, setSelectedOption] = useState(selectedOptionProps ?? null); const [searchValue, setSearchValue] = useState(""); const [filteredOptions, setFilteredOptions] = useState(options); @@ -46,29 +47,33 @@ export default function Autocomplete(props: IProps) { [openable], ); + const handleChange = useCallback( + (option: IOption | null) => { + setSelectedOption(option); + onSelectionChange?.(option); + }, + [onSelectionChange], + ); + useEffect(() => { setSelectedOption(selectedOptionProps ?? null); }, [selectedOptionProps]); const handleSelectOption = useCallback( - (option: IOption) => { - setSelectedOption(option); - setSearchValue(getLabel(option) || ""); + (newOption: IOption, _options: IOption[]) => { + handleChange(newOption); + setSearchValue(getLabel(newOption) || ""); openable.close(); }, - [openable], + [handleChange, openable], ); - function getLabel(option: IOption | null): string | null { - if (!option) return null; - if (typeof option.label === "string") { - return option.label; - } - return `${option.label.text} ${option.label.subtext}`; - } - return ( - +
{label && ( @@ -76,7 +81,14 @@ export default function Autocomplete(props: IProps) { )}
- + handleChange(null)} + onFocus={openable.open} + /> ); } diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/classes.module.scss b/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/classes.module.scss new file mode 100644 index 00000000..9ebc273e --- /dev/null +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/classes.module.scss @@ -0,0 +1,20 @@ +@import "@Themes/constants.scss"; + +.root { + width: fit-content; + height: 32px; + + display: inline-flex; + padding: 4px 12px; + align-items: center; + gap: 8px; + + border-radius: var(--input-chip-radius, 360px); + border: 1px solid var(--input-chip-default-border, #b7d1f1); + background: var(--input-chip-default-background, #e5eefa); + + &:hover { + background-color: var(--input-chip-hovered-background); + border-color: var(--input-chip-hovered-border); + } +} diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/index.tsx b/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/index.tsx new file mode 100644 index 00000000..2bcfa230 --- /dev/null +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/index.tsx @@ -0,0 +1,26 @@ +import { XMarkIcon } from "@heroicons/react/24/outline"; +import classNames from "classnames"; +import React from "react"; + +import IconButton from "../../IconButton"; +import Typography, { ETypo, ETypoColor } from "../../Typography"; +import classes from "./classes.module.scss"; + +type IProps = { + text: string; + className?: string; + onDelete?: () => void; +}; + +export default function Chip(props: IProps) { + const { className, text, onDelete } = props; + + return ( +
+ + {text} + + } onClick={onDelete} /> +
+ ); +} diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/classes.module.scss b/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/classes.module.scss new file mode 100644 index 00000000..fa4937cd --- /dev/null +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/classes.module.scss @@ -0,0 +1,73 @@ +@import "@Themes/constants.scss"; + +.root { + border-radius: var(--input-radius, 0px); + border: 1px solid var(--input-main-border-filled, #6d7e8a); + background: var(--input-background, #fff); + + svg { + stroke: var(--button-icon-button-default-default); + } + + &:hover { + border-radius: var(--input-radius, 0px); + border: 1px solid var(--input-main-border-hovered, #b4bec5); + background: var(--input-background, #fff); + } + + &[data-has-value="true"] { + border-radius: var(--input-radius, 0px); + border: 1px solid var(--input-main-border-filled, #6d7e8a); + background: var(--input-background, #fff); + } + + &[data-is-focused="true"] { + border-radius: var(--input-radius, 0px); + border: 1px solid var(--input-main-border-focused, #005bcb); + background: var(--input-background, #fff); + } + + &[data-is-disabled="true"] { + opacity: var(--opacity-disabled, 0.3); + pointer-events: none; + } + + .content { + display: flex; + align-items: center; + align-content: center; + gap: 16px var(--spacing-2, 16px); + flex-wrap: wrap; + + min-height: 56px; + + padding: var(--spacing-1-5, 12px) var(--spacing-sm, 8px); + + .input { + flex: 1; + border: none; + + color: var(--input-placeholder-filled, #24282e); + + /* text/md/semibold */ + font-family: var(--font-text-family, Poppins); + font-size: 16px; + font-style: normal; + font-weight: var(--font-text-weight-semibold, 600); + line-height: normal; + letter-spacing: 0.08px; + width: 100%; + + &::placeholder { + color: var(--input-placeholder-empty, #6d7e8a); + /* text/md/regular */ + font-family: var(--font-text-family, Poppins); + font-size: 16px; + font-style: normal; + font-weight: var(--font-text-weight-regular, 400); + line-height: normal; + letter-spacing: 0.08px; + } + } + } +} diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/index.tsx b/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/index.tsx new file mode 100644 index 00000000..5e926fdc --- /dev/null +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/index.tsx @@ -0,0 +1,90 @@ +import React, { useCallback, useEffect } from "react"; + +import { getLabel } from "../../Dropdown"; +import { IOption } from "../../Dropdown/DropdownMenu/DropdownOption"; +import Chip from "../Chip"; +import classes from "./classes.module.scss"; + +type IProps = { + selectedOptions: IOption[]; + onSelectedOptionsChange: (options: IOption[]) => void; + onChange?: (input: string) => void; + value?: string; + placeholder?: string; + disabled?: boolean; + onClear?: () => void; + onFocus?: () => void; + onBlur?: () => void; +}; + +export default function ChipContainer(props: IProps) { + const { + selectedOptions, + onChange, + value: propValue, + placeholder = "Rechercher", + disabled = false, + onFocus, + onBlur, + onSelectedOptionsChange, + } = props; + + const [isFocused, setIsFocused] = React.useState(false); + const [value, setValue] = React.useState(propValue || ""); + + const changeValue = useCallback( + (value: string) => { + setValue(value); + onChange && onChange(value); + }, + [onChange], + ); + + const handleOnChange = useCallback((event: React.ChangeEvent) => changeValue(event.target.value), [changeValue]); + + const handleFocus = useCallback(() => { + setIsFocused(true); + onFocus?.(); + }, [onFocus]); + + const handleBlur = useCallback( + (e: React.FocusEvent) => { + setIsFocused(false); + onBlur?.(); + }, + [onBlur], + ); + + const onChipDelete = useCallback( + (option: IOption) => { + const newSelectedOptions = selectedOptions.filter((selectedOption) => selectedOption.id !== option.id); + onSelectedOptionsChange && onSelectedOptionsChange(newSelectedOptions); + }, + [selectedOptions, onSelectedOptionsChange], + ); + + useEffect(() => { + if (propValue !== undefined) { + setValue(propValue); + } + }, [propValue]); + + return ( +
+
+ {selectedOptions.map((option) => ( + onChipDelete(option)} /> + ))} + +
+
+ ); +} diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/classes.module.scss b/src/front/Components/DesignSystem/AutocompleteMultiSelect/classes.module.scss new file mode 100644 index 00000000..0a331a1d --- /dev/null +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/classes.module.scss @@ -0,0 +1,7 @@ +@import "@Themes/constants.scss"; + +.root { + .label { + padding: 0px var(--spacing-2, 16px); + } +} diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/index.tsx b/src/front/Components/DesignSystem/AutocompleteMultiSelect/index.tsx new file mode 100644 index 00000000..700040db --- /dev/null +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/index.tsx @@ -0,0 +1,95 @@ +import useOpenable from "@Front/Hooks/useOpenable"; +import { useCallback, useEffect, useState } from "react"; + +import { getLabel } from "../Dropdown"; +import DropdownMenu from "../Dropdown/DropdownMenu"; +import { IOption } from "../Dropdown/DropdownMenu/DropdownOption"; +import Typography, { ETypo, ETypoColor } from "../Typography"; +import ChipContainer from "./ChipContainer"; +import classes from "./classes.module.scss"; + +type IProps = { + options: IOption[]; + placeholder?: string; + disabled?: boolean; + label?: string; + onSelectionChange?: (options: IOption[] | null) => void; + selectedOptions?: IOption[] | null; +}; + +export default function AutocompleteMultiSelect(props: IProps) { + const { onSelectionChange, options, placeholder, disabled, label, selectedOptions: selectedOptionsProps } = props; + const [selectedOptions, setSelectedOptions] = useState(selectedOptionsProps ?? null); + const [searchValue, setSearchValue] = useState(""); + const [filteredOptions, setFilteredOptions] = useState(options); + const openable = useOpenable({ defaultOpen: false }); + + useEffect(() => { + if (searchValue) { + const filteredOptions = options.filter((option) => getLabel(option)?.toLowerCase().includes(searchValue.toLowerCase())); + if (filteredOptions.length === 0) + return setFilteredOptions([{ id: "no-results", label: "Aucun résulats", notSelectable: true }]); + return setFilteredOptions(filteredOptions); + } + return setFilteredOptions(options); + }, [searchValue, options]); + + const handleSearchChange = useCallback( + (value: string) => { + setSearchValue(value); + if (value) { + openable.open(); + } else { + openable.close(); + } + }, + [openable], + ); + + const handleChange = useCallback( + (options: IOption[] | null) => { + setSelectedOptions(options); + onSelectionChange?.(options); + }, + [onSelectionChange], + ); + + useEffect(() => { + setSelectedOptions(selectedOptionsProps ?? null); + }, [selectedOptionsProps]); + + const handleSelectOption = useCallback( + (_newOption: IOption, options: IOption[]) => { + handleChange(options); + setSearchValue(""); + openable.close(); + }, + [handleChange, openable], + ); + + return ( + +
+ {label && ( + + {label} + + )} +
+ handleChange(null)} + onFocus={openable.open} + selectedOptions={selectedOptions ?? []} + onSelectedOptionsChange={handleChange} + /> + + ); +} diff --git a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss index d8742a45..a56ca26e 100644 --- a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss +++ b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss @@ -30,6 +30,7 @@ overflow: visible; .content { max-height: 500px; + overflow: auto; opacity: 1; } } diff --git a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/index.tsx b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/index.tsx index c19f6982..5ad68d7b 100644 --- a/src/front/Components/DesignSystem/Dropdown/DropdownMenu/index.tsx +++ b/src/front/Components/DesignSystem/Dropdown/DropdownMenu/index.tsx @@ -1,12 +1,12 @@ import classNames from "classnames"; -import React, { useCallback } from "react"; +import React, { useCallback, useEffect, useRef } from "react"; import classes from "./classes.module.scss"; import DropdownOption, { IOption } from "./DropdownOption"; type IProps = { options: IOption[]; - selectedOption: IOption | null; + selectedOptions: IOption[]; children: React.ReactNode; openable: { isOpen: boolean; @@ -14,21 +14,40 @@ type IProps = { close: () => void; toggle: () => void; }; - onSelect?: (option: IOption) => void; + onSelect?: (newOption: IOption, options: IOption[]) => void; }; export default function DropdownMenu(props: IProps) { - const { children, options, onSelect, openable, selectedOption } = props; + const { children, options, onSelect, openable, selectedOptions } = props; + const ref = useRef(null); const handleSelect = useCallback( (option: IOption) => { - onSelect?.(option); + const newOptions = selectedOptions.some((selectedOption) => selectedOption.id === option.id) + ? selectedOptions + : [...selectedOptions, option]; + + onSelect?.(option, newOptions); openable.close(); }, - [onSelect, openable], + [onSelect, openable, selectedOptions], ); + const handleClickOutside = useCallback( + (event: MouseEvent) => { + if (ref.current && !ref.current.contains(event.target as Node)) { + openable.close(); + } + }, + [openable], + ); + + useEffect(() => { + document.addEventListener("mousedown", handleClickOutside); + return () => document.removeEventListener("mousedown", handleClickOutside); + }, [handleClickOutside]); + return ( -
+
{children}
{options.map((option) => { @@ -39,6 +58,6 @@ export default function DropdownMenu(props: IProps) { ); function isActive(option: IOption): boolean { - return selectedOption?.id === option.id; + return selectedOptions.some((selectedOption) => selectedOption.id === option.id); } } diff --git a/src/front/Components/DesignSystem/Dropdown/classes.module.scss b/src/front/Components/DesignSystem/Dropdown/classes.module.scss index ccb9c08a..d2b3d7b3 100644 --- a/src/front/Components/DesignSystem/Dropdown/classes.module.scss +++ b/src/front/Components/DesignSystem/Dropdown/classes.module.scss @@ -30,6 +30,7 @@ padding: 0px var(--spacing-2, 16px); align-items: center; flex: 1 0 0; + gap: 4px; } svg { diff --git a/src/front/Components/DesignSystem/Dropdown/index.tsx b/src/front/Components/DesignSystem/Dropdown/index.tsx index a3875994..f325a0e5 100644 --- a/src/front/Components/DesignSystem/Dropdown/index.tsx +++ b/src/front/Components/DesignSystem/Dropdown/index.tsx @@ -13,12 +13,12 @@ type IProps = { label?: string; placeholder?: string; disabled?: boolean; - onSelect?: (option: IOption) => void; + onSelectionChange?: (option: IOption) => void; selectedOption?: IOption | null; }; export default function Dropdown(props: IProps) { - const { options, placeholder, disabled, onSelect, selectedOption: selectedOptionProps, label } = props; + const { options, placeholder, disabled, onSelectionChange, selectedOption: selectedOptionProps, label } = props; const [selectedOption, setSelectedOption] = useState(selectedOptionProps ?? null); const openable = useOpenable({ defaultOpen: false }); @@ -27,15 +27,19 @@ export default function Dropdown(props: IProps) { }, [selectedOptionProps]); const handleOnSelect = useCallback( - (option: IOption) => { - setSelectedOption(option); - onSelect?.(option); + (newOption: IOption, _options: IOption[]) => { + setSelectedOption(newOption); + onSelectionChange?.(newOption); }, - [onSelect], + [onSelectionChange], ); return ( - +
{label && ( @@ -51,12 +55,7 @@ export default function Dropdown(props: IProps) { ])} onClick={openable.toggle}>
- - {getLabel(selectedOption) ?? placeholder} - + {getLabelContent(selectedOption, placeholder)}
@@ -70,5 +69,44 @@ export function getLabel(option: IOption | null): string | null { if (typeof option.label === "string") { return option.label; } - return `${option.label.text} ${option.label.subtext}`; + return `${option.label.text}, ${option.label.subtext}`; +} + +function getLabelContent(option: IOption | null, placeholder?: string) { + if (!option) + return ( + + {placeholder} + + ); + + if (typeof option.label === "string") { + return ( + + {option.label} + + ); + } + + return ( + + + {`${option.label.text} , `} + + + {option.label.subtext} + + + ); } diff --git a/src/front/Components/DesignSystem/FolderList/classes.module.scss b/src/front/Components/DesignSystem/FolderList/classes.module.scss deleted file mode 100644 index b1bf1c69..00000000 --- a/src/front/Components/DesignSystem/FolderList/classes.module.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import "@Themes/constants.scss"; - -.root { - height: calc(100vh - 290px); - overflow-y: scroll; - - &.archived { - height: calc(100vh - 220px); - } - - .active { - background-color: var(--color-neutral-200); - } -} diff --git a/src/front/Components/DesignSystem/FolderList/index.tsx b/src/front/Components/DesignSystem/FolderList/index.tsx deleted file mode 100644 index c319582a..00000000 --- a/src/front/Components/DesignSystem/FolderList/index.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import Module from "@Front/Config/Module"; -import classNames from "classnames"; -import { OfficeFolder } from "le-coffre-resources/dist/Notary"; -import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document"; -import Link from "next/link"; -import { useRouter } from "next/router"; -import React from "react"; - -import FolderContainer from "../FolderContainer"; -import classes from "./classes.module.scss"; - -type IProps = { - folders: OfficeFolder[]; - isArchived: boolean; - onSelectedFolder?: (folder: OfficeFolder) => void; - onCloseLeftSide?: () => void; -}; - -type IPropsClass = IProps & { - selectedFolder: string; -}; - -type IState = {}; - -class FolderListClass extends React.Component { - private redirectPath: string = this.props.isArchived - ? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path - : Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path; - public override render(): JSX.Element { - return
{this.renderFolders()}
; - } - - private renderFolders(): JSX.Element[] { - const pendingFolders = this.props.folders - .filter((folder) => { - const pendingDocuments = (folder.documents ?? []).filter( - (document) => document.document_status === EDocumentStatus.DEPOSITED, - ); - return pendingDocuments.length >= 1; - }) - .sort((folder1, folder2) => { - return folder1.created_at! > folder2.created_at! ? -1 : 1; - }); - - const otherFolders = this.props.folders - .filter((folder) => { - const pendingDocuments = (folder.documents ?? []).filter( - (document) => document.document_status === EDocumentStatus.DEPOSITED, - ); - return pendingDocuments.length === 0; - }) - .sort((folder1, folder2) => { - return folder1.created_at! > folder2.created_at! ? -1 : 1; - }); - - return [...pendingFolders, ...otherFolders].map((folder) => { - return ( -
- - ; - -
- ); - }); - } -} - -export default function FolderList(props: IProps) { - const router = useRouter(); - let { folderUid } = router.query; - folderUid = folderUid as string; - return ; -} diff --git a/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss b/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss deleted file mode 100644 index 560b12a5..00000000 --- a/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "@Themes/constants.scss"; - -.root { - display: flex; - flex-direction: column; - justify-content: space-between; -} diff --git a/src/front/Components/DesignSystem/FolderListContainer/index.tsx b/src/front/Components/DesignSystem/FolderListContainer/index.tsx deleted file mode 100644 index 53df5b74..00000000 --- a/src/front/Components/DesignSystem/FolderListContainer/index.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import Module from "@Front/Config/Module"; -import { OfficeFolder } from "le-coffre-resources/dist/Notary"; -import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document"; -import { useRouter } from "next/router"; -import React, { useCallback, useEffect } from "react"; - -import classes from "./classes.module.scss"; -import { IBlock } from "../SearchBlockList/BlockList/Block"; -import SearchBlockList from "../SearchBlockList"; - -type IProps = { - folders: OfficeFolder[]; - isArchived: boolean; - onSelectedFolder?: (folder: OfficeFolder) => void; - onCloseLeftSide?: () => void; -}; - -export default function FolderListContainer(props: IProps) { - const router = useRouter(); - const { folderUid } = router.query; - const { folders, isArchived } = props; - - const redirectPath: string = isArchived - ? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path - : Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path; - - const getBlocks = useCallback( - (folders: OfficeFolder[]): IBlock[] => { - const pendingFolders = folders - .filter((folder) => { - const pendingDocuments = (folder.documents ?? []).filter( - (document) => document.document_status === EDocumentStatus.DEPOSITED, - ); - return pendingDocuments.length >= 1; - }) - .sort((folder1, folder2) => { - return folder1.created_at! > folder2.created_at! ? -1 : 1; - }); - - const otherFolders = folders - .filter((folder) => { - const pendingDocuments = (folder.documents ?? []).filter( - (document) => document.document_status === EDocumentStatus.DEPOSITED, - ); - return pendingDocuments.length === 0; - }) - .sort((folder1, folder2) => { - return folder1.created_at! > folder2.created_at! ? -1 : 1; - }); - - return [...pendingFolders, ...otherFolders].map((folder) => { - return { - id: folder.uid!, - primaryText: folder.name, - secondaryText: folder.folder_number, - isActive: folderUid === folder.uid, - showAlert: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED), - }; - }); - }, - [folderUid], - ); - - const [blocks, setBlocks] = React.useState(getBlocks(folders)); - - const onSelectedFolder = (block: IBlock) => { - props.onCloseLeftSide && props.onCloseLeftSide(); - const folder = folders.find((folder) => folder.uid === block.id); - if (!folder) return; - props.onSelectedFolder && props.onSelectedFolder(folder); - const path = redirectPath.replace("[folderUid]", folder.uid ?? ""); - router.push(path); - }; - - useEffect(() => { - setBlocks(getBlocks(folders)); - }, [folders, getBlocks]); - - return ( -
- -
- ); -} diff --git a/src/front/Components/DesignSystem/Footer/classes.module.scss b/src/front/Components/DesignSystem/Footer/classes.module.scss index f9a12433..a66b89c7 100644 --- a/src/front/Components/DesignSystem/Footer/classes.module.scss +++ b/src/front/Components/DesignSystem/Footer/classes.module.scss @@ -14,7 +14,7 @@ align-items: center; gap: var(--Radius-lg, 16px); white-space: nowrap; - padding: 0 360px; + padding: var(--spacing-1-5, 12px) var(--Radius-xl, 24px); //make it sticky @media (max-width: 1023px) { @@ -22,7 +22,18 @@ } } - @media (max-width: 660px) or (min-width: 768px) { + &[data-has-left-padding="true"] { + .desktop { + padding: var(--spacing-1-5, 12px) var(--spacing-15, 120px); + } + } + + &[data-is-sticky="true"] { + position: sticky; + bottom: 0; + } + + @media (max-width: 660px) or (min-width: 769px) { .tablet { display: none; } diff --git a/src/front/Components/DesignSystem/Footer/desktop.tsx b/src/front/Components/DesignSystem/Footer/desktop.tsx index d0eb1772..f3937b1c 100644 --- a/src/front/Components/DesignSystem/Footer/desktop.tsx +++ b/src/front/Components/DesignSystem/Footer/desktop.tsx @@ -1,20 +1,25 @@ import React from "react"; import classes from "./classes.module.scss"; +import Link from "next/link"; +import Module from "@Front/Config/Module"; +import { ELegalOptions } from "@Front/Components/LayoutTemplates/DefaultLegalDashboard"; type IProps = { className?: string; }; +const legalPages = Module.getInstance().get().modules.pages.Legal.pages.LegalInformations.props.path; + export default function Desktop({ className }: IProps) { return (
- © Copyright lecoffre 2024 + © Copyright lecoffre 2024 - Conditions d'utilisation + Conditions d'utilisation - Politique de confidentialité + Politique de confidentialité - Politique des cookies + Politique des cookies
); } diff --git a/src/front/Components/DesignSystem/Footer/index.tsx b/src/front/Components/DesignSystem/Footer/index.tsx index 8867ec7f..aad7305e 100644 --- a/src/front/Components/DesignSystem/Footer/index.tsx +++ b/src/front/Components/DesignSystem/Footer/index.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import classes from "./classes.module.scss"; import Mobile from "./mobile"; import Desktop from "./desktop"; @@ -6,11 +6,23 @@ import Tablet from "./tablet"; type IProps = { className?: string; + hasLeftPadding?: boolean; + isSticky?: boolean; }; -export default function Footer({ className }: IProps) { +export default function Footer({ className, hasLeftPadding = false, isSticky = false }: IProps) { + const footerRef = React.useRef(null); + useEffect(() => { + if (!footerRef.current) return; + const footerHeight = footerRef.current.clientHeight + 1; + document.documentElement.style.setProperty("--footer-height", `${footerHeight}px`); + }); return ( -