Added EuiMark (elastic#3060)

CHANGELOG.md

@@ -12,6 +12,7 @@
 - Added alpha channel (opacity) support to `EuiColorPicker` and `EuiColorStops` ([#2850](https://github.com/elastic/eui/pull/2850))
 - Added `useResizeObserver` hook ([#2991](https://github.com/elastic/eui/pull/2991))
 - Added `showColumnSelector.allowHide` and `showColumnSelector.allowReorder` props to `EuiDataGrid` UI configuration ([#2993](https://github.com/elastic/eui/pull/2993))
+- Added `EuiMark` component ([#3060](https://github.com/elastic/eui/pull/3060))
 
 **Bug Fixes**
 

src-docs/src/routes.js

@@ -118,7 +118,7 @@ import { HeaderExample } from './views/header/header_example';
 
 import { HealthExample } from './views/health/health_example';
 
-import { HighlightExample } from './views/highlight/highlight_example';
+import { HighlightAndMarkExample } from './views/highlight_and_mark/highlight_and_mark_example';
 
 import { HorizontalRuleExample } from './views/horizontal_rule/horizontal_rule_example';
 
@@ -413,7 +413,7 @@ const navigation = [
       DelayRenderExample,
       ErrorBoundaryExample,
       FocusTrapExample,
-      HighlightExample,
+      HighlightAndMarkExample,
       InnerTextExample,
       I18nExample,
       IsColorDarkExample,

src-docs/src/views/highlight/highlight_example.js → src-docs/src/views/highlight_and_mark/highlight_and_mark_example.js

@@ -4,14 +4,19 @@ import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
 
-import { EuiCode, EuiHighlight } from '../../../../src/components';
+import { EuiCode, EuiHighlight, EuiMark } from '../../../../src/components';
 
 import { Highlight } from './highlight';
+import { Mark } from './mark';
+
 const highlightSource = require('!!raw-loader!./highlight');
 const highlightHtml = renderToHtml(Highlight);
 
-export const HighlightExample = {
-  title: 'Highlight',
+const markSource = require('!!raw-loader!./mark');
+const markHtml = renderToHtml(Mark);
+
+export const HighlightAndMarkExample = {
+  title: 'Highlight and mark',
   sections: [
     {
       title: 'Highlight',
@@ -35,5 +40,26 @@ export const HighlightExample = {
       components: { EuiHighlight },
       demo: <Highlight />,
     },
+    {
+      title: 'Mark',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: markSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: markHtml,
+        },
+      ],
+      text: (
+        <p>
+          Use <EuiCode>EuiMark</EuiCode> to wrap a string in an
+          <EuiCode>mark</EuiCode> element.
+        </p>
+      ),
+      components: { EuiMark },
+      demo: <Mark />,
+    },
   ],
 };

src-docs/src/views/highlight_and_mark/mark.js

@@ -0,0 +1,13 @@
+import React, { Fragment } from 'react';
+
+import { EuiMark } from '../../../../src/components';
+
+export function Mark() {
+  return (
+    <Fragment>
+      The quick brown fox
+      <EuiMark>jumped over</EuiMark>
+      the lazy dog
+    </Fragment>
+  );
+}

src/components/index.js

@@ -186,6 +186,8 @@ export { EuiLink } from './link';
 
 export { EuiListGroup, EuiListGroupItem } from './list_group';
 
+export { EuiMark } from './mark';
+
 export {
   EUI_MODAL_CANCEL_BUTTON,
   EUI_MODAL_CONFIRM_BUTTON,

src/components/index.scss

@@ -39,6 +39,7 @@
 @import 'link/index';
 @import 'list_group/index';
 @import 'loading/index';
+@import 'mark/index';
 @import 'modal/index';
 @import 'nav_drawer/index';
 @import 'overlay_mask/index';

src/components/mark/__snapshots__/mark.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiMark is rendered 1`] = `
+<mark
+  class="euiMark"
+>
+  Marked
+</mark>
+`;

src/components/mark/_index.scss

@@ -0,0 +1 @@
+@import 'mark';

src/components/mark/_mark.scss

@@ -0,0 +1,4 @@
+.euiMark {
+  margin: $euiSizeXS;
+  padding: $euiSizeXS;
+}

src/components/mark/index.ts

@@ -0,0 +1 @@
+export { EuiMark } from './mark';

src/components/mark/mark.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from 'enzyme';
+
+import { EuiMark } from './mark';
+
+describe('EuiMark', () => {
+  test('is rendered', () => {
+    const component = render(<EuiMark>Marked</EuiMark>);
+
+    expect(component).toMatchSnapshot();
+  });
+});

src/components/mark/mark.tsx

@@ -0,0 +1,21 @@
+import React, { HTMLAttributes, FunctionComponent } from 'react';
+import { CommonProps } from '../common';
+import classNames from 'classnames';
+export type EuiMarkProps = HTMLAttributes<HTMLElement> &
+  CommonProps & {
+    children: string;
+  };
+
+export const EuiMark: FunctionComponent<EuiMarkProps> = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const classes = classNames('euiMark', className);
+
+  return (
+    <mark className={classes} {...rest}>
+      {children}
+    </mark>
+  );
+};