diff --git a/packages/libraries/core/src/components/link/ods-link-attributes.ts b/packages/libraries/core/src/components/link/ods-link-attributes.ts index d1fe38f75f..171ae10d37 100644 --- 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 index 5d9c69911f..69077dab74 100644 --- 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,8 +67,9 @@ 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(); @@ -76,6 +77,14 @@ describe('spec:ods-link-controller', () => { 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 index bebb8bc55a..f905f2f848 100644 --- 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 { } /** - * 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 { attributeName: 'color', attribute: this.component.color }); - OdsWarnComponentAttribute({ + if (this.component.href && !this.component.target) { + this.component.target = OdsHTMLAnchorElementTarget._self; + } + this.component.href && OdsWarnComponentAttribute({ logger, attributeValues: OdsHTMLAnchorElementTarget as Record, 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 index 8cdfde234d..069413fa61 100644 --- 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 index 60fc7e02fc..fe292a2072 100644 --- 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(params: OdsWarnType(>params); - } else { - return OdsWarnComponentEnumAttribute(>params); } + return OdsWarnComponentEnumAttribute(>params); } + \ No newline at end of file diff --git a/packages/stencil/components/link/docs/osds-link/usage.mdx b/packages/stencil/components/link/docs/osds-link/usage.mdx index 59250d8d9b..d51cbc20bd 100644 --- 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 Small 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 index b301f828ba..fdc7a496a5 100644 --- 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 index 21daecf0ed..7fbe6505db 100644 --- 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, 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, 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 index d754d5932a..61051f65f2 100644 --- a/packages/stencil/components/link/src/index.html +++ b/packages/stencil/components/link/src/index.html @@ -26,6 +26,8 @@

Contrasted

Default +

Link with href

+Go to OVH