Skip to content

Commit 7457f81

Browse files
iOvergaardiOvergaard
authored
Merge branch 'v1/contrib' into feature/dropzone-supports-folder-upload
2 parents 965727e + 8433a95 commit 7457f81

40 files changed

+628
-373
lines changed

‎package-lock.json

+72-305
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
"eslint-plugin-storybook": "0.6.15",
9797
"eslint-plugin-wc": "2.0.4",
9898
"github-markdown-css": "5.6.1",
99-
"glob": "8.1.0",
99+
"glob": "10.4.3",
100100
"husky": "8.0.3",
101101
"lint-staged": "15.2.2",
102102
"npm-check-updates": "16.14.20",

‎packages/uui-boolean-input/lib/uui-boolean-input.element.ts

+15-2
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,15 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(
8585
@property({ type: Boolean, reflect: true })
8686
disabled = false;
8787

88+
/**
89+
* Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
90+
* @type {boolean}
91+
* @attr
92+
* @default false
93+
*/
94+
@property({ type: Boolean, reflect: true })
95+
readonly = false;
96+
8897
@query('#input')
8998
protected _input!: HTMLInputElement;
9099

@@ -176,7 +185,7 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(
176185
id="input"
177186
type="checkbox"
178187
@change="${this._onInputChange}"
179-
.disabled=${this.disabled}
188+
.disabled=${this.disabled || this.readonly}
180189
.checked=${this.checked}
181190
aria-checked="${this.checked ? 'true' : 'false'}"
182191
aria-label=${this.label}
@@ -196,14 +205,18 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(
196205
position: relative;
197206
cursor: pointer;
198207
user-select: none;
199-
200208
display: flex;
201209
flex-wrap: nowrap;
202210
align-items: center;
203211
justify-items: center;
204212
gap: var(--uui-size-3);
205213
}
206214
215+
:host([readonly]) label {
216+
cursor: text;
217+
user-select: auto;
218+
}
219+
207220
input {
208221
position: absolute;
209222
height: 0px;

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

+13-1
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

+13-1
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

+5-1
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

+19-1
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

+7-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ export type BlockTypeIcon = {
1212

1313
/**
1414
* @element uui-card-block-type
15+
* @slot - slot for the default content area
16+
* @slot tag - slot for the tag with support for `<uui-tag>` elements
17+
* @slot actions - slot for the actions with support for the `<uui-action-bar>` element
1518
*/
1619
@defineElement('uui-card-block-type')
1720
export class UUICardBlockTypeElement extends UUICardElement {
@@ -70,7 +73,10 @@ export class UUICardBlockTypeElement extends UUICardElement {
7073
href=${ifDefined(!this.disabled ? this.href : undefined)}
7174
target=${ifDefined(this.target || undefined)}
7275
rel=${ifDefined(
73-
this.target === '_blank' ? 'noopener noreferrer' : undefined,
76+
this.rel ||
77+
ifDefined(
78+
this.target === '_blank' ? 'noopener noreferrer' : undefined,
79+
),
7480
)}>
7581
<strong>${this.name}</strong><small>${this.description}</small>
7682
</a>

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

+26-13
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

+4-1
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

+2-1
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

+4-1
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

+2-1
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

+4-1
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>`;

0 commit comments

Comments
 (0)