feat(sbb-image): provide ability to crop image on host (#2917)

sbb-design-systems · Jul 10, 2024 · 84a7cf7 · 84a7cf7
1 parent 4069791
commit 84a7cf7
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 10 deletions.
diff --git a/src/elements/image/image.scss b/src/elements/image/image.scss
@@ -76,7 +76,11 @@
 }
 
 .sbb-image__figure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sbb-spacing-fixed-4x);
   margin: 0;
+  height: 100%;
 }
 
 .sbb-image__img {
@@ -102,19 +106,20 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: var(--sbb-image-object-position);
   transition: opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing);
 }
 
 .sbb-image__wrapper {
+  display: flex;
   position: relative;
   overflow: hidden;
-  max-width: 100%;
-  border-radius: var(--sbb-image-border-radius);
+  width: 100%;
+  height: 100%;
   aspect-ratio: var(--sbb-image-aspect-ratio);
+  border-radius: var(--sbb-image-border-radius);
 }
 
 .sbb-image__caption {
   @include sbb.text-xs--regular;
-
-  margin-block-start: var(--sbb-spacing-fixed-4x);
 }
diff --git a/src/elements/image/image.stories.ts b/src/elements/image/image.stories.ts
@@ -31,6 +31,18 @@ const aspectRatio: InputType = {
   options: ['free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16', '16-9'],
 };
 
+const alt: InputType = {
+  control: {
+    type: 'text',
+  },
+};
+
+const caption: InputType = {
+  control: {
+    type: 'text',
+  },
+};
+
 const copyright: InputType = {
   control: {
     type: 'text',
@@ -115,8 +127,8 @@ const performanceMark: InputType = {
 };
 
 const defaultArgTypes: ArgTypes = {
-  alt: {},
-  caption: {},
+  alt,
+  caption,
   'border-radius': borderRadius,
   'aspect-ratio': aspectRatio,
   copyright,

diff --git a/src/elements/image/image.ts b/src/elements/image/image.ts
@@ -157,6 +157,7 @@ const breakpointMap: Record<string, number> = {
  * ratio of 4/3 in smaller viewports and 16/9 in larger viewports.
  * @cssprop [--sbb-image-border-radius=var(--sbb-border-radius-4x)] - Can be used to override the
  * `borderRadius` property in case of different values for different viewports.
+ * @cssprop [--sbb-image-object-position] - Can be used to set the object-position css property of the image itself if the image itself is cropped.
  */
 @customElement('sbb-image')
 export class SbbImageElement extends LitElement {

diff --git a/src/elements/image/image.visual.spec.ts b/src/elements/image/image.visual.spec.ts
@@ -92,5 +92,45 @@ describe(`sbb-image`, () => {
         await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
       }),
     );
+
+    it(
+      'cropped',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`<sbb-image image-src=${imageUrl} style="width: 200px; height: 200px"></sbb-image>`,
+        );
+
+        await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
+      }),
+    );
+
+    it(
+      'cropped with caption',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`<sbb-image
+            image-src=${imageUrl}
+            style="width: 200px; height: 300px"
+            caption="I am a caption below"
+          ></sbb-image>`,
+        );
+
+        await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
+      }),
+    );
+
+    it(
+      'cropped with object-position',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`<sbb-image
+            image-src=${imageUrl}
+            style="width: 200px; height: 300px; --sbb-image-object-position: 0 0"
+          ></sbb-image>`,
+        );
+
+        await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
+      }),
+    );
   });
 });
diff --git a/src/elements/image/readme.md b/src/elements/image/readme.md
@@ -37,7 +37,8 @@ The size can be set with `pictureSizesConfig`.
 
 ## CSS Properties
 
-| Name                        | Default                       | Description                                                                                                                                                                          |
-| --------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `--sbb-image-aspect-ratio`  | `auto`                        | Can be used to override `aspectRatio` property. This way we can have, for example, an image component with an aspect ratio of 4/3 in smaller viewports and 16/9 in larger viewports. |
-| `--sbb-image-border-radius` | `var(--sbb-border-radius-4x)` | Can be used to override the `borderRadius` property in case of different values for different viewports.                                                                             |
+| Name                          | Default                       | Description                                                                                                                                                                          |
+| ----------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `--sbb-image-aspect-ratio`    | `auto`                        | Can be used to override `aspectRatio` property. This way we can have, for example, an image component with an aspect ratio of 4/3 in smaller viewports and 16/9 in larger viewports. |
+| `--sbb-image-border-radius`   | `var(--sbb-border-radius-4x)` | Can be used to override the `borderRadius` property in case of different values for different viewports.                                                                             |
+| `--sbb-image-object-position` |                               | Can be used to set the object-position css property of the image itself if the image itself is cropped.                                                                              |