From accf74dfb9001070119158bdf6df22cae7099469 Mon Sep 17 00:00:00 2001 From: Stacey Van Herk Date: Fri, 11 Dec 2020 13:34:26 -0500 Subject: [PATCH] docs: Replace old readme instructions (#108) * docs: Replace old readme instructions * Further simplify --- README.md | 214 ++++++++---------------------------------------------- 1 file changed, 32 insertions(+), 182 deletions(-) diff --git a/README.md b/README.md index 7ec800e5..a5657ae7 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # navigation -A series of [Polymer](https://www.polymer-project.org/1.0/)-based web components for top level navigation use on D2L pages. +A series of [Polymer](https://polymer-library.polymer-project.org/3.0/docs/devguide/feature-overview)-based web components for top level navigation use on D2L pages. ![screenshot of sample usage](/screenshots/navigation.png?raw=true) @@ -10,46 +10,15 @@ A series of [Polymer](https://www.polymer-project.org/1.0/)-based web components ### d2l-navigation -Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import the following: - -* `d2l-navigation.html` -* `d2l-navigation-main-header.html` -* `d2l-navigation-main-footer.html` +Add the `d2l-navigation` component, and provide sub elements `d2l-navigation-main-header` & `d2l-navigation-main-footer` (along with their respective slot contents). ```html - - - - - - -``` - -Then add the `d2l-navigation`, and provide sub elements `d2l-navigation-main-header` & `d2l-navigation-main-footer` (along with their respective slot contents). + - -```html
This should be on the left. As the width changes it shrinks as needed.
@@ -67,45 +36,14 @@ Then add the `d2l-navigation`, and provide sub elements `d2l-navigation-main-hea ### d2l-navigation-immersive -Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import the following: - -* `d2l-navigation-immersive.html` - -```html - - - - -``` - -Then add the `d2l-navigation-immersive`, providing values for the `backLinkHref` & `backLinkText`. Additionally, you may override any of the 3 slots (`left`, `middle`, `right`). +Add the `d2l-navigation-immersive` component, 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`. - - ```html + +

Economics 101

@@ -118,6 +56,8 @@ Optionally, the max-width can be configured to match the max-width used by the L ``` +Optionally, the max-width can be configured to match the max-width used by the LE by setting `widthType` to `normal`. + ## Secondary Components > 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, @@ -125,42 +65,13 @@ Optionally, the max-width can be configured to match the max-width used by the L ### d2l-navigation-band -Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-navigation-band.html`: - -```html - - - - -``` - -Then add the `d2l-navigation-band`. - ![screenshot of navigation band](/screenshots/navigation-band.png?raw=true) - ```html + + ``` @@ -174,42 +85,15 @@ The `d2l-navigation-band` also includes a `slot` with a custom scrollbar and fad ### d2l-navigation-main-header -Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-navigation-main-header.html`: - -```html - - - - -``` - -Then add the `d2l-navigation-main-header`, and provide elements for the `left` and `right` slots. +Add the `d2l-navigation-main-header` component, and provide elements for the `left` and `right` slots. ![screenshot of navigation main header](/screenshots/navigation-main-header.png?raw=true) - ```html + +
@@ -225,42 +109,15 @@ Then add the `d2l-navigation-main-header`, and provide elements for the `left` a ### d2l-navigation-main-footer -Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-navigation-main-footer.html`: - -```html - - - - -``` - -Then add the `d2l-navigation-main-footer`, and provide elements for the `main` slot. +Add the `d2l-navigation-main-footer` component, and provide elements for the `main` slot. ![screenshot of navigation main footer](/screenshots/navigation-main-footer.png?raw=true) - ```html + +
@@ -283,20 +140,13 @@ Then add the `d2l-navigation-main-footer`, and provide elements for the `main` s ### d2l-navigation-iterator -Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-navigation-iterator.html`: - -```html - - - - -``` - -Then add the `d2l-navigation-iterator`. - ![screenshot of default navigation iterator](/screenshots/d2l-navigation-iterator.png?raw=true) ```html + + ```