A series of Polymer-based web components for top level navigation use on D2L pages.
These are the components that should be used in the VAST MAJORITY of use cases
Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import the following:
d2l-navigation.htmld2l-navigation-main-header.htmld2l-navigation-main-footer.html
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/d2l-navigation/d2l-navigation.html">
<link rel="import" href="bower_components/d2l-navigation/d2l-navigation-main-header.html">
<link rel="import" href="bower_components/d2l-navigation/d2l-navigation-main-footer.html">
</head>Then add the d2l-navigation, and provide sub elements d2l-navigation-main-header & d2l-navigation-main-footer (along with their respective slot contents).
<d2l-navigation>
<d2l-navigation-main-header>
<div slot="left" class="d2l-navigation-header-left">This should be on the left. As the width changes it shrinks as needed.</div>
<div slot="right" class="d2l-navigation-header-right">This should be on the right. It doesn't shrink.</div>
</d2l-navigation-main-header>
<d2l-navigation-main-footer>
<div slot="main" class="d2l-navigation-s-main-wrapper">Stuff goes in here (small border above and below)</div>
</d2l-navigation-main-footer>
</d2l-navigation>Relevant CSS class name:
--d2l-navigation-shadow-drop-border-display: The default value isblock, but this property can be used to hide the shadow by setting it tonone.
Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import the following:
d2l-navigation-immersive.html
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/d2l-navigation/d2l-navigation-immersive.html">
</head>Then add the d2l-navigation-immersive, providing values for the backLinkHref & backLinkText. Additionally, you may override any of the 3 slots (left, middle, right).
Please note that overridding the left slot will prevent the Back link from displaying. This should only be done in very specialized cases.
Optionally, the max-width can be configured to match the max-width used by the LE by setting widthType to normal.
<d2l-navigation-immersive back-link-href="https://www.d2l.com" back-link-text="Back to D2L">
<div class="d2l-typography d2l-body-standard" slot="middle">
<p>Economics 101</p>
</div>
<div slot="right">
<d2l-navigation-button text="A button">One Button</d2l-navigation-button>
<d2l-navigation-button-close></d2l-navigation-button-close>
<d2l-navigation-button text="Another button">Two Button</d2l-navigation-button>
</div>
</d2l-navigation-immersive>These are the components that make up the Primary Components. There might be an edge case or two where it makes sense to use one of these in isolation, but PLEASE STRONGLY CONSIDER using a Primary Component instead.
Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-navigation-band.html:
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/d2l-navigation/d2l-navigation-band.html">
</head>Then add the d2l-navigation-band.
<d2l-navigation-band></d2l-navigation-band>The d2l-navigation-band also includes a slot with a custom scrollbar and fading effects, but this has only been designed for the d2l-organization-consortium-tabs and should not be used for anything else right now.
Relevant CSS class name:
--d2l-branding-primary-color: Used to customize the colour of the top navigation band.--d2l-navigation-band-slot-height: When using the slot, this is needed to setup the proper scrollbar and fading effects.
Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-navigation-main-header.html:
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/d2l-navigation/d2l-navigation-main-header.html">
</head>Then add the d2l-navigation-main-header, and provide elements for the left and right slots.
<d2l-navigation-main-header>
<div slot="left"></div>
<div slot="right"></div>
</d2l-navigation-main-header>Slots:
left(required): Secondary content (that will shrink with page size) oriented on the left side of the centre gutter (whitespace)right(required): Primary content (that will not shrink with page size) oriented on the right side of the centre gutter (whitespace)
Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-navigation-main-footer.html:
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/d2l-navigation/d2l-navigation-main-footer.html">
</head>Then add the d2l-navigation-main-footer, and provide elements for the main slot.
<d2l-navigation-main-footer>
<div slot="main"></div>
</d2l-navigation-main-footer>Slots:
main(required): Primary content of the footer. The footer will change in size to accommodate its contents
(Placeholder for now)
Relevant CSS class name:
--d2l-navigation-primary-color: Used to customize the hover colour of the highlight links and buttons
Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-navigation-iterator.html:
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/d2l-navigation/d2l-navigation-iterator/d2l-navigation-iterator.html">
</head>Then add the d2l-navigation-iterator.
<d2l-navigation-iterator></d2l-navigation-iterator>There is only one slot, and the default button text can be hidden with hide-text.
<d2l-navigation-iterator hide-text>
<span>User 1 of 17</span>
</d2l-navigation-iterator>The iterator button labels can be customized with previous-text and next-text.
<d2l-navigation-iterator previous-text="Back" next-text="Forward"></d2l-navigation-iterator>The iterator buttons can be hidden completely with no-next or no-previous.
<d2l-navigation-iterator no-next></d2l-navigation-iterator>
<d2l-navigation-iterator no-previous></d2l-navigation-iterator>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-cliTo start a local web server that hosts the demo page and tests:
polymer serveTo lint (eslint and Polymer lint):
npm run lintTo run unit tests locally using Polymer test:
npm run test:polymer:localTo lint AND run local unit tests:
npm testAll version changes should obey semantic versioning rules.
Include either [increment major], [increment minor] or [increment patch] in your merge commit message to automatically increment the package.json version and create a tag during the next build.