From ba39d0c091270ab665a19b4717f03b1c0aec3fd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?= <{ID}+{username}@users.noreply.github.com> Date: Thu, 20 Jul 2023 16:59:57 +0200 Subject: [PATCH 01/13] feat(styles): update stepper --- ...per-demo-inactive-next-step.component.html | 26 +++++++ ...epper-demo-inactive-next-step.component.ts | 18 +++++ .../stepper-demo-page.component.html | 22 +++++- .../stepper-demo-page.component.ts | 12 ++- .../stepper-demo/stepper-demo.component.html | 11 +-- .../stepper-demo/stepper-demo.component.ts | 4 +- .../post-sample-components.module.ts | 78 ++++++++++--------- packages/styles/src/components/stepper.scss | 29 ++++--- .../src/variables/components/_stepper.scss | 6 +- 9 files changed, 137 insertions(+), 69 deletions(-) create mode 100644 packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.html create mode 100644 packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.ts diff --git a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.html b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.html new file mode 100644 index 0000000000..d3f9e6797e --- /dev/null +++ b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.html @@ -0,0 +1,26 @@ +
+ + + +
    +
  1. + + + {{ step }} + + + {{ step }} + +
    2. +
+
diff --git a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.ts b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.ts new file mode 100644 index 0000000000..27839e23c9 --- /dev/null +++ b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.ts @@ -0,0 +1,18 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-stepper-demo-inactive-next-step', + templateUrl: 'stepper-demo-inactive-next-step.component.html', +}) +export class StepperDemoInactiveNextStepComponent { + steps = ['Sender', 'Product', 'Other details', 'Order summary']; + currentIndex = 2; + + isCurrent(step: string): boolean { + return step === this.steps[this.currentIndex]; + } + + getPathTo(step: string): string { + return step.toLowerCase().split(' ').join('-'); + } +} diff --git a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html index 214dc9c1dc..b387869c7c 100644 --- a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html +++ b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html @@ -7,7 +7,27 @@

Stepper

+

Active next steps

+

stepper-demo.component.html

- +

stepper-demo.component.ts

+ +
+ +
+

Inactive next steps

+ +

stepper-demo-inactive-next-step.component.html

+ +

stepper-demo-inactive-next-step.component.ts

