add button style

dancespiele · Feb 2, 2020 · db0314a · db0314a
1 parent 0500bb3
commit db0314a
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 41 deletions.
diff --git a/app/components-styles/_button.sass b/app/components-styles/_button.sass
@@ -1,5 +1,6 @@
 @import "_global-variables.sass"
-
+@import "_mixins.sass"
+
 .button
     padding: 5px 10px
     border: none
@@ -11,7 +12,11 @@
         &.#{$name}
             font-size: $size
 
-    @each $name, $background, $color in $button-types
-        &.#{$name}
-            background-color: $background
-            color: $color
+    &.regular
+        @include button-style($regular-style)
+
+    &.outline
+        @include button-style($outline-style)
+    &.light
+        @include button-style($light-style)
+
diff --git a/app/components-styles/_global-variables.sass b/app/components-styles/_global-variables.sass
@@ -1,2 +1,5 @@
-$button-types: standard #faf3f3 #000, primary #654016 #fff, secondary #c77b21 #fff, success #23c24b #fff, info #5680ff #fff, link #4542d1 #fff, warning #e6bd44 #000, danger #e23030 #fff
-$sizes: (small: 12px, medium: 18px, big: 26px)
+$regular-style: standard #918d94 #fff none, primary #654016 #fff none, secondary #c77b21 #fff none, success #40C600 #fff none, info #008FD5 #fff none, link #034DA1 #fff none, warning #FFF200 #000 none, danger #ed1c24 #fff none
+$light-style: standard #faf3f3 #918d94 none, primary #e9d7c4 #654016 none, secondary #ffd9ac #c77b21 none, success #b6f5c6 #1ca53e none, info #cedaff #008FD5 none, link #4fb0ff #034DA1 none, warning #fdffa8 #99a034 none, danger #fdc5c5 #ed1c24 none
+$outline-style: standard #fff #918d94 #918d94, primary #fff #654016 #654016, secondary #fff #c77b21 #c77b21, success #fff #40C600 #40C600, info #fff #008FD5 #008FD5, link #fff #034DA1 #034DA1, warning #fff #e6bd44 #e6bd44, danger #fff #ed1c24 #ed1c24 
+$sizes: (small: 12px, medium: 18px, big: 26px)
+
diff --git a/app/components-styles/_mixins.sass b/app/components-styles/_mixins.sass
@@ -0,0 +1,13 @@
+@mixin button-style($style)
+    @each $name, $background, $color, $border-color in $style
+        &.#{$name}
+            background-color: $background
+            color: $color
+            border: get-border($border-color)
+
+@function get-border($border-color)
+    $border: none
+    @if $border-color != none
+        $border: 1px solid $border-color
+
+    @return $border
diff --git a/app/page-styles/_button.sass b/app/page-styles/_button.sass
@@ -1,3 +1,16 @@
+.container
+    display: flex
+    flex-direction: row
+    flex-wrap: wrap
+
+.buttons-example
+    flex-basis: 70%
+
+.action
+    font-size: 35px
+    flex-basis: 30%
+    margin-top: 300px
+
 .button-page
     margin-right: 5px
 

