feat(business/datepicker): expose datepicker component for business (#47

)
sbb-design-systems · Jun 21, 2019 · 57a075d · 57a075d
1 parent b7ec7c0
commit 57a075d
Show file tree

Hide file tree

Showing 8 changed files with 188 additions and 100 deletions.
diff --git a/projects/sbb-esta/angular-business/src/lib/datepicker/datepicker.ts b/projects/sbb-esta/angular-business/src/lib/datepicker/datepicker.ts
@@ -0,0 +1 @@
+export * from '../../../../angular-public/src/lib/datepicker/datepicker';
diff --git a/projects/sbb-esta/angular-business/src/public-api.ts b/projects/sbb-esta/angular-business/src/public-api.ts
@@ -3,6 +3,7 @@
  */
 export * from './lib/autocomplete/autocomplete';
 export * from './lib/button/button';
+export * from './lib/datepicker/datepicker';
 export * from './lib/field/field';
 export * from './lib/radio-button/radio-button';
 export * from './lib/select/select';

diff --git a/...ta/angular-public/src/lib/datepicker/datepicker-content/datepicker-content.component.scss b/...ta/angular-public/src/lib/datepicker/datepicker-content/datepicker-content.component.scss
@@ -7,7 +7,7 @@
   .sbb-datepicker-content {
     position: relative;
     width: 100%;
-    top: pxToEm(17);
+    top: pxToEm($datePickerContentTop);
 
     .sbb-calendar {
       @include datePickerCalendar();

diff --git a/projects/sbb-esta/angular-public/src/lib/datepicker/styles/_datepicker-calendar.scss b/projects/sbb-esta/angular-public/src/lib/datepicker/styles/_datepicker-calendar.scss
@@ -1,12 +1,14 @@
 @import 'common';
 
 @mixin datePickerPopup() {
-  @include mq($from: desktop4k) {
-    font-size: pxToRem(23);
-  }
+  @include publicOnly() {
+    @include mq($from: desktop4k) {
+      font-size: pxToRem(23);
+    }
 
-  @include mq($from: desktop5k) {
-    font-size: pxToRem(30);
+    @include mq($from: desktop5k) {
+      font-size: pxToRem(30);
+    }
   }
 
   &-arrow {
@@ -42,12 +44,14 @@
   &-header {
     border-bottom: 1px solid $sbbColorPlatinum;
 
-    @include mq($from: desktop4k) {
-      border-bottom-width: toPx(1 * $scalingFactor4k);
-    }
+    @include publicOnly() {
+      @include mq($from: desktop4k) {
+        border-bottom-width: toPx(1 * $scalingFactor4k);
+      }
 
-    @include mq($from: desktop5k) {
-      border-bottom-width: toPx(1 * $scalingFactor5k);
+      @include mq($from: desktop5k) {
+        border-bottom-width: toPx(1 * $scalingFactor5k);
+      }
     }
   }
 }
@@ -60,6 +64,7 @@
 
     &-months,
     &-years {
+      height: $datePickerCalendarHeaderHeight;
       flex: 1 0 50%;
       text-align: center;
       position: relative;
@@ -71,17 +76,19 @@
         display: block;
         position: absolute;
         width: 0;
-        height: calc(100% - #{pxToEm(2)});
-        top: pxToEm(2);
+        height: calc(100% - #{pxToEm($datePickerCalendarBorderWidth)});
+        top: pxToEm($datePickerCalendarBorderWidth);
         right: 0;
         border-right: 1px solid $sbbColorPlatinum;
 
-        @include mq($from: desktop4k) {
-          border-right-width: toPx(1 * $scalingFactor4k);
-        }
+        @include publicOnly() {
+          @include mq($from: desktop4k) {
+            border-right-width: toPx(1 * $scalingFactor4k);
+          }
 
-        @include mq($from: desktop5k) {
-          border-right-width: toPx(1 * $scalingFactor5k);
+          @include mq($from: desktop5k) {
+            border-right-width: toPx(1 * $scalingFactor5k);
+          }
         }
       }
     }
@@ -90,11 +97,13 @@
     &-right-arrow {
       width: pxToEm($defaultPickerIconSize);
       height: $datePickerCalendarHeaderHeight;
-      margin-top: pxToEm(2);
+      margin-top: pxToEm($datePickerCalendarBorderWidth);
       vertical-align: middle;
 
-      @include mq($from: tabletPortrait) {
-        width: pxToEm($defaultPickerIconSize) + pxToEm(16);
+      @include publicOnly() {
+        @include mq($from: tabletPortrait) {
+          width: pxToEm($defaultPickerIconSize) + pxToEm(16);
+        }
       }
 
       &[disabled] {
@@ -117,10 +126,10 @@
     }
 
     &-label {
-      font-size: pxToEm(21);
+      font-size: $datePickerCalendarHeaderLabelFontSize;
       color: $datePickerCalendarHeaderColor;
       font-family: $fontSbbLight;
-      line-height: 3.4;
+      line-height: $datePickerCalendarHeaderLabelLineHeight;
     }
 
     &-right-arrow {
@@ -138,7 +147,7 @@
 
     td,
     th {
-      color: $sbbColorGrey;
+      color: $datePickerCalendarTableColor;
     }
 
     &-header {
@@ -151,12 +160,14 @@
 
         border-bottom: 1px solid $sbbColorPlatinum;
 
-        @include mq($from: desktop4k) {
-          border-bottom-width: toPx(1 * $scalingFactor4k);
-        }
+        @include publicOnly() {
+          @include mq($from: desktop4k) {
+            border-bottom-width: toPx(1 * $scalingFactor4k);
+          }
 
-        @include mq($from: desktop5k) {
-          border-bottom-width: toPx(1 * $scalingFactor5k);
+          @include mq($from: desktop5k) {
+            border-bottom-width: toPx(1 * $scalingFactor5k);
+          }
         }
       }
 
@@ -266,13 +277,13 @@
 
   &.sbb-datepicker-with-arrows {
     .sbb-datepicker-popup-arrow {
-      left: pxToEm($withArrowsToggleLeftOffset);
+      left: pxToEm($datePickerToggleWithArrowsWrapperArrowLeftOffset);
     }
   }
 
   .sbb-datepicker-content {
     top: auto;
-    bottom: pxToEm(17);
+    bottom: pxToEm($datePickerContentTop);
 
     .sbb-calendar {
       box-shadow: $datePickerRevertCalendarBoxShadow;

diff --git a/projects/sbb-esta/angular-public/src/lib/datepicker/styles/_datepicker-controls.scss b/projects/sbb-esta/angular-public/src/lib/datepicker/styles/_datepicker-controls.scss
@@ -17,24 +17,28 @@
     @include absoluteCenterY();
     @extend %pickerIconsSize;
 
-    @include mq($from: desktop4k) {
-      left: toPx($defaultToggleLeftOffset * $scalingFactor4k);
-    }
+    @include publicOnly() {
+      @include mq($from: desktop4k) {
+        left: toPx($defaultToggleLeftOffset * $scalingFactor4k);
+      }
 
-    @include mq($from: desktop5k) {
-      left: toPx($defaultToggleLeftOffset * $scalingFactor5k);
+      @include mq($from: desktop5k) {
+        left: toPx($defaultToggleLeftOffset * $scalingFactor5k);
+      }
     }
   }
 
   &.sbb-datepicker-arrows-enabled > .sbb-datepicker-toggle {
     left: toPx($withArrowsToggleLeftOffset);
 
-    @include mq($from: desktop4k) {
-      left: toPx($withArrowsToggleLeftOffset * $scalingFactor4k);
-    }
+    @include publicOnly() {
+      @include mq($from: desktop4k) {
+        left: toPx($withArrowsToggleLeftOffset * $scalingFactor4k);
+      }
 
-    @include mq($from: desktop5k) {
-      left: toPx($withArrowsToggleLeftOffset * $scalingFactor5k);
+      @include mq($from: desktop5k) {
+        left: toPx($withArrowsToggleLeftOffset * $scalingFactor5k);
+      }
     }
   }
 
@@ -45,24 +49,28 @@
     &-left {
       left: toPx($withArrowsLeftArrowOffset);
 
-      @include mq($from: desktop4k) {
-        left: toPx($withArrowsLeftArrowOffset * $scalingFactor4k);
-      }
+      @include publicOnly() {
+        @include mq($from: desktop4k) {
+          left: toPx($withArrowsLeftArrowOffset * $scalingFactor4k);
+        }
 
-      @include mq($from: desktop5k) {
-        left: toPx($withArrowsLeftArrowOffset * $scalingFactor5k);
+        @include mq($from: desktop5k) {
+          left: toPx($withArrowsLeftArrowOffset * $scalingFactor5k);
+        }
       }
     }
 
     &-right {
       right: toPx($withArrowsRightArrowOffset);
 
-      @include mq($from: desktop4k) {
-        right: toPx($withArrowsRightArrowOffset * $scalingFactor4k);
-      }
+      @include publicOnly() {
+        @include mq($from: desktop4k) {
+          right: toPx($withArrowsRightArrowOffset * $scalingFactor4k);
+        }
 
-      @include mq($from: desktop5k) {
-        right: toPx($withArrowsRightArrowOffset * $scalingFactor5k);
+        @include mq($from: desktop5k) {
+          right: toPx($withArrowsRightArrowOffset * $scalingFactor5k);
+        }
       }
     }
   }

diff --git a/projects/sbb-esta/angular-public/src/lib/datepicker/styles/_datepicker-input.scss b/projects/sbb-esta/angular-public/src/lib/datepicker/styles/_datepicker-input.scss
@@ -11,48 +11,54 @@
   &.sbb-datepicker-arrows-enabled > .sbb-date-input {
     padding-left: pxToEm($dateInputOneIconPadding - $dateInputBorderWidth);
 
-    @include mq($from: desktop4k) {
-      padding-left: pxToEm(
-        $dateInputOneIconPadding * $scalingFactor4k - $dateInputBorderWidth * $scalingFactor4k
-      );
-    }
+    @include publicOnly() {
+      @include mq($from: desktop4k) {
+        padding-left: pxToEm(
+            $dateInputOneIconPadding * $scalingFactor4k - $dateInputBorderWidth * $scalingFactor4k
+        );
+      }
 
-    @include mq($from: desktop5k) {
-      padding-left: pxToEm(
-        $dateInputOneIconPadding * $scalingFactor5k - $dateInputBorderWidth * $scalingFactor5k
-      );
+      @include mq($from: desktop5k) {
+        padding-left: pxToEm(
+            $dateInputOneIconPadding * $scalingFactor5k - $dateInputBorderWidth * $scalingFactor5k
+        );
+      }
     }
   }
 
   &.sbb-datepicker-arrows-enabled > .sbb-date-input {
     padding-right: pxToEm($dateInputOneIconPadding - $dateInputBorderWidth);
 
-    @include mq($from: desktop4k) {
-      padding-right: pxToEm(
-        $dateInputOneIconPadding * $scalingFactor4k - $dateInputBorderWidth * $scalingFactor4k
-      );
-    }
+    @include publicOnly() {
+      @include mq($from: desktop4k) {
+        padding-right: pxToEm(
+            $dateInputOneIconPadding * $scalingFactor4k - $dateInputBorderWidth * $scalingFactor4k
+        );
+      }
 
-    @include mq($from: desktop5k) {
-      padding-right: pxToEm(
-        $dateInputOneIconPadding * $scalingFactor5k - $dateInputBorderWidth * $scalingFactor5k
-      );
+      @include mq($from: desktop5k) {
+        padding-right: pxToEm(
+            $dateInputOneIconPadding * $scalingFactor5k - $dateInputBorderWidth * $scalingFactor5k
+        );
+      }
     }
   }
 
   &.sbb-datepicker-arrows-enabled.sbb-datepicker-toggle-enabled > .sbb-date-input {
     padding-left: pxToEm($dateInputTwoIconPadding - $dateInputBorderWidth);
 
-    @include mq($from: desktop4k) {
-      padding-left: pxToEm(
-        $dateInputTwoIconPadding * $scalingFactor4k - $dateInputBorderWidth * $scalingFactor4k
-      );
-    }
+    @include publicOnly() {
+      @include mq($from: desktop4k) {
+        padding-left: pxToEm(
+            $dateInputTwoIconPadding * $scalingFactor4k - $dateInputBorderWidth * $scalingFactor4k
+        );
+      }
 
-    @include mq($from: desktop5k) {
-      padding-left: pxToEm(
-        $dateInputTwoIconPadding * $scalingFactor5k - $dateInputBorderWidth * $scalingFactor5k
-      );
+      @include mq($from: desktop5k) {
+        padding-left: pxToEm(
+            $dateInputTwoIconPadding * $scalingFactor5k - $dateInputBorderWidth * $scalingFactor5k
+        );
+      }
     }
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from '../../../../angular-public/src/lib/datepicker/datepicker';