Skip to content

Commit

Permalink
feat(Banner): rename prop asideMode to after and add prop tappable (
Browse files Browse the repository at this point in the history
#7793)

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

* feat(Banner): rename expand value to chevron

* test(Banner): update screenshots

* feat(Banner): make Banner tappable in root

* fix(Banner): remove in className

* test(Banner): update screenshots

* fix(Banner): fix Component props providing
  • Loading branch information
EldarMuhamethanov authored Oct 22, 2024
1 parent 43a6605 commit 1d4b706
Show file tree
Hide file tree
Showing 18 changed files with 168 additions and 107 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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'} />}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>)
);
Expand Down
45 changes: 39 additions & 6 deletions packages/codemods/src/transforms/v7/banner.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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();
}
10 changes: 5 additions & 5 deletions packages/vkui/src/components/Banner/Banner.e2e-playground.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const BannerPlayground = (props: ComponentPlaygroundProps) => {
{...props}
propSets={[
{
asideMode: [undefined, 'dismiss', 'expand'],
after: [undefined, 'dismiss', 'chevron'],
size: ['s', 'm'],
actions: [undefined],
},
Expand All @@ -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">
Подробнее
Expand All @@ -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'],
Expand All @@ -69,7 +69,7 @@ export const BannerPlayground = (props: ComponentPlaygroundProps) => {
before={<Image size={96} src="" />}
title="Баста в Ледовом"
subtitle="Большой концерт"
asideMode="dismiss"
after="dismiss"
actions={<Button>Подробнее</Button>}
{...props}
/>
Expand Down
29 changes: 14 additions & 15 deletions packages/vkui/src/components/Banner/Banner.module.css
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
.host {
isolation: isolate;
color: var(--vkui--color_text_primary);
}

.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;

--vkui_internal--banner-padding: 12px;
}

.in::before {
.host::before {
content: '';
position: absolute;
inset-inline-start: 0;
Expand Down Expand Up @@ -65,7 +64,7 @@
}
/* stylelint-enable selector-max-universal */

.aside {
.after {
display: flex;
flex-flow: row nowrap;
align-content: center;
Expand All @@ -76,9 +75,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;
Expand All @@ -100,12 +99,12 @@
/**
* Mode "image"
*/
.modeImage .in {
.modeImage.host {
background-color: var(--vkui--color_background_secondary);
}

.inverted .dismiss,
.inverted .expand,
.inverted .chevron,
.inverted {
color: var(--vkui--color_text_contrast);
}
Expand All @@ -118,8 +117,8 @@
/**
* Size "m"
*/
.sizeM .in {
padding: 16px;
.sizeM {
--vkui_internal--banner-padding: 16px;
}

.sizeM .subtitle:not(:first-child),
Expand All @@ -137,12 +136,12 @@
* FormStatus
*/
/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalFormStatus) .in::before {
:global(.vkuiInternalFormStatus).host::before {
border: 0;
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalFormStatus--mode-error) .in {
:global(.vkuiInternalFormStatus--mode-error).host {
background-color: var(--vkui--color_background_negative_tint);
}

Expand Down
33 changes: 26 additions & 7 deletions packages/vkui/src/components/Banner/Banner.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>,
Expand All @@ -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: [
Expand Down
Loading

0 comments on commit 1d4b706

Please sign in to comment.