From 4a504eff3105bc99820f82146fa5724e9a1428b7 Mon Sep 17 00:00:00 2001 From: Zainab Amir Date: Tue, 8 Jun 2021 16:32:00 +0500 Subject: [PATCH] feat: add underline prop to hyperlink --- scss/core/_typography.scss | 24 +++++++++++++ scss/core/_variables.scss | 11 ++++++ src/Hyperlink/README.md | 36 +++++++++++++++++++ src/Hyperlink/index.jsx | 17 ++++++++- .../StatefulButtontest.test.jsx.snap | 32 ++++++++++++----- src/StatefulButton/index.jsx | 8 ++++- 6 files changed, 118 insertions(+), 10 deletions(-) diff --git a/scss/core/_typography.scss b/scss/core/_typography.scss index 06ce80f839..ee1ee135ab 100644 --- 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 index 7c67b258f1..cca672522b 100644 --- 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 index 57bf86d8b0..359aad5f22 100644 --- a/src/Hyperlink/README.md +++ b/src/Hyperlink/README.md @@ -53,3 +53,39 @@ notes: | /> ``` + +### color variants + +```jsx live +
+ + Default + + + + Muted + + + + Brand + +
+``` + +### link variants + +```jsx live +
+
+ + Standalone + +
+ +
+ + Inline + +
+
+``` \ No newline at end of file diff --git a/src/Hyperlink/index.jsx b/src/Hyperlink/index.jsx index fdfd79a528..81c21cde42 100644 --- 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 ( {}, 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 index 173cc09969..8526a5f591 100644 --- 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`] = ` - + Saved @@ -53,7 +55,9 @@ exports[`StatefulButton renders basic usage 1`] = ` - + Saving @@ -93,7 +97,9 @@ exports[`StatefulButton renders basic usage 1`] = ` - + Saved @@ -123,7 +129,9 @@ Array [ id="Icon1" /> - + Download @@ -148,7 +156,9 @@ Array [ id="Icon2" /> - + Downloading @@ -173,7 +183,9 @@ Array [ id="Icon3" /> - + Downloaded @@ -203,7 +215,9 @@ Array [ id="Icon4" /> - + Save (no changes) @@ -228,7 +242,9 @@ Array [ id="Icon5" /> - + Save Changes diff --git a/src/StatefulButton/index.jsx b/src/StatefulButton/index.jsx index 6add97194e..c0a6e6e43e 100644 --- a/src/StatefulButton/index.jsx +++ b/src/StatefulButton/index.jsx @@ -96,7 +96,13 @@ function StatefulButton({ > {icon && {icon}} - {label} + + {label || state} + );