Add github link in footer

pull/2749/head
Jérémy Rialland 2023-07-03 18:28:20 +02:00 committed by Jérémy Rialland
parent 368ff0f676
commit 9b950365f4
6 changed files with 42 additions and 86 deletions

View File

@ -1,7 +1,6 @@
import { Trans, useTranslation } from 'react-i18next'
import { Message, PopoverWithTrigger } from '@/design-system'
import { H2 } from '@/design-system/typography/heading'
import { Link, StyledLink } from '@/design-system/typography/link'
import { Li, Ul } from '@/design-system/typography/list'
import { Body } from '@/design-system/typography/paragraphs'

View File

@ -3,12 +3,11 @@ import { useLocation } from 'react-router-dom'
import { SmallCard } from '@/design-system/card'
import { Emoji } from '@/design-system/emoji'
import { GithubIcon } from '@/design-system/icons'
import { Grid } from '@/design-system/layout'
import { H2 } from '@/design-system/typography/heading'
import { useSitePaths } from '@/sitePaths'
import { icons } from './ui/SocialIcon'
export default function MoreInfosOnUs() {
const { pathname } = useLocation()
const { absoluteSitePaths } = useSitePaths()
@ -57,22 +56,7 @@ export default function MoreInfosOnUs() {
)}
<Grid item xs={12} sm={6} md={4} role="listitem">
<SmallCard
icon={
<svg
viewBox="15 15 34 34"
style={{
width: '3rem',
height: '3rem',
margin: 0,
}}
aria-hidden
role="img"
>
<g>
<path d={icons.github.icon} />
</g>
</svg>
}
icon={<GithubIcon style={{ width: '2rem', height: '2rem' }} />}
href="https://github.com/betagouv/mon-entreprise"
title={<h3>Le code source</h3>}
>

View File

