# File Download

UI helpers and patterns for presenting downloadable files and links.

## Markup

````html
<a class="ds-file-download" href="/files/doc.pdf" download>
  <span class="ds-file-download__label">Download PDF</span>
  # @wmcadigital/ui-asset-link UI helpers and styles for presenting downloadable files and links.
  The package supplies CSS classes and icon styling to create consistent file-download links with
  optional descriptive metadata (file size, type, warnings). ## Install pnpm add
  @wmcadigital/ui-asset-link This package depends on `@wmcadigital/ui-icons` for icon styling —
  the package lists it as a dependency and the styles assume symbol-based or inline SVG icons will
  be available. ## What this package provides - A stylesheet (`dist/styles/main.css`) containing the
  `.ds-file-download` block and variants. - SCSS source at `src/styles/main.scss` for customization.
  - Class names and small markup patterns to present file downloads consistently across the site. ##
  Markup examples Basic download link (decorative icon): ```html
  <a class="ds-file-download" href="/files/doc.pdf" download>
    <svg class="ds-file-download__icon" aria-hidden="true" width="36" height="36">
      <use href="#icon-file-pdf"></use>
    </svg>
    <span class="ds-file-download__desc">
      <span class="ds-file-download__label">Download PDF</span>
      <div class="ds-file-download__warning">PDF, 1.2MB</div>
    </span>
    <svg class="ds-file-download__chevron-icon" aria-hidden="true" width="24" height="24">
      <use href="#icon-chevron-right"></use>
    </svg> </a
></a>

Variants:

- `.ds-file-download--non-accessible` — aligns content for visually-focused layouts (not recommended where accessibility text is required).
- `.ds-file-download--document` — adds document-specific spacing.

Key elements:

- `.ds-file-download__icon` — main file icon (styles set width/height and force icons to inherit `currentColor`).
- `.ds-file-download__chevron-icon` — right-hand chevron icon (CTA colour).
- `.ds-file-download__desc` — container for label and metadata.
- `.ds-file-download__warning` — metadata/warning text (e.g. file type, size).

## Accessibility

- Provide clear file type and size in the visible text where helpful (e.g. "PDF, 1.2MB") so users can make informed choices.
- Decorative icons should include `aria-hidden="true"` and not duplicate text that is already visible.
- If the file requires special handling (assistive tech needs to know format or that the link triggers a download), include that information in the visible label rather than relying on the `download` attribute alone.

## Customisation

- Colours and sizes are driven by the design system variables used in the SCSS (`$size-*`, `--color-primary`, `--color-cta`). Override these variables or modify the compiled CSS to match your site theme.
- The styles force fill/stroke on injected sprite symbols to `currentColor` to ensure icons match the declared colours.

Example override:

```css
.my-download .ds-file-download__icon {
  color: #0a66c2;
}
```

## Development

- SCSS source: `src/styles/main.scss`.
- Build: run the monorepo build from the repo root to regenerate `dist/`:

```bash
pnpm -w -r run build
```

- Linting: `pnpm -w -r run lint`.