diff --git a/package.json b/package.json index 23788b143a..f5fe80a1ba 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@vkontakte/eslint-plugin": "^1.1.1", "@vkontakte/prettier-config": "^0.1.0", "@vkontakte/stylelint-config": "^4.0.1", - "@vkontakte/vkui-tokens": "4.41.4", + "@vkontakte/vkui-tokens": "4.42.0", "autoprefixer": "^10.4.17", "concurrently": "^8.2.2", "cross-env": "^7.0.2", diff --git a/packages/vkui/src/components/Mark/Mark.e2e-playground.tsx b/packages/vkui/src/components/Mark/Mark.e2e-playground.tsx new file mode 100644 index 0000000000..89791ed448 --- /dev/null +++ b/packages/vkui/src/components/Mark/Mark.e2e-playground.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers'; +import { Mark, type MarkProps } from './Mark'; + +export const MarkPlayground = (props: ComponentPlaygroundProps) => { + return ( + + {(props: MarkProps) => ( +
+ Ведь тебе нужен Марк, чтоб получился марк + етинг +
+ )} +
+ ); +}; diff --git a/packages/vkui/src/components/Mark/Mark.e2e.tsx b/packages/vkui/src/components/Mark/Mark.e2e.tsx new file mode 100644 index 0000000000..a95c283026 --- /dev/null +++ b/packages/vkui/src/components/Mark/Mark.e2e.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; +import { test } from '@vkui-e2e/test'; +import { Mark } from './Mark'; +import { MarkPlayground } from './Mark.e2e-playground'; + +test(Mark.name, async ({ mount, expectScreenshotClippedToContent, componentPlaygroundProps }) => { + await mount(); + await expectScreenshotClippedToContent(); +}); diff --git a/packages/vkui/src/components/Mark/Mark.module.css b/packages/vkui/src/components/Mark/Mark.module.css new file mode 100644 index 0000000000..be49401c32 --- /dev/null +++ b/packages/vkui/src/components/Mark/Mark.module.css @@ -0,0 +1,8 @@ +.Mark { + border-radius: 4px; + padding: 2px; + margin: -2px; + /* Перебиваем значения браузера */ + background-color: var(--vkui--color_background_accent_themed_alpha); + color: inherit; +} diff --git a/packages/vkui/src/components/Mark/Mark.stories.tsx b/packages/vkui/src/components/Mark/Mark.stories.tsx new file mode 100644 index 0000000000..4dcf76bb45 --- /dev/null +++ b/packages/vkui/src/components/Mark/Mark.stories.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import { Meta, StoryObj } from '@storybook/react'; +import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants'; +import { Group } from '../Group/Group'; +import { Mark, MarkProps } from './Mark'; + +const story: Meta = { + title: 'Blocks/Mark', + component: Mark, + parameters: { ...CanvasFullLayout, ...DisableCartesianParam }, +}; + +export default story; + +type Story = StoryObj; + +export const Playground: Story = { + render: (args) => ( +

+ Это выделенный текст +

