Merge pull request #2031 from cfpb/ans_tags

Add topic tags | Re-arrange links page | Adjust sass imports
cfpb · Sep 4, 2024 · 760403d · 760403d
2 parents c59cfed + f522017
commit 760403d
Show file tree

Hide file tree

Showing 62 changed files with 342 additions and 199 deletions.
diff --git a/docs/assets/css/main.scss b/docs/assets/css/main.scss
@@ -22,6 +22,7 @@
 @use 'variation' as *;
 @use 'color-swatches' as *;
 @use 'search' as *;
+
 @include define-custom-props;
 
 // Webfont

diff --git a/docs/pages/links.md b/docs/pages/links.md
@@ -35,44 +35,6 @@ variation_groups:
           underlines elsewhere, e.g. to underline links in a `nav` element,
           simply add a `border-bottom-width: 1px;` to the link.'
         variation_specs: ''
-      - variation_name: List link
-        variation_code_snippet: |-
-          <ul class="m-list m-list--links">
-              <li class="m-list__item">
-                  <a class="a-link a-link--jump" href="#">
-                     <span class="a-link__text">List item 1</span>
-                  </a>
-              </li>
-              <li class="m-list__item">
-                  <a class="a-link a-link--jump" href="#">
-                      <span class="a-link__text">List item 2</span>
-                      {% include icons/external-link.svg %}
-                  </a>
-              </li>
-              <li class="m-list__item">
-                  <a class="a-link a-link--jump" href="#">
-                    <span class="a-link__text">List item 3</span>
-                    {% include icons/right.svg %}
-                  </a>
-              </li>
-              <li class="m-list__item">
-                  <a class="a-link a-link--jump" href="#">
-                    <span class="a-link__text">Read a report on our post-proposal qualitative testing of the new Spanish and refinance disclosures
-                    </span>
-                    {% include icons/download.svg %}
-                  </a>
-              </li>
-          </ul>
-        variation_description: List links (or call-to-action links) are links
-          that highlight a users' next steps. They are medium weight and often
-          used in unordered lists.
-        variation_implementation: Call-to-action links are used in
-          [cards](https://cfpb.github.io/design-system/patterns/cards) and [info
-          unit
-          groups](https://cfpb.github.io/design-system/patterns/info-unit-groups),
-          among other places.
-        variation_jinja_code_snippet: ''
-        variation_specs: ''
       - variation_name: Destructive link
         variation_code_snippet: |-
           <a class="a-btn a-btn--link a-btn--warning" href="#">
@@ -122,15 +84,7 @@ variation_groups:
             href="#">
           <span class="a-link__text">Jump link</span>
               {% include icons/right.svg %}
-          </a></p><p>
-          <a class="a-link
-                    a-link--jump"
-            href="#">
-          <span class="a-link__text">External link jump link</span>
-              {% include icons/external-link.svg %}
-              {% include icons/right.svg %}
           </a></p>
-
       - variation_is_deprecated: false
         variation_name: Jump link with icon on left
         variation_description: Jump links can also have icons before the text, like icon links.
@@ -140,14 +94,61 @@ variation_groups:
             href="#">
               {% include icons/left.svg %}
               <span class="a-link__text">Jump link with icon on left</span>
-          </a></p><p>
-          <a class="a-link
-                    a-link--jump"
-            href="#">
-              {% include icons/left.svg %}
-          <span class="a-link__text">External link jump link</span>
-              {% include icons/external-link.svg %}
           </a></p>
+      - variation_name: List link
+        variation_code_snippet: |-
+          <ul class="m-list m-list--links">
+              <li class="m-list__item">
+                  <a class="a-link a-link--jump" href="#">
+                     <span class="a-link__text">List item 1</span>
+                  </a>
+              </li>
+              <li class="m-list__item">
+                  <a class="a-link a-link--jump" href="#">
+                      <span class="a-link__text">List item 2</span>
+                      {% include icons/external-link.svg %}
+                  </a>
+              </li>
+              <li class="m-list__item">
+                  <a class="a-link a-link--jump" href="#">
+                    <span class="a-link__text">List item 3</span>
+                    {% include icons/right.svg %}
+                  </a>
+              </li>
+              <li class="m-list__item">
+                  <a class="a-link a-link--jump" href="#">
+                    <span class="a-link__text">Read a report on our post-proposal qualitative testing of the new Spanish and refinance disclosures
+                    </span>
+                    {% include icons/download.svg %}
+                  </a>
+              </li>
+              <li class="m-list__item">
+                  <a class="a-link
+                        a-link--jump"
+                href="#">
+              <span class="a-link__text">External link jump link</span>
+                  {% include icons/external-link.svg %}
+                  {% include icons/right.svg %}
+                </a>
+              </li>
+              <li class="m-list__item">
+                  <a class="a-link a-link--jump" href="#">
+                    {% include icons/left.svg %}
+                    <span class="a-link__text">External link jump link</span>
+                      {% include icons/external-link.svg %}
+                  </a>
+              </li>
+          </ul>
+        variation_description: List links (or call-to-action links) are links
+          that highlight a users' next steps. They are medium weight and often
+          used in unordered lists.
+        variation_implementation: Call-to-action links are used in
+          [cards](https://cfpb.github.io/design-system/patterns/cards) and [info
+          unit
+          groups](https://cfpb.github.io/design-system/patterns/info-unit-groups),
+          among other places.
+        variation_jinja_code_snippet: ''
+        variation_specs: ''
       - variation_is_deprecated: false
         variation_name: Printed links
         variation_description: When a page is printed from

diff --git a/docs/pages/tags.md b/docs/pages/tags.md
@@ -16,27 +16,57 @@ variation_groups:
           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.
+        variation_code_snippet: >-
+          <ol class="m-tag-group">
+            <li>
+              <a href="#" class="a-tag-topic">
+                <span class="a-tag-topic__bullet" aria-hidden="true">•</span>
+                <span class="a-tag-topic__text">Discrimination</span>
+              </a>
+            </li>
+
+            <li>
+              <a href="#" class="a-tag-topic">
+                <span class="a-tag-topic__bullet" aria-hidden="true">•</span>
+                <span class="a-tag-topic__text">Mortgages</span>
+              </a>
+            </li>
+          </ol>
       - variation_is_deprecated: false
         variation_name: Filter tag
         variation_description: Filter tags are used as a part of
           [multiselects](https://cfpb.github.io/design-system/components/selects#multiselect)
           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:
-          <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></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></button></div>
+        variation_code_snippet: >-
+          <ol class="m-tag-group">
+            <li>
+              <button class="a-tag-filter">
+                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>
+              </button>
+            </li><li>
+              <button class="a-tag-filter">
+                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>
+              </button>
+            </li>
+          </ol>
     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/dist/components/cfpb-expandables/index.css b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css
diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css.map b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.js b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.js
diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.js.map b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.js.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.css b/packages/cfpb-design-system/dist/components/cfpb-forms/index.css
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.css.map b/packages/cfpb-design-system/dist/components/cfpb-forms/index.css.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.js b/packages/cfpb-design-system/dist/components/cfpb-forms/index.js
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.js.map b/packages/cfpb-design-system/dist/components/cfpb-forms/index.js.map