fix(link): remove visited styles by default (#5239)

carbon-design-system · Feb 3, 2020 · 3c6bff6 · 3c6bff6
1 parent af33d29
commit 3c6bff6
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 6 deletions.
diff --git a/packages/components/src/components/link/_link.scss b/packages/components/src/components/link/_link.scss
@@ -53,11 +53,11 @@
     }
 
     &:visited {
-      color: $visited-link;
+      color: $link-01;
     }
 
     &:visited:hover {
-      color: $hover-primary-text;
+      color: $link-01;
     }
   }
 
@@ -70,6 +70,14 @@
     cursor: not-allowed;
   }
 
+  .#{$prefix}--link.#{$prefix}--link--visited:visited {
+    color: $visited-link;
+  }
+
+  .#{$prefix}--link.#{$prefix}--link--visited:visited:hover {
+    color: $hover-primary-text;
+  }
+
   .#{$prefix}--link.#{$prefix}--link--inline {
     text-decoration: underline;
 

diff --git a/packages/components/src/components/link/link.hbs b/packages/components/src/components/link/link.hbs
@@ -5,9 +5,14 @@
   LICENSE file in the root directory of this source tree.
 -->
 
-<a href="#" class="{{@root.prefix}}--link{{#if inline}} {{@root.prefix}}--link--inline{{/if}}">Link</a>
-<a class="{{@root.prefix}}--link{{#if inline}} {{@root.prefix}}--link--inline{{/if}}" aria-disabled="true">Placeholder link</a>
+<a href="#"
+  class="{{@root.prefix}}--link{{#if inline}} {{@root.prefix}}--link--inline{{/if}}{{#if visited}} {{@root.prefix}}--link--inline{{/if}}">Link</a>
+<a href="http://www.google.com"
+  class="{{@root.prefix}}--link {{@root.prefix}}--link--visited {{#if inline}} {{@root.prefix}}--link--inline{{/if}}">Link</a>
+<a class="{{@root.prefix}}--link{{#if inline}} {{@root.prefix}}--link--inline{{/if}}" aria-disabled="true">Placeholder
+  link</a>
 <p class="{{@root.prefix}}--link--disabled{{#if inline}} {{@root.prefix}}--link--inline{{/if}}">Disabled Link</p>
 <div style="width:200px">
-  <a href="#" class="{{@root.prefix}}--link{{#if inline}} {{@root.prefix}}--link--inline{{/if}}">Text wrap example for hover, focus, and active state testing.</a>
+  <a href="#" class="{{@root.prefix}}--link{{#if inline}} {{@root.prefix}}--link--inline{{/if}}">Text wrap example for
+    hover, focus, and active state testing.</a>
 </div>
diff --git a/packages/react/src/components/Link/Link-story.js b/packages/react/src/components/Link/Link-story.js
@@ -17,6 +17,7 @@ const props = () => ({
   className: 'some-class',
   href: text('The link href (href)', '#'),
   inline: boolean('Use the in-line variant (inline)', false),
+  visited: boolean('Allow visited styles', false),
   onClick: (handler => evt => {
     evt.preventDefault(); // Prevent link from being followed for demo purpose
     handler(evt);

diff --git a/packages/react/src/components/Link/Link.js b/packages/react/src/components/Link/Link.js
@@ -12,10 +12,19 @@ import { settings } from 'carbon-components';
 
 const { prefix } = settings;
 
-const Link = ({ children, className, href, disabled, inline, ...other }) => {
+const Link = ({
+  children,
+  className,
+  href,
+  disabled,
+  inline,
+  visited,
+  ...other
+}) => {
   const classNames = classnames(`${prefix}--link`, className, {
     [`${prefix}--link--disabled`]: disabled,
     [`${prefix}--link--inline`]: inline,
+    [`${prefix}--link--visited`]: visited,
   });
   const Tag = disabled ? 'p' : 'a';
   return (
@@ -50,6 +59,11 @@ Link.propTypes = {
    * Specify whether you want the inline version of this control
    */
   inline: PropTypes.bool,
+
+  /**
+   * Specify whether you want the link to receive visited styles after the link has been clicked
+   */
+  visited: PropTypes.bool,
 };
 
 export default Link;