fix(@dpc-sdp/ripple-tide-api): fix callout margin

examples/nuxt-app/test/fixtures/rtl/page.json

@@ -139,7 +139,7 @@
         }
       ],
       "props": {
-        "html": "<div class=\"rpl-callout\"><div class=\"callout-wrapper\">\n<p>کودکان خردسال از طریق بازی درباره دنیا می آموزند</p>\n\n<p>آنها یاد می گیرند که چگونه با دیگران کنار بیایند، به اشتراک بگذارند ، گوش کنند و احساسات</p>\n\n<p>در یک برنامه کودکستان، کودکان برای کسب مهارت های زبانی و یادگیری در مورد اعداد و الگوها از بازی استفاده می کنند</p>\n\n<p>معلمان و مربیان به کودکان کمک می کنند تا نسبت به یادگیری، کنجکاو، خلاق و دارای اعتماد به نفس شوند</p>\n</div></div><p>مهدکودک رایگان در برنامه‌های مهدکودک برای کودکان سه و چهار ساله در خدمات مشارکت کننده در سراسر ویکتوریا موجود است. این خدمات شامل مراقبت روزانه با ساعت‌های طولانی و خدمات مهدکودک مستقل (که به آن جلسه‌ای نیز گفته می‌شود) هستند.</p><h2 id=\"صرفه‌جویی-برای-خانواده‌ها\">صرفه‌جویی برای خانواده‌ها</h2><p>مهدکودک رایگان به معنای صرفه‌جویی تا ۲۵۰۰ دلار برای هر کودک در سال است.</p><p>خانواده‌های دارای فرزند که در یک مهدکودک مستقل مشارکت کننده ثبت‌نام کرده‌اند، یک برنامه رایگان دریافت می‌کنند.</p><p>خانواده‌های دارای فرزند که در یک مهدکودک با ساعت‌های طولانی مشارکت کننده ثبت‌نام کرده‌اند، به ازای هر کودک تا ۲۰۰۰ دلار تخفیف می‌گیرند. اگر فرزند شما در یک برنامه مهدکودک کودکان سه ساله برای کمتر از ۱۵ ساعت ثبت نام کرده باشد، مبلغ تخفیف به نسبت هزینه دریافت خواهید کرد.</p><h2 id=\"واجد-شرایط-بودن-برای-مهدکودک-رایگان\">واجد شرایط بودن برای مهدکودک رایگان</h2><p>مهدکودک رایگان برای همه است.</p><p>خانواده‌ها برای واجد شرایط بودن نیازی به داشتن کارت مراقبت سلامت یا کارت بازنشستگی، شهروندی استرالیا یا مدرک اثبات آدرس ندارند. همچنین لازم نیست برای دریافت خدمات مهدکودک رایگان واجد شرایط دریافت یارانه مراقبت از کودک دولت استرالیا (CCS) باشید.</p><p>خدمات مهدکودک رایگان را در یک زمان فقط می‌توانید در یک مرکز خدمات مهدکودک دریافت کنید. خدمات مهدکودک شما از شما می خواهد نامه‌ای را امضا کنید که در آن نام مهدکودکی که خدمات رایگان به شما خواهد داد را بگویید.  اگر فرزند شما به بیش از یک مهدکودک می‌رود، باید به مهدکودک‌های دیگر اطلاع دهید که در کجا می‌خواهید به خدمات مهدکودک رایگان دسترسی داشته باشید.</p><h2 id=\"نحوه-دسترسی-به-منابع-مالی-خدمات-مهدکودک-رایگان\">نحوه دسترسی به منابع مالی خدمات مهدکودک رایگان</h2><p>مهدکودک‌هایی که ارائه‌دهنده خدمات رایگان مهدکودک هستند مستقیماً از دولت ویکتوریا تامین بودجه می‌شوند. این یعنی خانواده ها مجبور نیستند مبلغی را مطالبه کنند بلکه هزینه‌های شما کاهش می‌یابند.</p><p>در مهدکودک جلسه‌ای برنامه شما رایگان است.</p><p>در مهدکودک طولانی‌مدت ۲۰۰۰ دلار تخفیف مهدکودک در طول سال به طور منظم (مثلا هفتگی یا دو هفته یکبار) از هزینه‌های شما کم می‌شود. شما باید بتوانید مبلغی که در فاکتورتان به‌عنوان تعدیل کارمزد مهدکودک رایگان دولت ویکتوریا (Victorian Government Free Kinder offset) به وضوح نوشته شده است را ببینید.</p><p>اگر واجد شرایط دریافت <a href=\"https://www.servicesaustralia.gov.au/child-care-subsidy\" class=\"rpl-text-link rpl-u-focusable-inline\">یارانه مراقبت از کودکان کشورهای مشترک المنافع</a> هستید، ابتدا این یارانه اعمال می‌شود. این یعنی شما فقط باید ما‌به‌التفاوت مبلغ پس از CCS و پس از تعدیل کارمزد برای مهدکودک رایگان را بپردازید.</p><p>خانواده‌هایی که از برنامه‌های مهدکودک طولانی مدت استفاده می‌کنند، می‌توانند میزان تعدیل کارمزد خدمات مهدکودک رایگان را در هر چرخه صورت‌حساب با «خدمات مهدکودک رایگان دولت ویکتوریا» که به وضوح روی فاکتورها برچسب‌گذاری شده است، مشاهده کنند.</p><h2 id=\"نحوه-اعمال-تعدیل-کارمزد-به-هزینه‌هایی-که-شما-از-جیبتان-می‌پردازید\">نحوه اعمال تعدیل کارمزد به هزینه‌هایی که شما از جیبتان می‌پردازید.</h2><p>تعدیل کارمزد مهدکودک رایگان به طور منظم در طول سال (مثلا هفتگی یا دو هفته یکبار) به هزینه‌های شما اعمال می‌شود. شما باید بتوانید مبلغی که در فاکتورتان به‌عنوان تعدیل کارمزد مهدکودک رایگان دولت ویکتوریا (Victorian Government Free Kinder offset) به وضوح نوشته شده است را ببینید.</p><p>برای اطلاع از نحوه اعمال تعدیل کارمزد به هزینه‌های شما و نحوه نمایش آن در فاکتور، لطفاً مستقیماً با خدمات مهدکودک خود صحبت کنید. اگر فرزند شما به بیش از ۱۵ ساعت در هفته دسترسی داشته باشد، این ساعات اضافی تحت پوشش تعدیل کارمزد نیستند.</p><p>اگر واجد شرایط دریافت <a href=\"https://www.servicesaustralia.gov.au/child-care-subsidy\" class=\"rpl-text-link rpl-u-focusable-inline\">یارانه مراقبت از کودکان کشورهای مشترک المنافع</a> هستید، ابتدا این یارانه اعمال می‌شود. این یعنی شما فقط باید ما‌به‌التفاوت مبلغ پس از CCS و پس از تعدیل کارمزد برای مهدکودک رایگان را بپردازید.</p><p>مثال:</p><ul><li>یک کودک چهار ساله سه روز در هفته به یک مهدکودک با ساعات طولانی با برنامه مهدکودک می‌رود.</li><li>هزینه خدمات ۳۶۰ دلار برای سه روز (شامل ساعات مراقبت از کودک و ساعات مراقبت اضافی) است.</li></ul><p>مثال:</p><ol><li>این خانواده ۲۵۲ دلار CCS می‌گیرد.</li><li>این خدمات، تعدیل کارمزد ۲۰۰۰ دلاری خدمات مهدکودک رایگان را به صورت هفتگی طی ۴۰ هفته (۵۰ دلار در هفته) اعمال می‌کند.</li><li>خانواده پس از CCS و تعدیل کارمزد برای خدمات مهدکودک رایگان، ۵۸ دلارمی‌پردازد.</li></ol>\n<figure class=\"rpl-document\">\n  <a class=\"rpl-document__link rpl-u-focusable-within\" aria-label=\"Mandatory standards for digital File type: Word. Size: 18.7 KB.\" href=\"https://content.vic.gov.au/sites/default/files/2018-09/Mandatory%20standards%20for%20digital%20May%202017.docx\" target=\"_blank\">\n    <span class=\"rpl-document__icon rpl-icon rpl-icon--size-l rpl-icon--colour-default rpl-icon--icon-document-lined\">\n      <svg role=\"presentation\"><use xlink:href=\"#icon-document-lined\"></use></svg>\n    </span>\n    <div class=\"rpl-document__content\">\n      <span class=\"rpl-document__name rpl-type-p rpl-type-weight-bold rpl-u-focusable-inline\">Mandatory standards for digital</span>\n      <div class=\"rpl-document__info rpl-type-label-small\">\n        <span class=\"rpl-file__meta\">Word</span>\n        <span class=\"rpl-file__meta\">18.7 KB</span>\n        \n      </div>\n    </div>\n  \n  <span class=\"rpl-u-visually-hidden\">(opens in a new window)</span>\n  </a>\n</figure>\n<p><em>لطفا توجه داشته باشید. این فقط یک نمونه است و هزینه‌ها بسته به شرایط فردی متفاوت خواهند بود.</em></p>"
+        "html": "<div class=\"rpl-callout\"><div class=\"rpl-callout__wrapper\">\n<p>کودکان خردسال از طریق بازی درباره دنیا می آموزند</p>\n\n<p>آنها یاد می گیرند که چگونه با دیگران کنار بیایند، به اشتراک بگذارند ، گوش کنند و احساسات</p>\n\n<p>در یک برنامه کودکستان، کودکان برای کسب مهارت های زبانی و یادگیری در مورد اعداد و الگوها از بازی استفاده می کنند</p>\n\n<p>معلمان و مربیان به کودکان کمک می کنند تا نسبت به یادگیری، کنجکاو، خلاق و دارای اعتماد به نفس شوند</p>\n</div></div><p>مهدکودک رایگان در برنامه‌های مهدکودک برای کودکان سه و چهار ساله در خدمات مشارکت کننده در سراسر ویکتوریا موجود است. این خدمات شامل مراقبت روزانه با ساعت‌های طولانی و خدمات مهدکودک مستقل (که به آن جلسه‌ای نیز گفته می‌شود) هستند.</p><h2 id=\"صرفه‌جویی-برای-خانواده‌ها\">صرفه‌جویی برای خانواده‌ها</h2><p>مهدکودک رایگان به معنای صرفه‌جویی تا ۲۵۰۰ دلار برای هر کودک در سال است.</p><p>خانواده‌های دارای فرزند که در یک مهدکودک مستقل مشارکت کننده ثبت‌نام کرده‌اند، یک برنامه رایگان دریافت می‌کنند.</p><p>خانواده‌های دارای فرزند که در یک مهدکودک با ساعت‌های طولانی مشارکت کننده ثبت‌نام کرده‌اند، به ازای هر کودک تا ۲۰۰۰ دلار تخفیف می‌گیرند. اگر فرزند شما در یک برنامه مهدکودک کودکان سه ساله برای کمتر از ۱۵ ساعت ثبت نام کرده باشد، مبلغ تخفیف به نسبت هزینه دریافت خواهید کرد.</p><h2 id=\"واجد-شرایط-بودن-برای-مهدکودک-رایگان\">واجد شرایط بودن برای مهدکودک رایگان</h2><p>مهدکودک رایگان برای همه است.</p><p>خانواده‌ها برای واجد شرایط بودن نیازی به داشتن کارت مراقبت سلامت یا کارت بازنشستگی، شهروندی استرالیا یا مدرک اثبات آدرس ندارند. همچنین لازم نیست برای دریافت خدمات مهدکودک رایگان واجد شرایط دریافت یارانه مراقبت از کودک دولت استرالیا (CCS) باشید.</p><p>خدمات مهدکودک رایگان را در یک زمان فقط می‌توانید در یک مرکز خدمات مهدکودک دریافت کنید. خدمات مهدکودک شما از شما می خواهد نامه‌ای را امضا کنید که در آن نام مهدکودکی که خدمات رایگان به شما خواهد داد را بگویید.  اگر فرزند شما به بیش از یک مهدکودک می‌رود، باید به مهدکودک‌های دیگر اطلاع دهید که در کجا می‌خواهید به خدمات مهدکودک رایگان دسترسی داشته باشید.</p><h2 id=\"نحوه-دسترسی-به-منابع-مالی-خدمات-مهدکودک-رایگان\">نحوه دسترسی به منابع مالی خدمات مهدکودک رایگان</h2><p>مهدکودک‌هایی که ارائه‌دهنده خدمات رایگان مهدکودک هستند مستقیماً از دولت ویکتوریا تامین بودجه می‌شوند. این یعنی خانواده ها مجبور نیستند مبلغی را مطالبه کنند بلکه هزینه‌های شما کاهش می‌یابند.</p><p>در مهدکودک جلسه‌ای برنامه شما رایگان است.</p><p>در مهدکودک طولانی‌مدت ۲۰۰۰ دلار تخفیف مهدکودک در طول سال به طور منظم (مثلا هفتگی یا دو هفته یکبار) از هزینه‌های شما کم می‌شود. شما باید بتوانید مبلغی که در فاکتورتان به‌عنوان تعدیل کارمزد مهدکودک رایگان دولت ویکتوریا (Victorian Government Free Kinder offset) به وضوح نوشته شده است را ببینید.</p><p>اگر واجد شرایط دریافت <a href=\"https://www.servicesaustralia.gov.au/child-care-subsidy\" class=\"rpl-text-link rpl-u-focusable-inline\">یارانه مراقبت از کودکان کشورهای مشترک المنافع</a> هستید، ابتدا این یارانه اعمال می‌شود. این یعنی شما فقط باید ما‌به‌التفاوت مبلغ پس از CCS و پس از تعدیل کارمزد برای مهدکودک رایگان را بپردازید.</p><p>خانواده‌هایی که از برنامه‌های مهدکودک طولانی مدت استفاده می‌کنند، می‌توانند میزان تعدیل کارمزد خدمات مهدکودک رایگان را در هر چرخه صورت‌حساب با «خدمات مهدکودک رایگان دولت ویکتوریا» که به وضوح روی فاکتورها برچسب‌گذاری شده است، مشاهده کنند.</p><h2 id=\"نحوه-اعمال-تعدیل-کارمزد-به-هزینه‌هایی-که-شما-از-جیبتان-می‌پردازید\">نحوه اعمال تعدیل کارمزد به هزینه‌هایی که شما از جیبتان می‌پردازید.</h2><p>تعدیل کارمزد مهدکودک رایگان به طور منظم در طول سال (مثلا هفتگی یا دو هفته یکبار) به هزینه‌های شما اعمال می‌شود. شما باید بتوانید مبلغی که در فاکتورتان به‌عنوان تعدیل کارمزد مهدکودک رایگان دولت ویکتوریا (Victorian Government Free Kinder offset) به وضوح نوشته شده است را ببینید.</p><p>برای اطلاع از نحوه اعمال تعدیل کارمزد به هزینه‌های شما و نحوه نمایش آن در فاکتور، لطفاً مستقیماً با خدمات مهدکودک خود صحبت کنید. اگر فرزند شما به بیش از ۱۵ ساعت در هفته دسترسی داشته باشد، این ساعات اضافی تحت پوشش تعدیل کارمزد نیستند.</p><p>اگر واجد شرایط دریافت <a href=\"https://www.servicesaustralia.gov.au/child-care-subsidy\" class=\"rpl-text-link rpl-u-focusable-inline\">یارانه مراقبت از کودکان کشورهای مشترک المنافع</a> هستید، ابتدا این یارانه اعمال می‌شود. این یعنی شما فقط باید ما‌به‌التفاوت مبلغ پس از CCS و پس از تعدیل کارمزد برای مهدکودک رایگان را بپردازید.</p><p>مثال:</p><ul><li>یک کودک چهار ساله سه روز در هفته به یک مهدکودک با ساعات طولانی با برنامه مهدکودک می‌رود.</li><li>هزینه خدمات ۳۶۰ دلار برای سه روز (شامل ساعات مراقبت از کودک و ساعات مراقبت اضافی) است.</li></ul><p>مثال:</p><ol><li>این خانواده ۲۵۲ دلار CCS می‌گیرد.</li><li>این خدمات، تعدیل کارمزد ۲۰۰۰ دلاری خدمات مهدکودک رایگان را به صورت هفتگی طی ۴۰ هفته (۵۰ دلار در هفته) اعمال می‌کند.</li><li>خانواده پس از CCS و تعدیل کارمزد برای خدمات مهدکودک رایگان، ۵۸ دلارمی‌پردازد.</li></ol>\n<figure class=\"rpl-document\">\n  <a class=\"rpl-document__link rpl-u-focusable-within\" aria-label=\"Mandatory standards for digital File type: Word. Size: 18.7 KB.\" href=\"https://content.vic.gov.au/sites/default/files/2018-09/Mandatory%20standards%20for%20digital%20May%202017.docx\" target=\"_blank\">\n    <span class=\"rpl-document__icon rpl-icon rpl-icon--size-l rpl-icon--colour-default rpl-icon--icon-document-lined\">\n      <svg role=\"presentation\"><use xlink:href=\"#icon-document-lined\"></use></svg>\n    </span>\n    <div class=\"rpl-document__content\">\n      <span class=\"rpl-document__name rpl-type-p rpl-type-weight-bold rpl-u-focusable-inline\">Mandatory standards for digital</span>\n      <div class=\"rpl-document__info rpl-type-label-small\">\n        <span class=\"rpl-file__meta\">Word</span>\n        <span class=\"rpl-file__meta\">18.7 KB</span>\n        \n      </div>\n    </div>\n  \n  <span class=\"rpl-u-visually-hidden\">(opens in a new window)</span>\n  </a>\n</figure>\n<p><em>لطفا توجه داشته باشید. این فقط یک نمونه است و هزینه‌ها بسته به شرایط فردی متفاوت خواهند بود.</em></p>"
       }
     }
   ],

packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts

@@ -26,7 +26,7 @@ const fixed = {
     <tr><td>Joe</td><td>Cool</td></tr>
   </tbody>
 </table></div></div>`,
-  callout: `<div class="rpl-callout"><div class="callout-wrapper"><p>Hey it's a callout</p></div><div class="callout-wrapper"><p>And another callout</p></div></div>
+  callout: `<div class="rpl-callout"><div class="rpl-callout__wrapper"><p>Hey it's a callout</p></div><div class="rpl-callout__wrapper"><p>And another callout</p></div></div>
 <div class="rpl-callout rpl-callout--neutral">This one is wysiwyg</div>`,
   quotation: `
 <figure class="rpl-blockquote">

packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts

@@ -16,7 +16,11 @@ const pluginCallout = function (this: any) {
   // These callouts are added in drupal via the 'C' button in the wysiwyg editor.
   // Wrap callouts with a div. If there are multiple callouts in a row, wrap them all in a div.
   this.find('.callout-wrapper').each((i: any, el: any) => {
-    if (this.find(el).prev().hasClass('callout-wrapper')) {
+    this.find(el)
+      .removeClass('callout-wrapper')
+      .addClass('rpl-callout__wrapper')
+
+    if (this.find(el).prev().hasClass('rpl-callout__wrapper')) {
       return
     }