@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Header/Header.css

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

@@ -0,0 +1,171 @@
+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 weight="2" caps {...restProps} />;
+    }
+  }
+
+  if (platform === Platform.VKCOM) {
+    switch (mode) {
+      case "primary":
+        return <Headline weight="regular" {...restProps} />;
+      case "secondary":
+      case "tertiary":
+        return <Caption {...restProps} />;
+    }
+  }
+
+  switch (mode) {
+    case "primary":
+    case "tertiary":
+      return <Headline weight="medium" {...restProps} />;
+    case "secondary":
+      return <Caption weight="1" 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 {...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" ? "1" : undefined
+              }
+            >
+              {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

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

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

@@ -0,0 +1,86 @@
+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" {...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 vkuiClass="HorizontalCell__subtitle">{subtitle}</Caption>
+          )}
+        </div>
+      </Tappable>
+    </div>
+  );
+};