@vkontakte/vkui 4.28.0 → 4.29.1

package/src/components/Badge/Badge.css

@@ -0,0 +1,21 @@
+.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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,55 @@
+Индикатор, с помощью которого можно привлечь внимание пользователя к определенному разделу.
+
+```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

@@ -0,0 +1,154 @@
+.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

@@ -0,0 +1,221 @@
+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}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
+      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

@@ -0,0 +1,215 @@
+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>;
+```