diff --git a/crates/zu-docs/Cargo.toml b/crates/zu-docs/Cargo.toml
index c7a40ee3d..3bbb11db4 100644
--- a/crates/zu-docs/Cargo.toml
+++ b/crates/zu-docs/Cargo.toml
@@ -60,4 +60,5 @@ features = [
"Save",
"Send",
"Share",
+ "Star",
]
diff --git a/crates/zu-docs/src/views/inputs/rating_page.rs b/crates/zu-docs/src/views/inputs/rating_page.rs
index 52226eb39..3b5a46ee9 100644
--- a/crates/zu-docs/src/views/inputs/rating_page.rs
+++ b/crates/zu-docs/src/views/inputs/rating_page.rs
@@ -2,12 +2,237 @@
// Use of this source is governed by Apache-2.0 License that can be found
// in the LICENSE file.
-use yew::{function_component, html, Html};
+use stylist::Style;
+use yew::{classes, function_component, html, Html};
+use zu::r#box::Box;
+use zu::rating::{Props as RatingProps, Rating};
+use zu::stack::Stack;
+use zu::styles::size::Size;
+use zu::styles::spacing::Spacing;
+use zu::svg_icon::FontSize;
+use zu::typography::Typography;
+use zuicon_material::{Favorite, FavoriteBorder, Star};
-#[function_component(RatingPage)]
-pub fn rating_page() -> Html {
+use crate::components::demo_box::DemoBox;
+
+fn create_basic_rating_view() -> Html {
+ let value = 2.0;
+ let box_style = Style::new(
+ r#"
+ & > legend {
+ margin-top: 12px;
+ }
+ "#,
+ )
+ .expect("Failed to parse box style");
+
+ html! {
+ <>
+ {"Basic rating"}
+
+
+ {"Controlled"}
+
+
+ {"Read only"}
+
+
+ {"Disabled"}
+
+
+ {"No rating given"}
+
+
+
+
+ }
+}
+
+fn create_rating_precision_view() -> Html {
+ html! {
+ <>
+ {"Rating precision"}
+ {"The rating can display any float number with the value prop. Use the precision prop \
+ to define the minimum increment value change allowed."}
+
+
+
+
+
+
+
+
+ }
+}
+
+fn create_hover_feedback_view() -> Html {
+ let labels = &[
+ (0.5, "Useless"),
+ (1.0, "Useless+"),
+ (1.5, "Poor"),
+ (2.0, "Poor+"),
+ (2.5, "Ok"),
+ (3.0, "Ok+"),
+ (3.5, "Good"),
+ (4.0, "Good+"),
+ (4.5, "Excellent"),
+ (5.0, "Excellent+"),
+ ];
+ let value = 2.5;
+ let get_label = |index| -> &'static str {
+ for (key, value) in labels {
+ if *key == index {
+ return value;
+ }
+ }
+ ""
+ };
+
+ html! {
+ <>
+ {"Hover feedback"}
+ {"You can display a label on hover to help the user pick the correct rating value. \
+ The demo uses the onChangeActive prop."}
+
+
+
+ }}
+ />
+ {get_label(value)}
+
+
+
+ }
+}
+
+fn create_sizes_view() -> Html {
+ html! {
+ <>
+ {"Sizes"}
+ {"For larger or smaller ratings use the size prop."}
+
+
+
+
+
+
+
+
+ }
+}
+
+#[function_component(StyledRating)]
+pub fn styled_rating(props: &RatingProps) -> Html {
+ let new_style = Style::new(
+ r#"
+ & .ZuRating-iconFilled {
+ color: #ff6d75;
+ }
+
+ & .ZuRating-iconHover {
+ color: #ff3d47;
+ }
+ "#,
+ )
+ .expect("Failed to parse new style of StyledRating");
+ let new_props = RatingProps {
+ classes: classes!(new_style.get_class_name().to_owned()),
+ ..props.clone()
+ };
+
+ html! {
+
+ }
+}
+
+fn create_customization_view() -> Html {
+ let box_style = Style::new(
+ r#"
+ & > legend {
+ margin-top: 12px;
+ }
+ "#,
+ )
+ .expect("Failed to parse box style");
+
+ html! {
+ <>
+ {"Customization"}
+ {"Here are some examples of customizing the component. \
+ You can learn more about this in the overrides documentation page."}
+
+
+
+ {"Custom icon and color"}
+ }}
+ empty_icon={html!{}}
+ />
+
+ {"10 stars"}
+
+
+
+
+ }
+}
+
+#[function_component(RadioStyledRating)]
+pub fn radio_styled_rating(props: &RatingProps) -> Html {
+ let new_style = Style::new(
+ r#"
+ & .ZuRating-iconEmpty .ZuSvgIcon-root {
+ color: var(--zu-palette-action-disabled);
+ }
+ "#,
+ )
+ .expect("Failed to parse new style of RadioStyledRating");
+ let new_props = RatingProps {
+ classes: classes!(new_style.get_class_name().to_owned()),
+ ..props.clone()
+ };
+
+ html! {
+
+ }
+}
+
+fn create_radio_group_view() -> Html {
html! {
<>
+ {"Radio group"}
+ {"The rating is implemented with a radio group, set highlightSelectedOnly \
+ to restore the natural behavior."}
+
+
+
}
}
+
+#[function_component(RatingPage)]
+pub fn rating_page() -> Html {
+ html! {
+
+
{"Rating"}
+
+ {create_basic_rating_view()}
+ {create_rating_precision_view()}
+ {create_hover_feedback_view()}
+ {create_sizes_view()}
+ {create_customization_view()}
+ {create_radio_group_view()}
+
+
+ }
+}
diff --git a/crates/zu/src/rating/mod.rs b/crates/zu/src/rating/mod.rs
index 8491950e9..70623c01f 100644
--- a/crates/zu/src/rating/mod.rs
+++ b/crates/zu/src/rating/mod.rs
@@ -12,7 +12,7 @@ pub struct Props {
pub classes: Classes,
#[prop_or_default]
- pub default_value: Option,
+ pub default_value: Option,
#[prop_or(false)]
pub disabled: bool,
@@ -29,8 +29,8 @@ pub struct Props {
#[prop_or_default]
pub icon: Option,
- #[prop_or(5)]
- pub max: i32,
+ #[prop_or(5.0)]
+ pub max: f64,
#[prop_or_default]
pub name: AttrValue,
@@ -41,8 +41,8 @@ pub struct Props {
#[prop_or_default]
pub on_change_active: Option>,
- #[prop_or(1)]
- pub precision: i32,
+ #[prop_or(1.0)]
+ pub precision: f64,
#[prop_or(false)]
pub read_only: bool,
@@ -54,7 +54,7 @@ pub struct Props {
pub style: AttrValue,
#[prop_or_default]
- pub value: i32,
+ pub value: Option,
}
#[function_component(Rating)]