changes after review

SAP · Oct 15, 2024 · 7e2e348 · 7e2e348
1 parent 3564192
commit 7e2e348
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 19 deletions.
diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -644,7 +644,7 @@ export interface FeatureTogglesInterface {
    * })
    * ```
    */
-  useMediaComponentWithConfigurableMediaQueries?: boolean;
+  useExtendedMediaComponent?: boolean;
 }
 
 export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
@@ -743,5 +743,5 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   enableConsecutiveCharactersPasswordRequirement: false,
   enablePasswordsCannotMatchInPasswordUpdateForm: false,
   allPageMetaResolversEnabledInCsr: false,
-  useMediaComponentWithConfigurableMediaQueries: false,
+  useExtendedMediaComponent: false,
 };
diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -380,7 +380,7 @@ if (environment.cpq) {
         enableConsecutiveCharactersPasswordRequirement: true,
         enablePasswordsCannotMatchInPasswordUpdateForm: true,
         allPageMetaResolversEnabledInCsr: true,
-        useMediaComponentWithConfigurableMediaQueries: true,
+        useExtendedMediaComponent: true,
       };
       return appFeatureToggles;
     }),

diff --git a/projects/storefrontlib/shared/components/media/media.component.html b/projects/storefrontlib/shared/components/media/media.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="!!media">
-  <ng-container *cxFeature="'useMediaComponentWithConfigurableMediaQueries'">
+  <ng-container *cxFeature="'useExtendedMediaComponent'">
     <picture
       *ngIf="
         !!media?.sources?.length && elementType !== 'img';
@@ -46,7 +46,7 @@
     </ng-template>
   </ng-container>
 
-  <ng-container *cxFeature="'!useMediaComponentWithConfigurableMediaQueries'">
+  <ng-container *cxFeature="'!useExtendedMediaComponent'">
     <picture *ngIf="media.srcset && !isLegacy; else legacyImgTmp">
       <source
         *ngFor="

diff --git a/projects/storefrontlib/shared/components/media/media.component.spec.ts b/projects/storefrontlib/shared/components/media/media.component.spec.ts
@@ -73,15 +73,11 @@ export class MockMediaSourcesPipe implements PipeTransform {
 
 class MockMediaService {
   srcset: any;
-  useMediaComponentWithConfigurableMediaQueries: boolean;
+  useExtendedMediaComponent: boolean;
 
-  constructor(
-    srcset: string | null,
-    useMediaComponentWithConfigurableMediaQueries: boolean
-  ) {
+  constructor(srcset: string | null, useExtendedMediaComponent: boolean) {
     this.srcset = srcset;
-    this.useMediaComponentWithConfigurableMediaQueries =
-      useMediaComponentWithConfigurableMediaQueries;
+    this.useExtendedMediaComponent = useExtendedMediaComponent;
   }
 
   getMedia(media: any): Media {
@@ -112,8 +108,7 @@ class MockMediaService {
     mediaContainer?: any
   ) {
     const shouldGetMediaForPictureElement =
-      this.useMediaComponentWithConfigurableMediaQueries &&
-      elementType !== 'img';
+      this.useExtendedMediaComponent && elementType !== 'img';
 
     return shouldGetMediaForPictureElement
       ? this.getMediaForPictureElement(mediaContainer)
@@ -201,7 +196,7 @@ function createComponent(useImgElement = false) {
 }
 
 describe('MediaComponent', () => {
-  describe('with enabled useMediaComponentWithConfigurableMediaQueries', () => {
+  describe('with enabled useExtendedMediaComponent', () => {
     it('should have picture element if elementType is `picture`', () => {
       configureTestingModule(new MockMediaService('srcset', true), false, true);
       const { fixture } = createComponent(false);

diff --git a/projects/storefrontlib/shared/components/media/media.component.ts b/projects/storefrontlib/shared/components/media/media.component.ts
@@ -65,11 +65,15 @@ export class MediaComponent implements OnChanges {
 
   /**
    * The intrinsic width of the image, in pixels
+   *
+   * Works only when `useExtendedMediaComponent` toggle is true
    */
   @Input() width: number;
 
   /**
    * The intrinsic height of the image, in pixels
+   *
+   * Works only when `useExtendedMediaComponent` toggle is true
    */
   @Input() height: number;
 
@@ -82,6 +86,8 @@ export class MediaComponent implements OnChanges {
    * - The sizes attribute is defined using media queries.
    * - It allows specifying different sizes for various screen widths or other conditions (e.g., device orientation).
    * - The browser uses the value to pick the most appropriate image source from the `srcset`.
+   *
+   * Works only when `useExtendedMediaComponent` toggle is true
    */
   @Input() sizes: string;
 
@@ -123,7 +129,7 @@ export class MediaComponent implements OnChanges {
    * @deprecated since 2211.30. It will be eventually removed in the future
    *
    * To use `img` HTML element instead of `picture`
-   * use `useMediaComponentWithConfigurableMediaQueries` feature flag
+   * use `useExtendedMediaComponent` feature flag
    * and pass `[elementType]="'img'"` input to the component
    */
   protected isLegacy =

diff --git a/projects/storefrontlib/shared/components/media/media.service.ts b/projects/storefrontlib/shared/components/media/media.service.ts
@@ -52,9 +52,8 @@ export class MediaService {
     role?: string
   ): Media | undefined {
     const shouldGetMediaForPictureElement =
-      this.featureConfigService.isEnabled(
-        'useMediaComponentWithConfigurableMediaQueries'
-      ) && elementType !== 'img';
+      this.featureConfigService.isEnabled('useExtendedMediaComponent') &&
+      elementType !== 'img';
 
     return shouldGetMediaForPictureElement
       ? this.getMediaForPictureElement(mediaContainer, format, alt, role)