Skip to content

Commit 6f27863

Browse files
SevereCloudSevereCloud
committed
feat(Counter): tokenized
1 parent 13f2b10 commit 6f27863

12 files changed

Lines changed: 68 additions & 70 deletions

File tree

‎src/components/Button/Button.e2e.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Icon16Add, Icon24Camera } from "@vkontakte/icons";
22
import { Button, ButtonProps } from "./Button";
3-
import Counter from "../Counter/Counter";
3+
import { Counter } from "../Counter/Counter";
44
import { describeScreenshotFuzz } from "../../testing/e2e/utils";
55

66
describe("Button", () => {

‎src/components/Counter/Counter.css‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,32 @@
1414
}
1515

1616
.Counter--primary {
17-
background: var(--counter_primary_background);
18-
color: var(--counter_primary_text);
17+
background: var(
18+
--counter_primary_background,
19+
var(--vkui--color_background_accent)
20+
);
21+
color: var(--counter_primary_text, var(--vkui--color_text_contrast));
1922
}
2023

2124
.Counter--secondary {
22-
background: var(--counter_secondary_background);
23-
color: var(--counter_secondary_text);
25+
background: var(
26+
--counter_secondary_background,
27+
var(--vkui--color_icon_tertiary)
28+
);
29+
color: var(--counter_secondary_text, var(--vkui--color_text_contrast));
2430
}
2531

2632
.Counter--prominent {
27-
background: var(--counter_prominent_background);
28-
color: var(--counter_prominent_text);
33+
background: var(
34+
--counter_prominent_background,
35+
var(--vkui--color_background_negative)
36+
);
37+
color: var(--counter_prominent_text, var(--vkui--color_text_contrast));
38+
}
39+
40+
.Counter--contrast {
41+
background: var(--vkui--color_background_contrast);
42+
color: var(--vkui--color_text_accent);
2943
}
3044

3145
.Counter--s-m {
@@ -40,11 +54,6 @@
4054
border-radius: 9px;
4155
}
4256

43-
.Counter--vkcom.Counter--s-m .Counter__in {
44-
padding-left: 6px;
45-
padding-right: 6px;
46-
}
47-
4857
/**
4958
* CMP:
5059
* Button
@@ -145,17 +154,14 @@
145154
);
146155
}
147156

148-
.Button--lvl-secondary.Button--clr-accent .Counter--vkcom,
149-
.Button--lvl-tertiary.Button--clr-accent .Counter--vkcom,
150-
.Button--lvl-outline.Button--clr-accent .Counter--vkcom {
151-
opacity: 0.72;
152-
}
153-
154157
/**
155158
* CMP:
156159
* WriteBarIcon
157160
*/
158161
.WriteBarIcon .Counter {
159-
color: var(--button_commerce_foreground);
160-
background: var(--button_commerce_background);
162+
color: var(--button_commerce_foreground, var(--vkui--color_text_contrast));
163+
background: var(
164+
--button_commerce_background,
165+
var(--vkui--color_background_positive)
166+
);
161167
}

‎src/components/Counter/Counter.e2e.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Counter, CounterProps } from "./Counter";
2+
import { describeScreenshotFuzz } from "../../testing/e2e/utils";
3+
4+
describe("Counter", () => {
5+
describeScreenshotFuzz(
6+
(props: CounterProps) => (
7+
<div>
8+
<Counter {...props} />
9+
</div>
10+
),
11+
[
12+
{
13+
children: ["3"],
14+
mode: ["secondary", "primary", "prominent", "contrast"],
15+
size: ["m", "s"],
16+
$adaptivity: "y",
17+
},
18+
]
19+
);
20+
});

‎src/components/Counter/Counter.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { baselineComponent } from "../../testing/utils";
22
import { render } from "@testing-library/react";
3-
import Counter from "./Counter";
3+
import { Counter } from "./Counter";
44

