From 03ab930870a5bcd5b762eab99a803f7279af010d Mon Sep 17 00:00:00 2001
From: Daniil Suvorov <severecloud@gmail.com>
Date: Fri, 26 Jan 2024 11:51:06 +0300
Subject: [PATCH] feat: add Mark (#6310)

* feat: add Mark

* test(Mark): add

* docs: review fix

Co-authored-by: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>

* test(e2e): use name

---------

Co-authored-by: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
---
 package.json                                  |  2 +-
 .../components/Mark/Mark.e2e-playground.tsx   | 16 ++++++++++
 .../vkui/src/components/Mark/Mark.e2e.tsx     |  9 ++++++
 .../vkui/src/components/Mark/Mark.module.css  |  8 +++++
 .../vkui/src/components/Mark/Mark.stories.tsx | 30 +++++++++++++++++++
 .../vkui/src/components/Mark/Mark.test.tsx    |  6 ++++
 packages/vkui/src/components/Mark/Mark.tsx    | 17 +++++++++++
 packages/vkui/src/components/Mark/Readme.md   | 17 +++++++++++
 .../mark-android-chromium-dark-1-snap.png     |  3 ++
 .../mark-android-chromium-light-1-snap.png    |  3 ++
 .../mark-ios-webkit-dark-1-snap.png           |  3 ++
 .../mark-ios-webkit-light-1-snap.png          |  3 ++
 .../mark-vkcom-chromium-dark-1-snap.png       |  3 ++
 .../mark-vkcom-chromium-light-1-snap.png      |  3 ++
 .../mark-vkcom-firefox-dark-1-snap.png        |  3 ++
 .../mark-vkcom-firefox-light-1-snap.png       |  3 ++
 .../mark-vkcom-webkit-dark-1-snap.png         |  3 ++
 .../mark-vkcom-webkit-light-1-snap.png        |  3 ++
 packages/vkui/src/index.ts                    |  2 ++
 styleguide/config.js                          |  1 +
 yarn.lock                                     | 10 +++----
 21 files changed, 142 insertions(+), 6 deletions(-)
 create mode 100644 packages/vkui/src/components/Mark/Mark.e2e-playground.tsx
 create mode 100644 packages/vkui/src/components/Mark/Mark.e2e.tsx
 create mode 100644 packages/vkui/src/components/Mark/Mark.module.css
 create mode 100644 packages/vkui/src/components/Mark/Mark.stories.tsx
 create mode 100644 packages/vkui/src/components/Mark/Mark.test.tsx
 create mode 100644 packages/vkui/src/components/Mark/Mark.tsx
 create mode 100644 packages/vkui/src/components/Mark/Readme.md
 create mode 100644 packages/vkui/src/components/Mark/__image_snapshots__/mark-android-chromium-dark-1-snap.png
 create mode 100644 packages/vkui/src/components/Mark/__image_snapshots__/mark-android-chromium-light-1-snap.png
 create mode 100644 packages/vkui/src/components/Mark/__image_snapshots__/mark-ios-webkit-dark-1-snap.png
 create mode 100644 packages/vkui/src/components/Mark/__image_snapshots__/mark-ios-webkit-light-1-snap.png
 create mode 100644 packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-chromium-dark-1-snap.png
 create mode 100644 packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-chromium-light-1-snap.png
 create mode 100644 packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-firefox-dark-1-snap.png
 create mode 100644 packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-firefox-light-1-snap.png
 create mode 100644 packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-webkit-dark-1-snap.png
 create mode 100644 packages/vkui/src/components/Mark/__image_snapshots__/mark-vkcom-webkit-light-1-snap.png

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 (
+    <ComponentPlayground {...props}>
+      {(props: MarkProps) => (
+        <div style={{ width: 300, padding: 10, lineHeight: '1.6' }}>
+          Ведь тебе нужен <Mark {...props}>Марк</Mark>, чтоб <Mark {...props}>получился марк</Mark>
+          етинг
+        </div>
+      )}
+    </ComponentPlayground>
+  );
+};
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(<MarkPlayground {...componentPlaygroundProps} />);
+  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<MarkProps> = {
+  title: 'Blocks/Mark',
+  component: Mark,
+  parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
+};
+
+export default story;
+
+type Story = StoryObj<MarkProps>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <p>
+      Это <Mark {...args}>выделенный</Mark> текст
+    </p>
+  ),
+  decorators: [
+    (Component) => (
+      <Group>
+        <Component />
+      </Group>
+    ),
+  ],
+};
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<HTMLDivElement>;
+
+/**
+ * Компонент используется для выделения фрагментов текста,
+ * например при поиске определенных слов или выделения текста в цитате.
+ *
+ * @since v6.1.0
+ * @see https://vkcom.github.io/VKUI/#/Mark
+ */
+export const Mark = (props: MarkProps) => (
+  <RootComponent baseClassName={styles['Mark']} Component="mark" {...props} />
+);
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 } }
+<Search value="где" disabled/>
+<Div style={{lineHeight:'1.6'}}>
+  Что? <Mark>Где</Mark>? Когда?
+  <br />
+  Кто хочет стать миллионером?
+  <br />
+  <Mark>Где</Mark> эта улица, <Mark>где</Mark> этот дом?
+  <br />
+  <Mark>Где</Mark> лучшие тусовки?
+  <br />
+</Div>
+```
+
+## Доступность
+
+Для данного компонента используется роль [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