feat(Components): add Accordion component (#442)

* feat(Components): add Accordion component

* chore: update uikit

Author: KostyaAvtushko

package-lock.json

@@ -14,7 +14,7 @@
     "@gravity-ui/markdown-editor": "^15.1.0",
     "@gravity-ui/navigation": "^3.6.4",
     "@gravity-ui/page-constructor": "^6.0.0-beta.6",
-    "@gravity-ui/uikit": "^7.21.0",
+    "@gravity-ui/uikit": "^7.22.0",
     "@gravity-ui/uikit-themer": "^1.4.1",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",

package.json

@@ -0,0 +1,25 @@
+import {Accordion, AccordionProps} from '@gravity-ui/uikit';
+
+type Props = {
+    size: AccordionProps['size'];
+    view: AccordionProps['view'];
+    arrowPosition: AccordionProps['arrowPosition'];
+    multiple: AccordionProps['multiple'];
+};
+
+export function AccordionComponent(props: Props) {
+    const {arrowPosition, multiple, view, size} = props;
+    return (
+        <Accordion multiple={multiple} view={view} size={size} arrowPosition={arrowPosition}>
+            <Accordion.Item summary={'Accordion summmary 1'}>
+                Some content for this item
+            </Accordion.Item>
+            <Accordion.Item summary={'Accordion summmary 2'}>
+                Some content for this item
+            </Accordion.Item>
+            <Accordion.Item summary={'Accordion summmary 3'}>
+                Some content for this item
+            </Accordion.Item>
+        </Accordion>
+    );
+}

src/content/components/uikit/Accordion/AccordionComponent.tsx

@@ -0,0 +1,42 @@
+import dynamic from 'next/dynamic';
+
+import {Repos} from '../../../../types/common';
+import {getGithubUrl, getReadmeUrl, mappingOptions} from '../../utils';
+
+const getterOptions = {repoName: Repos.Uikit, componentName: 'Accordion'};
+
+export const accordionConfig = {
+    id: 'accordion',
+    title: 'Accordion',
+    githubUrl: getGithubUrl(getterOptions),
+    isSupportRTL: true,
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() =>
+            import('./AccordionComponent').then((mod) => mod.AccordionComponent),
+        ),
+        props: {
+            view: {
+                type: 'select',
+                values: mappingOptions(['solid', 'top-bottom']),
+                defaultValue: 'solid',
+            },
+            size: {
+                type: 'radioButton',
+                values: mappingOptions(['m', 'l', 'xl']),
+                defaultValue: 'm',
+            },
+            arrowPosition: {
+                type: 'radioButton',
+                values: mappingOptions(['start', 'end']),
+                defaultValue: 'end',
+            },
+            multiple: {
+                type: 'switch',
+                defaultValue: false,
+            },
+        },
+    },
+};

src/content/components/uikit/Accordion/index.ts

@@ -3,6 +3,7 @@ import {sortBy} from 'lodash';
 import {getLibConfigById} from '../../../utils';
 import {Component, Lib} from '../types';
 
+import {accordionConfig} from './Accordion';
 import {alertConfig} from './Alert';
 import {arrowToggleConfig} from './ArrowToggle';
 import {avatarConfig} from './Avatar';
@@ -48,6 +49,7 @@ import {userLabelConfig} from './UserLabel';
 const config = getLibConfigById('uikit');
 
 const uikitComponents: Component[] = [
+    accordionConfig,
     alertConfig,
     arrowToggleConfig,
     avatarConfig,