design-comuni-plone-theme 11.1.3 → 11.2.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 
 
+## [11.2.0](https://github.com/redturtle/design-comuni-plone-theme/compare/v11.1.4...v11.2.0) (2024-01-11)
+
+
+### Features
+
+* customizable Alert block colors and text color ([#470](https://github.com/redturtle/design-comuni-plone-theme/issues/470)) ([4aa6f76](https://github.com/redturtle/design-comuni-plone-theme/commit/4aa6f7607be0ac8a76f1d519eee82483d9320a05))
+
+
+### Bug Fixes
+
+* a11y for navigation in megamenu and mobile menu ([#456](https://github.com/redturtle/design-comuni-plone-theme/issues/456)) ([6e4c1ef](https://github.com/redturtle/design-comuni-plone-theme/commit/6e4c1efbf96c372bf78a67ecf86ade64b7b2bb6a))
+* **a11y:** a11y - colore sfondo opzione con focus in tendina "ordina per"  ([#457](https://github.com/redturtle/design-comuni-plone-theme/issues/457)) ([d81b3a9](https://github.com/redturtle/design-comuni-plone-theme/commit/d81b3a9f34822242e10942a4acccb5978996a06b))
+* added aria-live and aria-labels for filters in Search page ([#462](https://github.com/redturtle/design-comuni-plone-theme/issues/462)) ([13cf7da](https://github.com/redturtle/design-comuni-plone-theme/commit/13cf7dac5f8aaf5deaee5720ccd2e9a54c6326db))
+* added focus style for skiplinks for a11y ([#458](https://github.com/redturtle/design-comuni-plone-theme/issues/458)) ([94e5cca](https://github.com/redturtle/design-comuni-plone-theme/commit/94e5cca0b671aa5bfc1febf4f51b306f71de43be))
+* aria tags to avoid double feedback on SR ([#468](https://github.com/redturtle/design-comuni-plone-theme/issues/468)) ([867df42](https://github.com/redturtle/design-comuni-plone-theme/commit/867df42a8ae96f0546afb43e12490553648128f7))
+* background color contrast for blocks number, countdown and gallery grid ([#433](https://github.com/redturtle/design-comuni-plone-theme/issues/433)) ([d005222](https://github.com/redturtle/design-comuni-plone-theme/commit/d005222a994d0117f41fcf7d9e93ead1c8e71f1f))
+* broken videos in Video Gallery block ([#461](https://github.com/redturtle/design-comuni-plone-theme/issues/461)) ([e977673](https://github.com/redturtle/design-comuni-plone-theme/commit/e9776738df702dd915e1dab45f3cdbb227fa4a6a))
+* default in white header scss variable ([3194ab8](https://github.com/redturtle/design-comuni-plone-theme/commit/3194ab8139edfadff747494c9609e7b2fa79b057))
+* font and spaces of Card blocks ([#476](https://github.com/redturtle/design-comuni-plone-theme/issues/476)) ([3b45cc8](https://github.com/redturtle/design-comuni-plone-theme/commit/3b45cc890f769ab839f9abd30968ff9ca4ef82e7))
+* listing bg color ([#475](https://github.com/redturtle/design-comuni-plone-theme/issues/475)) ([544be04](https://github.com/redturtle/design-comuni-plone-theme/commit/544be046ddca345f1b0c9073a4a57c876281031b))
+* lowered flex basis of card-body in LocationItem cards ([#460](https://github.com/redturtle/design-comuni-plone-theme/issues/460)) ([697f54c](https://github.com/redturtle/design-comuni-plone-theme/commit/697f54c9f81947898caa27f4aa76dee0b16d0616))
+* toolbar buttons for html block ([#477](https://github.com/redturtle/design-comuni-plone-theme/issues/477)) ([ed41904](https://github.com/redturtle/design-comuni-plone-theme/commit/ed419046c9184387e4daac4de86f8b0cd09924b4))
+
+
+### Maintenance
+
+* **deps:** bump http-cache-semantics from 4.1.0 to 4.1.1 ([#464](https://github.com/redturtle/design-comuni-plone-theme/issues/464)) ([88d5d2c](https://github.com/redturtle/design-comuni-plone-theme/commit/88d5d2c8423ea3052ad2a4ea54623e072a86e0e8))
+* **deps:** bump json5 from 1.0.1 to 1.0.2 ([#467](https://github.com/redturtle/design-comuni-plone-theme/issues/467)) ([1dbc958](https://github.com/redturtle/design-comuni-plone-theme/commit/1dbc9582e49866edc74ff65ce4b96c8218e713d9))
+* **deps:** bump semver from 5.7.1 to 5.7.2 ([#446](https://github.com/redturtle/design-comuni-plone-theme/issues/446)) ([49a6e2f](https://github.com/redturtle/design-comuni-plone-theme/commit/49a6e2f217b779ba4f57ca030335af12b91b7337))
+* **deps:** bump simple-git from 3.14.1 to 3.22.0 ([#465](https://github.com/redturtle/design-comuni-plone-theme/issues/465)) ([6d956dd](https://github.com/redturtle/design-comuni-plone-theme/commit/6d956dda6575f6acd5321b223b67c593db27d1e1))
+* replace react-highlight-words with simple custom code ([#463](https://github.com/redturtle/design-comuni-plone-theme/issues/463)) ([809e92e](https://github.com/redturtle/design-comuni-plone-theme/commit/809e92e647a23dfcfb2d3c15616e17fc32388984))
+
+
+### Documentation
+
+* updated publiccode and release log ([285b7ce](https://github.com/redturtle/design-comuni-plone-theme/commit/285b7ced0dc20b0e6e35d9849ded449913279a83))
+
+## [11.1.4](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.1.3...v11.1.4) (2024-01-05)
+
+
+### Bug Fixes
+
+* allow submit when pressing enter key in search blocks ([#451](https://github.com/RedTurtle/design-comuni-plone-theme/issues/451)) ([947f983](https://github.com/RedTurtle/design-comuni-plone-theme/commit/947f9837d532017f5dcb3f25826ea56d6bb2e93b))
+* backwards compatibility for background color var of Alert block ([#459](https://github.com/RedTurtle/design-comuni-plone-theme/issues/459)) ([7cf6626](https://github.com/RedTurtle/design-comuni-plone-theme/commit/7cf6626131276a79b765fc6f9a102522d7d9ed56))
+* changed max width of card-body to fit image ([#453](https://github.com/RedTurtle/design-comuni-plone-theme/issues/453)) ([d836021](https://github.com/RedTurtle/design-comuni-plone-theme/commit/d83602136fa6800758184e1b6b403f363062654b))
+* removed style that hides modal close icon ([#455](https://github.com/RedTurtle/design-comuni-plone-theme/issues/455)) ([59dd922](https://github.com/RedTurtle/design-comuni-plone-theme/commit/59dd922b1120a87febaca51a1fb337c85cb4b9c8))
+
+
+### Maintenance
+
+* preparing relase 11.1.4 ([2edb3c7](https://github.com/RedTurtle/design-comuni-plone-theme/commit/2edb3c7e7c840c63f00c2fadac0781c5e33b35c0))
+
 ## [11.1.3](https://github.com/redturtle/design-comuni-plone-theme/compare/v11.1.1...v11.1.3) (2023-12-27)
 
 

package/RELEASE.md

@@ -41,6 +41,26 @@
 - ...
 -->
 
+## Versione 11.2.0 (11/01/2023)
+
+### Migliorie
+
+- Migliorata l'accessibilità nella pagina di Ricerca.
+- Diminuita la larghezza del testo nelle card che indicano i luoghi.
+
+### Fix
+
+- Risolto un problema nel blocco Video Gallery, per cui alcuni video di youtube non erano riproducibili.
+- Risolto problema nel funzionamento della toolbar per il blocco HTML.
+- Sistemate spaziature e font su mobile del blocco Card con Immagine e Card Semplice, migliorato il layout di quest'ultimo.
+- È stato migliorato il contrasto minimo necessario tra sfondo e testo nei blocchi numeri, countdown e galleria a griglia.
+
+## Versione 11.1.4 (05/01/2024)
+
+### Fix
+
+- Risolto il problema di layout nelle card che indicano dei luoghi.
+
 ## Versione 11.1.1 (22/12/2023)
 
 ### Fix

package/locales/de/LC_MESSAGES/volto.po

@@ -742,6 +742,11 @@ msgstr ""
 msgid "actions"
 msgstr ""
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

package/locales/en/LC_MESSAGES/volto.po

@@ -727,6 +727,11 @@ msgstr ""
 msgid "actions"
 msgstr "View actions"
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

package/locales/es/LC_MESSAGES/volto.po

@@ -736,6 +736,11 @@ msgstr ""
 msgid "actions"
 msgstr "Ver acciones"
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

package/locales/fr/LC_MESSAGES/volto.po

@@ -744,6 +744,11 @@ msgstr ""
 msgid "actions"
 msgstr "Voir les actions"
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

package/locales/it/LC_MESSAGES/volto.po

@@ -727,6 +727,11 @@ msgstr "Account"
 msgid "actions"
 msgstr "Vedi azioni"
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-12-20T09:24:02.911Z\n"
+"POT-Creation-Date: 2024-01-11T11:04:31.849Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -729,6 +729,11 @@ msgstr ""
 msgid "actions"
 msgstr ""
 
+#: components/ItaliaTheme/Search/Search
+# defaultMessage: {filterNumber} filtri attivati
+msgid "active_filters"
+msgstr ""
+
 #: components/ItaliaTheme/Header/HeaderSearch/SearchModal
 # defaultMessage: Vai alla ricerca per sezioni avanzata
 msgid "advandedSectionsFilters"

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.1.3",
+  "version": "11.2.0",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",
@@ -131,8 +131,8 @@
     "htmldiff-js": "1.0.5",
     "marked": "9.0.0",
     "react-dropzone": "11.0.1",
+    "react-focus-lock": "2.9.4",
     "react-google-recaptcha-v3": "1.7.0",
-    "react-highlight-words": "0.18.0",
     "react-select": "^4.3.1",
     "react-slick": "^0.29.0",
     "slick-carousel": "1.8.1",

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2023-12-27'
+releaseDate: '2024-01-11'
 softwareType: standalone/web
-softwareVersion: 11.1.2
+softwareVersion: 11.2.0
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/Collapse.jsx

@@ -39,10 +39,10 @@ const Collapse = ({
   children,
   isOpen,
   onOverlayClick,
+  showCloseButton = true, // deprecato da v12.0.0
   ...attributes
 }) => {
   const intl = useIntl();
-
   if (navbar && header) {
     const classes = classNames(className, 'navbar-collapse', {
       expanded: isOpen,
@@ -60,16 +60,21 @@ const Collapse = ({
           style={{ display: isOpen ? 'block' : 'none' }}
           onClick={onOverlayClick}
         ></div>
-        <div className="close-div">
-          <button
-            className="btn close-menu"
-            type="button"
-            title={intl.formatMessage(messages.CloseMenu)}
-            onClick={onOverlayClick}
-          >
-            <Icon color="white" icon="it-close-big" padding={false} />
-          </button>
-        </div>
+        {/* Deprecato - non viene più utilizzato da v12.0.0 per ragioni di accessibilità
+          Close button ora presente in Navigation.jsx
+        */}
+        {showCloseButton && (
+          <div className="close-div">
+            <button
+              className="btn close-menu"
+              type="button"
+              title={intl.formatMessage(messages.CloseMenu)}
+              onClick={onOverlayClick}
+            >
+              <Icon color="white" icon="it-close-big" padding={false} />
+            </button>
+          </div>
+        )}
         {children}
       </CollapseBase>
     );

package/src/components/ItaliaTheme/Blocks/Alert/Edit.jsx

@@ -60,7 +60,7 @@ class Edit extends Component {
   constructor(props) {
     super(props);
     if (!this.props.data.bg_color) {
-      this.props.data.bg_color = 'warning';
+      this.props.data.bg_color = this.props.data.color ?? 'warning'; // backwards compatibility with previous background-color variable name 'color'
     }
     this.blockNode = React.createRef();
   }

package/src/components/ItaliaTheme/Blocks/Alert/View.jsx

@@ -27,9 +27,11 @@ const View = ({ data, pathname }) => {
       )
     : '';
 
+  const background_color = data.bg_color ?? data.color; // backwards compatibility with previous background-color variable name 'color'
+
   return (
     <section role="alert" className="block alertblock">
-      <div className={cx('full-width', 'bg-alert-' + data.bg_color)}>
+      <div className={cx('full-width', 'bg-alert-' + background_color)}>
         <Container className="p-4 pt-5 pb-5">
           <Row className="align-items-start">
             {data.image?.data && (

package/src/components/ItaliaTheme/Blocks/BandiSearch/Body.jsx

@@ -149,54 +149,60 @@ const Body = ({ data, inEditMode, path, onChangeBlock }) => {
           'public-ui': inEditMode,
         })}
       >
-        <div className="d-flex justify-content-center">
-          <div className="d-flex search-container align-items-center justify-content-center flex-wrap">
-            {filterOne && (
-              <>
-                {React.createElement(filterOne.widget.component, {
-                  ...filterOne.widget?.props,
-                  id: 'filterOne',
-                  onChange: (filter, value) => {
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            doRequest(1);
+          }}
+        >
+          <div className="d-flex justify-content-center">
+            <div className="d-flex search-container align-items-center justify-content-center flex-wrap">
+              {filterOne && (
+                <>
+                  {React.createElement(filterOne.widget.component, {
+                    ...filterOne.widget?.props,
+                    id: 'filterOne',
+                    onChange: (filter, value) => {
+                      dispatchFilter({
+                        filter: filter,
+                        value: value,
+                      });
+                    },
+                  })}
+                </>
+              )}
+              {filterTwo &&
+                React.createElement(filterTwo.widget?.component, {
+                  ...filterTwo.widget?.props,
+                  id: 'filterTwo',
+                  onChange: (filter, value) =>
                     dispatchFilter({
                       filter: filter,
                       value: value,
-                    });
-                  },
+                    }),
                 })}
-              </>
-            )}
-            {filterTwo &&
-              React.createElement(filterTwo.widget?.component, {
-                ...filterTwo.widget?.props,
-                id: 'filterTwo',
-                onChange: (filter, value) =>
-                  dispatchFilter({
-                    filter: filter,
-                    value: value,
-                  }),
-              })}
-            {filterThree &&
-              React.createElement(filterThree.widget?.component, {
-                ...filterThree.widget?.props,
-                id: 'filterThree',
-                onChange: (filter, value) =>
-                  dispatchFilter({
-                    filter: filter,
-                    value: value,
-                  }),
-              })}
-
-            <Button
-              color={data.button_color || 'tertiary'}
-              icon={false}
-              tag="button"
-              onClick={() => doRequest(1)}
-              className="my-2 my-lg-1"
-            >
-              {intl.formatMessage(messages.find)}
-            </Button>
+              {filterThree &&
+                React.createElement(filterThree.widget?.component, {
+                  ...filterThree.widget?.props,
+                  id: 'filterThree',
+                  onChange: (filter, value) =>
+                    dispatchFilter({
+                      filter: filter,
+                      value: value,
+                    }),
+                })}
+
+              <Button
+                color={data.button_color || 'tertiary'}
+                icon={false}
+                tag="button"
+                className="my-2 my-lg-1"
+              >
+                {intl.formatMessage(messages.find)}
+              </Button>
+            </div>
           </div>
-        </div>
+        </form>
       </div>
 
       {!loading ? (

package/src/components/ItaliaTheme/Blocks/EventSearch/Body.jsx

@@ -159,54 +159,60 @@ const Body = ({ data, inEditMode, path, onChangeBlock }) => {
           'public-ui': inEditMode,
         })}
       >
-        <div className="d-flex justify-content-center">
-          <div className="d-flex search-container align-items-center justify-content-center flex-wrap">
-            {filterOne && (
-              <>
-                {React.createElement(filterOne.widget.component, {
-                  ...filterOne.widget?.props,
-                  id: 'filterOne',
-                  onChange: (filter, value) => {
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            doRequest(1);
+          }}
+        >
+          <div className="d-flex justify-content-center">
+            <div className="d-flex search-container align-items-center justify-content-center flex-wrap">
+              {filterOne && (
+                <>
+                  {React.createElement(filterOne.widget.component, {
+                    ...filterOne.widget?.props,
+                    id: 'filterOne',
+                    onChange: (filter, value) => {
+                      dispatchFilter({
+                        filter: filter,
+                        value: value,
+                      });
+                    },
+                  })}
+                </>
+              )}
+              {filterTwo &&
+                React.createElement(filterTwo.widget?.component, {
+                  ...filterTwo.widget?.props,
+                  id: 'filterTwo',
+                  onChange: (filter, value) =>
                     dispatchFilter({
                       filter: filter,
                       value: value,
-                    });
-                  },
+                    }),
                 })}
-              </>
-            )}
-            {filterTwo &&
-              React.createElement(filterTwo.widget?.component, {
-                ...filterTwo.widget?.props,
-                id: 'filterTwo',
-                onChange: (filter, value) =>
-                  dispatchFilter({
-                    filter: filter,
-                    value: value,
-                  }),
-              })}
-            {filterThree &&
-              React.createElement(filterThree.widget?.component, {
-                ...filterThree.widget?.props,
-                id: 'filterThree',
-                onChange: (filter, value) =>
-                  dispatchFilter({
-                    filter: filter,
-                    value: value,
-                  }),
-              })}
-
-            <Button
-              color={data.button_color || 'tertiary'}
-              icon={false}
-              tag="button"
-              onClick={() => doRequest(1)}
-              className="my-2 my-lg-1"
-            >
-              {intl.formatMessage(messages.find)}
-            </Button>
+              {filterThree &&
+                React.createElement(filterThree.widget?.component, {
+                  ...filterThree.widget?.props,
+                  id: 'filterThree',
+                  onChange: (filter, value) =>
+                    dispatchFilter({
+                      filter: filter,
+                      value: value,
+                    }),
+                })}
+
+              <Button
+                color={data.button_color || 'tertiary'}
+                icon={false}
+                tag="button"
+                className="my-2 my-lg-1"
+              >
+                {intl.formatMessage(messages.find)}
+              </Button>
+            </div>
           </div>
-        </div>
+        </form>
       </div>
 
       {!loading ? (

package/src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Block.jsx

@@ -1,14 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useRef, useEffect } from 'react';
-import {
-  Card,
-  CardBody,
-  CardText,
-  Container,
-  Row,
-  Col,
-} from 'design-react-kit';
+import React, { useState, useEffect } from 'react';
+import { Card, CardBody, Container, Row, Col } from 'design-react-kit';
 import { defineMessages, useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import redraft from 'redraft';
@@ -113,7 +106,7 @@ const Block = ({
         )}
       </h2>
       <Card color="white" className="card-bg rounded" noWrapper={false}>
-        <CardBody className="pb-0">
+        <CardBody>
           {inEditMode ? (
             <Container>
               <Row
@@ -123,19 +116,20 @@ const Block = ({
                 })}
               >
                 {hasImage && (
-                  <Col className="py-4 px-0" key={'col-0'}>
+                  <Col className="my-1 px-0" key={'col-0'}>
                     {renderImage(data?.image, hasImage, data?.sizeNatural)}
                   </Col>
                 )}
                 <div
                   key={'col-1'}
-                  className={cx('p-4 mb-2', {
+                  className={cx('px-4 mb-2', {
                     'col-12': !hasImage,
                     'col-8':
                       (hasImage && data?.sizeImage === 's') ||
                       (hasImage && !data?.sizeImage),
                     'col-6': hasImage && data?.sizeImage === 'm',
                     'col-4': hasImage && data?.sizeImage === 'l',
+                    'ps-0': data?.rightImage,
                   })}
                 >
                   <div
@@ -146,29 +140,24 @@ const Block = ({
                       setSelectedField('content');
                     }}
                   >
-                    <CardText
-                      className="simple-text-card text"
-                      style={{ padding: 0 }}
-                    >
-                      <TextEditorWidget
-                        data={data}
-                        fieldName="image_card_content"
-                        selected={selectedField === 'content'}
-                        block={block}
-                        onChangeBlock={(data) => onChange(data)}
-                        placeholder={intl.formatMessage(
-                          messages.image_card_content,
-                        )}
-                        showToolbar={true}
-                        onSelectBlock={onSelectBlock}
-                        onAddBlock={onAddBlock}
-                        index={index}
-                        onFocusNextBlock={onFocusNextBlock}
-                        onFocusPreviousBlock={() => {
-                          setSelectedField('title');
-                        }}
-                      />
-                    </CardText>
+                    <TextEditorWidget
+                      data={data}
+                      fieldName="image_card_content"
+                      selected={selectedField === 'content'}
+                      block={block}
+                      onChangeBlock={(data) => onChange(data)}
+                      placeholder={intl.formatMessage(
+                        messages.image_card_content,
+                      )}
+                      showToolbar={true}
+                      onSelectBlock={onSelectBlock}
+                      onAddBlock={onAddBlock}
+                      index={index}
+                      onFocusNextBlock={onFocusNextBlock}
+                      onFocusPreviousBlock={() => {
+                        setSelectedField('title');
+                      }}
+                    />
                   </div>
                 </div>
               </Row>
@@ -180,28 +169,27 @@ const Block = ({
                   'revert-row': data?.rightImage,
                 })}
               >
-                <Col className="py-4 px-0" key={'col-0'} data-testid={'col-0'}>
+                <Col className="my-1 p-0" key={'col-0'} data-testid={'col-0'}>
                   {renderImage(data?.image, hasImage, data?.sizeNatural)}
                 </Col>
                 <div
                   key={'col-1'}
                   data-testid={'col-1'}
-                  className={cx('p-4', {
+                  className={cx('px-4', {
                     'col-12': !hasImage,
                     'col-8':
                       (hasImage && data?.sizeImage === 's') ||
                       (hasImage && !data?.sizeImage),
                     'col-6': hasImage && data?.sizeImage === 'm',
                     'col-4': hasImage && data?.sizeImage === 'l',
+                    'ps-0': data?.rightImage,
                   })}
                 >
-                  <CardText>
-                    {redraft(
-                      content,
-                      config.settings.richtextViewSettings.ToHTMLRenderers,
-                      config.settings.richtextViewSettings.ToHTMLOptions,
-                    )}
-                  </CardText>
+                  {redraft(
+                    content,
+                    config.settings.richtextViewSettings.ToHTMLRenderers,
+                    config.settings.richtextViewSettings.ToHTMLOptions,
+                  )}
                 </div>
               </Row>
             </Container>