Skip to content

Commit cf81c2d

Browse files
AndyLongShoutAndyLongShout
authored
feat: add rel property to relevant elements to override default behavior (#814)
* 721 property added for rel to allow * 721 fix tab close tag
1 parent 6a5f636 commit cf81c2d

20 files changed

+192
-33
lines changed

‎packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,15 @@ export class UUIButtonInlineCreateElement extends LitElement {
5656
@property({ type: String })
5757
public target?: '_blank' | '_parent' | '_self' | '_top';
5858

59+
/**
60+
* Set the rel attribute for an anchor tag, only used when using href.
61+
* @type {string}
62+
* @attr
63+
* @default undefined
64+
*/
65+
@property({ type: String })
66+
public rel?: string;
67+
5968
private _onMouseMove(e: MouseEvent) {
6069
this._position = (this.vertical ? e.offsetY : e.offsetX) - 5;
6170
}
@@ -98,7 +107,10 @@ export class UUIButtonInlineCreateElement extends LitElement {
98107
href=${ifDefined(this.href)}
99108
target=${ifDefined(this.target || undefined)}
100109
rel=${ifDefined(
101-
this.target === '_blank' ? 'noopener noreferrer' : undefined,
110+
this.rel ||
111+
ifDefined(
112+
this.target === '_blank' ? 'noopener noreferrer' : undefined,
113+
),
102114
)}
103115
aria-label=${this.label ? this.label : 'create new element'}>
104116
${this.#renderContent()}

‎packages/uui-button/lib/uui-button.element.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,15 @@ export class UUIButtonElement extends UUIFormControlMixin(
126126
@property({ type: String })
127127
public target?: '_blank' | '_parent' | '_self' | '_top';
128128

129+
/**
130+
* Set the rel attribute for an anchor tag, only used when using href.
131+
* @type {string}
132+
* @attr
133+
* @default undefined
134+
*/
135+
@property({ type: String })
136+
public rel?: string;
137+
129138
@query('#button')
130139
protected _button!: HTMLInputElement;
131140

@@ -229,7 +238,10 @@ export class UUIButtonElement extends UUIFormControlMixin(
229238
href=${ifDefined(!this.disabled ? this.href : undefined)}
230239
target=${ifDefined(this.target || undefined)}
231240
rel=${ifDefined(
232-
this.target === '_blank' ? 'noopener noreferrer' : undefined,
241+
this.rel ||
242+
ifDefined(
243+
this.target === '_blank' ? 'noopener noreferrer' : undefined,
244+
),
233245
)}>
234246
${this.renderState()} ${this.renderLabel()}
235247
<slot name="extra"></slot>

‎packages/uui-button/lib/uui-button.story.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export default {
1717
args: {
1818
href: undefined,
1919
target: undefined,
20+
rel: undefined,
2021
look: 'default',
2122
color: 'default',
2223
type: undefined,
@@ -104,6 +105,7 @@ const Template: Story = props => {
104105
.state=${props.state}
105106
.href=${props.href}
106107
.target=${props.target}
108+
.rel=${props.rel}
107109
look=${props.look}
108110
color=${props.color}
109111
label=${props.label}
@@ -339,6 +341,7 @@ export const AnchorTag = Template.bind({});
339341
AnchorTag.args = {
340342
href: 'https://www.umbraco.com',
341343
target: '_blank',
344+
rel: 'noopener noreferrer',
342345
look: 'primary',
343346
};
344347
AnchorTag.parameters = {
@@ -349,7 +352,8 @@ AnchorTag.parameters = {
349352
look="primary"
350353
label="Open umbraco.com"
351354
href="http://www.umbraco.com"
352-
target="_blank">
355+
target="_blank"
356+
rel="noopener noreferrer">
353357
</uui-button>
354358
`.strings,
355359
},

‎packages/uui-button/lib/uui-button.test.ts

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,10 @@ describe('UuiButton', () => {
100100
it('has a target property', () => {
101101
expect(element).to.have.property('target');
102102
});
103+
104+
it('has a rel property', () => {
105+
expect(element).to.have.property('rel');
106+
});
103107
});
104108

105109
describe('template', () => {
@@ -249,13 +253,27 @@ describe('UuiButton', () => {
249253
expect(anchorElement.getAttribute('target')).to.be.equal('_self');
250254
});
251255

252-
it('when target is _blank rel is set.', async () => {
256+
it('when target is _blank and rel is not defined rel attribute is set.', async () => {
253257
element.target = '_blank';
254258
await elementUpdated(element);
255259
expect(anchorElement.getAttribute('target')).to.be.equal('_blank');
256260
expect(anchorElement.getAttribute('rel')).to.be.equal(
257261
'noopener noreferrer',
258262
);
259263
});
264+
265+
it('when rel is applied to anchor tag.', async () => {
266+
element.rel = 'noreferrer';
267+
await elementUpdated(element);
268+
expect(anchorElement.getAttribute('rel')).to.be.equal('noreferrer');
269+
});
270+
271+
it('when target is _blank and rel is defined rel attribute is set.', async () => {
272+
element.target = '_blank';
273+
element.rel = 'noopener';
274+
await elementUpdated(element);
275+
expect(anchorElement.getAttribute('target')).to.be.equal('_blank');
276+
expect(anchorElement.getAttribute('rel')).to.be.equal('noopener');
277+
});
260278
});
261279
});

‎packages/uui-card-block-type/lib/uui-card-block-type.element.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,10 @@ export class UUICardBlockTypeElement extends UUICardElement {
7373
href=${ifDefined(!this.disabled ? this.href : undefined)}
7474
target=${ifDefined(this.target || undefined)}
7575
rel=${ifDefined(
76-
this.target === '_blank' ? 'noopener noreferrer' : undefined,
76+
this.rel ||
77+
ifDefined(
78+
this.target === '_blank' ? 'noopener noreferrer' : undefined,
79+
),
7780
)}>
7881
<strong>${this.name}</strong><small>${this.description}</small>
7982
</a>

‎packages/uui-card-block-type/lib/uui-card-block-type.story.ts

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@ export const AAAOverview: StoryFn = props => html`
5151
?error=${props.error}
5252
?disabled=${props.disabled}
5353
href=${props.href}
54-
target=${props.target}>
54+
target=${props.target}
55+
rel=${props.rel}>
5556
${renderWandIcon()}
5657
</uui-card-block-type>
5758
`;
@@ -77,7 +78,8 @@ export const Description: StoryFn = props => html`
7778
?error=${props.error}
7879
?disabled=${props.disabled}
7980
href=${props.href}
80-
target=${props.target}>
81+
target=${props.target}
82+
rel=${props.rel}>
8183
${renderWandIcon()}
8284
</uui-card-block-type>
8385
`;
@@ -102,7 +104,8 @@ export const Tag: StoryFn = props => html`
102104
?error=${props.error}
103105
?disabled=${props.disabled}
104106
href=${props.href}
105-
target=${props.target}>
107+
target=${props.target}
108+
rel=${props.rel}>
106109
${renderWandIcon()}
107110
<uui-tag slot="tag" size="s" color="danger">Trashed</uui-tag>
108111
</uui-card-block-type>
@@ -126,7 +129,8 @@ export const Actions: StoryFn = props => html`
126129
?error=${props.error}
127130
?disabled=${props.disabled}
128131
href=${props.href}
129-
target=${props.target}>
132+
target=${props.target}
133+
rel=${props.rel}>
130134
${renderWandIcon()}
131135
132136
<uui-action-bar slot="actions">
@@ -154,7 +158,8 @@ export const Background: StoryFn = props => html`
154158
?error=${props.error}
155159
?disabled=${props.disabled}
156160
href=${props.href}
157-
target=${props.target}>
161+
target=${props.target}
162+
rel=${props.rel}>
158163
${renderWandIcon()}
159164
</uui-card-block-type>
160165
`;
@@ -179,7 +184,8 @@ export const Image: StoryFn = props => html`
179184
?error=${props.error}
180185
?disabled=${props.disabled}
181186
href=${props.href}
182-
target=${props.target}>
187+
target=${props.target}
188+
rel=${props.rel}>
183189
<img
184190
src="https://umbraco.com/media/v5gf3w2a/umbraco-toolkit-wide.svg"
185191
alt="" />
@@ -206,7 +212,8 @@ export const Error: StoryFn = props => html`
206212
?error=${props.error}
207213
?disabled=${props.disabled}
208214
href=${props.href}
209-
target=${props.target}>
215+
target=${props.target}
216+
rel=${props.rel}>
210217
${renderWandIcon()}
211218
</uui-card-block-type>
212219
`;
@@ -229,7 +236,8 @@ export const Selectable: StoryFn = props => html`
229236
?error=${props.error}
230237
?disabled=${props.disabled}
231238
href=${props.href}
232-
target=${props.target}>
239+
target=${props.target}
240+
rel=${props.rel}>
233241
${renderWandIcon()}
234242
</uui-card-block-type>
235243
`;
@@ -252,7 +260,8 @@ export const Selected: StoryFn = props => html`
252260
?error=${props.error}
253261
?disabled=${props.disabled}
254262
href=${props.href}
255-
target=${props.target}>
263+
target=${props.target}
264+
rel=${props.rel}>
256265
${renderWandIcon()}
257266
</uui-card-block-type>
258267
`;
@@ -275,7 +284,8 @@ export const Multiple: StoryFn = props => html`
275284
?error=${props.error}
276285
?disabled=${props.disabled}
277286
href=${props.href}
278-
target=${props.target}>
287+
target=${props.target}
288+
rel=${props.rel}>
279289
${renderWandIcon('rgba(0,0,0,0.5)')}
280290
</uui-card-block-type>
281291
<uui-card-block-type
@@ -287,7 +297,8 @@ export const Multiple: StoryFn = props => html`
287297
?error=${props.error}
288298
?disabled=${props.disabled}
289299
href=${props.href}
290-
target=${props.target}>
300+
target=${props.target}
301+
rel=${props.rel}>
291302
${renderWandIcon('red')}
292303
</uui-card-block-type>
293304
<uui-card-block-type
@@ -299,7 +310,8 @@ export const Multiple: StoryFn = props => html`
299310
?error=${props.error}
300311
?disabled=${props.disabled}
301312
href=${props.href}
302-
target=${props.target}>
313+
target=${props.target}
314+
rel=${props.rel}>
303315
${renderWandIcon('rgba(11, 229, 255, 0.5)')}
304316
</uui-card-block-type>
305317
`;
@@ -324,7 +336,8 @@ export const Disabled: StoryFn = props => html`
324336
?error=${props.error}
325337
?disabled=${props.disabled}
326338
href=${props.href}
327-
target=${props.target}>
339+
target=${props.target}
340+
rel=${props.rel}>
328341
${renderWandIcon()}
329342
</uui-card-block-type>
330343
`;

‎packages/uui-card-content-node/lib/uui-card-content-node.element.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,10 @@ export class UUICardContentNodeElement extends UUICardElement {
6262
href=${ifDefined(!this.disabled ? this.href : undefined)}
6363
target=${ifDefined(this.target || undefined)}
6464
rel=${ifDefined(
65-
this.target === '_blank' ? 'noopener noreferrer' : undefined,
65+
this.rel ||
66+
ifDefined(
67+
this.target === '_blank' ? 'noopener noreferrer' : undefined,
68+
),
6669
)}>
6770
<span id="icon">
6871
<slot name="icon" @slotchange=${this._onSlotIconChange}></slot>

‎packages/uui-card-content-node/lib/uui-card-content-node.story.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@ export const AAAOverview: Story = props => html`
4848
?error=${props.error}
4949
?disabled=${props.disabled}
5050
href=${props.href}
51-
target=${props.target}>
51+
target=${props.target}
52+
rel=${props.rel}>
5253
<uui-tag size="s" slot="tag" color="positive">Published</uui-tag>
5354
${cardContent}
5455
</uui-card-content-node>

‎packages/uui-card-media/lib/uui-card-media.element.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,10 @@ export class UUICardMediaElement extends UUICardElement {
8989
href=${ifDefined(!this.disabled ? this.href : undefined)}
9090
target=${ifDefined(this.target || undefined)}
9191
rel=${ifDefined(
92-
this.target === '_blank' ? 'noopener noreferrer' : undefined,
92+
this.rel ||
93+
ifDefined(
94+
this.target === '_blank' ? 'noopener noreferrer' : undefined,
95+
),
9396
)}>
9497
<!--
9598
TODO: Implement when pop-out is ready

‎packages/uui-card-media/lib/uui-card-media.story.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ export const AAAOverview: Story = props => html`
2828
?error=${props.error}
2929
?disabled=${props.disabled}
3030
href=${props.href}
31-
target=${props.target}></uui-card-media>
31+
target=${props.target}
32+
rel=${props.rel}></uui-card-media>
3233
`;
3334
AAAOverview.storyName = 'Overview';
3435

‎packages/uui-card-user/lib/uui-card-user.element.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,10 @@ export class UUICardUserElement extends UUICardElement {
5555
href=${ifDefined(!this.disabled ? this.href : undefined)}
5656
target=${ifDefined(this.target || undefined)}
5757
rel=${ifDefined(
58-
this.target === '_blank' ? 'noopener noreferrer' : undefined,
58+
this.rel ||
59+
ifDefined(
60+
this.target === '_blank' ? 'noopener noreferrer' : undefined,
61+
),
5962
)}>
6063
<span>${this.name}</span>
6164
</a>`;

‎packages/uui-card-user/lib/uui-card-user.story.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ const Template: StoryFn = props => html`
3636
?error=${props.error}
3737
?disabled=${props.disabled}
3838
href=${props.href}
39-
target=${props.target}>
39+
target=${props.target}
40+
rel=${props.rel}>
4041
${cardContent}
4142
</uui-card-user>
4243
`;

‎packages/uui-card/lib/uui-card.element.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,15 @@ export class UUICardElement extends SelectOnlyMixin(
5555
@property({ type: String })
5656
public target?: '_blank' | '_parent' | '_self' | '_top';
5757

58+
/**
59+
* Set the rel attribute for an anchor tag, only used when using href.
60+
* @type {string}
61+
* @attr
62+
* @default undefined
63+
*/
64+
@property({ type: String })
65+
public rel?: string;
66+
5867
// This is deprecated - use href instead
5968
protected handleOpenClick(e: Event) {
6069
if (this.disabled) return;

‎packages/uui-menu-item/lib/uui-menu-item.element.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,15 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
9393
@property({ type: String })
9494
public target?: '_blank' | '_parent' | '_self' | '_top';
9595

96+
/**
97+
* Set the rel attribute for an anchor tag, only used when using href.
98+
* @type {string}
99+
* @attr
100+
* @default undefined
101+
*/
102+
@property({ type: String })
103+
public rel?: string;
104+
96105
/**
97106
* Sets the selection mode.
98107
* @type {string}
@@ -170,7 +179,10 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
170179
href=${ifDefined(this.href)}
171180
target=${ifDefined(this.target || undefined)}
172181
rel=${ifDefined(
173-
this.target === '_blank' ? 'noopener noreferrer' : undefined,
182+
this.rel ||
183+
ifDefined(
184+
this.target === '_blank' ? 'noopener noreferrer' : undefined,
185+
),
174186
)}
175187
@click=${this._onLabelClicked}
176188
?disabled=${this.disabled}

0 commit comments

Comments
 (0)