fix(breadcrumb): hide icons expression changed

andy-polhill · Sep 28, 2020 · 40f7586 · 40f7586
1 parent e4ca01d
commit 40f7586
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 21 deletions.
diff --git a/projects/canopy/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.html b/projects/canopy/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.html
@@ -1,7 +1,8 @@
 <div
   class="lg-breadcrumb-item__container"
   [ngClass]="{
-    'lg-breadcrumb-item__container--visible-sm': isSmScreenFeaturedItem
+    'lg-breadcrumb-item__container--visible-sm': isSmScreenFeaturedItem,
+    'lg-breadcrumb-item__container--hide-icons': hideIcons
   }"
 >
   <span class="lg-breadcrumb-item__icon-wrapper" *ngIf="showBackChevron">

diff --git a/projects/canopy/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.scss b/projects/canopy/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.scss
@@ -16,6 +16,16 @@
     }
   }
 
+  &__container--hide-icons {
+    .lg-breadcrumb-item__content .lg-icon {
+      display: none;
+
+      @include lg-breakpoint('md') {
+        display: inline;
+      }
+    }
+  }
+
   .lg-icon {
     @include lg-breakpoint('md') {
       display: inline;
@@ -28,16 +38,6 @@
     }
   }
 
-  &--hide-icons {
-    .lg-breadcrumb-item__content .lg-icon {
-      display: none;
-
-      @include lg-breakpoint('md') {
-        display: inline;
-      }
-    }
-  }
-
   a,
   span {
     display: flex;

diff --git a/projects/canopy/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.spec.ts b/projects/canopy/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.spec.ts
@@ -94,9 +94,12 @@ describe('LgBreadcrumbItemComponent', () => {
       fixture.detectChanges();
     });
 
-    it(`the class should contain 'lg-breadcrumb-item--hide-icons'`, () => {
-      expect(breadcrumbItemEl.getAttribute('class')).toContain(
-        'lg-breadcrumb-item--hide-icons',
+    it('the class should contain hide-icons class', () => {
+      const containerEL = fixture.debugElement.query(
+        By.css('.lg-breadcrumb-item__container'),
+      );
+      expect(containerEL.nativeElement.getAttribute('class')).toContain(
+        'lg-breadcrumb-item__container--hide-icons',
       );
     });
   });

diff --git a/projects/canopy/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts b/projects/canopy/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts
@@ -21,17 +21,20 @@ import { BreadcrumbVariant } from './breadcrumb-item.interface';
 export class LgBreadcrumbItemComponent {
   @HostBinding('class.lg-breadcrumb-item') class = true;
 
-  @HostBinding('class.lg-breadcrumb-item--hide-icons')
-  get iconControl() {
-    return this.hideIcons;
-  }
-
-  hideIcons = false;
-
   icons = iconSet;
 
   index: number;
 
+  set hideIcons(hideIcons: boolean) {
+    this._hideIcons = hideIcons;
+
+    this.cd.detectChanges();
+  }
+
+  get hideIcons() {
+    return this._hideIcons;
+  }
+
   set isSmScreenFeaturedItem(isSmScreenFeaturedItem: boolean) {
     this._isSmScreenFeaturedItem = isSmScreenFeaturedItem;
 
@@ -88,6 +91,8 @@ export class LgBreadcrumbItemComponent {
 
   private _isSmScreenFeaturedItem = false;
 
+  private _hideIcons = false;
+
   constructor(
     private renderer: Renderer2,
     private hostElement: ElementRef,

diff --git a/projects/canopy/src/lib/breadcrumb/breadcrumb.notes.ts b/projects/canopy/src/lib/breadcrumb/breadcrumb.notes.ts
@@ -61,6 +61,7 @@ If there are more than 3 levels of hierarchy, a collapsed breadcrumb should be u
 | \`\`lg-breadcrumb\`\` | Adds the default styles to the breadcrumbs
 | \`\`lg-breadcrumb-item\`\` | Adds the default styles to the breadcrumb items
 | \`\`lg-breadcrumb-item__container\`\` | Adds the default styles to the breadcrumb items container
+| \`\`lg-breadcrumb-item__container--hide-icons\`\` | Adds the default styles to hide icons (excluding forward and backward icons)
 | \`\`lg-breadcrumb-item__container--visible-sm\`\` | Adds the default styles to set a breadcrumb item to be visible on small screens
 | \`\`lg-breadcrumb-item__icon-wrapper\`\` | Adds the default styles to set a breadcrumb item icon wrapper
 | \`\`lg-breadcrumb-item__icon\`\` | Adds the default styles to set a breadcrumb item icon