From 339c6957fe92c4ec1809159f09c55201d3794c18 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 6 May 2022 18:21:16 +0200
Subject: chore: add a Contact page

---
 src/components/atoms/layout/notice.stories.tsx | 13 +++++++++++++
 src/components/atoms/layout/notice.tsx         | 14 +++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

(limited to 'src/components/atoms/layout')

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
@@ -4,6 +4,10 @@ import styles from './notice.module.scss';
 export type NoticeKind = 'error' | 'info' | 'success' | 'warning';
 
 export type NoticeProps = {
+  /**
+   * Set additional classnames to the notice wrapper.
+   */
+  className?: string;
   /**
    * The notice kind.
    */
@@ -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>
+  ) : (
+    <></>
   );
 };
 
-- 
cgit v1.2.3