Notification docs + preview (#167)

* Notification docs + preview

* Cleanup

@stellar/design-system-website/docs/components/notifications/_category_.json

@@ -0,0 +1,6 @@
+{
+  "label": "Notifications",
+  "link": {
+    "type": "generated-index"
+  }
+}

@stellar/design-system-website/docs/components/notifications/notification.mdx

@@ -0,0 +1,19 @@
+---
+slug: /notification
+---
+
+# Notification
+
+<ComponentDescription componentName="Notification" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Notification">
+  <Notification title="Notification title" variant="primary" />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Notification" />

@stellar/design-system-website/src/componentPreview/notificationPreview .tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+import CheckIconSvg from "@site/static/img/check-icon.svg";
+
+export const notificationPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "variant",
+      options: [
+        {
+          value: "primary",
+          label: "Primary",
+        },
+        {
+          value: "secondary",
+          label: "Secondary",
+        },
+        {
+          value: "success",
+          label: "Success",
+        },
+        {
+          value: "error",
+          label: "Error",
+        },
+        {
+          value: "warning",
+          label: "Warning",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "icon",
+      customValue: <CheckIconSvg />,
+      options: [
+        {
+          value: "",
+          label: "Default icon",
+        },
+        {
+          value: "customIcon",
+          label: "Custom icon",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "children",
+      customValue:
+        "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur asperiores autem excepturi doloremque esse, dicta sunt soluta! Quia quis eos beatae et optio facere voluptatum. Labore illum molestiae corporis id?",
+      options: [
+        {
+          value: "",
+          label: "No message",
+        },
+        {
+          value: "Message",
+          label: "Message",
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/src/components/PreviewBlock/index.tsx

@@ -13,6 +13,7 @@ import { headingPreview } from "@site/src/componentPreview/headingPreview";
 import { captionPreview } from "@site/src/componentPreview/captionPreview";
 import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { titlePreview } from "@site/src/componentPreview/titlePreview";
+import { notificationPreview } from "@site/src/componentPreview/notificationPreview ";
 
 // =============================================================================
 // Component previews
@@ -25,6 +26,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Caption: captionPreview,
   Paragraph: paragraphPreview,
   Title: titlePreview,
+  Notification: notificationPreview,
 };
 
 type Theme = "sds-theme-light" | "sds-theme-dark";
@@ -69,7 +71,7 @@ export const PreviewBlock = ({
   children: React.ReactElement;
 }) => {
   const [sds, setSds] = useState<any>({});
-  const { Checkbox, Select } = sds;
+  const { Checkbox, Select, Notification } = sds;
 
   // Importing SDS here because we need it async for server-side-rendering
   useEffect(() => {
@@ -191,6 +193,18 @@ export const PreviewBlock = ({
     { checkbox: [], select: [] },
   );
 
+  const renderPreview = () => {
+    // Need to handle Notification manually because of name collision that
+    // breaks rendering
+    if (componentName === "Notification") {
+      return Notification ? (
+        <Notification title="Notification title" variant="primary" {...props} />
+      ) : null;
+    }
+
+    return component;
+  };
+
   return (
     <>
       <div className={`PreviewBlock ${theme}`}>
@@ -217,7 +231,7 @@ export const PreviewBlock = ({
           </div>
         </div>
 
-        <div className="PreviewBlock__component">{component}</div>
+        <div className="PreviewBlock__component">{renderPreview()}</div>
 
         {options.checkbox.length > 0 ? (
           <div className="PreviewBlock__checkboxes">

@stellar/design-system/src/components/Notification/index.tsx

@@ -2,14 +2,28 @@ import React from "react";
 import { Icon } from "../../icons";
 import "./styles.scss";
 
-interface NotificationProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+/** */
+export interface NotificationProps {
+  /** Variant of the notification */
   variant: "primary" | "secondary" | "success" | "error" | "warning";
+  /** Notification title */
   title: string;
+  /** Notification icon @defaultValue `<Icon.Info />` */
   icon?: React.ReactNode;
+  /** Notification message */
   children?: string | React.ReactNode;
 }
 
-export const Notification: React.FC<NotificationProps> = ({
+interface Props
+  extends NotificationProps,
+    React.HtmlHTMLAttributes<HTMLDivElement> {
+  title: string;
+}
+
+/**
+ * Use notification to draw user attention. There are five variants `primary`, `secondary`, `success`, `error`, and `warning`.
+ */
+export const Notification: React.FC<Props> = ({
   variant,
   title,
   icon,

@stellar/design-system/src/components/Notification/styles.scss

@@ -10,6 +10,7 @@
   font-family: var(--font-family-base);
   background-color: var(--Notification-color-background);
   border: 1px solid var(--Notification-color-border);
+  border-radius: pxToRem(4px);
   display: flex;
   flex-direction: column;
   gap: pxToRem(8px);