forked from onecx/onecx-portal-ui-libs
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into feat/search-widget-accessibility
- Loading branch information
Showing
30 changed files
with
305 additions
and
94 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 24 additions & 24 deletions
48
...al-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,25 +1,25 @@ | ||
<div> | ||
<ng-container #container></ng-container> | ||
<ng-content></ng-content> | ||
<div class="w-full flex justify-content-end mb-3"> | ||
<button | ||
id="buttonDialogSecondaryButton" | ||
pButton | ||
*ngIf="dialogData.config.secondaryButtonIncluded" | ||
class="mx-2" | ||
[icon]="dialogData.config.secondaryButtonDetails!.icon !== undefined ? dialogData.config.secondaryButtonDetails!.icon : ''" | ||
(click)="secondaryButtonAction()" | ||
[label]="dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters" | ||
[disabled]="secondaryButtonDisabled$ | async" | ||
></button> | ||
<button | ||
id="buttonDialogPrimaryButton" | ||
pButton | ||
class="mx-2" | ||
[icon]="dialogData.config.primaryButtonDetails!.icon !== undefined ? dialogData.config.primaryButtonDetails!.icon : ''" | ||
(click)="primaryButtonAction()" | ||
[label]="dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters" | ||
[disabled]="primaryButtonDisabled$ | async" | ||
></button> | ||
</div> | ||
</div> | ||
<ng-container #container></ng-container> | ||
<ng-content></ng-content> | ||
<div class="w-full flex justify-content-end mb-3"> | ||
<button | ||
id="buttonDialogSecondaryButton" | ||
pButton | ||
*ngIf="dialogData.config.secondaryButtonIncluded" | ||
class="mx-2" | ||
[icon]="dialogData.config.secondaryButtonDetails!.icon !== undefined ? dialogData.config.secondaryButtonDetails!.icon : ''" | ||
(click)="secondaryButtonAction()" | ||
[label]="dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters" | ||
[disabled]="secondaryButtonDisabled$ | async" | ||
></button> | ||
<button | ||
id="buttonDialogPrimaryButton" | ||
pButton | ||
class="mx-2" | ||
[icon]="dialogData.config.primaryButtonDetails!.icon !== undefined ? dialogData.config.primaryButtonDetails!.icon : ''" | ||
(click)="primaryButtonAction()" | ||
[label]="dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters" | ||
[disabled]="primaryButtonDisabled$ | async" | ||
></button> | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<p-timeline [value]="steps"> | ||
<ng-template pTemplate="marker" let-step> | ||
<span class="p-timeline-event-marker" [ngClass]="activeStepId && activeStepId === step.id ? 'bg-primary' : ''"></span> | ||
</ng-template> | ||
<ng-template pTemplate="content" let-step> | ||
<div class="pb-4 h-full"> | ||
<div class="card h-full" [ngClass]="activeStepId && activeStepId === step.id ? 'bg-primary' : ''"> | ||
<p class="font-bold text-xl" [ngClass]="step.details ? 'mb-2' : ''">{{ step.title }}</p> | ||
<p *ngIf="step.details" [ngClass]="activeStepId && activeStepId === step.id ? '' : 'text-color-secondary'">{{ step.details }}</p> | ||
</div> | ||
</div> | ||
</ng-template> | ||
</p-timeline> |
76 changes: 76 additions & 0 deletions
76
.../portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
import { ComponentFixture, TestBed } from '@angular/core/testing' | ||
import { LifecycleComponent, LifecycleStep } from './lifecycle.component' | ||
import { TimelineModule } from 'primeng/timeline' | ||
import { LifecycleHarness, TestbedHarnessEnvironment } from '../../../../../testing' | ||
import { PrimeNgModule } from '../../primeng.module' | ||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations' | ||
import { PortalCoreModule } from '../../portal-core.module' | ||
|
||
const mockSteps: LifecycleStep[] = [ | ||
{ | ||
id: 'test1', | ||
title: 'Test 1', | ||
}, | ||
{ | ||
id: 'test2', | ||
title: 'Test 2', | ||
details: 'Test 2 description', | ||
}, | ||
{ | ||
id: 'test3', | ||
title: 'Test 3', | ||
}, | ||
] | ||
|
||
describe('LifecycleComponent', () => { | ||
let component: LifecycleComponent | ||
let fixture: ComponentFixture<LifecycleComponent> | ||
let lifecycle: LifecycleHarness | ||
|
||
beforeEach(async () => { | ||
await TestBed.configureTestingModule({ | ||
declarations: [LifecycleComponent], | ||
imports: [TimelineModule, PrimeNgModule, BrowserAnimationsModule, PortalCoreModule], | ||
}).compileComponents() | ||
|
||
fixture = TestBed.createComponent(LifecycleComponent) | ||
component = fixture.componentInstance | ||
fixture.detectChanges() | ||
lifecycle = await TestbedHarnessEnvironment.harnessForFixture(fixture, LifecycleHarness) | ||
}) | ||
|
||
it('should create', () => { | ||
expect(component).toBeTruthy() | ||
expect(lifecycle).toBeTruthy() | ||
}) | ||
|
||
it('should not render any initial lifecycle steps', async () => { | ||
const steps = await lifecycle.getSteps() | ||
expect(steps.length).toBe(0) | ||
}) | ||
|
||
it('should render given lifecycle steps', async () => { | ||
component.steps = mockSteps | ||
const steps = await lifecycle.getSteps() | ||
const highlightedSteps = await lifecycle.getHighlightedSteps() | ||
expect(steps.length).toBe(3) | ||
expect(highlightedSteps.length).toBe(0) | ||
mockSteps.forEach(async (step, index) => { | ||
expect(await steps[index].text()).toEqual(step.title + (step.details ?? '')) | ||
}) | ||
}) | ||
|
||
it('should highlight a given lifecycle step', async () => { | ||
component.steps = mockSteps | ||
component.activeStepId = 'test2' | ||
const steps = await lifecycle.getSteps() | ||
const highlightedSteps = await lifecycle.getHighlightedSteps() | ||
mockSteps.forEach(async (step, index) => { | ||
if(step.id == component.activeStepId) { | ||
expect(await steps[index].hasClass('bg-primary')).toEqual(true) | ||
} | ||
}) | ||
expect(steps.length).toBe(3) | ||
expect(highlightedSteps.length).toBe(1) | ||
}) | ||
}) |
57 changes: 57 additions & 0 deletions
57
...rtal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import { importProvidersFrom } from '@angular/core' | ||
import { BrowserModule } from '@angular/platform-browser' | ||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations' | ||
import { Meta, StoryFn, applicationConfig, moduleMetadata } from '@storybook/angular' | ||
import { StorybookTranslateModule } from '../../storybook-translate.module' | ||
import { LifecycleComponent, LifecycleStep } from './lifecycle.component' | ||
import { TimelineModule } from 'primeng/timeline' | ||
import { CardModule } from 'primeng/card' | ||
|
||
export default { | ||
title: 'LifecycleComponent', | ||
component: LifecycleComponent, | ||
decorators: [ | ||
applicationConfig({ | ||
providers: [importProvidersFrom(BrowserModule), importProvidersFrom(BrowserAnimationsModule)], | ||
}), | ||
moduleMetadata({ | ||
declarations: [LifecycleComponent], | ||
imports: [StorybookTranslateModule, TimelineModule, CardModule], | ||
}), | ||
], | ||
} as Meta<LifecycleComponent> | ||
|
||
const Template: StoryFn<LifecycleComponent> = (args: LifecycleComponent) => ({ | ||
props: args, | ||
}) | ||
|
||
const mockData: LifecycleStep[] = [ | ||
{ | ||
id: "todo", | ||
title: "ToDo" | ||
}, | ||
{ | ||
id: "in_progress", | ||
title: "In Progress", | ||
details: "This event is currently in progress" | ||
}, | ||
{ | ||
id: "done", | ||
title: "Done" | ||
} | ||
] | ||
|
||
export const WithoutHighlightedStep = { | ||
render: Template, | ||
args: { | ||
steps: mockData | ||
} | ||
} | ||
|
||
export const WithHighlightedStep = { | ||
render: Template, | ||
args: { | ||
steps: mockData, | ||
activeStepId: 'in_progress' | ||
} | ||
} |
16 changes: 16 additions & 0 deletions
16
libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import { Component, Input } from '@angular/core' | ||
|
||
export interface LifecycleStep { | ||
id: string | ||
title: string, | ||
details?: string, | ||
} | ||
|
||
@Component({ | ||
selector: 'ocx-lifecycle', | ||
templateUrl: './lifecycle.component.html', | ||
}) | ||
export class LifecycleComponent { | ||
@Input() steps: LifecycleStep[] = [] | ||
@Input() activeStepId: string | undefined | ||
} |
Oops, something went wrong.