styled-jsx: EuiMark

src-docs/src/routes.js

@@ -122,6 +122,8 @@ import { ListGroupExample } from './views/list_group/list_group_example';
 
 import { LoadingExample } from './views/loading/loading_example';
 
+import { MarkExample } from './views/mark/mark_example';
+
 import { ModalExample } from './views/modal/modal_example';
 
 import { MutationObserverExample } from './views/mutation_observer/mutation_observer_example';
@@ -358,6 +360,7 @@ const navigation = [
       InnerTextExample,
       I18nExample,
       IsColorDarkExample,
+      MarkExample,
       PrettyDurationExample,
       MutationObserverExample,
       OutsideClickDetectorExample,

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { EuiMark, EuiText } from '../../../../src/components';
+
+export default () => (
+  <React.Fragment>
+    <EuiText>
+      A <EuiMark>marked</EuiMark> thing
+    </EuiText>
+    <EuiText>
+      A <EuiMark type="strong">strong</EuiMark> thing
+    </EuiText>
+    <EuiText>
+      A, <EuiMark type="em">em</EuiMark> thing
+    </EuiText>
+  </React.Fragment>
+);

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

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import {
+  //EuiCode,
+  EuiMark,
+} from '../../../../src/components';
+
+import Mark from './mark';
+const markSource = require('!!raw-loader!./mark');
+const markHtml = renderToHtml(Mark);
+// const markSnippet = [
+//   `<EuiLink href="#"><!-- Link text --></EuiLink>
+// `,
+//   `<EuiLink href="#" color="secondary">
+//   <!-- Colored link text -->
+// </EuiLink>
+// `,
+// ];
+
+export const MarkExample = {
+  title: 'Mark',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: markSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: markHtml,
+        },
+      ],
+      text: <p />,
+      props: { EuiMark },
+      // snippet: markSnippet,
+      demo: <Mark />,
+    },
+  ],
+};

src/components/index.js

@@ -164,6 +164,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

@@ -36,6 +36,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';
@@ -59,4 +60,4 @@
 @import 'token/index';
 @import 'toggle/index';
 @import 'tool_tip/index';
-@import 'text/index';
+@import 'text/index';

src/components/mark/_index.scss

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

src/components/mark/_mark.scss

@@ -0,0 +1,39 @@
+@import '../../global_styling/context';
+
+.euiMark {
+  color: inherit;
+
+  &.euiMark--mark {
+    background-color: $euiColorVis5;
+  }
+
+  &.euiMark--strong {
+    background-color: transparent;
+    font-weight: $euiFontWeightBold;
+  }
+
+  &.euiMark--em {
+    background-color: transparent;
+    font-style: italic;
+  }
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark#Accessibility_concerns
+.euiMark:before,
+.euiMark:after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.euiMark:before {
+  content: ' [highlight start] ';
+}
+
+.euiMark:after {
+  content: ' [highlight end] ';
+}

src/components/mark/index.ts

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

src/components/mark/mark.tsx

@@ -0,0 +1,24 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import classnames from 'classnames';
+import { CommonProps } from '../common';
+
+type EuiMarkProps = CommonProps &
+  HTMLAttributes<HTMLElement> & {
+    type?: 'mark' | 'strong' | 'em';
+  };
+
+export const EuiMark: FunctionComponent<EuiMarkProps> = ({
+  children,
+  className,
+  type = 'mark',
+}) => {
+  const classes = classnames('euiMark', [`euiMark--${type}`], className);
+  return (
+    <mark className={classes}>
+      {children}
+      <style jsx>{`
+        @import 'mark';
+      `}</style>
+    </mark>
+  );
+};