@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/Header/Header.css

@@ -1,152 +0,0 @@
-.Header {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  padding: 0 16px;
-  user-select: text;
-}
-
-.Header__main {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--text_primary);
-}
-
-.Header__content {
-  display: flex;
-  align-items: baseline;
-}
-
-.Header__content-in {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.Header__content-in--multiline {
-  white-space: initial;
-  word-break: break-word;
-}
-
-.Header--multiline {
-  white-space: normal;
-}
-
-.Header__subtitle {
-  color: var(--text_secondary);
-}
-
-.Header--mode-primary .Header__content:not(:last-child) {
-  margin-top: -1px;
-}
-
-.Header--mode-secondary .Header__main,
-.Header--mode-tertiary .Header__main {
-  color: var(--text_secondary);
-}
-
-.Header--pi .Header__main {
-  color: var(--text_primary);
-}
-
-.Header__indicator {
-  color: var(--text_secondary);
-  margin-left: 6px;
-  flex-shrink: 0;
-}
-
-.Header--mode-primary .Header__indicator {
-  color: var(--text_subhead);
-}
-
-.Header:not(.Header--pi) .Header__indicator {
-  align-self: center;
-}
-
-.Header--mode-secondary .Header__indicator {
-  margin-left: 8px;
-}
-
-.Header__aside {
-  white-space: nowrap;
-  margin-left: 12px;
-}
-
-.Header__aside > .Icon {
-  position: relative;
-  color: var(--icon_secondary);
-}
-
-.Header__aside > .Icon--24 {
-  top: 3px;
-}
-
-.Header__aside > .Icon--16 {
-  top: 1px;
-}
-
-/**
- * ANDROID
- */
-.Header--android .Header__main {
-  margin: 15px 0 9px;
-}
-
-.Header--android.Header--mode-tertiary .Header__main {
-  margin-top: 11px;
-}
-
-/**
- * iOS
- */
-.Header--ios {
-  padding: 0 12px;
-}
-
-.Header--ios .Header__main {
-  margin: 13px 0 9px;
-}
-
-.Header--ios.Header--mode-secondary .Header__main {
-  margin: 14px 0 10px;
-}
-
-.Header--ios.Header--mode-tertiary .Header__main {
-  margin-top: 9px;
-}
-
-/**
- * VKCOM
- */
-.Header--vkcom {
-  height: 64px;
-  align-items: center;
-}
-
-.Header--vkcom .Header__main {
-  color: var(--text_primary);
-}
-
-.Header--vkcom.Header--mode-primary .Header__content:not(:last-child) {
-  margin-top: 0;
-}
-
-.Header--vkcom.Header--mode-secondary {
-  height: 56px;
-}
-
-.Header--vkcom.Header--mode-tertiary {
-  height: 40px;
-}
-
-/**
- * .Group
- */
-.Group--plain:not(:first-of-type) .Group__inner > .Header:first-child {
-  margin-top: -16px;
-}
-
-.Group--card > .Group__inner > .Header:not(.Header--mode-tertiary):first-child {
-  margin-top: -4px;
-}

package/src/components/Header/Header.tsx

@@ -1,174 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import { HasComponent, HasPlatform, HasRootRef } from "../../types";
-import { hasReactNode, isPrimitiveReactNode } from "../../lib/utils";
-import { Platform } from "../../lib/platform";
-import Headline from "../Typography/Headline/Headline";
-import Caption from "../Typography/Caption/Caption";
-import Title from "../Typography/Title/Title";
-import Text from "../Typography/Text/Text";
-import Subhead from "../Typography/Subhead/Subhead";
-import "./Header.css";
-
-export interface HeaderProps
-  extends React.HTMLAttributes<HTMLElement>,
-    HasRootRef<HTMLElement> {
-  mode?: "primary" | "secondary" | "tertiary";
-  subtitle?: React.ReactNode;
-  /**
-   * Допускаются иконки, текст, Link
-   */
-  aside?: React.ReactNode;
-  /**
-   * Допускаются текст, Indicator
-   */
-  indicator?: React.ReactNode;
-  multiline?: boolean;
-}
-
-type HeaderContentProps = Pick<HeaderProps, "children" | "mode"> &
-  HasPlatform &
-  HasComponent;
-
-const HeaderContent: React.FC<HeaderContentProps> = ({
-  platform,
-  mode,
-  ...restProps
-}) => {
-  if (platform === Platform.IOS) {
-    switch (mode) {
-      case "primary":
-      case "tertiary":
-        return <Title weight="1" level="3" {...restProps} />;
-      case "secondary":
-        return <Caption level="1" weight="semibold" caps {...restProps} />;
-    }
-  }
-
-  if (platform === Platform.VKCOM) {
-    switch (mode) {
-      case "primary":
-        return <Headline weight="regular" {...restProps} />;
-      case "secondary":
-      case "tertiary":
-        return <Caption level="1" weight="regular" {...restProps} />;
-    }
-  }
-
-  switch (mode) {
-    case "primary":
-    case "tertiary":
-      return <Headline weight="medium" {...restProps} />;
-    case "secondary":
-      return <Caption level="1" weight="medium" caps {...restProps} />;
-  }
-
-  return null;
-};
-
-type HeaderAsideProps = Pick<HeaderProps, "aside"> & HasPlatform & HasComponent;
-
-const HeaderAside: React.FC<HeaderAsideProps> = ({
-  platform,
-  ...restProps
-}) => {
-  return platform === Platform.VKCOM ? (
-    <Subhead {...restProps} />
-  ) : (
-    <Text weight="regular" {...restProps} />
-  );
-};
-
-type HeaderSubtitleProps = Pick<HeaderProps, "subtitle" | "mode"> &
-  HasComponent;
-
-const HeaderSubtitle: React.FC<HeaderSubtitleProps> = ({
-  mode,
-  ...restProps
-}) => {
-  return mode === "secondary" ? (
-    <Subhead {...restProps} />
-  ) : (
-    <Caption weight="regular" level="1" {...restProps} />
-  );
-};
-
-const Header: React.FC<HeaderProps> = ({
-  mode,
-  children,
-  subtitle,
-  indicator,
-  aside,
-  getRootRef,
-  multiline,
-  ...restProps
-}: HeaderProps) => {
-  const platform = usePlatform();
-
-  return (
-    <header
-      {...restProps}
-      ref={getRootRef}
-      vkuiClass={classNames(
-        getClassName("Header", platform),
-        `Header--mode-${mode}`,
-        { "Header--pi": isPrimitiveReactNode(indicator) }
-      )}
-    >
-      <div vkuiClass="Header__main">
-        <HeaderContent
-          vkuiClass="Header__content"
-          Component="span"
-          mode={mode}
-          platform={platform}
-        >
-          <span
-            vkuiClass={classNames("Header__content-in", {
-              "Header__content-in--multiline": multiline,
-            })}
-          >
-            {children}
-          </span>
-          {hasReactNode(indicator) && (
-            <Caption
-              vkuiClass="Header__indicator"
-              weight={
-                mode === "primary" || mode === "secondary"
-                  ? "medium"
-                  : "regular"
-              }
-              level="1"
-            >
-              {indicator}
-            </Caption>
-          )}
-        </HeaderContent>
-
-        {hasReactNode(subtitle) && (
-          <HeaderSubtitle vkuiClass="Header__subtitle" Component="span">
-            {subtitle}
-          </HeaderSubtitle>
-        )}
-      </div>
-
-      {hasReactNode(aside) && (
-        <HeaderAside
-          vkuiClass="Header__aside"
-          Component="span"
-          platform={platform}
-        >
-          {aside}
-        </HeaderAside>
-      )}
-    </header>
-  );
-};
-
-Header.defaultProps = {
-  mode: "primary",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Header;

package/src/components/Header/Readme.md

@@ -1,114 +0,0 @@
-```jsx
-const Example = withPlatform(({ platform }) => {
-  return (
-    <View activePanel="header">
-      <Panel id="header">
-        <PanelHeader>Header</PanelHeader>
-        <Group>
-          <Header
-            mode="primary"
-            aside={
-              <Link>
-                Показать все{platform === VKCOM && <Icon12ChevronOutline />}
-              </Link>
-            }
-          >
-            Плейлисты
-          </Header>
-          <Header
-            mode="primary"
-            aside={
-              <Link>
-                Показать все{platform === VKCOM && <Icon12ChevronOutline />}
-              </Link>
-            }
-            subtitle="SOHN — Conrad"
-          >
-            Плейлисты
-          </Header>
-          <Header
-            mode="primary"
-            aside={
-              <Link>
-                Показать все{platform === VKCOM && <Icon12ChevronOutline />}
-              </Link>
-            }
-            indicator="12"
-          >
-            Плейлисты
-          </Header>
-          <Header
-            mode="primary"
-            aside={
-              <Link>
-                Показать все{platform === VKCOM && <Icon12ChevronOutline />}
-              </Link>
-            }
-            indicator={
-              <Counter size="s" mode="prominent">
-                3
-              </Counter>
-            }
-          >
-            Заявки в друзья
-          </Header>
-        </Group>
-        <Group>
-          <Header
-            mode="secondary"
-            aside={
-              <Link>
-                Показать все{platform === VKCOM && <Icon12ChevronOutline />}
-              </Link>
-            }
-          >
-            Приглашения
-          </Header>
-          <Header
-            mode="secondary"
-            aside={
-              <Link>
-                Показать все{platform === VKCOM && <Icon12ChevronOutline />}
-              </Link>
-            }
-            indicator="667"
-          >
-            Фотографии
-          </Header>
-          <Header
-            mode="secondary"
-            aside={
-              <Link>
-                Показать все{platform === VKCOM && <Icon12ChevronOutline />}
-              </Link>
-            }
-            indicator={
-              <Counter size="s" mode="prominent">
-                3
-              </Counter>
-            }
-          >
-            Приглашения
-          </Header>
-        </Group>
-        <Group>
-          <Header mode="tertiary">Важные</Header>
-        </Group>
-        <Group>
-          <Header mode="primary" multiline>
-            Кто может писать мне личные сообщения
-          </Header>
-          <Header mode="tertiary" multiline>
-            Кто может комментировать мои записи
-          </Header>
-          <Header mode="secondary" multiline>
-            Кто может оставлять записи на моей странице
-          </Header>
-        </Group>
-      </Panel>
-    </View>
-  );
-});
-
-<Example />;
-```

package/src/components/HorizontalCell/HorizontalCell.css

@@ -1,95 +0,0 @@
-.HorizontalCell {
-  display: flex;
-}
-
-.HorizontalCell__image {
-  display: flex;
-  justify-content: center;
-}
-
-.HorizontalCell__body {
-  text-decoration: none;
-}
-
-.HorizontalCell__content {
-  color: var(--text_primary);
-  word-break: break-all;
-  text-overflow: ellipsis;
-}
-
-.HorizontalCell__subtitle {
-  color: var(--text_secondary);
-  line-height: 18px;
-}
-
-.HorizontalCell--s {
-  max-width: 80px;
-}
-
-.HorizontalCell--s .HorizontalCell__image {
-  padding: 4px 8px;
-}
-
-.HorizontalCell--s .HorizontalCell__content {
-  padding: 2px 4px 8px 4px;
-  text-align: center;
-}
-
-.HorizontalCell--m {
-  width: 100px;
-}
-
-.HorizontalCell--l {
-  width: auto;
-}
-
-.HorizontalCell--m .HorizontalCell__image,
-.HorizontalCell--l .HorizontalCell__image {
-  padding: 4px 6px;
-}
-
-.HorizontalCell--m .HorizontalCell__content,
-.HorizontalCell--l .HorizontalCell__content {
-  padding: 2px 6px 8px 6px;
-  text-align: left;
-}
-
-/* iOS */
-.HorizontalCell--ios:first-child::before,
-.HorizontalCell--ios:last-child::after {
-  content: "";
-  min-width: 4px;
-}
-
-.HorizontalCell--ios.HorizontalCell--s:first-child,
-.HorizontalCell--ios.HorizontalCell--s:last-child {
-  max-width: 88px;
-}
-
-.HorizontalCell--ios.HorizontalCell--m:first-child,
-.HorizontalCell--ios.HorizontalCell--m:last-child {
-  width: 106px;
-}
-
-/* Android and vkcom */
-.HorizontalCell--android:first-child::before,
-.HorizontalCell--android:last-child::after,
-.HorizontalCell--vkcom:first-child::before,
-.HorizontalCell--vkcom:last-child::after {
-  content: "";
-  min-width: 8px;
-}
-
-.HorizontalCell--android.HorizontalCell--s:first-child,
-.HorizontalCell--android.HorizontalCell--s:last-child,
-.HorizontalCell--vkcom.HorizontalCell--s:first-child,
-.HorizontalCell--vkcom.HorizontalCell--s:last-child {
-  max-width: 88px;
-}
-
-.HorizontalCell--android.HorizontalCell--m:first-child,
-.HorizontalCell--android.HorizontalCell--m:last-child,
-.HorizontalCell--vkcom.HorizontalCell--m:first-child,
-.HorizontalCell--vkcom.HorizontalCell--m:last-child {
-  width: 116px;
-}

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -1,92 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import { hasReactNode } from "../../lib/utils";
-import Caption from "../Typography/Caption/Caption";
-import Tappable from "../Tappable/Tappable";
-import Subhead from "../Typography/Subhead/Subhead";
-import Avatar from "../Avatar/Avatar";
-import { HasComponent, HasRef, HasRootRef } from "../../types";
-import "./HorizontalCell.css";
-
-interface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {
-  size: HorizontalCellProps["size"];
-}
-
-const CellTypography: React.FC<CellTypographyProps> = ({
-  size,
-  children,
-  ...restProps
-}: CellTypographyProps) => {
-  return size === "s" ? (
-    <Caption level="2" weight="regular" {...restProps}>
-      {children}
-    </Caption>
-  ) : (
-    <Subhead {...restProps}>{children}</Subhead>
-  );
-};
-
-export interface HorizontalCellProps
-  extends React.AnchorHTMLAttributes<HTMLElement>,
-    HasRootRef<HTMLDivElement>,
-    HasRef<HTMLDivElement>,
-    HasComponent {
-  size?: "s" | "m" | "l";
-  header?: React.ReactNode;
-  subtitle?: React.ReactNode;
-  disabled?: boolean;
-}
-
-export const HorizontalCell: React.FC<HorizontalCellProps> = ({
-  className,
-  header,
-  style,
-  subtitle,
-  size = "s",
-  children = <Avatar size={56} />,
-  getRootRef,
-  getRef,
-  ...restProps
-}: HorizontalCellProps) => {
-  const platform = usePlatform();
-
-  return (
-    <div
-      vkuiClass={classNames(
-        getClassName("HorizontalCell", platform),
-        `HorizontalCell--${size}`
-      )}
-      ref={getRootRef}
-      style={style}
-      className={className}
-    >
-      <Tappable
-        vkuiClass="HorizontalCell__body"
-        getRootRef={getRef}
-        {...restProps}
-      >
-        {hasReactNode(children) && (
-          <div vkuiClass="HorizontalCell__image">{children}</div>
-        )}
-        <div vkuiClass="HorizontalCell__content">
-          {hasReactNode(header) && (
-            <CellTypography size={size} vkuiClass="HorizontalCell__title">
-              {header}
-            </CellTypography>
-          )}
-          {hasReactNode(subtitle) && (
-            <Caption
-              weight="regular"
-              level="1"
-              vkuiClass="HorizontalCell__subtitle"
-            >
-              {subtitle}
-            </Caption>
-          )}
-        </div>
-      </Tappable>
-    </div>
-  );
-};