@visual-framework/vf-link-list - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

CHANGELOG.md

@@ -8,10 +8,2 @@ # Change Log
 
-**Note:** Version bump only for package @visual-framework/vf-link-list
-
-
-
-
-
-# 1.0.0 (2019-12-17)
-
 * Initial stable release

package.json

 {
-  "version": "1.0.0",
+  "version": "1.0.1",
   "name": "@visual-framework/vf-link-list",
@@ -22,3 +22,3 @@ "description": "vf-link-list component",
   ],
-  "gitHead": "85d3f4d45ea4082e0181ca46692e6ff6f31a25d5"
+  "gitHead": "6c143524e7b9a108997954f5cc3079460b14cbbc"
 }

README.md

@@ -15,2 +15,4 @@ # Link List Component
 
+Except for a Links List that is using the the design variant of `vf-links__list--easy` you can also use:
+
 It can make use of the `vf-badge` component `<span class="vf-badge">Example Tag</span>`.
@@ -20,2 +22,66 @@
 
+### Contextual Based Link Lists
+
+
+#### "On This Page"
+
+If you want to provide a set of links that will anchor to sections on the page you should use:
+
+note: You will need to add a corresponding `id` to the section you are linking to for the anchor to work.
+
+##### Link List
+
+```
+<div class="vf-links vf-links__list--easy">
+  <h3 class="vf-links__heading">On This Page</h3>
+  <ul class="vf-links__list | vf-list">
+    <li class="vf-list__item">
+      <a class="vf-list__link" href="#Anchor-Text">
+        Anchor Text
+        <svg class="vf-icon vf-icon__arrown--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
+      </a>
+    </li>
+  </ul>
+</div>
+```
+
+##### Linked Section In Page
+
+```
+<section class="vf-component" id="Anchor-Text">
+  ...
+</section>
+```
+
+#### "In This Section"
+
+If you want to include quick links as part of a section of content you can use:
+
+##### Link List
+
+```
+<div class="vf-links vf-links--tight vf-links__list--s vf-links__list--very-easy">
+  <h3 class="vf-links__heading">In This Section</h3>
+  <ul class="vf-links__list vf-links__list--secondary | vf-list">
+    <li class="vf-list__item">
+      <a class="vf-list__link" href="#Anchor-Text">
+        Anchor Text
+      </a>
+    </li>
+  </ul>
+</div>
+```
+
+##### Linked Text In Section
+
+```
+<section class="vf-component">
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores dolore eveniet sed totam deleniti, ipsum dolorum cupiditate, aut error quae beatae nemo esse pariatur repellendus illo dicta doloribus alias ipsa.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, ut aut eveniet consectetur rem. Sapiente quis optio cupiditate molestias debitis quisquam ab in. Voluptates, expedita modi aliquam, sint tempore magnam.</p>
+  <p id="Anchor-Text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quo magnam accusamus vel porro, ullam tempora illo atque vitae voluptatum ratione temporibus, est, itaque quasi eum cupiditate mollitia adipisci. Suscipit.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur fuga eveniet ducimus, dolorem sit itaque sequi nisi praesentium consequatur, temporibus tempore rem illo laboriosam libero repudiandae neque labore suscipit expedita.</p>
+</section>
+```
+
+
 ## Install
@@ -22,0 +88,0 @@

vf-link-list.precompiled.js

@@ -55,3 +55,8 @@ /**
 output += runtime.suppressValue(runtime.memberLookup((item),"text"), env.opts.autoescape);
-output += "\n      </a>\n";
+output += "\n";
+if(runtime.contextOrFrameLookup(context, frame, "svg")) {
+output += "        <svg class=\"vf-icon vf-icon__arrown--down | vf-list__icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><title>arrow-button-down</title><path d=\"M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z\"/></svg>\n";
+;
+}
+output += "      </a>\n";
 (function(cb) {if(runtime.memberLookup((item),"badge")) {
@@ -72,3 +77,3 @@ env.getExtension("render")["run"](context,"@vf-badge", function(t_5,t_4) {
 }
-output += "    </li>\n";
+output += "\n    </li>\n";
 next(t_1);
@@ -75,0 +80,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

30646

increased by47.66%

Number of package files

12

increased by9.09%

Lines of code

417

increased by45.8%

Number of lines in readme file

100

increased by194.12%

No dependency changes