updating link styles for active and focus state (#1622)

CMSgov · Mar 2, 2022 · 331039d · 331039d
1 parent aae8285
commit 331039d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/packages/design-system/src/components/Links/Links.stories.jsx b/packages/design-system/src/components/Links/Links.stories.jsx
@@ -0,0 +1,27 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable react/no-multi-comp */
+import React from 'react';
+
+export default {
+  title: 'Typography/Links',
+  parameters: {
+    docs: {
+      source: {
+        type: 'dynamic',
+      },
+    },
+  },
+};
+
+export const Links = () => (
+  <>
+    <a href="#" className="ds-c-link ds-u-font-size--lg">
+      Link Text
+    </a>
+    <div className="ds-u-padding--1 ds-base--inverse">
+      <a href="#" className="ds-u-font-size--lg ds-c-link ds-c-link--inverse">
+        Link Text
+      </a>
+    </div>
+  </>
+);
diff --git a/packages/design-system/src/styles/base/_link.scss b/packages/design-system/src/styles/base/_link.scss
@@ -77,6 +77,7 @@ $link-underline-offset: auto !default;
   /* stylelint-enable selector-max-specificity */
 
   &:active {
+    background-color: transparent;
     color: $link-inverse-active-color;
     outline: 0 none;
   }