diff --git a/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.component.html b/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.component.html index 33f2db9cb5..7e67e62414 100644 --- a/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.component.html +++ b/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.component.html @@ -7,8 +7,8 @@ Transition between Magento, Shopify or any other platforms without the hassle of reinventing your front-end.

- - + Magento Logo + Shopify Logo
\ No newline at end of file diff --git a/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.component.ts b/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.component.ts index 0de993cfab..3c185794b6 100644 --- a/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.component.ts +++ b/apps/daffio/src/app/content/home/components/home-callout-platforms/home-callout-platforms.component.ts @@ -6,7 +6,7 @@ import { import { DAFF_CALLOUT_COMPONENTS } from '@daffodil/design/callout'; import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container'; -import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image'; +import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite'; @Component({ selector: 'daffio-home-callout-platforms', @@ -15,7 +15,7 @@ import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image'; changeDetection: ChangeDetectionStrategy.OnPush, imports: [ DAFF_CALLOUT_COMPONENTS, - DAFF_IMAGE_COMPONENTS, + DAFF_IMAGE_LITE_COMPONENTS, DAFF_CONTAINER_COMPONENTS, ], }) diff --git a/apps/daffio/src/app/content/home/components/home-callout-sponsors/home-callout-sponsors.component.html b/apps/daffio/src/app/content/home/components/home-callout-sponsors/home-callout-sponsors.component.html index b587ee68ae..2d03f0e365 100644 --- a/apps/daffio/src/app/content/home/components/home-callout-sponsors/home-callout-sponsors.component.html +++ b/apps/daffio/src/app/content/home/components/home-callout-sponsors/home-callout-sponsors.component.html @@ -12,7 +12,7 @@

Become a sponsor diff --git a/apps/demo/src/app/core/image-gallery/components/image-gallery.component.html b/apps/demo/src/app/core/image-gallery/components/image-gallery.component.html index a32bccc9ff..dbee879675 100644 --- a/apps/demo/src/app/core/image-gallery/components/image-gallery.component.html +++ b/apps/demo/src/app/core/image-gallery/components/image-gallery.component.html @@ -1,12 +1,11 @@ @for(image of images; track image) { - - + height="737" /> } diff --git a/apps/demo/src/app/core/image-gallery/components/image-gallery.component.ts b/apps/demo/src/app/core/image-gallery/components/image-gallery.component.ts index df1ae5c14a..499dddb77a 100644 --- a/apps/demo/src/app/core/image-gallery/components/image-gallery.component.ts +++ b/apps/demo/src/app/core/image-gallery/components/image-gallery.component.ts @@ -6,7 +6,7 @@ import { } from '@angular/core'; import { Store } from '@ngrx/store'; -import { DaffImageComponent } from '@daffodil/design/image'; +import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite'; import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery'; import { SetSelectedImageState } from '../actions/image-gallery.actions'; @@ -17,7 +17,7 @@ import * as fromDemoImageGallery from '../reducers/index'; templateUrl: './image-gallery.component.html', encapsulation: ViewEncapsulation.None, imports: [ - DaffImageComponent, + DAFF_IMAGE_LITE_COMPONENTS, DAFF_MEDIA_GALLERY_COMPONENTS, ], }) diff --git a/libs/design-examples/card/src/basic-cards/basic-cards.component.html b/libs/design-examples/card/src/basic-cards/basic-cards.component.html index 79067f9ff1..f4c3c7a1e3 100644 --- a/libs/design-examples/card/src/basic-cards/basic-cards.component.html +++ b/libs/design-examples/card/src/basic-cards/basic-cards.component.html @@ -1,12 +1,11 @@ - - + />
Basel, Switzerland

Basel Exhibition Centre

@@ -21,14 +20,13 @@

Basel Exhibition Centre

 - - + />
Basel, Switzerland

Basel Exhibition Centre

