notification

figma · Jun 8, 2024 · ff8c3fa · ff8c3fa
1 parent bb22b6c
commit ff8c3fa
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 126 deletions.
diff --git a/figma.config.json b/figma.config.json
@@ -50,7 +50,7 @@
       "<FIGMA_URL_MENU_SEPARATOR>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:731",
       "<FIGMA_URL_NAVIGATION>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2194-14984",
       "<FIGMA_URL_NAVIGATION_ITEM>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=7768-19970",
-      "<FIGMA_URL_NOTIFICATION>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2093-2151",
+      "<FIGMA_URL_NOTIFICATION>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=124-8256",
       "<FIGMA_URL_PAGINATION_PAGE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:890",
       "<FIGMA_URL_PAGINATION_GAP>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:868",
       "<FIGMA_URL_PAGINATION_PREVIOUS>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:880",

diff --git a/src/stories/ui/primitives/Notification.stories.tsx b/src/stories/ui/primitives/Notification.stories.tsx
@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { IconInfo } from "icons";
 import { ComponentProps } from "react";
 import {
   Button,
-  ButtonGroup,
+  DestructiveButton,
   Notification,
-  NotificationActions,
-  NotificationBody,
-  NotificationTitle,
+  Text,
+  TextStrong,
 } from "ui/primitives";
 
 const meta: Meta<typeof Notification> = {
@@ -17,7 +17,7 @@ const meta: Meta<typeof Notification> = {
 export default meta;
 
 export const Default: StoryObj<
-  Omit<ComponentProps<typeof Notification>, "scheme"> & {
+  Omit<ComponentProps<typeof Notification>, "variant"> & {
     "[type]": "message" | "alert";
   }
 > = {
@@ -26,17 +26,15 @@ export const Default: StoryObj<
     "[type]": { control: { type: "select" }, options: ["message", "alert"] },
   },
   render: ({ "[type]": _type, ...args }) => {
-    const scheme = _type === "message" ? "default" : "danger";
+    const variant = _type === "message" ? "message" : "alert";
     return (
-      <Notification {...args} scheme={scheme}>
-        <NotificationTitle>Notification Title</NotificationTitle>
-        <NotificationBody>Hello there! This is a message</NotificationBody>
-        {_type === "message" && (
-          <NotificationActions>
-            <ButtonGroup>
-              <Button size="sm">Hello</Button>
-            </ButtonGroup>
-          </NotificationActions>
+      <Notification {...args} variant={variant} icon={<IconInfo size="20" />}>
+        <TextStrong>Notification Title</TextStrong>
+        <Text>Hello there! This is a message</Text>
+        {_type === "message" ? (
+          <Button size="small">Hello</Button>
+        ) : (
+          <DestructiveButton size="small">Hello</DestructiveButton>
         )}
       </Notification>
     );

diff --git a/src/ui/primitives/IconButton/IconButton.figma.tsx b/src/ui/primitives/IconButton/IconButton.figma.tsx
@@ -6,9 +6,6 @@ const sharedProps = {
   isDisabled: figma.enum("State", {
     Disabled: true,
   }),
-  scheme: figma.enum("Scheme", {
-    Neutral: "neutral",
-  }),
   size: figma.enum("Size", {
     Small: "small",
   }),

diff --git a/src/ui/primitives/Notification/Notification.figma.tsx b/src/ui/primitives/Notification/Notification.figma.tsx
@@ -1,36 +1,26 @@
-// import figma from "@figma/code-connect";
-// import {
-//   Notification,
-//   NotificationActions,
-//   NotificationBody,
-//   NotificationTitle,
-// } from "./Notification";
+import figma from "@figma/code-connect";
+import { Notification } from "./Notification";
 
-// figma.connect(Notification, "<FIGMA_URL_NOTIFICATION>", {
-//   props: {
-//     title: figma.string("Title"),
-//     hasIcon: figma.boolean("Has Icon"),
-//     isDismissible: figma.boolean("Is Dismissible"),
-//     actions: figma.enum("Scheme", {
-//       Message: figma.children("Button"),
-//       Notification: undefined,
-//     }),
-//     body: figma.boolean("Has Body", {
-//       true: figma.string("Body"),
-//       false: undefined,
-//     }),
-//     scheme: figma.enum("Scheme", {
-//       Message: "message",
-//       Warning: "warning",
-//       Danger: "danger",
-//       Neutral: "neutral",
-//     }),
-//   },
-//   example: ({ hasIcon, isDismissible, actions, body, title }) => (
-//     <Notification hasIcon={hasIcon} isDismissible={isDismissible}>
-//       <NotificationTitle>{title}</NotificationTitle>
-//       <NotificationBody>{body}</NotificationBody>
-//       <NotificationActions>{actions}</NotificationActions>
-//     </Notification>
-//   ),
-// });
+figma.connect(Notification, "<FIGMA_URL_NOTIFICATION>", {
+  props: {
+    title: figma.children("Text Strong"),
+    icon: figma.boolean("Has Icon", {
+      true: figma.instance("Icon"),
+      false: undefined,
+    }),
+    isDismissible: figma.boolean("Is Dismissible"),
+    button: figma.children("Button"),
+    body: figma.children("Text"),
+    variant: figma.enum("Variant", {
+      Message: "message",
+      Alert: "alert",
+    }),
+  },
+  example: ({ icon, isDismissible, button, body, title }) => (
+    <Notification icon={icon} isDismissible={isDismissible}>
+      {title}
+      {body}
+      {button}
+    </Notification>
+  ),
+});
diff --git a/src/ui/primitives/Notification/Notification.tsx b/src/ui/primitives/Notification/Notification.tsx
@@ -1,65 +1,49 @@
 import clsx from "clsx";
-import { IconAlertTriangle, IconInfo, IconX } from "icons";
+import { IconX } from "icons";
+import { ReactNode } from "react";
 import {
   DestructiveIconButton,
   IconButton,
 } from "ui/primitives/IconButton/IconButton";
-import {
-  Text,
-  TextProps,
-  TextStrong,
-  TextStrongProps,
-} from "ui/primitives/Text/Text";
 import "./notification.css";
 
-type NotificationScheme = "default" | "danger";
-
-const iconFromScheme = (scheme: NotificationScheme): React.ReactNode => {
-  switch (scheme) {
-    case "default":
-      return <IconInfo size="20" />;
-    case "danger":
-      return <IconAlertTriangle size="20" />;
-  }
-};
+type NotificationVariant = "message" | "alert";
 
 // TODO: notification still needs an onDismiss handler or something
 export type NotificationProps = React.ComponentPropsWithoutRef<"div"> & {
   isDismissible?: boolean;
-  hasIcon?: boolean;
-  scheme?: NotificationScheme;
+  icon?: ReactNode;
+  variant?: NotificationVariant;
 };
 export function Notification({
   children,
   className,
   isDismissible,
-  hasIcon = true,
-  scheme = "default",
+  icon,
+  variant = "message",
   ...props
 }: NotificationProps) {
   const classNames = clsx(
     className,
     "notification",
-    `notification-scheme-${scheme}`,
+    `notification-variant-${variant}`,
   );
   return (
     <div className={classNames} {...props}>
-      {hasIcon && (
-        <span className="notification-icon">{iconFromScheme(scheme)}</span>
-      )}
+      {icon && <span className="notification-icon">{icon}</span>}
       <div className="notification-content">{children}</div>
       {isDismissible &&
-        (scheme === "danger" ? (
+        (variant === "alert" ? (
           <DestructiveIconButton
-            size="sm"
-            variant="subtle"
+            size="small"
+            variant="danger-subtle"
             aria-label="Dismiss notification"
           >
             <IconX />
           </DestructiveIconButton>
         ) : (
           <IconButton
-            size="sm"
+            size="small"
             variant="subtle"
             aria-label="Dismiss notification"
           >
@@ -69,28 +53,3 @@ export function Notification({
     </div>
   );
 }
-
-export type NotificationTitleProps = TextStrongProps;
-export function NotificationTitle({
-  className,
-  ...props
-}: NotificationTitleProps) {
-  const classNames = clsx(className, "notification-title");
-  return <TextStrong className={classNames} {...props} />;
-}
-export type NotificationBodyProps = TextProps;
-export function NotificationBody({
-  className,
-  ...props
-}: NotificationBodyProps) {
-  const classNames = clsx(className, "notification-body");
-  return <Text className={classNames} {...props} />;
-}
-export type NotificationActionsProps = React.ComponentPropsWithoutRef<"div">;
-export function NotificationActions({
-  className,
-  ...props
-}: NotificationActionsProps) {
-  const classNames = clsx(className, "notification-actions");
-  return <div className={classNames} {...props} />;
-}
diff --git a/src/ui/primitives/Notification/notification.css b/src/ui/primitives/Notification/notification.css
@@ -10,7 +10,7 @@
   grid-template-areas: "icon content" "icon content" "icon content";
   grid-template-columns: min-content 1fr;
   justify-content: center;
-  padding: var(--sds-size-padding-lg) var(--sds-size-padding-xl)
+  padding: var(--sds-size-padding-lg) var(--sds-size-padding-md)
     var(--sds-size-padding-lg) var(--sds-size-padding-lg);
   position: relative;
   width: 100%;
@@ -25,13 +25,10 @@
 
   > .notification-content {
     grid-area: content;
-    > .notification-title + .notification-body {
+    > * + * {
       margin-top: var(--sds-size-gap-xs);
     }
-    > .notification-title {
-      font: var(--sds-font-body-strong);
-    }
-    > .notification-actions {
+    > .button {
       margin-top: var(--sds-size-gap-md);
     }
   }
@@ -47,15 +44,15 @@
   }
 }
 
-.notification-scheme-default {
-  --notification-color: var(--sds-color-text-brand-default);
-  --notification-icon: var(--sds-color-icon-brand-default);
-  --notification-border-color: var(--sds-color-border-brand-default);
-  --notification-background-color: var(--sds-color-bg-brand-tertiary);
+.notification-variant-message {
+  --notification-color: var(--sds-color-text-default-default);
+  --notification-icon: var(--sds-color-icon-default-default);
+  --notification-border-color: var(--sds-color-border-default-default);
+  --notification-background-color: var(--sds-color-bg-default-default);
 }
-.notification-scheme-danger {
-  --notification-color: var(--sds-color-text-danger-tertiary);
-  --notification-icon: var(--sds-color-icon-danger-tertiary);
+.notification-variant-alert {
+  --notification-color: var(--sds-color-text-danger-ondanger-tertiary);
+  --notification-icon: var(--sds-color-icon-danger-ondanger-tertiary);
   --notification-border-color: var(--sds-color-border-danger-default);
   --notification-background-color: var(--sds-color-bg-danger-tertiary);
 }
diff --git a/src/ui/primitives/Slider/Slider.figma.tsx b/src/ui/primitives/Slider/Slider.figma.tsx
@@ -3,9 +3,8 @@ import { Slider, SliderField } from "./Slider";
 
 figma.connect(Slider, "<FIGMA_URL_SLIDER>", {
   props: {
-    isDisabled: figma.boolean("Disabled", {
-      true: true,
-      false: undefined,
+    isDisabled: figma.enum("State", {
+      Disabled: true,
     }),
   },
   example: ({ isDisabled }) => <Slider isDisabled={isDisabled} />,
@@ -17,7 +16,7 @@ figma.connect(SliderField, "<FIGMA_URL_SLIDER_FIELD>", {
     description: figma.children("Description"),
   },
   example: ({ label, description }) => (
-    <SliderField>
+    <SliderField showOutput>
       {label}
       {description}
     </SliderField>