From 68883ebda6bedba02b3a86f17497d22f635e9d4d Mon Sep 17 00:00:00 2001
From: Ans <git@anselmbradford.com>
Date: Thu, 22 Aug 2024 09:16:37 -0400
Subject: [PATCH 1/2] Add initial tag styling

---
 docs/pages/tags.md                            | 14 +++--
 .../src/components/cfpb-forms/index.js        |  1 +
 .../src/components/cfpb-forms/tag.scss        | 54 +++++++++++++++++++
 3 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 packages/cfpb-design-system/src/components/cfpb-forms/tag.scss

diff --git a/docs/pages/tags.md b/docs/pages/tags.md
index cd4f5500ee..9dacea9efc 100644
--- a/docs/pages/tags.md
+++ b/docs/pages/tags.md
@@ -11,7 +11,8 @@ variation_groups:
   - variations:
       - variation_is_deprecated: false
         variation_name: Topic tag
-        variation_description: Topic tags appear with content such as blog posts and
+        variation_description:
+          Topic tags appear with content such as blog posts and
           press releases to display associated topics. When clicked, a topic tag
           takes a user to a filtered view of other items tagged with the same
           topic tag. In this filtered view, a topic tag appears as a filter tag.
@@ -22,23 +23,20 @@ variation_groups:
           to display categories, topics, and languages selected in a [filterable
           list control
           panel](https://cfpb.github.io/design-system/patterns/filterable-list-control-panels).
-        variation_code_snippet: <ul class="o-multiselect_choices"><li
-          data-option="option1"><button type="button"><label
-          for="test_select__multiple-option1">Option 1<svg
+        variation_code_snippet:
+          <div class="m-tag-group"><button class="a-tag">Option 1 <svg
           xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg
           cf-icon-svg__error" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03
           1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1
           1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6
           8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455
-          9.716z"></path></svg></label></button></li><li
-          data-option="option4"><button type="button"><label
-          for="test_select__multiple-option4">Option 4<svg
+          9.716z"></path></svg></button><button class="a-tag">Option 4<svg
           xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg
           cf-icon-svg__error" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03
           1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1
           1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6
           8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455
-          9.716z"></path></svg></label></button></li></ul>
+          9.716z"></path></svg></button></div>
     variation_group_name: Types
 behavior: To clear a filter tag selection, click the “x” icon inside of the filter tag.
 related_items: >-
diff --git a/packages/cfpb-design-system/src/components/cfpb-forms/index.js b/packages/cfpb-design-system/src/components/cfpb-forms/index.js
index 3505cebfbb..f3d04a5db9 100644
--- a/packages/cfpb-design-system/src/components/cfpb-forms/index.js
+++ b/packages/cfpb-design-system/src/components/cfpb-forms/index.js
@@ -9,6 +9,7 @@ export * as labelStyles from './label.scss';
 export * as rangeStyles from './range.scss';
 export * as searchInputStyles from './search-input.scss';
 export * as selectStyles from './select.scss';
+export * as tagStyles from './tag.scss';
 export * as textInputStyles from './text-input.scss';
 
 export { Multiselect } from './multiselect.js';
diff --git a/packages/cfpb-design-system/src/components/cfpb-forms/tag.scss b/packages/cfpb-design-system/src/components/cfpb-forms/tag.scss
new file mode 100644
index 0000000000..a4160e9b4a
--- /dev/null
+++ b/packages/cfpb-design-system/src/components/cfpb-forms/tag.scss
@@ -0,0 +1,54 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/utilities' as *;
+
+/* ==========================================================================
+   consumerfinance.gov
+   tag
+   ========================================================================== */
+
+.a-tag {
+  border: 1px solid var(--teal);
+  padding: 4px 10px;
+  background-color: var(--teal-20);
+  border-radius: math.div(3px, $base-font-size-px) + rem;
+  font-weight: 500;
+  color: var(--black);
+
+  &:hover {
+    background-color: var(--teal-40);
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: 1px dotted var(--teal);
+    outline-offset: 1px;
+  }
+
+  &:active {
+    background-color: var(--teal);
+  }
+
+  .cf-icon-svg {
+    display: inline-block;
+    margin-left: 10px;
+    pointer-events: none;
+  }
+}
+
+a.a-tag {
+  // Colors for :link, :visited, :hover, :focus, :active.
+  @include u-link-colors(
+    var(--black),
+    var(--black),
+    var(--black),
+    var(--black),
+    var(--black)
+  );
+}
+
+.m-tag-group {
+  display: flex;
+  gap: math.div(15px, $btn-font-size) + em;
+  flex-wrap: wrap;
+}

From cad141f577a923d7ad368d3594f21ae18a7bf5e1 Mon Sep 17 00:00:00 2001
From: Ans <git@anselmbradford.com>
Date: Thu, 22 Aug 2024 10:51:16 -0400
Subject: [PATCH 2/2] Update tags to regular weight

---
 packages/cfpb-design-system/src/components/cfpb-forms/tag.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/cfpb-design-system/src/components/cfpb-forms/tag.scss b/packages/cfpb-design-system/src/components/cfpb-forms/tag.scss
index a4160e9b4a..52b29a3d76 100644
--- a/packages/cfpb-design-system/src/components/cfpb-forms/tag.scss
+++ b/packages/cfpb-design-system/src/components/cfpb-forms/tag.scss
@@ -12,7 +12,6 @@
   padding: 4px 10px;
   background-color: var(--teal-20);
   border-radius: math.div(3px, $base-font-size-px) + rem;
-  font-weight: 500;
   color: var(--black);
 
   &:hover {