feat(FoldableList): add new block (#1157)

Author: aeksandla

src/blocks/FoldableList/FoldableList.scss

@@ -0,0 +1,20 @@
+@import '../../../styles/variables';
+@import '../../../styles/mixins';
+
+$block: '.#{$ns}FoldableList';
+
+#{$block} {
+    &__title {
+        @include top-content-offset($offset: $indentM);
+
+        position: sticky;
+        margin-bottom: $indentM;
+        margin-right: $indentXL;
+    }
+
+    @media (max-width: map-get($gridBreakpoints, 'md')) {
+        &__title {
+            margin-right: 0;
+        }
+    }
+}

src/blocks/FoldableList/FoldableList.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+
+import {Col, Row} from '../../grid';
+import {FoldableListProps} from '../../models';
+import {Content} from '../../sub-blocks';
+import {block} from '../../utils';
+
+import {FoldableListBlockItem} from './FoldableListBlockItem/FoldableListBlockItem';
+
+import './FoldableList.scss';
+
+const b = block('FoldableList');
+
+const FoldableListBlock = (props: FoldableListProps) => {
+    const {title, text, additionalInfo, links, buttons, items, list} = props;
+    const [opened, setOpened] = React.useState<number[]>([0]);
+
+    const toggleItem = (index: number) => {
+        let newState;
+
+        if (opened.includes(index)) {
+            newState = opened.filter((itemIndex: number) => itemIndex !== index);
+        } else {
+            newState = [...opened, index];
+        }
+
+        setOpened(newState);
+    };
+
+    return (
+        <div className={b()} itemScope>
+            <Row>
+                <Col sizes={{all: 12, md: 4}}>
+                    <div className={b('title')}>
+                        <Content
+                            title={title}
+                            text={text}
+                            additionalInfo={additionalInfo}
+                            links={links}
+                            list={list}
+                            buttons={buttons}
+                            colSizes={{all: 12, md: 12}}
+                        />
+                    </div>
+                </Col>
+                <Col sizes={{all: 12, md: 8}} role={'list'}>
+                    {items.map(
+                        ({title: itemTitle, text: itemText, link, listStyle = 'dash'}, index) => {
+                            const isOpened = opened.includes(index);
+                            const onClick = () => toggleItem(index);
+
+                            return (
+                                <FoldableListBlockItem
+                                    key={itemTitle}
+                                    title={itemTitle}
+                                    text={itemText}
+                                    link={link}
+                                    listStyle={listStyle}
+                                    isOpened={isOpened}
+                                    onClick={onClick}
+                                />
+                            );
+                        },
+                    )}
+                </Col>
+            </Row>
+        </div>
+    );
+};
+
+export default FoldableListBlock;

src/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.scss

@@ -0,0 +1,60 @@
+@import '../../../../styles/variables';
+@import '../../../../styles/mixins';
+
+$block: '.#{$ns}FoldableListBlockItem';
+
+#{$block} {
+    padding-bottom: $indentM;
+    border-bottom: 1px solid var(--g-color-line-generic);
+
+    & + & {
+        padding-top: $indentM;
+    }
+
+    &__title {
+        @include reset-button-style();
+        @include heading4();
+        @include focusable();
+
+        position: relative;
+        display: block;
+        width: 100%;
+        padding-right: 24px;
+        text-align: start;
+        cursor: pointer;
+        border-radius: var(--g-focus-border-radius);
+
+        a {
+            @include link();
+        }
+    }
+
+    &__arrow {
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        color: var(--g-color-text-primary);
+    }
+
+    &__link {
+        @include text-size(body-2);
+
+        @include add-specificity(&) {
+            a {
+                outline-offset: -2px; // as part of outline is hidden due to overflow: hidden from parent
+                border-radius: calc(
+                    var(--g-focus-border-radius) + 2px
+                ); // as outline-offset is -2px
+                display: inline-block; //fixes the Link to be clickable in entire row width
+            }
+        }
+    }
+
+    &__text {
+        @include text-size(body-2);
+
+        margin-top: $indentXXS;
+    }
+}

src/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.tsx

@@ -0,0 +1,54 @@
+import {useActionHandlers} from '@gravity-ui/uikit';
+
+import {Foldable, HTML, ToggleArrow, YFMWrapper} from '../../../components';
+import Link from '../../../components/Link/Link';
+import {FoldableListBlockItemProps} from '../../../models';
+import {block} from '../../../utils';
+
+import './FoldableListBlockItem.scss';
+
+const b = block('FoldableListBlockItem');
+
+export const FoldableListBlockItem = ({
+    title: itemTitle,
+    text: itemText,
+    link,
+    listStyle = 'dash',
+    isOpened,
+    onClick,
+}: FoldableListBlockItemProps) => {
+    const {onKeyDown} = useActionHandlers(onClick);
+
+    return (
+        <div className={b()} itemScope role={'listitem'}>
+            <button
+                className={b('title')}
+                onClick={onClick}
+                aria-expanded={isOpened}
+                onKeyDown={onKeyDown}
+            >
+                <HTML>{itemTitle}</HTML>
+                <ToggleArrow
+                    open={isOpened}
+                    size={16}
+                    type={'vertical'}
+                    iconType="navigation"
+                    className={b('arrow')}
+                />
+            </button>
+            <Foldable isOpened={isOpened}>
+                <div className={b('text')} aria-hidden={!isOpened}>
+                    <YFMWrapper
+                        content={itemText}
+                        modifiers={{
+                            constructor: true,
+                            constructorListStyle: true,
+                            constructorListStyleDash: listStyle === 'dash',
+                        }}
+                    />
+                    {link && <Link {...link} tabIndex={isOpened ? 0 : -1} className={b('link')} />}
+                </div>
+            </Foldable>
+        </div>
+    );
+};