Resolve "link: refacto position et size"

CHANGELOG.md

@@ -19,8 +19,10 @@
 - break: `header` l'input `blockMarkHref` est renommé `blockMarkLink`
 - break: `tab` l'input `iconClass` est renommé `icon`
 - break: `link` l'input `routerLinkActiveValue` est renommé `routerLinkActive`
+- break: `link` l'input `position` est renommé `iconPosition`
 - break: `sidemenu` l'input `fullHeight` est renommé `stickyFullHeight`
 - break: `sidemenu` l'input `onRight` est renommé `position` et est à présent de type `DsfrPosition`
+- fix: `link` si routerLink est utilisé la propriété [target] est valorisée au lieu de l'attribut [attr.target]
 
 ## 1.0.0-rc.5
 

projects/ngx-dsfr-components/src/lib/components/link/link.component.html

@@ -23,7 +23,7 @@
   [skipLocationChange]="routerLinkExtras?.skipLocationChange"
   [replaceUrl]="routerLinkExtras?.replaceUrl"
   [state]="routerLinkExtras?.state"
-  [target]="targetLink ? targetLink : '_self'"
+  [attr.target]="targetLink ? targetLink : null"
   [attr.aria-current]="ariaCurrent ? ariaCurrent : null"
   (click)="onLink($event)"
   >{{ label }}</a

projects/ngx-dsfr-components/src/lib/components/link/link.component.ts

@@ -9,6 +9,7 @@ import {
   DsfrTargetLink,
 } from '../../shared/models';
 
+//TODO: ne pourrait-on pas utiliser ici le composant interne edu-item-link ?
 @Component({
   selector: 'ngx-dsfr-link',
   templateUrl: './link.component.html',
@@ -42,11 +43,9 @@ export class DsfrLinkComponent implements Omit<DsfrLink, 'active' | 'target'> {
   @Input() targetLink: DsfrTargetLink;
 
   /** Position de l'icône. */
-  //FIXME à renommer iconPosition
-  @Input() position: DsfrPosition = DsfrPositionConst.RIGHT;
+  @Input() iconPosition: DsfrPosition = DsfrPositionConst.RIGHT;
 
-  /** Taille de l'icône. */
-  //FIXME à renommer iconSize
+  /** Taille du lien. */
   @Input() size: DsfrSize = DsfrSizeConst.MD;
 
   /** Class CSS.  */
@@ -67,11 +66,11 @@ export class DsfrLinkComponent implements Omit<DsfrLink, 'active' | 'target'> {
 
   getClass() {
     return {
-      'fr-link--icon-right': this.position === DsfrPositionConst.RIGHT,
-      'fr-link--icon-left': this.position === DsfrPositionConst.LEFT,
+      'fr-link': true,
+      'fr-link--icon-right': this.iconPosition === DsfrPositionConst.RIGHT,
+      'fr-link--icon-left': this.iconPosition === DsfrPositionConst.LEFT,
       'fr-link--sm': this.size === DsfrSizeConst.SM,
       'fr-link--lg': this.size === DsfrSizeConst.LG,
-      'fr-link': true,
     };
   }
 }

projects/ngx-dsfr-components/src/lib/components/link/link.stories.ts

@@ -17,7 +17,7 @@ const meta: Meta = {
   },
   argTypes: {
     size: { control: { type: 'inline-radio' }, options: Object.values(DsfrSizeConst) },
-    position: { control: { type: 'inline-radio' }, options: Object.values(DsfrPositionConst) },
+    iconPosition: { control: { type: 'inline-radio' }, options: Object.values(DsfrPositionConst) },
     targetLink: { control: { type: 'select' }, options: [''].concat(Object.values(DsfrTargetLinkConst)) },
     getClass: { table: { disable: true } },
     onLink: { table: { disable: true } },
@@ -34,7 +34,7 @@ const Template: StoryFn<DsfrLinkComponent> = (args) => ({
     [link] = "link"
     [targetLink] = "targetLink"
     [icon] = "icon"
-    [position] = "position"
+    [iconPosition] = "iconPosition"
     [size] = "size"
     [customClass] = "customClass"
     [ariaCurrent] = "ariaCurrent"
@@ -66,7 +66,7 @@ export const WithIcon = Template.bind({});
 WithIcon.args = {
   label: 'Lien avec icône à droite',
   icon: 'fr-fi-arrow-right-line',
-  position: DsfrPositionConst.RIGHT,
+  iconPosition: DsfrPositionConst.RIGHT,
 };
 
 /** Small */

projects/ngx-dsfr-components/src/lib/shared/components/item-link/item-link.component.html

@@ -2,7 +2,7 @@
   *ngIf="!item.routerLink"
   [ngClass]="customClass ? customClass : ''"
   [href]="item.route ? item.route : item.link"
-  [target]="item.target ? item.target : null"
+  [attr.target]="item.target ? item.target : null"
   [attr.aria-current]="item.active ? 'page' : null"
   (click)="onLinkSelect($event)">
   <i *ngIf="item.icon" class="edu-item-icon" [class]="item.icon" aria-hidden="true"></i>
@@ -20,7 +20,7 @@
   [skipLocationChange]="item.routerLinkExtras?.skipLocationChange"
   [replaceUrl]="item.routerLinkExtras?.replaceUrl"
   [state]="item.routerLinkExtras?.state"
-  [target]="item.target ? item.target : null"
+  [attr.target]="item.target ? item.target : null"
   [attr.aria-current]="item.active ? 'page' : null"
   (click)="onLinkSelect($event)">
   <i *ngIf="item.icon" class="edu-item-icon" [class]="item.icon" aria-hidden="true"></i>