← Back

link

Polymer-based web component and Sass mixins for a D2L link

Author

Contributors

Rating

d2l-link

Polymer-based web component and Sass mixins for a D2L link.

Links look like this:

example screenshot of link

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.

example screenshot of standard link

Small

Similarly styled to the standard link, but slightly smaller and more compact.

example screenshot of small link

Main

Same size as the standard link, but bolder.

example screenshot of main link

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.

Compatibility

(Loading compatibility data...)

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#^2.4.0
polymer#^1.9.0

Released: 2017-06-21
Maturity: IMPORTED
License: Apache License 2.0

Compatibility

Framework: Polymer 1.0+; Polymer 2.0+ in 4.0.0
Browser: Browser Independent