3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-06 01:31:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Fix stories and add default state to toast

Browse source
This commit is contained in:
Xavier Julian 2025-03-07 19:24:39 +01:00 • committed by Xaviju
parent 721760d679
commit 46c89a1bcf
4 changed files with 27 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

5
frontend/src/app/main/ui/ds/notifications/toast.cljs
View file

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

4
frontend/src/app/main/ui/ds/notifications/toast.scss
View file

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

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

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