Skip to content

Commit 0990563

Browse files
author
Juli Ovechkina
authored
feat(ExtendedFeatures): add content (#51)
* feat(ExtendedFeatures): add content
1 parent 809ebb8 commit 0990563

File tree

8 files changed

+331
-87
lines changed

8 files changed

+331
-87
lines changed

‎src/blocks/CardLayout/__stories__/data.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"title": "Lorem ipsum",
2121
"description": "Dolor sit amet"
2222
},
23-
"description": "Four cards in a row on the desktop, three cards in a row on a tablet, two card in a row on a mobile phone.",
23+
"description": "Four cards in a row on the desktop, three cards in a row on a tablet, two cards in a row on a mobile phone.",
2424
"colSizes": {
2525
"all": 6,
2626
"sm": 4,

‎src/blocks/ExtendedFeatures/ExtendedFeatures.scss‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ $block: '.#{$ns}ExtendedFeaturesBlock';
1717

1818
&__item {
1919
margin-top: $indentM;
20-
padding-right: $indentM;
20+
21+
&.col {
22+
padding-right: $indentM;
23+
}
2124

2225
&-title {
2326
@include heading4();
@@ -66,13 +69,19 @@ $block: '.#{$ns}ExtendedFeaturesBlock';
6669
@include icon();
6770

6871
display: block;
69-
margin-bottom: $indentXXXS;
72+
margin-bottom: $indentXXS;
7073
}
7174

7275
@media (max-width: map-get($gridBreakpoints, 'sm')) {
7376
&__item {
7477
margin-top: $indentM;
7578
}
79+
80+
&__item {
81+
&.col {
82+
padding-right: $indentXXXS;
83+
}
84+
}
7685
}
7786

7887
@include animate-slides(#{$class}__item);

‎src/blocks/ExtendedFeatures/ExtendedFeatures.tsx‎

Lines changed: 52 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
import React from 'react';
1+
import React, {useContext} from 'react';
22

3-
import {block} from '../../utils';
3+
import {block, getThemedValue} from '../../utils';
44
import {ExtendedFeaturesProps} from '../../models';
55
import {Row, Col} from '../../grid';
6-
import {Link, HTML, AnimateBlock, BlockHeader} from '../../components/';
6+
import {AnimateBlock, BlockHeader, HTML} from '../../components/';
7+
import {Content} from '../../sub-blocks';
8+
import Image from '../../components/Image/Image';
9+
import {ThemeValueContext} from '../../context/theme/ThemeValueContext';
10+
import {getMediaImage} from '../../components/Media/Image/utils';
711

812
import './ExtendedFeatures.scss';
913

@@ -21,31 +25,50 @@ export const ExtendedFeaturesBlock = ({
2125
items,
2226
colSizes = DEFAULT_SIZES,
2327
animated,
24-
}: ExtendedFeaturesProps) => (
25-
<AnimateBlock className={b()} animate={animated}>
26-
<BlockHeader title={title} description={description} className={b('header')} />
27-
<div className={b('items')}>
28-
<Row>
29-
{items.map(({title: itemTitle, text, link, label, icon}) => (
30-
<Col className={b('item')} key={text || itemTitle} sizes={colSizes}>
31-
{icon && <img src={icon} className={b('icon')} />}
32-
{itemTitle && (
33-
<h5 className={b('item-title', {'has-label': Boolean(label)})}>
34-
<HTML>{itemTitle}</HTML>
35-
{label && <div className={b('item-label')}>{label}</div>}
36-
</h5>
37-
)}
38-
{text && (
39-
<div className={b('item-text')}>
40-
<HTML>{text}</HTML>
41-
</div>
42-
)}
43-
{link && <Link className={b('item-link')} {...link} />}
44-
</Col>
45-
))}
46-
</Row>
47-
</div>
48-
</AnimateBlock>
49-
);
28+
}: ExtendedFeaturesProps) => {
29+
const {themeValue: theme} = useContext(ThemeValueContext);
30+
31+
return (
32+
<AnimateBlock className={b()} animate={animated}>
33+
<BlockHeader title={title} description={description} className={b('header')} />
34+
<div className={b('items')}>
35+
<Row>
36+
{items.map(({title: itemTitle, text, link, links, label, icon}) => {
37+
const itemLinks = links || [];
38+
39+
const iconThemed = icon && getThemedValue(icon, theme);
40+
const iconData = iconThemed && getMediaImage(iconThemed);
41+
42+
if (link) {
43+
itemLinks.push(link);
44+
}
45+
46+
return (
47+
<Col className={b('item')} key={text || itemTitle} sizes={colSizes}>
48+
{iconData && <Image {...iconData} className={b('icon')} />}
49+
<div className={b('container')}>
50+
{itemTitle && (
51+
<h5 className={b('item-title')}>
52+
<HTML>{itemTitle}</HTML>
53+
{label && (
54+
<div className={b('item-label')}>{label}</div>
55+
)}
56+
</h5>
57+
)}
58+
<Content
59+
text={text}
60+
links={itemLinks}
61+
size="s"
62+
colSizes={{all: 12, md: 12}}
63+
/>
64+
</div>
65+
</Col>
66+
);
67+
})}
68+
</Row>
69+
</div>
70+
</AnimateBlock>
71+
);
72+
};
5073

5174
export default ExtendedFeaturesBlock;

‎src/blocks/ExtendedFeatures/README.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@ Extended Features block
1010

1111
`items: FeatureItem[]` — Feature description
1212

13-
- `title?: string` — Title
14-
- `text?: string` — Text
15-
- `link?: Link` — Link below the text
13+
- `title?: string` — Item's title
14+
- `text?: string` — Item's text (with YFM support)
15+
- `additionalInfo?: string` — Gray text (with YFM support)
16+
- `links?: Link[]` — An array with link objects (see [Content blocks](?path=/story/information--common-types&viewMode=docs))
17+
- `buttons?: Button[]` — An array with button objects (see [Content blocks](?path=/story/information--common-types&viewMode=docs))
1618
- `label?: New | Preview` — Label
1719

1820
`colSizes?: Object` — Sizes of a single card in columns for different screen sizes, the value ranges from 1 to 12 columns. If 12 columns, a single card takes up the entire width of the screen.

‎src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx‎

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import React from 'react';
22
import {Meta, Story} from '@storybook/react/types-6-0';
3-
import {ExtendedFeaturesBlockModel, ExtendedFeaturesProps} from '../../../models';
3+
import {
4+
ExtendedFeaturesBlockModel,
5+
ExtendedFeaturesItem,
6+
ExtendedFeaturesProps,
7+
} from '../../../models';
48
import ExtendedFeatures from '../ExtendedFeatures';
59
import {PageConstructor} from '../../../containers/PageConstructor/PageConstructor';
10+
import {yfmTransform} from '../../../../.storybook/utils';
611

712
import data from './data.json';
813

@@ -22,8 +27,52 @@ export default {
2227
const DefaultTemplate: Story<ExtendedFeaturesBlockModel> = (args) => (
2328
<PageConstructor content={{blocks: [args]}} />
2429
);
30+
31+
const extendedFeaturesItems = (items: ExtendedFeaturesItem[]) => {
32+
return items.map((item) => ({
33+
...item,
34+
text: item.text && yfmTransform(item.text),
35+
}));
36+
};
37+
38+
const ColSizesTemplate: Story<ExtendedFeaturesBlockModel> = (args) => (
39+
<PageConstructor
40+
content={{
41+
blocks: [
42+
{
43+
...args,
44+
...data.colSizes.four,
45+
items: extendedFeaturesItems(
46+
data.colSizes.four.items as ExtendedFeaturesItem[],
47+
),
48+
},
49+
{
50+
...args,
51+
...data.colSizes.three,
52+
},
53+
{
54+
...args,
55+
...data.colSizes.two,
56+
items: extendedFeaturesItems(data.colSizes.two.items as ExtendedFeaturesItem[]),
57+
},
58+
],
59+
}}
60+
/>
61+
);
62+
2563
export const Default = DefaultTemplate.bind({});
2664
export const WithLabel = DefaultTemplate.bind({});
65+
export const ColSizes = ColSizesTemplate.bind({});
2766

28-
Default.args = data.default.content as ExtendedFeaturesProps;
29-
WithLabel.args = data.withLabel.content as ExtendedFeaturesProps;
67+
Default.args = {
68+
...data.default.content,
69+
items: extendedFeaturesItems(data.default.content.items as ExtendedFeaturesItem[]),
70+
} as ExtendedFeaturesProps;
71+
WithLabel.args = {
72+
...data.withLabel.content,
73+
items: extendedFeaturesItems(data.withLabel.content.items as ExtendedFeaturesItem[]),
74+
} as ExtendedFeaturesProps;
75+
ColSizes.args = {
76+
...data.default.content,
77+
items: extendedFeaturesItems(data.default.content.items as ExtendedFeaturesItem[]),
78+
} as ExtendedFeaturesProps;

0 commit comments

Comments
 (0)