Skip to content

Commit b5a7b96

Browse files
yvalentinyvalentin
authored
refactor: implement new CTA card component and fix UI (#2088)
1 parent 98bf748 commit b5a7b96

File tree

19 files changed

+320
-209
lines changed

19 files changed

+320
-209
lines changed

‎apps/nuxt/src/assets/custom.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,6 @@ WARNING :
1010
.fr-justify-center {
1111
justify-content: center;
1212
}
13-
.fr-card:hover {
14-
cursor: pointer !important;
15-
}
1613
.fr-modal-custom::before {
1714
content: none !important;
1815
}

‎apps/nuxt/src/assets/scss/card.scss‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,58 @@
145145
}
146146
}
147147

148+
&.fr-card--cta {
149+
@include tool.media-query-respond-from(md) {
150+
.fr-card__header {
151+
flex-basis: 30%;
152+
}
153+
}
154+
155+
@include tool.media-query-respond-from(lg) {
156+
.fr-card__header {
157+
flex-basis: 25%;
158+
}
159+
}
160+
161+
.fr-card__header {
162+
align-content: center;
163+
}
164+
165+
@include tool.media-query-respond-from(md) {
166+
.fr-card__img {
167+
max-height: 250px;
168+
}
169+
}
170+
171+
.fr-card__img {
172+
position: relative;
173+
174+
img {
175+
max-height: 250px;
176+
}
177+
178+
&::after {
179+
content: '';
180+
position: absolute;
181+
z-index: 0; // Lower layer
182+
height: 100%;
183+
width: 100%;
184+
top: 0;
185+
left: 0;
186+
background: linear-gradient(to bottom right, rgb(255 255 255 / 0%) 70%, rgb(255 255 255 / 100%) 95%) !important;
187+
}
188+
189+
.fr-card__logo {
190+
position: absolute;
191+
bottom: 0;
192+
right: 0;
193+
width: 50px;
194+
height: 50px;
195+
z-index: 1; // Higher than the gradient
196+
}
197+
}
198+
}
199+
148200
&.fr-card--program {
149201
.fr-card__content {
150202
padding: 1rem 1.5rem 4rem !important;

‎apps/nuxt/src/components/TeeHeader.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
:quick-links="quickLinks"
88
logo-text="RÉPUBLIQUE<br>FRANÇAISE"
99
:show-search="false"
10-
:operator-img-src="img(Identity.logoPath, { quality: 70, format: 'webp' })"
10+
:operator-img-src="Identity.logoPath"
1111
operator-img-alt="Transition Écologique des Entreprises - ADEME"
1212
operator-img-style="width:3.5rem;"
1313
/>
@@ -19,11 +19,8 @@
1919
2020
import { TeeDsfrHeaderMenuLinkProps } from '@/components/element/vueDsfr/dsfrHeader/TeeDsfrHeaderMenuLinks.vue'
2121
import { Identity } from '@/tools/Identity'
22-
import { Image } from '@/tools/image'
2322
import { RouteName } from '@/types/routeType'
2423
25-
const img = Image.getUrl
26-
2724
const quickLinks: TeeDsfrHeaderMenuLinkProps[] = [
2825
{
2926
label: 'Accueil',

‎apps/nuxt/src/components/element/card/TeeCtaCard.vue‎

Lines changed: 37 additions & 175 deletions
Original file line numberDiff line numberDiff line change
@@ -1,207 +1,69 @@
11
<template>
2-
<div class="fr-container fr-px-0">
3-
<div class="fr-grid-row">
4-
<div class="fr-col-12">
2+
<div class="fr-card fr-card--cta fr-card--horizontal fr-card--grey fr-p-4v">
3+
<div class="fr-card__body">
4+
<div class="fr-card__content fr-justify-center">
5+
<h2
6+
class="fr-card__title fr-text--blue"
7+
v-html="title"
8+
/>
9+
<p
10+
class="fr-card__desc fr-text--md"
11+
v-html="description"
12+
/>
513
<div
6-
class="fr-card fr-enlarge-link fr-card--horizontal fr-card--grey fr-p-4v fr-card--no-border"
7-
:class="{ 'fr-card--no-icon': target === '_self' }"
14+
v-if="ctaBtnTitle"
15+
class="fr-card__end"
816
>
9-
<div class="fr-card__body">
10-
<div class="fr-card__content fr-justify-center">
11-
<component
12-
:is="titleTag"
13-
class="fr-card__title"
14-
>
15-
<a
16-
v-if="onClick"
17-
href="#"
18-
:target="target"
19-
:rel="target === '_blank' ? 'noopener external' : 'noopener'"
20-
@click.prevent="onClick()"
21-
v-html="resolvedTitle"
22-
/>
23-
<a
24-
v-else
25-
:href="resolvedLink"
26-
:target="target"
27-
:rel="target === '_blank' ? 'noopener external' : 'noopener'"
28-
v-html="resolvedTitle"
29-
/>
30-
</component>
31-
<p
32-
class="fr-card__desc fr-text--md"
33-
v-html="resolvedDescription"
34-
/>
35-
<div
36-
v-if="ctaBtnTitle"
37-
class="fr-card__end"
38-
>
39-
<TeeDsfrButton class="inline-flex fr-text--yellow fr-text--bold fr-btn-align-center">
40-
<template #default>
41-
{{ ctaBtnTitle }}
42-
</template>
43-
</TeeDsfrButton>
44-
</div>
45-
</div>
46-
</div>
47-
<div class="fr-card__header">
48-
<div
49-
class="fr-card__img"
50-
:class="[bgColor ? `fr-bg--${bgColor}` : '', objectFit === 'contain' ? 'fr-card__img--contain' : '']"
51-
>
52-
<img
53-
class="fr-responsive-img"
54-
:src="resolvedImageSrc"
55-
:alt="resolvedImageAlt"
56-
/>
57-
<img
58-
class="fr-card__logo"
59-
:src="img('/images/logos/mission-transition-logo-alone.png', { height: 50, width: 50, quality: 100, loading: 'lazy' })"
60-
alt="Transition Ecologique des Entreprises - ADEME"
61-
/>
62-
</div>
63-
</div>
17+
<TeeDsfrButton
18+
class="inline-flex fr-text--yellow fr-text--bold fr-btn-align-center"
19+
@click.prevent="onClick()"
20+
>
21+
<template #default>
22+
{{ ctaBtnTitle }}
23+
</template>
24+
</TeeDsfrButton>
6425
</div>
6526
</div>
6627
</div>
28+
<TeeHeaderLogoCard
29+
:image-src="imageSrc"
30+
:image-alt="imageAlt"
31+
:img-bg-color="imgBgColor"
32+
:object-fit="objectFit"
33+
/>
6734
</div>
6835
</template>
6936

7037
<script setup lang="ts">
71-
import { Image } from '@/tools/image'
72-
import { computed } from 'vue'
73-
import { useRouter } from 'vue-router'
74-
import { Color, RouteName } from '@/types'
38+
import { Color } from '@/types'
7539
7640
interface Props {
77-
link?: string
7841
title?: string
79-
description?: string
42+
description: string
8043
imageSrc?: string
8144
imageAlt?: string
8245
objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
83-
bgColor?: Color
46+
imgBgColor?: Color
8447
ctaBtnTitle?: string
85-
target?: '_blank' | '_self' | '_parent' | '_top'
86-
onClick?: CallableFunction
87-
titleTag?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
88-
withIframeResizer?: boolean
48+
onClick: CallableFunction
8949
}
9050
91-
const props = withDefaults(defineProps<Props>(), {
92-
link: undefined,
93-
title: undefined,
51+
withDefaults(defineProps<Props>(), {
52+
title: 'Accédez aux aides publiques pour votre projet de transition écologique',
9453
imageSrc: undefined,
9554
imageAlt: undefined,
9655
objectFit: 'cover',
97-
bgColor: undefined,
98-
ctaBtnTitle: undefined,
99-
target: '_blank',
100-
onClick: undefined,
101-
titleTag: 'h3',
102-
withIframeResizer: true
56+
imgBgColor: undefined,
57+
ctaBtnTitle: undefined
10358
})
104-
105-
const router = useRouter()
106-
107-
const defaultLink = router.resolve({ name: RouteName.Homepage }).href
108-
const defaultTitle = 'Accédez aux aides publiques pour votre projet de transition écologique'
109-
const defaultImageSrc = 'images/TEE_iframe_transparent.webp'
110-
const defaultImageAlt = "Image de la page d'accueil de mission transition écologique"
111-
112-
const resolvedLink = computed(() => props.link || defaultLink)
113-
const resolvedTitle = computed(() => props.title || defaultTitle)
114-
const resolvedDescription = computed(
115-
() =>
116-
props.description ||
117-
'Le service public <strong>Transition écologique des entreprises</strong> vous permet de trouver les aides, accompagnements' +
118-
"et ressources issues de l'ensemble des acteurs publics pour vous aider à réaliser votre projet de transition écologique" +
119-
'(ADEME, CCI, CMA, Bpifrance, DGFiP, etc.)'
120-
)
121-
const resolvedImageSrc = computed(() =>
122-
props.imageSrc
123-
? img(props.imageSrc, { height: 250, quality: 70, loading: 'lazy' })
124-
: img(defaultImageSrc, { height: 350, quality: 100, loading: 'lazy' })
125-
)
126-
const resolvedImageAlt = computed(() => props.imageAlt || defaultImageAlt)
127-
128-
const img = Image.getUrl
129-
130-
if (props.withIframeResizer) {
131-
const imageResizerChild = () => import('@iframe-resizer/child')
132-
imageResizerChild()
133-
}
13459
</script>
13560

13661
<style scoped lang="scss">
13762
@use '@/assets/scss/tool';
13863
13964
.fr-card {
140-
.fr-card--no-icon {
141-
a::after {
142-
display: none !important;
143-
}
144-
}
145-
146-
.fr-card__title {
147-
a {
148-
background-image: none;
149-
outline-width: 0;
150-
151-
&::after {
152-
display: inline-block !important;
153-
}
154-
}
155-
}
156-
157-
@include tool.media-query-respond-from(md) {
158-
.fr-card__header {
159-
flex-basis: 30%;
160-
}
161-
}
162-
163-
@include tool.media-query-respond-from(lg) {
164-
.fr-card__header {
165-
flex-basis: 25%;
166-
}
167-
}
168-
169-
.fr-card__header {
170-
align-content: center;
171-
}
172-
173-
@include tool.media-query-respond-from(md) {
174-
.fr-card__img {
175-
max-height: 250px;
176-
}
177-
}
178-
179-
.fr-card__img {
180-
position: relative;
181-
182-
img {
183-
max-height: 250px;
184-
}
185-
186-
&::after {
187-
content: '';
188-
position: absolute;
189-
z-index: 0; // Lower layer
190-
height: 100%;
191-
width: 100%;
192-
top: 0;
193-
left: 0;
194-
background: linear-gradient(to bottom right, rgb(255 255 255 / 0%) 70%, rgb(255 255 255 / 100%) 95%) !important;
195-
}
196-
197-
.fr-card__logo {
198-
position: absolute;
199-
bottom: 0;
200-
right: 0;
201-
width: 50px;
202-
height: 50px;
203-
z-index: 1; // Higher than the gradient
204-
}
65+
:hover:not(button, button *) {
66+
cursor: default !important;
20567
}
20668
}
20769
</style>

0 commit comments

Comments
 (0)