+ ), + decorators: [ + (Component) => ( + + + + ), + ], +}; diff --git a/packages/vkui/src/components/Mark/Mark.test.tsx b/packages/vkui/src/components/Mark/Mark.test.tsx new file mode 100644 index 0000000000..0c9f756e81 --- /dev/null +++ b/packages/vkui/src/components/Mark/Mark.test.tsx @@ -0,0 +1,6 @@ +import { baselineComponent } from '../../testing/utils'; +import { Mark } from './Mark'; + +describe(Mark, () => { + baselineComponent(Mark); +}); diff --git a/packages/vkui/src/components/Mark/Mark.tsx b/packages/vkui/src/components/Mark/Mark.tsx new file mode 100644 index 0000000000..b3cc928dc6 --- /dev/null +++ b/packages/vkui/src/components/Mark/Mark.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { HTMLAttributesWithRootRef } from '../../types'; +import { RootComponent } from '../RootComponent/RootComponent'; +import styles from './Mark.module.css'; + +export type MarkProps = HTMLAttributesWithRootRef; + +/** + * Компонент используется для выделения фрагментов текста, + * например при поиске определенных слов или выделения текста в цитате. + * + * @since v6.1.0 + * @see https://vkcom.github.io/VKUI/#/Mark + */ +export const Mark = (props: MarkProps) => ( + +); diff --git a/packages/vkui/src/components/Mark/Readme.md b/packages/vkui/src/components/Mark/Readme.md new file mode 100644 index 0000000000..8d93f3c928 --- /dev/null +++ b/packages/vkui/src/components/Mark/Readme.md @@ -0,0 +1,17 @@ +```jsx { "props": { "layout": false, "iframe": false } } + +
+ Что? Где? Когда? +
+ Кто хочет стать миллионером? +
+ Где эта улица, где этот дом? +
+ Где лучшие тусовки? +
+
+``` + +## Доступность + +Для данного компонента используется роль [mark](https://w3c.github.io/aria/#mark). diff --git a/packages/vkui/src/components/Mark/__image_snapshots__/mark-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Mark/__image_snapshots__/mark-android-chromium-dark-1-snap.png new file mode 100644 index 0000000000..765a2b47b9 --- /dev/null +++ b/packages/vkui/src/components/Mark/__image_snapshots__/mark-android-chromium-dark-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8ebd7520cac36e901567002d911b4105f318bc8236812bc9b0df64cf5e341766 +size 6525 diff --git a/packages/vkui/src/components/Mark/__image_snapshots__/mark-android-chromium-light-1-snap.png b/packages/vkui/src/components/Mark/__image_snapshots__/mark-android-chromium-light-1-snap.png new file mode 100644 index 0000000000..df4fdbae66 --- /dev/null +++ b/packages/vkui/src/components/Mark/__image_snapshots__/mark-android-chromium-light-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7404404df6bce00f40703c3475da6bb90bf13f520b2bf1ddfa8c949a0c999a1d +size 6524 diff --git a/packages/vkui/src/components/Mark/__image_snapshots__/mark-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Mark/__image_snapshots__/mark-ios-webkit-dark-1-snap.png new file mode 100644 index 0000000000..5bc0c59776 --- /dev/null +++ b/packages/vkui/src/components/Mark/__image_snapshots__/mark-ios-webkit-dark-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:111a00a8a8bd734664ee2b9545e50569fffdcb354321a171c5ffe1c04087284e +size 5493 diff --git a/packages/vkui/src/components/Mark/__image_snapshots__/mark-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Mark/__image_snapshots__/mark-ios-webkit-light-1-snap.png new file mode 100644 index 0000000000..9d6ffab8bc --- /dev/null +++ b/packages/vkui/src/components/Mark/__image_snapshots__/mark-ios-webkit-light-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3c1b1d4138e2866a1e33803801670db1cb43eeb9b16664b6b7fbc87682c328f7 +size 5421 diff --git a/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-chromium-dark-1-snap.png new file mode 100644 index 0000000000..b10a629cdb --- /dev/null +++ b/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-chromium-dark-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2198f3ebd906bb09c2f515aa69ba2a4e9cb08bb014f5847c94ec78918f64f18c +size 6569 diff --git a/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-chromium-light-1-snap.png new file mode 100644 index 0000000000..755826b35a --- /dev/null +++ b/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-chromium-light-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4fe9eb92ee659c79e80ff7b6a55d16a923d2fc2ece65fb646440ce9fa82e0e76 +size 6557 diff --git a/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-firefox-dark-1-snap.png new file mode 100644 index 0000000000..14ec836d24 --- /dev/null +++ b/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-firefox-dark-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:589c6527d831de4eb94c40f7f2d7efc7a5df87f95dd136e24322e5faa2cda502 +size 8009 diff --git a/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-firefox-light-1-snap.png new file mode 100644 index 0000000000..0d277e112c --- /dev/null +++ b/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-firefox-light-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9ba691320018d148cf340df5cc8cc3c2b6bb13632620c7d1d9f3693b05c26264 +size 7778 diff --git a/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-webkit-dark-1-snap.png new file mode 100644 index 0000000000..b9bb7306aa --- /dev/null +++ b/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-webkit-dark-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:db125630bdc4a2f006b430b1a040efd0541f7486010db033cf162bbe59e8e88a +size 5511 diff --git a/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-webkit-light-1-snap.png new file mode 100644 index 0000000000..a35667c650 --- /dev/null +++ b/packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-webkit-light-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2d87558bc72e828e0137a37aa0356c0a905b3e186b2ce307c8eadfa4098e986e +size 5479 diff --git a/packages/vkui/src/index.ts b/packages/vkui/src/index.ts index d4ce796773..82c0dec103 100644 --- a/packages/vkui/src/index.ts +++ b/packages/vkui/src/index.ts @@ -196,6 +196,8 @@ export { PullToRefresh } from './components/PullToRefresh/PullToRefresh'; export type { PullToRefreshProps } from './components/PullToRefresh/PullToRefresh'; export { Link } from './components/Link/Link'; export type { LinkProps } from './components/Link/Link'; +export { Mark } from './components/Mark/Mark'; +export type { MarkProps } from './components/Mark/Mark'; export { OnboardingTooltip } from './components/OnboardingTooltip/OnboardingTooltip'; export type { OnboardingTooltipProps } from './components/OnboardingTooltip/OnboardingTooltip'; export { OnboardingTooltipContainer } from './components/OnboardingTooltip/OnboardingTooltipContainer'; diff --git a/styleguide/config.js b/styleguide/config.js index 99b15c5a61..c81131b598 100644 --- a/styleguide/config.js +++ b/styleguide/config.js @@ -217,6 +217,7 @@ const baseConfig = { `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/IconButton/IconButton.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/Div/Div.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/Link/Link.tsx`, + `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/Mark/Mark.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/Header/Header.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/Group/Group.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/Card/Card.tsx`, diff --git a/yarn.lock b/yarn.lock index 8c8cd3058a..26ad49b332 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5554,7 +5554,7 @@ __metadata: "@vkontakte/eslint-plugin": ^1.1.1 "@vkontakte/prettier-config": ^0.1.0 "@vkontakte/stylelint-config": ^4.0.1 - "@vkontakte/vkui-tokens": 4.41.4 + "@vkontakte/vkui-tokens": 4.42.0 autoprefixer: ^10.4.17 concurrently: ^8.2.2 cross-env: ^7.0.2 @@ -5635,12 +5635,12 @@ __metadata: languageName: unknown linkType: soft -"@vkontakte/vkui-tokens@npm:4.41.4": - version: 4.41.4 - resolution: "@vkontakte/vkui-tokens@npm:4.41.4" +"@vkontakte/vkui-tokens@npm:4.42.0": + version: 4.42.0 + resolution: "@vkontakte/vkui-tokens@npm:4.42.0" dependencies: csstype: ^3.1.1 - checksum: 927031006f4adabf48114b6c26e208c349d92aed15988021c075eb5ca4beb242c8ea641799e3e03553d073cfae4424536fdc2b89e0dc7cc3f5eb295617d46455 + checksum: 5ffecc25875784e8c194198f893c21bd5a64136b6ca2a6c3a4845ee331bc1f2a65d2cc9b2441ee0c9e06a4cdc27b167ac0edebec3adca603ecfaa549276ad632 languageName: node linkType: hard