Skip to content
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

feat(ui): add option to make steps scrollable EBS-1314 #227

Merged
merged 4 commits into from
May 8, 2024
Merged

feat(ui): add option to make steps scrollable EBS-1314 #227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
376a78c
feat(ui): add option to make steps scrollable EBS-1314
Apr 30, 2024
7485a08
fix(ui): axe storybook check EBS-1314
Apr 30, 2024
e1bcabb
feat(ui): code review changes EBS-1314
May 7, 2024
f0dd054
fix(ui): axe aria-label error EBS-1314
May 7, 2024
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
8 changes: 8 additions & 0 deletions apps/ui-e2e/src/component/steps.component.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,12 @@ describe('StepsComponent', () => {
cy.wait(1500);
cy.runStepsCommonTest();
});

it('Renders steps with scrollbar and clicks right button to make left button visible', () => {
cy.loadStory('Angular Steps Steps', 'Default with scroll');
cy.shouldNotExist('button[aria-label="Scroll left"]');
cy.get('button[aria-label="Scroll right"]').click();

cy.shouldExist('button[aria-label="Scroll left"]');
});
});
61 changes: 60 additions & 1 deletion libs/styles/src/lib/scss/components/_steps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,12 @@
flex-direction: column;
}
@include cvi-breakpoint-up(sm) {
#{$base}.is-scrollable & {
display: flex;
padding-left: get-spacing('loksa');
certainlyakey marked this conversation as resolved.
Show resolved Hide resolved
padding-right: get-spacing('loksa');
}

display: grid;
grid-template-columns: repeat(auto-fit, minmax(209px, 1fr));
column-gap: 0;
Expand All @@ -99,6 +105,11 @@

}
@include cvi-breakpoint-up(sm) {
#{$base}.is-scrollable & {
min-width: 247px;
height: 100%;
}

min-height: 72px;
flex-grow: 1;
flex-shrink: 1;
Expand Down Expand Up @@ -347,5 +358,53 @@
@include cvi-screenreader-text;
}
}

#{$base}.is-scrollable {
#{$base}__scroll-wrapper {
position: relative;
}
#{$base}__scroll-container {
@include cvi-breakpoint-down(sm) {
display: grid;
}

display: flex;
width: 100%;
overflow-x: auto;
scrollbar-width: none;
scroll-behavior: smooth;
}
}

#{$base}__scroll-button {
@include cvi-breakpoint-down(sm) {
display: none;
}
@include cvi-breakpoint-up(sm) {
position: absolute;
z-index: get-z-index('steps', '__scroll-button');
height: calc(100% - get-spacing('kuressaare'));
width: 32px;
background-color: get-color(black-coral-20);
opacity: 0.8;
display: flex;
line-height: 0;
justify-content: center;
align-items: center;

&--left-scroll {
left: 0;
}

&--right-scroll {
right: 0;
}
}
}

