feat: divider and button group

README.md

@@ -70,13 +70,13 @@ Roadmap
  -  [x] [Button](https://blueprintjs.com/docs/#core/components/button)
      -  [ ] Complete Button API
      -  [ ] AnchorButton
- -  [ ] [ButtonGroup](https://blueprintjs.com/docs/#core/components/button-group)
+ -  [x] [ButtonGroup](https://blueprintjs.com/docs/#core/components/button-group)
      -  depends on: Button
  -  [x] [Callout](https://blueprintjs.com/docs/#core/components/callout)
  -  [x] [Card](https://blueprintjs.com/docs/#core/components/card)
  -  [x] [Collapse](https://blueprintjs.com/docs/#core/components/collapse)
  -  [ ] [CollapsibleList](https://blueprintjs.com/docs/#core/components/collapsible-list)
- -  [ ] [Divider](https://blueprintjs.com/docs/#core/components/divider)
+ -  [x] [Divider](https://blueprintjs.com/docs/#core/components/divider)
      -  depends on: ButtonGroup
  -  [ ] [EditableText](https://blueprintjs.com/docs/#core/components/editable-text)
  -  [ ] [Hotkeys](https://blueprintjs.com/docs/#core/components/hotkeys)

yewprint-doc/src/app.rs

@@ -1,7 +1,9 @@
+use crate::button_group::*;
 use crate::buttons::*;
 use crate::callout::*;
 use crate::card::*;
 use crate::collapse::*;
+use crate::divider::*;
 use crate::icon::*;
 use crate::progressbar::*;
 use crate::text::*;
@@ -103,8 +105,12 @@ impl Component for App {
                                     icon=go_to_theme_icon
                                 />
                                 <MenuItem
-                                    text={html!("Button")}
-                                    onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Button))
+                                text={html!("Button")}
+                                onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Button))
+                                />
+                                <MenuItem
+                                    text={html!("Button Group")}
+                                    onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::ButtonGroup))
                                 />
                                 <MenuItem
                                     text={html!("Callout")}
@@ -121,6 +127,11 @@ impl Component for App {
                                     onclick=self.link
                                         .callback(|_| Msg::GoToMenu(DocMenu::Collapse))
                                 />
+                                <MenuItem
+                                    text={html!("Divider")}
+                                    onclick=self.link
+                                        .callback(|_| Msg::GoToMenu(DocMenu::Divider))
+                                />
                                 <MenuItem
                                     text={html!("Icon")}
                                     onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Icon))
@@ -166,11 +177,13 @@ impl Component for App {
                                 render=Router::render(|switch: DocMenu| {
                                     match switch {
                                         DocMenu::Button | DocMenu::Home => html! (<ButtonDoc />),
+                                        DocMenu::ButtonGroup => html! (<ButtonGroupDoc />),
                                         DocMenu::Switch => html! (),
                                         DocMenu::Callout => html!(<CalloutDoc />),
                                         DocMenu::Card => html!(<CardDoc />),
                                         DocMenu::Collapse => html!(<CollapseDoc />),
                                         DocMenu::Text => html!(<TextDoc />),
+                                        DocMenu::Divider => html!(<DividerDoc />),
                                         DocMenu::Tree => html!(<TreeDoc />),
                                         DocMenu::Icon => html!(<IconDoc />),
                                         DocMenu::ProgressBar => html!(<ProgressBarDoc />),
@@ -190,12 +203,16 @@ impl Component for App {
 pub enum DocMenu {
     #[to = "/#button"]
     Button,
+    #[to = "/#bgroup"]
+    ButtonGroup,
     #[to = "/#callout"]
     Callout,
     #[to = "/#card"]
     Card,
     #[to = "/#collapse"]
     Collapse,
+    #[to = "/#divider"]
+    Divider,
     #[to = "/#icon"]
     Icon,
     #[to = "/#menu"]

yewprint-doc/src/button_group/example.rs

@@ -0,0 +1,31 @@
+use yew::prelude::*;
+use yewprint::{Button, ButtonGroup, IconName};
+
+pub struct Example;
+
+impl Component for Example {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+        Self
+    }
+
+    fn update(&mut self, _: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, _: Self::Properties) -> ShouldRender {
+        true
+    }
+
+    fn view(&self) -> Html {
+        html! {
+            <ButtonGroup is_minimal=true>
+                <Button icon=IconName::Database>{"Queries"}</Button>
+                <Button icon=IconName::Function>{"Functions"}</Button>
+                <Button icon=IconName::Cog>{"Options"}</Button>
+            </ButtonGroup>
+        }
+    }
+}

yewprint-doc/src/button_group/mod.rs

@@ -0,0 +1,41 @@
+mod example;
+
+use crate::ExampleContainer;
+use example::*;
+use yew::prelude::*;
+use yewprint::H1;
+
+pub struct ButtonGroupDoc;
+
+impl Component for ButtonGroupDoc {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        Self
+    }
+
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        true
+    }
+
+    fn view(&self) -> Html {
+        let source = crate::include_raw_html!(
+            concat!(env!("OUT_DIR"), "/", file!(), ".html"),
+            "bp3-code-block"
+        );
+
+        html! {
+            <div>
+                <H1 class="docs-title">{"Button Group"}</H1>
+                <ExampleContainer source=source>
+                    <Example />
+                </ExampleContainer>
+            </div>
+        }
+    }
+}

yewprint-doc/src/divider/example.rs

@@ -0,0 +1,36 @@
+use yew::prelude::*;
+use yewprint::{Button, ButtonGroup, Divider};
+
+pub struct Example;
+
+impl Component for Example {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+        Self
+    }
+
+    fn update(&mut self, _: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, _: Self::Properties) -> ShouldRender {
+        true
+    }
+
+    fn view(&self) -> Html {
+        html! {
+            <ButtonGroup>
+                <Button>{"File"}</Button>
+                <Button>{"Edit"}</Button>
+                <Divider />
+                <Button>{"Create"}</Button>
+                <Button>{"Delete"}</Button>
+                <Divider />
+                // <Button icon=IconName::Add />
+                // <Button icon=IconName::Remove />
+            </ButtonGroup>
+        }
+    }
+}

yewprint-doc/src/divider/mod.rs

@@ -0,0 +1,41 @@
+mod example;
+
+use crate::ExampleContainer;
+use example::*;
+use yew::prelude::*;
+use yewprint::H1;
+
+pub struct DividerDoc;
+
+impl Component for DividerDoc {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        DividerDoc
+    }
+
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        true
+    }
+
+    fn view(&self) -> Html {
+        let source = crate::include_raw_html!(
+            concat!(env!("OUT_DIR"), "/", file!(), ".html"),
+            "bp3-code-block"
+        );
+
+        html! {
+            <div>
+                <H1 class="docs-title">{"Divider"}</H1>
+                <ExampleContainer source=source>
+                    <Example />
+                </ExampleContainer>
+            </div>
+        }
+    }
+}

yewprint-doc/src/lib.rs

@@ -1,8 +1,10 @@
 mod app;
+mod button_group;
 mod buttons;
 mod callout;
 mod card;
 mod collapse;
+mod divider;
 mod example;
 mod icon;
 mod progressbar;

yewprint/src/button_group.rs

@@ -0,0 +1,49 @@
+use yew::prelude::*;
+
+pub struct ButtonGroup {
+    props: ButtonGroupProps,
+}
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct ButtonGroupProps {
+    #[prop_or_default]
+    pub is_minimal: bool,
+    #[prop_or_default]
+    pub children: html::Children,
+}
+
+impl Component for ButtonGroup {
+    type Message = ();
+    type Properties = ButtonGroupProps;
+
+    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        Self { props }
+    }
+
+    fn update(&mut self, _: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, props: Self::Properties) -> ShouldRender {
+        if self.props != props {
+            self.props = props;
+            true
+        } else {
+            false
+        }
+    }
+
+    fn view(&self) -> Html {
+        let mut classname = String::from("bp3-button-group");
+
+        if self.props.is_minimal {
+            classname.push_str(" bp3-minimal");
+        }
+
+        html! {
+            <div class=classname>
+              {self.props.children.clone()}
+            </div>
+        }
+    }
+}

yewprint/src/divider.rs

@@ -0,0 +1,39 @@
+use yew::prelude::*;
+
+pub struct Divider {
+    props: DividerProps,
+}
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct DividerProps {
+    #[prop_or_default]
+    pub children: html::Children,
+}
+
+impl Component for Divider {
+    type Message = ();
+    type Properties = DividerProps;
+
+    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        Self { props }
+    }
+
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, props: Self::Properties) -> ShouldRender {
+        if self.props != props {
+            self.props = props;
+            true
+        } else {
+            false
+        }
+    }
+
+    fn view(&self) -> Html {
+        html! {
+            <span class="bp3-divider"></span>
+        }
+    }
+}

yewprint/src/lib.rs

@@ -1,7 +1,9 @@
+mod button_group;
 mod buttons;
 mod callout;
 mod card;
 mod collapse;
+mod divider;
 mod html_elements;
 mod icon;
 mod menu;
@@ -11,10 +13,12 @@ mod text;
 #[cfg(feature = "tree")]
 mod tree;
 
+pub use button_group::*;
 pub use buttons::*;
 pub use callout::*;
 pub use card::*;
 pub use collapse::*;
+pub use divider::*;
 pub use html_elements::*;
 pub use icon::*;
 #[cfg(feature = "tree")]