chore: add a Contact page

2 files changed, 24 insertions, 3 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>
+  ) : (
+    <></>
   );
 };