Skip to content

feat(styles): update stepper #1646

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
imagoiq merged 15 commits into from
Aug 10, 2023
Merged

feat(styles): update stepper #1646

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
ba39d0c
feat(styles): update stepper
Jul 20, 2023
7a14568
Add changeset
Jul 20, 2023
d67baf6
Separate changeset
Jul 26, 2023
7ebe839
Add changeset context
imagoiq Jul 27, 2023
360bfed
Add context to changeset
imagoiq Jul 27, 2023
6ffe9ef
Revert inactive version only
imagoiq Aug 3, 2023
ce53fbb
Fix intellij code re-ordering
imagoiq Aug 3, 2023
50b3fe3
Fix hovering + support text focus
imagoiq Aug 3, 2023
5141d0a
Remove unnecessary element
imagoiq Aug 3, 2023
20cb4aa
Fix changesets
imagoiq Aug 3, 2023
fbf440a
Lint scss
imagoiq Aug 3, 2023
a6ad45b
Merge branch 'main' into 1636-styles-update-stepper
gfellerph Aug 3, 2023
876bb87
Merge branch 'main' into 1636-styles-update-stepper
gfellerph Aug 3, 2023
7b6728f
Update .changeset/rare-kids-drum.md
imagoiq Aug 10, 2023
a80f695
Update .changeset/rare-kids-drum.md
imagoiq Aug 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/new-grapes-smell.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-demo': patch
---

Stepper: Remove interactivity on inactive next steps.
11 changes: 11 additions & 0 deletions .changeset/rare-kids-drum.md
View file
Open in desktop

@gfellerph gfellerph Jul 27, 2023

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we could combine both changesets so people know which component is concerned.

@alizedebray alizedebray Jul 27, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was me who asked to separate the changeset because it seems strange to me to have "clarified how to use the stepper" in the styles changelog... But it is true that the second changelog does not specify which component is affected by the changes.

@imagoiq imagoiq Jul 27, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a convention for the context, or is it fine like this?

Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
'@swisspost/design-system-styles': patch
---

Stepper:

- Normalize font styles and weights.
- Position the step label under the the badge on small viewport.
Comment thread
imagoiq marked this conversation as resolved.
Outdated
- Center the step label when this text is multiline.
Comment thread
imagoiq marked this conversation as resolved.
Outdated
- Use hover step label color only on interactive step.
- Add contrasted step label color on focus.
5 changes: 3 additions & 2 deletions ...o/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@
* 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;

@Component({
templateUrl: 'stepper-demo-page.component.html'
templateUrl: 'stepper-demo-page.component.html',
})
export class StepperDemoPageComponent {
codeTemplate = codeTemplate;
Expand Down
2 changes: 1 addition & 1 deletion ...ages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h2 class="visually-hidden">Order progress, step 3 of 4</h2>
<span class="visually-hidden">Complete:</span>
{{ step }}
</a>
<span class="stepper-link" *ngIf="i >= currentIndex" (click)="currentIndex = i">
<span class="stepper-link" *ngIf="i >= currentIndex">
{{ step }}
</span>
</li>
Expand Down
4 changes: 2 additions & 2 deletions packages/demo/src/app/post-sample/components/stepper/stepper-demo/stepper-demo.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'];
Expand Down
10 changes: 3 additions & 7 deletions packages/styles/src/components/stepper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,14 +109,16 @@
text-decoration: none;
color: stepper.$stepper-link-color;
transition: color 250ms;
text-align: center;

.stepper-item[aria-current] > & {
color: stepper.$stepper-link-current-color;
font-size: stepper.$stepper-link-current-font-size;
font-weight: stepper.$stepper-link-current-font-weight;
}

&:hover {
@at-root a:hover#{&},
:focus-visible#{&} {
color: stepper.$stepper-link-hover-color;
}

Expand All @@ -127,12 +129,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;
Expand Down
6 changes: 3 additions & 3 deletions packages/styles/src/variables/components/_stepper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;