Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

[terra-hyperlink] Switched themeable icons provided by CSS to imported terra-icon component. #2666

Merged
merged 15 commits into from
Nov 8, 2019
Merged

[terra-hyperlink] Switched themeable icons provided by CSS to imported terra-icon component. #2666

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
4e2e3af
CSS ➡️ JSX
Sep 27, 2019
0e23029
Add visited+focus state.
Sep 27, 2019
568c4ff
Update wdio reference screenshot.
Sep 27, 2019
94ba6d4
c h a n g e l o g
Sep 27, 2019
0a19b16
ugh
Sep 27, 2019
f430009
Lint ¯\_(ツ)_/¯
Sep 30, 2019
be3df9e
Jest
Sep 30, 2019
b21cfe1
Merge branch 'master' into css-to-jsx
nramamurth Oct 3, 2019
cb74ebc
Merge branch 'master' into css-to-jsx
Oct 15, 2019
bc8da28
Address Neil's comments.
Oct 15, 2019
8f37b99
Removed snuck-in <Fragment />.
Oct 15, 2019
fe59fc2
Removed CSS variables' information from CHANGELOG.
Oct 25, 2019
8a86d51
Merge branch 'master' into css-to-jsx
StephenEsser Oct 25, 2019
76bec23
Merge branch 'master' into css-to-jsx
StephenEsser Oct 28, 2019
4d06ae7
Merge branch 'master' into css-to-jsx
StephenEsser Nov 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions packages/terra-hyperlink/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,25 @@ ChangeLog
Unreleased
----------

### Breaking Changes
* Removed the following themeable variables:
* `--terra-hyperlink-external-after-background-image`
* `--terra-hyperlink-external-disabled-after-background-image`
* `--terra-hyperlink-image-after-background-image`
* `--terra-hyperlink-image-disabled-after-background-image`
* `--terra-hyperlink-video-after-background-image`
* `--terra-hyperlink-video-disabled-after-background-image`
* `--terra-hyperlink-audio-after-background-image`
* `--terra-hyperlink-document-after-background-image`
* `--terra-hyperlink-audio-disabled-after-background-image`
* `--terra-hyperlink-document-disabled-after-background-image`

### Added
* Added `--terra-hyperlink-visited-focus-color` themeable variable.

### Changed
* Switched themeable icons provided by CSS to imported `terra-icon` component.

