Merge remote-tracking branch 'origin/main' into feat/add-now-prop

sbb-design-systems · May 23, 2024 · 439f5c9 · 439f5c9
2 parents 042dde9 + eca71ee
commit 439f5c9
Show file tree

Hide file tree

Showing 17 changed files with 772 additions and 673 deletions.
diff --git a/.github/workflows/container-image-cleanup.yml b/.github/workflows/container-image-cleanup.yml
@@ -37,7 +37,7 @@ jobs:
             for (const packageName of packageNames) {
               const params = {
                 package_type: 'container',
-                package_name: `${repo}/${packageNames}`,
+                package_name: `${repo}/${packageName}`,
                 username: owner
               };
               const { data: versions } = await github.rest.packages.getAllPackageVersionsForPackageOwnedByUser(params);

diff --git a/package.json b/package.json
@@ -75,28 +75,28 @@
     "@open-wc/lit-helpers": "0.7.0",
     "@open-wc/testing": "4.0.0",
     "@sbb-esta/lyne-design-tokens": "0.8.0",
-    "@storybook/addon-a11y": "8.1.1",
-    "@storybook/addon-actions": "8.1.1",
-    "@storybook/addon-essentials": "8.1.1",
-    "@storybook/addon-interactions": "8.1.1",
-    "@storybook/addon-links": "8.1.1",
-    "@storybook/blocks": "8.1.1",
-    "@storybook/test": "8.1.1",
-    "@storybook/web-components": "8.1.1",
-    "@storybook/web-components-vite": "8.1.1",
+    "@storybook/addon-a11y": "8.1.2",
+    "@storybook/addon-actions": "8.1.2",
+    "@storybook/addon-essentials": "8.1.2",
+    "@storybook/addon-interactions": "8.1.2",
+    "@storybook/addon-links": "8.1.2",
+    "@storybook/blocks": "8.1.2",
+    "@storybook/test": "8.1.2",
+    "@storybook/web-components": "8.1.2",
+    "@storybook/web-components-vite": "8.1.2",
     "@types/glob": "8.1.0",
     "@types/mocha": "10.0.6",
     "@types/node": "20.12.12",
     "@types/react": "18.3.2",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "7.9.0",
-    "@typescript-eslint/parser": "7.9.0",
+    "@typescript-eslint/eslint-plugin": "7.10.0",
+    "@typescript-eslint/parser": "7.10.0",
     "@web/test-runner": "0.18.2",
     "@web/test-runner-commands": "0.9.0",
     "@web/test-runner-playwright": "0.11.0",
     "@web/test-runner-puppeteer": "0.16.0",
     "@web/test-runner-visual-regression": "0.9.0",
-    "chromatic": "11.3.5",
+    "chromatic": "11.4.0",
     "custom-elements-manifest": "2.1.0",
     "date-fns": "3.6.0",
     "esbuild-sass-plugin": "3.3.0",
@@ -108,10 +108,10 @@
     "eslint-plugin-react": "7.34.1",
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-yml": "1.14.0",
-    "glob": "10.3.15",
+    "glob": "10.3.16",
     "globals": "15.3.0",
     "husky": "9.0.11",
-    "lint-staged": "15.2.2",
+    "lint-staged": "15.2.4",
     "lit-analyzer": "2.0.3",
     "madge": "7.0.0",
     "npm-run-all2": "6.2.0",
@@ -123,15 +123,15 @@
     "rollup-plugin-postcss-lit": "2.1.0",
     "sass": "1.77.2",
     "sinon": "18.0.0",
-    "storybook": "8.1.1",
+    "storybook": "8.1.2",
     "stylelint": "16.5.0",
     "stylelint-config-prettier-scss": "1.0.0",
     "stylelint-config-standard-scss": "13.1.0",
     "stylelint-scss": "6.3.0",
     "ts-lit-plugin": "2.0.2",
-    "tsx": "4.10.5",
+    "tsx": "4.11.0",
     "typescript": "5.4.5",
-    "typescript-eslint": "7.9.0",
+    "typescript-eslint": "7.10.0",
     "vite": "5.2.11",
     "vite-plugin-dts": "3.9.1"
   },

diff --git a/src/components/image/__snapshots__/image.spec.snap.js b/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 */
+
diff --git a/src/components/image/image.e2e.ts b/src/components/image/image.e2e.ts
diff --git a/src/components/image/image.helper.ts b/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[];
 }

diff --git a/src/components/image/image.scss b/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);
 }