chore: add a Contact page

5 files changed, 41 insertions, 10 deletions

diff --git a/src/components/atoms/layout/notice.stories.tsx b/src/components/atoms/layout/notice.stories.tsx
index 62f4cba..dedf834 100644
--- a/src/components/atoms/layout/notice.stories.tsx
+++ b/src/components/atoms/layout/notice.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Atoms/Layout/Notice',
   component: NoticeComponent,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the notice wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     kind: {
       control: {
         type: 'select',
diff --git a/src/components/atoms/layout/notice.tsx b/src/components/atoms/layout/notice.tsx
index 115bd9c..a0d1d3e 100644
--- a/src/components/atoms/layout/notice.tsx
+++ b/src/components/atoms/layout/notice.tsx
@@ -5,6 +5,10 @@ export type NoticeKind = 'error' | 'info' | 'success' | 'warning';
 
 export type NoticeProps = {
   /**
+   * Set additional classnames to the notice wrapper.
+   */
+  className?: string;
+  /**
    * The notice kind.
    */
   kind: NoticeKind;
@@ -19,11 +23,15 @@ export type NoticeProps = {
  *
  * Render a colored message depending on notice kind.
  */
-const Notice: FC<NoticeProps> = ({ kind, message }) => {
+const Notice: FC<NoticeProps> = ({ className = '', kind, message }) => {
   const kindClass = `wrapper--${kind}`;
 
-  return (
-    <div className={`${styles.wrapper} ${styles[kindClass]}`}>{message}</div>
+  return message ? (
+    <div className={`${styles.wrapper} ${styles[kindClass]} ${className}`}>
+      {message}
+    </div>
+  ) : (
+    <></>
   );
 };
 
diff --git a/src/components/organisms/forms/contact-form.stories.tsx b/src/components/organisms/forms/contact-form.stories.tsx
index 9b936f9..39d0b71 100644
--- a/src/components/organisms/forms/contact-form.stories.tsx
+++ b/src/components/organisms/forms/contact-form.stories.tsx
@@ -64,7 +64,7 @@ const Template: ComponentStory<typeof ContactForm> = (args) => (
  */
 export const Contact = Template.bind({});
 Contact.args = {
-  sendMail: (reset: () => void) => {
+  sendMail: async (_data, reset: () => void) => {
     reset();
   },
 };
diff --git a/src/components/organisms/forms/contact-form.test.tsx b/src/components/organisms/forms/contact-form.test.tsx
index 744f147..6225fa9 100644
--- a/src/components/organisms/forms/contact-form.test.tsx
+++ b/src/components/organisms/forms/contact-form.test.tsx
@@ -2,7 +2,9 @@ import { render, screen } from '@test-utils';
 import ContactForm from './contact-form';
 
 const props = {
-  sendMail: () => null,
+  sendMail: async () => {
+    /** Do nothing. */
+  },
 };
 
 describe('ContactForm', () => {
diff --git a/src/components/organisms/forms/contact-form.tsx b/src/components/organisms/forms/contact-form.tsx
index 4a6902b..912402c 100644
--- a/src/components/organisms/forms/contact-form.tsx
+++ b/src/components/organisms/forms/contact-form.tsx
@@ -6,6 +6,13 @@ import { FC, ReactNode, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './contact-form.module.scss';
 
+export type ContactFormData = {
+  email: string;
+  message: string;
+  name: string;
+  subject: string;
+};
+
 export type ContactFormProps = {
   /**
    * Set additional classnames to the form wrapper.
@@ -16,10 +23,9 @@ export type ContactFormProps = {
    */
   Notice?: ReactNode;
   /**
-   * A callback function to send mail. It takes a function as parameter to
-   * reset the form.
+   * A callback function to send mail.
    */
-  sendMail: (reset: () => void) => void;
+  sendMail: (data: ContactFormData, reset: () => void) => Promise<void>;
 };
 
 /**
@@ -80,9 +86,11 @@ const ContactForm: FC<ContactFormProps> = ({
     id: 'yN5P+m',
   });
 
-  const submitHandler = () => {
+  const submitHandler = async () => {
     setIsSubmitting(true);
-    sendMail(resetForm);
+    sendMail({ email, message, name, subject: object }, resetForm).then(() =>
+      setIsSubmitting(false)
+    );
   };
 
   return (