feat(datepicker): Added datepicker component.

Fixes #894
dynatrace-oss · Nov 12, 2020 · 244043b · 244043b
1 parent 4c5b4e6
commit 244043b
Show file tree

Hide file tree

Showing 66 changed files with 3,442 additions and 2 deletions.
diff --git a/angular.json b/angular.json
@@ -1437,6 +1437,39 @@
       },
       "schematics": {}
     },
+    "datepicker": {
+      "projectType": "library",
+      "root": "libs/barista-components/experimental/datepicker",
+      "sourceRoot": "libs/barista-components/experimental/datepicker/src",
+      "prefix": "dt",
+      "architect": {
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/barista-components/experimental/datepicker/tsconfig.lib.json",
+              "libs/barista-components/experimental/datepicker/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/barista-components/experimantal/datepicker/**"
+            ]
+          }
+        },
+        "lint-styles": {
+          "builder": "./dist/libs/workspace:stylelint",
+          "options": {
+            "stylelintConfig": ".stylelintrc",
+            "reportFile": "dist/stylelint/report.xml",
+            "exclude": ["**/node_modules/**"],
+            "files": [
+              "libs/barista-components/experimental/datepicker/**/*.scss"
+            ]
+          }
+        }
+      },
+      "schematics": {}
+    },
     "drawer": {
       "projectType": "library",
       "root": "libs/barista-components/drawer",

diff --git a/apps/demos/src/app-routing.module.ts b/apps/demos/src/app-routing.module.ts
@@ -323,7 +323,12 @@ import {
   DtExampleTreeTableSimple,
   DtExampleComboboxCustomOptionHeight,
   DtExampleFilterFieldInfiniteDataDepth,
+<<<<<<< HEAD
   DtExampleSelectCustomValueTemplate,
+=======
+  DtExampleDatepickerDark,
+  DtExampleDatepickerDefault
+>>>>>>> d2067af36... feat(datepicker): Added datepicker component.
 } from '@dynatrace/examples';
 
 // The Routing Module replaces the routing configuration in the root or feature module.
@@ -581,6 +586,8 @@ const ROUTES: Routes = [
   { path: 'drawer-dynamic-example', component: DtExampleDrawerDynamic },
   { path: 'drawer-nested-example', component: DtExampleDrawerNested },
   { path: 'drawer-over-example', component: DtExampleDrawerOver },
+  { path: 'datepicker-dark-example', component: DtExampleDatepickerDark},
+  { path: 'datepicker-default-example', component: DtExampleDatepickerDefault},
   {
     path: 'drawer-table-default-example',
     component: DtExampleDrawerTableDefault,

diff --git a/apps/demos/src/nav-items.ts b/apps/demos/src/nav-items.ts
@@ -438,6 +438,19 @@ export const DT_DEMOS_EXAMPLE_NAV_ITEMS = [
       },
     ],
   },
+  {
+    name: 'datepicker',
+    examples: [
+      {
+        name: 'datepicker-dark-example',
+        route: '/datepicker-dark-example',
+      },
+      {
+        name: 'datepicker-default-example',
+        route: '/datepicker-default-example',
+      },
+    ],
+  },
   {
     name: 'drawer',
     examples: [

diff --git a/apps/dev/src/app.module.ts b/apps/dev/src/app.module.ts
@@ -43,6 +43,7 @@ import { ConsumptionDemo } from './consumption/consumption-demo.component';
 import { ContainerBreakpointObserverDemo } from './container-breakpoint-observer/container-breakpoint-observer-demo.component';
 import { ContextDialogDemo } from './context-dialog/context-dialog-demo.component';
 import { CopyToClipboardDemo } from './copy-to-clipboard/copy-to-clipboard-demo.component';
+import { DatepickerDemo } from './datepicker/datepicker-demo.component';
 import { DrawerDemo } from './drawer/drawer-demo.component';
 import { DrawerTableDemo } from './drawer-table/drawer-table-demo.component';
 import { EmptyStateDemo } from './empty-state/empty-state-demo';
@@ -94,6 +95,9 @@ import { DtIconModule } from '@dynatrace/barista-components/icon';
 import {
   DT_DEFAULT_UI_TEST_CONFIG,
   DT_UI_TEST_CONFIG,
+  DtNativeDateModule,
+  DT_OVERLAY_THEMING_CONFIG,
+  DT_DEFAULT_DARK_THEMING_CONFIG,
 } from '@dynatrace/barista-components/core';
 import { ComboboxDemo } from './combobox/combobox-demo.component';
 
@@ -111,6 +115,7 @@ export class NoopRouteComponent {}
     DtIconModule.forRoot({ svgIconLocation: '/assets/icons/{{name}}.svg' }),
     DevAppDynatraceModule,
     DragDropModule,
+    DtNativeDateModule,
   ],
   declarations: [
     DevApp,
@@ -127,7 +132,7 @@ export class NoopRouteComponent {}
     ConfirmationDialogDemo,
     ContextDialogDemo,
     CopyToClipboardDemo,
-
+    DatepickerDemo,
     DrawerDemo,
     DrawerTableDemo,
     ExpandablePanelDemo,
@@ -184,6 +189,10 @@ export class NoopRouteComponent {}
     Location,
     { provide: LocationStrategy, useClass: PathLocationStrategy },
     { provide: DT_UI_TEST_CONFIG, useValue: DT_DEFAULT_UI_TEST_CONFIG },
+    {
+      provide: DT_OVERLAY_THEMING_CONFIG,
+      useValue: DT_DEFAULT_DARK_THEMING_CONFIG,
+    },
     { provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true } },
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

diff --git a/apps/dev/src/datepicker/datepicker-demo.component.html b/apps/dev/src/datepicker/datepicker-demo.component.html
@@ -0,0 +1,58 @@
+<h1>Datepicker</h1>
+
+<h2>Full datepicker</h2>
+
+<dt-datepicker
+  [startAt]="startAt"
+  [disabled]="isDatepickerDisabled"
+  [isTimeEnabled]="isDatepickerTimeEnabled"
+></dt-datepicker>
+
+<dt-checkbox [(ngModel)]="isDatepickerDisabled">Disabled</dt-checkbox>
+<dt-checkbox [(ngModel)]="isDatepickerTimeEnabled"
+  >Enabled Time Mode</dt-checkbox
+>
+
+<h2>Calendar</h2>
+
+<dt-calendar [startAt]="startAt"></dt-calendar>
+
+<h2>Calendar body only</h2>
+
+<dt-calendar-body [activeDate]="startAt"></dt-calendar-body>
+
+<h2>Timepicker</h2>
+
+<dt-timepicker [disabled]="isTimepickerDisabled"></dt-timepicker>
+
+<dt-checkbox [(ngModel)]="isTimepickerDisabled">Disabled</dt-checkbox>
+
+<div dtTheme=":dark" class="dt-example-dark">
+  <h2>Full Dark Mode Datepicker</h2>
+
+  <dt-datepicker
+    [startAt]="startAt"
+    [disabled]="isDarkDatepickerDisabled"
+    [isTimeEnabled]="isDarkDatepickerTimeEnabled"
+  ></dt-datepicker>
+  <dt-checkbox [(ngModel)]="isDarkDatepickerDisabled">Disabled</dt-checkbox>
+  <dt-checkbox [(ngModel)]="isDarkDatepickerTimeEnabled"
+    >Enabled Time Mode</dt-checkbox
+  >
+
+  <h2>Dark Mode Calendar</h2>
+
+  <dt-calendar [startAt]="startAt"></dt-calendar>
+
+  <h2>Dark Mode Calendar Body Only</h2>
+
+  <dt-calendar-body [activeDate]="startAt"></dt-calendar-body>
+
+  <h2>Dark Mode Timepicker</h2>
+
+  <dt-timepicker
+    dtTheme=":dark"
+    [disabled]="isDarkTimepickerDisabled"
+  ></dt-timepicker>
+  <dt-checkbox [(ngModel)]="isDarkTimepickerDisabled">Disabled</dt-checkbox>
+</div>
diff --git a/apps/dev/src/datepicker/datepicker-demo.component.scss b/apps/dev/src/datepicker/datepicker-demo.component.scss
@@ -0,0 +1,7 @@
+.dt-checkbox {
+  margin-top: 10px;
+}
+
+.dt-example-dark h2 {
+  color: white;
+}
diff --git a/apps/dev/src/datepicker/datepicker-demo.component.ts b/apps/dev/src/datepicker/datepicker-demo.component.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-component',
+  templateUrl: 'datepicker-demo.component.html',
+  styleUrls: ['datepicker-demo.component.scss'],
+})
+export class DatepickerDemo {
+  startAt = new Date(2020, 7, 31);
+  isDatepickerDisabled = false;
+  isTimepickerDisabled = false;
+  isDarkDatepickerDisabled = false;
+  isDarkTimepickerDisabled = false;
+  isDatepickerTimeEnabled = true;
+  isDarkDatepickerTimeEnabled = true;
+}
diff --git a/apps/dev/src/devapp-routing.module.ts b/apps/dev/src/devapp-routing.module.ts
@@ -31,6 +31,7 @@ import { ConsumptionDemo } from './consumption/consumption-demo.component';
 import { ContainerBreakpointObserverDemo } from './container-breakpoint-observer/container-breakpoint-observer-demo.component';
 import { ContextDialogDemo } from './context-dialog/context-dialog-demo.component';
 import { CopyToClipboardDemo } from './copy-to-clipboard/copy-to-clipboard-demo.component';
