Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding id fields to most components. #10

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ This changelog follows the patterns described here: https://keepachangelog.com/e

## Unreleased

## 0.1.7
### added
- Added field `id` to compenents missing the field.

## 0.1.6
### changed
- Updates to the `Navbar` component:
Expand Down
2 changes: 1 addition & 1 deletion Cargo.toml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[package]
name = "ybc"
version = "0.1.6"
version = "0.1.7"
description = "A Yew component library based on the Bulma CSS framework."
authors = ["Anthony Dodd <[email protected]>"]
edition = "2018"
Expand Down
11 changes: 8 additions & 3 deletions src/columns/mod.rs
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ pub struct ColumnsProps {
pub children: Children,
#[prop_or_default]
pub classes: Option<String>,
#[prop_or_default]
pub id: String,
/// Align child columns vertically.
#[prop_or_default]
pub vcentered: bool,
Expand Down Expand Up @@ -55,15 +57,15 @@ impl Component for Columns {
if self.props.centered {
classes.push("is-centered");
}
let id = &self.props.id;
html! {
<div class=classes>
<div class=classes id=id>
{self.props.children.clone()}
</div>
}
}
}

//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////

#[derive(Clone, Debug, Properties, PartialEq)]
Expand All @@ -72,6 +74,8 @@ pub struct ColumnProps {
pub children: Children,
#[prop_or_default]
pub classes: Option<String>,
#[prop_or_default]
pub id: String,
}

/// A flexbox-based responsive column.
Expand Down Expand Up @@ -106,8 +110,9 @@ impl Component for Column {
if let Some(extra) = &self.props.classes {
classes = classes.extend(extra);
}
let id = &self.props.id;
html! {
<div class=classes>
<div class=classes id=id>
{self.props.children.clone()}
</div>
}
Expand Down
5 changes: 4 additions & 1 deletion src/components/breadcrumb.rs
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ pub struct BreadcrumbProps {
pub children: Children,
#[prop_or_default]
pub classes: Option<String>,
#[prop_or_default]
pub id: String,
/// The size of this component.
#[prop_or_default]
pub size: Option<BreadcrumbSize>,
Expand Down Expand Up @@ -59,8 +61,9 @@ impl Component for Breadcrumb {
if let Some(separator) = &self.props.separator {
classes.push(&separator.to_string());
}
let id = &self.props.id;
html! {
<nav class=classes aria-label="breadcrumbs">
<nav class=classes aria-label="breadcrumbs" id=id>
<ul>
{self.props.children.clone()}
</ul>
Expand Down
29 changes: 20 additions & 9 deletions src/components/card.rs
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ pub struct CardProps {
pub children: Children,
#[prop_or_default]
pub classes: Option<String>,
#[prop_or_default]
pub id: String,
}

/// An all-around flexible and composable component; this is the card container.
Expand Down Expand Up @@ -37,15 +39,15 @@ impl Component for Card {
if let Some(extra) = &self.props.classes {
classes = classes.extend(extra);
}
let id = &self.props.id;
html! {
<div class=classes>
<div class=classes id=id>
{self.props.children.clone()}
</div>
}
}
}

//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////

#[derive(Clone, Debug, Properties, PartialEq)]
Expand All @@ -54,6 +56,8 @@ pub struct CardHeaderProps {
pub children: Children,
#[prop_or_default]
pub classes: Option<String>,
#[prop_or_default]
pub id: String,
}

/// A container for card header content; rendered as a horizontal bar with a shadow.
Expand Down Expand Up @@ -84,15 +88,15 @@ impl Component for CardHeader {
if let Some(extra) = &self.props.classes {
classes = classes.extend(extra);
}
let id = &self.props.id;
html! {
<header class=classes>
<header class=classes id=id>
{self.props.children.clone()}
</header>
}
}
}

//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////

#[derive(Clone, Debug, Properties, PartialEq)]
Expand All @@ -101,6 +105,8 @@ pub struct CardImageProps {
pub children: Children,
#[prop_or_default]
pub classes: Option<String>,
#[prop_or_default]
pub id: String,
}

/// A fullwidth container for a responsive image.
Expand Down Expand Up @@ -131,15 +137,15 @@ impl Component for CardImage {
if let Some(extra) = &self.props.classes {
classes = classes.extend(extra);
}
let id = &self.props.id;
html! {
<div class=classes>
<div class=classes id=id>
{self.props.children.clone()}
</div>
}
}
}

//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////

#[derive(Clone, Debug, Properties, PartialEq)]
Expand All @@ -148,6 +154,8 @@ pub struct CardContentProps {
pub children: Children,
#[prop_or_default]
pub classes: Option<String>,
#[prop_or_default]
pub id: String,
}

/// A container for any other content as the body of the card.
Expand Down Expand Up @@ -178,15 +186,15 @@ impl Component for CardContent {
if let Some(extra) = &self.props.classes {
classes = classes.extend(extra);
}
let id = &self.props.id;
html! {
<div class=classes>
<div class=classes id=id>
{self.props.children.clone()}
</div>
}
}
}

