feat(medium): add image part

ovh · Feb 4, 2025 · fd2de1d · fd2de1d
1 parent 4e00af2
commit fd2de1d
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 3 deletions.
diff --git a/packages/ods/src/components/medium/src/components/ods-medium/ods-medium.tsx b/packages/ods/src/components/medium/src/components/ods-medium/ods-medium.tsx
@@ -17,6 +17,7 @@ export class OdsMedium {
         <img
           alt={ this.alt }
           height={ this.height }
+          part="image"
           src={ this.src }
           width={ this.width } />
       </Host>

diff --git a/packages/ods/src/components/medium/src/index.html b/packages/ods/src/components/medium/src/index.html
@@ -27,5 +27,17 @@
               src="https://corporate.ovhcloud.com/sites/default/files/2022-03/ovhcloud-logo2.png"
               width="300">
   </ods-medium>
+
+  <p>Custom CSS</p>
+  <ods-medium alt="OVHcloud logo"
+              class="custom-image"
+              src="https://corporate.ovhcloud.com/sites/default/files/2022-03/ovhcloud-logo2.png"
+              height="100">
+  </ods-medium>
+  <style>
+    .custom-image::part(image) {
+      max-height: 30px;
+    }
+  </style>
 </body>
 </html>
diff --git a/packages/ods/src/components/medium/tests/rendering/ods-medium.e2e.ts b/packages/ods/src/components/medium/tests/rendering/ods-medium.e2e.ts
@@ -1,5 +1,4 @@
-import type { E2EElement, E2EPage } from '@stencil/core/testing';
-import { newE2EPage } from '@stencil/core/testing';
+import { type E2EElement, type E2EPage, newE2EPage } from '@stencil/core/testing';
 
 describe('ods-medium rendering', () => {
   let el: E2EElement;
@@ -10,7 +9,7 @@ describe('ods-medium rendering', () => {
     page = await newE2EPage();
 
     await page.setContent(content);
-    await page.evaluate(() => document.body.style.setProperty('margin', '0px'));
+    await page.evaluate(() => document.body.style.setProperty('margin', '0'));
 
     if (customStyle) {
       await page.addStyleTag({ content: customStyle });
@@ -26,4 +25,15 @@ describe('ods-medium rendering', () => {
     expect(el.shadowRoot).not.toBeNull();
     expect(medium).not.toBeNull();
   });
+
+  describe('part', () => {
+    it('should render with custom style applied', async() => {
+      const customMaxHeight = '50px';
+      await setup('<ods-medium></ods-medium>', `ods-medium::part(image) { max-height: ${customMaxHeight}; }`);
+
+      const tagStyle = await medium.getComputedStyle();
+
+      expect(tagStyle.getPropertyValue('max-height')).toBe(customMaxHeight);
+    });
+  });
 });
diff --git a/packages/storybook/stories/components/medium/medium.stories.ts b/packages/storybook/stories/components/medium/medium.stories.ts
@@ -58,6 +58,21 @@ export const Demo: StoryObj = {
   },
 };
 
+export const CustomCSS: StoryObj = {
+  tags: ['isHidden'],
+  render: () => html`
+<ods-medium alt="${exampleAlt}"
+            class="my-medium"
+            src="${exampleSrc}">
+</ods-medium>
+<style>
+  .my-medium::part(image) {
+    max-width: 100px;
+  }
+</style>
+  `,
+};
+
 export const Overview: StoryObj = {
   tags: ['isHidden'],
   parameters: {

diff --git a/packages/storybook/stories/components/medium/technical-information.mdx b/packages/storybook/stories/components/medium/technical-information.mdx
@@ -15,6 +15,14 @@ import * as MediumStories from './medium.stories';
 
 <TechnicalSpecification data={ SpecificationsMedium } />
 
+<Heading label="Style customization" level={ 2 } />
+
+You can update the component style using a class on the web-component directly or access the internal image using the part `image`.
+
+Custom CSS:
+
+<Canvas of={ MediumStories.CustomCSS } sourceState="shown" />
+
 <Heading label="Examples" level={ 2 } />
 
 <Heading label="Default" level={ 3 } />