fix(callout-quote): card appearance not correct in mobile (#12294)

### Related Ticket(s)

https://jsw.ibm.com/browse/ADCMS-9014

### Description

Card appearance for the callout-quote in mobile was not correct with Figma specs. Source and Footer should be inside of the cards

Author: bruno-amorim

packages/styles/scss/components/callout-quote/_callout-quote.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2024
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -109,4 +109,48 @@
       margin: $spacing-05;
     }
   }
+
+  :host(#{$c4d-prefix}-callout-quote[appearance='card']) {
+    @include breakpoint-down(md) {
+      padding-block-end: 0;
+
+      div.cds--quote__source {
+        margin-block: 1rem -1rem;
+        margin-inline-start: -2rem;
+      }
+
+      div.cds--quote__footer {
+        margin-inline-start: -2rem;
+
+        /* stylelint-disable-next-line */
+        > c4d-hr {
+          /* stylelint-disable-next-line */
+          margin-right: -0.1rem;
+          margin-inline-end: 2rem;
+        }
+      }
+
+      .cds--quote__wrapper > blockquote > .cds--quote__source,
+      .cds--quote__wrapper > blockquote > .cds--quote__footer {
+        display: block;
+      }
+
+      .cds--quote__wrapper .cds--quote__source,
+      .cds--quote__wrapper .cds--quote__footer {
+        display: none;
+      }
+    }
+
+    @include breakpoint-up(md) {
+      .cds--quote__wrapper > blockquote > .cds--quote__source,
+      .cds--quote__wrapper > blockquote > .cds--quote__footer {
+        display: none;
+      }
+
+      .cds--quote__wrapper .cds--quote__source,
+      .cds--quote__wrapper .cds--quote__footer {
+        display: block;
+      }
+    }
+  }
 }

packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts

@@ -99,7 +99,7 @@ export default {
           quoteTypes['double-curved']
         ),
         appearance: select(
-          'Appearance (Default - legacy | card and bubble-quote are mobile only):',
+          'Appearance (card and bubble-quote - MOBILE ONLY | Default - legacy):',
           appearance,
           appearance['legacy']
         ),

packages/web-components/src/components/quote/quote.ts

@@ -7,14 +7,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement, html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import styles from './quote.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { APPEARANCE, QUOTE_TYPES } from './defs';
 import '../horizontal-rule/horizontal-rule';
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
 import LocaleAPI from '@carbon/ibmdotcom-services/es/services/Locale/Locale.js';
+import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
+import MediaQueryMixin, {
+  MQBreakpoints,
+  MQDirs,
+} from '../../component-mixins/media-query/media-query';
 
 export { QUOTE_TYPES };
 
@@ -50,7 +55,10 @@ const slotExistencePropertyNames = {
  * @csspart bubble-pointer-stroke-svg - The stroke color of the pointer. Usage `c4d-quote::part(bubble-pointer-stroke-svg)`
  */
 @customElement(`${c4dPrefix}-quote`)
-class C4DQuote extends StableSelectorMixin(LitElement) {
+class C4DQuote extends MediaQueryMixin(
+  HostListenerMixin(StableSelectorMixin(LitElement)),
+  { [MQBreakpoints.MD]: MQDirs.MIN }
+) {
   /**
    * Defines rendered quote mark style
    * styles:
@@ -91,6 +99,9 @@ class C4DQuote extends StableSelectorMixin(LitElement) {
    */
   protected _hasFooter = false;
 
+  @state()
+  _isMobile = !this.carbonBreakpoints.md.matches;
+
   /**
    * Handles `slotchange` event.
    */
@@ -102,6 +113,10 @@ class C4DQuote extends StableSelectorMixin(LitElement) {
     });
   }
 
+  mediaQueryCallbackMD() {
+    this._isMobile = !this.carbonBreakpoints.md.matches;
+  }
+
   protected _handleSlotChange({ target }: Event) {
     const { name } = target as HTMLSlotElement;
     const hasContent = (target as HTMLSlotElement)
@@ -268,6 +283,9 @@ class C4DQuote extends StableSelectorMixin(LitElement) {
             part="mark mark--closing">
             ${marks.close}
           </span>
+          ${this._isMobile && this.appearance == 'card'
+            ? html` ${this._renderSource()} ${this._renderFooter()} `
+            : ''}
         </blockquote>
       `;
     }