Build out the basic Codex link component. Per {T314332}, this component will be implemented as a LESS mixin that consumers can apply wherever necessary. Codex will not include any assumptions about class names to target for this style.
In addition to a mixin for the standard link styles, we will also create a mixin for "red link" styles intented only for use when linking non-existing pages in MediaWiki.
## Live Preview
A live preview is visible here: https://829238--wikimedia-codex.netlify.app/sandbox/#cdx-link
## Example Usage
In MediaWiki, or anywhere else that Less is available, users will be able to use the mixin like this:
```lang=less
@import ( reference ) '@wikimedia/codex/mixins/link.less';
a {
.cdx-mixin-link();
&.redlink {
.cdx-mixin-redlink();
}
}
```
## Development considerations
Since this component is being implemented in a way that differs from what we usually do, there are a couple of development questions that we should try to answer:
* How should we document this "component"? It would be great to list "Link" alongside the other components, but there is not a `Link.vue` file (only a Less mixin), so the automated docgen tool won't work here. Ideas for work-arounds? Currently this component is demonstrated in the Sandbox page only.
* How should we publish this mixin (as well as future mixins)? In the linked patch, I have added a simple Vite plugin that copies all mixins in a `public` sub-folder into `dist/mixins`. Less files are copied but not otherwise compiled, so we need to be sure to only reference variables from external packages (like the design tokens package). Will this work for users inside MediaWiki?
==== Design spec
| [[ https://www.figma.com/file/ZKM3aDh9mqnpioOeSG3arg/Link-component---T309248?node-id=101%3A2115 | Figma MVP spec sheet here ]] |
==== Acceptance criteria (or Done)
[-] Design the Link component spec sheet and link Figma in the task
[-] Implement component in Codex
==== Design Review
(more details in [[ https://phabricator.wikimedia.org/T316895#:~:text=bmartinezcalvo-,added%20a%20comment.,-Wed%2C%20Oct%2026 | this comment ]])
[] ~~Add configurable demo to test the component props~~ At the moment we can't implement configurable demos for all components
[-] Red link focus should use `border-color-progressive--focus` since this red link it's not an error but a new page link
[-] External link should be 12px size (start icon is 20px but external link icon should always be 12px since it needs to be smaller).
[] External link icon should be the one created in [[ https://phabricator.wikimedia.org/T261391 | this task ]] (we should add [[ https://www.figma.com/file/1lT9LKOK6wiHLnpraMjP3E/%E2%9D%96-Assets-(Icons%2C-Logos%2C-Illustrations)?node-id=3295%3A13631&viewport=-4457%2C5268%2C1.24 | this icon ]] in Codex)
[] A 4px padding is needed between icon and text (for both startIcon-text and text-externalLink)
[] ~~Focus border is irregular when the link has start or external link icon~~ Acceptable browser behavior