Adding contrast and contrastHigh icons for the upcoming high cont…

…rast mode functionality (#8216)

Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

packages/eui/changelogs/upcoming/8216.md

@@ -0,0 +1,2 @@
+- Added two new icons: `contrast` and `contrastHigh`
+

packages/eui/src-docs/src/views/icon/icons.js

@@ -62,6 +62,8 @@ export const iconTypes = [
   'continuityAboveBelow',
   'continuityBelow',
   'continuityWithin',
+  'contrast',
+  'contrastHigh',
   'controlsHorizontal',
   'controlsVertical',
   'copy',

packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap

@@ -1781,6 +1781,45 @@ exports[`EuiIcon props type continuityWithin is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type contrast is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="contrast"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    clip-rule="evenodd"
+    d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm.5-1.5h1.902a6.004 6.004 0 0 0 1.567-1H8.5v1Zm0-2h4.374c.225-.312.42-.647.582-1H8.5v1Zm0-2h5.311c.083-.324.14-.658.168-1H8.5v1Zm0-2h5.48a5.988 5.988 0 0 0-.169-1H8.5v1Zm0-2h4.956a5.996 5.996 0 0 0-.582-1H8.5v1Zm0-2h3.469a6.004 6.004 0 0 0-1.567-1H8.5v1ZM2 8a6 6 0 0 1 5.5-5.98v11.96A6 6 0 0 1 2 8Z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type contrastHigh is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="contrastHigh"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    clip-rule="evenodd"
+    d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-7 6V2a6 6 0 1 0 0 12Z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type controlsHorizontal is rendered 1`] = `
 <svg
   aria-hidden="true"

packages/eui/src/components/icon/assets/contrast.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import type { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const EuiIconContrast = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm.5-1.5h1.902a6.004 6.004 0 0 0 1.567-1H8.5v1Zm0-2h4.374c.225-.312.42-.647.582-1H8.5v1Zm0-2h5.311c.083-.324.14-.658.168-1H8.5v1Zm0-2h5.48a5.988 5.988 0 0 0-.169-1H8.5v1Zm0-2h4.956a5.996 5.996 0 0 0-.582-1H8.5v1Zm0-2h3.469a6.004 6.004 0 0 0-1.567-1H8.5v1ZM2 8a6 6 0 0 1 5.5-5.98v11.96A6 6 0 0 1 2 8Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export const icon = EuiIconContrast;

packages/eui/src/components/icon/assets/contrastHigh.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import type { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const EuiIconContrastHigh = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-7 6V2a6 6 0 1 0 0 12Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export const icon = EuiIconContrastHigh;

packages/eui/src/components/icon/icon_map.ts

@@ -69,6 +69,8 @@ export const typeToPathMap = {
   continuityAboveBelow: 'continuityAboveBelow',
   continuityBelow: 'continuityBelow',
   continuityWithin: 'continuityWithin',
+  contrast: 'contrast',
+  contrastHigh: 'contrastHigh',
   controlsHorizontal: 'controls_horizontal',
   controlsVertical: 'controls_vertical',
   copy: 'copy',

packages/website/docs/components/display/icons/icon_types.ts

@@ -52,6 +52,8 @@ export const iconTypes: Array<IconType> = [
   'continuityAboveBelow',
   'continuityBelow',
   'continuityWithin',
+  'contrast',
+  'contrastHigh',
   'controlsHorizontal',
   'controlsVertical',
   'copy',

wiki/contributing-to-eui/developing/creating-icons.md

@@ -66,6 +66,7 @@ _1. Add your glyph to the `EuiIcon` component_
 
 _2. Display the icon in the docs_
 - Add the icon name to `/packages/eui/src-docs/src/views/icon/icons.js` *
+- Add the icon name to `/packages/website/docs/components/display/icons/icon_types.ts` *
 
 _3. Compile and test_
 - Go to the `packages/eui` directory