Ecollazos/gaud 8697 slot not center aligning

components/card/card.js

@@ -1,11 +1,23 @@
 import '../colors/colors.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getFocusRingStyles } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+const GAUD_8697_FEATURE_FLAG = getFlag('GAUD-8697-card-badge-center-flag', true);
+
+// TODO: move this css statement to where this function is being called, when the FF is removed
+const getCenterCardBadgeCSS = () => {
+	return css`
+	:host([align-center]) .d2l-card-badge {
+		display: flex;
+		justify-content: center;
+	}`;
+};
+
 /**
  * A container element that provides specific layout using several slots.
  * @slot content - Slot for primary content such as title and supplementary info (no actionable elements)
@@ -136,6 +148,7 @@ class Card extends LitElement {
 				text-align: center;
 			}
 
+			${GAUD_8697_FEATURE_FLAG ? getCenterCardBadgeCSS() : css``}
 			.d2l-card-footer-hidden .d2l-card-content {
 				padding-bottom: 1.2rem;
 			}

components/card/test/card.vdiff.js

@@ -92,16 +92,20 @@ const footerTooltipContent = html`
 	<div slot="footer">${tooltipContent}</div>
 `;
 
+const badgeSlotContent = html`
+	<div slot="badge">
+		<div style="background-color: white; border: 1px solid black; border-radius: 6px; display: inline-block; line-height: 1rem; padding: 0.3rem; width: 60px;">Badge</div>
+	</div>
+`;
+
 describe('card', () => {
 	[
 		{ name: 'header-content', template: createCardTemplate({ content: simpleContent }) },
 		{ name: 'footer', template: createCardTemplate({ content: simpleContentWithFooter }) },
 		{ name: 'align-center', template: createCardTemplate({ content: simpleContentWithFooter, alignCenter: true }) },
-		{ name: 'badge', template: createCardTemplate({ content: html`${simpleContent}
-			<div slot="badge">
-				<div style="background-color: white; border: 1px solid black; border-radius: 6px; display: inline-block; line-height: 1rem; padding: 0.3rem; width: 60px;">Badge</div>
-			</div>`
-		}) },
+		{ name: 'badge', template: createCardTemplate({ content: html`${simpleContent}${badgeSlotContent}` }) },
+		{ name: 'badge-align-center', template: createCardTemplate({ content: html`${simpleContent}${badgeSlotContent}`, alignCenter: true }) },
+		{ name: 'badge-rtl', rtl: true, template: createCardTemplate({ content: html`${simpleContent}${badgeSlotContent}` }) },
 		{ name: 'actions', template: createCardTemplate({ content: actionContent }) },
 		{ name: 'actions-rtl', rtl: true, template: createCardTemplate({ content: actionContent }) },
 		{ name: 'actions-focus', template: createCardTemplate({ content: actionContent }), action: elem => focusElem(elem.querySelector('d2l-button-icon')) },