Merge pull request #101 from dancespiele/development

Release v0.9.3
dancespiele · Jul 10, 2021 · f6e07b4 · f6e07b4
2 parents e8d0987 + 0f601f1
commit f6e07b4
Show file tree

Hide file tree

Showing 13 changed files with 111 additions and 82 deletions.
diff --git a/README.md b/README.md
@@ -29,11 +29,11 @@ Possible candidates are [CssinRust](https://github.com/lukidoescode/css-in-rust)
 
 ### How install it
 1. Install the sass module: `npm install yew-styles`
-2. Add the yew_style crate with the features needed for your project in Cargo.toml file: 
+2. Add the yew_style crate with the features needed for your project in Cargo.toml file:
 ```toml
 yew_styles = { version="0.9", features=["button", "text", "navbar"] }
 ```
-3. Import the main.css file in you main javascript/typescript file project: 
+3. Import the main.css file in you main javascript/typescript file project:
 ```typescript
     import 'node_modules/yew-styles/main.css';
 ```
@@ -70,7 +70,7 @@ First, open an issue describing about the fix, improvement or implementation and
 If the contribution is a fix or small improvement in a component, only a pull request to master explaining what resolve or improve that, is required.
 If it is an implementation, please follow the next requirements:
 
-* Firstable open an issue describing about the component 
+* Firstable open an issue describing about the component
 * Unit tests, which checks that the component is created and
 its logic works, in the same file where it is implemented (test events is not needed for now)
 * One component per file, if multiple components have connections between them, it is possible create subfolder
@@ -103,7 +103,7 @@ Please check our [code of conduct](CODE_OF_CONDUCT.md)
 
 ## Roadmap
 
-- [x] Button 
+- [x] Button
 - [x] Layout
 - [x] Navbar
 - [x] Form

diff --git a/app/yew-styles/_navbar.sass b/app/yew-styles/_navbar.sass
@@ -28,7 +28,7 @@
             &.navbar-container-mobile
                 flex-direction: row !important
                 width: 100%
-        
+
         @include get-branch(50px)
 
         .navbar-dropdown
@@ -73,7 +73,7 @@
                 position: absolute
                 left: 0
                 top: 40px
-                
+
                 z-index: 1
 
                 &.active
@@ -113,4 +113,4 @@
     width: 100%
 
     &.navbar-container-mobile
-        width: auto
+        width: auto
diff --git a/crate/Cargo.lock b/crate/Cargo.lock
diff --git a/crate/Cargo.toml b/crate/Cargo.toml
@@ -6,7 +6,7 @@ license = "MIT/Apache-2.0"
 name = "yew_style_page"
 readme = "./README.md"
 repository = "https://github.com/spielrs/yew-styles-page.git"
-version = "0.9.2"
+version = "0.9.3"
 
 [lib]
 crate-type = ["cdylib"]

diff --git a/crate/src/page/carousel_page.rs b/crate/src/page/carousel_page.rs
@@ -2,6 +2,7 @@ use super::highlighters::get_carousel;
 use yew::prelude::*;
 use yew::services::ConsoleService;
 use yew::utils::document;
+use yew_assets::communication_assets::{CommunicationAssets, CommunicationIcon};
 use yew_prism::Prism;
 use yew_styles::carousel::{Carousel, CarouselControls, CarouselDot, CarouselImage};
 use yew_styles::styles::Size;
@@ -171,6 +172,8 @@ impl Component for CarouselPage {
                     <li><b>{"class_name: "}</b>{"general property to add custom class styles"}</li>
                 </ul>
 
+                <p><b>{"This component has a optional children prop, in case that it is not included a default dot icon will be added"}</b></p>
+
                 <h3>{"Carousel Image"}</h3>
                 <ul>
                     <li><b>{"img_src: "}</b>{"Url image path. Required."}</li>
@@ -216,7 +219,9 @@ fn get_dots(active_image: Vec<bool>, link: ComponentLink<CarouselPage>) -> Html
 
     for (i, _) in active_image.clone().into_iter().enumerate() {
         dot.push(html! {
-            <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))/>
+            <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))>
+                <CommunicationAssets size=("12".to_string(), "12".to_string()) icon=CommunicationIcon::Smile/>
+            </CarouselDot>
         })
     }
 

