feat(Banner): rename prop asideMode to after and add prop tappable

packages/codemods/src/transforms/v7/__testfixtures__/banner/basic.input.tsx

@@ -9,7 +9,14 @@ const App = () => {
         header="Сегодня день рождения Михаила Лихачёва"
         subheader="Подарите подарок"
         text="Дополнительный текст"
-        asideMode="dismiss"
+        asideMode="expand"
+      />
+      <Banner
+        before={<Avatar size={48} src={'user_lihachyov'} />}
+        header="Сегодня день рождения Михаила Лихачёва"
+        subheader="Подарите подарок"
+        text="Дополнительный текст"
+        asideMode={'expand'}
       />
       <Banner
         before={<Avatar size={48} src={'user_lihachyov'} />}

packages/codemods/src/transforms/v7/__tests__/__snapshots__/banner.ts.snap

@@ -12,14 +12,21 @@ const App = () => {
         title="Сегодня день рождения Михаила Лихачёва"
         subtitle="Подарите подарок"
         extraSubtitle="Дополнительный текст"
-        asideMode="dismiss"
+        after="chevron"
+      />
+      <Banner
+        before={<Avatar size={48} src={'user_lihachyov'} />}
+        title="Сегодня день рождения Михаила Лихачёва"
+        subtitle="Подарите подарок"
+        extraSubtitle="Дополнительный текст"
+        after={"chevron"}
       />
       <Banner
         before={<Avatar size={48} src={'user_lihachyov'} />}
         title="Сегодня день рождения Михаила Лихачёва"
         subtitle={"Подарите подарок"}
         extraSubtitle={"Дополнительный текст"}
-        asideMode="dismiss"
+        after="dismiss"
       />
     </React.Fragment>)
   );

packages/codemods/src/transforms/v7/banner.ts

@@ -1,5 +1,6 @@
 import { API, FileInfo } from 'jscodeshift';
 import { getImportInfo, renameProp } from '../../codemod-helpers';
+import { report } from '../../report';
 import { JSCodeShiftOptions } from '../../types';
 
 export const parser = 'tsx';
@@ -10,13 +11,45 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
   const source = j(file.source);
   const { localName } = getImportInfo(j, file, 'Banner', alias);
 
-  if (localName) {
-    renameProp(j, source, localName, {
-      subheader: 'subtitle',
-      text: 'extraSubtitle',
-      header: 'title',
-    });
+  if (!localName) {
+    return source.toSource();
   }
 
+  renameProp(j, source, localName, {
+    subheader: 'subtitle',
+    text: 'extraSubtitle',
+    header: 'title',
+    asideMode: 'after',
+  });
+
+  source
+    .find(j.JSXOpeningElement)
+    .filter(
+      (path) => path.value.name.type === 'JSXIdentifier' && path.value.name.name === localName,
+    )
+    .find(j.JSXAttribute)
+    .filter((attribute) => attribute.node.name.name === 'after')
+    .forEach((attribute) => {
+      if (attribute.node.value?.type === 'StringLiteral') {
+        if (attribute.node.value.value === 'expand') {
+          attribute.node.value.value = 'chevron';
+        }
+        return;
+      }
+      if (attribute.node.value?.type === 'JSXExpressionContainer') {
+        const expression = attribute.node.value.expression;
+        if (expression.type === 'StringLiteral') {
+          if (expression.value === 'expand') {
+            expression.value = 'chevron';
+          }
+          return;
+        }
+      }
+      report(
+        api,
+        `Manual changes required for ${localName}'s "after" (previously "asideMode") prop. Need to change "expand" value to "chevron"`,
+      );
+    });
+
   return source.toSource();
 }

packages/vkui/src/components/Banner/Banner.e2e-playground.tsx

