Skip to content

Commit

Permalink
feat(link): add download attribute to <sp-link>
Browse files Browse the repository at this point in the history
address some PR comments, make download a separate unit test and add docs to README
  • Loading branch information
bengfarrell authored and Westbrook committed Mar 3, 2020
1 parent 4811653 commit fefb28e
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 0 deletions.
13 changes: 13 additions & 0 deletions packages/link/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,19 @@ When a link needs to be placed on top of a colored background or a visual, use t
</div>
```

### Download attribute

The download attribute on an `html<a>` tag prompts a user to download a link as opposed to navigating to it. This attribute has
simply been carried forward to `html<sp-link>` to function the same.

While it functions this way without assigning a value, actually assigning the value allows custom naming of the download link in accordance
with normal `html<a>` [rules](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) defined by the browser.

<!-- prettier-ignore -->
```html
This is a <sp-link download="myfile.txt" href="#">download link</sp-link>.
```

## Accessibility

Links are accessible by default, rendered in HTML using the `<a>` element. The correct aria roles will automatically be applied.
26 changes: 26 additions & 0 deletions packages/link/test/link.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,32 @@ import { fixture, elementUpdated, html, expect } from '@open-wc/testing';

describe('Link', () => {
it('loads', async () => {
const el = await fixture<Link>(
html`
<sp-link href="test_url">
Default Link
</sp-link>
`
);

const dlel = await fixture<Link>(
html`
<sp-link href="test_url" download="somefile.txt">
Default Link
</sp-link>
`
);

await elementUpdated(el);
expect(el).to.not.be.undefined;
expect(el.textContent).to.include('Default Link');
// make sure href is being passed to <a>
expect(el).shadowDom.to.equal(
`<a href="test_url" id="anchor" tabindex="0"><slot></slot></a>`
);
});

it('loads[download]', async () => {
const el = await fixture<Link>(
html`
<sp-link href="test_url" download="somefile.txt">
Expand Down

0 comments on commit fefb28e

Please sign in to comment.