Implements Callout component with doc example (#22)

yewprint-doc/src/app.rs

@@ -1,4 +1,5 @@
 use crate::buttons::*;
+use crate::callout::*;
 use crate::collapse::*;
 use crate::icon::*;
 use crate::switch::*;
@@ -96,6 +97,11 @@ impl Component for App {
                                     text={html!("Button")}
                                     onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Button))
                                 />
+                                <MenuItem
+                                    text={html!("Callout")}
+                                    onclick=self.link
+                                        .callback(|_| Msg::GoToMenu(DocMenu::Callout))
+                                />
                                 <MenuItem
                                     text={html!("Collapse")}
                                     onclick=self.link
@@ -137,6 +143,7 @@ impl Component for App {
                                         dark_theme=self.dark_theme
                                         onclick=self.link.callback(|_| Msg::ToggleLight)
                                         />),
+                                    DocMenu::Callout => html!(<CalloutDoc />),
                                     DocMenu::Collapse => html!(<CollapseDoc />),
                                     DocMenu::Tree => html!(<TreeDoc />),
                                     DocMenu::Icon => html!(<IconDoc />),
@@ -154,6 +161,7 @@ impl Component for App {
 #[derive(Debug, Copy, Clone)]
 pub enum DocMenu {
     Button,
+    Callout,
     Collapse,
     Icon,
     Menu,

yewprint-doc/src/callout/example.rs

@@ -0,0 +1,67 @@
+use yew::prelude::*;
+use yewprint::{Callout, Intent, Menu, MenuItem, Switch};
+
+pub struct Example {
+    link: ComponentLink<Self>,
+    intent: Option<Intent>,
+    show_icon: bool,
+    show_title: bool,
+}
+
+pub enum Msg {
+    ChangeIntent(Option<Intent>),
+    ToggleIcon,
+    ToggleTitle,
+}
+
+impl Component for Example {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Example {
+            link,
+            intent: None,
+            show_icon: false,
+            show_title: true,
+        }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::ChangeIntent(new_intent) => self.intent = new_intent,
+            Msg::ToggleIcon => self.show_icon = !self.show_icon,
+            Msg::ToggleTitle => self.show_title = !self.show_title,
+        }
+        true
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        true
+    }
+
+    fn view(&self) -> Html {
+        let title = if self.show_title {
+            Some("Visually important content")
+        } else {
+            None
+        };
+        html! {
+            <Callout title=title without_icon=self.show_icon intent=self.intent>
+                <p> {"The Callout element's background reflects its intent, if any."}</p>
+                <div>
+                    <Switch onclick=self.link.callback(|_| Msg::ToggleIcon) checked=self.show_icon label={ "Show/hide icon" } />
+                    <Switch onclick=self.link.callback(|_| Msg::ToggleTitle) checked=self.show_title label={ "Show/hide title" } />
+                    <p> {"Select intent:"}</p>
+                    <Menu>
+                        <MenuItem onclick=self.link.callback(|_| Msg::ChangeIntent(None)) text=html!{"None"}/>
+                        <MenuItem onclick=self.link.callback(|_| Msg::ChangeIntent(Some(Intent::Primary))) text=html!{"Primary"}/>
+                        <MenuItem onclick=self.link.callback(|_| Msg::ChangeIntent(Some(Intent::Success))) text=html!{"Success"}/>
+                        <MenuItem onclick=self.link.callback(|_| Msg::ChangeIntent(Some(Intent::Warning))) text=html!{"Warning"}/>
+                        <MenuItem onclick=self.link.callback(|_| Msg::ChangeIntent(Some(Intent::Danger))) text=html!{"Danger"}/>
+                    </Menu>
+                </div>
+            </Callout>
+        }
+    }
+}

yewprint-doc/src/callout/mod.rs

@@ -0,0 +1,31 @@
+use yew::prelude::*;
+
+pub struct CalloutDoc;
+
+impl Component for CalloutDoc {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        CalloutDoc
+    }
+
+    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_example!();
+
+        html! {
+            <div>
+                <h1>{"Callout"}</h1>
+                <div>{source}</div>
+            </div>
+        }
+    }
+}

yewprint-doc/src/lib.rs

@@ -1,5 +1,6 @@
 mod app;
 mod buttons;
+mod callout;
 mod collapse;
 mod example;
 mod icon;

yewprint/src/callout/mod.rs

@@ -0,0 +1,80 @@
+use crate::icon::SIZE_LARGE;
+use crate::{Icon, IconName, Intent};
+use yew::prelude::*;
+
+pub struct Callout {
+    props: Props,
+}
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct Props {
+    #[prop_or_default]
+    pub class: String,
+    #[prop_or(false)]
+    pub without_icon: bool,
+    #[prop_or_default]
+    pub icon: Option<IconName>,
+    #[prop_or_default]
+    pub intent: Option<Intent>,
+    #[prop_or_default]
+    pub title: Option<String>,
+    pub children: html::Children,
+}
+
+impl Component for Callout {
+    type Message = ();
+    type Properties = Props;
+
+    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 {
+            return false;
+        }
+        self.props = props;
+        true
+    }
+
+    fn view(&self) -> Html {
+        let icon = if self.props.without_icon {
+            None
+        } else {
+            self.props.icon.or_else(|| {
+                self.props.intent.map(|intent| match intent {
+                    Intent::Primary => IconName::InfoSign,
+                    Intent::Success => IconName::Tick,
+                    Intent::Warning => IconName::WarningSign,
+                    Intent::Danger => IconName::Error,
+                })
+            })
+        };
+        let mut classes = Classes::from(self.props.class.clone()).extend("bp3-callout");
+        if icon.is_some() {
+            classes.push("bp3-callout-icon");
+        }
+        if let Some(ref intent) = self.props.intent {
+            classes.push(intent.as_ref());
+        }
+        html! {
+            <div class=classes>
+                {
+                    icon.iter()
+                        .map(|name| html!{<Icon icon=name icon_size=SIZE_LARGE/>})
+                        .collect::<Html>()
+                }
+                {
+                    self.props.title.iter()
+                        .map(|title| html!{<h4 class={"bp3-heading"}>{title}</h4>})
+                        .collect::<Html>()
+                }
+                { self.props.children.clone() }
+            </div>
+        }
+    }
+}

yewprint/src/lib.rs

@@ -1,4 +1,5 @@
 mod buttons;
+mod callout;
 mod collapse;
 mod icon;
 mod menu;
@@ -6,6 +7,7 @@ mod switch;
 mod tree;
 
 pub use buttons::*;
+pub use callout::*;
 pub use collapse::*;
 pub use icon::*;
 pub use id_tree;