Add UI.ContextualTag

Author: hojberg

src/UI/ContextualTag.elm

@@ -0,0 +1,97 @@
+module UI.ContextualTag exposing (..)
+
+import Html exposing (Html, div, text)
+import Html.Attributes exposing (class)
+import UI.Icon as Icon exposing (Icon)
+import UI.Tooltip as Tooltip
+
+
+type TagColor
+    = Subdued
+    | DecorativePurple
+    | DecorativeBlue
+
+
+type alias ContextualTag msg =
+    { icon : Icon msg
+    , label : Html msg
+    , color : TagColor
+    , tooltipText : Maybe String
+    }
+
+
+
+-- CREATE
+
+
+contextualTag : Icon msg -> String -> ContextualTag msg
+contextualTag icon label =
+    contextualTag_ icon (text label)
+
+
+contextualTag_ : Icon msg -> Html msg -> ContextualTag msg
+contextualTag_ icon label =
+    { icon = icon
+    , label = label
+    , color = Subdued
+    , tooltipText = Nothing
+    }
+
+
+
+-- MODIFY
+
+
+subdued : ContextualTag msg -> ContextualTag msg
+subdued tag =
+    { tag | color = Subdued }
+
+
+decorativePurple : ContextualTag msg -> ContextualTag msg
+decorativePurple tag =
+    { tag | color = DecorativePurple }
+
+
+decorativeBlue : ContextualTag msg -> ContextualTag msg
+decorativeBlue tag =
+    { tag | color = DecorativeBlue }
+
+
+withTooltipText : String -> ContextualTag msg -> ContextualTag msg
+withTooltipText text tag =
+    { tag | tooltipText = Just text }
+
+
+
+-- VIEW
+
+
+view : ContextualTag msg -> Html msg
+view tag =
+    let
+        color =
+            case tag.color of
+                Subdued ->
+                    "subdued"
+
+                DecorativePurple ->
+                    "decorative-purple"
+
+                DecorativeBlue ->
+                    "decorative-blue"
+
+        tag_ =
+            div
+                [ class "contextual-tag", class color ]
+                [ Icon.view tag.icon, tag.label ]
+    in
+    case tag.tooltipText of
+        Just t ->
+            Tooltip.text t
+                |> Tooltip.tooltip
+                |> Tooltip.below
+                |> Tooltip.withArrow Tooltip.Start
+                |> Tooltip.view tag_
+
+        Nothing ->
+            tag_

src/css/ui/components.css

@@ -1,4 +1,5 @@
 @import "./components/icon.css";
+@import "./components/contextual-tag.css";
 @import "./components/by-at.css";
 @import "./components/text.css";
 @import "./components/button.css";

src/css/ui/components/contextual-tag.css

@@ -0,0 +1,32 @@
+.contextual-tag {
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+  align-items: center;
+  background: var(--c-contextual-tag_background);
+  border: 1px solid var(--c-contextual-tag_border);
+  color: var(--c-contextual-tag_text);
+  font-size: var(--font-size-small);
+  padding: 0.25rem 0.375rem;
+  border-radius: var(--border-radius-base);
+  line-height: 1;
+
+  & .icon {
+    color: var(--c-contextual-tag_icon);
+    font-size: var(--font-size-medium);
+  }
+}
+
+.contextual-tag.subdued {
+  --c-contextual-tag_background: var(--u-color_element);
+  --c-contextual-tag_text: var(--u-color_text);
+  --c-contextual-tag_icon: var(--u-color_icon);
+  --c-contextual-tag_border: var(--u-color_icon);
+}
+
+.contextual-tag.decorative-purple {
+  --c-contextual-tag_background: var(--u-color_element_decorative-purple);
+  --c-contextual-tag_text: var(--u-color_text-on-element-decorative-purple);
+  --c-contextual-tag_icon: var(--u-color_icon-on-element-decorative-purple);
+  --c-contextual-tag_border: var(--u-color_border-on-element-decorative-purple);
+}