fix(link): set href & target optionnal (#61)

* fix(link): set href & target optionnal * test(link): add test e2e href * docs(link): add docs on href comportement
ovh · Jun 2, 2023 · 4943d84 · 4943d84
1 parent a0229fc
commit 4943d84
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 17 deletions.
diff --git a/packages/libraries/core/src/components/link/ods-link-attributes.ts b/packages/libraries/core/src/components/link/ods-link-attributes.ts
@@ -14,12 +14,15 @@ export interface OdsLinkAttributes extends OdsComponentAttributes {
   /**  Link as download source */
   download?: HTMLAnchorElement['download']
   /** Link URL */
-  href: string
+  href?: string
   /** Link referrer policy */
   referrerpolicy?: OdsLinkReferrerpolicy
   /**  Link relationship */
   rel?: OdsHTMLAnchorElementRel
-  /** Link target type */
+  /** 
+   * Link target type
+   * If href is set the default value `_self` is set
+   */
   target?: OdsHTMLAnchorElementTarget
   /** Link type (for download source) */
   type?: string

diff --git a/packages/libraries/core/src/components/link/ods-link-controller.spec.ts b/packages/libraries/core/src/components/link/ods-link-controller.spec.ts
@@ -67,15 +67,24 @@ describe('spec:ods-link-controller', () => {
         expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledTimes(1);
       });
 
-      it('should call console.warn with wrong target', () => {
+      it('should call console.warn with wrong target if href not empty', () => {
         const expected = 'The target attribute must have a value from [_blank, _self, _parent, _top]';
+        component.href = 'not empty';
         component.target = '_target' as OdsHTMLAnchorElementTarget;
 
         controller.validateAttributes();
 
         expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(expected);
         expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledTimes(1);
       });
+
+      it('should not call console.warn with wrong target if href empty', () => {
+        component.target = '_target' as OdsHTMLAnchorElementTarget;
+
+        controller.validateAttributes();
+
+        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledTimes(0);
+      });
     });
   });
 });
diff --git a/packages/libraries/core/src/components/link/ods-link-controller.ts b/packages/libraries/core/src/components/link/ods-link-controller.ts
@@ -18,7 +18,7 @@ export class OdsLinkController extends OdsComponentController<OdsLink> {
   }
 
   /**
-   * validating that the color, the referrerpolicy, the rel and the target have correct values
+   * validating that the color and the target have correct values
    * and warn the user if not
    */
   validateAttributes(): void {
@@ -29,11 +29,14 @@ export class OdsLinkController extends OdsComponentController<OdsLink> {
       attributeName: 'color',
       attribute: this.component.color
     });
-    OdsWarnComponentAttribute<OdsHTMLAnchorElementTarget, OdsLink>({
+    if (this.component.href && !this.component.target) {
+      this.component.target = OdsHTMLAnchorElementTarget._self;
+    }
+    this.component.href && OdsWarnComponentAttribute<OdsHTMLAnchorElementTarget, OdsLink>({
       logger,
       attributeValues: OdsHTMLAnchorElementTarget as Record<string, unknown>,
       attributeName: 'target',
-      attribute: this.component.target
+      attribute: this.component.target,
     });
   }
 }
diff --git a/packages/libraries/core/src/components/link/ods-link-default-attributes.ts b/packages/libraries/core/src/components/link/ods-link-default-attributes.ts
@@ -1,6 +1,5 @@
 import { OdsLinkAttributes } from './ods-link-attributes';
 import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
