fix(information-highlight): Remove trailing margin when Body is the last element

cypress/component/InformationHighlight.spec.tsx

@@ -1,3 +1,5 @@
+import {Basic} from '../../modules/react/information-highlight/stories/examples/Basic';
+import {Body} from '../../modules/react/information-highlight/stories/examples/Body';
 import {Caution} from '../../modules/react/information-highlight/stories/examples/Caution';
 import {Critical} from '../../modules/react/information-highlight/stories/examples/Critical';
 import {Informational} from '../../modules/react/information-highlight/stories/examples/Informational';
@@ -18,4 +20,38 @@ describe('Information Highlight', () => {
       });
     });
   });
+
+  context('given the Body is the last element', () => {
+    beforeEach(() => {
+      cy.mount(<Body />);
+    });
+
+    it('should not have any axe errors', () => {
+      cy.checkA11y();
+    });
+
+    it('should not add space below the Body', () => {
+      cy.findByText('Only the body of an information highlight').should(
+        'have.css',
+        'margin-bottom',
+        '0px'
+      );
+    });
+  });
+
+  context('given the Body is followed by a Link', () => {
+    beforeEach(() => {
+      cy.mount(<Basic />);
+    });
+
+    it('should not have any axe errors', () => {
+      cy.checkA11y();
+    });
+
+    it('should add space between the Body and the Link', () => {
+      cy.findByText(/This is what an information highlight would look like/)
+        .invoke('css', 'margin-bottom')
+        .should('not.equal', '0px');
+    });
+  });
 });

modules/react/information-highlight/lib/parts/Body.tsx

@@ -4,7 +4,10 @@ import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const informationHighlightBodyStencil = createStencil({
-  base: () => {
+  vars: {
+    marginEnd: '',
+  },
+  base: ({marginEnd}) => {
     return {
       fontFamily: system.fontFamily.default,
       fontWeight: system.fontWeight.normal,
@@ -13,7 +16,16 @@ const informationHighlightBodyStencil = createStencil({
       letterSpacing: system.legacy.letterSpacing.subtext.lg,
       color: system.color.fg.default,
       gridColumn: '2',
-      marginBlockEnd: system.legacy.gap.sm,
+      [marginEnd]: system.legacy.gap.sm,
+      marginBlockEnd: marginEnd,
+      // The margin separates Body from content below it (e.g. Link). When Body is the last
+      // element, there is nothing to separate from, so remove it to avoid extra trailing space.
+      // The pseudo-class rule changes a variable instead of `margin-block-end` itself: nested
+      // rules are emitted after flat declarations, so overriding the property would also override
+      // a consumer's `cs={{marginBlockEnd}}`.
+      '&:where(:last-child)': {
+        [marginEnd]: 0,
+      },
     };
   },
 });

modules/react/information-highlight/stories/examples/Basic.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 
 export const Basic = () => {

modules/react/information-highlight/stories/examples/Body.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 
 export const Body = () => {