@vkontakte/vkui 4.22.1 → 4.25.0

package/src/components/Badge/Badge.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { usePlatform } from '../../hooks/usePlatform';
-import './Badge.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./Badge.css";
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
-  mode: 'new' | 'prominent';
+  mode: "new" | "prominent";
 }
 
 export const Badge: React.FunctionComponent<BadgeProps> = ({
@@ -16,15 +16,12 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
 
   return (
     <span
-      vkuiClass={classNames(
-        getClassName('Badge', platform),
-        `Badge--${mode}`,
-      )}
-      {...restProps}>
-    </span>
+      vkuiClass={classNames(getClassName("Badge", platform), `Badge--${mode}`)}
+      {...restProps}
+    ></span>
   );
 };
 
 Badge.defaultProps = {
-  mode: 'new',
+  mode: "new",
 };

package/src/components/Badge/Readme.md

@@ -6,15 +6,26 @@
     <PanelHeader>Бейдж</PanelHeader>
 
     <Group header={<Header mode="secondary">В пунктах меню</Header>}>
-      <Cell expandable before={<Icon28Notifications />} badge={<Badge aria-label="Есть новые" />}>
+      <Cell
+        expandable
+        before={<Icon28Notifications />}
+        badge={<Badge aria-label="Есть новые" />}
+      >
         Уведомления
       </Cell>
     </Group>
 
     <Group header={<Header mode="secondary">В переключателях</Header>}>
       <Tabs>
-        <TabsItem after={<Badge mode="prominent" aria-label="Есть новые" />}>Диалоги</TabsItem>
-        <TabsItem selected after={<Badge mode="prominent" aria-label="Есть новые" />}>Сообщения</TabsItem>
+        <TabsItem after={<Badge mode="prominent" aria-label="Есть новые" />}>
+          Диалоги
+        </TabsItem>
+        <TabsItem
+          selected
+          after={<Badge mode="prominent" aria-label="Есть новые" />}
+        >
+          Сообщения
+        </TabsItem>
       </Tabs>
     </Group>
 
@@ -22,10 +33,20 @@
       <TabbarItem text="Новости">
         <Icon28NewsfeedOutline />
       </TabbarItem>
-      <TabbarItem indicator={<Counter size="s" mode="prominent">12</Counter>} text="Сообщения">
+      <TabbarItem
+        indicator={
+          <Counter size="s" mode="prominent">
+            12
+          </Counter>
+        }
+        text="Сообщения"
+      >
         <Icon28MessageOutline />
       </TabbarItem>
-      <TabbarItem indicator={<Badge mode="prominent" aria-label="Новый раздел" />} text="Клипы">
+      <TabbarItem
+        indicator={<Badge mode="prominent" aria-label="Новый раздел" />}
+        text="Клипы"
+      >
         <Icon28ClipOutline />
       </TabbarItem>
     </Tabbar>

package/src/components/Banner/Banner.css

@@ -17,7 +17,7 @@
 }
 
 .Banner__in::before {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   top: 0;
@@ -115,7 +115,7 @@
 
 .Banner--inverted .Banner__subheader {
   color: var(--white);
-  opacity: .72;
+  opacity: 0.72;
 }
 
 /**

package/src/components/Banner/Banner.tsx

@@ -1,32 +1,37 @@
-import * as React from 'react';
-import { HasComponent } from '../../types';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { usePlatform } from '../../hooks/usePlatform';
-import { ANDROID, IOS, VKCOM } from '../../lib/platform';
-import { hasReactNode } from '../../lib/utils';
-import { Icon24Chevron, Icon24DismissSubstract, Icon24DismissDark, Icon24Cancel } from '@vkontakte/icons';
-import Tappable from '../Tappable/Tappable';
-import IconButton from '../IconButton/IconButton';
-import Headline from '../Typography/Headline/Headline';
-import Subhead from '../Typography/Subhead/Subhead';
-import Text from '../Typography/Text/Text';
-import Title from '../Typography/Title/Title';
-import './Banner.css';
+import * as React from "react";
+import { HasComponent } from "../../types";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { ANDROID, IOS, VKCOM } from "../../lib/platform";
+import { hasReactNode } from "../../lib/utils";
+import {
+  Icon24Chevron,
+  Icon24DismissSubstract,
+  Icon24DismissDark,
+  Icon24Cancel,
+} from "@vkontakte/icons";
+import Tappable from "../Tappable/Tappable";
+import IconButton from "../IconButton/IconButton";
+import Headline from "../Typography/Headline/Headline";
+import Subhead from "../Typography/Subhead/Subhead";
+import Text from "../Typography/Text/Text";
+import Title from "../Typography/Title/Title";
+import "./Banner.css";
 
 export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Тип баннера.
    */
-  mode?: 'tint' | 'image';
-  size?: 's' | 'm';
+  mode?: "tint" | "image";
+  size?: "s" | "m";
   /**
    * Тип действия в правой части баннера.
    *
    * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.
    * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.
    */
-  asideMode?: 'dismiss' | 'expand';
+  asideMode?: "dismiss" | "expand";
   /**
    * Срабатывает при клике на иконку крестика при `asideMode="dismiss"`.
    */
@@ -60,7 +65,7 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
    * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.
    * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.
    */
-  imageTheme?: 'light' | 'dark';
+  imageTheme?: "light" | "dark";
   /**
    * При использовании `mode="image"`.
    *
@@ -76,25 +81,46 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
   actions?: React.ReactNode;
 }
 
-type BannerTypographyProps = Pick<BannerProps, 'size'> & HasComponent;
+type BannerTypographyProps = Pick<BannerProps, "size"> & HasComponent;
 
-const BannerHeader: React.FC<BannerTypographyProps> = ({ size, ...restProps }) => {
-  return size === 'm'
-    ? <Title level="2" weight="medium" {...restProps} />
-    : <Headline weight="medium" {...restProps} />;
+const BannerHeader: React.FC<BannerTypographyProps> = ({
+  size,
+  ...restProps
+}) => {
+  return size === "m" ? (
+    <Title level="2" weight="medium" {...restProps} />
+  ) : (
+    <Headline weight="medium" {...restProps} />
+  );
 };
 
-const BannerSubheader: React.FC<BannerTypographyProps> = ({ size, ...restProps }) => {
-  return size === 'm'
-    ? <Text weight="regular" {...restProps} />
-    : <Subhead weight="regular" {...restProps} />;
+const BannerSubheader: React.FC<BannerTypographyProps> = ({
+  size,
+  ...restProps
+}) => {
+  return size === "m" ? (
+    <Text weight="regular" {...restProps} />
+  ) : (
+    <Subhead weight="regular" {...restProps} />
+  );
 };
 
 const Banner: React.FC<BannerProps> = (props: BannerProps) => {
   const platform = usePlatform();
   const {
-    mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions,
-    onDismiss, dismissLabel,
+    mode,
+    imageTheme,
+    size,
+    before,
+    asideMode,
+    header,
+    subheader,
+    text,
+    children,
+    background,
+    actions,
+    onDismiss,
+    dismissLabel,
     ...restProps
   } = props;
 
@@ -102,36 +128,52 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
     <section
       {...restProps}
       vkuiClass={classNames(
-        getClassName('Banner', platform),
+        getClassName("Banner", platform),
         `Banner--md-${mode}`,
         `Banner--sz-${size}`,
         {
-          'Banner--inverted': mode === 'image' && imageTheme === 'dark',
-        },
+          "Banner--inverted": mode === "image" && imageTheme === "dark",
+        }
       )}
     >
       <Tappable
         vkuiClass="Banner__in"
-        activeMode={platform === IOS ? 'opacity' : 'background'}
-        disabled={asideMode !== 'expand'}
-        role={asideMode === 'expand' ? 'button' : null}
+        activeMode={platform === IOS ? "opacity" : "background"}
+        disabled={asideMode !== "expand"}
+        role={asideMode === "expand" ? "button" : undefined}
       >
-        {mode === 'image' && background &&
+        {mode === "image" && background && (
           <div aria-hidden="true" vkuiClass="Banner__bg">
             {background}
           </div>
-        }
+        )}
 
         {before && <div vkuiClass="Banner__before">{before}</div>}
 
         <div vkuiClass="Banner__content">
           {hasReactNode(header) && (
-            <BannerHeader size={size} Component="span" vkuiClass="Banner__header">{header}</BannerHeader>
+            <BannerHeader
+              size={size}
+              Component="span"
+              vkuiClass="Banner__header"
+            >
+              {header}
+            </BannerHeader>
           )}
           {hasReactNode(subheader) && (
-            <BannerSubheader Component="span" size={size} vkuiClass="Banner__subheader">{subheader}</BannerSubheader>
+            <BannerSubheader
+              Component="span"
+              size={size}
+              vkuiClass="Banner__subheader"
+            >
+              {subheader}
+            </BannerSubheader>
+          )}
+          {hasReactNode(text) && (
+            <Text weight="regular" vkuiClass="Banner__text">
+              {text}
+            </Text>
           )}
-          {hasReactNode(text) && <Text weight="regular" vkuiClass="Banner__text">{text}</Text>}
           {hasReactNode(actions) && React.Children.count(actions) > 0 && (
             <div vkuiClass="Banner__actions">{actions}</div>
           )}
@@ -139,9 +181,9 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
 
         {!!asideMode && (
           <div vkuiClass="Banner__aside">
-            {asideMode === 'expand' && <Icon24Chevron />}
+            {asideMode === "expand" && <Icon24Chevron />}
 
-            {asideMode === 'dismiss' && (
+            {asideMode === "dismiss" && (
               <IconButton
                 aria-label={dismissLabel}
                 vkuiClass="Banner__dismiss"
@@ -149,8 +191,15 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
                 hoverMode="opacity"
                 hasActive={false}
               >
-                {(platform === ANDROID || platform === VKCOM) && <Icon24Cancel />}
-                {platform === IOS && (mode === 'image' ? <Icon24DismissDark /> : <Icon24DismissSubstract />)}
+                {(platform === ANDROID || platform === VKCOM) && (
+                  <Icon24Cancel />
+                )}
+                {platform === IOS &&
+                  (mode === "image" ? (
+                    <Icon24DismissDark />
+                  ) : (
+                    <Icon24DismissSubstract />
+                  ))}
               </IconButton>
             )}
           </div>
@@ -161,10 +210,11 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
 };
 
 Banner.defaultProps = {
-  dismissLabel: 'Скрыть',
-  mode: 'tint',
-  size: 's',
-  imageTheme: 'dark',
+  dismissLabel: "Скрыть",
+  mode: "tint",
+  size: "s",
+  imageTheme: "dark",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Banner;

package/src/components/Banner/Readme.md

@@ -1,17 +1,22 @@
 Banner
 
 ```jsx
-const musicGradient = 'linear-gradient(135deg, #ADE6FF 0%, #ABE3FF 1%, #A7DCFF 3%, #A0CFFF 7%, #97BCFF 12%, #8DA4FF 19%, #8285FF 26%, #8B76FF 34%, #9C6AFF 43%, #B05FFF 52%, #C655FF 62%, #DB4CFF 71%, #EE45FF 81%, #FA41FF 91%, #FF3FFF 100%)';
-const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
+const musicGradient =
+  "linear-gradient(135deg, #ADE6FF 0%, #ABE3FF 1%, #A7DCFF 3%, #A0CFFF 7%, #97BCFF 12%, #8DA4FF 19%, #8285FF 26%, #8B76FF 34%, #9C6AFF 43%, #B05FFF 52%, #C655FF 62%, #DB4CFF 71%, #EE45FF 81%, #FA41FF 91%, #FF3FFF 100%)";
+const warningGradient = "linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)";
 
 <View activePanel="banner">
   <Panel id="banner">
     <PanelHeader>Banner</PanelHeader>
-    <Group
-      header={<Header>Content: tint, size: regular</Header>}
-    >
+    <Group header={<Header>Content: tint, size: regular</Header>}>
       <Banner
-        before={<Avatar size={96} mode="image" src="https://sun9-63.userapi.com/yOEQYPHrNHjZEoanbqPb65HPl5iojmiLgLzfGA/W3geVMMt8TI.jpg" />}
+        before={
+          <Avatar
+            size={96}
+            mode="image"
+            src="https://sun9-63.userapi.com/yOEQYPHrNHjZEoanbqPb65HPl5iojmiLgLzfGA/W3geVMMt8TI.jpg"
+          />
+        }
         header="Баста в Ледовом"
         subheader="Большой концерт"
         asideMode="dismiss"
@@ -19,27 +24,39 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
       />
 
       <Banner
-        before={<Avatar size={96} mode="image" src="https://sun9-32.userapi.com/uFzLOK55iY7pC0DHjneEdP9G6gXcXi2Mxj9wVA/wnTmzh_blNM.jpg" />}
+        before={
+          <Avatar
+            size={96}
+            mode="image"
+            src="https://sun9-32.userapi.com/uFzLOK55iY7pC0DHjneEdP9G6gXcXi2Mxj9wVA/wnTmzh_blNM.jpg"
+          />
+        }
         header="Для Вас"
         subheader="Обновлено сегодня"
         actions={<Button before={<Icon24Play />}>Слушать</Button>}
       />
 
       <Banner
-        before={<Avatar mode="image" style={{ backgroundImage: musicGradient }}><Icon28MusicOutline fill="#fff" /></Avatar>}
+        before={
+          <Avatar mode="image" style={{ backgroundImage: musicGradient }}>
+            <Icon28MusicOutline fill="#fff" />
+          </Avatar>
+        }
         header="Подписка за рубль!"
         subheader="Предложение действует только до конца февраля"
         asideMode="dismiss"
         actions={
           <React.Fragment>
             <Button mode="primary">Подробнее</Button>
-            <Button mode="tertiary" hasHover={false}>Напомнить позже</Button>
+            <Button mode="tertiary" hasHover={false}>
+              Напомнить позже
+            </Button>
           </React.Fragment>
         }
       />
 
       <Banner
-        before={<Avatar size={48} src={getAvatarUrl('user_lihachyov')} />}
+        before={<Avatar size={48} src={getAvatarUrl("user_lihachyov")} />}
         header="Сегодня день рождения Михаила Лихачёва"
         subheader="Подарите подарок"
         asideMode="dismiss"
@@ -49,26 +66,37 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
       <Banner
         before={
           <Avatar size={28} style={{ backgroundImage: warningGradient }}>
-            <span style={{ color: '#fff' }}>!</span>
+            <span style={{ color: "#fff" }}>!</span>
           </Avatar>
         }
         header="Телефон ожидает подтверждения"
         subheader={
           <React.Fragment>
-            Новый номер +7 ••• ••• •• 96 будет сохранён через семь дней.<br />
-            <Link>Ускорьте процесс</Link>, если у Вас есть<br />доступ к старому номеру.
+            Новый номер +7 ••• ••• •• 96 будет сохранён через семь дней.
+            <br />
+            <Link>Ускорьте процесс</Link>, если у Вас есть
+            <br />
+            доступ к старому номеру.
           </React.Fragment>
         }
-        actions={<Button mode="tertiary" hasHover={false}>Отменить заявку</Button>}
+        actions={
+          <Button mode="tertiary" hasHover={false}>
+            Отменить заявку
+          </Button>
+        }
       />
 
       <Banner
-        before={<Avatar src="https://sun9-7.userapi.com/q9qBUh4kGND1pTUytY4LwljtRLWoCXaIzN7C2A/52lM85R5kus.jpg" />}
+        before={
+          <Avatar src="https://sun9-7.userapi.com/q9qBUh4kGND1pTUytY4LwljtRLWoCXaIzN7C2A/52lM85R5kus.jpg" />
+        }
         text="Хотите, чтобы вам меньше мешали? Включите режим «невидимка»!"
         actions={
           <React.Fragment>
             <Button>Включить</Button>
-            <Button mode="tertiary" hasHover={false}>Подробнее</Button>
+            <Button mode="tertiary" hasHover={false}>
+              Подробнее
+            </Button>
           </React.Fragment>
         }
       />
@@ -77,13 +105,11 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
         header="Больше интересных подкастов в каталоге"
         subheader="Найдите интересующие именно Вас подкасты!"
         asideMode="expand"
-        onClick={() => console.log('[Podcast banner] onClick')}
+        onClick={() => console.log("[Podcast banner] onClick")}
       />
     </Group>
 
-    <Group
-      header={<Header>Mode: image, size: regular</Header>}
-    >
+    <Group header={<Header>Mode: image, size: regular</Header>}>
       <Banner
         mode="image"
         header="Мои достижения"
@@ -91,72 +117,99 @@ const warningGradient = 'linear-gradient(90deg, #ffb73d 0%, #ffa000 100%)';
         background={
           <div
             style={{
-              backgroundColor: '#65c063',
-              backgroundImage: 'url(https://sun9-59.userapi.com/7J6qHkTa_P8VKRTO5gkh6MizcCEefz04Y0gDmA/y6dSjdtPU4U.jpg)',
-              backgroundPosition: 'right bottom',
+              backgroundColor: "#65c063",
+              backgroundImage:
+                "url(https://sun9-59.userapi.com/7J6qHkTa_P8VKRTO5gkh6MizcCEefz04Y0gDmA/y6dSjdtPU4U.jpg)",
+              backgroundPosition: "right bottom",
               backgroundSize: 320,
-              backgroundRepeat: 'no-repeat',
+              backgroundRepeat: "no-repeat",
             }}
           />
         }
         actions={<Button mode="overlay_primary">Подробнее</Button>}
       />
     </Group>
-    <Group
-      header={<Header>Content: tint, size: medium</Header>}
-    >
+    <Group header={<Header>Content: tint, size: medium</Header>}>
       <Banner
         size="m"
         header="Реклама сообщества"
-        subheader={<span>Привлекайте больше людей<br />в Ваше сообщество</span>}
+        subheader={
+          <span>
+            Привлекайте больше людей
+            <br />в Ваше сообщество
+          </span>
+        }
         asideMode="dismiss"
-        actions={<Button mode="primary" size="m">Подробнее</Button>}
+        actions={
+          <Button mode="primary" size="m">
+            Подробнее
+          </Button>
+        }
       />
     </Group>
 
-    <Group
-      header={<Header>Content: image, size: medium</Header>}
-    >
+    <Group header={<Header>Content: image, size: medium</Header>}>
       <Banner
         mode="image"
         size="m"
         header="Реклама в сообществе"
-        subheader={<span>Привлекайте больше людей<br />в Ваше сообщество</span>}
+        subheader={
+          <span>
+            Привлекайте больше людей
+            <br />в Ваше сообщество
+          </span>
+        }
         background={
           <div
             style={{
-              backgroundColor: '#5b9be6',
-              backgroundImage: 'url(https://sun9-31.userapi.com/PQ4UCzqE_jue9hAINefBMorYCdfGXvcuV5nSjA/eYugcFYzdW8.jpg)',
-              backgroundPosition: 'right bottom',
-              backgroundSize: '102%',
-              backgroundRepeat: 'no-repeat',
+              backgroundColor: "#5b9be6",
+              backgroundImage:
+                "url(https://sun9-31.userapi.com/PQ4UCzqE_jue9hAINefBMorYCdfGXvcuV5nSjA/eYugcFYzdW8.jpg)",
+              backgroundPosition: "right bottom",
+              backgroundSize: "102%",
+              backgroundRepeat: "no-repeat",
             }}
           />
         }
         asideMode="dismiss"
-        actions={<Button mode="overlay_primary" size="m">Подробнее</Button>}
+        actions={
+          <Button mode="overlay_primary" size="m">
+            Подробнее
+          </Button>
+        }
       />
 
       <Banner
         mode="image"
         size="m"
-        header={<span>Баста в Ледовом,<br />большой концерт</span>}
+        header={
+          <span>
+            Баста в Ледовом,
+            <br />
+            большой концерт
+          </span>
+        }
         subheader="Москва · 12 декабря"
         background={
           <div
             style={{
-              backgroundColor: '#000',
-              backgroundImage: 'url(https://sun9-53.userapi.com/m-ygfKiLKLkEMAQVTToO2l9LyC6GgqWoGXpw8A/-zm6_XLECTU.jpg)',
-              backgroundPosition: 'right bottom',
+              backgroundColor: "#000",
+              backgroundImage:
+                "url(https://sun9-53.userapi.com/m-ygfKiLKLkEMAQVTToO2l9LyC6GgqWoGXpw8A/-zm6_XLECTU.jpg)",
+              backgroundPosition: "right bottom",
               backgroundSize: 340,
-              backgroundRepeat: 'no-repeat',
+              backgroundRepeat: "no-repeat",
             }}
           />
         }
         asideMode="dismiss"
-        actions={<Button mode="overlay_primary" size="m">Подробнее</Button>}
+        actions={
+          <Button mode="overlay_primary" size="m">
+            Подробнее
+          </Button>
+        }
       />
     </Group>
   </Panel>
-</View>
+</View>;
 ```