refactor(sbb-image): apply styling according to coding standards (#2673)

src/components/image/__snapshots__/image.spec.snap.js

@@ -0,0 +1,51 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-image should render DOM"] = 
+`<sbb-image
+  aspect-ratio="16-9"
+  border-radius="default"
+  data-loaded=""
+>
+</sbb-image>
+`;
+/* end snapshot sbb-image should render DOM */
+
+snapshots["sbb-image should render Shadow DOM"] = 
+`<figure class="sbb-image__figure">
+  <div class="sbb-image__wrapper">
+    <img
+      alt=""
+      class="sbb-image__blurred"
+      decoding="auto"
+      height="562"
+      loading="eager"
+      width="1000"
+    >
+    <picture>
+      <source
+        media="(min-width: 64rem)"
+        sizes="1200px"
+      >
+      <source
+        media="(min-width: 37.5rem)"
+        sizes="976px"
+      >
+      <source
+        media="(max-width: 37.4375rem)"
+        sizes="320px"
+      >
+      <img
+        alt=""
+        class="sbb-image__img"
+        decoding="auto"
+        height="562"
+        loading="eager"
+        width="1000"
+      >
+    </picture>
+  </div>
+</figure>
+`;
+/* end snapshot sbb-image should render Shadow DOM */
+

src/components/image/image.helper.ts

@@ -1,24 +1,3 @@
-export interface InterfaceImageAttributes {
-  copyrightHolder?: 'Organization' | 'Person';
-  decoding?: 'sync' | 'async' | 'auto';
-  importance?: 'auto' | 'high' | 'low';
-  loading?: 'eager' | 'lazy';
-  aspectRatio?:
-    | 'free'
-    | '1-1'
-    | '1-2'
-    | '2-1'
-    | '2-3'
-    | '3-2'
-    | '3-4'
-    | '4-3'
-    | '4-5'
-    | '5-4'
-    | '9-16'
-    | '16-9';
-  pictureSizesConfig?: InterfaceImageAttributesSizesConfig;
-}
-
 export interface InterfaceImageAttributesSizesConfig {
   breakpoints: InterfaceImageAttributesSizesConfigBreakpoint[];
 }

src/components/image/image.scss

@@ -14,116 +14,107 @@
   display: block;
 }
 
