Skip to content
Polymer-based web component and Sass mixins for a D2L link
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
screenshots
test
.editorconfig
.eslintignore
.eslintrc.json
.gitattributes
.gitignore
.travis.yml
CODEOWNERS
LICENSE
README.md
d2l-link-behavior.js
d2l-link-shared-styles.js
d2l-link.js
d2l-link.scss
package.json
polymer.json
wct.conf.json

README.md

d2l-link

Published on webcomponents.org Bower version Build status

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.

You can’t perform that action at this time.