@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/Badge/Badge.css

@@ -1,21 +0,0 @@
-.Badge {
-  display: block;
-  flex-grow: 0;
-  flex-shrink: 0;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-}
-
-.Badge--new {
-  background-color: var(--blue_200);
-}
-
-.Badge--prominent {
-  background-color: var(--counter_prominent_background);
-}
-
-.TabsItem__after .Badge {
-  transform: translateY(-2px);
-  margin-left: 6px;
-}

package/src/components/Badge/Badge.tsx

@@ -1,27 +0,0 @@
-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";
-}
-
-export const Badge: React.FunctionComponent<BadgeProps> = ({
-  mode,
-  ...restProps
-}: BadgeProps) => {
-  const platform = usePlatform();
-
-  return (
-    <span
-      vkuiClass={classNames(getClassName("Badge", platform), `Badge--${mode}`)}
-      {...restProps}
-    ></span>
-  );
-};
-
-Badge.defaultProps = {
-  mode: "new",
-};

package/src/components/Badge/Readme.md

@@ -1,55 +0,0 @@
-Индикатор, с помощью которого можно привлечь внимание пользователя к определенному разделу.
-
-```jsx
-<View activePanel="badge">
-  <Panel id="badge">
-    <PanelHeader>Бейдж</PanelHeader>
-
-    <Group header={<Header mode="secondary">В пунктах меню</Header>}>
-      <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>
-      </Tabs>
-    </Group>
-
-    <Tabbar>
-      <TabbarItem text="Новости">
-        <Icon28NewsfeedOutline />
-      </TabbarItem>
-      <TabbarItem
-        indicator={
-          <Counter size="s" mode="prominent">
-            12
-          </Counter>
-        }
-        text="Сообщения"
-      >
-        <Icon28MessageOutline />
-      </TabbarItem>
-      <TabbarItem
-        indicator={<Badge mode="prominent" aria-label="Новый раздел" />}
-        text="Клипы"
-      >
-        <Icon28ClipOutline />
-      </TabbarItem>
-    </Tabbar>
-  </Panel>
-</View>
-```

package/src/components/Banner/Banner.css

@@ -1,154 +0,0 @@
-.Banner {
-  margin: 12px 0;
-  padding: 0 16px;
-  color: var(--text_primary);
-}
-
-.Banner__in {
-  position: relative;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: stretch;
-  padding: 12px;
-  padding-left: 16px;
-  background-color: var(--content_tint_background);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.Banner__in::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  border: var(--thin-border) solid var(--image_border);
-  border-radius: inherit;
-  pointer-events: none;
-  box-sizing: border-box;
-  z-index: 2;
-}
-
-.Banner__before {
-  position: relative;
-  margin-right: 12px;
-  z-index: 2;
-}
-
-.Banner__content {
-  position: relative;
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  min-width: 0;
-  z-index: 2;
-}
-
-.Banner__header {
-  display: block;
-}
-
-.Banner__subheader {
-  display: block;
-  color: var(--text_subhead);
-}
-
-.Banner__bg {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1;
-}
-
-.Banner__bg,
-.Banner__bg > * {
-  width: 100%;
-  height: 100%;
-}
-
-.Banner__aside {
-  display: flex;
-  flex-flow: row nowrap;
-  align-content: center;
-  align-items: center;
-  justify-content: flex-end;
-  width: 28px;
-  color: var(--icon_tertiary);
-}
-
-.Banner__dismiss {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  display: flex;
-  flex-flow: row nowrap;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  color: var(--icon_secondary);
-  z-index: 3;
-}
-
-.Banner__actions {
-  margin-bottom: -6px;
-}
-
-.Banner__subheader:not(:first-child),
-.Banner__text:not(:first-child) {
-  margin-top: 2px;
-}
-
-/**
- * Mode "image"
- */
-.Banner--md-image .Banner__in {
-  background-color: var(--content_tint_background);
-}
-
-.Banner--md-image .Banner__dismiss,
-.Banner--inverted {
-  color: var(--white);
-}
-
-.Banner--inverted .Banner__subheader {
-  color: var(--white);
-  opacity: 0.72;
-}
-
-/**
- * Size "s"
- */
-.Banner--sz-s .Banner__before {
-  margin-left: -4px;
-}
-
-/**
- * Size "m"
- */
-.Banner--sz-m .Banner__in {
-  padding: 16px;
-}
-
-.Banner--sz-m .Banner__subheader:not(:first-child),
-.Banner--sz-m .Banner__text:not(:first-child) {
-  margin-top: 4px;
-}
-
-/**
- * iOS
- */
-.Banner--ios {
-  padding: 0 12px;
-}
-
-.Banner--ios .Banner__in {
-  border-radius: 10px;
-}
-
-.Banner--ios .Banner__dismiss,
-.Banner--ios.Banner--md-image .Banner__dismiss {
-  color: var(--icon_tertiary);
-}

