diff --git a/src/components.d.ts b/src/components.d.ts
index 3ebb55af7cf6b5e971b08850ba5cdf30859bdf30..869045a29c3693502b8cf890e2ce0b8e030b7d36 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 a7ae872bb2fcdcac38345b470c6fef30c94c799c..040d4ccb7ae70a535475c348525d6516f3d00ad0 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 ca6a88240d0d4b2349b5aecf53998da0a6de3713..dc04d4ba38a713947a65d305e7f607ae70e8975e 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 1018e239b836ddbc7b41b45008c2e842dfdb95c5..027848a749be607d22a7ac5b8dd3e6fc1634dbe4 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 0c0a5a0967b4586d91ccbe4d70fd1e52b9f3fb26..ad636c85dfdc7bd3dee3cf56a6a3caa7383d653f 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 6630323e116e1a579ec3793de18543a99c408caf..afaeffcb05a49c9b6525e3c9960a94f5e7d70baf 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 d84feba7e08fcb8ad484d676b32de723c1d6be8a..66affdf0d734d5d75c1c631b4af81efcd82fff9f 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 2acaccfedaf554edb05f007ab1982974dd8feeda..3c101a14d60ae17d391a64bae47f772c495f659f 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 bb5939b466bcae4ef4b385ad018343517a5fbc92..92c0028cb5b9165c7d6d11f6dbc9fdcf7cbff6c6 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 bffbeb7a1b7fac2886241c3424707dfe6e0b0721..0b1c2ec4d193f7842a645a6dddf0f790a3d69182 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 55f7dc915120f8fad313726ebd5bcf88d44b004f..81e79d1039ea706a1c0f1f36d25976232ed873af 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 fc29a90fedb45e0c2cbe4f31cb282cdad17d757a..185cf02806b67454160e7388c0e02e00765b5cbf 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}>