From 73460528a0708789733ae54d77c0a58838e768ec Mon Sep 17 00:00:00 2001
From: Kate Sosedova <36230123+ek-so@users.noreply.github.com>
Date: Wed, 11 Dec 2024 16:33:27 +0100
Subject: [PATCH] Adding `contrast` and `contrastHigh` icons for the upcoming
 high contrast mode functionality (#8216)

Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
---
 packages/eui/changelogs/upcoming/8216.md      |  2 +
 packages/eui/src-docs/src/views/icon/icons.js |  2 +
 .../icon/__snapshots__/icon.test.tsx.snap     | 39 +++++++++++++++++++
 .../src/components/icon/assets/contrast.tsx   | 38 ++++++++++++++++++
 .../components/icon/assets/contrastHigh.tsx   | 37 ++++++++++++++++++
 packages/eui/src/components/icon/icon_map.ts  |  2 +
 .../eui/src/components/icon/svgs/contrast.svg |  3 ++
 .../src/components/icon/svgs/contrastHigh.svg |  3 ++
 .../components/display/icons/icon_types.ts    |  2 +
 .../developing/creating-icons.md              |  1 +
 10 files changed, 129 insertions(+)
 create mode 100644 packages/eui/changelogs/upcoming/8216.md
 create mode 100644 packages/eui/src/components/icon/assets/contrast.tsx
 create mode 100644 packages/eui/src/components/icon/assets/contrastHigh.tsx
 create mode 100644 packages/eui/src/components/icon/svgs/contrast.svg
 create mode 100644 packages/eui/src/components/icon/svgs/contrastHigh.svg

diff --git a/packages/eui/changelogs/upcoming/8216.md b/packages/eui/changelogs/upcoming/8216.md
new file mode 100644
index 00000000000..f63512126b3
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8216.md
@@ -0,0 +1,2 @@
+- Added two new icons: `contrast` and `contrastHigh`
+
diff --git a/packages/eui/src-docs/src/views/icon/icons.js b/packages/eui/src-docs/src/views/icon/icons.js
index a093cb19f6d..5191843d857 100644
--- a/packages/eui/src-docs/src/views/icon/icons.js
+++ b/packages/eui/src-docs/src/views/icon/icons.js
@@ -62,6 +62,8 @@ export const iconTypes = [
   'continuityAboveBelow',
   'continuityBelow',
   'continuityWithin',
+  'contrast',
+  'contrastHigh',
   'controlsHorizontal',
   'controlsVertical',
   'copy',
diff --git a/packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap b/packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap
index 692f493f252..5f04d92014a 100644
--- a/packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap
+++ b/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"
diff --git a/packages/eui/src/components/icon/assets/contrast.tsx b/packages/eui/src/components/icon/assets/contrast.tsx
new file mode 100644
index 00000000000..e3e29319321
--- /dev/null
+++ b/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;
diff --git a/packages/eui/src/components/icon/assets/contrastHigh.tsx b/packages/eui/src/components/icon/assets/contrastHigh.tsx
new file mode 100644
index 00000000000..a6533ab6b60
--- /dev/null
+++ b/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;
diff --git a/packages/eui/src/components/icon/icon_map.ts b/packages/eui/src/components/icon/icon_map.ts
index 854b9df7240..d5b3e27ffff 100644
--- a/packages/eui/src/components/icon/icon_map.ts
+++ b/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',
diff --git a/packages/eui/src/components/icon/svgs/contrast.svg b/packages/eui/src/components/icon/svgs/contrast.svg
new file mode 100644
index 00000000000..640caf5ce96
--- /dev/null
+++ b/packages/eui/src/components/icon/svgs/contrast.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM8.5 13.5H10.4017C10.9767 13.2486 11.5046 12.9096 11.9687 12.5H8.5V13.5ZM8.5 11.5H12.874C13.0986 11.1878 13.2939 10.8531 13.456 10.5H8.5V11.5ZM8.5 9.5H13.811C13.8943 9.17642 13.9512 8.84229 13.9795 8.5H8.5V9.5ZM8.5 7.5H13.9795C13.9512 7.15771 13.8943 6.82358 13.811 6.5H8.5V7.5ZM8.5 5.5H13.456C13.2939 5.14689 13.0986 4.81221 12.874 4.5H8.5V5.5ZM8.5 3.5H11.9687C11.5046 3.09038 10.9767 2.75143 10.4017 2.5H8.5V3.5ZM2 8C2 4.85467 4.42023 2.27461 7.5 2.02054L7.5 13.9795C4.42023 13.7254 2 11.1453 2 8Z"/>
+</svg>
diff --git a/packages/eui/src/components/icon/svgs/contrastHigh.svg b/packages/eui/src/components/icon/svgs/contrastHigh.svg
new file mode 100644
index 00000000000..09af78ab21e
--- /dev/null
+++ b/packages/eui/src/components/icon/svgs/contrastHigh.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path clip-rule="evenodd" d="M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM8 14V2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z"/>
+</svg>
diff --git a/packages/website/docs/components/display/icons/icon_types.ts b/packages/website/docs/components/display/icons/icon_types.ts
index edc9b6768df..8a2ff52c110 100644
--- a/packages/website/docs/components/display/icons/icon_types.ts
+++ b/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',
diff --git a/wiki/contributing-to-eui/developing/creating-icons.md b/wiki/contributing-to-eui/developing/creating-icons.md
index 2bf80e32c6f..b433cb41bd1 100644
--- a/wiki/contributing-to-eui/developing/creating-icons.md
+++ b/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