Questions:

•  N/D

Technical Refinement

Description

• intl-whitelabel-app

  • Task 1—Create feature flag

    • enable-resize-hero-component

  • Task 2—Create a method to resize hero component image

    • path: intl-whitelabel-app/workspaces/frontend/src/components/features/components/hero/hero-container.tsx

    • We will change the attribute objectFitContain on Picture component

    • before:

      Code Block
      language typescript
      const image = sanityImage && ( <Picture image={sanityImage} alt={imageAlt} objectFitContain /> );

    • after:

      Code Block
      language typescript
      const image = sanityImage && ( <Picture image={sanityImage} alt={imageAlt} objectFitContain={false} /> );

    • On file: intl-whitelabel-app/workspaces/frontend/src/components/picture/index.tsx, we will create a method to resize from hero image

      Code Block
      language typescript
      const resizeByHeight = useCallback( (img: ISanityImage | IImageFragment, sizeImage: { width: number; height: number }) => { const { dimensions } = parseAssetID(img?.asset?._id); const renderWidth = sizeImage.width; const renderHeight = Math.ceil(sizeImage.width * (dimensions.height / dimensions.width)); setSize({ width: renderWidth, height: renderHeight }); }, [] );

    • And on component return

    • before:

      Code Block
      language typescript
      return ( <Measure innerRef={visibilityRef as any} onResize={contentRect => { if (isLoaded) { return; } const newSize = { width: Math.ceil(delve(contentRect, 'entry.width', 0)), height: Math.ceil(delve(contentRect, 'entry.height', 0)), }; if (newSize.width !== size.width || newSize.height !== size.height) { setSize(newSize); } }} > {renderContent} </Measure> );

    • after:

      Code Block
      language typescript
      return ( <Measure innerRef={visibilityRef as any} onResize={contentRect => { if (isLoaded) { return; } const newSize = { width: Math.ceil(delve(contentRect, 'entry.width', 0)), height: Math.ceil(delve(contentRect, 'entry.height', 0)), }; if (newSize.width !== size.width || newSize.height !== size.height) { setSize(newSize); } if (<FEATURE_FLAG>) { resizeByHeight(image, newSize); } }} > {renderContent} </Measure> );

• ctg-components-library

  • Task 3—Remove CSS attributes

    • path: ctg-components-library/src/components/hero/hero.styled.ts

      • Remove the value height on attribute ImageWrapper;

      • Remove the value height on @media ${mediaQuery.tablet};

      • Remove the value height on @media ${mediaQuery.desktopLarge};

POC

• N/A

Impact Analysis

• Hero component

Dependencies

• N/A

Unit Test

• N/A

Useful Links

• Hero component: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=1782-69468&t=EFtqIHfC3467c0mU-0