feat(PlaceholderContainer): add component and showcases

CODEOWNERS

@@ -27,6 +27,7 @@
 /src/components/Pagination @jhoncool
 /src/components/Palette @Ruminat
 /src/components/PinInput @amje
+/src/components/PlaceholderContainer @Marginy605
 /src/components/Popover @kseniya57
 /src/components/Popup @amje
 /src/components/Portal @amje

src/components/PlaceholderContainer/PlaceholderContainer.scss

@@ -0,0 +1,223 @@
+@import '../variables';
+@import '../../../styles/mixins';
+
+$imageSmallSize: 100px;
+$imageMediumSize: 150px;
+$imageLargeSize: 230px;
+
+$contentHeightSmallSize: 130px;
+$contentHeightMediumSize: 180px;
+$contentHeightLargeSize: 320px;
+
+$containerSmallRowSize: 320px;
+$containerMediumRowSize: 430px;
+$containerLargeRowSize: 600px;
+
+$containerSmallColSize: 320px;
+$containerMediumColSize: 320px;
+$containerLargeColSize: 430px;
+
+$normalOffset: var(--g-spacing-5);
+$mediumOffset: var(--g-spacing-7);
+$bigOffset: var(--g-spacing-10);
+
+$block: '.#{$ns}placeholder-container';
+
+@mixin container-row-sizes($bodyWidth, $imageSize, $contentHeight, $contentOffset) {
+    #{$block}__body {
+        max-width: $bodyWidth;
+    }
+
+    #{$block}__image {
+        width: $imageSize;
+
+        & > * {
+            max-width: $imageSize;
+        }
+    }
+
+    #{$block}__content {
+        margin-inline-start: $contentOffset;
+        min-height: $contentHeight;
+    }
+}
+
+@mixin container-column-sizes($bodyWidth, $imageSize) {
+    #{$block}__body {
+        max-width: $bodyWidth;
+    }
+
+    #{$block}__image {
+        max-height: $imageSize;
+
+        & > * {
+            max-height: $imageSize;
+        }
+    }
+}
+
+#{$block} {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: $mediumOffset;
+
+    &#{$block}_align {
+        &_left {
+            justify-content: flex-start;
+        }
+
+        &_center {
+            justify-content: center;
+        }
+    }
+
+    &__body {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+    }
+
+    &_size_s {
+        padding: $normalOffset;
+
+        #{$block}__description {
+            margin-block-start: var(--g-spacing-1);
+        }
+    }
+
+    &_size_m {
+        padding: $mediumOffset;
+
+        #{$block}__description {
+            margin-block-start: var(--g-spacing-2);
+        }
+    }
+
+    &_size_promo,
+    &_size_l {
+        #{$block}__description {
+            margin-block-start: var(--g-spacing-3);
+        }
+    }
+
+    &__image {
+        flex-shrink: 0;
+
+        img {
+            display: block;
+        }
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        flex-grow: 1;
+    }
+
+    &__title {
+        #{$block}_size_s & {
+            @include text-subheader-1();
+        }
+
+        #{$block}_size_m & {
+            @include text-subheader-2();
+        }
+
+        #{$block}_size_l & {
+            @include text-subheader-3();
+        }
+
+        #{$block}_size_promo & {
+            @include text-header-1();
+        }
+    }
+
+    &__actions {
+        margin-block-start: $normalOffset;
+        display: flex;
+        flex-direction: row;
+    }
+
+    &_direction_row {
+        &#{$block}_size_s {
+            @include container-row-sizes(
+                $containerSmallRowSize,
+                $imageSmallSize,
+                $contentHeightSmallSize,
+                $normalOffset
+            );
+        }
+
+        &#{$block}_size_m {
+            @include container-row-sizes(
+                $containerMediumRowSize,
+                $imageMediumSize,
+                $contentHeightMediumSize,
+                $mediumOffset
+            );
+        }
+
+        &#{$block}_size_l {
+            @include container-row-sizes(
+                $containerLargeRowSize,
+                $imageLargeSize,
+                $contentHeightLargeSize,
+                $bigOffset
+            );
+        }
+
+        &#{$block}_size_promo {
+            @include container-row-sizes($containerLargeRowSize, $imageLargeSize, none, $bigOffset);
+        }
+    }
+
+    &_direction_column {
+        #{$block}__body {
+            flex-direction: column;
+        }
+
+        #{$block}__content {
+            margin-block-start: $normalOffset;
+            align-items: center;
+            text-align: center;
+            flex-shrink: 0;
+        }
+
+        #{$block}__image {
+            flex-shrink: 0;
+        }
+
+        &#{$block}_size_s {
+            @include container-column-sizes($containerSmallColSize, $imageSmallSize);
+        }
+
+        &#{$block}_size_m {
+            @include container-column-sizes($containerMediumColSize, $imageMediumSize);
+        }
+
+        &#{$block}_size_l {
+            @include container-column-sizes($containerLargeColSize, $imageLargeSize);
+        }
+
+        &#{$block}_size_promo {
+            padding: $normalOffset;
+
+            @include container-column-sizes($containerLargeColSize, $imageLargeSize);
+
+            #{$block}__body {
+                width: 100%;
+            }
+        }
+    }
+
+    &__action {
+        margin-inline-end: $normalOffset;
+    }
+
+    &__action:last-child {
+        margin-inline-end: 0;
+    }
+}

