Add download attribute to Button and UnstyledLink

[BPScott]

WHY are these changes introduced?

I've got a use case where I want a Button that triggers the download of a file instead of opening it.

The web provides support for this using the download attribute (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download) but there's no way to expose that currently

WHAT is this pull request doing?

Adds a download prop to the Button and UnstyledLink components. It may either be true to render <a href="foo" download> or a string to render <a href="foo" download="downloadPropValue"> which acts as a hint for the filename to use when saving the file.

This only has an effect when you pass a url to a button but I think that's ok, as external acts in a similar way.

How to 🎩

On the playground click the various buttons and see the behaviour.

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {Button, Page, UnstyledLink} from '../src';

interface State {}

export default class Playground extends React.Component<{}, State> {
  render() {
    return (
      <Page title="Playground">
        {/* Add the code you want to test in here */}
        <Button url="/">Link (no download attribute)</Button>
        <br />
        <Button url="/" download={false}>
          Link (download attribute is false)
        </Button>
        <br />
        <Button url="/" download>
          Download without hint (same as download attribute being true)
        </Button>
        <br />
        <Button url="/" download="page.html">
          Download with hint
        </Button>

        <hr />

        <UnstyledLink url="/">Link (no download attribute)</UnstyledLink>
        <br />
        <UnstyledLink url="/" download={false}>
          Link (download attribute is false)
        </UnstyledLink>
        <br />
        <UnstyledLink url="/" download>
          Download without hint (same as download attribute being true)
        </UnstyledLink>
        <br />
        <UnstyledLink url="/" download="page.html">
          Download with hint
        </UnstyledLink>
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[solonaarmstrong-zz]

Might be worth adding an example of each to the style guide.

Otherwise, looks good to me!

[BPScott]

Comments addressed! I don't think it is worth adding an example - there's no visual change and finding a non-contrived example might be tricky as download only works on same origin requests and there's not really any useful files that both storybook and the styleguide would have in common.