@@ -11,7 +11,7 @@ export const BannerPlayground = (props: ComponentPlaygroundProps) => {
       {...props}
       propSets={[
         {
-          asideMode: [undefined, 'dismiss', 'expand'],
+          after: [undefined, 'dismiss', 'chevron'],
           size: ['s', 'm'],
           actions: [undefined],
         },
@@ -33,7 +33,7 @@ export const BannerPlayground = (props: ComponentPlaygroundProps) => {
           subtitle: ['Разблокировано 9 из 36'],
           background: [<div key="img-bg" style={{ backgroundColor: '#222222' }} />],
           before: [undefined],
-          asideMode: [undefined],
+          after: [undefined],
           actions: [
             <Button key="btn" appearance="overlay">
               Подробнее
@@ -42,14 +42,14 @@ export const BannerPlayground = (props: ComponentPlaygroundProps) => {
         },
         {
           mode: ['image'],
-          asideMode: ['dismiss', 'expand'],
+          after: ['dismiss', 'chevron'],
           imageTheme: ['light'],
           title: ['Мои достижения'],
           subtitle: ['Разблокировано 9 из 36'],
         },
         {
           mode: ['image'],
-          asideMode: ['dismiss', 'expand'],
+          after: ['dismiss', 'chevron'],
           imageTheme: ['dark'],
           title: ['Мои достижения'],
           subtitle: ['Разблокировано 9 из 36'],
@@ -69,7 +69,7 @@ export const BannerPlayground = (props: ComponentPlaygroundProps) => {
             before={<Image size={96} src="" />}
             title="Баста в Ледовом"
             subtitle="Большой концерт"
-            asideMode="dismiss"
+            after="dismiss"
             actions={<Button>Подробнее</Button>}
             {...props}
           />

packages/vkui/src/components/Banner/Banner.module.css

@@ -1,14 +1,16 @@
 .host {
   isolation: isolate;
   color: var(--vkui--color_text_primary);
+
+  --vkui_internal--banner-padding: 12px;
 }
 
 .in {
   position: relative;
   display: flex;
   flex-flow: row nowrap;
   align-items: stretch;
-  padding: 12px;
+  padding: var(--vkui_internal--banner-padding);
   background-color: var(--vkui--color_background_secondary);
   border-radius: var(--vkui--size_border_radius--regular);
   overflow: hidden;
@@ -65,7 +67,7 @@
 }
 /* stylelint-enable selector-max-universal */
 
-.aside {
+.after {
   display: flex;
   flex-flow: row nowrap;
   align-content: center;
@@ -76,9 +78,9 @@
 }
 
 .dismiss {
-  position: absolute;
-  inset-block-start: 2px;
-  inset-inline-end: 2px;
+  margin-block-start: calc(-1 * (var(--vkui_internal--banner-padding) - 2px));
+  margin-inline-end: calc(-1 * (var(--vkui_internal--banner-padding) - 2px));
+  align-self: flex-start;
   display: flex;
   flex-flow: row nowrap;
   align-content: center;
@@ -105,7 +107,7 @@
 }
 
 .inverted .dismiss,
-.inverted .expand,
+.inverted .chevron,
 .inverted {
   color: var(--vkui--color_text_contrast);
 }
@@ -118,8 +120,8 @@
 /**
  * Size "m"
  */
-.sizeM .in {
-  padding: 16px;
+.sizeM {
+  --vkui_internal--banner-padding: 16px;
 }
 
 .sizeM .subtitle:not(:first-child),

packages/vkui/src/components/Banner/Banner.stories.tsx

@@ -2,7 +2,9 @@ import { withCartesian } from '@project-tools/storybook-addon-cartesian';
 import type { Meta, StoryObj } from '@storybook/react';
 import { withSinglePanel, withVKUILayout } from '../../storybook/VKUIDecorators';
 import { CanvasFullLayout } from '../../storybook/constants';
+import { getAvatarUrl } from '../../testing/mock';
 import { createFieldWithPresets } from '../../testing/presets';
+import { Avatar } from '../Avatar/Avatar';
 import { Button } from '../Button/Button';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
 import { Div } from '../Div/Div';
@@ -15,6 +17,28 @@ const story: Meta<BannerProps> = {
   component: Banner,
   parameters: CanvasFullLayout,
   argTypes: {
+    before: createFieldWithPresets({
+      iconSizes: ['96'],
+      additionalPresets: {
+        Image: (
+          <Image
+            size={96}
+            src="https://sun9-63.userapi.com/yOEQYPHrNHjZEoanbqPb65HPl5iojmiLgLzfGA/W3geVMMt8TI.jpg"
+          />
+        ),
+        Avatar96: <Avatar size={96} src={getAvatarUrl('user_xyz')} />,
+        Avatar88: <Avatar size={88} src={getAvatarUrl('user_xyz')} />,
+        Avatar72: <Avatar size={72} src={getAvatarUrl('user_xyz')} />,
+      },
+    }),
+    after: createFieldWithPresets({
+      iconSizes: ['24'],
+      sizeIconsCount: 10,
+      additionalPresets: {
+        dismiss: 'dismiss',
+        chevron: 'chevron',
+      },
+    }),
     actions: createFieldWithPresets({
       additionalPresets: {
         ButtonPrimary: <Button>Подробнее</Button>,
@@ -36,15 +60,10 @@ type Story = StoryObj<BannerProps>;
 
 export const Playground: Story = {
   args: {
-    before: (
-      <Image
-        size={96}
-        src="https://sun9-63.userapi.com/yOEQYPHrNHjZEoanbqPb65HPl5iojmiLgLzfGA/W3geVMMt8TI.jpg"
-      />
-    ),
+    before: 'Image',
     title: 'Баста в Ледовом',
     subtitle: 'Большой концерт',
-    asideMode: 'dismiss',
+    after: 'dismiss',
     actions: 'ButtonPrimary',
   },
   decorators: [

packages/vkui/src/components/Banner/Banner.tsx

@@ -24,11 +24,16 @@
    * Тип действия в правой части баннера.
    *
    * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.
-   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.
+   * - `chevron` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.
    */
-  asideMode?: 'dismiss' | 'expand';
+  after?: 'dismiss' | 'chevron' | React.ReactNode;
   /**
-   * Срабатывает при клике на иконку крестика при `asideMode="dismiss"`.
+   * Включает режим отображения кликабельного баннера.
+   * По умолчанию `true`, если в `after` передано значение `'expand'`
+   */
+  clickable?: boolean;
+  /**
+   * Срабатывает при клике на иконку крестика при `after="dismiss"`.
    */
   onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
   /**
@@ -89,7 +94,8 @@
   imageTheme = 'dark',
   size = 's',
   before,
-  asideMode,
+  after: afterProp,
+  clickable = afterProp === 'chevron',
   title,
   subtitle,
   extraSubtitle,
@@ -140,6 +146,27 @@
     </>
   );
 
+  const afterMap: Record<string, React.ReactNode> = {
+    chevron: <Icon24Chevron className={styles.chevron} />,
+    dismiss: (
+      <IconButton
+        label={dismissLabel}
+        className={styles.dismiss}
+        onClick={onDismiss}
+        hoverMode="opacity"
+        hasActive={false}
+      >
+        {platform === 'ios' ? <IconDismissIOS /> : <Icon24Cancel />}
+      </IconButton>
+    ),
+  };
+
+  const after = afterProp && (
+    <div className={styles.after}>
+      {typeof afterProp === 'string' ? afterMap[afterProp] : afterProp}
+    </div>
+  );
+
   return (
     <RootComponent
       Component="section"
@@ -152,35 +179,19 @@
         mode === 'image' && imageTheme === 'dark' && styles.inverted,
       )}
     >
-      {asideMode === 'expand' ? (
+      {clickable ? (
         <Tappable
           className={styles.in}
           activeMode={platform === 'ios' ? 'opacity' : 'background'}
           onClick={noop}
         >
           {content}
-
-          <div className={styles.aside}>
-            <Icon24Chevron className={styles.expand} />
-          </div>
+          {after}
         </Tappable>
       ) : (
         <div className={styles.in}>
           {content}
-
-          {asideMode === 'dismiss' && (
-            <div className={styles.aside}>
-              <IconButton
-                label={dismissLabel}
-                className={styles.dismiss}
-                onClick={onDismiss}
-                hoverMode="opacity"
-                hasActive={false}
-              >
-                {platform === 'ios' ? <IconDismissIOS /> : <Icon24Cancel />}
-              </IconButton>
-            </div>
-          )}
+          {after}
         </div>
       )}
     </RootComponent>