fix: Interactive demo in docs (#6508)

VKCOM · Feb 5, 2024 · 6b803ec · 6b803ec
1 parent 7a40f53
commit 6b803ec
Show file tree

Hide file tree

Showing 38 changed files with 398 additions and 237 deletions.
diff --git a/packages/vkui/src/components/Badge/Readme.md b/packages/vkui/src/components/Badge/Readme.md
@@ -5,43 +5,66 @@
 Чтобы `Badge` был доступным для ассистивных технологий, у него должен быть текст, который сможет прочитать скринридер. Этот текст можно передать в `children`.
 
 ```jsx
-<View activePanel="badge">
-  <Panel id="badge">
-    <PanelHeader>Бейдж</PanelHeader>
-
-    <Group header={<Header mode="secondary">В пунктах меню</Header>}>
-      <Cell expandable before={<Icon28Notifications />} badgeAfterTitle={<Badge>Есть новые</Badge>}>
-        Уведомления
-      </Cell>
-    </Group>
-
-    <Group header={<Header mode="secondary">В переключателях</Header>}>
-      <Tabs>
-        <TabsItem after={<Badge mode="prominent">Есть новые</Badge>}>Диалоги</TabsItem>
-        <TabsItem selected after={<Badge mode="prominent">Есть новые</Badge>}>
-          Сообщения
-        </TabsItem>
-      </Tabs>
-    </Group>
-
-    <Tabbar>
-      <TabbarItem text="Новости">
-        <Icon28NewsfeedOutline />
-      </TabbarItem>
-      <TabbarItem
-        indicator={
-          <Counter size="s" mode="prominent">
-            12
-          </Counter>
-        }
-        text="Сообщения"
-      >
-        <Icon28MessageOutline />
-      </TabbarItem>
-      <TabbarItem indicator={<Badge mode="prominent">Новый раздел</Badge>} text="Клипы">
-        <Icon28ClipOutline />
-      </TabbarItem>
-    </Tabbar>
-  </Panel>
-</View>
+const Example = () => {
+  const [tab, setTab] = React.useState('dialogs');
+
+  return (
+    <View activePanel="badge">
+      <Panel id="badge">
+        <PanelHeader>Бейдж</PanelHeader>
+
+        <Group header={<Header mode="secondary">В пунктах меню</Header>}>
+          <Cell
+            expandable
+            before={<Icon28Notifications />}
+            badgeAfterTitle={<Badge>Есть новые</Badge>}
+            onClick={noop}
+          >
+            Уведомления
+          </Cell>
+        </Group>
+
+        <Group header={<Header mode="secondary">В переключателях</Header>}>
+          <Tabs>
+            <TabsItem
+              selected={tab === 'dialogs'}
+              onClick={() => setTab('dialogs')}
+              after={<Badge mode="prominent">Есть новые</Badge>}
+            >
+              Диалоги
+            </TabsItem>
+            <TabsItem
+              selected={tab === 'messages'}
+              onClick={() => setTab('messages')}
+              after={<Badge mode="prominent">Есть новые</Badge>}
+            >
+              Сообщения
+            </TabsItem>
+          </Tabs>
+        </Group>
+
+        <Tabbar>
+          <TabbarItem text="Новости">
+            <Icon28NewsfeedOutline />
+          </TabbarItem>
+          <TabbarItem
+            indicator={
+              <Counter size="s" mode="prominent">
+                12
+              </Counter>
+            }
+            text="Сообщения"
+          >
+            <Icon28MessageOutline />
+          </TabbarItem>
+          <TabbarItem indicator={<Badge mode="prominent">Новый раздел</Badge>} text="Клипы">
+            <Icon28ClipOutline />
+          </TabbarItem>
+        </Tabbar>
+      </Panel>
+    </View>
+  );
+};
+
+<Example />;
 ```
diff --git a/packages/vkui/src/components/Banner/Readme.md b/packages/vkui/src/components/Banner/Readme.md
@@ -18,6 +18,7 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
           header="Баста в Ледовом"
           subheader="Большой концерт"
           asideMode="dismiss"
+          onDismiss={noop}
           actions={<Button>Подробнее</Button>}
         />
       </Div>
@@ -46,6 +47,7 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
           header="Подписка за рубль!"
           subheader="Предложение действует только до конца февраля"
           asideMode="dismiss"
+          onDismiss={noop}
           actions={
             <ButtonGroup mode="vertical" gap="m">
               <Button mode="primary">Попробовать сейчас</Button>
@@ -61,6 +63,7 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
           header="Сегодня день рождения Михаила Лихачёва"
           subheader="Подарите подарок"
           asideMode="dismiss"
+          onDismiss={noop}
           actions={<Button mode="primary">Подарить</Button>}
         />
       </Div>
@@ -145,6 +148,7 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
             </span>
           }
           asideMode="dismiss"
+          onDismiss={noop}
           actions={
             <Button mode="primary" size="m">
               Подробнее
@@ -179,6 +183,7 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
             />
           }
           asideMode="dismiss"
+          onDismiss={noop}
           actions={
             <Button appearance="overlay" size="m">
               Подробнее
@@ -212,6 +217,7 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
             />
           }
           asideMode="dismiss"
+          onDismiss={noop}
           actions={
             <Button appearance="overlay" size="m">
               Подробнее

diff --git a/packages/vkui/src/components/Cell/Cell.stories.tsx b/packages/vkui/src/components/Cell/Cell.stories.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
+import { noop } from '@vkontakte/vkjs';
 import { withSinglePanel, withVKUILayout } from '../../storybook/VKUIDecorators';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
 import { getAvatarUrl } from '../../testing/mock';
@@ -12,6 +13,9 @@ const story: Meta<CellProps> = {
   component: Cell,
   parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
   decorators: [withSinglePanel, withVKUILayout],
+  args: {
+    onClick: noop,
+  },
 };
 
 export default story;

diff --git a/packages/vkui/src/components/CellButton/CellButton.stories.tsx b/packages/vkui/src/components/CellButton/CellButton.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { Icon28AddOutline } from '@vkontakte/icons';
+import { noop } from '@vkontakte/vkjs';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
 import { CellButton, CellButtonProps } from './CellButton';
 
@@ -18,5 +19,6 @@ export const Playground: Story = {
   args: {
     children: 'Создать беседу',
     before: <Icon28AddOutline />,
+    onClick: noop,
   },
 };
diff --git a/packages/vkui/src/components/CellButton/Readme.md b/packages/vkui/src/components/CellButton/Readme.md
@@ -20,7 +20,7 @@
       <CellButton
         onClick={() => {}}
         before={
-          <Avatar withBorder={false} size={40}>
+          <Avatar noBorder size={40}>
             <Icon24Add />
           </Avatar>
         }
@@ -30,7 +30,7 @@
       <CellButton
         onClick={() => {}}
         before={
-          <Avatar withBorder={false} size={48}>
+          <Avatar noBorder size={48}>
             <Icon28AddOutline />
           </Avatar>
         }
@@ -40,7 +40,7 @@
       <CellButton
         onClick={() => {}}
         before={
-          <Image withBorder={false} size={72}>
+          <Image noBorder size={72}>
             <Icon28AddOutline />
           </Image>
         }

diff --git a/packages/vkui/src/components/ContentCard/Readme.md b/packages/vkui/src/components/ContentCard/Readme.md
@@ -6,8 +6,8 @@
   - `mode`,
   - `getRootRef`,
   - `style`,
-  - `className`;
-- `img`
+  - `className`,
+  - `img`,
   - `getRef`,
   - `src`,
   - `srcSet`,
@@ -53,7 +53,6 @@ const Example = () => {
               maxHeight={150}
             />
             <ContentCard
-              disabled
               src="https://images.unsplash.com/photo-1603928726698-a015a1015d0e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80"
               alt="Picture of person's left hand with pink paint"
               subtitle="unsplash"