Toolkit: Add 'link' button kind

This commit is contained in:
asonix 2021-01-31 17:21:53 -06:00
parent c47a669bdc
commit 0387e09959
5 changed files with 133 additions and 18 deletions

View file

@ -216,7 +216,7 @@ img {
border-radius: 0 3px 3px 0;
height: 40px;
border-left: 0;
box-shadow: 0;
box-shadow: none;
}
}
}
@ -421,6 +421,10 @@ img {
width: 100%;
height: 100%;
overflow: hidden;
img:hover {
filter: brightness(110%);
}
}
&__small {
@ -431,6 +435,15 @@ img {
border-radius: 32px;
}
}
&__tiny {
width: 40px;
height: 40px;
.toolkit-icon {
border-radius: 20px;
}
}
}
.toolkit-banner {
@ -843,6 +856,30 @@ img {
}
}
&.toolkit-file__link,
&.toolkit-button__link {
border-width: 0;
box-shadow: none;
margin: 0;
color: $dark;
&:hover {
background-color: $secondary-hover;
}
}
&.toolkit-file__primary-link,
&.toolkit-button__primary-link {
border-width: 0;
box-shadow: none;
margin: 0;
color: $primary;
&:hover {
background-color: $secondary-hover;
}
}
&.toolkit-file__outline,
&.toolkit-button__outline {
background-color: $white;
@ -899,6 +936,30 @@ img {
}
}
&.toolkit-file__link,
&.toolkit-button__link {
border-width: 0;
box-shadow: none;
margin: 0;
color: $dark-text;
&:hover {
background-color: $dark-heading-hover;
}
}
&.toolkit-file__primary-link,
&.toolkit-button__primary-link {
border-width: 0;
box-shadow: none;
margin: 0;
color: $dark-primary;
&:hover {
background-color: $dark-heading-hover;
}
}
&.toolkit-file__outline,
&.toolkit-button__outline {
background-color: $dark-body;
@ -1174,6 +1235,11 @@ img {
width: 48px;
height: 48px;
}
&__tiny {
width: 40px;
height: 40px;
}
}
}
@ -1192,5 +1258,10 @@ img {
width: 32px;
height: 32px;
}
&__tiny {
width: 40px;
height: 40px;
}
}
}

View file

@ -2,8 +2,10 @@
pub enum ButtonKind {
Primary,
PrimaryOutline,
Outline,
PrimaryLink,
Secondary,
Outline,
Link,
}
#[derive(Clone, Copy, Debug)]
@ -38,6 +40,14 @@ impl Button {
}
}
pub fn primary_link(label: &str) -> Self {
Button {
label: label.to_owned(),
kind: ButtonKind::PrimaryLink,
..Default::default()
}
}
pub fn outline(label: &str) -> Self {
Button {
label: label.to_owned(),
@ -46,6 +56,14 @@ impl Button {
}
}
pub fn link(label: &str) -> Self {
Button {
label: label.to_owned(),
kind: ButtonKind::Link,
..Default::default()
}
}
pub fn secondary(label: &str) -> Self {
Button {
label: label.to_owned(),
@ -84,11 +102,15 @@ impl Button {
let mut classes = self.classes.clone();
classes.push("toolkit-button".to_owned());
let static_classes = match self.kind {
Primary => "toolkit-button toolkit-button__primary",
PrimaryOutline => "toolkit-button toolkit-button__primary-outline",
Outline => "toolkit-button toolkit-button__outline",
Secondary => "toolkit-button toolkit-button__secondary",
Primary => "toolkit-button__primary",
PrimaryOutline => "toolkit-button__primary-outline",
PrimaryLink => "toolkit-button__primary-link",
Secondary => "toolkit-button__secondary",
Outline => "toolkit-button__outline",
Link => "toolkit-button__link",
};
classes.push(static_classes.to_owned());

View file

@ -82,11 +82,15 @@ impl FileInput {
let mut classes = self.classes.clone();
classes.push("toolkit-file".to_owned());
let static_classes = match self.kind {
Primary => "toolkit-file toolkit-file__primary",
PrimaryOutline => "toolkit-file toolkit-file__primary-outline",
Outline => "toolkit-file toolkit-file__outline",
Secondary => "toolkit-file toolkit-file__secondary",
Primary => "toolkit-file__primary",
PrimaryOutline => "toolkit-file__primary-outline",
PrimaryLink => "toolkit-file__link",
Secondary => "toolkit-file__secondary",
Outline => "toolkit-file__outline",
Link => "toolkit-file__link",
};
classes.push(static_classes.to_owned());

View file

@ -1,11 +1,19 @@
use crate::image::Image;
use std::rc::Rc;
#[derive(Clone, Copy, Debug)]
pub enum Size {
Normal,
Small,
Tiny,
}
#[derive(Clone)]
pub struct Icon {
pub(crate) href: String,
pub(crate) small: bool,
pub(crate) dark: bool,
classes: Vec<String>,
size: Size,
image: Option<Rc<dyn Image>>,
}
@ -13,7 +21,8 @@ impl Icon {
pub fn new(href: String) -> Self {
Icon {
href,
small: false,
size: Size::Normal,
classes: vec![],
dark: false,
image: None,
}
@ -29,8 +38,13 @@ impl Icon {
self
}
pub fn small(mut self, small: bool) -> Self {
self.small = small;
pub fn size(mut self, size: Size) -> Self {
self.size = size;
self
}
pub fn class(mut self, class: &str) -> Self {
self.classes.push(class.to_owned());
self
}
@ -39,10 +53,14 @@ impl Icon {
}
pub(crate) fn class_string(&self) -> String {
let mut classes = vec!["toolkit-icon--link".to_owned()];
let mut classes = self.classes.clone();
if self.small {
classes.push("toolkit-icon--link__small".to_owned());
classes.push("toolkit-icon--link".to_owned());
match self.size {
Size::Normal => (),
Size::Small => classes.push("toolkit-icon--link__small".to_owned()),
Size::Tiny => classes.push("toolkit-icon--link__tiny".to_owned()),
}
if self.dark {

View file

@ -20,7 +20,7 @@ pub use self::{
button::{Button, ButtonKind, LinkKind},
card::Card,
file_input::FileInput,
icon::Icon,
icon::{Icon, Size},
image::Image,
input::{Input, InputKind},
link::Link,