**[ This description is mirrored from README.md at [github.com/BrightspaceUI/link](https://github.com//BrightspaceUI/link/blob/v5.3.0/README.md) on 2019-05-10 ]** # d2l-link [](https://www.webcomponents.org/element/BrightspaceUI/link) [![Bower version][bower-image]][bower-url] [![Build status][ci-image]][ci-url] [Polymer](https://www.polymer-project.org)-based web component and [Sass](http://sass-lang.com/) mixins for a D2L link. Links look like this:  For further information on this and other components, refer to [The Brightspace UI Guide](https://github.com/BrightspaceUI/guide/wiki). ## Installation `d2l-link` can be installed from [Bower][bower-url]: ```shell bower install d2l-link ``` ## Link Styles The following link styles are available for use in your application: ### Standard This is the standard link style, used in most cases.  ### Small Similarly styled to the standard link, but slightly smaller and more compact.  ### Main Same size as the standard link, but bolder.  ## Usage Link styles can be applied using either a [Polymer](https://www.polymer-project.org/) web component or [Sass](http://sass-lang.com/) mixins. Which one you use depends on your technology stack and comfort with each. ### Polymer Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-link.html`: ```html ``` The native `` element can now be replaced with ``. Similarly to Sass, the `small` and `main` link styles can be achieved by adding their corresponding attributes: ```html D2L Link Small Link Main Link ``` ### Sass Import the `d2l-link.scss` file into your application's Sass. Then apply the `d2l-link()` mixin to your link elements: ```sass @import 'bower_components/d2l-link/d2l-link.scss'; .my-link { @include d2l-link(); } ``` The `small` and `main` styles can be applied by adding corresponding attributes to the HTML markup: ```html D2L Link Small Link Main Link ``` ## Developing, Testing and Contributing After cloning the repo, run `npm install` to install dependencies. If you don't have it already, install the [Polymer CLI](https://www.polymer-project.org/2.0/docs/tools/polymer-cli) globally: ```shell npm install -g polymer-cli ``` To start a [local web server](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#serve) that hosts the demo page and tests: ```shell polymer serve ``` To lint ([eslint](http://eslint.org/) and [Polymer lint](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#lint)): ```shell npm run lint ``` To run unit tests locally using [Polymer test](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#tests): ```shell npm run test:polymer:local ``` To run [Galen Tests](http://galenframework.com/), which test the resolved CSS: ```shell npm run galen:local:run ``` To lint AND run local unit tests AND Galen tests: ```shell npm test ``` ### Dumping Galen Output The output of the Galen tests can be dumped using the command `npm run galen:local:dump`. Screenshots of the test objects will be put in `test\acceptance\dumps`, and can be used to perform perceptual diffs before/after any changes. The "baseline" version should be committed to source control. [bower-url]: http://bower.io/search/?q=d2l-link [bower-image]: https://badge.fury.io/bo/d2l-link.svg [ci-image]: https://travis-ci.org/BrightspaceUI/link.svg?branch=master [ci-url]: https://travis-ci.org/BrightspaceUI/link ## Versioning Commits and PR merges to master will automatically do a minor version bump which will: * Update the version in `package.json` * Add a tag matching the new version * Create a github release matching the new version By using either **[increment major]** or **[increment patch]** notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.