From 0cba9538ec3fd27b0d0c183d927a2abd82418d29 Mon Sep 17 00:00:00 2001 From: Cyrine Ben Romdhane <135605630+anicyne@users.noreply.github.com> Date: Mon, 25 Nov 2024 14:27:53 +0100 Subject: [PATCH 01/13] Apply BEM refactoring to quote Refs: #7036 --- .../src/components/quote/shadow.tsx | 10 ++-- .../src/components/quote/style.scss | 46 +++++++++---------- .../test/__snapshots__/snapshot.spec.tsx.snap | 24 +++++----- 3 files changed, 40 insertions(+), 40 deletions(-) diff --git a/packages/components/src/components/quote/shadow.tsx b/packages/components/src/components/quote/shadow.tsx index 1cd145f1b1..fdf7d4947e 100644 --- a/packages/components/src/components/quote/shadow.tsx +++ b/packages/components/src/components/quote/shadow.tsx @@ -81,18 +81,18 @@ export class KolQuote implements QuoteAPI {
{this.state._variant === 'block' ? ( -
+
{this.state._quote}
) : ( - + {this.state._quote} )} {typeof this.state._label === 'string' && this.state._label.length > 0 && ( -
- +
+
diff --git a/packages/components/src/components/quote/style.scss b/packages/components/src/components/quote/style.scss index 3dbaaf106b..5d38a55186 100644 --- a/packages/components/src/components/quote/style.scss +++ b/packages/components/src/components/quote/style.scss @@ -2,35 +2,35 @@ @import '../style'; @layer kol-component { - :host { + .kol-quote { font-size: rem(16); - } - cite, - figure, - q + figcaption { - display: inline; - margin: 0; - padding: 0; - } + &__cite, + &__figure, + &__quote + &__figcaption { + display: inline; + margin: 0; + padding: 0; + } - blockquote:before { - content: open-quote; - } + &__blockquote::before { + content: open-quote; + } - blockquote::after { - content: close-quote; - } + &__blockquote::after { + content: close-quote; + } - cite:before { - content: '—'; - } + &__cite::before { + content: '—'; + } - .block cite:before { - padding-right: 0.5em; - } + &--block &__cite::before { + padding-right: 0.5em; + } - .inline cite:before { - padding: 0.5em; + &--inline &__cite::before { + padding: 0.5em; + } } } diff --git a/packages/components/src/components/quote/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/quote/test/__snapshots__/snapshot.spec.tsx.snap index c520608063..36bd81c251 100644 --- a/packages/components/src/components/quote/test/__snapshots__/snapshot.spec.tsx.snap +++ b/packages/components/src/components/quote/test/__snapshots__/snapshot.spec.tsx.snap @@ -3,15 +3,15 @@ exports[`kol-quote should render with _label="Caption" _href="https://example.com" _quote="Text of the Quote" _variant="block" 1`] = `