@ -11,6 +11,7 @@ import { Button } from '@/design-system/buttons'
import { Emoji } from '@/design-system/emoji'
import { FooterContainer } from '@/design-system/footer'
import { FooterColumn } from '@/design-system/footer/column'
import { GithubIcon } from '@/design-system/icons'
import { Container, Grid } from '@/design-system/layout'
import { Link } from '@/design-system/typography/link'
import { Body } from '@/design-system/typography/paragraphs'
@ -152,6 +153,25 @@ export default function Footer() {
<InscriptionBetaTesteur /> <Emoji emoji="💌" />
</StyledLi>
)}
<StyledLi>
<Link
href="https://github.com/betagouv/mon-entreprise"
noUnderline
>
<Trans i18nKey="footer.github.text">
Voir le code source sur Github
</Trans>{' '}
<GithubIcon
style={{
width: '18px',
height: '18px',
margin: '0 0.2rem',
verticalAlign: 'middle',
fill: '#e6edf3',
}}
/>
</Link>
</StyledLi>
{altHref && (
<StyledLi key={altLang}>
<Grid container spacing={2} role="list">

View File

@ -1,52 +0,0 @@
import styled from 'styled-components'
export const icons = {
facebook: {
icon: 'M34.1,47V33.3h4.6l0.7-5.3h-5.3v-3.4c0-1.5,0.4-2.6,2.6-2.6l2.8,0v-4.8c-0.5-0.1-2.2-0.2-4.1-0.2 c-4.1,0-6.9,2.5-6.9,7V28H24v5.3h4.6V47H34.1z',
mask: 'M0,0v64h64V0H0z M39.6,22l-2.8,0c-2.2,0-2.6,1.1-2.6,2.6V28h5.3l-0.7,5.3h-4.6V47h-5.5V33.3H24V28h4.6V24 c0-4.6,2.8-7,6.9-7c2,0,3.6,0.1,4.1,0.2V22z',
label: 'Facebook',
},
twitter: {
icon: 'M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z',
mask: 'M0,0v64h64V0H0z M44.7,25.5c0,0.3,0,0.6,0,0.8C44.7,35,38.1,45,26.1,45c-3.7,0-7.2-1.1-10.1-2.9 c0.5,0.1,1,0.1,1.6,0.1c3.1,0,5.9-1,8.2-2.8c-2.9-0.1-5.3-2-6.1-4.6c0.4,0.1,0.8,0.1,1.2,0.1c0.6,0,1.2-0.1,1.7-0.2 c-3-0.6-5.3-3.3-5.3-6.4c0,0,0-0.1,0-0.1c0.9,0.5,1.9,0.8,3,0.8c-1.8-1.2-2.9-3.2-2.9-5.5c0-1.2,0.3-2.3,0.9-3.3 c3.2,4,8.1,6.6,13.5,6.9c-0.1-0.5-0.2-1-0.2-1.5c0-3.6,2.9-6.6,6.6-6.6c1.9,0,3.6,0.8,4.8,2.1c1.5-0.3,2.9-0.8,4.2-1.6 c-0.5,1.5-1.5,2.8-2.9,3.6c1.3-0.2,2.6-0.5,3.8-1C47.1,23.4,46,24.5,44.7,25.5z',
label: 'Twitter',
},
linkedin: {
icon: 'M20.4,44h5.4V26.6h-5.4V44z M23.1,18c-1.7,0-3.1,1.4-3.1,3.1c0,1.7,1.4,3.1,3.1,3.1 c1.7,0,3.1-1.4,3.1-3.1C26.2,19.4,24.8,18,23.1,18z M39.5,26.2c-2.6,0-4.4,1.4-5.1,2.8h-0.1v-2.4h-5.2V44h5.4v-8.6 c0-2.3,0.4-4.5,3.2-4.5c2.8,0,2.8,2.6,2.8,4.6V44H46v-9.5C46,29.8,45,26.2,39.5,26.2z',
mask: 'M0,0v64h64V0H0z M25.8,44h-5.4V26.6h5.4V44z M23.1,24.3c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1 c1.7,0,3.1,1.4,3.1,3.1C26.2,22.9,24.8,24.3,23.1,24.3z M46,44h-5.4v-8.4c0-2,0-4.6-2.8-4.6c-2.8,0-3.2,2.2-3.2,4.5V44h-5.4V26.6 h5.2V29h0.1c0.7-1.4,2.5-2.8,5.1-2.8c5.5,0,6.5,3.6,6.5,8.3V44z',
label: 'LinkedIn',
},
github: {
icon: 'M32,16c-8.8,0-16,7.2-16,16c0,7.1,4.6,13.1,10.9,15.2 c0.8,0.1,1.1-0.3,1.1-0.8c0-0.4,0-1.4,0-2.7c-4.5,1-5.4-2.1-5.4-2.1c-0.7-1.8-1.8-2.3-1.8-2.3c-1.5-1,0.1-1,0.1-1 c1.6,0.1,2.5,1.6,2.5,1.6c1.4,2.4,3.7,1.7,4.7,1.3c0.1-1,0.6-1.7,1-2.1c-3.6-0.4-7.3-1.8-7.3-7.9c0-1.7,0.6-3.2,1.6-4.3 c-0.2-0.4-0.7-2,0.2-4.2c0,0,1.3-0.4,4.4,1.6c1.3-0.4,2.6-0.5,4-0.5c1.4,0,2.7,0.2,4,0.5c3.1-2.1,4.4-1.6,4.4-1.6 c0.9,2.2,0.3,3.8,0.2,4.2c1,1.1,1.6,2.5,1.6,4.3c0,6.1-3.7,7.5-7.3,7.9c0.6,0.5,1.1,1.5,1.1,3c0,2.1,0,3.9,0,4.4 c0,0.4,0.3,0.9,1.1,0.8C43.4,45.1,48,39.1,48,32C48,23.2,40.8,16,32,16z',
mask: 'M0,0v64h64V0H0z M37.1,47.2c-0.8,0.2-1.1-0.3-1.1-0.8c0-0.5,0-2.3,0-4.4c0-1.5-0.5-2.5-1.1-3 c3.6-0.4,7.3-1.7,7.3-7.9c0-1.7-0.6-3.2-1.6-4.3c0.2-0.4,0.7-2-0.2-4.2c0,0-1.3-0.4-4.4,1.6c-1.3-0.4-2.6-0.5-4-0.5 c-1.4,0-2.7,0.2-4,0.5c-3.1-2.1-4.4-1.6-4.4-1.6c-0.9,2.2-0.3,3.8-0.2,4.2c-1,1.1-1.6,2.5-1.6,4.3c0,6.1,3.7,7.5,7.3,7.9 c-0.5,0.4-0.9,1.1-1,2.1c-0.9,0.4-3.2,1.1-4.7-1.3c0,0-0.8-1.5-2.5-1.6c0,0-1.6,0-0.1,1c0,0,1,0.5,1.8,2.3c0,0,0.9,3.1,5.4,2.1 c0,1.3,0,2.3,0,2.7c0,0.4-0.3,0.9-1.1,0.8C20.6,45.1,16,39.1,16,32c0-8.8,7.2-16,16-16c8.8,0,16,7.2,16,16 C48,39.1,43.4,45.1,37.1,47.2z',
label: 'GitHub',
},
email: {
icon: 'M17,22v20h30V22H17z M41.1,25L32,32.1L22.9,25H41.1z M20,39V26.6l12,9.3l12-9.3V39H20z',
mask: 'M41.1,25H22.9l9.1,7.1L41.1,25z M44,26.6l-12,9.3l-12-9.3V39h24V26.6z M0,0v64h64V0H0z M47,42H17V22h30V42z',
label: 'e-mail',
},
}
const FilledG = styled.g`
fill: ${({ theme }) => theme.colors.bases.primary[700]};
`
export default function SocialIcon({ media }: { media: keyof typeof icons }) {
return (
<svg
viewBox="0 0 64 64"
style={{
fill: 'transparent',
height: '2.5rem',
margin: '0.6rem',
fillRule: 'evenodd',
}}
role="img"
>
<FilledG>
<path d={icons[media].icon} />
</FilledG>
</svg>
)
}

View File

@ -402,3 +402,21 @@ export const WarningIcon = (props: HTMLAttributes<SVGElement>) => (
/>
</svg>
)
export const GithubIcon = (props: HTMLAttributes<SVGElement>) => (
<svg
{...props}
width="18"
height="18"
viewBox="15 15 34 34"
xmlns="http://www.w3.org/2000/svg"
aria-hidden
role="img"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M32,16c-8.8,0-16,7.2-16,16c0,7.1,4.6,13.1,10.9,15.2 c0.8,0.1,1.1-0.3,1.1-0.8c0-0.4,0-1.4,0-2.7c-4.5,1-5.4-2.1-5.4-2.1c-0.7-1.8-1.8-2.3-1.8-2.3c-1.5-1,0.1-1,0.1-1 c1.6,0.1,2.5,1.6,2.5,1.6c1.4,2.4,3.7,1.7,4.7,1.3c0.1-1,0.6-1.7,1-2.1c-3.6-0.4-7.3-1.8-7.3-7.9c0-1.7,0.6-3.2,1.6-4.3 c-0.2-0.4-0.7-2,0.2-4.2c0,0,1.3-0.4,4.4,1.6c1.3-0.4,2.6-0.5,4-0.5c1.4,0,2.7,0.2,4,0.5c3.1-2.1,4.4-1.6,4.4-1.6 c0.9,2.2,0.3,3.8,0.2,4.2c1,1.1,1.6,2.5,1.6,4.3c0,6.1-3.7,7.5-7.3,7.9c0.6,0.5,1.1,1.5,1.1,3c0,2.1,0,3.9,0,4.4 c0,0.4,0.3,0.9,1.1,0.8C43.4,45.1,48,39.1,48,32C48,23.2,40.8,16,32,16z"
/>
</svg>
)

View File

@ -1,9 +1,9 @@
import { Trans, useTranslation } from 'react-i18next'
import PageHeader from '@/components/PageHeader'
import { icons } from '@/components/ui/SocialIcon'
import { Card } from '@/design-system/card'
import { Emoji } from '@/design-system/emoji'
import { GithubIcon } from '@/design-system/icons'
import { Grid } from '@/design-system/layout'
import { Body, Intro } from '@/design-system/typography/paragraphs'
import { useSitePaths } from '@/sitePaths'
@ -146,20 +146,7 @@ export default function Options() {
<Grid item xs={12} md={6} lg={4}>
<Card
icon={
<svg
viewBox="15 15 34 34"
style={{
width: '1rem',
height: '1rem',
margin: 0,
}}
aria-hidden
role="img"
>
<g style={{ fill: '#030303' }}>
<path d={icons.github.icon} />
</g>
</svg>
<GithubIcon style={{ width: '1.25rem', height: '1.25rem' }} />
}
title={t(
'pages.développeur.choice.github.title',