feat: add new component ActionsPanel (#39)

src/components/ActionsPanel/ActionsPanel.scss

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

src/components/ActionsPanel/ActionsPanel.tsx

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

src/components/ActionsPanel/README.md

@@ -0,0 +1,73 @@
+# ActionsPanel
+
+## Usage
+
+```tsx
+import React from 'react';
+import {ActionsPanel, ActionsPanelProps} from '@gravity-ui/components';
+
+const actions: ActionsPanelProps['actions'] = [
+  {
+    id: 'id1',
+    button: {
+      props: {
+        children: 'Action 1',
+        onClick: () => console.log('click button action 1'),
+      },
+    },
+    dropdown: {
+      item: {
+        action: () => console.log('click dropdown action 1'),
+        text: 'Action 1',
+      },
+    },
+  },
+  {
+    id: 'id2',
+    button: {
+      props: {
+        children: 'Action 2',
+        onClick: () => console.log('click button action 2'),
+      },
+    },
+    dropdown: {
+      item: {
+        action: () => console.log('click dropdown action 2'),
+        text: 'Action 2',
+      },
+    },
+  },
+];
+
+const panel = <ActionsPanel actions={actions} />;
+```
+
+## Props
+
+```ts
+type ActionItem = {
+  /** Uniq action id */
+  id: string;
+  /** If true, then always inside the dropdown */
+  collapsed?: boolean;
+  /** Settings for dropdown action */
+  dropdown: {
+    item: DropdownMenuItem;
+    group?: string;
+  };
+  /** Settings for button action */
+  button: {
+    props: ButtonProps;
+  };
+};
+
+type ActionsPanelProps = {
+  /** Array of actions ActionItem[] */
+  actions: ActionItem[];
+  /** Close button click handler */
+  onClose?: () => void;
+  /** Render-prop for displaying the content of a note */
+  renderNote?: () => React.ReactNode;
+  className?: string;
+};
+```

src/components/ActionsPanel/__stories__/ActionsPanel.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {Meta, Story} from '@storybook/react';
+import {ActionsPanel, ActionsPanelProps} from '../../ActionsPanel';
+import {actions, actionsWithIcons, actionsGroups, actionsSubmenu} from './actions';
+
+export default {
+    title: 'Components/ActionsPanel',
+    component: ActionsPanel,
+} as Meta;
+
+const DefaultTemplate: Story<ActionsPanelProps> = (args) => {
+    return (
+        <ActionsPanel
+            {...args}
+            actions={actions}
+            onClose={() => console.log('onClose called')}
+            renderNote={() => '10 items'}
+        />
+    );
+};
+export const Default = DefaultTemplate.bind({});
+
+const WithIconsTemplate: Story<ActionsPanelProps> = (args) => {
+    return <ActionsPanel {...args} actions={actionsWithIcons} />;
+};
+export const WithIcons = WithIconsTemplate.bind({});
+
+const GroupsTemplate: Story<ActionsPanelProps> = (args) => {
+    return <ActionsPanel {...args} actions={actionsGroups} />;
+};
+export const Groups = GroupsTemplate.bind({});
+
+const SubmenuTemplate: Story<ActionsPanelProps> = (args) => {
+    return <ActionsPanel {...args} actions={actionsSubmenu} />;
+};
+export const Submenu = SubmenuTemplate.bind({});