-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨(frontend) add back the footer and cgu pages
We need to add back the footer and cgu pages, but we will not display the footer on the doc editor pages.
- Loading branch information
Showing
12 changed files
with
554 additions
and
2 deletions.
There are no files selected for viewing
77 changes: 77 additions & 0 deletions
77
src/frontend/apps/e2e/__tests__/app-impress/footer.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
import { goToGridDoc } from './common'; | ||
|
||
test.beforeEach(async ({ page }) => { | ||
await page.goto('/'); | ||
}); | ||
|
||
test.describe('Footer', () => { | ||
test('checks all the elements are visible', async ({ page }) => { | ||
const footer = page.locator('footer').first(); | ||
|
||
await expect(footer.getByAltText('Gouvernement Logo')).toBeVisible(); | ||
|
||
await expect( | ||
footer.getByRole('link', { name: 'legifrance.gouv.fr' }), | ||
).toBeVisible(); | ||
|
||
await expect( | ||
footer.getByRole('link', { name: 'info.gouv.fr' }), | ||
).toBeVisible(); | ||
|
||
await expect( | ||
footer.getByRole('link', { name: 'service-public.fr' }), | ||
).toBeVisible(); | ||
|
||
await expect( | ||
footer.getByRole('link', { name: 'data.gouv.fr' }), | ||
).toBeVisible(); | ||
|
||
await expect( | ||
footer.getByRole('link', { name: 'Legal Notice' }), | ||
).toBeVisible(); | ||
|
||
await expect( | ||
footer.getByRole('link', { name: 'Personal data and cookies' }), | ||
).toBeVisible(); | ||
|
||
await expect( | ||
footer.getByRole('link', { name: 'Accessibility' }), | ||
).toBeVisible(); | ||
|
||
await expect( | ||
footer.getByText( | ||
'Unless otherwise stated, all content on this site is under licence', | ||
), | ||
).toBeVisible(); | ||
}); | ||
|
||
test('checks footer is not visible on doc editor', async ({ page }) => { | ||
await expect(page.locator('footer')).toBeVisible(); | ||
await goToGridDoc(page); | ||
await expect(page.locator('footer')).toBeHidden(); | ||
}); | ||
|
||
const legalPages = [ | ||
{ name: 'Legal Notice', url: '/legal-notice/' }, | ||
{ name: 'Personal data and cookies', url: '/personal-data-cookies/' }, | ||
{ name: 'Accessibility', url: '/accessibility/' }, | ||
]; | ||
for (const { name, url } of legalPages) { | ||
test(`checks ${name} page`, async ({ page }) => { | ||
const footer = page.locator('footer').first(); | ||
await footer.getByRole('link', { name }).click(); | ||
|
||
await expect( | ||
page | ||
.getByRole('heading', { | ||
name, | ||
}) | ||
.first(), | ||
).toBeVisible(); | ||
|
||
await expect(page).toHaveURL(url); | ||
}); | ||
} | ||
}); |
166 changes: 166 additions & 0 deletions
166
src/frontend/apps/impress/src/features/footer/Footer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,166 @@ | ||
import Image from 'next/image'; | ||
import React from 'react'; | ||
import { useTranslation } from 'react-i18next'; | ||
import styled from 'styled-components'; | ||
|
||
import { Box, StyledLink, Text } from '@/components/'; | ||
import { useCunninghamTheme } from '@/cunningham'; | ||
|
||
import IconLink from './assets/external-link.svg'; | ||
|
||
const BlueStripe = styled.div` | ||
position: absolute; | ||
height: 2px; | ||
width: 100%; | ||
background: var(--c--theme--colors--primary-600); | ||
top: 0; | ||
`; | ||
|
||
export const Footer = () => { | ||
const { t } = useTranslation(); | ||
const { themeTokens } = useCunninghamTheme(); | ||
const logo = themeTokens().logo; | ||
|
||
return ( | ||
<Box $position="relative" as="footer"> | ||
<BlueStripe /> | ||
<Box $padding={{ top: 'large', horizontal: 'big', bottom: 'small' }}> | ||
<Box | ||
$direction="row" | ||
$gap="1.5rem" | ||
$align="center" | ||
$justify="space-between" | ||
$css="flex-wrap: wrap;" | ||
> | ||
<Box> | ||
<Box $align="center" $gap="6rem" $direction="row"> | ||
{logo && ( | ||
<Image | ||
priority | ||
src={logo.src} | ||
alt={logo.alt} | ||
width={0} | ||
height={0} | ||
style={{ width: logo.widthFooter, height: 'auto' }} | ||
/> | ||
)} | ||
</Box> | ||
</Box> | ||
<Box | ||
$direction="row" | ||
$css={` | ||
column-gap: 1.5rem; | ||
row-gap: .5rem; | ||
flex-wrap: wrap; | ||
`} | ||
> | ||
{[ | ||
{ | ||
label: 'legifrance.gouv.fr', | ||
href: 'https://legifrance.gouv.fr/', | ||
}, | ||
{ | ||
label: 'info.gouv.fr', | ||
href: 'https://info.gouv.fr/', | ||
}, | ||
{ | ||
label: 'service-public.fr', | ||
href: 'https://service-public.fr/', | ||
}, | ||
{ | ||
label: 'data.gouv.fr', | ||
href: 'https://data.gouv.fr/', | ||
}, | ||
].map(({ label, href }) => ( | ||
<StyledLink | ||
key={label} | ||
href={href} | ||
target="__blank" | ||
$css={` | ||
gap:0.2rem; | ||
transition: box-shadow 0.3s; | ||
&:hover { | ||
box-shadow: 0px 2px 0 0 var(--c--theme--colors--greyscale-text); | ||
} | ||
`} | ||
> | ||
<Text $weight="bold">{label}</Text> | ||
<IconLink width={18} /> | ||
</StyledLink> | ||
))} | ||
</Box> | ||
</Box> | ||
<Box | ||
$direction="row" | ||
$margin={{ top: 'big' }} | ||
$padding={{ top: 'tiny' }} | ||
$css={` | ||
flex-wrap: wrap; | ||
border-top: 1px solid var(--c--theme--colors--greyscale-200); | ||
column-gap: 1rem; | ||
row-gap: .5rem; | ||
`} | ||
> | ||
{[ | ||
{ | ||
label: t('Legal Notice'), | ||
href: '/legal-notice', | ||
}, | ||
{ | ||
label: t('Personal data and cookies'), | ||
href: '/personal-data-cookies', | ||
}, | ||
{ | ||
label: t('Accessibility'), | ||
href: '/accessibility', | ||
}, | ||
].map(({ label, href }) => ( | ||
<StyledLink | ||
key={label} | ||
href={href} | ||
$css={` | ||
padding-right: 1rem; | ||
&:not(:last-child) { | ||
box-shadow: inset -1px 0px 0px 0px var(--c--theme--colors--greyscale-200); | ||
} | ||
`} | ||
> | ||
<Text | ||
$variation="600" | ||
$size="m" | ||
$transition="box-shadow 0.3s" | ||
$css={` | ||
&:hover { | ||
box-shadow: 0px 2px 0 0 var(--c--theme--colors--greyscale-text); | ||
} | ||
`} | ||
> | ||
{label} | ||
</Text> | ||
</StyledLink> | ||
))} | ||
</Box> | ||
<Text | ||
as="p" | ||
$size="m" | ||
$margin={{ top: 'big' }} | ||
$variation="600" | ||
$display="inline" | ||
> | ||
{t('Unless otherwise stated, all content on this site is under')}{' '} | ||
<StyledLink | ||
href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" | ||
target="__blank" | ||
$css={` | ||
display:inline-flex; | ||
box-shadow: 0px 1px 0 0 var(--c--theme--colors--greyscale-text); | ||
`} | ||
> | ||
<Text $variation="600">licence etalab-2.0</Text> | ||
<IconLink width={18} /> | ||
</StyledLink> | ||
</Text> | ||
</Box> | ||
</Box> | ||
); | ||
}; |
5 changes: 5 additions & 0 deletions
5
src/frontend/apps/impress/src/features/footer/assets/external-link.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './Footer'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { PropsWithChildren } from 'react'; | ||
|
||
import { Box } from '@/components'; | ||
import { Footer } from '@/features/footer'; | ||
import { Header } from '@/features/header'; | ||
|
||
export function PageLayout({ children }: PropsWithChildren) { | ||
return ( | ||
<Box $minHeight="100vh"> | ||
<Header /> | ||
<Box as="main" $width="100%" $css="flex-grow:1;"> | ||
{children} | ||
</Box> | ||
<Footer /> | ||
</Box> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,2 @@ | ||
export * from './MainLayout'; | ||
export * from './PageLayout'; |
Oops, something went wrong.