+import { DatepickerDemo } from './datepicker/datepicker-demo.component';
 import { DrawerDemo } from './drawer/drawer-demo.component';
 import { DrawerTableDemo } from './drawer-table/drawer-table-demo.component';
 import { EmptyStateDemo } from './empty-state/empty-state-demo';
@@ -95,6 +96,7 @@ const routes: Routes = [
   { path: 'context-dialog', component: ContextDialogDemo },
   { path: 'confirmation-dialog', component: ConfirmationDialogDemo },
   { path: 'copy-to-clipboard', component: CopyToClipboardDemo },
+  { path: 'datepicker', component: DatepickerDemo },
   { path: 'drawer', component: DrawerDemo },
   { path: 'drawer-table', component: DrawerTableDemo },
   { path: 'empty-state', component: EmptyStateDemo },

diff --git a/apps/dev/src/devapp.component.ts b/apps/dev/src/devapp.component.ts
@@ -58,6 +58,7 @@ export class DevApp implements AfterContentInit, OnDestroy {
     },
     { name: 'Context-dialog', route: '/context-dialog' },
     { name: 'Copy-to-clipboard', route: '/copy-to-clipboard' },
+    { name: 'Datepicker', route: '/datepicker' },
     { name: 'Drawer', route: '/drawer' },
     { name: 'Drawer-table', route: '/drawer-table' },
     { name: 'Empty-state', route: '/empty-state' },

diff --git a/apps/dev/src/dt-components.module.ts b/apps/dev/src/dt-components.module.ts
@@ -30,6 +30,7 @@ import { DtConsumptionModule } from '@dynatrace/barista-components/consumption';
 import { DtContainerBreakpointObserverModule } from '@dynatrace/barista-components/container-breakpoint-observer';
 import { DtContextDialogModule } from '@dynatrace/barista-components/context-dialog';
 import { DtCopyToClipboardModule } from '@dynatrace/barista-components/copy-to-clipboard';
+import { DtDatepickerModule } from '@dynatrace/barista-components/experimental/datepicker';
 import { DtDrawerModule } from '@dynatrace/barista-components/drawer';
 import { DtDrawerTableModule } from '@dynatrace/barista-components/experimental/drawer-table';
 import { DtEmptyStateModule } from '@dynatrace/barista-components/empty-state';
@@ -95,6 +96,7 @@ import { DtComboboxModule } from '@dynatrace/barista-components/experimental/com
     DtConfirmationDialogModule,
     DtContextDialogModule,
     DtCopyToClipboardModule,
+    DtDatepickerModule,
     DtDrawerModule,
     DtDrawerTableModule,
     DtExpandablePanelModule,

diff --git a/libs/barista-components/config.bzl b/libs/barista-components/config.bzl
@@ -22,6 +22,7 @@ COMPONENTS = [
     "expandable-section",
     "expandable-text",
     "experimental/combobox",
+    "experimental/datepicker",
     "experimental/drawer-table",
     "quick-filter",
     "filter-field",

diff --git a/libs/barista-components/core/index.ts b/libs/barista-components/core/index.ts
@@ -24,3 +24,4 @@ export * from './src/tree/index';
 export * from './src/animations/index';
 export * from './src/overlay/index';
 export * from './src/testing/index';
+export * from './src/date/index';