package/src/components/Banner/Banner.tsx

@@ -1,220 +0,0 @@
-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";
-  /**
-   * Тип действия в правой части баннера.
-   *
-   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.
-   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.
-   */
-  asideMode?: "dismiss" | "expand";
-  /**
-   * Срабатывает при клике на иконку крестика при `asideMode="dismiss"`.
-   */
-  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
-  /**
-   * `aria-label` для кнопки при `asideMode="dismiss". Необходим, чтобы кнопка была доступной.
-   */
-  dismissLabel?: string;
-  /**
-   * Содержимое, отображаемое в левой части баннера.
-   */
-  before?: React.ReactNode;
-  /**
-   * Заголовок. <br />
-   * При использовании этого свойства рекомендуется не указывать `text`.
-   */
-  header?: React.ReactNode;
-  /**
-   * Подзаголовок. <br />
-   * При использовании этого свойства рекомендуется не указывать `text`.
-   */
-  subheader?: React.ReactNode;
-  /**
-   * Текст баннера. <br />
-   * Это свойство следует использовать без указания `header` и `subheader`.
-   */
-  text?: React.ReactNode;
-  /**
-   * При использовании `mode="image"`.
-   *
-   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.
-   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.
-   */
-  imageTheme?: "light" | "dark";
-  /**
-   * При использовании `mode="image"`.
-   *
-   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.
-   */
-  background?: React.ReactNode;
-  /**
-   * Кнопки, отображаемые в баннере.
-   *
-   * - В режиме `tint` или в `image` со светлым фоном рекомендуется использовать только `<Button mode="primary" />` или `<Button mode="tertiary" hasHover={false} />`.
-   * - В режиме `image` с тёмным фоном – `<Button mode="overlay_primary" />`.
-   */
-  actions?: React.ReactNode;
-}
-
-type BannerTypographyProps = Pick<BannerProps, "size"> & HasComponent;
-
-const BannerHeader: React.FC<BannerTypographyProps> = ({
-  size,
-  ...restProps
-}) => {
-  return size === "m" ? (
-    <Title level="2" weight="2" {...restProps} />
-  ) : (
-    <Headline weight="medium" {...restProps} />
-  );
-};
-
-const BannerSubheader: React.FC<BannerTypographyProps> = ({
-  size,
-  ...restProps
-}) => {
-  return size === "m" ? (
-    <Text weight="regular" {...restProps} />
-  ) : (
-    <Subhead {...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,
-    ...restProps
-  } = props;
-
-  return (
-    <section
-      {...restProps}
-      vkuiClass={classNames(
-        getClassName("Banner", platform),
-        `Banner--md-${mode}`,
-        `Banner--sz-${size}`,
-        {
-          "Banner--inverted": mode === "image" && imageTheme === "dark",
-        }
-      )}
-    >
-      <Tappable
-        vkuiClass="Banner__in"
-        activeMode={platform === IOS ? "opacity" : "background"}
-        disabled={asideMode !== "expand"}
-        role={asideMode === "expand" ? "button" : undefined}
-      >
-        {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>
-          )}
-          {hasReactNode(subheader) && (
-            <BannerSubheader
-              Component="span"
-              size={size}
-              vkuiClass="Banner__subheader"
-            >
-              {subheader}
-            </BannerSubheader>
-          )}
-          {hasReactNode(text) && (
-            <Text weight="regular" vkuiClass="Banner__text">
-              {text}
-            </Text>
-          )}
-          {hasReactNode(actions) && React.Children.count(actions) > 0 && (
-            <div vkuiClass="Banner__actions">{actions}</div>
-          )}
-        </div>
-
-        {!!asideMode && (
-          <div vkuiClass="Banner__aside">
-            {asideMode === "expand" && <Icon24Chevron />}
-
-            {asideMode === "dismiss" && (
-              <IconButton
-                aria-label={dismissLabel}
-                vkuiClass="Banner__dismiss"
-                onClick={onDismiss}
-                hoverMode="opacity"
-                hasActive={false}
-              >
-                {(platform === ANDROID || platform === VKCOM) && (
-                  <Icon24Cancel />
-                )}
-                {platform === IOS &&
-                  (mode === "image" ? (
-                    <Icon24DismissDark />
-                  ) : (
-                    <Icon24DismissSubstract />
-                  ))}
-              </IconButton>
-            )}
-          </div>
-        )}
-      </Tappable>
-    </section>
-  );
-};
-
-Banner.defaultProps = {
-  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,215 +0,0 @@
-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%)";
-
-<View activePanel="banner">
-  <Panel id="banner">
-    <PanelHeader>Banner</PanelHeader>
-    <Group header={<Header>Content: tint, size: regular</Header>}>
-      <Banner
-        before={
-          <Avatar
-            size={96}
-            mode="image"
-            src="https://sun9-63.userapi.com/yOEQYPHrNHjZEoanbqPb65HPl5iojmiLgLzfGA/W3geVMMt8TI.jpg"
-          />
-        }
-        header="Баста в Ледовом"
-        subheader="Большой концерт"
-        asideMode="dismiss"
-        actions={<Button>Подробнее</Button>}
-      />
-
-      <Banner
-        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>
-        }
-        header="Подписка за рубль!"
-        subheader="Предложение действует только до конца февраля"
-        asideMode="dismiss"
-        actions={
-          <React.Fragment>
-            <Button mode="primary">Подробнее</Button>
-            <Button mode="tertiary" hasHover={false}>
-              Напомнить позже
-            </Button>
-          </React.Fragment>
-        }
-      />
-
-      <Banner
-        before={<Avatar size={48} src={getAvatarUrl("user_lihachyov")} />}
-        header="Сегодня день рождения Михаила Лихачёва"
-        subheader="Подарите подарок"
-        asideMode="dismiss"
-        actions={<Button mode="primary">Подарить</Button>}
-      />
-
-      <Banner
-        before={
-          <Avatar size={28} style={{ backgroundImage: warningGradient }}>
-            <span style={{ color: "#fff" }}>!</span>
-          </Avatar>
-        }
-        header="Телефон ожидает подтверждения"
-        subheader={
-          <React.Fragment>
-            Новый номер +7 ••• ••• •• 96 будет сохранён через семь дней.
-            <br />
-            <Link>Ускорьте процесс</Link>, если у Вас есть
-            <br />
-            доступ к старому номеру.
-          </React.Fragment>
-        }
-        actions={
-          <Button mode="tertiary" hasHover={false}>
-            Отменить заявку
-          </Button>
-        }
-      />
-
-      <Banner
-        before={
-          <Avatar src="https://sun9-7.userapi.com/q9qBUh4kGND1pTUytY4LwljtRLWoCXaIzN7C2A/52lM85R5kus.jpg" />
-        }
-        text="Хотите, чтобы вам меньше мешали? Включите режим «невидимка»!"
-        actions={
-          <React.Fragment>
-            <Button>Включить</Button>
-            <Button mode="tertiary" hasHover={false}>
-              Подробнее
-            </Button>
-          </React.Fragment>
-        }
-      />
-
-      <Banner
-        header="Больше интересных подкастов в каталоге"
-        subheader="Найдите интересующие именно Вас подкасты!"
-        asideMode="expand"
-        onClick={() => console.log("[Podcast banner] onClick")}
-      />
-    </Group>
-
-    <Group header={<Header>Mode: image, size: regular</Header>}>
-      <Banner
-        mode="image"
-        header="Мои достижения"
-        subheader="Разблокировано 9 из 36"
-        background={
-          <div
-            style={{
-              backgroundColor: "#65c063",
-              backgroundImage:
-                "url(https://sun9-59.userapi.com/7J6qHkTa_P8VKRTO5gkh6MizcCEefz04Y0gDmA/y6dSjdtPU4U.jpg)",
-              backgroundPosition: "right bottom",
-              backgroundSize: 320,
-              backgroundRepeat: "no-repeat",
-            }}
-          />
-        }
-        actions={<Button mode="overlay_primary">Подробнее</Button>}
-      />
-    </Group>
-    <Group header={<Header>Content: tint, size: medium</Header>}>
-      <Banner
-        size="m"
-        header="Реклама сообщества"
-        subheader={
-          <span>
-            Привлекайте больше людей
-            <br />в Ваше сообщество
-          </span>
-        }
-        asideMode="dismiss"
-        actions={
-          <Button mode="primary" size="m">
-            Подробнее
-          </Button>
-        }
-      />
-    </Group>
-
-    <Group header={<Header>Content: image, size: medium</Header>}>
-      <Banner
-        mode="image"
-        size="m"
-        header="Реклама в сообществе"
-        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",
-            }}
-          />
-        }
-        asideMode="dismiss"
-        actions={
-          <Button mode="overlay_primary" size="m">
-            Подробнее
-          </Button>
-        }
-      />
-
-      <Banner
-        mode="image"
-        size="m"
-        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",
-              backgroundSize: 340,
-              backgroundRepeat: "no-repeat",
-            }}
-          />
-        }
-        asideMode="dismiss"
-        actions={
-          <Button mode="overlay_primary" size="m">
-            Подробнее
-          </Button>
-        }
-      />
-    </Group>
-  </Panel>
-</View>;
-```