2.20.0 - (September 19, 2019)
------------------
### Changed
Expand Down
1 change: 1 addition & 0 deletions packages/terra-hyperlink/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"keycode-js": "^2.0.1",
"prop-types": "^15.5.8",
"terra-doc-template": "^2.19.0",
"terra-icon":"^3.21.0",
"terra-mixins": "^1.33.0"
},
"scripts": {
Expand Down
53 changes: 39 additions & 14 deletions packages/terra-hyperlink/src/Hyperlink.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import IconExternalLink from 'terra-icon/lib/icon/IconExternalLink';
import IconAudio from 'terra-icon/lib/icon/IconAudio';
import IconVideoCamera from 'terra-icon/lib/icon/IconVideoCamera';
import IconImage from 'terra-icon/lib/icon/IconImage';
import IconDocuments from 'terra-icon/lib/icon/IconDocuments';
import classNames from 'classnames/bind';
import * as KeyCode from 'keycode-js';
import styles from './Hyperlink.module.scss';
Expand All @@ -15,6 +20,23 @@ const variants = {
DOCUMENT: 'document',
};

const getHyperlinkIcon = (variant) => {
switch (variant) {
case variants.AUDIO:
return (<span className={cx('icon')}><IconAudio /></span>);
case variants.DOCUMENT:
return (<span className={cx('icon')}><IconDocuments /></span>);
case variants.EXTERNAL:
return (<span className={cx('icon')}><IconExternalLink /></span>);
case variants.IMAGE:
return (<span className={cx('icon')}><IconImage /></span>);
case variants.VIDEO:
return (<span className={cx('icon')}><IconVideoCamera /></span>);
default:
return null;
}
};

const propTypes = {
/**
* The content to display inside link.
Expand Down Expand Up @@ -143,20 +165,23 @@ class Hyperlink extends React.Component {
}

return (
<ComponentType
{...customProps}
className={hyperlinkClasses}
onKeyDown={this.handleKeyDown}
onKeyUp={this.handleKeyUp}
onBlur={this.handleOnBlur}
onClick={onClick}
onFocus={onFocus}
href={isDisabled ? null : href}
target={target}
rel={rel}
>
{children}
</ComponentType>
<React.Fragment>
<ComponentType
{...customProps}
className={hyperlinkClasses}
onKeyDown={this.handleKeyDown}
onKeyUp={this.handleKeyUp}
onBlur={this.handleOnBlur}
onClick={onClick}
onFocus={onFocus}
href={isDisabled ? null : href}
target={target}
rel={rel}
>
{children}
{getHyperlinkIcon(variant)}
</ComponentType>
</React.Fragment>
);
}
}
Expand Down
86 changes: 7 additions & 79 deletions packages/terra-hyperlink/src/Hyperlink.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,12 @@
outline: none;
text-decoration: var(--terra-hyperlink-text-decoration, none);

&:visited,
&.is-visited {
&:visited {
color: var(--terra-hyperlink-visited-color, #0059a8);

&:focus {
color: var(--terra-hyperlink-visited-focus-color, #001f67);
}
}

&:hover,
Expand Down Expand Up @@ -47,82 +50,7 @@
}
}

// Icons
.external,
.image,
.video,
.audio,
.document {
&::after {
background-repeat: no-repeat;
background-size: cover;
content: '';
display: inline-block;
height: 1em;
margin-left: 0.5em;
position: relative;
top: 0.15em;
width: 1em;
}
}

.external {
&::after {
background-image: var(--terra-hyperlink-external-after-background-image, inline-svg('<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="#0059a8" d="M39 25h6v23H0V3h23v6H6v33h33V25zm-21.4 9.6l24-24L48 17V0H31l6.4 6.4-24 24 4.2 4.2z"></path></svg>'));
}
}

.external.is-disabled {
&::after {
background-image: var(--terra-hyperlink-external-disabled-after-background-image, inline-svg('<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(28, 31, 33, 0.2)" d="M39 25h6v23H0V3h23v6H6v33h33V25zm-21.4 9.6l24-24L48 17V0H31l6.4 6.4-24 24 4.2 4.2z"></path></svg>'));
}
}

.image {
&::after {
background-image: var(--terra-hyperlink-image-after-background-image, inline-svg('<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="#0059a8" d="M6 36v-6.5l8.7-8.7 11.6 11.6 8-8L42 32v4H6zm24.5-24c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5 3.5-1.6 3.5-3.5-1.6-3.5-3.5-3.5zM45 9v30H3V9h42m3-3H0v36h48V6z"></path></svg>'));
}
}

.image.is-disabled {
&::after {
background-image: var(--terra-hyperlink-image-disabled-after-background-image, inline-svg('<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(28, 31, 33, 0.2)" d="M6 36v-6.5l8.7-8.7 11.6 11.6 8-8L42 32v4H6zm24.5-24c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5 3.5-1.6 3.5-3.5-1.6-3.5-3.5-3.5zM45 9v30H3V9h42m3-3H0v36h48V6z"></path></svg>'));
}
}

.video {
&::after {
background-image: var(--terra-hyperlink-video-after-background-image, inline-svg('<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="#0059a8" d="M48 10.9v26.3l-10-10v-6.3l10-10zm-13 .4C35 10 34 9 32.7 9H2.3C1 9 0 10 0 11.3v25.4C0 38 1 39 2.3 39h30.4c1.3 0 2.3-1 2.3-2.3V11.3z"></path></svg>'));
}
}

.video.is-disabled {
&::after {
background-image: var(--terra-hyperlink-video-disabled-after-background-image, inline-svg('<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(28, 31, 33, 0.2)" d="M48 10.9v26.3l-10-10v-6.3l10-10zm-13 .4C35 10 34 9 32.7 9H2.3C1 9 0 10 0 11.3v25.4C0 38 1 39 2.3 39h30.4c1.3 0 2.3-1 2.3-2.3V11.3z"></path></svg>'));
}
}

.audio {
&::after {
background-image: var(--terra-hyperlink-audio-after-background-image, inline-svg('<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="#0059a8" d="M29 0v48L15 34H0V14h15L29 0zm6.3 12.7l-2.1 2.1c2.3 2.3 3.8 5.6 3.8 9.2 0 3.6-1.5 6.8-3.8 9.2l2.1 2.1C38.2 32.4 40 28.4 40 24s-1.8-8.4-4.7-11.3zM41 7l-2.1 2.1C42.6 13 45 18.2 45 24c0 5.8-2.4 11-6.2 14.8L41 41c4.3-4.3 7-10.3 7-17s-2.7-12.6-7-17z"></path></svg>'));
}
}

.audio.is-disabled {
&::after {
background-image: var(--terra-hyperlink-audio-disabled-after-background-image, inline-svg('<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(28, 31, 33, 0.2)" d="M29 0v48L15 34H0V14h15L29 0zm6.3 12.7l-2.1 2.1c2.3 2.3 3.8 5.6 3.8 9.2 0 3.6-1.5 6.8-3.8 9.2l2.1 2.1C38.2 32.4 40 28.4 40 24s-1.8-8.4-4.7-11.3zM41 7l-2.1 2.1C42.6 13 45 18.2 45 24c0 5.8-2.4 11-6.2 14.8L41 41c4.3-4.3 7-10.3 7-17s-2.7-12.6-7-17z"></path></svg>'));
}
}

.document {
&::after {
background-image: var(--terra-hyperlink-document-after-background-image, inline-svg('<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="#0059a8" d="M41.9 9.9l-8.8-8.8A3.12 3.12 0 0 0 30.6 0H14.2A2.56 2.56 0 0 0 12 2v5H7a2.57 2.57 0 0 0-2 2v37a2.24 2.24 0 0 0 2 2h26a2.07 2.07 0 0 0 2-2v-5h6.1a2.06 2.06 0 0 0 1.9-2V12a2.92 2.92 0 0 0-1.1-2.1zM31 3.2l9 8.8h-9zM32 45H8V10h4v29a2.25 2.25 0 0 0 2.1 2H32zm8-7H15V3h13v9a2.77 2.77 0 0 0 3.1 3H40z"></path></svg>'));
}
}

.document.is-disabled {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are the disabled states appropriately handled with introducing terra-icons and inheriting certain dithering and opacity? Previously the disabled states had different icons.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd think that the current change is expected, going by @neilpfeiffer's comment on the issue.

This will allow the icons to be able to take the current-color of the text for all states (hover, active, visited, inactive, etc.)

Neil, I am sorry if I have misquoted but could you please confirm it?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is what he's saying. And that's working.

&::after {
background-image: var(--terra-hyperlink-document-disabled-after-background-image, inline-svg('<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(28, 31, 33, 0.2)" d="M41.9 9.9l-8.8-8.8A3.12 3.12 0 0 0 30.6 0H14.2A2.56 2.56 0 0 0 12 2v5H7a2.57 2.57 0 0 0-2 2v37a2.24 2.24 0 0 0 2 2h26a2.07 2.07 0 0 0 2-2v-5h6.1a2.06 2.06 0 0 0 1.9-2V12a2.92 2.92 0 0 0-1.1-2.1zM31 3.2l9 8.8h-9zM32 45H8V10h4v29a2.25 2.25 0 0 0 2.1 2H32zm8-7H15V3h13v9a2.77 2.77 0 0 0 3.1 3H40z"></path></svg>'));
}
.icon {
margin-left: 0.5em;
}
}
103 changes: 103 additions & 0 deletions packages/terra-hyperlink/tests/jest/__snapshots__/Hyperlink.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,23 @@ exports[`Hyperlink should render a audio hyperlink 1`] = `
href="https://www.cerner.com"
>
Audio hyperlink
<span
class="icon"
>
<svg
aria-hidden="true"
class="tui-Icon icon"
focusable="false"
height="1em"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M29 0v48L15 34H0V14h15L29 0zm6.3 12.7l-2.1 2.1c2.3 2.3 3.8 5.6 3.8 9.2 0 3.6-1.5 6.8-3.8 9.2l2.1 2.1C38.2 32.4 40 28.4 40 24s-1.8-8.4-4.7-11.3zM41 7l-2.1 2.1C42.6 13 45 18.2 45 24c0 5.8-2.4 11-6.2 14.8L41 41c4.3-4.3 7-10.3 7-17s-2.7-12.6-7-17z"
/>
</svg>
</span>
</a>
`;

Expand All @@ -32,6 +49,24 @@ exports[`Hyperlink should render a document hyperlink 1`] = `
href="https://www.cerner.com"
>
Document hyperlink
<span
class="icon"
>
<svg
aria-hidden="true"
class="tui-Icon icon"
data-name="Layer 1"
focusable="false"
height="1em"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M41.9 9.9l-8.8-8.8A3.12 3.12 0 0030.6 0H14.2A2.56 2.56 0 0012 2v5H7a2.57 2.57 0 00-2 2v37a2.24 2.24 0 002 2h26a2.07 2.07 0 002-2v-5h6.1a2.06 2.06 0 001.9-2V12a2.92 2.92 0 00-1.1-2.1zM31 3.2l9 8.8h-9zM32 45H8V10h4v29a2.25 2.25 0 002.1 2H32zm8-7H15V3h13v9a2.77 2.77 0 003.1 3H40z"
/>
</svg>
</span>
</a>
`;

Expand All @@ -43,6 +78,23 @@ exports[`Hyperlink should render a external hyperlink 1`] = `
target="_blank"
>
External hyperlink
<span
class="icon"
>
<svg
aria-hidden="true"
class="tui-Icon icon"
focusable="false"
height="1em"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M39 25h6v23H0V3h23v6H6v33h33V25zm-21.4 9.6l24-24L48 17V0H31l6.4 6.4-24 24 4.2 4.2z"
/>
</svg>
</span>
</a>
`;

Expand All @@ -52,6 +104,23 @@ exports[`Hyperlink should render a image hyperlink 1`] = `
href="https://www.cerner.com"
>
Image hyperlink
<span
class="icon"
>
<svg
aria-hidden="true"
class="tui-Icon icon is-bidi"
focusable="false"
height="1em"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 36v-6.5l8.7-8.7 11.6 11.6 8-8L42 32v4H6zm24.5-24c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5 3.5-1.6 3.5-3.5-1.6-3.5-3.5-3.5zM45 9v30H3V9h42m3-3H0v36h48V6z"
/>
</svg>
</span>
</a>
`;

Expand All @@ -70,6 +139,23 @@ exports[`Hyperlink should render a video hyperlink 1`] = `
href="https://www.cerner.com"
>
Video hyperlink
<span
class="icon"
>
<svg
aria-hidden="true"
class="tui-Icon icon is-bidi"
focusable="false"
height="1em"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M48 10.9v26.3l-10-10v-6.3l10-10zm-13 .4C35 10 34 9 32.7 9H2.3C1 9 0 10 0 11.3v25.4C0 38 1 39 2.3 39h30.4c1.3 0 2.3-1 2.3-2.3V11.3z"
/>
</svg>
</span>
</a>
`;

Expand All @@ -92,5 +178,22 @@ exports[`Hyperlink should render with custom props with external variant 1`] = `
target="_parent"
>
Custom target and rel props external hyperlink
<span
class="icon"
>
<svg
aria-hidden="true"
class="tui-Icon icon"
focusable="false"
height="1em"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M39 25h6v23H0V3h23v6H6v33h33V25zm-21.4 9.6l24-24L48 17V0H31l6.4 6.4-24 24 4.2 4.2z"
/>
</svg>
</span>
</a>
`;
Binary file modified .../wdio/__snapshots__/reference/en/chrome_tiny/hyperlink-spec/States[default].png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.