feat: text adds style prop

demo/src/app.rs

@@ -85,8 +85,8 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
                 <Route path="/table" view=TableMdPage/>
                 <Route path="/tabs" view=TabsMdPage/>
                 <Route path="/tag" view=TagMdPage/>
+                <Route path="/text" view=TextMdPage/>
                 <Route path="/time-picker" view=TimePickerMdPage/>
-                <Route path="/typography" view=TypographyMdPage/>
                 <Route path="/upload" view=UploadMdPage/>
             </Route>
             <Route path="/mobile/tabbar" view=TabbarDemoPage/>

demo/src/pages/components.rs

@@ -75,10 +75,9 @@ pub(crate) struct MenuGroupOption {
 impl IntoView for MenuGroupOption {
     fn into_view(self) -> View {
         let Self { label, children } = self;
-        let children_len = children.len();
         view! {
-            <Caption1Strong>
+            <Caption1Strong style="margin-inline-start: 10px">
-                {format!("{label} ({children_len})")}
+                {label}
             </Caption1Strong>
             {children.into_iter().map(|v| v.into_view()).collect_view()}
         }
@@ -169,18 +168,13 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     label: "Tag".into(),
                 },
                 MenuItemOption {
-                    value: "/components/typography".into(),
+                    value: "/components/text".into(),
-                    label: "Typography".into(),
+                    label: "Text".into(),
                 },
                 MenuItemOption {
                     value: "/components/spin-button".into(),
                     label: "Spin Button".into(),
                 },
-            ],
-        },
-        MenuGroupOption {
-            label: "Data Input Components".into(),
-            children: vec![
                 MenuItemOption {
                     value: "/components/auto-complete".into(),
                     label: "Auto Complete".into(),
@@ -225,11 +219,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "/components/upload".into(),
                     label: "Upload".into(),
                 },
-            ],
-        },
-        MenuGroupOption {
-            label: "Data Display Components".into(),
-            children: vec![
                 MenuItemOption {
                     value: "/components/calendar".into(),
                     label: "Calendar".into(),
@@ -242,11 +231,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "/components/table".into(),
                     label: "Table".into(),
                 },
-            ],
-        },
-        MenuGroupOption {
-            label: "Navigation Components".into(),
-            children: vec![
                 MenuItemOption {
                     value: "/components/anchor".into(),
                     label: "Anchor".into(),
@@ -267,11 +251,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "/components/tabs".into(),
                     label: "Tabs".into(),
                 },
-            ],
-        },
-        MenuGroupOption {
-            label: "Feedback Components".into(),
-            children: vec![
                 MenuItemOption {
                     value: "/components/alert".into(),
                     label: "Alert".into(),
@@ -308,11 +287,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "/components/skeleton".into(),
                     label: "Skeleton".into(),
                 },
-            ],
-        },
-        MenuGroupOption {
-            label: "Layout Components".into(),
-            children: vec![
                 MenuItemOption {
                     value: "/components/layout".into(),
                     label: "Layout".into(),
@@ -325,14 +299,11 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "/components/space".into(),
                     label: "Space".into(),
                 },
-            ],
+                MenuItemOption {
-        },
-        MenuGroupOption {
-            label: "Utility Components".into(),
-            children: vec![MenuItemOption {
                     value: "/components/scrollbar".into(),
                     label: "Scrollbar".into(),
-            }],
+                },
+            ],
         },
         MenuGroupOption {
             label: "Mobile Components".into(),

demo_markdown/docs/text/mod.md

@@ -5,6 +5,9 @@ view! {
     <Space>
         <Text>"text"</Text>
         <Text code=true>"code"</Text>
+        <Caption1>"Caption1"</Caption1>
+        <Caption1Strong>"Caption1Strong"</Caption1Strong>
+        <Body1>"Body1"</Body1>
     </Space>
 }
 ```

demo_markdown/src/lib.rs

@@ -68,7 +68,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
         "TabsMdPage" => "../docs/tabs/mod.md",
         "TagMdPage" => "../docs/tag/mod.md",
         "TimePickerMdPage" => "../docs/time_picker/mod.md",
-        "TypographyMdPage" => "../docs/typography/mod.md",
+        "TextMdPage" => "../docs/text/mod.md",
         "UploadMdPage" => "../docs/upload/mod.md"
     };
 

thaw/src/text/mod.rs

@@ -4,45 +4,52 @@ use thaw_utils::{class_list, mount_style};
 #[component]
 pub fn Caption1(
     #[prop(optional, into)] class: MaybeProp<String>,
+    #[prop(optional, into)] style: MaybeProp<String>,
     #[prop(optional)] tag: TextTag,
     children: Children,
 ) -> impl IntoView {
-    let class = Signal::derive(move || format!("thaw-caption-1 {:?}", class.get()));
+    let class =
+        Signal::derive(move || format!("thaw-caption-1 {}", class.get().unwrap_or_default()));
 
     view! {
-        <Text tag children class/>
+        <Text tag children class style/>
     }
 }
 
 #[component]
 pub fn Caption1Strong(
     #[prop(optional, into)] class: MaybeProp<String>,
+    #[prop(optional, into)] style: MaybeProp<String>,
     #[prop(optional)] tag: TextTag,
     children: Children,
 ) -> impl IntoView {
-    let class = Signal::derive(move || format!("thaw-caption-1-strong {:?}", class.get()));
+    let class = Signal::derive(move || {
+        format!("thaw-caption-1-strong {}", class.get().unwrap_or_default())
+    });
 
     view! {
-        <Text tag children class/>
+        <Text tag children class style/>
     }
 }
 
 #[component]
 pub fn Body1(
     #[prop(optional, into)] class: MaybeProp<String>,
+    #[prop(optional, into)] style: MaybeProp<String>,
     #[prop(optional)] tag: TextTag,
     children: Children,
 ) -> impl IntoView {
-    let class = Signal::derive(move || format!("thaw-body-1 {:?}", class.get()));
+    let class = Signal::derive(move || format!("thaw-body-1 {}", class.get().unwrap_or_default()));
 
     view! {
-        <Text tag children class/>
+        <Text tag children class style/>
     }
 }
 
 #[component]
 pub fn Text(
     #[prop(optional, into)] class: MaybeProp<String>,
+    #[prop(optional, into)] style: MaybeProp<String>,
     #[prop(optional)] tag: TextTag,
     #[prop(optional)] code: bool,
     children: Children,
@@ -50,23 +57,84 @@ pub fn Text(
     mount_style("text", include_str!("./text.css"));
 
     match tag {
-        TextTag::B => todo!(),
+        TextTag::B => view! {
-        TextTag::Em => todo!(),
+            <b class=class_list!["thaw-text", class] style=move || style.get()>
-        TextTag::H1 => todo!(),
+                {children()}
-        TextTag::H2 => todo!(),
+            </b>
-        TextTag::H3 => todo!(),
+        }
-        TextTag::H4 => todo!(),
+        .into_view(),
-        TextTag::H5 => todo!(),
+        TextTag::Em => view! {
-        TextTag::H6 => todo!(),
+            <em class=class_list!["thaw-text", class] style=move || style.get()>
-        TextTag::I => todo!(),
+                {children()}
-        TextTag::P => todo!(),
+            </em>
-        TextTag::Pre => todo!(),
+        }
+        .into_view(),
+        TextTag::H1 => view! {
+            <h1 class=class_list!["thaw-text", class] style=move || style.get()>
+                {children()}
+            </h1>
+        }
+        .into_view(),
+        TextTag::H2 => view! {
+            <h2 class=class_list!["thaw-text", class] style=move || style.get()>
+                {children()}
+            </h2>
+        }
+        .into_view(),
+        TextTag::H3 => view! {
+            <h3 class=class_list!["thaw-text", class] style=move || style.get()>
+                {children()}
+            </h3>
+        }
+        .into_view(),
+        TextTag::H4 => view! {
+            <h4 class=class_list!["thaw-text", class] style=move || style.get()>
+                {children()}
+            </h4>
+        }
+        .into_view(),
+        TextTag::H5 => view! {
+            <h5 class=class_list!["thaw-text", class] style=move || style.get()>
+                {children()}
+            </h5>
+        }
+        .into_view(),
+        TextTag::H6 => view! {
+            <h6 class=class_list!["thaw-text", class] style=move || style.get()>
+                {children()}
+            </h6>
+        }
+        .into_view(),
+        TextTag::I => view! {
+            <i class=class_list!["thaw-text", class] style=move || style.get()>
+                {children()}
+            </i>
+        }
+        .into_view(),
+        TextTag::P => view! {
+            <p class=class_list!["thaw-text", class] style=move || style.get()>
+                {children()}
+            </p>
+        }
+        .into_view(),
+        TextTag::Pre => view! {
+            <pre class=class_list!["thaw-text", class] style=move || style.get()>
+                {children()}
+            </pre>
+        }
+        .into_view(),
         TextTag::Span => view! {
-            <span class=class_list!["thaw-text", class]>
+            <span class=class_list!["thaw-text", class] style=move || style.get()>
                 {children()}
             </span>
-        },
+        }
-        TextTag::Strong => todo!(),
+        .into_view(),
+        TextTag::Strong => view! {
+            <strong class=class_list!["thaw-text", class] style=move || style.get()>
+                {children()}
+            </strong>
+        }
+        .into_view(),
     }
 }