link
Polymer-based web component and Sass mixins for a D2L link
[ This description is mirrored from README.md at github.com/BrightspaceUI/link on 2019-05-10 ]
d2l-link
Polymer-based web component and Sass mixins for a D2L link.
Links look like this:
For further information on this and other components, refer to The Brightspace UI Guide.
Installation
d2l-link
can be installed from Bower:
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 web component or Sass mixins. Which one you use depends on your technology stack and comfort with each.
Polymer
Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-link.html
:
<head>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="d2l-link.html">
</head>
The native <a>
element can now be replaced with <d2l-link>
. Similarly to Sass, the small
and main
link styles can be achieved by adding their corresponding attributes:
<d2l-link href="foo.html">D2L Link</d2l-link>
<d2l-link href="foo.html" small>Small Link</d2l-link>
<d2l-link href="foo.html" main>Main Link</d2l-link>
Sass
Import the d2l-link.scss
file into your application's Sass. Then apply the d2l-link()
mixin to your link elements:
@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:
<a href="foo.html" class="my-link">D2L Link</a>
<a href="foo.html" class="my-link" small>Small Link</a>
<a href="foo.html" class="my-link" main>Main Link</a>
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 globally:
npm install -g polymer-cli
To start a local web server that hosts the demo page and tests:
polymer serve
To lint (eslint and Polymer lint):
npm run lint
To run unit tests locally using Polymer test:
npm run test:polymer:local
To run Galen Tests, which test the resolved CSS:
npm run galen:local:run
To lint AND run local unit tests AND Galen tests:
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.
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.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- d2l-colors#^3.1.2
- d2l-polymer-behaviors#^1.3.0
- polymer#1.9 - 2
- Released
- 2018-02-16
- Maturity
- IMPORTED
- License
- Apache License 2.0
Compatibility
- Framework
- Polymer 2.0+
- Polymer 1.0+ in 3.5.1
- Browser
- Browser Independent