feat: add rel property to relevant elements to override default beh…

…avior (#814) * 721 property added for rel to allow * 721 fix tab close tag
umbraco · Jul 25, 2024 · f1978e0 · f1978e0
1 parent 8d2e211
commit f1978e0
Show file tree

Hide file tree

Showing 20 changed files with 192 additions and 33 deletions.
diff --git a/packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts b/packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts
@@ -56,6 +56,15 @@ export class UUIButtonInlineCreateElement extends LitElement {
   @property({ type: String })
   public target?: '_blank' | '_parent' | '_self' | '_top';
 
+  /**
+   * Set the rel attribute for an anchor tag, only used when using href.
+   * @type {string}
+   * @attr
+   * @default undefined
+   */
+  @property({ type: String })
+  public rel?: string;
+
   private _onMouseMove(e: MouseEvent) {
     this._position = (this.vertical ? e.offsetY : e.offsetX) - 5;
   }
@@ -98,7 +107,10 @@ export class UUIButtonInlineCreateElement extends LitElement {
       href=${ifDefined(this.href)}
       target=${ifDefined(this.target || undefined)}
       rel=${ifDefined(
-        this.target === '_blank' ? 'noopener noreferrer' : undefined,
+        this.rel ||
+          ifDefined(
+            this.target === '_blank' ? 'noopener noreferrer' : undefined,
+          ),
       )}
       aria-label=${this.label ? this.label : 'create new element'}>
       ${this.#renderContent()}

diff --git a/packages/uui-button/lib/uui-button.element.ts b/packages/uui-button/lib/uui-button.element.ts
@@ -126,6 +126,15 @@ export class UUIButtonElement extends UUIFormControlMixin(
   @property({ type: String })
   public target?: '_blank' | '_parent' | '_self' | '_top';
 
+  /**
+   * Set the rel attribute for an anchor tag, only used when using href.
+   * @type {string}
+   * @attr
+   * @default undefined
+   */
+  @property({ type: String })
+  public rel?: string;
+
   @query('#button')
   protected _button!: HTMLInputElement;
 
@@ -229,7 +238,10 @@ export class UUIButtonElement extends UUIFormControlMixin(
             href=${ifDefined(!this.disabled ? this.href : undefined)}
             target=${ifDefined(this.target || undefined)}
             rel=${ifDefined(
-              this.target === '_blank' ? 'noopener noreferrer' : undefined,
+              this.rel ||
+                ifDefined(
+                  this.target === '_blank' ? 'noopener noreferrer' : undefined,
+                ),
             )}>
             ${this.renderState()} ${this.renderLabel()}
             <slot name="extra"></slot>

diff --git a/packages/uui-button/lib/uui-button.story.ts b/packages/uui-button/lib/uui-button.story.ts
@@ -17,6 +17,7 @@ export default {
   args: {
     href: undefined,
     target: undefined,
+    rel: undefined,
     look: 'default',
     color: 'default',
     type: undefined,
@@ -104,6 +105,7 @@ const Template: Story = props => {
       .state=${props.state}
       .href=${props.href}
       .target=${props.target}
+      .rel=${props.rel}
       look=${props.look}
       color=${props.color}
       label=${props.label}
@@ -339,6 +341,7 @@ export const AnchorTag = Template.bind({});
 AnchorTag.args = {
   href: 'https://www.umbraco.com',
   target: '_blank',
+  rel: 'noopener noreferrer',
   look: 'primary',
 };
 AnchorTag.parameters = {
@@ -349,7 +352,8 @@ AnchorTag.parameters = {
           look="primary"
           label="Open umbraco.com"
           href="http://www.umbraco.com"
-          target="_blank">
+          target="_blank"
+          rel="noopener noreferrer">
         </uui-button>
       `.strings,
     },

diff --git a/packages/uui-button/lib/uui-button.test.ts b/packages/uui-button/lib/uui-button.test.ts
@@ -100,6 +100,10 @@ describe('UuiButton', () => {
     it('has a target property', () => {
       expect(element).to.have.property('target');
     });
+
+    it('has a rel property', () => {
+      expect(element).to.have.property('rel');
+    });
   });
 
   describe('template', () => {
@@ -249,13 +253,27 @@ describe('UuiButton', () => {
       expect(anchorElement.getAttribute('target')).to.be.equal('_self');
     });
 
-    it('when target is _blank rel is set.', async () => {
+    it('when target is _blank and rel is not defined rel attribute is set.', async () => {
       element.target = '_blank';
       await elementUpdated(element);
       expect(anchorElement.getAttribute('target')).to.be.equal('_blank');
       expect(anchorElement.getAttribute('rel')).to.be.equal(
         'noopener noreferrer',
       );
     });
+
+    it('when rel is applied to anchor tag.', async () => {
+      element.rel = 'noreferrer';
+      await elementUpdated(element);
+      expect(anchorElement.getAttribute('rel')).to.be.equal('noreferrer');
+    });
+
+    it('when target is _blank and rel is defined rel attribute is set.', async () => {
+      element.target = '_blank';
+      element.rel = 'noopener';
+      await elementUpdated(element);
+      expect(anchorElement.getAttribute('target')).to.be.equal('_blank');
+      expect(anchorElement.getAttribute('rel')).to.be.equal('noopener');
+    });
   });
 });
diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
@@ -73,7 +73,10 @@ export class UUICardBlockTypeElement extends UUICardElement {
         href=${ifDefined(!this.disabled ? this.href : undefined)}
         target=${ifDefined(this.target || undefined)}
         rel=${ifDefined(
-          this.target === '_blank' ? 'noopener noreferrer' : undefined,
+          this.rel ||
+            ifDefined(
+              this.target === '_blank' ? 'noopener noreferrer' : undefined,
+            ),
         )}>
         <strong>${this.name}</strong><small>${this.description}</small>
       </a>

diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.story.ts b/packages/uui-card-block-type/lib/uui-card-block-type.story.ts
@@ -51,7 +51,8 @@ export const AAAOverview: StoryFn = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}>
+    target=${props.target}
+    rel=${props.rel}>
     ${renderWandIcon()}
   </uui-card-block-type>
 `;
@@ -77,7 +78,8 @@ export const Description: StoryFn = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}>
+    target=${props.target}
+    rel=${props.rel}>
     ${renderWandIcon()}
   </uui-card-block-type>
 `;
@@ -102,7 +104,8 @@ export const Tag: StoryFn = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}>
+    target=${props.target}
+    rel=${props.rel}>
     ${renderWandIcon()}
     <uui-tag slot="tag" size="s" color="danger">Trashed</uui-tag>
   </uui-card-block-type>
@@ -126,7 +129,8 @@ export const Actions: StoryFn = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}>
+    target=${props.target}
+    rel=${props.rel}>
     ${renderWandIcon()}
 
     <uui-action-bar slot="actions">
@@ -154,7 +158,8 @@ export const Background: StoryFn = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}>
+    target=${props.target}
+    rel=${props.rel}>
     ${renderWandIcon()}
   </uui-card-block-type>
 `;
@@ -179,7 +184,8 @@ export const Image: StoryFn = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}>
+    target=${props.target}
+    rel=${props.rel}>
     <img
       src="https://umbraco.com/media/v5gf3w2a/umbraco-toolkit-wide.svg"
       alt="" />
@@ -206,7 +212,8 @@ export const Error: StoryFn = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}>
+    target=${props.target}
+    rel=${props.rel}>
     ${renderWandIcon()}
   </uui-card-block-type>
 `;
@@ -229,7 +236,8 @@ export const Selectable: StoryFn = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}>
+    target=${props.target}
+    rel=${props.rel}>
     ${renderWandIcon()}
   </uui-card-block-type>
 `;
@@ -252,7 +260,8 @@ export const Selected: StoryFn = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}>
+    target=${props.target}
+    rel=${props.rel}>
     ${renderWandIcon()}
   </uui-card-block-type>
 `;
@@ -275,7 +284,8 @@ export const Multiple: StoryFn = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}>
+    target=${props.target}
+    rel=${props.rel}>
     ${renderWandIcon('rgba(0,0,0,0.5)')}
   </uui-card-block-type>
   <uui-card-block-type
@@ -287,7 +297,8 @@ export const Multiple: StoryFn = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}>
+    target=${props.target}
+    rel=${props.rel}>
     ${renderWandIcon('red')}
   </uui-card-block-type>
   <uui-card-block-type
@@ -299,7 +310,8 @@ export const Multiple: StoryFn = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}>
+    target=${props.target}
+    rel=${props.rel}>
     ${renderWandIcon('rgba(11, 229, 255, 0.5)')}
   </uui-card-block-type>
 `;
@@ -324,7 +336,8 @@ export const Disabled: StoryFn = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}>
+    target=${props.target}
+    rel=${props.rel}>
     ${renderWandIcon()}
   </uui-card-block-type>
 `;

diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
@@ -62,7 +62,10 @@ export class UUICardContentNodeElement extends UUICardElement {
       href=${ifDefined(!this.disabled ? this.href : undefined)}
       target=${ifDefined(this.target || undefined)}
       rel=${ifDefined(
-        this.target === '_blank' ? 'noopener noreferrer' : undefined,
+        this.rel ||
+          ifDefined(
+            this.target === '_blank' ? 'noopener noreferrer' : undefined,
+          ),
       )}>
       <span id="icon">
         <slot name="icon" @slotchange=${this._onSlotIconChange}></slot>

diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.story.ts b/packages/uui-card-content-node/lib/uui-card-content-node.story.ts
@@ -48,7 +48,8 @@ export const AAAOverview: Story = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}>
+    target=${props.target}
+    rel=${props.rel}>
     <uui-tag size="s" slot="tag" color="positive">Published</uui-tag>
     ${cardContent}
   </uui-card-content-node>

diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts
@@ -89,7 +89,10 @@ export class UUICardMediaElement extends UUICardElement {
         href=${ifDefined(!this.disabled ? this.href : undefined)}
         target=${ifDefined(this.target || undefined)}
         rel=${ifDefined(
-          this.target === '_blank' ? 'noopener noreferrer' : undefined,
+          this.rel ||
+            ifDefined(
+              this.target === '_blank' ? 'noopener noreferrer' : undefined,
+            ),
         )}>
         <!--
         TODO: Implement when pop-out is ready

diff --git a/packages/uui-card-media/lib/uui-card-media.story.ts b/packages/uui-card-media/lib/uui-card-media.story.ts
@@ -28,7 +28,8 @@ export const AAAOverview: Story = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}></uui-card-media>
+    target=${props.target}
+    rel=${props.rel}></uui-card-media>
 `;
 AAAOverview.storyName = 'Overview';
 

diff --git a/packages/uui-card-user/lib/uui-card-user.element.ts b/packages/uui-card-user/lib/uui-card-user.element.ts
@@ -55,7 +55,10 @@ export class UUICardUserElement extends UUICardElement {
       href=${ifDefined(!this.disabled ? this.href : undefined)}
       target=${ifDefined(this.target || undefined)}
       rel=${ifDefined(
-        this.target === '_blank' ? 'noopener noreferrer' : undefined,
+        this.rel ||
+          ifDefined(
+            this.target === '_blank' ? 'noopener noreferrer' : undefined,
+          ),
       )}>
       <span>${this.name}</span>
     </a>`;

diff --git a/packages/uui-card-user/lib/uui-card-user.story.ts b/packages/uui-card-user/lib/uui-card-user.story.ts
@@ -36,7 +36,8 @@ const Template: StoryFn = props => html`
     ?error=${props.error}
     ?disabled=${props.disabled}
     href=${props.href}
-    target=${props.target}>
+    target=${props.target}
+    rel=${props.rel}>
     ${cardContent}
   </uui-card-user>
 `;

diff --git a/packages/uui-card/lib/uui-card.element.ts b/packages/uui-card/lib/uui-card.element.ts
@@ -55,6 +55,15 @@ export class UUICardElement extends SelectOnlyMixin(
   @property({ type: String })
   public target?: '_blank' | '_parent' | '_self' | '_top';
 
+  /**
+   * Set the rel attribute for an anchor tag, only used when using href.
+   * @type {string}
+   * @attr
+   * @default undefined
+   */
+  @property({ type: String })
+  public rel?: string;
+
   // This is deprecated - use href instead
   protected handleOpenClick(e: Event) {
     if (this.disabled) return;

diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts
@@ -93,6 +93,15 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
   @property({ type: String })
   public target?: '_blank' | '_parent' | '_self' | '_top';
 
+  /**
+   * Set the rel attribute for an anchor tag, only used when using href.
+   * @type {string}
+   * @attr
+   * @default undefined
+   */
+  @property({ type: String })
+  public rel?: string;
+
   /**
    * Sets the selection mode.
    * @type {string}
@@ -170,7 +179,10 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
       href=${ifDefined(this.href)}
       target=${ifDefined(this.target || undefined)}
       rel=${ifDefined(
-        this.target === '_blank' ? 'noopener noreferrer' : undefined,
+        this.rel ||
+          ifDefined(
+            this.target === '_blank' ? 'noopener noreferrer' : undefined,
+          ),
       )}
       @click=${this._onLabelClicked}
       ?disabled=${this.disabled}