Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<KExternalLink> final fixes for icons and margins #143

Merged
merged 5 commits into from
Feb 19, 2021
Merged

<KExternalLink> final fixes for icons and margins #143

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9d41557
Corrects LTR-lang margin with icon
sairina Jan 5, 2021
e6823a0
Fixes icon directionality for LTR-lang URL in RTL-lang instance
sairina Jan 5, 2021
958054e
Fixes linting
sairina Jan 5, 2021
607fce9
Remove changing icon direction computed property
sairina Jan 6, 2021
ff2e6f6
Add comments and restores functionality for icon
sairina Feb 4, 2021
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
45 changes: 42 additions & 3 deletions lib/buttons-and-links/KExternalLink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,23 @@
@mouseenter="hovering = true"
@mouseleave="hovering = false"
>
<slot name="icon">
<KIcon
v-if="icon"
:icon="icon"
style="top: 4px;"
:color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
/>
</slot>
<span class="link-text" :style="spanStyle">{{ text }}</span>
<slot name="iconAfter">
<KIcon
v-if="iconAfter"
:icon="iconAfter"
style="top: 4px;"
:color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
/>
</slot>
<slot name="openInNewTab">
<KIcon
v-if="openInNewTab"
Expand Down Expand Up @@ -58,6 +74,20 @@
type: Boolean,
default: false,
},
/**
* If provided, shows a KIcon in front of the text
*/
icon: {
type: String,
required: false,
},
/**
* If provided, shows a KIcon after the text
*/
iconAfter: {
type: String,
required: false,
},
},
data() {
return {
Expand All @@ -66,22 +96,31 @@
},
computed: {
/**
* If link opens in new tab, add 8px margin between the icon and the text
* If link opens in new tab or if icon is provided, add 8px margin between the icon and the text
*/
spanStyle() {
let styles = {};
if (this.openInNewTab) {
if (this.openInNewTab || this.icon) {
if (this.isRtl) {
// If RTL-language, but English link, displays correct margins
styles['marginRight'] = '8px';
// Checks to see if link for new tab is in same dir as page lang
if (this.text !== this.href) {
styles['marginRight'] = '0px';
styles['marginLeft'] = '8px';
}
} else {
styles['marginLeft'] = '8px';
if (this.text === this.href) {
styles['marginRight'] = '8px';
} else {
styles['marginLeft'] = '8px';
}
}
}

if (this.iconAfter) {
styles['marginRight'] = '8px';
}
return { ...styles };
},
},
Expand Down