diff --git a/src/components.d.ts b/src/components.d.ts
index 3ebb55af7cf6b5e971b08850ba5cdf30859bdf30..9ca955009c3351ed10f7daa961a30514b799282a 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;
@@ -363,6 +366,7 @@ export namespace Components {
imageAlt: string;
imageUrl: string;
isExternal: boolean;
+ scLabel?: string;
textDescription: string;
textTitle?: string;
url?: string;
@@ -998,6 +1002,7 @@ declare namespace LocalJSX {
}
interface HyBanner {
headerstyle?: string;
+ isExternal?: boolean;
scLabel?: string;
textDescription?: string;
textTitle?: string;
@@ -1230,6 +1235,7 @@ declare namespace LocalJSX {
headerstyle?: string;
heading?: string;
image?: string;
+ isExternal?: boolean;
scLabel?: string;
url?: string;
urlTitle?: string;
@@ -1250,6 +1256,7 @@ declare namespace LocalJSX {
interface HyIntroduction {
headerstyle?: string;
imageUrl?: string;
+ isExternal?: boolean;
reversed?: boolean;
scLabel?: string;
textDescription?: string;
@@ -1293,6 +1300,7 @@ declare namespace LocalJSX {
imageAlt?: string;
imageUrl?: string;
isExternal?: boolean;
+ scLabel?: string;
textDescription?: string;
textTitle?: string;
url?: 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 3b507604bc1fc15236766b159ca4d9fef421c5dd..b7f352110f311bae9ec800c74086d87417f7279a 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() {
@@ -122,7 +123,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-large-process-flow-phase/hy-large-process-flow-phase.tsx b/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.tsx
index 5ff642cf281156e5bf890df779496a2ebe220d76..2f4773de4cb36f59ec387b30de7e47d6eb2b4a2d 100644
--- a/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.tsx
+++ b/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.tsx
@@ -7,6 +7,8 @@ export interface PhaseValue {
export interface ProcessBoxLinkValue {
label: string;
url: string;
+ isExternal: boolean;
+ ariaLabel: string;
}
import {Component, ComponentInterface, h, Prop, Watch} from '@stencil/core';
@@ -45,7 +47,13 @@ export class HyLargeProcessFlowPhase implements ComponentInterface {
items = linkItems.map((item, index) => {
let classLinks = index == linkItemsCount - 1 ? 'phase-link last' : 'phase-link';
return item ? (
- <hy-cta-link class={classLinks} link-content={item.label} sc-label={item.label} url={item.url} />
+ <hy-cta-link
+ class={classLinks}
+ link-content={item.label}
+ sc-label={item.ariaLabel}
+ is-external={item.isExternal}
+ url={item.url}
+ />
) : 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..6d0cc0f07d4d3cf582cd9d65d9c8133bbd1ff663 100644
--- a/src/components/hy-shortcuts/hy-shortcuts.tsx
+++ b/src/components/hy-shortcuts/hy-shortcuts.tsx
@@ -1,6 +1,8 @@
export interface ShortcutLinkValue {
heading: string;
url: string;
+ isExternal: boolean;
+ ariaLabel: string;
}
import {Component, ComponentInterface, h, Host, Prop, Watch} from '@stencil/core';
@@ -30,7 +32,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,9 +54,11 @@ 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}>
+ <a aria-label={x.ariaLabel} class="shortcut-link" href={x.url} target={target}>
<span class={textClassAttributes}>{x.heading}</span>
<span class={iconClassAttributes}>
<hy-icon icon={'hy-icon-arrow-right'} size={28} />
diff --git a/src/components/link-box-list/link-box-list.tsx b/src/components/link-box-list/link-box-list.tsx
index bffbeb7a1b7fac2886241c3424707dfe6e0b0721..ac12d509775a1d17c2ed83ce4bd92683d14d6f03 100644
--- a/src/components/link-box-list/link-box-list.tsx
+++ b/src/components/link-box-list/link-box-list.tsx
@@ -5,6 +5,7 @@ export interface LinkBox {
imageAlt: string;
boxUrl: string;
isExternal: boolean;
+ ariaLabel: string;
}
import {Component, ComponentInterface, Watch, Prop, h, Host} from '@stencil/core';
@@ -74,6 +75,7 @@ export class LinkBoxList implements ComponentInterface {
text-description={x.description}
url={x.boxUrl}
is-external={x.isExternal}
+ sc-label={x.ariaLabel}
/>
);
})}
diff --git a/src/components/link-box/link-box.tsx b/src/components/link-box/link-box.tsx
index 55f7dc915120f8fad313726ebd5bcf88d44b004f..b5b3e87435be454233fda3f943c043fbca9870b9 100644
--- a/src/components/link-box/link-box.tsx
+++ b/src/components/link-box/link-box.tsx
@@ -14,6 +14,7 @@ export class LinkBox implements ComponentInterface {
@Prop() textDescription: string = null;
@Prop() url?: string;
@Prop() isExternal: boolean = false;
+ @Prop() scLabel?: string;
@Prop() headerstyle: string = 'common';
@Element() el: HTMLElement;
@@ -39,6 +40,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;
@@ -50,7 +52,7 @@ export class LinkBox implements ComponentInterface {
return [
<article>
- <a class={classAttributes} href={this.url} target={target}>
+ <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>
{this.imageUrl && (
<div class="hy-link-box__image-container" style={aspectRatio}>
<img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
@@ -68,9 +70,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-box/readme.md b/src/components/link-box/readme.md
index 031c1e8b969bb50bd0bb9a9b10fbff083c4c22f4..cdc8ec84954b3f8c04d2bca52c386a34e349dc43 100644
--- a/src/components/link-box/readme.md
+++ b/src/components/link-box/readme.md
@@ -10,6 +10,7 @@
| `imageAlt` | `image-alt` | | `string` | `null` |
| `imageUrl` | `image-url` | | `string` | `null` |
| `isExternal` | `is-external` | | `boolean` | `false` |
+| `scLabel` | `sc-label` | | `string` | `undefined` |
| `textDescription` | `text-description` | | `string` | `null` |
| `textTitle` | `text-title` | | `string` | `undefined` |
| `url` | `url` | | `string` | `undefined` |
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}>