[NIFI-6366] update covalent NgModule imports and add stepper
This closes #31
diff --git a/platform/core/common/styles/_stepper.scss b/platform/core/common/styles/_stepper.scss
index d64552c..939d4fa 100644
--- a/platform/core/common/styles/_stepper.scss
+++ b/platform/core/common/styles/_stepper.scss
@@ -18,3 +18,16 @@
.td-step-header span {
display: none;
}
+
+@mixin fds-stepper-theme($theme) {
+ $primaryColor: map-get(map-get($theme, primary), 500);
+ $primaryColorHover: map-get(map-get($theme, primary), 100);
+ $accentColor: map-get(map-get($theme, accent), 500);
+ $accentColorHover: map-get(map-get($theme, accent), 100);
+
+ body[fds] {
+ .td-steps .td-circle.mat-active {
+ background-color: $accentColor;
+ }
+ }
+}
diff --git a/platform/core/flow-design-system.module.js b/platform/core/flow-design-system.module.js
index 084afb8..4881f53 100644
--- a/platform/core/flow-design-system.module.js
+++ b/platform/core/flow-design-system.module.js
@@ -56,11 +56,12 @@
import {
CovalentCommonModule,
CovalentChipsModule,
- CovalentDataTableModule,
CovalentDialogsModule,
CovalentExpansionPanelModule,
CovalentPagingModule
-} from '@covalent/core/bundles/covalent-core.umd.min.js';
+} from '@covalent/core';
+import { CovalentStepsModule } from '@covalent/core/steps';
+import { CovalentDataTableModule } from '@covalent/core/data-table';
import { FdsDialogsModule } from './dialogs/fds-dialogs.module';
import { FdsSnackBarsModule } from './snackbars/fds-snackbars.module';
@@ -127,6 +128,7 @@
MatTableModule,
CovalentCommonModule,
CovalentChipsModule,
+ CovalentStepsModule,
CovalentDataTableModule,
CovalentDialogsModule,
CovalentExpansionPanelModule,
@@ -171,6 +173,7 @@
MatTableModule,
CovalentCommonModule,
CovalentChipsModule,
+ CovalentStepsModule,
CovalentDataTableModule,
CovalentDialogsModule,
CovalentExpansionPanelModule,
diff --git a/platform/core/theming/_all-theme.scss b/platform/core/theming/_all-theme.scss
index 2504953..4083939 100644
--- a/platform/core/theming/_all-theme.scss
+++ b/platform/core/theming/_all-theme.scss
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
@import '~@angular/material/theming';
@import '~@covalent/core/theming/all-theme';
@import '../common/styles/buttons';
@@ -23,24 +22,26 @@
@import '../common/styles/inputs';
@import '../common/styles/checkboxes';
@import '../common/styles/tables';
+@import '../common/styles/stepper';
@import '../common/styles/links';
@import '../common/styles/buttonToggles';
@import '../common/styles/radios';
// Create a theme.
@mixin fds-theme($theme) {
- // Include theme styles for core and each component used in your app.
- // Alternatively, you can import and @include the theme mixins for each component
- // that you are using.
- @include angular-material-theme($theme);
- @include covalent-theme($theme);
- @include fds-buttons-theme($theme);
- @include fds-expansion-panels-theme($theme);
- @include fds-menus-theme($theme);
- @include fds-input-element-theme($theme);
- @include fds-checkboxes-theme($theme);
- @include fds-tables-theme($theme);
- @include fds-links-theme($theme);
- @include fds-button-toggles-theme($theme);
- @include fds-radios-theme($theme);
+ // Include theme styles for core and each component used in your app.
+ // Alternatively, you can import and @include the theme mixins for each component
+ // that you are using.
+ @include angular-material-theme($theme);
+ @include covalent-theme($theme);
+ @include fds-buttons-theme($theme);
+ @include fds-expansion-panels-theme($theme);
+ @include fds-menus-theme($theme);
+ @include fds-input-element-theme($theme);
+ @include fds-checkboxes-theme($theme);
+ @include fds-tables-theme($theme);
+ @include fds-links-theme($theme);
+ @include fds-stepper-theme($theme);
+ @include fds-button-toggles-theme($theme);
+ @include fds-radios-theme($theme);
}
diff --git a/webapp/components/flow-design-system/fds-demo.html b/webapp/components/flow-design-system/fds-demo.html
index 61ec607..1dd7fad 100644
--- a/webapp/components/flow-design-system/fds-demo.html
+++ b/webapp/components/flow-design-system/fds-demo.html
@@ -594,6 +594,68 @@
</mat-card-content>
</mat-card>
<mat-card>
+ <mat-card-title class="pad-bottom-sm" id="Stepper">Stepper <mat-icon class="link-to-component" routerLink="/" fragment="Stepper">link</mat-icon></mat-card-title>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <td-steps mode="vertical">
+ <td-step label="Version 1"
+ sublabel="by Admin"
+ [active]="true">
+ <div fxLayout="column" fxLayoutAlign="space-between stretch">
+ <div fxLayout="row" class="md-body-2">
+ Comments go here
+ </div>
+ <div fxLayout="row" class="mat-caption">
+ An hour ago
+ </div>
+ </div>
+ </td-step>
+ <td-step label="Version 2"
+ sublabel="by Admin">
+ <div fxLayout="column" fxLayoutAlign="space-between stretch">
+ <div fxLayout="row" class="md-body-2">
+ Comments go here
+ </div>
+ <div fxLayout="row" class="mat-caption">
+ A day ago
+ </div>
+ </div>
+ </td-step>
+ </td-steps>
+ <h3 class="mat-title">Usage</h3>
+ <p>HTML:</p>
+ <pre lang="html">
+ <![CDATA[
+ <td-steps mode="vertical">
+ <td-step label="Version 1"
+ sublabel="by Admin"
+ [active]="true">
+ <div fxLayout="column" fxLayoutAlign="space-between stretch">
+ <div fxLayout="row" class="md-body-2">
+ Description goes here
+ </div>
+ <div fxLayout="row" class="mat-caption">
+ An hour ago
+ </div>
+ </div>
+ </td-step>
+ <td-step label="Version 2"
+ sublabel="by Admin">
+ <div fxLayout="column" fxLayoutAlign="space-between stretch">
+ <div fxLayout="row" class="md-body-2">
+ Description goes here
+ </div>
+ <div fxLayout="row" class="mat-caption">
+ A day ago
+ </div>
+ </div>
+ </td-step>
+ </td-steps>
+ ]]>
+ </pre>
+ </mat-card-content>
+ </mat-card>
+ <mat-card>
<mat-card-title class="pad-bottom-sm" id="Autocomplete">Autocomplete <mat-icon class="link-to-component" routerLink="/" fragment="Autocomplete">link</mat-icon></mat-card-title>
<mat-divider></mat-divider>
<mat-card-content>
diff --git a/webapp/components/flow-design-system/fds-demo.js b/webapp/components/flow-design-system/fds-demo.js
index 16d325e..d785ba1 100644
--- a/webapp/components/flow-design-system/fds-demo.js
+++ b/webapp/components/flow-design-system/fds-demo.js
@@ -16,7 +16,7 @@
*/
import { Component } from '@angular/core';
-import { TdDataTableService } from '@covalent/core/bundles/covalent-core.umd.min.js';
+import { TdDataTableService } from '@covalent/core/data-table';
import { MatDialog } from '@angular/material';
import { FdsDialogService, FdsSnackBarService, FdsAnimations } from '@nifi-fds/core';
import FdsService from 'webapp/services/fds.service.js';
diff --git a/webapp/services/fds.service.js b/webapp/services/fds.service.js
index 784609e..8b7f014 100644
--- a/webapp/services/fds.service.js
+++ b/webapp/services/fds.service.js
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import { TdDataTableService } from '@covalent/core/bundles/covalent-core.umd.min.js';
+import { TdDataTableService } from '@covalent/core/data-table';
import { FdsDialogService, FdsSnackBarService } from '@nifi-fds/core';
import {version} from '../../package.json';
diff --git a/webpack.common.js b/webpack.common.js
index 3f6c70b..af9f6fc 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -80,12 +80,6 @@
},
plugins: [
- // TODO: https://github.com/apache/nifi-fds/pull/12
- new webpack.ProvidePlugin({
- '$': 'jquery',
- jQuery: 'jquery'
- }),
-
// Fix style only entry generating an extra js file
new FixStyleOnlyEntriesPlugin(),
