Skip to content

Commit c4d7015

Browse files
author
Victoria Zhizhonkova
committed
feat(Banner): Tokenize
1 parent 3364259 commit c4d7015

File tree

6 files changed

+57
-69
lines changed

6 files changed

+57
-69
lines changed

‎src/components/Banner/Banner.css‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
.Banner {
22
margin: 12px 0;
3-
padding: 0 16px;
4-
color: var(--text_primary);
3+
padding: 0 var(--vkui--size_base_padding_horizontal--regular);
4+
color: var(--text_primary, var(--vkui--color_text_primary));
55
}
66

77
.Banner__in {
88
position: relative;
99
display: flex;
1010
flex-flow: row nowrap;
1111
align-items: stretch;
12-
padding: 12px;
13-
padding-left: 16px;
14-
background-color: var(--content_tint_background);
15-
border-radius: 8px;
12+
padding: 12px 12px 12px 16px;
13+
background-color: var(
14+
--content_tint_background,
15+
var(--vkui--color_background_secondary)
16+
);
17+
border-radius: var(--vkui--size_border_radius--regular);
1618
overflow: hidden;
1719
}
1820

@@ -24,7 +26,8 @@
2426
display: block;
2527
width: 100%;
2628
height: 100%;
27-
border: var(--thin-border) solid var(--image_border);
29+
border: var(--thin-border) solid
30+
var(--image_border, var(--vkui--color_image_border_alpha));
2831
border-radius: inherit;
2932
pointer-events: none;
3033
box-sizing: border-box;
@@ -53,7 +56,11 @@
5356

5457
.Banner__subheader {
5558
display: block;
56-
color: var(--text_subhead);
59+
color: var(--text_subhead, var(--vkui--color_text_subhead));
60+
}
61+
62+
.Banner__text {
63+
color: var(--vkui--color_text_subhead);
5764
}
5865

5966
.Banner__bg {
@@ -76,7 +83,7 @@
7683
align-items: center;
7784
justify-content: flex-end;
7885
width: 28px;
79-
color: var(--icon_tertiary);
86+
color: var(--icon_tertiary, var(--vkui--color_icon_tertiary));
8087
}
8188

8289
.Banner__dismiss {
@@ -88,7 +95,7 @@
8895
align-content: center;
8996
align-items: center;
9097
justify-content: center;
91-
color: var(--icon_secondary);
98+
color: var(--icon_secondary, var(--vkui--color_icon_secondary));
9299
z-index: 3;
93100
}
94101

@@ -105,16 +112,19 @@
105112
* Mode "image"
106113
*/
107114
.Banner--md-image .Banner__in {
108-
background-color: var(--content_tint_background);
115+
background-color: var(
116+
--content_tint_background,
117+
var(--vkui--color_background_secondary)
118+
);
109119
}
110120

111121
.Banner--md-image .Banner__dismiss,
112122
.Banner--inverted {
113-
color: var(--white);
123+
color: var(--white, var(--vkui--color_text_contrast));
114124
}
115125

116126
.Banner--inverted .Banner__subheader {
117-
color: var(--white);
127+
color: var(--white, var(--vkui--color_text_contrast));
118128
opacity: 0.72;
119129
}
120130

@@ -137,18 +147,7 @@
137147
margin-top: 4px;
138148
}
139149

140-
/**
141-
* iOS
142-
*/
143-
.Banner--ios {
144-
padding: 0 12px;
145-
}
146-
147-
.Banner--ios .Banner__in {
148-
border-radius: 10px;
149-
}
150-
151150
.Banner--ios .Banner__dismiss,
152151
.Banner--ios.Banner--md-image .Banner__dismiss {
153-
color: var(--icon_tertiary);
152+
color: var(--icon_tertiary, var(--vkui--color_icon_tertiary));
154153
}

‎src/components/Banner/Banner.e2e.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Fragment } from "react";
22
import { Avatar } from "../Avatar/Avatar";
3-
import Banner, { BannerProps } from "./Banner";
3+
import { Banner, BannerProps } from "./Banner";
44
import { Button } from "../Button/Button";
5-
import { describeScreenshotFuzz } from "../../testing/e2e/utils";
5+
import { describeScreenshotFuzz } from "../../testing/e2e";
66

