Merge pull request #2026 from cfpb/ans_tags

Tags: Add initial tag styling

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: >-

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';

packages/cfpb-design-system/src/components/cfpb-forms/tag.scss

@@ -0,0 +1,53 @@
+@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;
+  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;
+}