diff --git a/crate/src/components/button.rs b/crate/src/components/button.rs
@@ -6,6 +6,7 @@ pub enum ButtonType {
     Secondary,
     Success,
     Info,
+    Link,
     Warning,
     Danger,
     Standard,
@@ -72,6 +73,7 @@ pub fn get_button_type(button_type: ButtonType) -> String {
         ButtonType::Primary => String::from("primary"),
         ButtonType::Secondary => String::from("secondary"),
         ButtonType::Info => String::from("info"),
+        ButtonType::Link => String::from("link"),
         ButtonType::Success => String::from("success"),
         ButtonType::Warning => String::from("warning"),
         ButtonType::Danger => String::from("danger"),

diff --git a/crate/src/components/mod.rs b/crate/src/components/mod.rs
@@ -1,3 +1,3 @@
 pub mod button;
 
-pub use self::button::{Button, ButtonType, Size, get_button_type, get_size};
+pub use self::button::{Button, ButtonType, Size, ButtonStyle, get_button_type, get_size, get_button_style};
diff --git a/crate/src/page/button_page.rs b/crate/src/page/button_page.rs
@@ -1,5 +1,5 @@
 use yew::prelude::*;
-use components::{Button, ButtonType, Size, get_button_type, get_size};
+use components::{Button, ButtonType, Size, ButtonStyle, get_button_type, get_size, get_button_style};
 
 pub struct ButtonPage {
     link: ComponentLink<Self>,
@@ -37,9 +37,11 @@ impl Component for ButtonPage {
     fn view(&self)-> Html {
 
         html! {
-            <div>
-                {get_buttons(self.link.clone())}
-                <div>
+            <div class="container">
+                <div class="buttons-example">
+                    {get_button_styles(self.link.clone())}
+                </div>
+                <div class="action">
                     {self.button_type.clone()}
                 </div>
             </div>
@@ -56,37 +58,55 @@ fn to_first_upercase(word: &str) -> String {
     }
 }
 
-fn get_buttons(link: ComponentLink<ButtonPage>) -> Html {
-    let sizes: Vec<Size> = vec!(Size::Small, Size::Medium, Size::Big);
-
-    sizes.into_iter().map(move |size| {
-        let button_types: Vec<&str> = vec!("Standard", "Primary", "Secondary", "Info", "Success", "Warning", "Danger");
-        let button_types_enum: Vec<ButtonType> = vec!(ButtonType::Standard, ButtonType::Primary, ButtonType::Secondary,
-            ButtonType::Info, ButtonType::Success, ButtonType::Warning, ButtonType::Danger);
-
-        let mut index = 0;
+fn get_button_styles(link: ComponentLink<ButtonPage>) -> Html {
+    let styles: Vec<ButtonStyle> = vec!(ButtonStyle::Regular, ButtonStyle::Light, ButtonStyle::Outline); 
 
+    styles.into_iter().map(move |style| {
         html! {
-            <div class="show-size">
-                <h3>{get_size(size.clone()).to_uppercase()}</h3>
-                {
-                    button_types.into_iter().map(|button_type| {
-                        let button = html! {
-                            <Button
-                                onsignal=link.callback(move |_| Msg::ChangeType(button_type.to_string().clone()))
-                                class_name="button-page"
-                                button_type=button_types_enum[index].clone()
-                                size=size.clone()
-                            >{to_first_upercase(&get_button_type(button_types_enum[index].clone()))}
-                            </Button>
-                        };
-
-                        index = index + 1;
-
-                        button
-                    }).collect::<Html>()
-                }
-            </div>
+            <>
+                <h2>{get_button_style(style.clone()).to_uppercase()}</h2>
+                {get_sizes(style, link.clone())}
+            </>
         }
     }).collect::<Html>()
 }
+
+fn get_sizes(button_style: ButtonStyle,link: ComponentLink<ButtonPage>) -> Html {
+    let sizes: Vec<Size> = vec!(Size::Small, Size::Medium, Size::Big);
+
+    sizes.into_iter().map(move |size| {
+        get_buttons(size, button_style.clone(), link.clone())
+    }).collect::<Html>()
+}
+
+fn get_buttons(size: Size, button_style: ButtonStyle, link: ComponentLink<ButtonPage>) -> Html {
+    let button_types: Vec<&str> = vec!("Standard", "Primary", "Secondary", "Info", "Link", "Success", "Warning", "Danger");
+    let button_types_enum: Vec<ButtonType> = vec!(ButtonType::Standard, ButtonType::Primary, ButtonType::Secondary,
+        ButtonType::Info, ButtonType::Link, ButtonType::Success, ButtonType::Warning, ButtonType::Danger);
+
+    let mut index = 0;
+
+    html! {
+        <div class="show-size">
+            <h3>{get_size(size.clone()).to_uppercase()}</h3>
+            {
+                button_types.into_iter().map(|button_type| {
+                    let button = html! {
+                        <Button
+                            onsignal=link.callback(move |_| Msg::ChangeType(button_type.to_string().clone()))
+                            class_name="button-page"
+                            button_type=button_types_enum[index].clone()
+                            button_style=button_style.clone()
+                            size=size.clone()
+                        >{to_first_upercase(&get_button_type(button_types_enum[index].clone()))}
+                        </Button>
+                    };
+
+                    index = index + 1;
+
+                    button
+                }).collect::<Html>()
+            }
+        </div>
+    }
+}