Skip card box bottom padding when last element has margin

When the last content element in a card box has a custom bottom
margin, the card's built-in bottom padding is suppressed to
avoid double spacing. The card's margin and border radius at
the end are preserved.

REDMINE-21191

Author: tf

entry_types/scrolled/package/spec/frontend/Layout-spec.js

@@ -943,6 +943,70 @@ describe('Layout', () => {
         expect(container.textContent).toEqual('1 2 ]');
       });
     });
+
+    describe('lastMarginBottom prop', () => {
+      const LastMarginBox = function LastMarginBox({lastMarginBottom, children}) {
+        return (
+          <div>{children}{lastMarginBottom ? `(${lastMarginBottom})` : ''}</div>
+        );
+      };
+
+      it('passes lastMarginBottom of last item in two column variant', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline'},
+          {id: 2, type: 'probe', position: 'inline', props: {marginBottom: 'lg'}},
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items}>
+            {(children, boxProps) => <LastMarginBox {...boxProps}>{children}</LastMarginBox>}
+          </Layout>
+        );
+
+        expect(container.textContent).toContain('(lg)');
+      });
+
+      it('does not pass lastMarginBottom when last item has no margin in two column variant', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline', props: {marginBottom: 'lg'}},
+          {id: 2, type: 'probe', position: 'inline'},
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items}>
+            {(children, boxProps) => <LastMarginBox {...boxProps}>{children}</LastMarginBox>}
+          </Layout>
+        );
+
+        expect(container.textContent).not.toContain('(');
+      });
+
+      it('passes lastMarginBottom of last item in center variant', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline'},
+          {id: 2, type: 'probe', position: 'inline', props: {marginBottom: 'md'}},
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'center'}} items={items}>
+            {(children, boxProps) => <LastMarginBox {...boxProps}>{children}</LastMarginBox>}
+          </Layout>
+        );
+
+        expect(container.textContent).toContain('(md)');
+      });
+
+      it('does not pass lastMarginBottom when last item has no margin in center variant', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline', props: {marginBottom: 'lg'}},
+          {id: 2, type: 'probe', position: 'inline'},
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'center'}} items={items}>
+            {(children, boxProps) => <LastMarginBox {...boxProps}>{children}</LastMarginBox>}
+          </Layout>
+        );
+
+        expect(container.textContent).not.toContain('(');
+      });
+    });
   });
 
   describe('floating items in centered variant', () => {

entry_types/scrolled/package/spec/frontend/foregroundBoxes/CardBoxWrapper-spec.js

@@ -4,6 +4,7 @@ import '@testing-library/jest-dom/extend-expect';
 
 import CardBoxWrapper from 'frontend/foregroundBoxes/CardBoxWrapper';
 
+import cardBoxStyles from 'frontend/foregroundBoxes/CardBoxWrapper.module.css';
 import boundaryMarginStyles from 'frontend/foregroundBoxes/BoxBoundaryMargin.module.css';
 
 describe('CardBoxWrapper', () => {
@@ -48,4 +49,28 @@ describe('CardBoxWrapper', () => {
       expect(container.firstChild).toHaveClass(boundaryMarginStyles.noBottomMargin);
     });
   });
+
+  describe('cardEnd padding', () => {
+    it('does not have cardEndPadding class when lastMarginBottom is set', () => {
+      const {container} = render(
+        <CardBoxWrapper openStart={true} openEnd={false} lastMarginBottom="lg">
+          Content
+        </CardBoxWrapper>
+      );
+
+      expect(container.firstChild).toHaveClass(cardBoxStyles.cardEnd);
+      expect(container.firstChild).not.toHaveClass(cardBoxStyles.cardEndPadding);
+    });
+
+    it('has cardEndPadding class when lastMarginBottom is not set', () => {
+      const {container} = render(
+        <CardBoxWrapper openStart={true} openEnd={false}>
+          Content
+        </CardBoxWrapper>
+      );
+
+      expect(container.firstChild).toHaveClass(cardBoxStyles.cardEnd);
+      expect(container.firstChild).toHaveClass(cardBoxStyles.cardEndPadding);
+    });
+  });
 });

entry_types/scrolled/package/src/frontend/foregroundBoxes/CardBoxWrapper.js

@@ -40,6 +40,7 @@ function className(props) {
     {[styles.blur]: props.cardSurfaceTransparency > 0},
     {[styles.cardStart]: !props.openStart},
     {[styles.cardEnd]: !props.openEnd},
+    {[styles.cardEndPadding]: !props.openEnd && !props.lastMarginBottom},
     {[boundaryMarginStyles.noTopMargin]: props.atSectionStart},
     {[boundaryMarginStyles.noBottomMargin]: props.atSectionEnd}
   );

entry_types/scrolled/package/src/frontend/foregroundBoxes/CardBoxWrapper.module.css

@@ -29,6 +29,9 @@
 
 .cardEnd {
   margin-bottom: 3em;
+}
+
+.cardEndPadding {
   padding-bottom: 1.5em;
 }
 

entry_types/scrolled/package/src/frontend/layouts/Center.js

@@ -83,11 +83,13 @@ function groupItems(items) {
 
 function boxProps(groups, index, isContentPadded) {
   const group = groups[index];
+  const lastItem = group.items[group.items.length - 1];
 
   return {
     position: group.position,
     width: group.width,
     customMargin: group.customMargin,
+    lastMarginBottom: lastItem.marginBottom,
     atSectionStart: index === 0 && !isContentPadded,
     atSectionEnd: index === groups.length - 1
   }

entry_types/scrolled/package/src/frontend/layouts/TwoColumn.js

@@ -81,6 +81,7 @@ function renderItemGroup(props, box, key) {
             position: box.position,
             width: box.width,
             customMargin: box.customMargin,
+            lastMarginBottom: box.items[box.items.length - 1].marginBottom,
             openStart: box.openStart,
             openEnd: box.openEnd,
             atSectionStart: box.atSectionStart,