project-booster-vue 9.32.0 → 9.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/pedagogy/PbPedagogy.stories.mdx +9 -0
- package/src/components/pedagogy/PbPedagogy.vue +14 -0
- package/src/components/pedagogy/__snapshots__/storyshots-puppeteer-test-puppeteer-ts-image-storyshots-project-booster-components-pedagogy-pb-pedagogy-/360/237/246/240-with-instruction-1-snap.png +0 -0
- package/src/components/pedagogy/with-instructions.json +45 -0
package/package.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Anchor, Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
|
|
2
2
|
import DEFAULT_PAYLOAD from './default-payload';
|
|
3
|
+
import WITH_INSTRUCTIONS from './with-instructions';
|
|
3
4
|
import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
|
|
4
5
|
import PbPedagogy from './PbPedagogy';
|
|
5
6
|
import store from '../../stores/store';
|
|
@@ -48,3 +49,11 @@ export const TemplateSandbox = (args, { argTypes }) => ({
|
|
|
48
49
|
{TemplateSandbox.bind({})}
|
|
49
50
|
</Story>
|
|
50
51
|
</Canvas>
|
|
52
|
+
|
|
53
|
+
## showCase
|
|
54
|
+
|
|
55
|
+
<Canvas>
|
|
56
|
+
<Story inline={false} height="862px" name="With instruction" args={{ payload: WITH_INSTRUCTIONS }}>
|
|
57
|
+
{TemplateSandbox.bind({})}
|
|
58
|
+
</Story>
|
|
59
|
+
</Canvas>
|
|
@@ -14,6 +14,13 @@
|
|
|
14
14
|
<div class="pb-pedagogy__content-description-line-text" v-html="line.label" />
|
|
15
15
|
</div>
|
|
16
16
|
</m-flex>
|
|
17
|
+
<m-flex
|
|
18
|
+
class="pb-pedagogy__content__button-informations"
|
|
19
|
+
align-items="center"
|
|
20
|
+
v-if="payload.viewModel.instructionsButton"
|
|
21
|
+
>
|
|
22
|
+
{{ payload.viewModel.instructionsButton.text }}
|
|
23
|
+
</m-flex>
|
|
17
24
|
<m-button
|
|
18
25
|
v-if="payload.viewModel.downloadButton"
|
|
19
26
|
:theme="payload.viewModel.downloadButton.theme"
|
|
@@ -229,6 +236,13 @@ $responsive-breakpoint: 'm';
|
|
|
229
236
|
margin-bottom: $mu100;
|
|
230
237
|
}
|
|
231
238
|
}
|
|
239
|
+
|
|
240
|
+
&__button-informations {
|
|
241
|
+
@include set-font-scale('07', 'm');
|
|
242
|
+
@include set-font-face('semi-bold');
|
|
243
|
+
margin-bottom: calc($mu100 * -1);
|
|
244
|
+
margin-top: $mu200;
|
|
245
|
+
}
|
|
232
246
|
}
|
|
233
247
|
|
|
234
248
|
:deep(.pb-pedagogy__content-description-bold) {
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
{
|
|
2
|
+
"viewModel": {
|
|
3
|
+
"title": "Un email de rappel pour préparer votre RDV vous sera envoyé",
|
|
4
|
+
"icon": "https://storage.googleapis.com/project-booster-media/vad/fin-de-parcours/mail_80.svg",
|
|
5
|
+
"description": [
|
|
6
|
+
{
|
|
7
|
+
"label": "Les mesures et <span class='pb-pedagogy__content-description-bold'> plans de votre pièce </span> sont importants pour le rendez-vous. Ils\n permettront à votre conseiller de créer un <span class='pb-pedagogy__content-description-bold'> plan 3D adapté </span> à votre cuisine.\n <span class='pb-pedagogy__content-description-bold'> Vous pouvez les ajouter à partir à partir du mail que vous avez reçu. </span>",
|
|
8
|
+
"icon": "https://storage.googleapis.com/project-booster-media/vad/lm-advisor.png"
|
|
9
|
+
}
|
|
10
|
+
],
|
|
11
|
+
"instructionsButton": {
|
|
12
|
+
"text": "Vous pouvez maintenant choisir votre créneau de RDV"
|
|
13
|
+
},
|
|
14
|
+
"downloadButton": {
|
|
15
|
+
"label": "Comment faire son plan ? (PDF)",
|
|
16
|
+
"theme": "bordered",
|
|
17
|
+
"href": "https://storage.googleapis.com/project-booster-media/vad/PDF/Plan_Prise-de-mesure_Leroy-Merlin.pdf"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
"cards": [
|
|
21
|
+
{
|
|
22
|
+
"code": "CARD-2",
|
|
23
|
+
"viewModel": {
|
|
24
|
+
"url": "https://www.leroymerlin.fr/produits/cuisine/cuisine-equipee-delinia-id/",
|
|
25
|
+
"image": "https://storage.googleapis.com/project-booster-media/kitchen/kitchen-range.jpeg",
|
|
26
|
+
"title": "Découvrir nos gammes de cuisines",
|
|
27
|
+
"width": "full",
|
|
28
|
+
"widthFromM": "1of3",
|
|
29
|
+
"widthFromL": "1of3"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"code": "CARD-3",
|
|
34
|
+
"viewModel": {
|
|
35
|
+
"value": "3",
|
|
36
|
+
"url": "https://www.leroymerlin.fr/produits/cuisine/cuisine-equipee-delinia-id/",
|
|
37
|
+
"image": "https://images.ctfassets.net/8q8qvv8j6cpk/59igdEVBhIa37nrfbnGs4V/252c4bb73bf865a68b53036fba6dba21/carrelage.jpg",
|
|
38
|
+
"title": "Des idées et conseils pour votre cuisine",
|
|
39
|
+
"width": "full",
|
|
40
|
+
"widthFromM": "1of3",
|
|
41
|
+
"widthFromL": "1of3"
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
]
|
|
45
|
+
}
|