Skip to content

Commit 25feeb3

Browse files
committed
Merge branch 'master' into SevereCloud/v5/merge-master-end
2 parents 844df5b + bfd7260 commit 25feeb3

9 files changed

Lines changed: 268 additions & 155 deletions

File tree

.github/danger/yarn.lock

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -456,9 +456,9 @@ debug@^4.1.1:
456456
ms "2.1.2"
457457

458458
decode-uri-component@^0.2.0:
459-
version "0.2.0"
460-
resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
461-
integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
459+
version "0.2.2"
460+
resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
461+
integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
462462

463463
define-property@^0.2.5:
464464
version "0.2.5"

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@
225225
"dependencies": {
226226
"@babel/runtime": "^7.14.6",
227227
"@popperjs/core": "^2.9.2",
228-
"@vkontakte/vkjs": "^0.28.0",
228+
"@vkontakte/vkjs": "^0.29.0",
229229
"dayjs": "^1.11.0",
230230
"mitt": "^3.0.0",
231231
"react-popper": "^2.2.5"

src/components/ChipsInputBase/ChipsInputBase.module.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,15 @@
1111
}
1212

1313
.ChipsInputBase__chip {
14-
max-width: 100%;
14+
max-width: calc(100% - 4px);
1515
margin: 2px;
1616
}
1717

1818
.ChipsInputBase__label {
1919
display: flex;
2020
flex-direction: column;
2121
flex: 1;
22-
margin: 2px;
23-
margin-left: 10px;
22+
margin: 2px 2px 2px 10px;
2423
}
2524

2625
.ChipsInputBase__el {

src/components/Footer/Footer.module.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.Footer {
22
display: block;
3-
margin: 24px 0;
3+
/* TODO v5: переделать на padding */
4+
margin: 24px var(--vkui--size_base_padding_horizontal--regular);
45
padding-top: 0;
56
padding-bottom: 0;
67
text-align: center;

src/components/PanelHeaderContext/PanelHeaderContext.module.css

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@
2121
left: 0;
2222
width: 100%;
2323
z-index: 2;
24+
padding: 8px;
25+
box-sizing: border-box;
26+
pointer-events: none;
2427
}
2528

2629
.PanelHeaderContext__fade {
@@ -53,6 +56,7 @@
5356
}
5457

5558
.PanelHeaderContext--opened .PanelHeaderContext__in {
59+
pointer-events: auto;
5660
animation: vkui-animation-panelheadercontext-translate-in 0.2s ease;
5761
}
5862

@@ -64,14 +68,6 @@
6468
background: var(--vkui--color_background_content);
6569
}
6670

67-
/*
68-
Android
69-
*/
70-
.PanelHeaderContext__in {
71-
padding: 8px;
72-
box-sizing: border-box;
73-
}
74-
7571
.PanelHeaderContext--ios .PanelHeaderContext__in {
7672
padding: 0;
7773
}
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,62 @@
1+
import React from "react";
2+
import { render, screen } from "@testing-library/react";
3+
import { noop } from "../../lib/utils";
14
import { baselineComponent } from "../../testing/utils";
25
import { PromoBanner } from "./PromoBanner";
36

47
describe("PromoBanner", () => {
58
baselineComponent(PromoBanner);
9+
10+
it("renders by default", () => {
11+
render(<PromoBanner data-testid="test" bannerData={{}} onClose={noop} />);
12+
13+
expect(screen.getByTestId("test")).toBeVisible();
14+
});
15+
16+
it("renders Avatar if bannerData.iconLink is passed", () => {
17+
render(
18+
<PromoBanner
19+
data-testid="test"
20+
bannerData={{
21+
iconLink: "#",
22+
}}
23+
onClose={noop}
24+
/>
25+
);
26+
27+
const container = screen.getByTestId("test");
28+
const avatar = screen.queryByTestId("avatar");
29+
30+
expect(container).toContainElement(avatar);
31+
});
32+
33+
it("renders no Avatar if bannerData.iconLink isn't passed", () => {
34+
render(<PromoBanner data-testid="test" bannerData={{}} onClose={noop} />);
35+
36+
const container = screen.getByTestId("test");
37+
const avatar = screen.queryByTestId("avatar");
38+
39+
expect(container).not.toContainElement(avatar);
40+
});
41+
42+
it("renders Button if bannerData.ctaText is passed", () => {
43+
render(
44+
<PromoBanner
45+
data-testid="test"
46+
bannerData={{ ctaText: "Press Me" }}
47+
onClose={noop}
48+
/>
49+
);
50+
51+
expect(screen.getByTestId("test")).toHaveTextContent("Press Me");
52+
});
53+
54+
it("renders no Button if bannerData.ctaText isn't passed", () => {
55+
render(<PromoBanner data-testid="test" bannerData={{}} onClose={noop} />);
56+
57+
const container = screen.getByTestId("test");
58+
const button = screen.queryByTestId("button-ctaText");
59+
60+
expect(container).not.toContainElement(button);
61+
});
662
});

