Interactive

An internal utility component used to provide interactivity to other components.

Usage

This component is intended only for internal use (for now). If you need to use it please speak with the HDS team.

How to use this component

Basic use (<button>)

Invocation of the component would look like this:

<Hds::Interactive>
    your content here (will be yielded)
</Hds::Interactive>

In this case, since no @href or @route argument is provided it will generate in output an HTML <button> element.

type="button" HTML attribute is applied by default to the element, but this can be overwritten using the "splattributes".

With @href parameter (<a>)

We can’t support the direct use of the href HTML attribute because we need to rely on the @href Ember argument to differentiate between different types of generated output.

If an @href argument is provided:

<Hds::Interactive @href="https://google.com">
    your content here
</Hds::Interactive>

it will generate in output an HTML <a> link element with target="_blank" and rel="noopener noreferrer" attributes.

We add these attributes by default because this is the most common case (internal links are generally handled using a @route argument). This behavior can be overridden.

If an @isHrefExternal argument is provided with false value:

<Hds::Interactive @href="#your-local-anchor-id" @isHrefExternal={{false}}>
    your content here
</Hds::Interactive>

it will generate in output an HTML <a> link element without the HTML target and rel attributes.

With @route parameter (<LinkTo>/<LinkToExternal>)

If a @route argument is provided:

<Hds::Interactive @route="components" >
    your content here
</Hds::Interactive>

it will generate in output a <LinkTo> component.

If the @route is external to the current engine (more details here), you need to provide an extra @isRouteExternal parameter:

<Hds::Interactive @route="components" @isRouteExternal={{true}} >
    your content here
</Hds::Interactive>

and it will generate in output a <LinkToExternal> component.

All the standard arguments for the <LinkTo/LinkToExternal> components are supported (eg. models, model, query, current-when, replace). For more details about these parameters see the Ember documentation or the LinkTo component API specs.

Component API

Name
href
Description
This is the URL parameter that is passed down to the <a> element.
Name
isHrefExternal
Type
boolean
Description
This controls if the <a> link is external and so for security reasons we need to add the target="_blank" and rel="noopener noreferrer" attributes to it.
Name
route models model query current-when replace
Description
These are the parameters that are passed down as arguments to the <LinkTo> / <LinkToExternal> components.
Name
isRouteExternal
Type
boolean
Description
This controls if the "LinkTo" is external to the Ember engine (more details here) in which case it will use a <LinkToExternal> instead of a simple <LinkTo> for the @route.
Name
…attributes
Description
...attributes spreading is supported on this component.

Showcase

Generated elements

<button> (with no @route or @href provided / default)

<LinkTo> (with @route argument but no @isRouteExternal)

This is a <LinkTo> link

<LinkToExternal> (with @route argument and @isRouteExternal set to true) 

⚠️ We can't render this component in this application (it will work only on Ember engines).

On this page: