feat: add underline prop to hyperlink

openedx · Jun 11, 2021 · 4a504ef · 4a504ef
1 parent 3ae0e3f
commit 4a504ef
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 10 deletions.
diff --git a/scss/core/_typography.scss b/scss/core/_typography.scss
@@ -72,3 +72,27 @@ a.muted-link {
     }
   }
 }
+
+a.brand-link {
+  color: $brand-link-color;
+  text-decoration: $brand-link-decoration;
+
+  &:hover {
+    color: $brand-link-hover-color;
+    text-decoration: $brand-link-hover-decoration;
+  }
+
+  p > &[href]:not(.btn),
+  &.inline-link {
+    color: $brand-inline-link-color;
+    text-decoration: $brand-inline-link-decoration;
+    text-decoration-line: $brand-inline-link-decoration;
+    text-decoration-color: $brand-inline-link-decoration-color;
+    &:hover {
+      color: $brand-inline-link-hover-color;
+      text-decoration: $brand-inline-link-hover-decoration;
+      text-decoration-line: $brand-inline-link-hover-decoration;
+      text-decoration-color: $brand-inline-link-hover-decoration-color;
+    }
+  }
+}
diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss
@@ -418,6 +418,17 @@ $muted-inline-link-hover-color:                 darken($muted-inline-link-color,
 $muted-inline-link-hover-decoration:            underline !default;
 $muted-inline-link-hover-decoration-color:      rgba($muted-inline-link-hover-color, 1) !default;
 
+$brand-link-color:                              $brand-500 !default;
+$brand-link-decoration:                         none !default;
+$brand-link-hover-color:                        darken($brand-link-color, 15%) !default;
+$brand-link-hover-decoration:                   underline !default;
+$brand-inline-link-color:                       $brand-500 !default;
+$brand-inline-link-decoration:                  underline !default;
+$brand-inline-link-decoration-color:            rgba($brand-inline-link-color, .3) !default;
+$brand-inline-link-hover-color:                 darken($brand-inline-link-color, 15%) !default;
+$brand-inline-link-hover-decoration:            underline !default;
+$brand-inline-link-hover-decoration-color:      rgba($brand-inline-link-hover-color, 1) !default;
+
 // Darken percentage for links with `.text-*` class (e.g. `.text-success`)
 $emphasized-link-hover-darken-percentage: 15% !default;
 

diff --git a/src/Hyperlink/README.md b/src/Hyperlink/README.md
@@ -53,3 +53,39 @@ notes: |
   />
 </Hyperlink>
 ```
+
+### color variants
+
+```jsx live
+<div className="d-flex flex-column">
+    <Hyperlink destination="https://www.edx.org">
+      Default
+    </Hyperlink>
+
+    <Hyperlink variant="muted" destination="https://www.edx.org">
+      Muted
+    </Hyperlink>
+
+    <Hyperlink variant="brand" destination="https://www.edx.org">
+      Brand
+    </Hyperlink>
+</div>
+```
+
+### link variants
+
+```jsx live
+<div className="row">
+  <div className="col-2">
+    <Hyperlink destination="https://www.edx.org">
+      Standalone
+    </Hyperlink>
+  </div>
+
+  <div className="col-2">
+    <Hyperlink isInline destination="https://www.edx.org">
+      Inline
+    </Hyperlink>
+  </div>
+</div>
+```
diff --git a/src/Hyperlink/index.jsx b/src/Hyperlink/index.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import isRequiredIf from 'react-proptype-conditional-require';
 import Icon from '../Icon';
 import { Launch } from '../../icons';
@@ -14,6 +15,8 @@ function Hyperlink(props) {
     onClick,
     externalLinkAlternativeText,
     externalLinkTitle,
+    variant,
+    isInline,
     ...other
   } = props;
 
@@ -33,7 +36,13 @@ function Hyperlink(props) {
 
   return (
     <a
-      style={{ textDecoration: 'underline' }}
+      className={classNames(
+        `${variant}-link`,
+        {
+          'standalone-link': !isInline,
+          'inline-link': isInline,
+        },
+      )}
       href={destination}
       target={target}
       onClick={onClick}
@@ -48,6 +57,8 @@ Hyperlink.defaultProps = {
   onClick: () => {},
   externalLinkAlternativeText: 'Opens in a new window',
   externalLinkTitle: 'Opens in a new window',
+  variant: 'default',
+  isInline: false,
 };
 
 Hyperlink.propTypes = {
@@ -71,6 +82,10 @@ Hyperlink.propTypes = {
     PropTypes.string,
     props => props.target === '_blank',
   ),
+  /** type of hyperlink */
+  variant: PropTypes.oneOf(['default', 'muted', 'brand']),
+  /** specify the link style. By default it will be underlined. */
+  isInline: PropTypes.bool,
 };
 
 export default withDeprecatedProps(Hyperlink, 'Hyperlink', {

diff --git a/src/StatefulButton/__snapshots__/StatefulButtontest.test.jsx.snap b/src/StatefulButton/__snapshots__/StatefulButtontest.test.jsx.snap
@@ -13,7 +13,9 @@ exports[`StatefulButton renders basic usage 1`] = `
     <span
       className="d-flex align-items-center justify-content-center"
     >
-      <span>
+      <span
+        className=""
+      >
         Saved
       </span>
     </span>
@@ -53,7 +55,9 @@ exports[`StatefulButton renders basic usage 1`] = `
           </svg>
         </span>
       </span>
-      <span>
+      <span
+        className=""
+      >
         Saving
       </span>
     </span>
@@ -93,7 +97,9 @@ exports[`StatefulButton renders basic usage 1`] = `
           </svg>
         </span>
       </span>
-      <span>
+      <span
+        className=""
+      >
         Saved
       </span>
     </span>
@@ -123,7 +129,9 @@ Array [
           id="Icon1"
         />
       </span>
-      <span>
+      <span
+        className=""
+      >
         Download
       </span>
     </span>
@@ -148,7 +156,9 @@ Array [
           id="Icon2"
         />
       </span>
-      <span>
+      <span
+        className=""
+      >
         Downloading
       </span>
     </span>
@@ -173,7 +183,9 @@ Array [
           id="Icon3"
         />
       </span>
-      <span>
+      <span
+        className=""
+      >
         Downloaded
       </span>
     </span>
@@ -203,7 +215,9 @@ Array [
           id="Icon4"
         />
       </span>
-      <span>
+      <span
+        className=""
+      >
         Save (no changes)
       </span>
     </span>
@@ -228,7 +242,9 @@ Array [
           id="Icon5"
         />
       </span>
-      <span>
+      <span
+        className=""
+      >
         Save Changes
       </span>
     </span>

diff --git a/src/StatefulButton/index.jsx b/src/StatefulButton/index.jsx
@@ -96,7 +96,13 @@ function StatefulButton({
     >
       <span className="d-flex align-items-center justify-content-center">
         {icon && <span className="pgn__stateful-btn-icon">{icon}</span>}
-        <span>{label}</span>
+        <span
+          className={classNames(
+            { 'sr-only': !label },
+          )}
+        >
+          {label || state}
+        </span>
       </span>
     </Button>
   );