Skip to content

Commit

Permalink
fix: fixed font and spaces of Card blocks
Browse files Browse the repository at this point in the history
  • Loading branch information
@SaraBianchi
SaraBianchi committed Jan 10, 2024
1 parent 1dbc958 commit 772d3c3
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 78 deletions.
76 changes: 32 additions & 44 deletions src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Block.jsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -113,7 +106,7 @@ const Block = ({
)}
</h2>
<Card color="white" className="card-bg rounded" noWrapper={false}>
<CardBody className="pb-0">
<CardBody>
{inEditMode ? (
<Container>
<Row
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -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>
Expand Down
62 changes: 28 additions & 34 deletions src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Block.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +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, CardTitle, CardText } from 'design-react-kit';
import React, { useState, useEffect } from 'react';
import { Card, CardBody, CardTitle } from 'design-react-kit';
import { defineMessages, useIntl } from 'react-intl';
import PropTypes from 'prop-types';
import redraft from 'redraft';
Expand Down Expand Up @@ -98,45 +98,39 @@ const Block = ({
setSelectedField('content');
}}
>
<CardText>
<TextEditorWidget
data={data}
fieldName="simple_card_content"
selected={selectedField === 'content'}
block={block}
onChangeBlock={(data) =>
onChange(data, 'simple_card_content')
}
placeholder={intl.formatMessage(
messages.simple_card_content,
)}
showToolbar={true}
onSelectBlock={onSelectBlock}
onAddBlock={onAddBlock}
index={index}
onFocusNextBlock={onFocusNextBlock}
onFocusPreviousBlock={() => {
setSelectedField('title');
}}
/>
</CardText>
<TextEditorWidget
data={data}
fieldName="simple_card_content"
selected={selectedField === 'content'}
block={block}
onChangeBlock={(data) =>
onChange(data, 'simple_card_content')
}
placeholder={intl.formatMessage(
messages.simple_card_content,
)}
showToolbar={true}
onSelectBlock={onSelectBlock}
onAddBlock={onAddBlock}
index={index}
onFocusNextBlock={onFocusNextBlock}
onFocusPreviousBlock={() => {
setSelectedField('title');
}}
/>
</div>
</>
) : (
<>
<CardTitle tag="h4" id={block.id + '-title'}>
{title}
</CardTitle>
<Divider />
<div>
<CardText>
{redraft(
content,
config.settings.richtextViewSettings.ToHTMLRenderers,
config.settings.richtextViewSettings.ToHTMLOptions,
)}
</CardText>
</div>
<hr />
{redraft(
content,
config.settings.richtextViewSettings.ToHTMLRenderers,
config.settings.richtextViewSettings.ToHTMLOptions,
)}
</>
)}
</div>
Expand Down

0 comments on commit 772d3c3

Please sign in to comment.