77
describe("Banner", () => {
88
describeScreenshotFuzz(

‎src/components/Banner/Banner.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { AdaptivityProps } from "../../hoc/withAdaptivity";
33
import { baselineComponent } from "../../testing/utils";
44
import { SizeType } from "../AdaptivityProvider/AdaptivityContext";
55
import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider";
6-
import Banner, { BannerProps } from "./Banner";
6+
import { Banner, BannerProps } from "./Banner";
77

88
const BannerTest = ({
99
sizeY = SizeType.REGULAR,

‎src/components/Banner/Banner.tsx‎

Lines changed: 26 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import * as React from "react";
22
import { HasComponent } from "../../types";
3-
import { getClassName } from "../../helpers/getClassName";
43
import { classNames } from "../../lib/classNames";
54
import { usePlatform } from "../../hooks/usePlatform";
6-
import { ANDROID, IOS, VKCOM } from "../../lib/platform";
5+
import { IOS } from "../../lib/platform";
76
import { hasReactNode } from "../../lib/utils";
87
import {
98
Icon24Chevron,
@@ -97,38 +96,35 @@ const BannerHeader: React.FC<BannerTypographyProps> = ({
9796
/**
9897
* @see https://vkcom.github.io/VKUI/#/Banner
9998
*/
100-
const Banner: React.FC<BannerProps> = (props: BannerProps) => {
99+
export const Banner = ({
100+
mode = "tint",
101+
imageTheme = "dark",
102+
size = "s",
103+
before,
104+
asideMode,
105+
header,
106+
subheader,
107+
text,
108+
children,
109+
background,
110+
actions,
111+
onDismiss,
112+
dismissLabel = "Скрыть",
113+
...restProps
114+
}: BannerProps) => {
101115
const platform = usePlatform();
102-
const {
103-
mode,
104-
imageTheme,
105-
size,
106-
before,
107-
asideMode,
108-
header,
109-
subheader,
110-
text,
111-
children,
112-
background,
113-
actions,
114-
onDismiss,
115-
dismissLabel,
116-
...restProps
117-
} = props;
118116

119117
const SubheaderTypography = size === "m" ? Text : Subhead;
120118

121119
return (
122120
<section
123121
{...restProps}
124-
// eslint-disable-next-line vkui/no-object-expression-in-arguments
125122
vkuiClass={classNames(
126-
getClassName("Banner", platform),
123+
"Banner",
124+
platform === IOS && "Banner--ios",
127125
`Banner--md-${mode}`,
128126
`Banner--sz-${size}`,
129-
{
130-
"Banner--inverted": mode === "image" && imageTheme === "dark",
131-
}
127+
mode === "image" && imageTheme === "dark" && "Banner--inverted"
132128
)}
133129
>
134130
<Tappable
@@ -178,15 +174,15 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
178174
hoverMode="opacity"
179175
hasActive={false}
180176
>
181-
{(platform === ANDROID || platform === VKCOM) && (
182-
<Icon24Cancel />
183-
)}
184-
{platform === IOS &&
185-
(mode === "image" ? (
177+
{platform === IOS ? (
178+
mode === "image" ? (
186179
<Icon24DismissDark />
187180
) : (
188181
<Icon24DismissSubstract />
189-
))}
182+
)
183+
) : (
184+
<Icon24Cancel />
185+
)}
190186
</IconButton>
191187
)}
192188
</div>
@@ -195,13 +191,3 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
195191
</section>
196192
);
197193
};
198-
199-
Banner.defaultProps = {
200-
dismissLabel: "Скрыть",
201-
mode: "tint",
202-
size: "s",
203-
imageTheme: "dark",
204-
};
205-
206-
// eslint-disable-next-line import/no-default-export
207-
export default Banner;

‎src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ export { Spacing } from "./components/Spacing/Spacing";
146146
export type { SpacingProps } from "./components/Spacing/Spacing";
147147
export { default as Placeholder } from "./components/Placeholder/Placeholder";
148148
export type { PlaceholderProps } from "./components/Placeholder/Placeholder";
149-
export { default as Banner } from "./components/Banner/Banner";
149+
export { Banner } from "./components/Banner/Banner";
150150
export type { BannerProps } from "./components/Banner/Banner";
151151
export { MiniInfoCell } from "./components/MiniInfoCell/MiniInfoCell";
152152
export type { MiniInfoCellProps } from "./components/MiniInfoCell/MiniInfoCell";

‎src/tokenized/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,9 @@ export type { HeadlineProps } from "../components/Typography/Headline/Headline";
134134
export { Div } from "../components/Div/Div";
135135
export type { DivProps } from "../components/Div/Div";
136136

137+
export { Banner } from "../components/Banner/Banner";
138+
export type { BannerProps } from "../components/Banner/Banner";
139+
137140
export { FixedLayout } from "../components/FixedLayout/FixedLayout";
138141
export type { FixedLayoutProps } from "../components/FixedLayout/FixedLayout";
139142

0 commit comments

Comments
 (0)