+
diff --git a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.ts b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.ts index ab250e2cbc..515b504cef 100644 --- a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.ts +++ b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.ts @@ -2,14 +2,22 @@ * Copyright 2021 by Swiss Post, Information Technology */ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; const codeTemplate = require('!!raw-loader!../stepper-demo/stepper-demo.component.html').default; const codeController = require('!!raw-loader!../stepper-demo/stepper-demo.component.ts').default; +const codeTemplateInactive = + require('!!raw-loader!../stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.html').default; +const codeControllerInactive = + require('!!raw-loader!../stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.ts').default; + @Component({ - templateUrl: 'stepper-demo-page.component.html' + templateUrl: 'stepper-demo-page.component.html', }) export class StepperDemoPageComponent { codeTemplate = codeTemplate; codeController = codeController; + + codeTemplateInactive = codeTemplateInactive; + codeControllerInactive = codeControllerInactive; } diff --git a/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.html b/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.html index eebf5970c8..41ef471ce1 100644 --- a/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.html +++ b/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.html @@ -1,5 +1,5 @@
- +
diff --git a/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.ts b/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.ts index b4559b523e..e78b15bab1 100644 --- a/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.ts +++ b/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.ts @@ -1,8 +1,8 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-stepper-demo', - templateUrl: 'stepper-demo.component.html' + templateUrl: 'stepper-demo.component.html', }) export class StepperDemoComponent { steps = ['Sender', 'Product', 'Other details', 'Order summary']; diff --git a/packages/demo/src/app/post-sample/post-sample-components.module.ts b/packages/demo/src/app/post-sample/post-sample-components.module.ts index 2e0b50ef56..ceb8fd136d 100644 --- a/packages/demo/src/app/post-sample/post-sample-components.module.ts +++ b/packages/demo/src/app/post-sample/post-sample-components.module.ts @@ -1,57 +1,58 @@ -import { TopicTeaserDemoPageComponent } from './components/topic-teaser/topic-teaser-demo-page/topic-teaser-demo-page.component'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { TopicTeaserDemoPageComponent } from './components/topic-teaser/topic-teaser-demo-page/topic-teaser-demo-page.component'; import { HighlightModule } from 'ngx-highlightjs'; import { HighlightProvider } from '../common/highlight.provider'; -import { SvgIconsDemoComponent } from './components/icons/svg-icons-demo/svg-icons-demo.component'; -import { IconsDemoPageComponent } from './components/icons/icons-demo-page/icons-demo-page.component'; -import { NgBootstrapComponentsModule } from '../ng-bootstrap/components/ng-bootstrap-components.module'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgbDatepickerI18n, NgbDatepickerModule, NgbModule } from '@ng-bootstrap/ng-bootstrap'; -import { FeedbackDemoComponent } from './components/feedback/feedback-demo/feedback-demo.component'; -import { FeedbackDemoPageComponent } from './components/feedback/feedback-demo-page/feedback-demo-page.component'; -import { SpinnerDemoComponent } from './components/spinner/spinner-demo/spinner-demo.component'; -import { SpinnerDemoPageComponent } from './components/spinner/spinner-demo-page/spinner-demo-page.component'; -import { SpinnerMiniDemoComponent } from './components/spinner/spinner-mini-demo/spinner-mini-demo.component'; -import { SizingDemoComponent } from './components/sizing/sizing-demo/sizing-demo.component'; -import { SpacingDemoComponent } from './components/sizing/spacing-demo/spacing-demo.component'; -import { ResponsiveSizingDemoComponent } from './components/sizing/responsive-sizing-demo/responsive-sizing-demo.component'; -import { SizingDemoPageComponent } from './components/sizing/sizing-demo-page/sizing-demo-page.component'; -import { StepperDemoComponent } from './components/stepper/stepper-demo/stepper-demo.component'; -import { StepperDemoPageComponent } from './components/stepper/stepper-demo-page/stepper-demo-page.component'; -import { CustomSelectFloatingDemoComponent } from './components/custom-select/custom-select-floating-demo/custom-select-floating-demo.component'; -import { CustomSelectDemoComponent } from './components/custom-select/custom-select-demo/custom-select-demo.component'; -import { CustomSelectDemoPageComponent } from './components/custom-select/custom-select-demo-page/custom-select-demo-page.component'; -import { - RemoveSpacesPipe, - ReplaceHyphenPipe, -} from './components/sizing/sizing-demo-page/sizing-demo-page-class-display.pipe'; -import { NotificationOverlayPageComponent } from './components/notification-overlay/notification-overlay-demo-page/notification-overlay-page.component'; -import { NotificationOverlayDemoComponent } from './components/notification-overlay/notification-overlay/notification-overlay-demo.component'; -import { NotificationOverlayContentComponent } from './components/notification-overlay/notification-overlay-content/notification-overlay-content'; -import { SubnavigationDemoComponent } from './components/subnavigation/subnavigation-demo/subnavigation-demo.component'; -import { SubnavigationDemoPageComponent } from './components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component'; +import { NgxDatatableModule } from '@swimlane/ngx-datatable'; +import { PostCommonModule } from '../common/post-common.module'; import { CustomDatepickerI18n, I18n, } from '../ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-localization.service'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { PostCommonModule } from '../common/post-common.module'; -import { PostCardsDemoPageComponent } from './components/post-cards/post-cards-demo-page/post-cards-demo-page.component'; +import { NgBootstrapComponentsModule } from '../ng-bootstrap/components/ng-bootstrap-components.module'; +import { CustomSelectDemoPageComponent } from './components/custom-select/custom-select-demo-page/custom-select-demo-page.component'; +import { CustomSelectDemoComponent } from './components/custom-select/custom-select-demo/custom-select-demo.component'; +import { CustomSelectFloatingDemoComponent } from './components/custom-select/custom-select-floating-demo/custom-select-floating-demo.component'; +import { DatatableDemoPageComponent } from './components/datatable/datatable-demo-page/datatable-demo-page.component'; +import { DatatableDemoComponent } from './components/datatable/datatable-demo/datatable-demo.component'; +import { DatatableEditableDemoComponent } from './components/datatable/datatable-editable-demo/datatable-editable-demo.component'; +import { DatatableLoadingDemoComponent } from './components/datatable/datatable-loading-demo/datatable-loading-demo.component'; +import { DatatablePaginatedDemoComponent } from './components/datatable/datatable-paginated-demo/datatable-paginated-demo.component'; +import { FeedbackDemoPageComponent } from './components/feedback/feedback-demo-page/feedback-demo-page.component'; +import { FeedbackDemoComponent } from './components/feedback/feedback-demo/feedback-demo.component'; +import { FormsDemoPageComponent } from './components/forms/forms-demo-page/forms-demo-page.component'; +import { IconsDemoPageComponent } from './components/icons/icons-demo-page/icons-demo-page.component'; +import { SvgIconsDemoComponent } from './components/icons/svg-icons-demo/svg-icons-demo.component'; +import { NotificationOverlayContentComponent } from './components/notification-overlay/notification-overlay-content/notification-overlay-content'; +import { NotificationOverlayPageComponent } from './components/notification-overlay/notification-overlay-demo-page/notification-overlay-page.component'; +import { NotificationOverlayDemoComponent } from './components/notification-overlay/notification-overlay/notification-overlay-demo.component'; import { PostCardButtonComponent } from './components/post-cards/post-card-button/post-card-button.component'; import { PostCardProductNavigationComponent } from './components/post-cards/post-card-product-navigation/post-card-product-navigation.component'; import { PostCardProductTeaserComponent } from './components/post-cards/post-card-product-teaser/post-card-product-teaser.component'; +import { PostCardsDemoPageComponent } from './components/post-cards/post-cards-demo-page/post-cards-demo-page.component'; +import { ResponsiveSizingDemoComponent } from './components/sizing/responsive-sizing-demo/responsive-sizing-demo.component'; +import { + RemoveSpacesPipe, + ReplaceHyphenPipe, +} from './components/sizing/sizing-demo-page/sizing-demo-page-class-display.pipe'; +import { SizingDemoPageComponent } from './components/sizing/sizing-demo-page/sizing-demo-page.component'; +import { SizingDemoComponent } from './components/sizing/sizing-demo/sizing-demo.component'; +import { SpacingDemoComponent } from './components/sizing/spacing-demo/spacing-demo.component'; +import { SpinnerDemoPageComponent } from './components/spinner/spinner-demo-page/spinner-demo-page.component'; +import { SpinnerDemoComponent } from './components/spinner/spinner-demo/spinner-demo.component'; +import { SpinnerMiniDemoComponent } from './components/spinner/spinner-mini-demo/spinner-mini-demo.component'; +import { StepperDemoInactiveNextStepComponent } from './components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component'; +import { StepperDemoPageComponent } from './components/stepper/stepper-demo-page/stepper-demo-page.component'; +import { StepperDemoComponent } from './components/stepper/stepper-demo/stepper-demo.component'; +import { SubnavigationDemoPageComponent } from './components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component'; +import { SubnavigationDemoComponent } from './components/subnavigation/subnavigation-demo/subnavigation-demo.component'; import { TopicTeaserDemoComponent } from './components/topic-teaser/topic-teaser-demo/topic-teaser-demo.component'; import { TopicTeaserRightDemoComponent } from './components/topic-teaser/topic-teaser-right-demo/topic-teaser-right-demo.component'; -import { DatatableDemoComponent } from './components/datatable/datatable-demo/datatable-demo.component'; -import { DatatablePaginatedDemoComponent } from './components/datatable/datatable-paginated-demo/datatable-paginated-demo.component'; -import { DatatableEditableDemoComponent } from './components/datatable/datatable-editable-demo/datatable-editable-demo.component'; -import { DatatableDemoPageComponent } from './components/datatable/datatable-demo-page/datatable-demo-page.component'; -import { NgxDatatableModule } from '@swimlane/ngx-datatable'; -import { FormsDemoPageComponent } from './components/forms/forms-demo-page/forms-demo-page.component'; -import { DatatableLoadingDemoComponent } from './components/datatable/datatable-loading-demo/datatable-loading-demo.component'; @NgModule({ imports: [ @@ -103,6 +104,7 @@ import { DatatableLoadingDemoComponent } from './components/datatable/datatable- CustomSelectFloatingDemoComponent, CustomSelectDemoPageComponent, StepperDemoComponent, + StepperDemoInactiveNextStepComponent, StepperDemoPageComponent, FormsDemoPageComponent, ], diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index f487cdbca7..d56a13ce81 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -88,12 +88,6 @@ content: counter(step-index); } - &:hover::before { - color: stepper.$stepper-indicator-hover-color; - background-color: stepper.$stepper-indicator-hover-bg; - background-image: stepper.$stepper-indicator-hover-check-icon; - } - &[aria-current] ~ ::before { color: stepper.$stepper-indicator-future-color; background-color: stepper.$stepper-indicator-future-bg; @@ -104,11 +98,24 @@ } } +.stepper-interactive { + &:hover::before { + color: stepper.$stepper-indicator-hover-color; + background-color: stepper.$stepper-indicator-hover-bg; + background-image: stepper.$stepper-indicator-hover-check-icon; + } + + &:hover .stepper-link { + color: stepper.$stepper-link-hover-color; + } +} + .stepper-link { padding-top: stepper.$stepper-indicator-height + stepper.$stepper-link-gap; text-decoration: none; color: stepper.$stepper-link-color; transition: color 250ms; + text-align: center; .stepper-item[aria-current] > & { color: stepper.$stepper-link-current-color; @@ -116,10 +123,6 @@ font-weight: stepper.$stepper-link-current-font-weight; } - &:hover { - color: stepper.$stepper-link-hover-color; - } - &:focus-visible { outline: none; } @@ -127,12 +130,6 @@ @include media-breakpoint-down(rg) { .stepper-item { - &[aria-current] .stepper-link { - position: absolute; - bottom: 0; - left: 0; - } - &:not([aria-current]) .stepper-link { overflow: hidden; white-space: nowrap; diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss index 42419e6565..d1c7bad30e 100644 --- a/packages/styles/src/variables/components/_stepper.scss +++ b/packages/styles/src/variables/components/_stepper.scss @@ -10,8 +10,8 @@ $stepper-bar-height: spacing.$size-micro; $stepper-indicator-height: spacing.$size-bigger-big; $stepper-indicator-border-width: spacing.$size-micro; $stepper-indicator-border-color: color.$white; -$stepper-indicator-font-size: type.$font-size-bigger-regular; -$stepper-indicator-font-weight: type.$font-weight-bold; +$stepper-indicator-font-size: type.$font-size-regular; +$stepper-indicator-font-weight: type.$font-weight-base; $stepper-indicator-bg: color.$yellow; $stepper-indicator-color: color.$black; $_stepper-indicator-check-icon: icon-fn.get-colored-svg-url('2105', $stepper-indicator-color); @@ -32,5 +32,5 @@ $stepper-link-gap: spacing.$size-mini; $stepper-link-color: color.$gray-60; $stepper-link-hover-color: color.$black; $stepper-link-current-color: color.$black; -$stepper-link-current-font-size: type.$font-size-bigger-regular; +$stepper-link-current-font-size: type.$font-size-regular; $stepper-link-current-font-weight: type.$font-weight-bold; From 7a14568a30b4a3a9aa7587e82443e0eb22f66eab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?= <{ID}+{username}@users.noreply.github.com> Date: Thu, 20 Jul 2023 17:06:28 +0200 Subject: [PATCH 02/13] Add changeset --- .changeset/rare-kids-drum.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/rare-kids-drum.md diff --git a/.changeset/rare-kids-drum.md b/.changeset/rare-kids-drum.md new file mode 100644 index 0000000000..488ef7ca34 --- /dev/null +++ b/.changeset/rare-kids-drum.md @@ -0,0 +1,8 @@ +--- +'@swisspost/design-system-styles': patch +'@swisspost/design-system-demo': patch +--- + +- Updated font styles and sizes. +- Improved position of the badge's label on small viewport. +- Fixed and clarified how to use the stepper to display active or inactive next steps. From d67baf63cd23d19aeb6d663d1bd617448151a94c Mon Sep 17 00:00:00 2001 From: imagoiq <{ID}+{username}@users.noreply.github.com> Date: Wed, 26 Jul 2023 10:38:58 +0200 Subject: [PATCH 03/13] Separate changeset --- .changeset/new-grapes-smell.md | 5 +++++ .changeset/rare-kids-drum.md | 5 +---- 2 files changed, 6 insertions(+), 4 deletions(-) create mode 100644 .changeset/new-grapes-smell.md diff --git a/.changeset/new-grapes-smell.md b/.changeset/new-grapes-smell.md new file mode 100644 index 0000000000..06d0fae19b --- /dev/null +++ b/.changeset/new-grapes-smell.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-demo': patch +--- + +Fixed and clarified how to use the stepper to display active or inactive next steps. diff --git a/.changeset/rare-kids-drum.md b/.changeset/rare-kids-drum.md index 488ef7ca34..283d4508eb 100644 --- a/.changeset/rare-kids-drum.md +++ b/.changeset/rare-kids-drum.md @@ -1,8 +1,5 @@ --- '@swisspost/design-system-styles': patch -'@swisspost/design-system-demo': patch --- -- Updated font styles and sizes. -- Improved position of the badge's label on small viewport. -- Fixed and clarified how to use the stepper to display active or inactive next steps. +Updated font styles and sizes. Improved position of the badge's label on small viewport. From 7ebe839350be0510428f8f191b81cc0ecb3b662d Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Thu, 27 Jul 2023 13:14:51 +0200 Subject: [PATCH 04/13] Add changeset context --- .changeset/rare-kids-drum.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/rare-kids-drum.md b/.changeset/rare-kids-drum.md index 283d4508eb..2c0541b154 100644 --- a/.changeset/rare-kids-drum.md +++ b/.changeset/rare-kids-drum.md @@ -2,4 +2,4 @@ '@swisspost/design-system-styles': patch --- -Updated font styles and sizes. Improved position of the badge's label on small viewport. +Stepper: Updated font styles and sizes. Improved position of the badge's label on small viewport. From 360bfedc5e7a1a8be261103be5b144e47cb6b756 Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Thu, 27 Jul 2023 13:16:16 +0200 Subject: [PATCH 05/13] Add context to changeset --- .changeset/new-grapes-smell.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/new-grapes-smell.md b/.changeset/new-grapes-smell.md index 06d0fae19b..b69a974114 100644 --- a/.changeset/new-grapes-smell.md +++ b/.changeset/new-grapes-smell.md @@ -2,4 +2,4 @@ '@swisspost/design-system-demo': patch --- -Fixed and clarified how to use the stepper to display active or inactive next steps. +Stepper: Fixed and clarified usage to display active or inactive next steps. From 6ffe9ef387d8d4ef1450b85edd5543f9a2e1fbf3 Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Thu, 3 Aug 2023 10:17:05 +0200 Subject: [PATCH 06/13] Revert inactive version only --- ...per-demo-inactive-next-step.component.html | 26 ------- ...epper-demo-inactive-next-step.component.ts | 18 ----- .../stepper-demo-page.component.html | 28 +------ .../stepper-demo-page.component.ts | 9 +-- .../stepper-demo/stepper-demo.component.html | 9 ++- .../post-sample-components.module.ts | 78 +++++++++---------- packages/styles/src/components/stepper.scss | 16 +--- 7 files changed, 53 insertions(+), 131 deletions(-) delete mode 100644 packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.html delete mode 100644 packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.ts diff --git a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.html b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.html deleted file mode 100644 index d3f9e6797e..0000000000 --- a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.html +++ /dev/null @@ -1,26 +0,0 @@ -
- - - -
    -
  1. - - - {{ step }} - - - {{ step }} - -
    2. -
-
diff --git a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.ts b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.ts deleted file mode 100644 index 27839e23c9..0000000000 --- a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-stepper-demo-inactive-next-step', - templateUrl: 'stepper-demo-inactive-next-step.component.html', -}) -export class StepperDemoInactiveNextStepComponent { - steps = ['Sender', 'Product', 'Other details', 'Order summary']; - currentIndex = 2; - - isCurrent(step: string): boolean { - return step === this.steps[this.currentIndex]; - } - - getPathTo(step: string): string { - return step.toLowerCase().split(' ').join('-'); - } -} diff --git a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html index b387869c7c..451fa16bc2 100644 --- a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html +++ b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html @@ -2,32 +2,12 @@ ~ Copyright 2021 by Swiss Post, Information Technology --> -
-

Stepper

+
+

Stepper

-

Active next steps

-

stepper-demo.component.html

- -

stepper-demo.component.ts

- -
- -
-

Inactive next steps

- -

stepper-demo-inactive-next-step.component.html

- -

stepper-demo-inactive-next-step.component.ts

- + +
diff --git a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.ts b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.ts index 515b504cef..b8caf771cb 100644 --- a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.ts +++ b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.ts @@ -3,21 +3,14 @@ */ import { Component } from '@angular/core'; + const codeTemplate = require('!!raw-loader!../stepper-demo/stepper-demo.component.html').default; const codeController = require('!!raw-loader!../stepper-demo/stepper-demo.component.ts').default; -const codeTemplateInactive = - require('!!raw-loader!../stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.html').default; -const codeControllerInactive = - require('!!raw-loader!../stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component.ts').default; - @Component({ templateUrl: 'stepper-demo-page.component.html', }) export class StepperDemoPageComponent { codeTemplate = codeTemplate; codeController = codeController; - - codeTemplateInactive = codeTemplateInactive; - codeControllerInactive = codeControllerInactive; } diff --git a/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.html b/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.html index 41ef471ce1..f47c8f6f05 100644 --- a/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.html +++ b/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.html @@ -11,12 +11,15 @@
  • - - + + {{ step }} + + {{ step }} +
    • diff --git a/packages/demo/src/app/post-sample/post-sample-components.module.ts b/packages/demo/src/app/post-sample/post-sample-components.module.ts index ceb8fd136d..2e0b50ef56 100644 --- a/packages/demo/src/app/post-sample/post-sample-components.module.ts +++ b/packages/demo/src/app/post-sample/post-sample-components.module.ts @@ -1,58 +1,57 @@ -import { CommonModule } from '@angular/common'; +import { TopicTeaserDemoPageComponent } from './components/topic-teaser/topic-teaser-demo-page/topic-teaser-demo-page.component'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; -import { TopicTeaserDemoPageComponent } from './components/topic-teaser/topic-teaser-demo-page/topic-teaser-demo-page.component'; import { HighlightModule } from 'ngx-highlightjs'; import { HighlightProvider } from '../common/highlight.provider'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { NgbDatepickerI18n, NgbDatepickerModule, NgbModule } from '@ng-bootstrap/ng-bootstrap'; -import { NgxDatatableModule } from '@swimlane/ngx-datatable'; -import { PostCommonModule } from '../common/post-common.module'; -import { - CustomDatepickerI18n, - I18n, -} from '../ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-localization.service'; +import { SvgIconsDemoComponent } from './components/icons/svg-icons-demo/svg-icons-demo.component'; +import { IconsDemoPageComponent } from './components/icons/icons-demo-page/icons-demo-page.component'; import { NgBootstrapComponentsModule } from '../ng-bootstrap/components/ng-bootstrap-components.module'; -import { CustomSelectDemoPageComponent } from './components/custom-select/custom-select-demo-page/custom-select-demo-page.component'; -import { CustomSelectDemoComponent } from './components/custom-select/custom-select-demo/custom-select-demo.component'; -import { CustomSelectFloatingDemoComponent } from './components/custom-select/custom-select-floating-demo/custom-select-floating-demo.component'; -import { DatatableDemoPageComponent } from './components/datatable/datatable-demo-page/datatable-demo-page.component'; -import { DatatableDemoComponent } from './components/datatable/datatable-demo/datatable-demo.component'; -import { DatatableEditableDemoComponent } from './components/datatable/datatable-editable-demo/datatable-editable-demo.component'; -import { DatatableLoadingDemoComponent } from './components/datatable/datatable-loading-demo/datatable-loading-demo.component'; -import { DatatablePaginatedDemoComponent } from './components/datatable/datatable-paginated-demo/datatable-paginated-demo.component'; -import { FeedbackDemoPageComponent } from './components/feedback/feedback-demo-page/feedback-demo-page.component'; +import { NgbDatepickerI18n, NgbDatepickerModule, NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { FeedbackDemoComponent } from './components/feedback/feedback-demo/feedback-demo.component'; -import { FormsDemoPageComponent } from './components/forms/forms-demo-page/forms-demo-page.component'; -import { IconsDemoPageComponent } from './components/icons/icons-demo-page/icons-demo-page.component'; -import { SvgIconsDemoComponent } from './components/icons/svg-icons-demo/svg-icons-demo.component'; -import { NotificationOverlayContentComponent } from './components/notification-overlay/notification-overlay-content/notification-overlay-content'; -import { NotificationOverlayPageComponent } from './components/notification-overlay/notification-overlay-demo-page/notification-overlay-page.component'; -import { NotificationOverlayDemoComponent } from './components/notification-overlay/notification-overlay/notification-overlay-demo.component'; -import { PostCardButtonComponent } from './components/post-cards/post-card-button/post-card-button.component'; -import { PostCardProductNavigationComponent } from './components/post-cards/post-card-product-navigation/post-card-product-navigation.component'; -import { PostCardProductTeaserComponent } from './components/post-cards/post-card-product-teaser/post-card-product-teaser.component'; -import { PostCardsDemoPageComponent } from './components/post-cards/post-cards-demo-page/post-cards-demo-page.component'; +import { FeedbackDemoPageComponent } from './components/feedback/feedback-demo-page/feedback-demo-page.component'; +import { SpinnerDemoComponent } from './components/spinner/spinner-demo/spinner-demo.component'; +import { SpinnerDemoPageComponent } from './components/spinner/spinner-demo-page/spinner-demo-page.component'; +import { SpinnerMiniDemoComponent } from './components/spinner/spinner-mini-demo/spinner-mini-demo.component'; +import { SizingDemoComponent } from './components/sizing/sizing-demo/sizing-demo.component'; +import { SpacingDemoComponent } from './components/sizing/spacing-demo/spacing-demo.component'; import { ResponsiveSizingDemoComponent } from './components/sizing/responsive-sizing-demo/responsive-sizing-demo.component'; +import { SizingDemoPageComponent } from './components/sizing/sizing-demo-page/sizing-demo-page.component'; +import { StepperDemoComponent } from './components/stepper/stepper-demo/stepper-demo.component'; +import { StepperDemoPageComponent } from './components/stepper/stepper-demo-page/stepper-demo-page.component'; +import { CustomSelectFloatingDemoComponent } from './components/custom-select/custom-select-floating-demo/custom-select-floating-demo.component'; +import { CustomSelectDemoComponent } from './components/custom-select/custom-select-demo/custom-select-demo.component'; +import { CustomSelectDemoPageComponent } from './components/custom-select/custom-select-demo-page/custom-select-demo-page.component'; import { RemoveSpacesPipe, ReplaceHyphenPipe, } from './components/sizing/sizing-demo-page/sizing-demo-page-class-display.pipe'; -import { SizingDemoPageComponent } from './components/sizing/sizing-demo-page/sizing-demo-page.component'; -import { SizingDemoComponent } from './components/sizing/sizing-demo/sizing-demo.component'; -import { SpacingDemoComponent } from './components/sizing/spacing-demo/spacing-demo.component'; -import { SpinnerDemoPageComponent } from './components/spinner/spinner-demo-page/spinner-demo-page.component'; -import { SpinnerDemoComponent } from './components/spinner/spinner-demo/spinner-demo.component'; -import { SpinnerMiniDemoComponent } from './components/spinner/spinner-mini-demo/spinner-mini-demo.component'; -import { StepperDemoInactiveNextStepComponent } from './components/stepper/stepper-demo-inactive-next-step/stepper-demo-inactive-next-step.component'; -import { StepperDemoPageComponent } from './components/stepper/stepper-demo-page/stepper-demo-page.component'; -import { StepperDemoComponent } from './components/stepper/stepper-demo/stepper-demo.component'; -import { SubnavigationDemoPageComponent } from './components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component'; +import { NotificationOverlayPageComponent } from './components/notification-overlay/notification-overlay-demo-page/notification-overlay-page.component'; +import { NotificationOverlayDemoComponent } from './components/notification-overlay/notification-overlay/notification-overlay-demo.component'; +import { NotificationOverlayContentComponent } from './components/notification-overlay/notification-overlay-content/notification-overlay-content'; import { SubnavigationDemoComponent } from './components/subnavigation/subnavigation-demo/subnavigation-demo.component'; +import { SubnavigationDemoPageComponent } from './components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component'; +import { + CustomDatepickerI18n, + I18n, +} from '../ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-localization.service'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { PostCommonModule } from '../common/post-common.module'; +import { PostCardsDemoPageComponent } from './components/post-cards/post-cards-demo-page/post-cards-demo-page.component'; +import { PostCardButtonComponent } from './components/post-cards/post-card-button/post-card-button.component'; +import { PostCardProductNavigationComponent } from './components/post-cards/post-card-product-navigation/post-card-product-navigation.component'; +import { PostCardProductTeaserComponent } from './components/post-cards/post-card-product-teaser/post-card-product-teaser.component'; import { TopicTeaserDemoComponent } from './components/topic-teaser/topic-teaser-demo/topic-teaser-demo.component'; import { TopicTeaserRightDemoComponent } from './components/topic-teaser/topic-teaser-right-demo/topic-teaser-right-demo.component'; +import { DatatableDemoComponent } from './components/datatable/datatable-demo/datatable-demo.component'; +import { DatatablePaginatedDemoComponent } from './components/datatable/datatable-paginated-demo/datatable-paginated-demo.component'; +import { DatatableEditableDemoComponent } from './components/datatable/datatable-editable-demo/datatable-editable-demo.component'; +import { DatatableDemoPageComponent } from './components/datatable/datatable-demo-page/datatable-demo-page.component'; +import { NgxDatatableModule } from '@swimlane/ngx-datatable'; +import { FormsDemoPageComponent } from './components/forms/forms-demo-page/forms-demo-page.component'; +import { DatatableLoadingDemoComponent } from './components/datatable/datatable-loading-demo/datatable-loading-demo.component'; @NgModule({ imports: [ @@ -104,7 +103,6 @@ import { TopicTeaserRightDemoComponent } from './components/topic-teaser/topic-t CustomSelectFloatingDemoComponent, CustomSelectDemoPageComponent, StepperDemoComponent, - StepperDemoInactiveNextStepComponent, StepperDemoPageComponent, FormsDemoPageComponent, ], diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index d56a13ce81..64411766d9 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -98,18 +98,6 @@ } } -.stepper-interactive { - &:hover::before { - color: stepper.$stepper-indicator-hover-color; - background-color: stepper.$stepper-indicator-hover-bg; - background-image: stepper.$stepper-indicator-hover-check-icon; - } - - &:hover .stepper-link { - color: stepper.$stepper-link-hover-color; - } -} - .stepper-link { padding-top: stepper.$stepper-indicator-height + stepper.$stepper-link-gap; text-decoration: none; @@ -123,6 +111,10 @@ font-weight: stepper.$stepper-link-current-font-weight; } + &a:hover .stepper-link { + color: stepper.$stepper-link-hover-color; + } + &:focus-visible { outline: none; } From ce53fbb60faca0a7ab583752a462aa91e3f6d772 Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Thu, 3 Aug 2023 10:20:52 +0200 Subject: [PATCH 07/13] Fix intellij code re-ordering --- .../stepper-demo-page/stepper-demo-page.component.html | 8 ++++---- .../stepper/stepper-demo/stepper-demo.component.html | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html index 451fa16bc2..214dc9c1dc 100644 --- a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html +++ b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html @@ -2,12 +2,12 @@ ~ Copyright 2021 by Swiss Post, Information Technology --> -
    -

    Stepper

    +
    +

    Stepper

    - - + +
    diff --git a/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.html b/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.html index f47c8f6f05..5776b0a8b5 100644 --- a/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.html +++ b/packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.html @@ -1,5 +1,5 @@
    - +