//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////

#[derive(Clone, Debug, Properties, PartialEq)]
Expand All @@ -195,6 +203,8 @@ pub struct CardFooterProps {
pub children: Children,
#[prop_or_default]
pub classes: Option<String>,
#[prop_or_default]
pub id: String,
}

/// A container for card footer content; rendered as a horizontal list of controls.
Expand Down Expand Up @@ -225,8 +235,9 @@ impl Component for CardFooter {
if let Some(extra) = &self.props.classes {
classes = classes.extend(extra);
}
let id = &self.props.id;
html! {
<footer class=classes>
<footer class=classes id=id>
{self.props.children.clone()}
</footer>
}
Expand Down
5 changes: 4 additions & 1 deletion src/components/dropdown.rs
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ pub struct DropdownProps {
pub children: Children,
#[prop_or_default]
pub classes: Option<String>,
#[prop_or_default]
pub id: String,
/// Make this dropdown triggerable based on hover.
#[prop_or_default]
pub hoverable: bool,
Expand Down Expand Up @@ -82,8 +84,9 @@ impl Component for Dropdown {
} else {
html! {}
};
let id = &self.props.id;
html! {
<div class=classes>
<div class=classes id=id>
{overlay}
<div class="dropdown-trigger">
<Button classes=self.props.button_classes.clone() onclick=opencb>
Expand Down
17 changes: 12 additions & 5 deletions src/components/menu.rs
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ pub struct MenuProps {
pub children: Children,
#[prop_or_default]
pub classes: Option<String>,
#[prop_or_default]
pub id: String,
}

/// A simple menu, for any type of vertical navigation.
Expand Down Expand Up @@ -37,15 +39,15 @@ impl Component for Menu {
if let Some(extra) = &self.props.classes {
classes = classes.extend(extra);
}
let id = &self.props.id;
html! {
<aside class=classes>
<aside class=classes id=id>
{self.props.children.clone()}
</aside>
}
}
}

//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////

#[derive(Clone, Debug, Properties, PartialEq)]
Expand All @@ -55,6 +57,8 @@ pub struct MenuListProps {
pub children: Children,
#[prop_or_default]
pub classes: Option<String>,
#[prop_or_default]
pub id: String,
}

/// A container for menu list `li` elements.
Expand Down Expand Up @@ -85,21 +89,23 @@ impl Component for MenuList {
if let Some(extra) = &self.props.classes {
classes = classes.extend(extra);
}
let id = &self.props.id;
html! {
<ul class=classes>
<ul class=classes id=id>
{self.props.children.clone()}
</ul>
}
}
}

//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////

#[derive(Clone, Debug, Properties, PartialEq)]
pub struct MenuLabelProps {
#[prop_or_default]
pub classes: Option<String>,
#[prop_or_default]
pub id: String,
/// The text of the label.
#[prop_or_default]
pub text: String,
Expand Down Expand Up @@ -133,8 +139,9 @@ impl Component for MenuLabel {
if let Some(extra) = &self.props.classes {
classes = classes.extend(extra);
}
let id = &self.props.id;
html! {
<p class=classes>
<p class=classes id=id>
{self.props.text.clone()}
</p>
}
Expand Down
17 changes: 12 additions & 5 deletions src/components/message.rs
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ pub struct MessageProps {
pub children: Children,
#[prop_or_default]
pub classes: Option<String>,
#[prop_or_default]
pub id: String,
}

/// Colored message blocks, to emphasize part of your page.
Expand Down Expand Up @@ -37,15 +39,15 @@ impl Component for Message {
if let Some(extra) = &self.props.classes {
classes = classes.extend(extra);
}
let id = &self.props.id;
html! {
<article class=classes>
<article class=classes id=id>
{self.props.children.clone()}
</article>
}
}
}

//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////

#[derive(Clone, Debug, Properties, PartialEq)]
Expand All @@ -54,6 +56,8 @@ pub struct MessageHeaderProps {
pub children: Children,
#[prop_or_default]
pub classes: Option<String>,
#[prop_or_default]
pub id: String,
}

/// An optional message header that can hold a title and a delete element.
Expand Down Expand Up @@ -84,15 +88,15 @@ impl Component for MessageHeader {
if let Some(extra) = &self.props.classes {
classes = classes.extend(extra);
}
let id = &self.props.id;
html! {
<div class=classes>
<div class=classes id=id>
{self.props.children.clone()}
</div>
}
}
}

//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////

#[derive(Clone, Debug, Properties, PartialEq)]
Expand All @@ -101,6 +105,8 @@ pub struct MessageBodyProps {
pub children: Children,
#[prop_or_default]
pub classes: Option<String>,
#[prop_or_default]
pub id: String,
}

/// A container for the body of a message.
Expand Down Expand Up @@ -131,8 +137,9 @@ impl Component for MessageBody {
if let Some(extra) = &self.props.classes {
classes = classes.extend(extra);
}
let id = &self.props.id;
html! {
<div class=classes>
<div class=classes id=id>
{self.props.children.clone()}
</div>
}
Expand Down
Loading