diff --git a/packages/styles/scss/components/callout-quote/_callout-quote.scss b/packages/styles/scss/components/callout-quote/_callout-quote.scss index a9c15402c8a..831ff439ea6 100644 --- a/packages/styles/scss/components/callout-quote/_callout-quote.scss +++ b/packages/styles/scss/components/callout-quote/_callout-quote.scss @@ -9,6 +9,7 @@ @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/type' as *; @use '../../globals/vars' as *; @use '../../globals/utils/hang' as *; @use '../../globals/utils/flex-grid' as *; @@ -34,6 +35,15 @@ outline: transparent; padding-inline-start: $spacing-07; } + + &[lang='ar'], + &[lang='zh'], + &[lang='jp'], + &[lang='ko'] { + .#{$prefix}--quote__copy { + @include font-family('sans'); + } + } } :host(#{$c4d-prefix}-callout-quote[color-scheme='inverse']) { diff --git a/packages/styles/scss/components/quote/_quote.scss b/packages/styles/scss/components/quote/_quote.scss index 3095e98cefa..fd1b92c3712 100644 --- a/packages/styles/scss/components/quote/_quote.scss +++ b/packages/styles/scss/components/quote/_quote.scss @@ -27,6 +27,15 @@ max-inline-size: 80%; padding-inline-start: $spacing-05; } + + &[lang='ar'], + &[lang='zh'], + &[lang='jp'], + &[lang='ko'] { + .#{$prefix}--quote__copy { + @include font-family('sans'); + } + } } .#{$prefix}--quote__container { @@ -40,7 +49,6 @@ .#{$prefix}--quote__copy { @include make-col-ready; @include type-style('quotation-01', true); - @include font-family('serif'); padding: 0 $spacing-07 $spacing-07 $spacing-07; margin: 0; diff --git a/packages/web-components/src/components/quote/quote.ts b/packages/web-components/src/components/quote/quote.ts index da008e7edf6..d1850bbfaf6 100644 --- a/packages/web-components/src/components/quote/quote.ts +++ b/packages/web-components/src/components/quote/quote.ts @@ -14,6 +14,7 @@ import StableSelectorMixin from '../../globals/mixins/stable-selector'; import { QUOTE_TYPES } from './defs'; import '../horizontal-rule/horizontal-rule'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; +import { LocaleAPI } from '../../internal/vendor/@carbon/ibmdotcom-services/services/Locale'; export { QUOTE_TYPES }; @@ -60,6 +61,9 @@ class C4DQuote extends StableSelectorMixin(LitElement) { @property({ reflect: true, attribute: 'mark-type' }) markType = QUOTE_TYPES.DEFAULT; + @property({ reflect: true, attribute: 'lang' }) + lc; + /** * `true` if there is source heading. */ @@ -83,6 +87,14 @@ class C4DQuote extends StableSelectorMixin(LitElement) { /** * Handles `slotchange` event. */ + + connectedCallback() { + super.connectedCallback(); + LocaleAPI.getLang().then(({ lc }) => { + this.lc = lc; + }); + } + protected _handleSlotChange({ target }: Event) { const { name } = target as HTMLSlotElement; const hasContent = (target as HTMLSlotElement) @@ -171,14 +183,14 @@ class C4DQuote extends StableSelectorMixin(LitElement) { default: return html` “${this.lc !== 'ar' ? '“' : '”'}
`;”${this.lc !== 'ar' ? '”' : '“'}