src/components/PromoBanner/PromoBanner.tsx

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,9 +104,29 @@ export const PromoBanner = ({
104104
rel="nofollow noopener noreferrer"
105105
target="_blank"
106106
before={
107-
<Image size={48} src={bannerData.iconLink} alt={bannerData.title} />
107+
bannerData.iconLink && (
108+
<Image
109+
size={48}
110+
src={bannerData.iconLink}
111+
alt={bannerData.title}
112+
data-testid={
113+
process.env.NODE_ENV === "test" ? "avatar" : undefined
114+
}
115+
/>
116+
)
117+
}
118+
after={
119+
bannerData.ctaText && (
120+
<Button
121+
mode="outline"
122+
data-testid={
123+
process.env.NODE_ENV === "test" ? "button-ctaText" : undefined
124+
}
125+
>
126+
{bannerData.ctaText}
127+
</Button>
128+
)
108129
}
109-
after={<Button mode="outline">{bannerData.ctaText}</Button>}
110130
subtitle={bannerData.domain}
111131
>
112132
{bannerData.title}

styleguide/Components/StyleGuide/StyleGuideHeader.js

Lines changed: 35 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,34 @@ import React from "react";
1212
import pkg from "../../../package.json";
1313
import "./StyleGuideHeader.css";
1414

15+
const prRegExp = /https:\/\/([\w]+)\.github.io\/([\w]+)\/pull\/([\d]+)/;
16+
const prData = prRegExp.exec(location.href);
17+
1518
export const StyleGuideHeader = ({ switchStyleGuideAppearance }) => {
1619
const appearance = useAppearance();
1720

21+
const links = [
22+
{
23+
title: "v" + pkg.version,
24+
href: "https://www.npmjs.com/package/@vkontakte/vkui",
25+
},
26+
{
27+
title: "Github",
28+
href: "https://github.com/VKCOM/VKUI",
29+
},
30+
{
31+
title: "Релизы",
32+
href: "https://github.com/VKCOM/VKUI/releases",
33+
},
34+
];
35+
36+
if (prData) {
37+
links.unshift({
38+
title: `pull/${prData[3]}`,
39+
href: `https://github.com/${prData[1]}/${prData[2]}/pull/${prData[3]}`,
40+
});
41+
}
42+
1843
return (
1944
<div className="StyleGuideHeader">
2045
<SplitLayout>
@@ -38,27 +63,16 @@ export const StyleGuideHeader = ({ switchStyleGuideAppearance }) => {
3863
</SplitCol>
3964
<SplitCol width="100%" className="StyleGuideHeader__main">
4065
<div className="StyleGuideHeader__links">
41-
<Link
42-
target="_blank"
43-
className="StyleGuideHeader__link"
44-
href="https://www.npmjs.com/package/@vkontakte/vkui"
45-
>
46-
<Text>v{pkg.version}</Text>
47-
</Link>
48-
<Link
49-
target="_blank"
50-
className="StyleGuideHeader__link"
51-
href="https://github.com/VKCOM/VKUI"
52-
>
53-
<Text>Github</Text>
54-
</Link>
55-
<Link
56-
target="_blank"
57-
className="StyleGuideHeader__link"
58-
href="https://github.com/VKCOM/VKUI/releases"
59-
>
60-
<Text>Релизы</Text>
61-
</Link>
66+
{links.map((item, i) => (
67+
<Link
68+
key={i}
69+
target="_blank"
70+
className="StyleGuideHeader__link"
71+
href={item.href}
72+
>
73+
<Text>{item.title}</Text>
74+
</Link>
75+
))}
6276
</div>
6377
<div className="StyleGuideHeader__aside">
6478
<IconButton

0 commit comments

Comments
 (0)