diff --git a/libs/design-examples/card/src/basic-cards/basic-cards.component.ts b/libs/design-examples/card/src/basic-cards/basic-cards.component.ts index d396011752..40ff9bf079 100644 --- a/libs/design-examples/card/src/basic-cards/basic-cards.component.ts +++ b/libs/design-examples/card/src/basic-cards/basic-cards.component.ts @@ -7,7 +7,7 @@ import { faMapMarked } from '@fortawesome/free-solid-svg-icons'; import { DaffButtonComponent } from '@daffodil/design/button'; import { DAFF_ALL_CARD_COMPONENTS } from '@daffodil/design/card'; -import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image'; +import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite'; @Component({ selector: 'basic-cards-example', @@ -16,9 +16,9 @@ import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image'; changeDetection: ChangeDetectionStrategy.OnPush, imports: [ DAFF_ALL_CARD_COMPONENTS, - DAFF_IMAGE_COMPONENTS, FaIconComponent, DaffButtonComponent, + DAFF_IMAGE_LITE_COMPONENTS, ], }) export class BasicCardsExampleComponent { diff --git a/libs/design-examples/card/src/card-orientation/card-orientation.component.html b/libs/design-examples/card/src/card-orientation/card-orientation.component.html index b5cf1b77a8..2720178687 100644 --- a/libs/design-examples/card/src/card-orientation/card-orientation.component.html +++ b/libs/design-examples/card/src/card-orientation/card-orientation.component.html @@ -8,14 +8,12 @@ - - + height="946" />
Featured Category

Running Shoes

diff --git a/libs/design-examples/image-lite/ng-package.json b/libs/design-examples/image-lite/ng-package.json new file mode 100644 index 0000000000..0ad7a822a9 --- /dev/null +++ b/libs/design-examples/image-lite/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-entrypoint.schema.json", + "lib": { + "entryFile": "src/index.ts", + "styleIncludePaths": ["../../src/scss"] + } +} diff --git a/libs/design-examples/image-lite/src/basic-image-lite/basic-image-lite.component.html b/libs/design-examples/image-lite/src/basic-image-lite/basic-image-lite.component.html new file mode 100644 index 0000000000..43bc0838c5 --- /dev/null +++ b/libs/design-examples/image-lite/src/basic-image-lite/basic-image-lite.component.html @@ -0,0 +1,5 @@ +Ergonomic Bronze Pants T-Shirt diff --git a/libs/design-examples/image-lite/src/basic-image-lite/basic-image-lite.component.scss b/libs/design-examples/image-lite/src/basic-image-lite/basic-image-lite.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/libs/design-examples/image-lite/src/basic-image-lite/basic-image-lite.component.ts b/libs/design-examples/image-lite/src/basic-image-lite/basic-image-lite.component.ts new file mode 100644 index 0000000000..f4683d1a27 --- /dev/null +++ b/libs/design-examples/image-lite/src/basic-image-lite/basic-image-lite.component.ts @@ -0,0 +1,19 @@ +import { + ChangeDetectionStrategy, + Component, +} from '@angular/core'; + +import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite'; + +@Component({ + selector: 'basic-image-lite-example', + templateUrl: './basic-image-lite.component.html', + styleUrl: './basic-image-lite.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ + DAFF_IMAGE_LITE_COMPONENTS, + ], +}) +export class BasicImageLiteExampleComponent { + +} diff --git a/libs/design-examples/image-lite/src/index.ts b/libs/design-examples/image-lite/src/index.ts new file mode 100644 index 0000000000..4aaf8f92ed --- /dev/null +++ b/libs/design-examples/image-lite/src/index.ts @@ -0,0 +1 @@ +export * from './public_api'; diff --git a/libs/design-examples/image-lite/src/provider.ts b/libs/design-examples/image-lite/src/provider.ts new file mode 100644 index 0000000000..2ed83e979e --- /dev/null +++ b/libs/design-examples/image-lite/src/provider.ts @@ -0,0 +1,14 @@ +import { makeEnvironmentProviders } from '@angular/core'; + +import { provideDaffDocsExampleContent } from '@daffodil/docs'; + +export const provideDaffDesignImageLiteExamplesContent = () => makeEnvironmentProviders(provideDaffDocsExampleContent( + { + id: 'basic-image-lite', + component: () => import('./basic-image-lite/basic-image-lite.component').then(c => c.BasicImageLiteExampleComponent), + }, + { + id: 'skeleton-image-lite', + component: () => import('./skeleton-image-lite/skeleton-image-lite.component').then(c => c.SkeletonImageLiteExampleComponent), + }, +)); diff --git a/libs/design-examples/image-lite/src/public_api.ts b/libs/design-examples/image-lite/src/public_api.ts new file mode 100644 index 0000000000..3d5268470d --- /dev/null +++ b/libs/design-examples/image-lite/src/public_api.ts @@ -0,0 +1,4 @@ +export { SkeletonImageLiteExampleComponent } from './skeleton-image-lite/skeleton-image-lite.component'; +export { BasicImageLiteExampleComponent } from './basic-image-lite/basic-image-lite.component'; + +export { provideDaffDesignImageLiteExamplesContent } from './provider'; diff --git a/libs/design-examples/image-lite/src/skeleton-image-lite/skeleton-image-lite.component.html b/libs/design-examples/image-lite/src/skeleton-image-lite/skeleton-image-lite.component.html new file mode 100644 index 0000000000..8dbfd14639 --- /dev/null +++ b/libs/design-examples/image-lite/src/skeleton-image-lite/skeleton-image-lite.component.html @@ -0,0 +1,6 @@ +Ergonomic Bronze Pants T-Shirt diff --git a/libs/design-examples/image-lite/src/skeleton-image-lite/skeleton-image-lite.component.scss b/libs/design-examples/image-lite/src/skeleton-image-lite/skeleton-image-lite.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/libs/design-examples/image-lite/src/skeleton-image-lite/skeleton-image-lite.component.ts b/libs/design-examples/image-lite/src/skeleton-image-lite/skeleton-image-lite.component.ts new file mode 100644 index 0000000000..210631cc3f --- /dev/null +++ b/libs/design-examples/image-lite/src/skeleton-image-lite/skeleton-image-lite.component.ts @@ -0,0 +1,19 @@ +import { + ChangeDetectionStrategy, + Component, +} from '@angular/core'; + +import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite'; + +@Component({ + selector: 'skeleton-image-lite-example', + templateUrl: './skeleton-image-lite.component.html', + styleUrl: './skeleton-image-lite.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ + DAFF_IMAGE_LITE_COMPONENTS, + ], +}) +export class SkeletonImageLiteExampleComponent { + +} diff --git a/libs/design-examples/media-gallery/src/basic-media-gallery/basic-media-gallery.component.html b/libs/design-examples/media-gallery/src/basic-media-gallery/basic-media-gallery.component.html index 701fca9a17..7f56b42fa8 100644 --- a/libs/design-examples/media-gallery/src/basic-media-gallery/basic-media-gallery.component.html +++ b/libs/design-examples/media-gallery/src/basic-media-gallery/basic-media-gallery.component.html @@ -4,47 +4,43 @@ thumbnailSrc="https://assets.daff.io/elegant_gold_soap.png" label="Elegant Golf Soap T-Shirt" > - + width="934" + height="934" /> - + width="934" + height="934" /> - + width="934" + height="934" /> - + width="934" + height="934" /> diff --git a/libs/design-examples/media-gallery/src/basic-media-gallery/basic-media-gallery.component.ts b/libs/design-examples/media-gallery/src/basic-media-gallery/basic-media-gallery.component.ts index 7900c9551c..72cdee0235 100644 --- a/libs/design-examples/media-gallery/src/basic-media-gallery/basic-media-gallery.component.ts +++ b/libs/design-examples/media-gallery/src/basic-media-gallery/basic-media-gallery.component.ts @@ -3,7 +3,7 @@ import { Component, } from '@angular/core'; -import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image'; +import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite'; import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery'; @Component({ @@ -12,7 +12,7 @@ import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery'; changeDetection: ChangeDetectionStrategy.OnPush, imports: [ DAFF_MEDIA_GALLERY_COMPONENTS, - DAFF_IMAGE_COMPONENTS, + DAFF_IMAGE_LITE_COMPONENTS, ], }) export class BasicMediaGalleryExampleComponent {} diff --git a/libs/design-examples/media-gallery/src/iterated-media-gallery/iterated-media-gallery.component.html b/libs/design-examples/media-gallery/src/iterated-media-gallery/iterated-media-gallery.component.html index a635d6c4d0..926d47e114 100644 --- a/libs/design-examples/media-gallery/src/iterated-media-gallery/iterated-media-gallery.component.html +++ b/libs/design-examples/media-gallery/src/iterated-media-gallery/iterated-media-gallery.component.html @@ -6,12 +6,11 @@ [label]="element.alt" > @switch (element.type) { @case ('image') { - + [height]="element.height" /> } } } diff --git a/libs/design-examples/media-gallery/src/iterated-media-gallery/iterated-media-gallery.component.ts b/libs/design-examples/media-gallery/src/iterated-media-gallery/iterated-media-gallery.component.ts index aba63ff8b3..905c3ff878 100644 --- a/libs/design-examples/media-gallery/src/iterated-media-gallery/iterated-media-gallery.component.ts +++ b/libs/design-examples/media-gallery/src/iterated-media-gallery/iterated-media-gallery.component.ts @@ -3,7 +3,7 @@ import { Component, } from '@angular/core'; -import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image'; +import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite'; import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery'; @Component({ @@ -12,7 +12,7 @@ import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery'; changeDetection: ChangeDetectionStrategy.OnPush, imports: [ DAFF_MEDIA_GALLERY_COMPONENTS, - DAFF_IMAGE_COMPONENTS, + DAFF_IMAGE_LITE_COMPONENTS, ], }) export class IteratedMediaGalleryExampleComponent { diff --git a/libs/design-examples/media-gallery/src/media-gallery-with-video/media-gallery-with-video.component.html b/libs/design-examples/media-gallery/src/media-gallery-with-video/media-gallery-with-video.component.html index 4734bdb097..0cbc33f28f 100644 --- a/libs/design-examples/media-gallery/src/media-gallery-with-video/media-gallery-with-video.component.html +++ b/libs/design-examples/media-gallery/src/media-gallery-with-video/media-gallery-with-video.component.html @@ -4,36 +4,33 @@ thumbnailSrc="https://assets.daff.io/elegant_gold_soap.png" label="Elegant Golf Soap T-Shirt" > - + width="934" + height="934" /> - + width="622" + height="934" /> - + width="934" + height="934" /> - + width="934" + height="934" /> - + width="622" + height="934" /> - + width="934" + height="934" /> - + width="400" + height="400" /> diff --git a/libs/design-examples/media-gallery/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component.ts b/libs/design-examples/media-gallery/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component.ts index d8017ba795..f51f7f99b1 100644 --- a/libs/design-examples/media-gallery/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component.ts +++ b/libs/design-examples/media-gallery/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component.ts @@ -3,7 +3,7 @@ import { Component, } from '@angular/core'; -import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image'; +import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite'; import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery'; @Component({ @@ -12,7 +12,7 @@ import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery'; changeDetection: ChangeDetectionStrategy.OnPush, imports: [ DAFF_MEDIA_GALLERY_COMPONENTS, - DAFF_IMAGE_COMPONENTS, + DAFF_IMAGE_LITE_COMPONENTS, ], }) export class MismatchedSizesMediaGalleryExampleComponent {} diff --git a/libs/design-examples/tsconfig.json b/libs/design-examples/tsconfig.json index 3c883cb321..54366fec27 100644 --- a/libs/design-examples/tsconfig.json +++ b/libs/design-examples/tsconfig.json @@ -47,6 +47,9 @@ "@daffodil/design-examples/image": [ "libs/design-examples/image/src" ], + "@daffodil/design-examples/image-lite": [ + "libs/design-examples/image-lite/src" + ], "@daffodil/design-examples/input": [ "libs/design-examples/input/src" ], diff --git a/libs/design/README.md b/libs/design/README.md index 1b3c3ab9cb..9a4386944f 100644 --- a/libs/design/README.md +++ b/libs/design/README.md @@ -37,6 +37,7 @@ Refer to the [Upgrade Guide](/libs/design/guides/upgrading.md). * [Native Select](/libs/design/src/atoms/form/native-select/README.md) * [Quantity Field](/libs/design/src/atoms/form/quantity-field/README.md) * [Image](/libs/design/image/README.md) +* [Image Lite](/libs/design/image-lite/README.md) * [Tag](/libs/design/tag/README.md) ### Molecules diff --git a/libs/design/card/src/card-base.scss b/libs/design/card/src/card-base.scss index 12fe1d6b05..12e28d9640 100644 --- a/libs/design/card/src/card-base.scss +++ b/libs/design/card/src/card-base.scss @@ -10,7 +10,6 @@ $card-border-radius: 0.5rem; .daff-card__image { display: inline-block; - overflow: hidden; height: 100%; width: 100%; } diff --git a/libs/design/image-lite/README.md b/libs/design/image-lite/README.md new file mode 100644 index 0000000000..391cb10218 --- /dev/null +++ b/libs/design/image-lite/README.md @@ -0,0 +1,58 @@ +# Image Lite +Image lite applies Daffodil's image styling directly to a native `` element. + +## Overview +Image lite's main purpose is to handle the loading state of an image. It's a thin layer on top of Angular's [`NgOptimizedImage`](https://angular.dev/guide/image-optimization). `NgOptimizedImage` handles the performance work—lazy loading, preloading priority images, and requiring `width` and `height` so the browser can reserve space before the image loads. + + + +## Usage + +Import `DAFF_IMAGE_LITE_COMPONENTS` into your component: + +```ts +import { Component } from '@angular/core'; +import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite'; + +@Component({ + selector: 'custom-component', + templateUrl: './custom-component.component.html', + imports: [ + DAFF_IMAGE_LITE_COMPONENTS, + ], +}) +export class CustomComponent {} +``` + +> `DAFF_IMAGE_LITE_COMPONENTS` includes `NgOptimizedImage`, so there's no need to import it separately. + +## Anatomy +Add the `daff-image` attribute to an `` and set the source with `ngSrc` instead of `src`: + +```html +Bottom up view of Basel exhibition centre +``` + +## Required attributes + +| Attribute | Description | +| --------- | ----------- | +| `ngSrc` | The image source URL. Replaces `src`; setting both throws an error. | +| `width` | The intrinsic width of the image in pixels. | +| `height` | The intrinsic height of the image in pixels. | + +`ngSrc`, `width`, and `height` are required by `NgOptimizedImage` and will throw an error if missing. `alt` is not enforced, but should always be set. See [Accessibility](#accessibility). + +## Features + +### Skeleton screen +Use the `skeleton` property to display a placeholder skeleton screen that helps reduce load-time frustration. The skeleton fills the space the image will occupy, so `width` and `height` still need to be set. + + + +## Accessibility +Provide concise, meaningful descriptions that convey the content and purpose of the image by using the `alt` attribute. diff --git a/libs/design/image-lite/ng-package.json b/libs/design/image-lite/ng-package.json new file mode 100644 index 0000000000..14833aac7d --- /dev/null +++ b/libs/design/image-lite/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-entrypoint.schema.json", + "lib": { + "entryFile": "src/index.ts", + "styleIncludePaths": ["../src/scss"] + } +} \ No newline at end of file diff --git a/libs/design/image-lite/src/image-theme.scss b/libs/design/image-lite/src/image-theme.scss new file mode 100644 index 0000000000..873ae8bc73 --- /dev/null +++ b/libs/design/image-lite/src/image-theme.scss @@ -0,0 +1,18 @@ +@use '../../scss/theming' as *; + +@mixin daff-image-lite-theme($theme) { + $neutral: daff-get-palette($theme, neutral); + $mode: daff-get-theme-mode($theme); + + .daff-image-lite { + &.daff-skeleton { + @include daff-light-mode($mode) { + background-color: daff-color($neutral, 20); + } + + @include daff-dark-mode($mode) { + background-color: daff-color($neutral, 90); + } + } + } +} diff --git a/libs/design/image-lite/src/image.component.scss b/libs/design/image-lite/src/image.component.scss new file mode 100644 index 0000000000..d1cbd6fb38 --- /dev/null +++ b/libs/design/image-lite/src/image.component.scss @@ -0,0 +1,22 @@ +@use '../../scss/state'; + +:host { + display: block; + max-width: 100%; + height: auto; + + &.daff-skeleton { + animation: loading 1000ms linear infinite alternate; + object-fit: none; + object-position: -200% -200%; + } +} + +@keyframes loading { + from { + opacity: 0.5; + } + to { + opacity: 1; + } +} diff --git a/libs/design/image-lite/src/image.component.spec.ts b/libs/design/image-lite/src/image.component.spec.ts new file mode 100644 index 0000000000..27bd6163f6 --- /dev/null +++ b/libs/design/image-lite/src/image.component.spec.ts @@ -0,0 +1,58 @@ +import { + Component, + DebugElement, + signal, +} from '@angular/core'; +import { + waitForAsync, + ComponentFixture, + TestBed, +} from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; + +import { + DAFF_IMAGE_LITE_COMPONENTS, + DaffImageLiteComponent, +} from '@daffodil/design/image-lite'; + +@Component({ + template: ` + `, + imports: [ + DAFF_IMAGE_LITE_COMPONENTS, + ], +}) + +class WrapperComponent { + skeleton = signal(false); +} + +describe('@daffodil/design/image | DaffImageLiteComponent', () => { + let wrapper: WrapperComponent; + let component: DaffImageLiteComponent; + let de: DebugElement; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [ + WrapperComponent, + ], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WrapperComponent); + wrapper = fixture.componentInstance; + de = fixture.debugElement.query(By.css('img[daff-image]')); + component = de.componentInstance; + }); + + it('should take skeleton as an input', () => { + wrapper.skeleton.set(true); + fixture.detectChanges(); + + expect(de.nativeElement.classList.contains('daff-skeleton')).toEqual(true); + }); +}); diff --git a/libs/design/image-lite/src/image.component.ts b/libs/design/image-lite/src/image.component.ts new file mode 100644 index 0000000000..7e45c22003 --- /dev/null +++ b/libs/design/image-lite/src/image.component.ts @@ -0,0 +1,24 @@ +/* eslint-disable @angular-eslint/component-selector */ +import { + Component, + ChangeDetectionStrategy, +} from '@angular/core'; + +import { DaffSkeletonableDirective } from '@daffodil/design'; + +@Component({ + selector: 'img[daff-image]', + template: '', + styleUrl: './image.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + hostDirectives: [ + { + directive: DaffSkeletonableDirective, + inputs: ['skeleton'], + }, + ], + host: { + class: 'daff-image-lite', + }, +}) +export class DaffImageLiteComponent {} diff --git a/libs/design/image-lite/src/image.ts b/libs/design/image-lite/src/image.ts new file mode 100644 index 0000000000..d2de5dc049 --- /dev/null +++ b/libs/design/image-lite/src/image.ts @@ -0,0 +1,11 @@ +import { NgOptimizedImage } from '@angular/common'; + +import { DaffImageLiteComponent } from './image.component'; + +/** + * @docs-private + */ +export const DAFF_IMAGE_LITE_COMPONENTS = [ + DaffImageLiteComponent, + NgOptimizedImage, +]; diff --git a/libs/design/image-lite/src/index.ts b/libs/design/image-lite/src/index.ts new file mode 100644 index 0000000000..4aaf8f92ed --- /dev/null +++ b/libs/design/image-lite/src/index.ts @@ -0,0 +1 @@ +export * from './public_api'; diff --git a/libs/design/image-lite/src/public_api.ts b/libs/design/image-lite/src/public_api.ts new file mode 100644 index 0000000000..20f1a02dff --- /dev/null +++ b/libs/design/image-lite/src/public_api.ts @@ -0,0 +1,2 @@ +export { DaffImageLiteComponent } from './image.component'; +export { DAFF_IMAGE_LITE_COMPONENTS } from './image'; diff --git a/libs/design/image/README.md b/libs/design/image/README.md index 077c1b696c..52bdd8b17f 100644 --- a/libs/design/image/README.md +++ b/libs/design/image/README.md @@ -1,6 +1,10 @@ # Image Image has built-in performance and accessibility optimizations that allow users to easily display responsive images. +> **Deprecation notice:** +> +> Image is deprecated in version 0.95.0 and will be removed in version 0.98.0. Use [Image Lite](/libs/design/image-lite/README.md) instead. + ## Overview Image builds on Angular's [`NgOptimizedImage`](https://angular.dev/guide/image-optimization) to provide responsive images with stable layouts out of the box. It helps to avoid common image-related performance and accessibility issues by: diff --git a/libs/design/image/src/image.module.ts b/libs/design/image/src/image.module.ts index 0d350e9557..d85d4489c8 100644 --- a/libs/design/image/src/image.module.ts +++ b/libs/design/image/src/image.module.ts @@ -4,7 +4,7 @@ import { NgModule } from '@angular/core'; import { DaffImageComponent } from './image/image.component'; /** - * @deprecated in favor of {@link DAFF_IMAGE_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0. + * @deprecated in favor of {@link DAFF_IMAGE_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 0.98.0. * */ @NgModule({ imports: [ diff --git a/libs/design/image/src/image.ts b/libs/design/image/src/image.ts index 2585302fff..b9ff948903 100644 --- a/libs/design/image/src/image.ts +++ b/libs/design/image/src/image.ts @@ -2,6 +2,8 @@ import { DaffImageComponent } from './image/image.component'; /** * @docs-private + * + * @deprecated in favor of {@link DAFF_IMAGE_LITE_COMPONENTS}. Deprecated in version 0.95.0. Will be removed in version 0.98.0. */ export const DAFF_IMAGE_COMPONENTS = [ DaffImageComponent, diff --git a/libs/design/image/src/image/image.component.ts b/libs/design/image/src/image/image.component.ts index ff3a85e6f1..8ac062536f 100644 --- a/libs/design/image/src/image/image.component.ts +++ b/libs/design/image/src/image/image.component.ts @@ -21,6 +21,9 @@ const validateInput = (prop: string) => (value: T): T => { return value; }; +/** + * @deprecated in favor of {@link DaffImageLiteComponent}. Deprecated in version 0.95.0. Will be removed in version 0.98.0. + */ @Component({ selector: 'daff-image', templateUrl: './image.component.html', diff --git a/libs/design/media-gallery/README.md b/libs/design/media-gallery/README.md index e20d37aa40..c1499aed48 100644 --- a/libs/design/media-gallery/README.md +++ b/libs/design/media-gallery/README.md @@ -43,7 +43,7 @@ A media gallery is composed of a container and one or more thumbnails: ```html - + Your description ``` diff --git a/libs/design/media-gallery/src/media-gallery/media-gallery.component.scss b/libs/design/media-gallery/src/media-gallery/media-gallery.component.scss index 8aadab2765..8a97ad143b 100644 --- a/libs/design/media-gallery/src/media-gallery/media-gallery.component.scss +++ b/libs/design/media-gallery/src/media-gallery/media-gallery.component.scss @@ -99,16 +99,11 @@ } &__selected-thumbnail { - display: flex; - align-items: center; - justify-content: center; - flex-grow: 1; - width: 100%; order: 1; + width: 100%; @include layout.breakpoint(big-tablet) { order: 2; - margin: 0; } } diff --git a/libs/design/media-gallery/src/media-gallery/media-gallery.component.ts b/libs/design/media-gallery/src/media-gallery/media-gallery.component.ts index 5696bbe35b..5d381adc00 100644 --- a/libs/design/media-gallery/src/media-gallery/media-gallery.component.ts +++ b/libs/design/media-gallery/src/media-gallery/media-gallery.component.ts @@ -31,7 +31,7 @@ let uniqueGalleryId = 0; * ```html * * - * + * Your description * * * ``` diff --git a/libs/design/media-gallery/src/media-gallery/specs/with-loop.spec.ts b/libs/design/media-gallery/src/media-gallery/specs/with-loop.spec.ts index e7734b0894..9d404afc7d 100644 --- a/libs/design/media-gallery/src/media-gallery/specs/with-loop.spec.ts +++ b/libs/design/media-gallery/src/media-gallery/specs/with-loop.spec.ts @@ -9,7 +9,7 @@ import { } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image'; +import { DAFF_IMAGE_LITE_COMPONENTS } from '@daffodil/design/image-lite'; import { DAFF_MEDIA_GALLERY_COMPONENTS, DaffMediaGalleryComponent, @@ -20,12 +20,11 @@ import { @for(image of images; track image) { - - + height="737" /> } @@ -33,7 +32,7 @@ import { `, imports: [ DAFF_MEDIA_GALLERY_COMPONENTS, - DAFF_IMAGE_COMPONENTS, + DAFF_IMAGE_LITE_COMPONENTS, ], }) class WrapperComponent { diff --git a/libs/design/scss/theme.scss b/libs/design/scss/theme.scss index dadae3e9f1..5298a55beb 100644 --- a/libs/design/scss/theme.scss +++ b/libs/design/scss/theme.scss @@ -55,6 +55,7 @@ @use '../text-snippet//src/text-snippet-theme' as text-snippet; @use '../tree/src/tree-theme' as tree; @use '../toast/src/toast-theme' as toast; +@use '../image-lite//src/image-theme' as image-lite; // // Generates the styles of `@daffodil/design`'s component themes. @@ -102,6 +103,7 @@ @include hero.daff-hero-theme($theme); @include list.daff-list-theme($theme); + @include image-lite.daff-image-lite-theme($theme); @include media-gallery.daff-media-gallery-theme($theme); @include menu.daff-menu-theme($theme); @include modal.daff-modal-theme($theme); diff --git a/libs/design/tsconfig.json b/libs/design/tsconfig.json index f8a076660c..87298547db 100644 --- a/libs/design/tsconfig.json +++ b/libs/design/tsconfig.json @@ -55,6 +55,9 @@ "@daffodil/design/image": [ "libs/design/image/src" ], + "@daffodil/design/image-lite": [ + "libs/design/image-lite/src" + ], "@daffodil/design/input": [ "libs/design/input/src" ],