feat(business/accordion): expose accordion for business (#99)

Closes #77
sbb-design-systems · Jul 15, 2019 · 1c231fd · 1c231fd
1 parent cdbcb75
commit 1c231fd
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 57 deletions.
diff --git a/projects/sbb-esta/angular-business/src/lib/accordion/accordion.ts b/projects/sbb-esta/angular-business/src/lib/accordion/accordion.ts
@@ -0,0 +1 @@
+export * from '../../../../angular-public/src/lib/accordion/accordion';
diff --git a/projects/sbb-esta/angular-business/src/public-api.ts b/projects/sbb-esta/angular-business/src/public-api.ts
@@ -1,6 +1,7 @@
 /*
  * Public API Surface of angular-business
  */
+export * from './lib/accordion/accordion';
 export * from './lib/autocomplete/autocomplete';
 export * from './lib/button/button';
 export * from './lib/checkbox/checkbox';

diff --git a/projects/sbb-esta/angular-public/src/lib/accordion/accordion/accordion.component.spec.ts b/projects/sbb-esta/angular-public/src/lib/accordion/accordion/accordion.component.spec.ts
@@ -162,14 +162,14 @@ describe('AccordionComponent', () => {
 
     fixture.detectChanges();
 
-    expect(panel.nativeElement.querySelector('.sbb-expansion-indicator')).toBeTruthy(
+    expect(panel.nativeElement.querySelector('.sbb-no-toggle')).toBeFalsy(
       'Expected the expansion indicator to be present.'
     );
 
     fixture.componentInstance.hideToggle = true;
     fixture.detectChanges();
 
-    expect(panel.nativeElement.querySelector('.sbb-expansion-indicator')).toBeFalsy(
+    expect(panel.nativeElement.querySelector('.sbb-no-toggle')).toBeTruthy(
       'Expected the expansion indicator to be removed.'
     );
   });

diff --git a/...lar-public/src/lib/accordion/expansion-panel-header/expansion-panel-header.component.html b/...lar-public/src/lib/accordion/expansion-panel-header/expansion-panel-header.component.html
@@ -1,7 +1,3 @@
 <span class="sbb-expansion-panel-header-content">
   <ng-content></ng-content>
 </span>
-<span class="sbb-expansion-indicator" *ngIf="showToggle()">
-  <sbb-icon-plus *ngIf="!panel.expanded"></sbb-icon-plus>
-  <sbb-icon-minus *ngIf="panel.expanded"></sbb-icon-minus>
-</span>
diff --git a/...lar-public/src/lib/accordion/expansion-panel-header/expansion-panel-header.component.scss b/...lar-public/src/lib/accordion/expansion-panel-header/expansion-panel-header.component.scss
@@ -2,8 +2,14 @@
 
 .sbb-expansion-panel-header {
   @include expansionPanelHeader();
-}
 
-.sbb-expansion-indicator {
-  @include expansionIndicator();
+  &:not(.sbb-no-toggle) {
+    &.sbb-expanded {
+      @include expansionIndicator(true);
+    }
+
+    &:not(.sbb-expanded) {
+      @include expansionIndicator(false);
+    }
+  }
 }
diff --git a/...b-esta/angular-public/src/lib/accordion/expansion-panel/expansion-panel.component.spec.ts b/...b-esta/angular-public/src/lib/accordion/expansion-panel/expansion-panel.component.spec.ts
@@ -303,16 +303,14 @@ describe('ExpansionPanelComponent', () => {
     const fixture = TestBed.createComponent(PanelWithContentComponent);
     fixture.detectChanges();
 
-    const header = fixture.debugElement.query(By.css('.sbb-expansion-panel-header')).nativeElement;
-
-    expect(header.querySelector('.sbb-expansion-indicator')).toBeTruthy(
+    expect(fixture.debugElement.query(By.css('.sbb-no-toggle'))).toBeFalsy(
       'Expected indicator to be shown.'
     );
 
     fixture.componentInstance.hideToggle = true;
     fixture.detectChanges();
 
-    expect(header.querySelector('.sbb-expansion-indicator')).toBeFalsy(
+    expect(fixture.debugElement.query(By.css('.sbb-no-toggle'))).toBeTruthy(
       'Expected indicator to be hidden.'
     );
   });
@@ -389,12 +387,12 @@ describe('ExpansionPanelComponent', () => {
     });
 
     it('should toggle the expansion indicator', () => {
-      expect(panel.querySelector('.sbb-expansion-indicator')).toBeTruthy();
+      expect(panel.querySelector('.sbb-no-toggle')).toBeFalsy();
 
       fixture.componentInstance.disabled = true;
       fixture.detectChanges();
 
-      expect(panel.querySelector('.sbb-expansion-indicator')).toBeFalsy();
+      expect(panel.querySelector('.sbb-no-toggle')).toBeTruthy();
     });
 
     it('should not be able to toggle the panel via a user action if disabled', () => {

diff --git a/projects/sbb-esta/angular-public/src/lib/accordion/styles/_accordion-header.scss b/projects/sbb-esta/angular-public/src/lib/accordion/styles/_accordion-header.scss
@@ -8,12 +8,14 @@
   position: relative;
   background-color: $sbb-accordion-header-bgcolor;
 
-  @include mq($from: desktop4k) {
-    font-size: toEm(1 * $scalingFactor4k);
-  }
+  @include publicOnly() {
+    @include mq($from: desktop4k) {
+      font-size: toEm(1 * $scalingFactor4k);
+    }
 
-  @include mq($from: desktop5k) {
-    font-size: toEm(1 * $scalingFactor5k);
+    @include mq($from: desktop5k) {
+      font-size: toEm(1 * $scalingFactor5k);
+    }
   }
 
   &:focus,
@@ -31,17 +33,19 @@
       display: block;
       position: absolute;
       height: 0;
-      width: calc(100% - #{toPx($sbb-accordion-toggle-size * 2)});
+      width: calc(100% - #{toPx($sbb-accordion-divider-left * 2)});
       bottom: 0;
-      left: toPx($sbb-accordion-toggle-size);
+      left: toPx($sbb-accordion-divider-left);
       border-bottom: 1px solid $sbb-accordion-body-expanded-border-color;
 
-      @include mq($from: desktop4k) {
-        border-width: toPx(1 * $scalingFactor4k);
-      }
+      @include publicOnly() {
+        @include mq($from: desktop4k) {
+          border-width: toPx(1 * $scalingFactor4k);
+        }
 
-      @include mq($from: desktop5k) {
-        border-width: toPx(1 * $scalingFactor5k);
+        @include mq($from: desktop5k) {
+          border-width: toPx(1 * $scalingFactor5k);
+        }
       }
     }
   }
@@ -67,26 +71,40 @@
     overflow: hidden;
     font-size: pxToEm($sbb-accordion-header-font-size);
     font-family: $fontSbbLight;
-    line-height: 1.3;
+    line-height: $sbb-accordion-header-content-line-height;
   }
 }
 
-@mixin expansionIndicator() {
-  @include svgIconColor($sbb-accordion-toggle-icon-color);
-  position: absolute;
-  top: 50%;
-  right: pxToEm($sbb-accordion-toggle-size);
+@mixin expansionToggleArrow($icon) {
+  content: '';
+
+  @include absoluteCenterY;
+
+  right: pxToEm($sbb-accordion-divider-left);
   width: pxToEm($sbb-accordion-toggle-size);
   height: pxToEm($sbb-accordion-toggle-size);
-  border: 1px solid $sbb-accordion-toggle-color;
-  border-radius: 50%;
-  transform: translateY(-50%);
-  text-align: center;
-
-  svg {
-    width: pxToEm($sbb-accordion-toggle-icon-size);
-    height: pxToEm($sbb-accordion-toggle-icon-size);
-    vertical-align: middle;
-    margin-top: pxToEm(2);
+
+  @include publicOnly() {
+    border: 1px solid $sbb-accordion-toggle-color;
+    border-radius: 50%;
+  }
+
+  background: url($icon) no-repeat;
+  background-position: center;
+  background-size: toPx($sbb-accordion-toggle-icon-size) toPx($sbb-accordion-toggle-icon-size);
+}
+
+@mixin expansionIndicator($expanded) {
+  &::before {
+    @if $expanded {
+      @include expansionToggleArrow($sbb-accordion-toggle-expanded);
+
+      @include businessOnly() {
+        transform-origin: toPx($sbb-accordion-toggle-icon-size / 2) toPx($sbb-accordion-toggle-icon-size / 4);
+        transform: rotate(180deg);
+      }
+    } @else {
+      @include expansionToggleArrow($sbb-accordion-toggle);
+    }
   }
 }
diff --git a/projects/sbb-esta/angular-public/src/lib/accordion/styles/_accordion-panel.scss b/projects/sbb-esta/angular-public/src/lib/accordion/styles/_accordion-panel.scss
@@ -7,24 +7,28 @@
   transition: margin 225ms $sbb-accordion-timing-function;
   border: 1px solid transparent;
 
-  @include mq($from: desktop4k) {
-    border-width: toPx(1 * $scalingFactor4k);
-  }
+  @include publicOnly() {
+    @include mq($from: desktop4k) {
+      border-width: toPx(1 * $scalingFactor4k);
+    }
 
-  @include mq($from: desktop5k) {
-    border-width: toPx(1 * $scalingFactor5k);
+    @include mq($from: desktop5k) {
+      border-width: toPx(1 * $scalingFactor5k);
+    }
   }
 
   &.sbb-expanded {
     border-color: $sbb-accordion-body-expanded-border-color;
     margin-bottom: toPx(2);
 
-    @include mq($from: desktop4k) {
-      margin-bottom: toPx(2 * $scalingFactor4k);
-    }
+    @include publicOnly() {
+      @include mq($from: desktop4k) {
+        margin-bottom: toPx(2 * $scalingFactor4k);
+      }
 
-    @include mq($from: desktop5k) {
-      margin-bottom: toPx(2 * $scalingFactor5k);
+      @include mq($from: desktop5k) {
+        margin-bottom: toPx(2 * $scalingFactor5k);
+      }
     }
   }
 }
@@ -44,11 +48,17 @@
     padding: $sbb-accordion-content-padding;
   }
 
-  @include mq($from: desktop4k) {
-    font-size: toEm(1 * $scalingFactor4k);
+  @include publicOnly() {
+    @include mq($from: desktop4k) {
+      font-size: toEm(1 * $scalingFactor4k);
+    }
+
+    @include mq($from: desktop5k) {
+      font-size: toEm(1 * $scalingFactor5k);
+    }
   }
 
-  @include mq($from: desktop5k) {
-    font-size: toEm(1 * $scalingFactor5k);
+  @include businessOnly() {
+    line-height: pxToEm(23);
   }
 }
diff --git a/projects/sbb-esta/angular-public/src/lib/accordion/styles/_accordion-variables.scss b/projects/sbb-esta/angular-public/src/lib/accordion/styles/_accordion-variables.scss
@@ -4,12 +4,29 @@ $sbb-accordion-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
 $sbb-accordion-toggle-size: 32;
 $sbb-accordion-toggle-icon-size: 24;
 $sbb-accordion-toggle-icon-color: $sbbColorGrey;
+$sbb-accordion-divider-left: 32;
 $sbb-accordion-toggle-color: $sbbColorStorm;
 $sbb-accordion-header-padding: pxToEm(40) pxToEm(32 + ($sbb-accordion-toggle-size + 5)) pxToEm(40)
   pxToEm(32);
 $sbb-accordion-header-padding-no-toggle: pxToEm(40) pxToEm(32);
+$sbb-accordion-header-content-line-height: 1.3;
 $sbb-accordion-content-padding-mobile: pxToEm(36) pxToEm(32);
 $sbb-accordion-content-padding: pxToEm(48) pxToEm(32);
 $sbb-accordion-header-font-size: 21;
 $sbb-accordion-header-bgcolor: $sbbColorMilk;
 $sbb-accordion-body-expanded-border-color: $sbbColorCloud;
+
+$sbb-accordion-toggle: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pZCI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBkPSJNMTEuNSwyMC45OTk3IEwxMS41LDMuOTk5NyBNMjAsMTIuNTAwMiBMMywxMi41MDAyIi8+PC9zdmc+';
+$sbb-accordion-toggle-expanded: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIGQ9Ik0yMCwxMi41MDAyIEwzLDEyLjUwMDIiLz48L3N2Zz4=';
+
+@if $sbbBusiness {
+  $sbb-accordion-content-padding: pxToEm(12) pxToEm(16) pxToEm(13) pxToEm(16);
+  $sbb-accordion-header-padding: pxToEm(12) pxToEm(48) pxToEm(13) pxToEm(16);
+  $sbb-accordion-header-padding-no-toggle: $sbb-accordion-content-padding;
+  $sbb-accordion-toggle-size: 24;
+  $sbb-accordion-divider-left: 16;
+  $sbb-accordion-header-content-line-height: toEm(24 / $sbb-accordion-header-font-size);
+
+  $sbb-accordion-toggle: 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJfeDMwX18xXyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7ZmlsbDogJTIzNjY2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTcuNywxMC43TDguNCwxMGwzLjYsMy42bDMuNi0zLjZsMC43LDAuN0wxMiwxNUw3LjcsMTAuN3oiLz48L3N2Zz4=';
+  $sbb-accordion-toggle-expanded: $sbb-accordion-toggle;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from '../../../../angular-public/src/lib/accordion/accordion';