diff --git a/crate/src/page/highlighters.rs b/crate/src/page/highlighters.rs
@@ -45,11 +45,11 @@ pub fn navbar_code() -> String {
                 <span>{\"Shop\"}</span>
             </NavbarItem>
             <NavbarItem
-                onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from(\"About us\")))>   
+                onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from(\"About us\")))>
                 <span>{\"About us\"}</span>
             </NavbarItem>
             <NavbarItem
-                onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from(\"Contact\")))>   
+                onclick_signal=link.callback(move |_| Msg::ChangeMenu(String::from(\"Contact\")))>
                 <span>{\"Contact\"}</span>
             </NavbarItem>
             <NavbarDropdown main_content=html!{
@@ -60,7 +60,7 @@ pub fn navbar_code() -> String {
             }>
                 <NavbarDropdownItem
                     onclick_signal=link
-                        .callback(move |_: MouseEvent| Msg::ChangeType(String::from(\"menu 1\".to_string())))>{\"menu 1\"}        
+                        .callback(move |_: MouseEvent| Msg::ChangeType(String::from(\"menu 1\".to_string())))>{\"menu 1\"}
                 </NavbarDropdownItem>
                 <NavbarDropdownItem
                     onclick_signal=link
@@ -432,9 +432,15 @@ pub fn get_carousel() -> String {
     <CarouselImage active=active_image[1] img_src=image.to_owned()/>
     <CarouselImage active=active_image[2] img_src=image.to_owned()/>
     <CarouselImage active=active_image[3] img_src=image.to_owned()/>
-    <CarouselDot active=active_image[1] onclick_signal = link.callback(move |_| Msg::ChangeImage(1))/>
-    <CarouselDot active=active_image[2] onclick_signal = link.callback(move |_| Msg::ChangeImage(2))/>
-    <CarouselDot active=active_image[3] onclick_signal = link.callback(move |_| Msg::ChangeImage(3))/>
+    <CarouselDot active=active_image[1] onclick_signal = link.callback(move |_| Msg::ChangeImage(1))>
+        <CommunicationAssets size=(\"12\".to_string(), \"12\".to_string()) icon=CommunicationIcon::Smile/>
+    </CarouselDot>
+    <CarouselDot active=active_image[2] onclick_signal = link.callback(move |_| Msg::ChangeImage(2))>
+        <CommunicationAssets size=(\"12\".to_string(), \"12\".to_string()) icon=CommunicationIcon::Smile/>
+    </CarouselDot>
+    <CarouselDot active=active_image[3] onclick_signal = link.callback(move |_| Msg::ChangeImage(3))>
+        <CommunicationAssets size=(\"12\".to_string(), \"12\".to_string()) icon=CommunicationIcon::Smile/>
+    </CarouselDot>
     <CarouselControls
         controls_size=Size::Small
         prev_signal=link.callback(|_| Msg::Prev)

diff --git a/crate/yew_styles/Cargo.toml b/crate/yew_styles/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "yew_styles"
-version = "0.9.2"
+version = "0.9.3"
 description = "Framework styles for yew"
 documentation = "https://docs.rs/crate/yew_styles"
 authors = ["Francisco Jesus Navarro Cortes <[email protected]>"]
@@ -51,4 +51,4 @@ web-sys = {version = "0.3", features = ["HtmlDocument", "HtmlCollection", "CssSt
 rand = {version="0.8", features = ["getrandom"]}
 getrandom = {version = "0.2", features= ["js"]}
 wasm-bindgen-test = "0.3"
-yew_assets={version = "0.1.2", features = ["ux_assets", "editing_assets", "controller_assets", "object_assets"]}
+yew_assets={version = "0.1.2", features = ["ux_assets", "editing_assets", "controller_assets", "object_assets"]}
diff --git a/crate/yew_styles/src/components/carousel/carousel_container.rs b/crate/yew_styles/src/components/carousel/carousel_container.rs
@@ -138,8 +138,11 @@ use yew::{utils, App};
 ///     fn view(&self) -> Html {
 ///         html! {
 ///             <div>
-///                 
-///                 <Carousel class_name="fill-background">
+///                 <Carousel
+///                     class_name="fill-background"
+///                     onwheel_signal= self.link.callback(Msg::Scroll)
+///                     onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
+///                     onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
 ///                     {get_images(self.images.to_vec(), self.active_image.to_vec())}
 ///                     {get_dots(self.active_image.to_vec(), self.link.clone())}
 ///                     {get_controls(self.link.clone())}
@@ -161,12 +164,14 @@ use yew::{utils, App};
 ///         .collect::<Html>()
 /// }
 ///
-/// fn get_dots(active_image: Vec<bool>, link: ComponentLink<App>) -> Html {
+/// fn get_dots(active_image: Vec<bool>, link: ComponentLink<CarouselPage>) -> Html {
 ///     let mut dot = vec![];
 ///
 ///     for (i, _) in active_image.clone().into_iter().enumerate() {
 ///         dot.push(html! {
-///             <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))/>
+///             <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))>
+///                 <CommunicationAssets size=("12".to_string(), "12".to_string()) icon=CommunicationIcon::Smile/>
+///             </CarouselDot>
 ///         })
 ///     }
 ///
@@ -175,15 +180,10 @@ use yew::{utils, App};
 ///
 /// fn get_controls(link: ComponentLink<App>) -> Html {
 ///     html! {
-///         <Carousel
-///             class_name="fill-background"
-///             onwheel_signal= self.link.callback(Msg::Scroll)
-///             onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
-///             onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
-///             {get_images(self.images.to_vec(), self.active_image.to_vec())}
-///             {get_dots(self.active_image.to_vec(), self.link.clone())}
-///             {get_controls(self.link.clone())}
-///         </Carousel>
+///         <CarouselControls
+///             controls_size=Size::Small
+///             prev_signal=link.callback(|_| Msg::Prev)
+///             next_signal=link.callback(|_| Msg::Next)/>
 ///     }
 /// }
 /// ```

diff --git a/crate/yew_styles/src/components/carousel/carousel_controls.rs b/crate/yew_styles/src/components/carousel/carousel_controls.rs
@@ -4,7 +4,7 @@ use yew::prelude::*;
 use yew::{utils, App};
 use yew_assets::controller_assets::{ControllerAssets, ControllerIcon};
 
-/// # Carousel Component
+/// # Carousel Controls
 ///
 /// ## Features required
 ///
@@ -140,8 +140,11 @@ use yew_assets::controller_assets::{ControllerAssets, ControllerIcon};
 ///     fn view(&self) -> Html {
 ///         html! {
 ///             <div>
-///                 
-///                 <Carousel class_name="fill-background">
+///                 <Carousel
+///                     class_name="fill-background"
+///                     onwheel_signal= self.link.callback(Msg::Scroll)
+///                     onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
+///                     onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
 ///                     {get_images(self.images.to_vec(), self.active_image.to_vec())}
 ///                     {get_dots(self.active_image.to_vec(), self.link.clone())}
 ///                     {get_controls(self.link.clone())}
@@ -163,12 +166,14 @@ use yew_assets::controller_assets::{ControllerAssets, ControllerIcon};
 ///         .collect::<Html>()
 /// }
 ///
-/// fn get_dots(active_image: Vec<bool>, link: ComponentLink<App>) -> Html {
+/// fn get_dots(active_image: Vec<bool>, link: ComponentLink<CarouselPage>) -> Html {
 ///     let mut dot = vec![];
 ///
 ///     for (i, _) in active_image.clone().into_iter().enumerate() {
 ///         dot.push(html! {
-///             <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))/>
+///             <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))>
+///                 <CommunicationAssets size=("12".to_string(), "12".to_string()) icon=CommunicationIcon::Smile/>
+///             </CarouselDot>
 ///         })
 ///     }
 ///
@@ -177,15 +182,10 @@ use yew_assets::controller_assets::{ControllerAssets, ControllerIcon};
 ///
 /// fn get_controls(link: ComponentLink<App>) -> Html {
 ///     html! {
-///         <Carousel
-///             class_name="fill-background"
-///             onwheel_signal= self.link.callback(Msg::Scroll)
-///             onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
-///             onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
-///             {get_images(self.images.to_vec(), self.active_image.to_vec())}
-///             {get_dots(self.active_image.to_vec(), self.link.clone())}
-///             {get_controls(self.link.clone())}
-///         </Carousel>
+///         <CarouselControls
+///             controls_size=Size::Small
+///             prev_signal=link.callback(|_| Msg::Prev)
+///             next_signal=link.callback(|_| Msg::Next)/>
 ///     }
 /// }
 /// ```

diff --git a/crate/yew_styles/src/components/carousel/carousel_dot.rs b/crate/yew_styles/src/components/carousel/carousel_dot.rs
@@ -4,7 +4,7 @@ use yew::prelude::*;
 use yew::{utils, App};
 use yew_assets::object_assets::{ObjectAssets, ObjectIcon};
 
-/// # Carousel Component
+/// # Carousel Dots
 ///
 /// ## Features required
 ///
@@ -140,8 +140,11 @@ use yew_assets::object_assets::{ObjectAssets, ObjectIcon};
 ///     fn view(&self) -> Html {
 ///         html! {
 ///             <div>
-///                 
-///                 <Carousel class_name="fill-background">
+///                 <Carousel
+///                     class_name="fill-background"
+///                     onwheel_signal= self.link.callback(Msg::Scroll)
+///                     onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
+///                     onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
 ///                     {get_images(self.images.to_vec(), self.active_image.to_vec())}
 ///                     {get_dots(self.active_image.to_vec(), self.link.clone())}
 ///                     {get_controls(self.link.clone())}
@@ -163,12 +166,14 @@ use yew_assets::object_assets::{ObjectAssets, ObjectIcon};
 ///         .collect::<Html>()
 /// }
 ///
-/// fn get_dots(active_image: Vec<bool>, link: ComponentLink<App>) -> Html {
+/// fn get_dots(active_image: Vec<bool>, link: ComponentLink<CarouselPage>) -> Html {
 ///     let mut dot = vec![];
 ///
 ///     for (i, _) in active_image.clone().into_iter().enumerate() {
 ///         dot.push(html! {
-///             <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))/>
+///             <CarouselDot active=active_image[i] onclick_signal = link.callback(move |_| Msg::ChangeImage(i))>
+///                 <CommunicationAssets size=("12".to_string(), "12".to_string()) icon=CommunicationIcon::Smile/>
+///             </CarouselDot>
 ///         })
 ///     }
 ///
@@ -177,15 +182,10 @@ use yew_assets::object_assets::{ObjectAssets, ObjectIcon};
 ///
 /// fn get_controls(link: ComponentLink<App>) -> Html {
 ///     html! {
-///         <Carousel
-///             class_name="fill-background"
-///             onwheel_signal= self.link.callback(Msg::Scroll)
-///             onmouseover_signal= self.link.callback(|_| Msg::ShowScroll)
-///             onmouseleave_signal= self.link.callback(|_| Msg::HideScroll)>
-///             {get_images(self.images.to_vec(), self.active_image.to_vec())}
-///             {get_dots(self.active_image.to_vec(), self.link.clone())}
-///             {get_controls(self.link.clone())}
-///         </Carousel>
+///         <CarouselControls
+///             controls_size=Size::Small
+///             prev_signal=link.callback(|_| Msg::Prev)
+///             next_signal=link.callback(|_| Msg::Next)/>
 ///     }
 /// }
 /// ```
@@ -216,6 +216,9 @@ pub struct Props {
     /// General property to add custom id
     #[prop_or_default]
     pub id: String,
+    /// In case that children is not included will add a dot icon by default
+    #[prop_or_default]
+    pub children: Option<Children>,
 }
 
 pub enum Msg {
@@ -268,7 +271,17 @@ impl Component for CarouselDot {
                 ref=self.props.code_ref.clone()
                 onclick=self.link.callback(Msg::DotClicked)
             >
-                <ObjectAssets size=("12".to_string(), "12".to_string()) icon=ObjectIcon::Circle class_name="carousel-dot-assets"/>
+            {
+                if let Some(children) = self.props.children.clone() {
+                    html! {
+                        <>{children }</>
+                    }
+                } else {
+                    html!{
+                        <ObjectAssets size=("12".to_string(), "12".to_string()) icon=ObjectIcon::Circle class_name="carousel-dot-assets"/>
+                    }
+                }
+            }
             </div>
         }
     }
@@ -284,6 +297,7 @@ fn should_create_carousel_dot_component() {
         active: false,
         onclick_signal: Callback::noop(),
         key: "".to_string(),
+        children: None,
     };
 
     let carousel: App<CarouselDot> = App::new();