Skip to content

Commit 796b60f

Browse files
InnaAtanasovaInnaAtanasova
committed
feat(core, platform): adopt styles breaking changes part two
1 parent 5f00e6a commit 796b60f

16 files changed

+224
-69
lines changed

‎libs/core/illustrated-message/components/illustrated-message-section/illustrated-message-section.component.spec.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Component, ElementRef, ViewChild } from '@angular/core';
2+
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
3+
import { IllustratedMessageSectionComponent } from './illustrated-message-section.component';
4+
5+
// Mock component for testing
6+
@Component({
7+
template: `
8+
<section fd-illustrated-message-section [responsive]="responsive">Test content</section>
9+
`,
10+
standalone: true,
11+
imports: [IllustratedMessageSectionComponent]
12+
})
13+
class TestIllustratedMessageSectionComponent {
14+
15+
@ViewChild(IllustratedMessageSectionComponent, { static: true, read: ElementRef })
16+
illustratedMessageSectionElementRef: ElementRef;
17+
18+
responsive = false;
19+
}
20+
21+
describe('IllustratedMessageSectionComponent', () => {
22+
let illustratedMessageSectionElementRef: ElementRef;
23+
let testComponent: TestIllustratedMessageSectionComponent;
24+
let fixture: ComponentFixture<TestIllustratedMessageSectionComponent>;
25+
26+
beforeEach(waitForAsync(() => {
27+
TestBed.configureTestingModule({
28+
imports: [TestIllustratedMessageSectionComponent]
29+
}).compileComponents();
30+
}));
31+
32+
beforeEach(() => {
33+
fixture = TestBed.createComponent(TestIllustratedMessageSectionComponent);
34+
illustratedMessageSectionElementRef = fixture.componentInstance.illustratedMessageSectionElementRef;
35+
testComponent = fixture.componentInstance;
36+
fixture.detectChanges();
37+
});
38+
39+
it('Should have assigned class when responsive is set to true', () => {
40+
testComponent.responsive = true;
41+
fixture.detectChanges();
42+
expect(illustratedMessageSectionElementRef.nativeElement.classList.contains('fd-illustrated-message-responsive-container')).toBe(true);
43+
});
44+
});

‎libs/core/illustrated-message/components/illustrated-message-section/illustrated-message-section.component.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChild, input } from '@angular/core';
2+
import { IllustratedMessageTitleDirective } from '../../directives/illustrated-message-title/illustrated-message-title.directive';
3+
4+
let illustratedMessageSectionId = 0;
5+
6+
@Component({
7+
// eslint-disable-next-line @angular-eslint/component-selector
8+
selector: '[fd-illustrated-message-section]',
9+
template: `<span [attr.id]="id()" class="fd-illustrated-message__sr-only">{{ ariaLabel() }}</span>
10+
<ng-content></ng-content>`,
11+
changeDetection: ChangeDetectionStrategy.OnPush,
12+
host: {
13+
role: 'region',
14+
'[attr.aria-labelledby]': 'ariaLabelledby()',
15+
'[class.fd-illustrated-message-responsive-container]': 'responsive()'
16+
},
17+
standalone: true
18+
})
19+
export class IllustratedMessageSectionComponent {
20+
/** Aria label for the Illustrated Message */
21+
ariaLabel = input<string>();
22+
23+
/** Whether the Illustrated Message is responsive
24+
* Default value is false */
25+
responsive = input(false, { transform: booleanAttribute });
26+
27+
/** Illustrated Message Section ID
28+
* Default value is provided if not set */
29+
id = input('fd-illustrated-message-section-id-' + ++illustratedMessageSectionId);
30+
31+
/** @hidden */
32+
illustratedMessageTitle = contentChild<IllustratedMessageTitleDirective>(IllustratedMessageTitleDirective, {
33+
descendants: true
34+
});
35+
36+
/** @hidden */
37+
ariaLabelledby = computed(() => `${this.id()} ${this.illustratedMessageTitle()?.id()}`);
38+
}

‎libs/core/illustrated-message/directives/illustrated-message-text/illustrated-message-text.directive.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
1-
import { Directive, HostBinding } from '@angular/core';
1+
import { Directive, HostBinding, input } from '@angular/core';
2+
3+
let illustratedMessageTextId = 0;
24

35
@Directive({
46
// TODO to be discussed
57
// eslint-disable-next-line @angular-eslint/directive-selector
68
selector: '[fd-illustrated-message-text]',
7-
standalone: true
9+
standalone: true,
10+
host: {
11+
'[attr.id]': 'id()'
12+
}
813
})
914
export class IllustratedMessageTextDirective {
1015
/** @hidden */
1116
@HostBinding('class.fd-illustrated-message__text')
1217
fdIllustratedMessageTextClass = true;
18+
19+
/** Illustrated Message Text ID
20+
* Default value is provided if not set */
21+
id = input('fd-illustrated-message-text-id-' + ++illustratedMessageTextId);
1322
}

‎libs/core/illustrated-message/directives/illustrated-message-title/illustrated-message-title.directive.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
1-
import { Directive, HostBinding } from '@angular/core';
1+
import { Directive, HostBinding, input } from '@angular/core';
2+
3+
let illustratedMessageTitleId = 0;
24

