Toolkit: Add Tab component

toolkit/scss/toolkit.scss

@@ -19,7 +19,7 @@ $dark-heading-hover: #3a3a3a;
 $dark-body: #333;
 $dark-body-hover: #2a2a2a;
 $dark-text: #f5f5f5;
-$dark-text-hover: #e5e5e5;
+$dark-text-hover: #d5d5d5;
 $dark-border: #555;
 $dark-border-hover: #4a4a4a;
 $dark-primary: #ec3d77;
@@ -29,6 +29,77 @@ $dark-primary-hover: #d72d66;
     box-sizing: border-box;
 }
 
+.toolkit-tab--group {
+    width: 100%;
+    display: flex;
+    padding: 0 16px;
+    border-bottom-style: solid;
+    border-bottom-width: 3px;
+
+    .toolkit-tab {
+        display: inline-block;
+        padding: 8px 16px;
+        margin-bottom: -3px;
+        border-bottom-style: solid;
+        border-bottom-width: 3px;
+    }
+}
+
+.toolkit-tab--group {
+    border-bottom-color: $border-light;
+
+    a,
+    a:hover,
+    a:focus,
+    a:active {
+        text-decoration: none;
+    }
+
+    .toolkit-tab {
+        color: $dark;
+        border-bottom-color: $border-light;
+
+        &:hover {
+            color: $dark;
+            border-bottom-color: $light-banner-background;
+        }
+    }
+
+    .toolkit-tab__selected {
+        color: $primary;
+        border-bottom-color: $primary;
+
+        &:hover {
+            color: $primary-hover;
+            border-bottom-color: $primary-hover;
+        }
+    }
+}
+
+.toolkit-dark .toolkit-tab--group {
+    border-bottom-color: $dark-border;
+
+    .toolkit-tab {
+        color: $dark-text;
+        border-bottom-color: $dark-border;
+
+        &:hover {
+            color: $dark-text-hover;
+            border-bottom-color: $dark-border-hover;
+        }
+    }
+
+    .toolkit-tab__selected {
+        color: $dark-primary;
+        border-bottom-color: $dark-primary;
+
+        &:hover {
+            color: $dark-primary-hover;
+            border-bottom-color: $dark-primary-hover;
+        }
+    }
+}
+
 .toolkit-card .toolkit-card--body .toolkit-bbcode p {
     padding: 0;
 }
@@ -720,6 +791,12 @@ img {
         user-select: none;
     }
 
+    span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
     &.toolkit-file__primary,
     &.toolkit-button__primary {
         border: 1px solid $primary-border;

toolkit/src/lib.rs

@@ -10,6 +10,7 @@ mod input;
 mod link;
 mod profile;
 mod select;
+mod tab;
 mod text_input;
 mod thumbnail;
 mod tile;
@@ -25,6 +26,7 @@ pub use self::{
     link::Link,
     profile::Profile,
     select::Select,
+    tab::Tab,
     text_input::TextInput,
     thumbnail::Thumbnail,
     tile::{IndicatorColor, Tile, Tiles},

toolkit/src/tab.rs

@@ -0,0 +1,33 @@
+#[derive(Clone, Debug, Default)]
+pub struct Tab {
+    href: String,
+    selected: bool,
+}
+
+impl Tab {
+    pub fn new(href: &str) -> Self {
+        Tab {
+            href: href.to_owned(),
+            selected: false,
+        }
+    }
+
+    pub fn selected(mut self, selected: bool) -> Self {
+        self.selected = selected;
+        self
+    }
+
+    pub(crate) fn href(&self) -> &str {
+        &self.href
+    }
+
+    pub(crate) fn class_string(&self) -> String {
+        let mut classes = vec!["toolkit-tab".to_owned()];
+
+        if self.selected {
+            classes.push("toolkit-tab__selected".to_owned());
+        }
+
+        classes.join(" ")
+    }
+}

toolkit/templates/tab.rs.html

@@ -0,0 +1,7 @@
+@use crate::tab::Tab;
+
+@(tab: Tab, body: Content)
+
+<a href="@tab.href()" class="@tab.class_string()">
+    @:body()
+</a>

toolkit/templates/tab_group.rs.html

@@ -0,0 +1,5 @@
+@(body: Content)
+
+<div class="toolkit-tab--group">
+    @:body()
+</div>