Add Progress and ProgressBar components

examples/basics/src/main.rs

@@ -298,6 +298,40 @@ impl Component for Model {
                         <ListGroupItem action=true active=true>{"Active action"}</ListGroupItem>
                         <ListGroupItem action=true disabled=true>{"Disabled action"}</ListGroupItem>
                     </ListGroup>
+
+                    <h1>{"Progress bars"}</h1>
+                    <h2>{"Simple"}</h2>
+                    <Progress class={"mb-3"}><ProgressBar value=0   /></Progress>
+                    <Progress class={"mb-3"}><ProgressBar value=25  /></Progress>
+                    <Progress class={"mb-3"}><ProgressBar value=50  /></Progress>
+                    <Progress class={"mb-3"}><ProgressBar value=75  /></Progress>
+                    <Progress class={"mb-3"}><ProgressBar value=100 /></Progress>
+
+                    <h2>{"Labels"}</h2>
+                    <Progress class={"mb-3"}><ProgressBar value=25 label={"25%"}/></Progress>
+
+                    <h2>{"Height"}</h2>
+                    <Progress class={"mb-3"} height=1><ProgressBar  value=25/></Progress>
+                    <Progress class={"mb-3"} height=20><ProgressBar value=25/></Progress>
+
+                    <h2>{"Backgrounds"}</h2>
+                    <Progress class={"mb-3"}><ProgressBar value=25  style={Some(Color::Success)}/></Progress>
+                    <Progress class={"mb-3"}><ProgressBar value=50  style={Some(Color::Info)}/></Progress>
+                    <Progress class={"mb-3"}><ProgressBar value=75  style={Some(Color::Warning)}/></Progress>
+                    <Progress class={"mb-3"}><ProgressBar value=100 style={Some(Color::Danger)}/></Progress>
+
+                    <h2>{"Multiple bars"}</h2>
+                    <Progress class={"mb-3"}>
+                        <ProgressBar value=15/>
+                        <ProgressBar value=30 style={Some(Color::Success)}/>
+                        <ProgressBar value=20 style={Some(Color::Info)}/>
+                    </Progress>
+
+                    <h2>{"Striped"}</h2>
+                    <Progress class={"mb-3"}><ProgressBar value=25 striped={true}/></Progress>
+
+                    <h2>{"Animated"}</h2>
+                    <Progress class={"mb-3"}><ProgressBar value=25 animated={true}/></Progress>
                 </div>
                 <div id="helpers" class="p-3">
                     <h1>{"Vertical/Horizontal rule"}</h1>

packages/yew-bootstrap/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "yew-bootstrap"
-version = "0.8.1"
+version = "0.9.0"
 authors = ["Matthew Scheffel <[email protected]>", "Foorack <[email protected]>"]
 edition = "2021"
 license = "MIT"
@@ -18,7 +18,7 @@ name = "yew_bootstrap"
 
 [dependencies]
 yew = { version = "0.21", features = ["csr"] }
-log = "0.4"
+gloo-console = "0.3"
 
 [dev-dependencies]
 wasm-bindgen = "0.2.*"

packages/yew-bootstrap/README.md

@@ -7,7 +7,7 @@ Add the dependency next to the regular yew dependency:
 ```toml
 [dependencies]
 yew = "0.21"
-yew-bootstrap = "0.8"
+yew-bootstrap = "*"
 ```
 
 To use form callback functions, the following dependencies should be added:
@@ -72,7 +72,7 @@ This project uses [semantic versioning](https://semver.org/).
 - [ ] Pagination
 - [ ] Placeholders
 - [ ] Popovers
-- [ ] Progress
+- [x] Progress ([component::Progress], [component::ProgressBar])
 - [ ] Scrollspy
 - [x] Spinner ([component::Spinner])
 - [ ] Toast

packages/yew-bootstrap/src/component/column.rs

@@ -1,4 +1,4 @@
-use log::warn;
+use gloo_console::warn;
 use yew::prelude::*;
 
 /// # Column container

packages/yew-bootstrap/src/component/container.rs

@@ -1,4 +1,4 @@
-use log::*;
+use gloo_console::warn;
 use yew::prelude::*;
 
 /// Size for a container, from extra small to extra large
@@ -26,12 +26,12 @@ impl ToString for ContainerSize {
 
 /// # Container component
 /// Global container for a page.
-/// 
+///
 /// See [ContainerProps] for a listing of properties.
-/// 
+///
 /// ## Example
 /// Example container:
-/// 
+///
 /// ```rust
 /// use yew::prelude::*;
 /// use yew_bootstrap::component::{Container, ContainerSize};

packages/yew-bootstrap/src/component/mod.rs

@@ -16,6 +16,7 @@ mod modal;
 mod navbar;
 mod row;
 mod spinner;
+mod progress;
 
 pub use self::accordion::*;
 pub use self::alert::*;
@@ -32,4 +33,5 @@ pub use self::list_group::*;
 pub use self::modal::*;
 pub use self::navbar::*;
 pub use self::row::*;
-pub use self::spinner::*;
+pub use self::spinner::*;
+pub use self::progress::*;

packages/yew-bootstrap/src/component/progress.rs

@@ -0,0 +1,140 @@
+use yew::prelude::*;
+use gloo_console::warn;
+
+use crate::util::Color;
+
+/// # Progress component
+///
+/// See [ProgressProps] for a listing of properties
+///
+/// # Example of simple Progress bar
+/// ``` rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::{Progress, ProgressBar};
+/// use yew_bootstrap::util::Color;
+/// fn test() -> Html {
+///     html!{
+///         <Progress>
+///           <ProgressBar style={Some(Color::Primary)} value=25/>
+///         </Progress>
+///     }
+/// }
+/// ```
+///
+/// # Example of multiple bars in the same progress
+/// ``` rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::{Progress, ProgressBar};
+/// use yew_bootstrap::util::Color;
+/// fn test() -> Html {
+///     html!{
+///         <Progress>
+///             <ProgressBar style={Some(Color::Primary)} value=15/>
+///             <ProgressBar style={Some(Color::Info)} value=30/>
+///             <ProgressBar style={Some(Color::Warning)} value=20 striped={true}/>
+///         </Progress>
+///     }
+/// }
+/// ```
+
+/// Properties for [Progress]
+#[derive(Properties, Clone, PartialEq)]
+pub struct ProgressProps {
+    #[prop_or_default]
+    pub children: Children,
+
+    /// Additional class
+    #[prop_or_default]
+    pub class: Classes,
+
+    /// Height of the select in pts, default None
+    #[prop_or(None)]
+    pub height: Option<i32>,
+}
+
+/// Properties for [ProgressBar]
+#[derive(Properties, Clone, PartialEq)]
+pub struct ProgressBarProps {
+    /// Optional color for the bar
+    #[prop_or_default]
+    pub style: Option<Color>,
+
+    /// Current value, between min and max
+    pub value: i32,
+
+    /// Minimum value, default 0
+    #[prop_or(0)]
+    pub min: i32,
+
+    /// Maximum value, default 100
+    #[prop_or(100)]
+    pub max: i32,
+
+    /// Striped, default false
+    #[prop_or_default]
+    pub striped: bool,
+
+    /// Animated, this forces striped
+    #[prop_or_default]
+    pub animated: bool,
+
+    /// Optional label placed on the bar
+    #[prop_or_default]
+    pub label: AttrValue,
+
+    /// Additional class
+    #[prop_or_default]
+    pub class: Classes,
+}
+
+
+/// # Progress component, it can contain [ProgressBar] children
+#[function_component]
+pub fn Progress(props: &ProgressProps) -> Html {
+    let height = props.height.map(|val| format!("height: {val}px;"));
+
+    html! {
+        <div class={classes!("progress", props.class.clone())} style={height} >
+            { for props.children.iter() }
+        </div>
+    }
+}
+
+/// # ProgressBar component, contained inside a [Progress] parent
+#[function_component]
+pub fn ProgressBar(props: &ProgressBarProps) -> Html {
+    if props.min >= props.max {
+        warn!(format!("ProgressBar: min ({}) needs to be less than max ({})", props.min, props.max));
+    }
+
+    if props.value < props.min || props.value > props.max {
+        warn!(format!("ProgressBar: value is {}, should be between {} and {}", props.value, props.min, props.max));
+    }
+
+    let width = if props.min < props.max { 100 * (props.value - props.min) / (props.max - props.min) } else { props.min };
+    let width = format!("width: {width}%;");
+
+    let mut progress_classes = props.class.clone();
+    if let Some(color) = &props.style {
+        progress_classes.push(format!("bg-{color}"))
+    }
+    if props.striped || props.animated {
+        progress_classes.push("progress-bar-striped")
+    }
+    if props.animated {
+        progress_classes.push("progress-bar-animated")
+    }
+
+    html! {
+        <div
+            class={classes!("progress-bar", progress_classes)}
+            role={"progressbar"}
+            style={width}
+            aria-valuenow={props.value.to_string()}
+            aria-valuemin={props.min.to_string()}
+            aria-valuemax={props.max.to_string()}
+        >
+            {props.label.clone()}
+        </div>
+    }
+}