35
@Directive({
4-
// TODO to be discussed
56
// eslint-disable-next-line @angular-eslint/directive-selector
67
selector: '[fd-illustrated-message-title]',
7-
standalone: true
8+
standalone: true,
9+
host: {
10+
'[attr.id]': 'id()'
11+
}
812
})
913
export class IllustratedMessageTitleDirective {
1014
/** @hidden */
1115
@HostBinding('class.fd-illustrated-message__title')
1216
fdIllustratedMessageTitleClass = true;
17+
18+
/** Illustrated Message Title ID
19+
* Default value is provided if not set */
20+
id = input('fd-illustrated-message-title-id-' + ++illustratedMessageTitleId);
1321
}

‎libs/core/illustrated-message/illustrated-message.component.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<div class="fd-illustrated-message__container">
22
@if (!noSvg) {
3-
<svg class="fd-illustrated-message__illustration" [attr.aria-label]="svgAriaLabel">
3+
<svg
4+
class="fd-illustrated-message__illustration"
5+
role="img"
6+
[attr.aria-label]="svgAriaLabel"
7+
[attr.alt]="svgAlt"
8+
>
49
<use [attr.href]="_href"></use>
510
</svg>
611
}

‎libs/core/illustrated-message/illustrated-message.component.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -398,3 +398,17 @@
398398
.fd-illustrated-message__illustration {
399399
width: 100%;
400400
}
401+
402+
.fd-illustrated-message__sr-only {
403+
position: absolute;
404+
clip: rect(0 0 0 0);
405+
height: 1px;
406+
width: 1px;
407+
border: 0;
408+
margin-inline: -1px;
409+
margin-block: -1px;
410+
padding-inline: 0;
411+
padding-block: 0;
412+
overflow: hidden;
413+
white-space: nowrap;
414+
}

‎libs/core/illustrated-message/illustrated-message.component.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,9 @@ export class IllustratedMessageComponent implements AfterContentChecked, OnChang
8080
@Input()
8181
svgAriaLabel: Nullable<string>;
8282

83+
@Input()
84+
svgAlt: Nullable<string>;
85+
8386
@Input()
8487
noSvg = false;
8588

‎libs/core/illustrated-message/illustrated-message.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ import { IllustratedMessageActionsComponent } from './components/illustrated-mes
44
import { IllustratedMessageComponent } from './illustrated-message.component';
55

66
import { IllustratedMessageFigcaptionComponent } from './components/illustrated-message-figcaption/illustrated-message-figcaption.component';
7+
import { IllustratedMessageSectionComponent } from './components/illustrated-message-section/illustrated-message-section.component';
78
import { IllustratedMessageTextDirective } from './directives/illustrated-message-text/illustrated-message-text.directive';
89
import { IllustratedMessageTitleDirective } from './directives/illustrated-message-title/illustrated-message-title.directive';
910

1011
const components = [
1112
IllustratedMessageComponent,
1213
IllustratedMessageActionsComponent,
1314
IllustratedMessageFigcaptionComponent,
15+
IllustratedMessageSectionComponent,
1416
IllustratedMessageTextDirective,
1517
IllustratedMessageTitleDirective
1618
];

‎libs/core/illustrated-message/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export * from './components/illustrated-message-actions/illustrated-message-actions.component';
22
export * from './components/illustrated-message-figcaption/illustrated-message-figcaption.component';
3+
export * from './components/illustrated-message-section/illustrated-message-section.component';
34
export * from './directives/illustrated-message-text/illustrated-message-text.directive';
45
export * from './directives/illustrated-message-title/illustrated-message-title.directive';
56
export * from './illustrated-message.component';

‎libs/docs/core/illustrated-message/examples/illustrated-message-dialog-example.component.html‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,21 @@ <h1 fd-title [id]="dialogId + '-header'">Unknown File Format Detected</h1>
66
</fd-dialog-header>
77

88
<fd-dialog-body>
9-
<figure fd-illustrated-message type="medium" [svgConfig]="mediumConfig">
10-
<figcaption fd-illustrated-message-figcaption role="document" [id]="dialogId + '-description'">
11-
<h3 fd-illustrated-message-title>Unknown File Format</h3>
12-
<p fd-illustrated-message-text>
13-
We found some files that have an unknown file format. Let's take a look and fix the issue.
14-
</p>
15-
</figcaption>
16-
</figure>
9+
<section fd-illustrated-message-section ariaLabel="Illustrated Message">
10+
<figure
11+
fd-illustrated-message
12+
type="medium"
13+
[svgConfig]="mediumConfig"
14+
svgAlt="alt text for the illustration"
15+
>
16+
<figcaption fd-illustrated-message-figcaption role="document" [id]="dialogId + '-description'">
17+
<h3 fd-illustrated-message-title>Unknown File Format</h3>
18+
<p fd-illustrated-message-text>
19+
We found some files that have an unknown file format. Let's take a look and fix the issue.
20+
</p>
21+
</figcaption>
22+
</figure>
23+
</section>
1724
</fd-dialog-body>
1825

1926
<fd-dialog-footer>

0 commit comments

Comments
 (0)