feat(design-system:newsletter_form): add base component

packages/design-system/.storybook/preview.ts

@@ -3,6 +3,10 @@ import 'virtual:uno.css';
 
 import type { Preview } from '@storybook/vue3';
 
+globalThis.RomainLanz = {
+	appUrl: 'http://romainlanz.localhost:3333',
+};
+
 const preview: Preview = {
 	parameters: {
 		layout: 'centered',

packages/design-system/package.json

@@ -31,10 +31,10 @@
 		"./dialog": "./src/molecules/dialog/dialog.vue",
 		"./field": "./src/molecules/field/field.vue",
 		"./field-select": "./src/molecules/field_select/field_select.vue",
-		"./footer": "./src/molecules/footer/footer.vue",
 		"./headline": "./src/molecules/headline/headline.vue",
 		"./pagination": "./src/molecules/pagination/pagination.vue",
 		"./user-action-menu": "./src/molecules/user_action_menu/user_action_menu.vue",
+    "./footer": "./src/organisms/footer/footer.vue",
 		"./top-bar": "./src/organisms/top_bar/top_bar.vue"
 	},
 	"scripts": {

packages/design-system/src/molecules/footer/footer.stories.ts → packages/design-system/src/organisms/footer/footer.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3';
 
 const meta = {
 	component: Footer,
-	title: 'Molecules/Footer',
+	title: 'Organisms/Footer',
 	parameters: {
 		layout: 'padded',
 	},

packages/design-system/src/molecules/footer/footer.vue → packages/design-system/src/organisms/footer/footer.vue

@@ -4,9 +4,18 @@
 	import FooterSection from './footer_section.vue';
 	import SocialNetwork from './social_network.vue';
 	import { client } from '@rlanz/rpc/client';
+	import NewsletterForm from '../newsletter_form/newsletter_form.vue';
+
+	const emit = defineEmits<{
+		register: [email: string];
+	}>();
 
 	const contactUrl = client.$url('pages.contact');
 	const aboutUrl = client.$url('pages.about');
+
+	function onRegister(email: string) {
+		emit('register', email);
+	}
 </script>
 
 <template>
@@ -61,6 +70,10 @@
 						</li>
 					</ul>
 				</FooterSection>
+
+				<FooterSection title="Newsletter">
+					<NewsletterForm @register="onRegister" />
+				</FooterSection>
 			</div>
 
 			<hr class="h-1px border-none bg-gray-800 my-12" />

packages/design-system/src/organisms/newsletter_form/newsletter_confirmation_dialog.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+	import { computed, ref, unref } from 'vue';
+	import Button from '../../atoms/button/button.vue';
+	import Dialog from '../../molecules/dialog/dialog.vue';
+	import Checkbox from '../../atoms/checkbox/checkbox.vue';
+	import Field from '../../molecules/field/field.vue';
+
+	const emit = defineEmits<{
+		accepted: [];
+	}>();
+
+	const email = defineModel<string>({ required: true });
+
+	const open = ref(false);
+	const acceptTerms = ref(false);
+
+	const isFormValid = computed(() => {
+		return acceptTerms.value && unref(email).length > 1;
+	});
+
+	function handleSubmit() {
+		emit('accepted');
+		open.value = false;
+	}
+</script>
+
+<template>
+	<Dialog title="Confirmez votre inscription" v-model="open">
+		<template #trigger>
+			<Button size="extraSmall">S'abonner</Button>
+		</template>
+
+		<template #content>
+			<form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+				<Field v-model="email" label="Adresse email" type="email" />
+
+				<Checkbox v-model="acceptTerms" label="J'accepte de recevoir la newsletter de RomainLanz" />
+
+				<p class="text-sm text-gray-700">
+					Nous utilisons Brevo en tant que plateforme marketing. En soumettant ce formulaire, vous acceptez que les
+					données personnelles que vous avez fournies soient transférées à Brevo pour être traitées conformément à la
+					<a class="underline" href="https://www.brevo.com/fr/legal/privacypolicy" target="_blank" rel="nofollow">
+						politique de confidentialité
+					</a>
+					de Brevo.
+				</p>
+
+				<div class="flex justify-end">
+					<Button color="violet" size="small" type="submit" :disabled="!isFormValid">S'abonner</Button>
+				</div>
+			</form>
+		</template>
+	</Dialog>
+</template>

packages/design-system/src/organisms/newsletter_form/newsletter_form.stories.ts

@@ -0,0 +1,13 @@
+import NewsletterForm from './newsletter_form.vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+const meta = {
+	component: NewsletterForm,
+	title: 'Organisms/NewsletterForm',
+} satisfies Meta<typeof NewsletterForm>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {};

packages/design-system/src/organisms/newsletter_form/newsletter_form.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+	import { ref, unref } from 'vue';
+	import NewsletterConfirmationDialog from './newsletter_confirmation_dialog.vue';
+	import Field from '../../molecules/field/field.vue';
+
+	const emit = defineEmits<{
+		register: [email: string];
+	}>();
+
+	const email = ref('');
+
+	function onAccept() {
+		emit('register', unref(email));
+	}
+</script>
+
+<template>
+	<div class="flex flex-col gap-10 w-min">
+		<p>Abonne-toi pour recevoir les dernières tendances et ressources pour ta veille technique.</p>
+
+		<div class="flex gap-4">
+			<Field class="h-full" v-model="email" placeholder="[email protected]" type="email" />
+
+			<NewsletterConfirmationDialog v-model="email" @accepted="onAccept" />
+		</div>
+	</div>
+</template>