From 124f8ac4c786d83d10ad86314a741f20b641533d Mon Sep 17 00:00:00 2001
From: asonix <asonix@asonix.dog>
Date: Sat, 30 Jan 2021 14:26:48 -0600
Subject: [PATCH] Toolkit: Add Tab component

---
 toolkit/scss/toolkit.scss           | 79 ++++++++++++++++++++++++++++-
 toolkit/src/lib.rs                  |  2 +
 toolkit/src/tab.rs                  | 33 ++++++++++++
 toolkit/templates/tab.rs.html       |  7 +++
 toolkit/templates/tab_group.rs.html |  5 ++
 5 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 toolkit/src/tab.rs
 create mode 100644 toolkit/templates/tab.rs.html
 create mode 100644 toolkit/templates/tab_group.rs.html

diff --git a/toolkit/scss/toolkit.scss b/toolkit/scss/toolkit.scss
index 9ae88df..6f87733 100644
--- a/toolkit/scss/toolkit.scss
+++ b/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;
diff --git a/toolkit/src/lib.rs b/toolkit/src/lib.rs
index 14cc154..4b26403 100644
--- a/toolkit/src/lib.rs
+++ b/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},
diff --git a/toolkit/src/tab.rs b/toolkit/src/tab.rs
new file mode 100644
index 0000000..126c4b2
--- /dev/null
+++ b/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(" ")
+    }
+}
diff --git a/toolkit/templates/tab.rs.html b/toolkit/templates/tab.rs.html
new file mode 100644
index 0000000..4c13e0d
--- /dev/null
+++ b/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>
diff --git a/toolkit/templates/tab_group.rs.html b/toolkit/templates/tab_group.rs.html
new file mode 100644
index 0000000..d62f11a
--- /dev/null
+++ b/toolkit/templates/tab_group.rs.html
@@ -0,0 +1,5 @@
+@(body: Content)
+
+<div class="toolkit-tab--group">
+    @:body()
+</div>