feat: adds Toast component

demo/src/app.rs

@@ -93,6 +93,7 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
                 <Route path="/text" view=TextMdPage/>
                 <Route path="/textarea" view=TextareaMdPage/>
                 <Route path="/time-picker" view=TimePickerMdPage/>
+                <Route path="/toast" view=ToastMdPage />
                 <Route path="/upload" view=UploadMdPage/>
             </Route>
             // <Route path="/mobile/tabbar" view=TabbarDemoPage/>

demo/src/pages/components.rs

@@ -307,6 +307,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "/components/time-picker".into(),
                     label: "Time Picker".into(),
                 },
+                MenuItemOption {
+                    value: "/components/toast".into(),
+                    label: "Toast".into(),
+                },
                 MenuItemOption {
                     value: "/components/upload".into(),
                     label: "Upload".into(),

demo_markdown/docs/toast/mod.md

@@ -0,0 +1,9 @@
+# Toast
+
+```rust
+view! {
+    <Toaster toaster_id=toaster_id />
+    <Button>"Make toast"</Button>
+}
+
+```

demo_markdown/src/lib.rs

@@ -72,6 +72,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
         "TextareaMdPage" => "../docs/textarea/mod.md",
         "TimePickerMdPage" => "../docs/time_picker/mod.md",
         "TextMdPage" => "../docs/text/mod.md",
+        "ToastMdPage" => "../docs/toast/mod.md",
         "UploadMdPage" => "../docs/upload/mod.md"
     };
 

thaw/src/lib.rs

@@ -43,6 +43,7 @@ mod text;
 mod textarea;
 mod theme;
 mod time_picker;
+mod toast;
 mod upload;
 
 pub use accordion::*;
@@ -91,4 +92,5 @@ pub use textarea::*;
 pub use thaw_utils::{create_component_ref, ComponentRef, SignalWatch};
 pub use theme::*;
 pub use time_picker::*;
+pub use toast::*;
 pub use upload::*;

thaw/src/toast/mod.rs

@@ -0,0 +1,7 @@
+mod toast;
+mod toast_title;
+mod toaster;
+mod toast_body;
+mod toast_footer;
+
+pub use toast_title::*;

thaw/src/toast/toast.rs

@@ -0,0 +1,8 @@
+use leptos::*;
+
+#[component]
+pub fn Toast(id: String) -> impl IntoView {
+    view! {
+
+    }
+}

thaw/src/toast/toast_body.rs

@@ -0,0 +1,20 @@
+use leptos::*;
+use thaw_components::OptionComp;
+
+#[component]
+pub fn ToastBody(
+    #[prop(optional)] toast_body_subtitle: Option<ToastBodySubtitle>,
+    children: Children,
+) -> impl IntoView {
+    view! {
+        {children()}
+        <OptionComp value=toast_body_subtitle let:subtitle>
+            {(subtitle.children)()}
+        </OptionComp>
+    }
+}
+
+#[slot]
+pub struct ToastBodySubtitle {
+    children: Children,
+}

thaw/src/toast/toast_footer.rs

@@ -0,0 +1,6 @@
+use leptos::*;
+
+#[component]
+pub fn ToastFooter(children: Children) -> impl IntoView {
+    children()
+}

thaw/src/toast/toast_title.rs

@@ -0,0 +1,31 @@
+use leptos::*;
+use thaw_components::OptionComp;
+
+#[component]
+pub fn ToastTitle(
+    #[prop(optional)] toast_title_media: Option<ToastTitleMedia>,
+    children: Children,
+    #[prop(optional)] toast_title_action: Option<ToastTitleAction>,
+) -> impl IntoView {
+    view! {
+        <div class="thaw-toast-title__media">
+            <svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
+                <path d="M18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0ZM9.5 8.91a.5.5 0 0 1 1 0V13.6a.5.5 0 0 1-1 0V8.9Zm-.25-2.16a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z" fill="currentColor"></path>
+            </svg>
+        </div>
+        {children()}
+        <OptionComp value=toast_title_action let:action>
+            {(action.children)()}
+        </OptionComp>
+    }
+}
+
+#[slot]
+pub struct ToastTitleMedia {
+    children: Children,
+}
+
+#[slot]
+pub struct ToastTitleAction {
+    children: Children,
+}

thaw/src/toast/toaster.css

@@ -0,0 +1,43 @@
+.thaw-toast {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    padding: 12px;
+    border-radius: var(--borderRadiusMedium);
+    border: 1px solid var(--colorTransparentStroke);
+    box-shadow: var(--shadow8);
+    font-size: var(--fontSizeBase300);
+    line-height: 20px;
+    font-weight: var(--fontWeightSemibold);
+    color: var(--colorNeutralForeground1);
+    background-color: var(--colorNeutralBackground1);
+}
+
+.thaw-toast-title__media {
+    display: flex;
+    padding-top: 2px;
+    grid-column-end: 2;
+    padding-right: 8px;
+    font-size: 16px;
+    color: var(--colorNeutralForeground1);
+    color: var(--colorNeutralForeground2);
+}
+
+.thaw-toast-title__media > svg {
+    display: inline;
+    line-height: 0;
+}
+
+.thaw-toast-title {
+    display: flex;
+    grid-column-end: 3;
+    color: var(--colorNeutralForeground1);
+    word-break: break-word;
+}
+
+.thaw-toast-title__action {
+    display: flex;
+    align-items: start;
+    padding-left: 12px;
+    grid-column-end: -1;
+    color: var(--colorBrandForeground1);
+}

thaw/src/toast/toaster.rs

@@ -0,0 +1,10 @@
+use leptos::*;
+use thaw_utils::mount_style;
+
+#[component]
+pub fn Toaster(toaster_id: String) -> impl IntoView {
+    mount_style("toaster", include_str!("./toaster.css"));
+    view! {
+
+    }
+}