#{$base}__scroll-button-icon {
height: get-spacing('haapsalu');
fill: get-color(white);
}
}
}
}
3 changes: 3 additions & 0 deletions libs/styles/src/lib/scss/settings/variables/_z-indexes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,7 @@ $cvi-z-indexes: (
'datepicker': (
'__calender',
),
'steps': (
'__scroll-button',
),
);
133 changes: 80 additions & 53 deletions libs/ui/src/lib/steps/steps/steps.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,61 +4,88 @@ <h1 *ngIf="title" class="cvi-steps__title" dataAttribute="steps_title">{{ title
</div>
<div class="cvi-steps__inner-wrapper">
<div class="cvi-steps__inner" dataAttribute="steps_container">
<ol class="cvi-steps__list">
<li class="cvi-steps__list-item"
*ngFor="let stepTitle of stepTitles; let i = index"
[ngClass]="{'is-past': this.currentStepIndex !== null && i <= currentStepIndex, 'is-current': i === currentStepIndex}"
[dataAttribute]="'cvi-steps__list-item_' + i">
<button class="cvi-steps__list-item-button" [dataAttribute]="'cvi-steps__list-item-button_' + i"
(click)="stepSelected(i)">
<cvi-ng-track [layout]="'flex'" [horizontalAlignment]="'justify'" [verticalAlignment]="'center'">
<div class="cvi-steps__list-item-circle-wrapper--desktop">
<cvi-ng-track [gap]="2" [verticalAlignment]="'center'">
<cvi-ng-circle
[theme]="i === currentStepIndex || this.stepStatuses[i] === 'success' || this.stepStatuses[i] === 'error' ? 'light' : 'dark'"
[severity]="this.stepStatuses[i] | toStepCircleSeverity"
[iconName]="this.stepStatuses[i] | toStepCircleIconName">
{{ i + 1 }}
</cvi-ng-circle>
<span class="cvi-steps__list-item-title">{{ stepTitle }}</span>
</cvi-ng-track>
</div>
<div class="cvi-steps__list-item-circle-wrapper--mobile">
<cvi-ng-track [gap]="4" [verticalAlignment]="'center'">
<cvi-ng-circle
size="m"
style="--cvi-circle-border-color: var(--cvi-color-sapphire-blue-10); --cvi-circle-color: var(--cvi-color-sapphire-blue-10);"
[progressPercentage]="anyStepSelected ? currentProgressCSSVar : undefined">
{{ i + 1 }}
</cvi-ng-circle>
<span class="cvi-steps__list-item-title">{{ stepTitle }}</span>
<div class="cvi-steps__scroll-wrapper">
<div #stepScrollBar class="cvi-steps__scroll-container">
<div>
<button *ngIf="isScrollable && !leftEdgeVisible"
aria-label="Scroll left"
class="cvi-steps__scroll-button cvi-steps__scroll-button--left-scroll"
(click)="onClickScroll(-150)">
<cvi-ng-icon [name]="'arrow_a_left'"
svgClass="cvi-steps__scroll-button-icon">
</cvi-ng-icon>
</button>

<button *ngIf="isScrollable && !rightEdgeVisible"
aria-label="Scroll right"
class="cvi-steps__scroll-button cvi-steps__scroll-button--right-scroll"
(click)="onClickScroll(150)">
<cvi-ng-icon [name]="'arrow_a_right'"
svgClass="cvi-steps__scroll-button-icon">
</cvi-ng-icon>
</button>
</div>

<div #leftEdge style="width: 1px"></div>
<ol class="cvi-steps__list">
<li class="cvi-steps__list-item"
*ngFor="let stepTitle of stepTitles; let i = index"
[ngClass]="{'is-past': this.currentStepIndex !== null && i <= currentStepIndex, 'is-current': i === currentStepIndex}"
[dataAttribute]="'cvi-steps__list-item_' + i">
<button class="cvi-steps__list-item-button" [dataAttribute]="'cvi-steps__list-item-button_' + i"
(click)="stepSelected(i)">
<cvi-ng-track [layout]="'flex'" [horizontalAlignment]="'justify'" [verticalAlignment]="'center'">
<div class="cvi-steps__list-item-circle-wrapper--desktop">
<cvi-ng-track [gap]="2" [verticalAlignment]="'center'">
<cvi-ng-circle
[theme]="i === currentStepIndex || this.stepStatuses[i] === 'success' || this.stepStatuses[i] === 'error' ? 'light' : 'dark'"
[severity]="this.stepStatuses[i] | toStepCircleSeverity"
[iconName]="this.stepStatuses[i] | toStepCircleIconName">
{{ i + 1 }}
</cvi-ng-circle>
<span class="cvi-steps__list-item-title">{{ stepTitle }}</span>
</cvi-ng-track>
</div>
<div class="cvi-steps__list-item-circle-wrapper--mobile">
<cvi-ng-track [gap]="4" [verticalAlignment]="'center'">
<cvi-ng-circle
size="m"
style="--cvi-circle-border-color: var(--cvi-color-sapphire-blue-10); --cvi-circle-color: var(--cvi-color-sapphire-blue-10);"
[progressPercentage]="anyStepSelected ? currentProgressCSSVar : undefined">
{{ i + 1 }}
</cvi-ng-circle>
<span class="cvi-steps__list-item-title">{{ stepTitle }}</span>
</cvi-ng-track>
</div>
<cvi-ng-track [gap]="4">
<cvi-ng-icon [name]="'arrow_a_right'" class="cvi-steps__list-item-arrow-icon-wrapper"
[svgClass]="'cvi-steps__list-item-arrow-icon'"></cvi-ng-icon>
</cvi-ng-track>
</cvi-ng-track>
</div>
<cvi-ng-track [gap]="4">
<cvi-ng-icon [name]="'arrow_a_right'" class="cvi-steps__list-item-arrow-icon-wrapper"
[svgClass]="'cvi-steps__list-item-arrow-icon'"></cvi-ng-icon>
</cvi-ng-track>
</cvi-ng-track>
</button>
</li>
<li *ngIf="urlStepTitle"
class="cvi-steps__list-item cvi-steps__list-item--is-url-step">
<button class="cvi-steps__list-item-button" style="background-color: white;" (click)="urlStepClicked()">
<cvi-ng-track [layout]="'flex'" [horizontalAlignment]="'justify'" [verticalAlignment]="'center'">
<div class="cvi-steps__list-item-circle-wrapper--desktop">
<cvi-ng-track [gap]="2" [verticalAlignment]="'center'">
<cvi-ng-circle [iconName]="'arrow_a_right'"
[theme]="'light'"
[severity]="'info'"
style="--cvi-circle-border-color: var(--cvi-color-sapphire-blue-13)">
</cvi-ng-circle>
<span class="cvi-steps__list-item-title">{{ urlStepTitle }}</span>
</button>
</li>
<li *ngIf="urlStepTitle"
class="cvi-steps__list-item cvi-steps__list-item--is-url-step">
<button class="cvi-steps__list-item-button" style="background-color: white;" (click)="urlStepClicked()">
<cvi-ng-track [layout]="'flex'" [horizontalAlignment]="'justify'" [verticalAlignment]="'center'">
<div class="cvi-steps__list-item-circle-wrapper--desktop">
<cvi-ng-track [gap]="2" [verticalAlignment]="'center'">
<cvi-ng-circle [iconName]="'arrow_a_right'"
[theme]="'light'"
[severity]="'info'"
style="--cvi-circle-border-color: var(--cvi-color-sapphire-blue-13)">
</cvi-ng-circle>
<span class="cvi-steps__list-item-title">{{ urlStepTitle }}</span>
</cvi-ng-track>
</div>
</cvi-ng-track>
</div>
</cvi-ng-track>
</button>
</li>
</ol>
</button>
</li>
</ol>
<div #rightEdge style="width: 1px"></div>
</div>
</div>

<ng-content></ng-content>
<div *ngIf="this.stepChildren.length > 1 && this.currentStepIndex !== null"
class="cvi-steps__directional-buttons"
Expand Down
16 changes: 14 additions & 2 deletions libs/ui/src/lib/steps/steps/steps.component.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export default {
args: {
title: 'Abiellumine',
currentStepIndex: null,
isScrollable: false,
stepsContent: [
'<a href="https://www.eesti.ee">Nevertheless, Cosy Moments thrives. It has its public.</a>',
'Its contents are mildly interesting, if you like that sort of thing.',
Expand All @@ -57,7 +58,7 @@ const DefaultTemplate: StoryFn<StepsComponent> = (args: StepsComponent) => {
},
/* template */
template: `
<cvi-ng-steps [title]="title" [currentStepIndex]="currentStepIndex" [hasTableOfContents]="hasTableOfContents">
<cvi-ng-steps [title]="title" [currentStepIndex]="currentStepIndex" [hasTableOfContents]="hasTableOfContents" [isScrollable]="isScrollable">
<p cvi-steps="after-title" dataAttribute="steps-description">You can now add custom content before steps</p>
<cvi-ng-step dataAttribute="step_1">
<cvi-ng-step-panel [title]="title">
Expand Down Expand Up @@ -105,6 +106,18 @@ export const DefaultWithSelectedStep = {
},
};

export const DefaultWithScroll = {
...Default,
parameters: {
viewport: {
defaultViewport: 'ipad',
},
},
args: {
certainlyakey marked this conversation as resolved.
Show resolved Hide resolved
isScrollable: true,
},
};

export const Mobile = {
...Default,
parameters: {
Expand Down Expand Up @@ -257,7 +270,6 @@ export const WithStepStatus = {
};

const TemplateWithUrlStep: StoryFn = (args) => ({
component: StepsComponent,
props: {
...args,
urlClicked: false,
Expand Down
Loading
Loading