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

@@ -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",

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>
+  );
+};

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();
+});

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;
+}

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>
+    ),
+  ],
+};

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);
+});

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} />
+);

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).

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';

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`,

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