Merge branch 'main' into clean/breadcrumb-updates

Signed-off-by: Josh Romero <[email protected]>

.babelrc.js

@@ -32,9 +32,9 @@ module.exports = {
     "./scripts/babel/variables-from-scss",
     "add-module-exports",
     // stage 3
-    "@babel/proposal-object-rest-spread",
+    "@babel/transform-object-rest-spread",
     // stage 2
-    "@babel/proposal-class-properties",
+    "@babel/transform-class-properties",
     [
       "inline-react-svg",
       {

CHANGELOG.md

@@ -17,6 +17,7 @@
 - Add slugs to markdown headers ([#1051](https://github.com/opensearch-project/oui/pull/1051))
 - Add `crossInCircleEmpty` and `power` icons ([#1044](https://github.com/opensearch-project/oui/pull/1044))
 - Add `Figma` icon and link to OUI Figma resources ([#1064](https://github.com/opensearch-project/oui/pull/1064))
+- Implement validation for icon input source & set default icon to `Beaker` ([#1137](https://github.com/opensearch-project/oui/pull/1137))
 
 ### 🐛 Bug Fixes
 
@@ -44,7 +45,7 @@
 - Bump `@types/react` and `csstype` ([#1105](https://github.com/opensearch-project/oui/pull/1105))
 - Add `scripts` folder to lint-es script ([#1143](https://github.com/opensearch-project/oui/pull/1143))
 - Clean up code OUI Breadcrumb component from previous updates ([#1144](https://github.com/opensearch-project/oui/pull/1144))
-
+- Update deprecated Babel plugins ([#1155](https://github.com/opensearch-project/oui/pull/1155))
 
 ### 🪛 Refactoring
 

i18ntokens.json

@@ -1643,14 +1643,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 275,
+        "line": 279,
         "column": 4,
-        "index": 10041
+        "index": 10184
       },
       "end": {
-        "line": 278,
+        "line": 282,
         "column": 46,
-        "index": 10201
+        "index": 10344
       }
     },
     "filepath": "src/components/datagrid/data_grid.tsx"
@@ -1661,14 +1661,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 281,
+        "line": 285,
         "column": 10,
-        "index": 10275
+        "index": 10418
       },
       "end": {
-        "line": 283,
+        "line": 287,
         "column": 52,
-        "index": 10397
+        "index": 10540
       }
     },
     "filepath": "src/components/datagrid/data_grid.tsx"
@@ -1679,14 +1679,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 990,
+        "line": 1004,
         "column": 4,
-        "index": 32868
+        "index": 33235
       },
       "end": {
-        "line": 995,
+        "line": 1009,
         "column": 53,
-        "index": 33041
+        "index": 33408
       }
     },
     "filepath": "src/components/datagrid/data_grid.tsx"
@@ -1697,14 +1697,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 990,
+        "line": 1004,
         "column": 4,
-        "index": 32868
+        "index": 33235
       },
       "end": {
-        "line": 995,
+        "line": 1009,
         "column": 53,
-        "index": 33041
+        "index": 33408
       }
     },
     "filepath": "src/components/datagrid/data_grid.tsx"
@@ -1715,14 +1715,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1031,
+        "line": 1045,
         "column": 20,
-        "index": 34079
+        "index": 34453
       },
       "end": {
-        "line": 1041,
+        "line": 1055,
         "column": 3,
-        "index": 34366
+        "index": 34740
       }
     },
     "filepath": "src/components/datagrid/data_grid.tsx"
@@ -1733,14 +1733,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1043,
+        "line": 1057,
         "column": 25,
-        "index": 34394
+        "index": 34768
       },
       "end": {
-        "line": 1052,
+        "line": 1066,
         "column": 3,
-        "index": 34644
+        "index": 35018
       }
     },
     "filepath": "src/components/datagrid/data_grid.tsx"
@@ -1751,14 +1751,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1171,
+        "line": 1185,
         "column": 18,
-        "index": 39758
+        "index": 40132
       },
       "end": {
-        "line": 1174,
+        "line": 1188,
         "column": 20,
-        "index": 39911
+        "index": 40285
       }
     },
     "filepath": "src/components/datagrid/data_grid.tsx"

package.json

@@ -136,10 +136,10 @@
     "@axe-core/puppeteer": "4.6.1",
     "@babel/cli": "^7.10.5",
     "@babel/core": "^7.11.4",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-async-to-generator": "^7.10.4",
+    "@babel/plugin-transform-class-properties": "^7.23.3",
+    "@babel/plugin-transform-object-rest-spread": "^7.23.3",
     "@babel/plugin-transform-runtime": "^7.11.0",
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "^7.10.4",

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

@@ -10184,7 +10184,7 @@ exports[`OuiIcon props type wrench is rendered 1`] = `
 </svg>
 `;
 
-exports[`OuiIcon renders custom components 1`] = `
+exports[`OuiIcon render different types of icons renders custom components 1`] = `
 <span
   aria-hidden="true"
   aria-label="heart"
@@ -10195,3 +10195,53 @@ exports[`OuiIcon renders custom components 1`] = `
   ❤️
 </span>
 `;
+
+exports[`OuiIcon render different types of icons renders custom svg from absolute url 1`] = `
+<img
+  alt=""
+  class="ouiIcon ouiIcon--medium"
+  src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg"
+/>
+`;
+
+exports[`OuiIcon render different types of icons renders custom svg from relative url 1`] = `
+<img
+  alt=""
+  class="ouiIcon ouiIcon--medium"
+  src="./assets/beaker.svg"
+/>
+`;
+
+exports[`OuiIcon render different types of icons renders default icon when type is not in OuiIconType 1`] = `
+<svg
+  aria-hidden="true"
+  class="ouiIcon ouiIcon--medium ouiIcon-isLoading"
+  focusable="false"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+  />
+</svg>
+`;
+
+exports[`OuiIcon render different types of icons renders icon when type is in cache 1`] = `
+<svg
+  aria-hidden="true"
+  class="ouiIcon ouiIcon--medium"
+  focusable="false"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M0 1.994C0 .893.895 0 1.994 0h12.012C15.107 0 16 .895 16 1.994v12.012A1.995 1.995 0 0 1 14.006 16H1.994A1.995 1.995 0 0 1 0 14.006V1.994Zm1 0v12.012c0 .548.446.994.994.994h12.012a.995.995 0 0 0 .994-.994V1.994A.995.995 0 0 0 14.006 1H1.994A.995.995 0 0 0 1 1.994ZM1 4h14v1H1V4Zm1.5-1a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1Zm3 0a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1Zm4.947 6.106a1 1 0 0 1 0 1.788l-3 2A1 1 0 0 1 6 12V8a1 1 0 0 1 1.447-.894l3 2ZM10 10 7 8v4l3-2Z"
+  />
+</svg>
+`;

src/components/icon/icon.test.tsx

@@ -135,23 +135,11 @@ describe('OuiIcon', () => {
     });
   });
 
-  it('renders custom components', () => {
-    const CustomIcon = ({ ...props }) => {
-      return (
-        <span role="img" aria-label="heart" {...props}>
-          ❤️
-        </span>
-      );
-    };
-    const component = mount(<OuiIcon type={CustomIcon} />);
-    expect(prettyHtml(component.html())).toMatchSnapshot();
-  });
-
   describe('appendIconComponentCache', () => {
     it('does nothing if not called', () => {
       const component = mount(<OuiIcon type="videoPlayer" />);
       expect(
-        component.find('OuiIcon[type="videoPlayer"] > OuiIconEmpty').length
+        component.find('OuiIcon[type="videoPlayer"] > OuiIconBeaker').length
       ).toBe(1);
     });
 
@@ -172,8 +160,47 @@ describe('OuiIcon', () => {
       });
       const component = mount(<OuiIcon type="accessibility" />);
       expect(
-        component.find('OuiIcon[type="accessibility"] > OuiIconEmpty').length
+        component.find('OuiIcon[type="accessibility"] > OuiIconBeaker').length
       ).toBe(1);
     });
   });
+
+  describe('render different types of icons', () => {
+    it('renders icon when type is in cache', () => {
+      appendIconComponentCache({
+        videoPlayer: OuiIconVideoPlayer,
+      });
+      const component = mount(<OuiIcon type="videoPlayer" />);
+      expect(prettyHtml(component.html())).toMatchSnapshot();
+    });
+
+    it('renders custom svg from absolute url', () => {
+      const component = mount(
+        <OuiIcon type="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" />
+      );
+      expect(prettyHtml(component.html())).toMatchSnapshot();
+    });
+
+    it('renders custom svg from relative url', () => {
+      const component = mount(<OuiIcon type="./assets/beaker.svg" />);
+      expect(prettyHtml(component.html())).toMatchSnapshot();
+    });
+
+    it('renders default icon when type is not in OuiIconType', () => {
+      const component = mount(<OuiIcon type="foo" />);
+      expect(prettyHtml(component.html())).toMatchSnapshot();
+    });
+
+    it('renders custom components', () => {
+      const CustomIcon = ({ ...props }) => {
+        return (
+          <span role="img" aria-label="heart" {...props}>
+            ❤️
+          </span>
+        );
+      };
+      const component = mount(<OuiIcon type={CustomIcon} />);
+      expect(prettyHtml(component.html())).toMatchSnapshot();
+    });
+  });
 });