Merge pull request #155 from bindable-ui/feature/nav-item-prefix

adding property and styles for nav item prefix-icon with updated documentation

Author: harlio

dev-app/app.html

@@ -52,7 +52,7 @@
                     <c-nav-horizontal-item
                         position="right"
                         href="https://github.com/bindable-ui/bindable"
-                        title="v1.11.10"
+                        title="v1.11.11"
                     ></c-nav-horizontal-item>
                 </c-nav-horizontal>
             </l-box>

dev-app/routes/components/navs/vertical/vertical-nav-item/properties/index.html

@@ -38,6 +38,7 @@
                                     title="Accordion Sub 2"
                                     href="http://google.com"
                                     sub-text="Sub Text Here"
+                                    prefix-icon="share"
                                     ></c-nav-vertical-item>
                                 <c-nav-vertical-item
                                     title="Accordion Sub 3"
@@ -91,10 +92,11 @@
 
         <div>
             <l-stack spacing="var(--s-3)">
-                <c-h3>icon</c-h3>
+                <c-h3>icons & prefix-icon</c-h3>
+                <c-notification type="info">NOTE: The `icon` property requires an accompanying `icon-action` property to render on hover. The `prefix-icon` property will always render and has no accompanying action property.</c-notification>
                 <c-code-sample>
                     <c-nav-vertical c-nav-vertical style="height: 200px; display: block;">
-                        <c-nav-vertical-item state="active" title="Nav Link 1" href="http://google.com" icon="cog"></c-nav-vertical-item>
+                        <c-nav-vertical-item state="active" title="Nav Link 1" href="http://google.com" prefix-icon="share"></c-nav-vertical-item>
                         <c-nav-vertical-item title="Nav Link 2" href="http://google.com" icon="cog" icon-action.call="fireIconFunction()"></c-nav-vertical-item>
                     </c-nav-vertical>
                 </c-code-sample>

package.json

@@ -1,14 +1,14 @@
 {
   "name": "@bindable-ui/bindable",
   "description": "An Aurelia component library",
-  "version": "1.11.10",
+  "version": "1.11.11",
   "repository": {
     "type": "git",
     "url": "https://github.com/bindable-ui/bindable"
   },
   "license": "MIT",
   "devDependencies": {
-    "@bindable-ui/bindable-icons": "^0.3.0",
+    "@bindable-ui/bindable-icons": "^0.3.2",
     "@types/jest": "^24.9.1",
     "@types/jquery": "^3.5.14",
     "@types/lodash": "^4.14.181",

src/components/navs/c-nav-vertical-item/c-nav-vertical-item.css

@@ -187,11 +187,19 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 .nav-vertical-item c-nav-vertical ul li a{
     padding-top: 0;
     padding-bottom: 0;
-    padding-left: 50px;
+    padding-left: 36px;
     font-size: inherit;
     word-break: break-word;
 }
 
+.nav-vertical-item c-nav-vertical ul li a l-icon.prefix-icon {
+    position: absolute;
+    top:  8px;
+    left: 14px;
+    padding: 0 0 5px 5px;
+    display: inline-flex;
+}
+
 /* If the nav item has sub-text */
 .nav-vertical-item c-nav-vertical ul li a span{
     font-size: inherit;
@@ -294,6 +302,18 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 
 
 
+/*------------------------------------*\
+    !PREFIX ICON
+\*------------------------------------*/
+
+.prefix-icon {
+    position: absolute;
+    top:  8px;
+    left: 2px;
+    padding: 0 0 5px 5px;
+    display: inline-flex;
+/*    margin-left: -16px;*/
+}
 
 
 /*------------------------------------*\

src/components/navs/c-nav-vertical-item/c-nav-vertical-item.html

@@ -37,6 +37,14 @@
             if.bind="!accordionItem && title"
             click.delegate="clickTrigger()"
         >
+            <l-icon
+                if.bind="prefixIcon"
+                icon="${prefixIcon}"
+                size="0.875em"
+                align="-0.125em"
+                spacing="0"
+                class="${styles.prefixIcon}"
+            ></l-icon>
             ${title}
             <span
                 class="${styles.sub}"

src/components/navs/c-nav-vertical-item/c-nav-vertical-item.ts

@@ -23,6 +23,8 @@ export class CNavVerticalItem {
     @bindable
     public href;
     @bindable
+    public prefixIcon;
+    @bindable
     public icon;
     @bindable
     public iconAction;

src/global-styles/themes/main.css

@@ -673,7 +673,7 @@ c-nav-vertical{
     --nav-item-background-hover: var(--c_ash);
     --nav-item-color-active: var(--c_white);
     --nav-item-background-active: var(--c_black);
-    --nav-item-active-bar-size: var(--s-5);
+    --nav-item-active-bar-size: 4px;
     --nav-item-active-bar-color-active: var(--c_primaryMain);
     --nav-item-active-bar-color-hover: var(--nav-background);
     --nav-item-active-bar-color: var(--nav-background-color);

yarn.lock

@@ -387,10 +387,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bindable-ui/bindable-icons@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@bindable-ui/bindable-icons/-/bindable-icons-0.3.0.tgz#c72a07a3cb1d57f05c3ab998a1d970e76adf65ea"
-  integrity sha512-yT0xqISa87Z95UJ96fnwXgp7v6uHUKFv9FcqZSDuvTb75qlKC7sBNhEl1PGn3sa5GAC2QmExjZEpDyuFyGTubA==
+"@bindable-ui/bindable-icons@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@bindable-ui/bindable-icons/-/bindable-icons-0.3.2.tgz#9d5262b0037a84fb2ad6cfad2960a58d7207df0f"
+  integrity sha512-XfC3eZTB2Kgl01qemxxnk79MF5eouBgJAClw9MfGAII816yqMO59SnXOCLuXFoXIH2v/b4nbk3fFkU5FWBxUjg==
 
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"