design-system 0.0.1

Design System for Open Marketplace Applications
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

use css_in_rust::Style;
use yew::prelude::*;

// 📚 Design System
use crate::Icon;

#[derive(Debug)]
pub struct MenuItem {
    link: ComponentLink<Self>,
    style: Style,
    props: Props,
}

#[derive(Debug)]
pub enum Msg {}

#[derive(Clone, PartialEq, Properties, Debug)]
pub struct Props {
  #[prop_or_default]
  pub children: Children,
  #[prop_or_default]
  pub class: String,
  #[prop_or_default]
  pub text: String,
  #[prop_or_default]
  pub icon: &'static str,
}

impl Component for MenuItem {
  type Message = Msg;
  type Properties = Props;

  fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
    let style = Style::create("menu_item", include_str!("menu_item.scss")).expect("An error occured while creating the style.");
    
    MenuItem {
      link,
      style,
      props: props.to_owned(),
    }
  }

  fn update(&mut self, _msg: Self::Message) -> ShouldRender {
    true
  }

  fn change(&mut self, _props: Self::Properties) -> ShouldRender {
    true
  }

  fn view(&self) -> Html {

    html! {
      <div
          class=Classes::from(self.props.class.to_string()).extend(self.style.to_string())
        >
        {render_icon(self.props.icon.clone())}
        {render_text(self.props.text.clone())}
        { self.props.children.clone() }
      </div>
    }
  }
}

pub fn render_text(text: String) -> Html {
  if text.is_empty() {
    html! {
      <></>
    }
  } else {
    html! {
      <span>{ text }</span>
    }
  }
}

pub fn render_icon(name: &'static str) -> Html {
  if name.is_empty() {
    html! {
      <></>
    }
  } else {
    html! {
      <Icon name=name />
    }
  }
}