From 36ea8d6aea379edd5d36e17c68d23105a6b30da4 Mon Sep 17 00:00:00 2001
From: Romain CREY <ext.sopra.rcrey@grandlyon.com>
Date: Thu, 11 Jun 2020 16:36:35 +0200
Subject: [PATCH] page legal
---
src/assets/icons/ico/legal.svg | 5 ++
.../LegalContainer/LegalContainer.tsx | 43 +++++++++++
.../ViewContainer/LegalViewContainer.tsx | 27 +++++++
src/styles/components/_legal.scss | 76 +++++++++++++++++++
4 files changed, 151 insertions(+)
create mode 100644 src/assets/icons/ico/legal.svg
create mode 100644 src/components/ContainerComponents/LegalContainer/LegalContainer.tsx
create mode 100644 src/components/ContainerComponents/ViewContainer/LegalViewContainer.tsx
create mode 100644 src/styles/components/_legal.scss
diff --git a/src/assets/icons/ico/legal.svg b/src/assets/icons/ico/legal.svg
new file mode 100644
index 000000000..5b13582b8
--- /dev/null
+++ b/src/assets/icons/ico/legal.svg
@@ -0,0 +1,5 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18.5" cy="18.5" r="18" stroke="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6007 8.4054C18.9665 7.86487 18.0335 7.86486 17.3993 8.4054L16.459 9.20672C16.1872 9.43835 15.8492 9.57834 15.4932 9.60674L14.2617 9.70502C13.431 9.77131 12.7713 10.431 12.705 11.2617L12.6067 12.4932C12.5783 12.8492 12.4384 13.1872 12.2067 13.459L11.4054 14.3993C10.8649 15.0335 10.8649 15.9665 11.4054 16.6007L12.2067 17.541C12.4384 17.8128 12.5783 18.1508 12.6067 18.5068L12.705 19.7383C12.7713 20.569 13.431 21.2287 14.2617 21.295L15.4932 21.3933C15.8492 21.4217 16.1872 21.5616 16.459 21.7933L17.3993 22.5946C18.0335 23.1351 18.9665 23.1351 19.6007 22.5946L20.541 21.7933C20.8128 21.5617 21.1508 21.4217 21.5068 21.3933L22.7383 21.295C23.569 21.2287 24.2287 20.569 24.295 19.7383L24.3933 18.5068C24.4217 18.1508 24.5616 17.8129 24.7933 17.541L25.5946 16.6007C26.1351 15.9665 26.1351 15.0335 25.5946 14.3993L24.7933 13.459C24.5617 13.1872 24.4217 12.8492 24.3933 12.4932L24.295 11.2617C24.2287 10.431 23.569 9.77131 22.7383 9.70502L21.5068 9.60674C21.1508 9.57834 20.8129 9.43835 20.541 9.20672L19.6007 8.4054ZM18.5 19.5163C20.7182 19.5163 22.5163 17.7182 22.5163 15.5C22.5163 13.2818 20.7182 11.4837 18.5 11.4837C16.2818 11.4837 14.4837 13.2818 14.4837 15.5C14.4837 17.7182 16.2818 19.5163 18.5 19.5163Z" fill="white"/>
+<path d="M15 23L15.1384 23.0113C15.5055 23.0412 15.854 23.1887 16.1343 23.4328L17.4371 24.5673C18.0912 25.1369 19.0532 25.1369 19.7072 24.5673L21.01 23.4328C21.2888 23.19 21.6351 23.0428 22 23.0118V30.5L18.5 28.2647L15 30.5V23Z" fill="white"/>
+</svg>
diff --git a/src/components/ContainerComponents/LegalContainer/LegalContainer.tsx b/src/components/ContainerComponents/LegalContainer/LegalContainer.tsx
new file mode 100644
index 000000000..8ee630bd2
--- /dev/null
+++ b/src/components/ContainerComponents/LegalContainer/LegalContainer.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+import { translate } from 'cozy-ui/react/I18n'
+
+import StyledCard from 'components/CommonKit/Card/StyledCard'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import LegalIcon from 'assets/icons/ico/legal.svg'
+
+interface LegalContainerProps {
+ t: Function
+}
+
+const LegalContainer: React.FC<LegalContainerProps> = ({
+ t,
+}: LegalContainerProps) => {
+ return (
+ <div className="legal-root">
+ <div className="legal-content">
+ <div className="legal-header text-14-normal-uppercase">
+ {t('LEGAL.TITLE_LEGAL')}
+ </div>
+ <NavLink className="legal-card-link" to="parameters/Legal">
+ <StyledCard>
+ <div className="legal-card">
+ <div className="legal-card-content">
+ <StyledIcon
+ className="legal-card-content-icon"
+ icon={LegalIcon}
+ size={50}
+ />
+ <div className="legal-card-content-title">
+ {t('LEGAL.READ_LEGAL')}
+ </div>
+ </div>
+ </div>
+ </StyledCard>
+ </NavLink>
+ </div>
+ </div>
+ )
+}
+
+export default translate()(LegalContainer)
diff --git a/src/components/ContainerComponents/ViewContainer/LegalViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/LegalViewContainer.tsx
new file mode 100644
index 000000000..136b67018
--- /dev/null
+++ b/src/components/ContainerComponents/ViewContainer/LegalViewContainer.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
+import Header from 'components/ContainerComponents/Header/Header'
+import Content from 'components/ContainerComponents/Content/Content'
+
+const LegalViewContainer: React.FC = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const defineHeaderHeight = (height: number) => {
+ setHeaderHeight(height)
+ }
+ return (
+ <React.Fragment>
+ <CozyBar titleKey={'COMMON.APP_LEGAL_TITLE'} displayBackArrow={true} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'COMMON.APP_LEGAL_TITLE'}
+ displayBackArrow={true}
+ ></Header>
+ <Content height={headerHeight}>
+ <h1>MENTIONS Légales</h1>
+ <p>Mentions légales du site officiel de la Métropole de Lyon Site</p>
+ </Content>
+ </React.Fragment>
+ )
+}
+
+export default LegalViewContainer
diff --git a/src/styles/components/_legal.scss b/src/styles/components/_legal.scss
new file mode 100644
index 000000000..678e663b1
--- /dev/null
+++ b/src/styles/components/_legal.scss
@@ -0,0 +1,76 @@
+@import '../base/color';
+@import '../base/breakpoint';
+
+// FAQContainer
+.legal-root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0 1.5rem 1.5rem;
+ .legal-content {
+ margin-bottom: -1rem;
+ width: 45.75rem;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .legal-header {
+ margin-top: 2rem;
+ margin-bottom: 1.25rem;
+ color: $text-bright;
+ }
+ }
+}
+
+.legal-card-link {
+ color: black;
+}
+.legal-card {
+ display: flex;
+ flex-direction: row;
+ margin: -0.75rem 0;
+ width: 100%;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .legal-card-content {
+ display: flex;
+ flex-direction: row;
+ .legal-card-content-icon {
+ margin: 0.5rem 0;
+ }
+ .legal-card-content-title {
+ margin: 0 1rem;
+ align-self: center;
+ }
+ }
+}
+
+// FAQ
+.legal-view-root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 1rem 0;
+ margin-top: 1.5rem;
+ .legal-view-content {
+ width: 45.75rem;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .legal-content-detail {
+ padding-bottom: 0.6rem;
+ .text-bold {
+ font-weight: bold;
+ }
+ .text-underline {
+ text-decoration: underline;
+ }
+ .spaceline {
+ height: 0.6rem;
+ display: block;
+ }
+ }
+ }
+}
--
GitLab