feat(ExtendedFeatures): add content (#51)

* feat(ExtendedFeatures): add content
gravity-ui · Nov 10, 2022 · 0990563 · 0990563
1 parent 809ebb8
commit 0990563
Show file tree

Hide file tree

Showing 8 changed files with 331 additions and 87 deletions.
diff --git a/src/blocks/CardLayout/__stories__/data.json b/src/blocks/CardLayout/__stories__/data.json
@@ -20,7 +20,7 @@
         "title": "Lorem&nbsp;ipsum",
         "description": "Dolor sit amet"
       },
-      "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.",
+      "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.",
       "colSizes": {
         "all": 6,
         "sm": 4,

diff --git a/src/blocks/ExtendedFeatures/ExtendedFeatures.scss b/src/blocks/ExtendedFeatures/ExtendedFeatures.scss
@@ -17,7 +17,10 @@ $block: '.#{$ns}ExtendedFeaturesBlock';
 
     &__item {
         margin-top: $indentM;
-        padding-right: $indentM;
+
+        &.col {
+            padding-right: $indentM;
+        }
 
         &-title {
             @include heading4();
@@ -66,13 +69,19 @@ $block: '.#{$ns}ExtendedFeaturesBlock';
         @include icon();
 
         display: block;
-        margin-bottom: $indentXXXS;
+        margin-bottom: $indentXXS;
     }
 
     @media (max-width: map-get($gridBreakpoints, 'sm')) {
         &__item {
             margin-top: $indentM;
         }
+
+        &__item {
+            &.col {
+                padding-right: $indentXXXS;
+            }
+        }
     }
 
     @include animate-slides(#{$class}__item);

diff --git a/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx b/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx
@@ -1,9 +1,13 @@
-import React from 'react';
+import React, {useContext} from 'react';
 
-import {block} from '../../utils';
+import {block, getThemedValue} from '../../utils';
 import {ExtendedFeaturesProps} from '../../models';
 import {Row, Col} from '../../grid';
-import {Link, HTML, AnimateBlock, BlockHeader} from '../../components/';
+import {AnimateBlock, BlockHeader, HTML} from '../../components/';
+import {Content} from '../../sub-blocks';
+import Image from '../../components/Image/Image';
+import {ThemeValueContext} from '../../context/theme/ThemeValueContext';
+import {getMediaImage} from '../../components/Media/Image/utils';
 
 import './ExtendedFeatures.scss';
 
@@ -21,31 +25,50 @@ export const ExtendedFeaturesBlock = ({
     items,
     colSizes = DEFAULT_SIZES,
     animated,
-}: ExtendedFeaturesProps) => (
-    <AnimateBlock className={b()} animate={animated}>
-        <BlockHeader title={title} description={description} className={b('header')} />
-        <div className={b('items')}>
-            <Row>
-                {items.map(({title: itemTitle, text, link, label, icon}) => (
-                    <Col className={b('item')} key={text || itemTitle} sizes={colSizes}>
-                        {icon && <img src={icon} className={b('icon')} />}
-                        {itemTitle && (
-                            <h5 className={b('item-title', {'has-label': Boolean(label)})}>
-                                <HTML>{itemTitle}</HTML>
-                                {label && <div className={b('item-label')}>{label}</div>}
-                            </h5>
-                        )}
-                        {text && (
-                            <div className={b('item-text')}>
-                                <HTML>{text}</HTML>
-                            </div>
-                        )}
-                        {link && <Link className={b('item-link')} {...link} />}
-                    </Col>
-                ))}
-            </Row>
-        </div>
-    </AnimateBlock>
-);
+}: ExtendedFeaturesProps) => {
+    const {themeValue: theme} = useContext(ThemeValueContext);
+
+    return (
+        <AnimateBlock className={b()} animate={animated}>
+            <BlockHeader title={title} description={description} className={b('header')} />
+            <div className={b('items')}>
+                <Row>
+                    {items.map(({title: itemTitle, text, link, links, label, icon}) => {
+                        const itemLinks = links || [];
+
+                        const iconThemed = icon && getThemedValue(icon, theme);
+                        const iconData = iconThemed && getMediaImage(iconThemed);
+
+                        if (link) {
+                            itemLinks.push(link);
+                        }
+
+                        return (
+                            <Col className={b('item')} key={text || itemTitle} sizes={colSizes}>
+                                {iconData && <Image {...iconData} className={b('icon')} />}
+                                <div className={b('container')}>
+                                    {itemTitle && (
+                                        <h5 className={b('item-title')}>
+                                            <HTML>{itemTitle}</HTML>
+                                            {label && (
+                                                <div className={b('item-label')}>{label}</div>
+                                            )}
+                                        </h5>
+                                    )}
+                                    <Content
+                                        text={text}
+                                        links={itemLinks}
+                                        size="s"
+                                        colSizes={{all: 12, md: 12}}
+                                    />
+                                </div>
+                            </Col>
+                        );
+                    })}
+                </Row>
+            </div>
+        </AnimateBlock>
+    );
+};
 
 export default ExtendedFeaturesBlock;
diff --git a/src/blocks/ExtendedFeatures/README.md b/src/blocks/ExtendedFeatures/README.md
@@ -10,9 +10,11 @@ Extended Features block
 
 `items: FeatureItem[]` — Feature description
 
-- `title?: string` — Title
-- `text?: string` — Text
-- `link?: Link` — Link below the text
+- `title?: string` — Item's title
+- `text?: string` — Item's text (with YFM support)
+- `additionalInfo?: string` — Gray text (with YFM support)
+- `links?: Link[]` — An array with link objects (see [Content blocks](?path=/story/information--common-types&viewMode=docs))
+- `buttons?: Button[]` — An array with button objects (see [Content blocks](?path=/story/information--common-types&viewMode=docs))
 - `label?: New | Preview` — Label
 
 `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.

diff --git a/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx b/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx
@@ -1,8 +1,13 @@
 import React from 'react';
 import {Meta, Story} from '@storybook/react/types-6-0';
-import {ExtendedFeaturesBlockModel, ExtendedFeaturesProps} from '../../../models';
+import {
+    ExtendedFeaturesBlockModel,
+    ExtendedFeaturesItem,
+    ExtendedFeaturesProps,
+} from '../../../models';
 import ExtendedFeatures from '../ExtendedFeatures';
 import {PageConstructor} from '../../../containers/PageConstructor/PageConstructor';
+import {yfmTransform} from '../../../../.storybook/utils';
 
 import data from './data.json';
 
@@ -22,8 +27,52 @@ export default {
 const DefaultTemplate: Story<ExtendedFeaturesBlockModel> = (args) => (
     <PageConstructor content={{blocks: [args]}} />
 );
+
+const extendedFeaturesItems = (items: ExtendedFeaturesItem[]) => {
+    return items.map((item) => ({
+        ...item,
+        text: item.text && yfmTransform(item.text),
+    }));
+};
+
+const ColSizesTemplate: Story<ExtendedFeaturesBlockModel> = (args) => (
+    <PageConstructor
+        content={{
+            blocks: [
+                {
+                    ...args,
+                    ...data.colSizes.four,
+                    items: extendedFeaturesItems(
+                        data.colSizes.four.items as ExtendedFeaturesItem[],
+                    ),
+                },
+                {
+                    ...args,
+                    ...data.colSizes.three,
+                },
+                {
+                    ...args,
+                    ...data.colSizes.two,
+                    items: extendedFeaturesItems(data.colSizes.two.items as ExtendedFeaturesItem[]),
+                },
+            ],
+        }}
+    />
+);
+
 export const Default = DefaultTemplate.bind({});
 export const WithLabel = DefaultTemplate.bind({});
+export const ColSizes = ColSizesTemplate.bind({});
 
-Default.args = data.default.content as ExtendedFeaturesProps;
-WithLabel.args = data.withLabel.content as ExtendedFeaturesProps;
+Default.args = {
+    ...data.default.content,
+    items: extendedFeaturesItems(data.default.content.items as ExtendedFeaturesItem[]),
+} as ExtendedFeaturesProps;
+WithLabel.args = {
+    ...data.withLabel.content,
+    items: extendedFeaturesItems(data.withLabel.content.items as ExtendedFeaturesItem[]),
+} as ExtendedFeaturesProps;
+ColSizes.args = {
+    ...data.default.content,
+    items: extendedFeaturesItems(data.default.content.items as ExtendedFeaturesItem[]),
+} as ExtendedFeaturesProps;