fix(link): new option for using an icon with no text (#65)

allianz · Oct 14, 2020 · f01a7b6 · f01a7b6
1 parent 1ac54d0
commit f01a7b6
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 16 deletions.
diff --git a/projects/ng-aquila/documentation/examples/header-cobranding/header-cobranding-example.css b/projects/ng-aquila/documentation/examples/header-cobranding/header-cobranding-example.css
@@ -6,10 +6,6 @@
   margin-left: auto;
 }
 
-.nx-header__actions nx-link nx-icon {
-  margin-right: 0;
-}
-
 nx-header-brand .logo-with-title {
   margin-right: 8px;
 }

diff --git a/projects/ng-aquila/documentation/examples/header-cobranding/header-cobranding-example.html b/projects/ng-aquila/documentation/examples/header-cobranding/header-cobranding-example.html
@@ -49,10 +49,10 @@
       <button nxPlainButton>
         <nx-icon name='search' aria-label="Open Search Bar"></nx-icon>
       </button>
-      <nx-link class="nx-margin-left-s">
+      <nx-link class="nx-margin-left-s" nxStyle='icon-only'>
         <a routerLink='#'><nx-icon name='setting' aria-label="Settings"></nx-icon></a>
       </nx-link>
-      <nx-link class="nx-margin-left-s">
+      <nx-link class="nx-margin-left-s" nxStyle='icon-only'>
         <a routerLink='#'><nx-icon name='info-circle-o' aria-label="More information"></nx-icon></a>
       </nx-link>
       <button nxPlainButton class="nx-margin-left-s">

diff --git a/projects/ng-aquila/documentation/examples/header-icons/header-icons-example.css b/projects/ng-aquila/documentation/examples/header-icons/header-icons-example.css
@@ -1,3 +0,0 @@
-.nx-header__actions nx-link nx-icon {
-  margin-right: 0;
-}

diff --git a/projects/ng-aquila/documentation/examples/header-icons/header-icons-example.html b/projects/ng-aquila/documentation/examples/header-icons/header-icons-example.html
@@ -16,10 +16,10 @@
     <button nxPlainButton>
       <nx-icon name='search' aria-label="Open Search Bar"></nx-icon>
     </button>
-    <nx-link class="nx-margin-left-s">
+    <nx-link class="nx-margin-left-s" nxStyle="icon-only">
       <a routerLink='#'><nx-icon name='setting' aria-label="Settings"></nx-icon></a>
     </nx-link>
-    <nx-link class="nx-margin-left-s">
+    <nx-link class="nx-margin-left-s" nxStyle="icon-only">
       <a routerLink='#'><nx-icon name='info-circle-o' aria-label="More information"></nx-icon></a>
     </nx-link>
     <button nxPlainButton class="nx-margin-left-s">

diff --git a/projects/ng-aquila/documentation/examples/link-icons/link-icons-example.html b/projects/ng-aquila/documentation/examples/link-icons/link-icons-example.html
@@ -2,16 +2,26 @@
 
 <div>
   <nx-link nxStyle='block'>
-    <a routerLink='/documentation'><nx-icon name='arrow-right'></nx-icon>
-    Link</a>
+    <a routerLink='/documentation'>
+      <nx-icon name='arrow-right'></nx-icon>
+      Link
+    </a>
   </nx-link>
 </div>
 
-<p>Link You can also put the icon on the right side with the icon-right option:</p>
+<p>You can also put the icon on the right side with the icon-right option:</p>
 
 <div>
   <nx-link nxStyle='block icon-right'>
     <a routerLink='/documentation'><nx-icon name='arrow-right'></nx-icon>
     Next</a>
   </nx-link>
+</div>
+
+<p>If you want to use a link with an icon and no text, you need to add an icon-only option to remove unnecessary margins:</p>
+
+<div>
+  <nx-link nxStyle='block icon-only'>
+    <a routerLink='/documentation'><nx-icon name='arrow-right'></nx-icon></a>
+  </nx-link>
 </div>
diff --git a/projects/ng-aquila/src/link/link.component.scss b/projects/ng-aquila/src/link/link.component.scss
@@ -140,6 +140,16 @@
   }
 }
 
+:host.nx-link--icon-only ::ng-deep {
+  .c-icon, nx-icon.nx-link__icon {
+    margin-right: 0;
+
+    [dir="rtl"] & {
+      margin-left: 0;
+    }
+  }
+}
+
 // disabled
 :host::ng-deep a[disabled],
 :host::ng-deep a[aria-disabled] {

diff --git a/projects/ng-aquila/src/link/link.component.ts b/projects/ng-aquila/src/link/link.component.ts
@@ -19,7 +19,8 @@ const MAPPING = {
   'black': 'nx-link--black',
   'negative': 'nx-link--negative',
   'text': 'nx-link--text',
-  'icon-right': 'nx-link--icon-right'
+  'icon-right': 'nx-link--icon-right',
+  'icon-only': 'nx-link--icon-only',
 };
 
 const DEFAULT_CLASSES = [ 'nx-link' ];
@@ -45,7 +46,7 @@ export class NxLinkComponent extends MappedStyles implements AfterContentInit {
   /**
    * Sets the style of the link, thereby altering the visual appearance.
    *
-   * You can use any combination of 'black', 'icon-right', 'negative' or 'text'
+   * You can use any combination of 'black', 'icon-right', 'icon-only', 'negative' or 'text'
    */
   classNames;