-import { OdsHTMLAnchorElementTarget } from '../../types/ods-html-anchor-element-target';
 
 /**
  * default attribute values of link
@@ -10,10 +9,10 @@ export const odsLinkDefaultAttributesDoc = {
   contrasted: false,
   disabled: false,
   download: undefined,
-  href: '',
+  href: undefined,
   referrerpolicy: undefined,
   rel: undefined,
-  target: OdsHTMLAnchorElementTarget._self,
+  target: undefined,
   type: undefined,
 } as const;
 

diff --git a/packages/libraries/core/src/logger/ods-warn-logger.ts b/packages/libraries/core/src/logger/ods-warn-logger.ts
@@ -38,7 +38,7 @@ export function OdsWarnComponentAttribute<T, Component>(params: OdsWarnType<T, C
   }
   if (typeof params.attribute === 'number') {
     return OdsWarnComponentRangeAttribute<Component>(<OdsWarnRangeComponent<Component>>params);
-  } else {
-    return OdsWarnComponentEnumAttribute<T, Component>(<OdsWarnEnumComponent<T, Component>>params);
   }
+  return OdsWarnComponentEnumAttribute<T, Component>(<OdsWarnEnumComponent<T, Component>>params);
 }
+
diff --git a/packages/stencil/components/link/docs/osds-link/usage.mdx b/packages/stencil/components/link/docs/osds-link/usage.mdx
@@ -1,5 +1,7 @@
 ## Usage
 
+If the link doesn't have the properties `href` then the link is like a button
+
 ### Sizes
 ```html
 <ods-link size='s'>Small</ods-link>

diff --git a/packages/stencil/components/link/src/components/osds-link/osds-link.e2e.ts b/packages/stencil/components/link/src/components/osds-link/osds-link.e2e.ts
@@ -31,12 +31,25 @@ describe('e2e:osds-link', () => {
     expect(el).not.toBeNull();
   });
 
-  // todo: to activate once link ok
-  xit('should display a text in the link', async () => {
+  it('should display a text in the link', async () => {
     const text = `Text`;
     await setup({ attributes: { color: OdsThemeColorIntent.primary,  contrasted: false }, html: text });
 
-    expect(linkElement.innerText).toBe(text);
+    expect(el.innerText).toContain(text);
+    expect(el.getAttribute('href')).toBeFalsy();
+  });
+
+  it('should display a text in the link with href', async () => {
+    const href = 'https://www.ovhcloud.com';
+    const text = `Text`;
+    await setup({ attributes: {
+      color: OdsThemeColorIntent.primary,
+      contrasted: false,
+      href,
+    }, html: text });
+
+    expect(el.innerText).toContain(text);
+    expect(el.getAttribute('href')).toBe(href);
   });
 
   // it('should display a small size', async () => {

diff --git a/packages/stencil/components/link/src/components/osds-link/osds-link.tsx b/packages/stencil/components/link/src/components/osds-link/osds-link.tsx
@@ -38,7 +38,7 @@ export class OsdsLink implements OdsLink<OdsStencilMethods<OdsLinkMethods>, OdsS
   @Prop() public download?: HTMLAnchorElement['download'] = odsLinkDefaultAttributes.download;
 
   /** @see OdsLinkAttributes.href */
-  @Prop({ reflect: true }) public href: string = odsLinkDefaultAttributes.href;
+  @Prop({ reflect: true }) public href?: string = odsLinkDefaultAttributes.href;
 
   /** @see OdsLinkAttributes.referrerpolicy */
   @Prop({ reflect: true }) referrerpolicy?: OdsLinkReferrerpolicy = odsLinkDefaultAttributes.referrerpolicy;
@@ -47,13 +47,13 @@ export class OsdsLink implements OdsLink<OdsStencilMethods<OdsLinkMethods>, OdsS
   @Prop({ reflect: true }) public rel?: OdsHTMLAnchorElementRel = odsLinkDefaultAttributes.rel;
 
   /** @see OdsLinkAttributes.target */
-  @Prop({ reflect: true }) public target?: OdsHTMLAnchorElementTarget = odsLinkDefaultAttributes.target;
+  @Prop({ reflect: true, mutable: true }) public target?: OdsHTMLAnchorElementTarget = odsLinkDefaultAttributes.target;
 
   /** @see OdsLinkAttributes.type */
   @Prop({ reflect: true }) public type?: string = odsLinkDefaultAttributes.type;
 
   /**
-   * @see OdsChipBehavior.beforeRender
+   * @see OdsLinkBehavior.beforeRender
    */
   beforeRender(): void {
     this.controller.validateAttributes();

diff --git a/packages/stencil/components/link/src/index.html b/packages/stencil/components/link/src/index.html
@@ -26,6 +26,8 @@
 <p>Contrasted</p>
 <osds-link contrasted>Default</osds-link>
 
+<p>Link with href</p>
+<osds-link href="https://www.ovhcloud.com">Go to OVH</osds-link>
 <script>
 
   let logger;