Merge pull request #1661 from cfpb/ans_remove_jump_link_bg

Remove `a-link__bg` modifier
cfpb · Jun 23, 2023 · c9a889f · c9a889f
2 parents e98f9e0 + 8799b64
commit c9a889f
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 64 deletions.
diff --git a/docs/pages/links.md b/docs/pages/links.md
@@ -116,11 +116,11 @@ variation_groups:
 
   - variation_group_name: Links with icons
     variation_group_description: >-
-      * An icon should appear after the text it represents.  
+      * An icon should appear after the text it represents.
 
       * Each icon should be used exclusively and consistently for one action.
 
-      * The color and font-size of an icon should be the same as the text it represents, including state changes. 
+      * The color and font-size of an icon should be the same as the text it represents, including state changes.
 
       * Icons should never be underlined.
     variations:
@@ -200,18 +200,6 @@ variation_groups:
               {% include icons/left.svg %}
               <span class="a-link_text">Jump link with icon on left</span>
           </a>
-      - variation_name: Jump link with background modifier
-        variation_code_snippet: |-
-          <a class="a-link
-                    a-link__jump
-                    a-link__icon-after-text
-                    a-link__bg"
-            href="#">
-              <span class="a-link_text">Jump link with grey background and
-                  solid borders on small screens</span>
-              {% include icons/right.svg %}
-          </a>
-        variation_description: A grey background is added on small screens.
     variation_group_description: Jump links are standalone links that respond to
       small screens by converting to full block links that have a
       finger-friendly touch area. Reduce screen size to see these in action.

diff --git a/packages/cfpb-typography/cfpb-typography.css b/packages/cfpb-typography/cfpb-typography.css
diff --git a/packages/cfpb-typography/src/atoms/links.less b/packages/cfpb-typography/src/atoms/links.less
@@ -28,6 +28,7 @@
     font-size: unit((@size-iv / @base-font-size-px), em);
   }
 
+  // Mobile size.
   .respond-to-max( @bp-xs-max, {
     .u-block-link();
 
@@ -54,31 +55,6 @@
     &.a-link__icon-before-text .cf-icon-svg {
       left: 0;
     }
-
-    &.a-link__bg {
-      border: solid @jump-link_border;
-      border-width: 1px 0;
-
-      background: @jump-link_bg;
-
-      &.a-link__icon-after-text .cf-icon-svg {
-        right: 1em;
-      }
-
-      &.a-link__icon-before-text .cf-icon-svg {
-        left: 1em;
-      }
-
-      &.a-link__icon-after-text {
-        padding-left: 1em;
-        padding-right: 2.25em;
-      }
-
-      &.a-link__icon-before-text {
-        padding-left: 2.25em;
-        padding-right: 1em;
-      }
-    }
   } );
 }
 

diff --git a/packages/cfpb-typography/usage.md b/packages/cfpb-typography/usage.md
@@ -355,30 +355,6 @@ Jump links can also have icons before the text, like icon links.
 </a>
 ```
 
-#### Jump link with background modifier (only visible on small screens)
-
-<a class="a-link
-          a-link__jump
-          a-link__icon-after-text
-          a-link__bg"
-   href="#">
-<span class="a-link_text">Jump link with grey background and
-solid borders on small screens</span>
-{% include icons/right.svg %}
-</a>
-
-```
-<a class="a-link
-          a-link__jump
-          a-link__icon-after-text
-          a-link__bg"
-   href="#">
-    <span class="a-link_text">Jump link with grey background and
-        solid borders on small screens</span>
-    {% raw %}{% include icons/right.svg %}{% endraw %}
-</a>
-```
-
 ## Lists
 
 ### Unstyled list modifier