feat(ActionsPanel): add component and showcases (#1873)

CODEOWNERS

@@ -1,4 +1,5 @@
 * @amje @ValeraS @korvin89
+/src/components/ActionsPanel @jhoncool
 /src/components/ActionTooltip @amje
 /src/components/Alert @IsaevAlexandr
 /src/components/ArrowToggle @Marginy605

src/components/ActionsPanel/ActionsPanel.scss

@@ -0,0 +1,24 @@
+@use '../variables';
+
+$block: '.#{variables.$ns}actions-panel';
+
+#{$block} {
+    box-sizing: border-box;
+    background-color: var(--g-color-base-brand);
+    min-width: 200px;
+    height: 52px;
+    padding: 4px 20px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+
+    &__note-wrapper {
+        min-width: 100px;
+        margin-inline-end: 40px;
+    }
+
+    &__button-close {
+        flex-shrink: 0;
+        margin-inline-start: auto;
+    }
+}

src/components/ActionsPanel/ActionsPanel.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import React from 'react';
+
+import {Xmark} from '@gravity-ui/icons';
+
+import {Button} from '../Button';
+import {Icon} from '../Icon';
+import {Text} from '../Text';
+import {block} from '../utils/cn';
+
+import {CollapseActions} from './components/CollapseActions';
+import i18n from './i18n';
+import type {ActionsPanelProps} from './types';
+
+import './ActionsPanel.scss';
+
+const b = block('actions-panel');
+
+export const ActionsPanel = ({
+    className,
+    actions,
+    onClose,
+    renderNote,
+    noteClassName,
+    qa,
+    maxRowActions,
+}: ActionsPanelProps) => {
+    return (
+        <div className={b(null, className)} data-qa={qa}>
+            {typeof renderNote === 'function' && (
+                <Text
+                    className={b('note-wrapper', noteClassName)}
+                    as="div"
+                    color="light-primary"
+                    variant="subheader-2"
+                    ellipsis={true}
+                >
+                    {renderNote()}
+                </Text>
+            )}
+            <CollapseActions actions={actions} maxRowActions={maxRowActions} />
+            {typeof onClose === 'function' && (
+                <Button
+                    view="flat-contrast"
+                    size="m"
+                    onClick={onClose}
+                    className={b('button-close')}
+                    extraProps={{
+                        'aria-label': i18n('label_close'),
+                    }}
+                >
+                    <Icon key="icon" data={Xmark} />
+                </Button>
+            )}
+        </div>
+    );
+};