-.image__figure {
-  margin: 0;
+:host([aspect-ratio='1-1']) {
+  --sbb-image-aspect-ratio: 1 / 1;
 }
 
-.image__figure img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+:host([aspect-ratio='1-2']) {
+  --sbb-image-aspect-ratio: 1 / 2;
 }
 
-.image__img {
-  position: absolute;
-  inset: 0;
+:host([aspect-ratio='2-1']) {
+  --sbb-image-aspect-ratio: 2 / 1;
 }
 
-// After successful loading an image, the loaded image is faded in over the blurred lqip image with a short transition.
-// To support transparent images, we need also to fade out the blurred lqip image.
-// This is not perfect in the case of a non transparent image, but does not look that bad.
-.image__figure :is(.image__img, .image__blur-hash) {
-  transition: opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing);
+:host([aspect-ratio='2-3']) {
+  --sbb-image-aspect-ratio: 2 / 3;
 }
 
-.image__figure .image__img {
-  opacity: 0.000001;
+:host([aspect-ratio='3-2']) {
+  --sbb-image-aspect-ratio: 3 / 2;
 }
 
-.image__figure--loaded .image__img {
-  opacity: 0.999999;
+:host([aspect-ratio='3-4']) {
+  --sbb-image-aspect-ratio: 3 / 4;
 }
 
-.image__figure--loaded .image__blur-hash {
-  opacity: 0;
+:host([aspect-ratio='4-3']) {
+  --sbb-image-aspect-ratio: 4 / 3;
 }
 
-.image__wrapper {
-  position: relative;
-  overflow: hidden;
-  max-width: 100%;
-  border-radius: var(--sbb-image-border-radius);
-}
-
-// aspect ratios 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16', '16-9'
-.image__figure--ratio-free .image__wrapper {
-  aspect-ratio: var(--sbb-image-aspect-ratio);
-}
-
-.image__figure--ratio-1-1 .image__wrapper {
-  aspect-ratio: 1 / 1;
+:host([aspect-ratio='4-5']) {
+  --sbb-image-aspect-ratio: 4 / 5;
 }
 
-.image__figure--ratio-1-2 .image__wrapper {
-  aspect-ratio: 1 / 2;
+:host([aspect-ratio='5-4']) {
+  --sbb-image-aspect-ratio: 5 / 4;
 }
 
-.image__figure--ratio-2-1 .image__wrapper {
-  aspect-ratio: 2 / 1;
+:host([aspect-ratio='16-9']) {
+  --sbb-image-aspect-ratio: 16 / 9;
 }
 
-.image__figure--ratio-2-3 .image__wrapper {
-  aspect-ratio: 2 / 3;
+:host([aspect-ratio='9-16']) {
+  --sbb-image-aspect-ratio: 9 / 16;
 }
 
-.image__figure--ratio-3-2 .image__wrapper {
-  aspect-ratio: 3 / 2;
-}
+// Variant: Hero Teaser and Paid Teaser
+:host([data-teaser]) {
+  --sbb-image-aspect-ratio: 1 / 1;
 
-.image__figure--ratio-3-4 .image__wrapper {
-  aspect-ratio: 3 / 4;
+  @include sbb.mq($from: small) {
+    --sbb-image-aspect-ratio: 16 / 9;
+  }
 }
 
-.image__figure--ratio-4-3 .image__wrapper {
-  aspect-ratio: 4 / 3;
+:host(:is([border-radius='none'], [data-teaser])) {
+  --sbb-image-border-radius: 0;
 }
 
-.image__figure--ratio-4-5 .image__wrapper {
-  aspect-ratio: 4 / 5;
+:host([border-radius='round']:not([data-teaser])) {
+  --sbb-image-border-radius: var(--sbb-border-radius-infinity);
 }
 
-.image__figure--ratio-5-4 .image__wrapper {
-  aspect-ratio: 5 / 4;
+.sbb-image__figure {
+  margin: 0;
 }
 
-.image__figure--ratio-16-9 .image__wrapper {
-  aspect-ratio: 16 / 9;
-}
+.sbb-image__img {
+  position: absolute;
+  inset: 0;
+  opacity: 0.000001;
 
-.image__figure--ratio-9-16 .image__wrapper {
-  aspect-ratio: 9 / 16;
+  :host([data-loaded]) & {
+    opacity: 0.999999;
+  }
 }
 
-.image__caption {
-  margin-block-start: var(--sbb-spacing-fixed-4x);
-  @include sbb.text-xs--regular;
+.sbb-image__blurred {
+  :host([data-loaded]) & {
+    opacity: 0;
+  }
 }
 
-// no radius
-.image__figure--no-radius .image__wrapper {
-  border-radius: 0;
+// After successful loading an image, the loaded image is faded in over the blurred lqip image with a short transition.
+// To support transparent images, we need also to fade out the blurred lqip image.
+// This is not perfect in the case of a non transparent image, but does not look that bad.
+:is(.sbb-image__img, .sbb-image__blurred) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing);
 }
 
-// full radius
-.image__figure--round .image__wrapper {
-  border-radius: var(--sbb-border-radius-infinity);
+.sbb-image__wrapper {
+  position: relative;
+  overflow: hidden;
+  max-width: 100%;
+  border-radius: var(--sbb-image-border-radius);
+  aspect-ratio: var(--sbb-image-aspect-ratio);
 }
 
-// Variant: Hero Teaser and Paid Teaser
-.image__figure--teaser .image__wrapper {
-  aspect-ratio: 1 / 1;
+.sbb-image__caption {
+  @include sbb.text-xs--regular;
 
-  @include sbb.mq($from: small) {
-    aspect-ratio: 16 / 9;
-  }
+  margin-block-start: var(--sbb-spacing-fixed-4x);
 }

src/components/image/image.spec.ts

@@ -0,0 +1,34 @@
+import { assert, expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture } from '../core/testing/private.js';
+import { waitForCondition, waitForLitRender } from '../core/testing.js';
+
+import { SbbImageElement } from './image.js';
+
+describe(`sbb-image`, () => {
+  let element: SbbImageElement;
+
+  describe('should render', async () => {
+    beforeEach(async () => {
+      const url = `${location.protocol}//${location.host}/src/components/clock/assets/sbb_clock_face.svg`;
+      element = await fixture(html`<sbb-image image-src=${url}></sbb-image>`);
+
+      // Wait until the image is successfully loaded
+      await waitForCondition(() => element.hasAttribute('data-loaded'), 30, 6000);
+      await waitForLitRender(element);
+
+      assert.instanceOf(element, SbbImageElement);
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot({ ignoreAttributes: ['image-src'] });
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot({
+        ignoreAttributes: ['src', 'srcset', 'fetchpriority'],
+      });
+    });
+  });
+});