From 3ec53777bb0dc03aafaeaa66e523c1425ffde757 Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <>
Date: Mon, 9 Nov 2020 23:59:53 +0200
Subject: [PATCH] is external, target attr for link fields
---
src/components.d.ts | 6 ++++++
src/components/hy-banner/hy-banner.tsx | 3 ++-
src/components/hy-banner/readme.md | 17 +++++++++--------
src/components/hy-hero/hy-hero.tsx | 3 ++-
src/components/hy-hero/readme.md | 1 +
.../hy-introduction/hy-introduction.tsx | 5 ++++-
src/components/hy-introduction/readme.md | 1 +
src/components/hy-link-list/hy-link-list.tsx | 2 +-
src/components/hy-shortcuts/hy-shortcuts.tsx | 4 +++-
src/components/link-box-list/link-box-list.tsx | 1 +
src/components/link-box/link-box.tsx | 7 +------
src/components/link/link.tsx | 3 ++-
12 files changed, 33 insertions(+), 20 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 3ebb55af..869045a2 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -68,6 +68,7 @@ export namespace Components {
}
interface HyBanner {
headerstyle: string;
+ isExternal: boolean;
scLabel?: string;
textDescription: string;
textTitle?: string;
@@ -300,6 +301,7 @@ export namespace Components {
headerstyle: string;
heading: string;
image: string;
+ isExternal: boolean;
scLabel?: string;
url: string;
urlTitle: string;
@@ -320,6 +322,7 @@ export namespace Components {
interface HyIntroduction {
headerstyle: string;
imageUrl?: string;
+ isExternal: boolean;
reversed: boolean;
scLabel?: string;
textDescription: string;
@@ -998,6 +1001,7 @@ declare namespace LocalJSX {
}
interface HyBanner {
headerstyle?: string;
+ isExternal?: boolean;
scLabel?: string;
textDescription?: string;
textTitle?: string;
@@ -1230,6 +1234,7 @@ declare namespace LocalJSX {
headerstyle?: string;
heading?: string;
image?: string;
+ isExternal?: boolean;
scLabel?: string;
url?: string;
urlTitle?: string;
@@ -1250,6 +1255,7 @@ declare namespace LocalJSX {
interface HyIntroduction {
headerstyle?: string;
imageUrl?: string;
+ isExternal?: boolean;
reversed?: boolean;
scLabel?: string;
textDescription?: string;
diff --git a/src/components/hy-banner/hy-banner.tsx b/src/components/hy-banner/hy-banner.tsx
index a7ae872b..040d4ccb 100644
--- a/src/components/hy-banner/hy-banner.tsx
+++ b/src/components/hy-banner/hy-banner.tsx
@@ -13,6 +13,7 @@ export class HyBanner {
@Prop() scLabel?: string;
@Prop() urlTitle?: string;
@Prop() headerstyle: string = 'common';
+ @Prop() isExternal: boolean = false;
@Element() el: HTMLElement;
componentDidLoad() {
@@ -43,7 +44,7 @@ export class HyBanner {
link-content={this.urlTitle}
sc-label={this.scLabel}
url={this.url}
- is-external="false"
+ is-external={this.isExternal}
variant={variant}
/>
</div>
diff --git a/src/components/hy-banner/readme.md b/src/components/hy-banner/readme.md
index ca6a8824..dc04d4ba 100644
--- a/src/components/hy-banner/readme.md
+++ b/src/components/hy-banner/readme.md
@@ -4,14 +4,15 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ----------------- | ------------------ | ----------- | -------- | ----------- |
-| `headerstyle` | `headerstyle` | | `string` | `'common'` |
-| `scLabel` | `sc-label` | | `string` | `undefined` |
-| `textDescription` | `text-description` | | `string` | `null` |
-| `textTitle` | `text-title` | | `string` | `undefined` |
-| `url` | `url` | | `string` | `undefined` |
-| `urlTitle` | `url-title` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ----------------- | ------------------ | ----------- | --------- | ----------- |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
+| `isExternal` | `is-external` | | `boolean` | `false` |
+| `scLabel` | `sc-label` | | `string` | `undefined` |
+| `textDescription` | `text-description` | | `string` | `null` |
+| `textTitle` | `text-title` | | `string` | `undefined` |
+| `url` | `url` | | `string` | `undefined` |
+| `urlTitle` | `url-title` | | `string` | `undefined` |
## Dependencies
diff --git a/src/components/hy-hero/hy-hero.tsx b/src/components/hy-hero/hy-hero.tsx
index 1018e239..027848a7 100644
--- a/src/components/hy-hero/hy-hero.tsx
+++ b/src/components/hy-hero/hy-hero.tsx
@@ -17,6 +17,7 @@ export class HyHero {
@Prop() url: string;
@Prop() urlTitle: string;
@Prop() scLabel?: string;
+ @Prop() isExternal: boolean = false;
@Prop() headerstyle: string = 'common';
componentDidLoad() {
@@ -116,7 +117,7 @@ export class HyHero {
link-content={this.urlTitle}
sc-label={this.scLabel}
url={this.url}
- is-external="false"
+ is-external={this.isExternal}
variant={variant}
/>
</div>
diff --git a/src/components/hy-hero/readme.md b/src/components/hy-hero/readme.md
index 0c0a5a09..ad636c85 100644
--- a/src/components/hy-hero/readme.md
+++ b/src/components/hy-hero/readme.md
@@ -11,6 +11,7 @@
| `headerstyle` | `headerstyle` | | `string` | `'common'` |
| `heading` | `heading` | | `string` | `undefined` |
| `image` | `image` | | `string` | `undefined` |
+| `isExternal` | `is-external` | | `boolean` | `false` |
| `scLabel` | `sc-label` | | `string` | `undefined` |
| `url` | `url` | | `string` | `undefined` |
| `urlTitle` | `url-title` | | `string` | `undefined` |
diff --git a/src/components/hy-introduction/hy-introduction.tsx b/src/components/hy-introduction/hy-introduction.tsx
index 6630323e..afaeffcb 100644
--- a/src/components/hy-introduction/hy-introduction.tsx
+++ b/src/components/hy-introduction/hy-introduction.tsx
@@ -15,6 +15,7 @@ export class HyIntroduction {
@Prop() scLabel?: string;
@Prop() urlTitle?: string;
@Prop() imageUrl?: string;
+ @Prop() isExternal: boolean = false;
@Prop() headerstyle: string = 'common';
@Element() el: HTMLElement;
@@ -43,6 +44,8 @@ export class HyIntroduction {
this.imageUrl ? 'hy-introduction__content--with-image' : 'hy-introduction__content--without-image',
].join(' ');
+ const target = this.isExternal ? '_blank' : '_self';
+
return (
<Host>
<div class={classAttributes}>
@@ -59,7 +62,7 @@ export class HyIntroduction {
<div class="hy-introduction__description">{this.textDescription}</div>
{this.url && (
<div class="hy-introduction__link__container">
- <a class="hy-introduction__link" href={this.url} aria-label={this.scLabel}>
+ <a class="hy-introduction__link" href={this.url} aria-label={this.scLabel} target={target}>
{this.urlTitle}
<span class="hy-introduction__link__icon">
<hy-icon icon={'hy-icon-arrow-right'} size={24} />
diff --git a/src/components/hy-introduction/readme.md b/src/components/hy-introduction/readme.md
index d84feba7..66affdf0 100644
--- a/src/components/hy-introduction/readme.md
+++ b/src/components/hy-introduction/readme.md
@@ -8,6 +8,7 @@
| ----------------- | ------------------ | ----------- | ------------------- | ----------- |
| `headerstyle` | `headerstyle` | | `string` | `'common'` |
| `imageUrl` | `image-url` | | `string` | `undefined` |
+| `isExternal` | `is-external` | | `boolean` | `false` |
| `reversed` | `reversed` | | `boolean` | `false` |
| `scLabel` | `sc-label` | | `string` | `undefined` |
| `textDescription` | `text-description` | | `string` | `null` |
diff --git a/src/components/hy-link-list/hy-link-list.tsx b/src/components/hy-link-list/hy-link-list.tsx
index 2acaccfe..3c101a14 100644
--- a/src/components/hy-link-list/hy-link-list.tsx
+++ b/src/components/hy-link-list/hy-link-list.tsx
@@ -2,7 +2,7 @@ export interface CtaLinkValue {
heading: string;
ariaLabel: string;
url: string;
- isExternal: string;
+ isExternal: boolean;
}
import {Component, ComponentInterface, h, Prop, Watch} from '@stencil/core';
diff --git a/src/components/hy-shortcuts/hy-shortcuts.tsx b/src/components/hy-shortcuts/hy-shortcuts.tsx
index bb5939b4..92c0028c 100644
--- a/src/components/hy-shortcuts/hy-shortcuts.tsx
+++ b/src/components/hy-shortcuts/hy-shortcuts.tsx
@@ -1,6 +1,7 @@
export interface ShortcutLinkValue {
heading: string;
url: string;
+ isExternal: boolean;
}
import {Component, ComponentInterface, h, Host, Prop, Watch} from '@stencil/core';
@@ -30,7 +31,6 @@ export class HyShortcuts implements ComponentInterface {
render() {
const classAttributes = ['hy-shortcuts'].join(' ');
- const target = '_self';
const textClassAttributes = ['text'].join(' ');
const iconClassAttributes = ['link-icon'].join(' ');
@@ -53,6 +53,8 @@ export class HyShortcuts implements ComponentInterface {
isFirstLine = index == 0 ? 'first' : '';
}
let classLinkWrapper = classItem.concat(' ', isFirstLine);
+ let target = x.isExternal ? '_blank' : '_self';
+
return (
<div class={classLinkWrapper}>
<a aria-label={x.heading} class="shortcut-link" href={x.url} target={target}>
diff --git a/src/components/link-box-list/link-box-list.tsx b/src/components/link-box-list/link-box-list.tsx
index bffbeb7a..0b1c2ec4 100644
--- a/src/components/link-box-list/link-box-list.tsx
+++ b/src/components/link-box-list/link-box-list.tsx
@@ -64,6 +64,7 @@ export class LinkBoxList implements ComponentInterface {
<Host>
<div class={classAttributes}>
{this._dataItems.map((x) => {
+ //var target = x.isExternal ? "true" : "false";
return (
<hy-link-box
class={classItemAttributes}
diff --git a/src/components/link-box/link-box.tsx b/src/components/link-box/link-box.tsx
index 55f7dc91..81e79d10 100644
--- a/src/components/link-box/link-box.tsx
+++ b/src/components/link-box/link-box.tsx
@@ -39,6 +39,7 @@ export class LinkBox implements ComponentInterface {
const classTextContainer = ['hy-link-box__text-container', this.imageUrl ? 'hy-link-box--with-image' : null].join(
' '
);
+
const target = this.isExternal ? '_blank' : '_self';
const aspectRatioWidth = 16;
@@ -68,9 +69,3 @@ export class LinkBox implements ComponentInterface {
];
}
}
-
-/*
-<div class="hy-link-box__image-container" style={aspectRatio}>
- {this.imageUrl && <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />}
- </div>
-* */
diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx
index fc29a90f..185cf028 100644
--- a/src/components/link/link.tsx
+++ b/src/components/link/link.tsx
@@ -4,7 +4,7 @@ import {LinkVariants} from '../../utils/utils';
@Component({
tag: 'hy-link',
styleUrl: 'link.scss',
- shadow: true
+ shadow: true,
})
export class Link {
@Prop() variant: LinkVariants = LinkVariants.default;
@@ -16,6 +16,7 @@ export class Link {
render() {
const classAttributes = ['hy-link', this.variant];
const target = this.isExternal ? '_blank' : '_self';
+
return (
<Host>
<a aria-label={this.scLabel} class={classAttributes.join(' ')} href={this.url} target={target}>
--
GitLab