✨ Fix stories and add default state to toast

frontend/src/app/main/ui/ds/notifications/context-notification.stories.jsx

@@ -40,7 +40,7 @@ export default {
   render: ({ ...args }) => <ContextNotification {...args} />,
 };
 
-export const Default = {};
+export const Base = {};
 
 export const WithLongerText = {
   args: {
@@ -63,6 +63,15 @@ export const WithHTML = {
   },
 };
 
+export const Default = {
+  args: {
+    level: "default",
+  },
+  parameters: {
+    controls: { exclude: ["level", "isHtml"] },
+  },
+};
+
 export const Info = {
   args: {
     level: "info",

frontend/src/app/main/ui/ds/notifications/toast.cljs

@@ -18,7 +18,7 @@
   [:map
    [:class {:optional true} :string]
    [:type  {:optional true} [:maybe [:enum :toast :context]]]
-   [:level {:optional true} [:maybe [:enum :info :warning :error :success]]]
+   [:level {:optional true} [:maybe [:enum :default :info :warning :error :success]]]
    [:appearance {:optional true} [:enum :neutral :ghost]]
    [:is-html {:optional true} :boolean]
    [:on-close {:optional true} fn?]])
@@ -30,7 +30,7 @@
   (let [class (dm/str class " " (stl/css :toast))
         level (if (string? level)
                 (keyword level)
-                (d/nilv level :info))
+                (d/nilv level :default))
         type (if (string? type)
                (keyword type)
                (d/nilv type :context))
@@ -51,6 +51,7 @@
      [:> "button" {:on-click on-close
                    :aria-label "Close"
                    :class (stl/css-case :close-button true
+                                        :level-default  (= level :default)
                                         :level-warning  (= level :warning)
                                         :level-error    (= level :error)
                                         :level-success  (= level :success)

frontend/src/app/main/ui/ds/notifications/toast.scss

@@ -26,6 +26,10 @@
   z-index: var(--toast-vertical-index);
 }
 
+.level-default {
+  --toast-icon-color: var(--color-icon-default);
+}
+
 .level-info {
   --toast-icon-color: var(--color-accent-info);
 }

frontend/src/app/main/ui/ds/notifications/toast.stories.jsx

@@ -31,7 +31,7 @@ export default {
   render: ({ ...args }) => <Toast {...args} />,
 };
 
-export const Default = {};
+export const Base = {};
 
 export const WithLongerText = {
   args: {
@@ -51,6 +51,15 @@ export const WithHTML = {
   },
 };
 
+export const Default = {
+  args: {
+    level: "default",
+  },
+  parameters: {
+    controls: { exclude: ["level", "onClose"] },
+  },
+};
+
 export const Info = {
   args: {
     level: "info",