From 27db13c57395782633e89f9dff2ff2ce03385d01 Mon Sep 17 00:00:00 2001 From: Nina Date: Tue, 10 Dec 2024 11:13:00 +0100 Subject: [PATCH 1/9] fix(sds/icon): remove icon color example OUI-3396 --- .../icons/icons-code-examples.component.spec.ts | 13 ++++--------- .../icons/icons-code-examples.component.ts | 11 ----------- .../icons-example-color-preview.component.html | 6 ------ .../icons-example-color-preview.component.scss | 5 ----- .../color/icons-example-color-preview.component.ts | 13 ------------- 5 files changed, 4 insertions(+), 44 deletions(-) delete mode 100644 projects/sds/src/app/code-examples/code-examples/icons/previews/color/icons-example-color-preview.component.html delete mode 100644 projects/sds/src/app/code-examples/code-examples/icons/previews/color/icons-example-color-preview.component.scss delete mode 100644 projects/sds/src/app/code-examples/code-examples/icons/previews/color/icons-example-color-preview.component.ts diff --git a/projects/sds/src/app/code-examples/code-examples/icons/icons-code-examples.component.spec.ts b/projects/sds/src/app/code-examples/code-examples/icons/icons-code-examples.component.spec.ts index 9b3b0ba55..ad62ae638 100644 --- a/projects/sds/src/app/code-examples/code-examples/icons/icons-code-examples.component.spec.ts +++ b/projects/sds/src/app/code-examples/code-examples/icons/icons-code-examples.component.spec.ts @@ -8,7 +8,6 @@ import {By} from '@angular/platform-browser'; import {IconsExampleIconsGalleryPreviewComponent} from './previews/icons-gallery/icons-example-icons-gallery-preview.component'; import {IconsExampleFontSizePreviewComponent} from './previews/font-size/icons-example-font-size-preview.component'; import {IconsExampleDefaultPreviewComponent} from './previews/default/icons-example-default-preview.component'; -import {IconsExampleColorPreviewComponent} from './previews/color/icons-example-color-preview.component'; import {MatIcon} from '@angular/material/icon'; import {ObMockTranslateService, WINDOW} from '@oblique/oblique'; import {TranslateService} from '@ngx-translate/core'; @@ -35,8 +34,8 @@ describe(IconsCodeExamplesComponent.name, () => { expect(component).toBeTruthy(); }); - test(`that there are 4 ${CodeExampleComponent.name}s`, () => { - expect(fixture.debugElement.queryAll(By.directive(CodeExampleComponent)).length).toBe(4); + test(`that there are 3 ${CodeExampleComponent.name}s`, () => { + expect(fixture.debugElement.queryAll(By.directive(CodeExampleComponent)).length).toBe(3); }); test(`that there is 1 ${IconsExampleIconsGalleryPreviewComponent.name}s`, () => { @@ -51,11 +50,7 @@ describe(IconsCodeExamplesComponent.name, () => { expect(fixture.debugElement.queryAll(By.directive(IconsExampleDefaultPreviewComponent)).length).toBe(1); }); - test(`that there is 1 ${IconsExampleColorPreviewComponent.name}s`, () => { - expect(fixture.debugElement.queryAll(By.directive(IconsExampleColorPreviewComponent)).length).toBe(1); - }); - - test(`that there are 706 ${MatIcon.name}s`, () => { - expect(fixture.debugElement.queryAll(By.directive(MatIcon)).length).toBe(706); + test(`that there are 702 ${MatIcon.name}s`, () => { + expect(fixture.debugElement.queryAll(By.directive(MatIcon)).length).toBe(702); }); }); diff --git a/projects/sds/src/app/code-examples/code-examples/icons/icons-code-examples.component.ts b/projects/sds/src/app/code-examples/code-examples/icons/icons-code-examples.component.ts index 5998f0767..8458e401d 100644 --- a/projects/sds/src/app/code-examples/code-examples/icons/icons-code-examples.component.ts +++ b/projects/sds/src/app/code-examples/code-examples/icons/icons-code-examples.component.ts @@ -5,7 +5,6 @@ import {CommonModule} from '@angular/common'; import {CodeExampleComponent} from '../../code-example/code-example.component'; import {IconsExampleDefaultPreviewComponent} from './previews/default/icons-example-default-preview.component'; import {IconsExampleFontSizePreviewComponent} from './previews/font-size/icons-example-font-size-preview.component'; -import {IconsExampleColorPreviewComponent} from './previews/color/icons-example-color-preview.component'; import {IconsExampleIconsGalleryPreviewComponent} from './previews/icons-gallery/icons-example-icons-gallery-preview.component'; @Component({ @@ -27,16 +26,6 @@ export class IconsCodeExamplesComponent extends CodeExamples { this.getSnippet('icons', 'default/icons-example-default-preview.component.ts', 'TS') ] }, - { - component: IconsExampleColorPreviewComponent, - idParts: ['color'], - title: 'Icon Color', - snippets: [ - this.getSnippet('icons', 'color/icons-example-color-preview.component.html', 'HTML'), - this.getSnippet('icons', 'color/icons-example-color-preview.component.scss', 'SCSS'), - this.getSnippet('icons', 'color/icons-example-color-preview.component.ts', 'TS') - ] - }, { component: IconsExampleFontSizePreviewComponent, idParts: ['font', 'size'], diff --git a/projects/sds/src/app/code-examples/code-examples/icons/previews/color/icons-example-color-preview.component.html b/projects/sds/src/app/code-examples/code-examples/icons/previews/color/icons-example-color-preview.component.html deleted file mode 100644 index d96a8c74a..000000000 --- a/projects/sds/src/app/code-examples/code-examples/icons/previews/color/icons-example-color-preview.component.html +++ /dev/null @@ -1,6 +0,0 @@ -

Primary color:

-

Accent color:

-

Warn color:

-

- By default the icon color depends on the color of the parent element: -

diff --git a/projects/sds/src/app/code-examples/code-examples/icons/previews/color/icons-example-color-preview.component.scss b/projects/sds/src/app/code-examples/code-examples/icons/previews/color/icons-example-color-preview.component.scss deleted file mode 100644 index 2fa271919..000000000 --- a/projects/sds/src/app/code-examples/code-examples/icons/previews/color/icons-example-color-preview.component.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use "@oblique/oblique/src/styles/scss/core/variables"; - -.accent-color { - color: variables.$ob-accent; -} diff --git a/projects/sds/src/app/code-examples/code-examples/icons/previews/color/icons-example-color-preview.component.ts b/projects/sds/src/app/code-examples/code-examples/icons/previews/color/icons-example-color-preview.component.ts deleted file mode 100644 index 874325295..000000000 --- a/projects/sds/src/app/code-examples/code-examples/icons/previews/color/icons-example-color-preview.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {Component} from '@angular/core'; -import {MatIconModule} from '@angular/material/icon'; -import {ObButtonDirective} from '@oblique/oblique'; -import {MatButtonModule} from '@angular/material/button'; - -@Component({ - selector: 'app-icons-example-color-preview', - templateUrl: './icons-example-color-preview.component.html', - styleUrl: './icons-example-color-preview.component.scss', - imports: [MatIconModule, ObButtonDirective, MatButtonModule], - standalone: true -}) -export class IconsExampleColorPreviewComponent {} From 203a26179a7ebce6d3628f92e99ac4b9b7d7f30e Mon Sep 17 00:00:00 2001 From: Nina Date: Tue, 10 Dec 2024 14:36:47 +0100 Subject: [PATCH 2/9] fix(oblique/material): don't stretch images in cards OUI-3421 --- projects/oblique/src/styles/scss/material/_mat-card.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/projects/oblique/src/styles/scss/material/_mat-card.scss b/projects/oblique/src/styles/scss/material/_mat-card.scss index e283e4c9d..f8f95902a 100644 --- a/projects/oblique/src/styles/scss/material/_mat-card.scss +++ b/projects/oblique/src/styles/scss/material/_mat-card.scss @@ -165,7 +165,9 @@ .mat-mdc-card-image, .mdc-card__media { - width: 100%; + max-width: 100%; + height: auto; + align-self: center; } } From 9ddea5e48d6980fb13cdc43423bf53758000253f Mon Sep 17 00:00:00 2001 From: Nina Date: Tue, 10 Dec 2024 14:46:46 +0100 Subject: [PATCH 3/9] feat(sandbox/material): add an example with a card larger that its image OUI-3421 --- .../src/app/material/card/card.component.html | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/projects/sandbox/src/app/material/card/card.component.html b/projects/sandbox/src/app/material/card/card.component.html index 46669795b..ef346cc04 100644 --- a/projects/sandbox/src/app/material/card/card.component.html +++ b/projects/sandbox/src/app/material/card/card.component.html @@ -29,6 +29,33 @@ + + A person in a space suit holding luminous balloons + New feature + +
+ Default Card + Subtitle +
+ +

This card shows a small image.

+
+ OFIT + Last login 20.07.2022 +
+
+ + + + +