src/components/PlaceholderContainer/PlaceholderContainer.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+
+import {block} from '../utils/cn';
+
+import {PlaceholderContainerAction} from './PlaceholderContainerAction';
+import {Align, Direction, componentClassName} from './constants';
+import type {
+    PlaceholderContainerDefaultProps,
+    PlaceholderContainerImageSettingsProps,
+    PlaceholderContainerInnerProps,
+    PlaceholderContainerState,
+} from './types';
+
+import './PlaceholderContainer.scss';
+
+const b = block(componentClassName);
+
+export class PlaceholderContainer extends React.Component<
+    PlaceholderContainerInnerProps,
+    PlaceholderContainerState
+> {
+    static Direction = Direction;
+    static Align = Align;
+
+    static defaultProps: PlaceholderContainerDefaultProps = {
+        size: 'l',
+        direction: Direction.Row,
+        align: Align.Center,
+    };
+
+    render() {
+        const {direction, align, size} = this.props;
+        const className: string = this.props.className || b();
+
+        return (
+            <div className={b({direction, align, size}, [className])}>
+                <div className={b('body')}>
+                    <div className={b('image', {size})}>{this.renderImage()}</div>
+                    {this.renderContent()}
+                </div>
+            </div>
+        );
+    }
+
+    private renderImage(): NonNullable<React.ReactNode> {
+        if (typeof this.props.image === 'object' && 'url' in this.props.image) {
+            const image: PlaceholderContainerImageSettingsProps = this.props.image;
+            return <img src={image.url} alt={image.alt || ''} />;
+        }
+
+        return this.props.image;
+    }
+
+    private renderContent() {
+        const {size} = this.props;
+        const content = this.props.renderContent ? (
+            this.props.renderContent()
+        ) : (
+            <React.Fragment>
+                {this.renderTitle()}
+                {this.renderDescription()}
+            </React.Fragment>
+        );
+
+        return (
+            <div className={b('content', {size})}>
+                {content}
+                {this.renderAction()}
+            </div>
+        );
+    }
+
+    private renderTitle() {
+        const {title} = this.props;
+
+        if (!title) {
+            return null;
+        }
+
+        return <div className={b('title')}>{title}</div>;
+    }
+
+    private renderDescription() {
+        const {description} = this.props;
+
+        if (!description) {
+            return null;
+        }
+
+        return <div className={b('description')}>{description}</div>;
+    }
+
+    private renderAction() {
+        const {action, renderAction} = this.props;
+
+        if (renderAction) {
+            return renderAction();
+        }
+
+        if (!action) {
+            return null;
+        }
+
+        if (Array.isArray(action)) {
+            if (!action.length) {
+                return null;
+            }
+
+            return (
+                <div className={b('actions')}>
+                    {action.map((actionItem) => (
+                        <PlaceholderContainerAction key={actionItem.text} action={actionItem} />
+                    ))}
+                </div>
+            );
+        }
+
+        return (
+            <div className={b('actions')}>
+                <PlaceholderContainerAction action={action} />
+            </div>
+        );
+    }
+}