55
describe("Counter", () => {
66
baselineComponent(Counter, { forward: false });

‎src/components/Counter/Counter.tsx‎

Lines changed: 12 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,47 @@
11
import * as React from "react";
22
import { classNames } from "../../lib/classNames";
3-
import { getClassName } from "../../helpers/getClassName";
4-
import { usePlatform } from "../../hooks/usePlatform";
53
import { Caption } from "../Typography/Caption/Caption";
6-
import { Text } from "../Typography/Text/Text";
7-
import { VKCOM } from "../../lib/platform";
4+
import { Headline } from "../Typography/Headline/Headline";
85
import { hasReactNode } from "../../lib/utils";
9-
import { HasComponent, HasPlatform } from "../../types";
106
import "./Counter.css";
117

128
export interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {
139
/**
1410
* Тип счетчика. При использовании компонента в качестве значения свойства `after` у `Button` эти значения игнорируются
1511
*/
16-
mode?: "secondary" | "primary" | "prominent";
12+
mode?: "secondary" | "primary" | "prominent" | "contrast";
1713
size?: "s" | "m";
1814
}
1915

20-
type CounterTypographyProps = Pick<CounterProps, "size"> &
21-
HasPlatform &
22-
HasComponent;
23-
24-
const CounterTypography: React.FC<CounterTypographyProps> = ({
25-
size,
26-
platform,
27-
...restProps
28-
}) => {
29-
return size === "s" ? (
30-
<Caption
31-
level="2"
32-
weight={platform === VKCOM ? "1" : undefined}
33-
{...restProps}
34-
/>
35-
) : (
36-
<Text weight="2" {...restProps} />
37-
);
38-
};
39-
4016
/**
4117
* @see https://vkcom.github.io/VKUI/#/Counter
4218
*/
43-
const Counter: React.FC<CounterProps> = (props: CounterProps) => {
44-
const { mode, size, children, ...restProps } = props;
45-
const platform = usePlatform();
46-
19+
export const Counter = ({
20+
mode = "secondary",
21+
size = "m",
22+
children,
23+
...restProps
24+
}: CounterProps) => {
4725
if (React.Children.count(children) === 0) {
4826
return null;
4927
}
5028

29+
const CounterTypography = size === "s" ? Caption : Headline;
30+
5131
return (
5232
<span
5333
{...restProps}
5434
vkuiClass={classNames(
55-
getClassName("Counter", platform),
35+
"Counter",
5636
`Counter--${mode}`,
5737
`Counter--s-${size}`
5838
)}
5939
>
6040
{hasReactNode(children) && (
61-
<CounterTypography
62-
platform={platform}
63-
size={size}
64-
vkuiClass="Counter__in"
65-
>
41+
<CounterTypography Component="span" vkuiClass="Counter__in" level="2">
6642
{children}
6743
</CounterTypography>
6844
)}
6945
</span>
7046
);
7147
};
72-
73-
Counter.defaultProps = {
74-
mode: "secondary",
75-
size: "m",
76-
};
77-
78-
// eslint-disable-next-line import/no-default-export
79-
export default React.memo(Counter);

‎src/components/Header/Header.e2e.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Header, { HeaderProps } from "./Header";
22
import Link from "../Link/Link";
3-
import Counter from "../Counter/Counter";
3+
import { Counter } from "../Counter/Counter";
44
import { describeScreenshotFuzz } from "../../testing/e2e/utils";
55

66
describe("Header", () => {

‎src/components/TabbarItem/TabbarItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from "react";
22
import { getClassName } from "../../helpers/getClassName";
3-
import Counter from "../Counter/Counter";
3+
import { Counter } from "../Counter/Counter";
44
import { classNames } from "../../lib/classNames";
55
import { usePlatform } from "../../hooks/usePlatform";
66
import { hasReactNode } from "../../lib/utils";

‎src/components/Tabs/Tabs.e2e.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Fragment } from "react";
22
import { describeScreenshotFuzz } from "../../testing/e2e/utils";
3-
import Counter from "../Counter/Counter";
3+
import { Counter } from "../Counter/Counter";
44
import TabsItem from "../TabsItem/TabsItem";
55
import Tabs from "./Tabs";
66

‎src/components/WriteBarIcon/WriteBarIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { usePlatform } from "../../hooks/usePlatform";
1111
import { classNames } from "../../lib/classNames";
1212
import { getClassName } from "../../helpers/getClassName";
1313
import { IOS } from "../../lib/platform";
14-
import Counter from "../Counter/Counter";
14+
import { Counter } from "../Counter/Counter";
1515
import Tappable from "../Tappable/Tappable";
1616
import { warnOnce } from "../../lib/warnOnce";
1717
import { hasReactNode } from "../../lib/utils";

‎src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ export type { LinkProps } from "./components/Link/Link";
136136
export { default as Tooltip } from "./components/Tooltip/Tooltip";
137137
export type { TooltipProps } from "./components/Tooltip/Tooltip";
138138
export { TooltipContainer } from "./components/Tooltip/TooltipContainer";
139-
export { default as Counter } from "./components/Counter/Counter";
139+
export { Counter } from "./components/Counter/Counter";
140140
export type { CounterProps } from "./components/Counter/Counter";
141141
export { default as UsersStack } from "./components/UsersStack/UsersStack";
142142
export type { UsersStackProps } from "./components/UsersStack/UsersStack";

0 commit comments

Comments
 (0)