From d227bbf7705201b255d9a519f48ccd6ef085f04a Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@forem.com>
Date: Mon, 24 Jan 2022 16:25:14 -0500
Subject: [PATCH] Now <viewbox /> is preserved in SVGs when using the
 inline-react-svg plugin (#16287)

---
 app/javascript/.storybook/main.js             | 21 ++++++++++++++++++-
 .../__snapshots__/Buttons.test.jsx.snap       |  4 ++--
 .../__snapshots__/Link.test.jsx.snap          |  4 ++--
 .../MultiSelectAutocomplete.test.jsx.snap     |  2 +-
 babel.config.js                               | 18 +++++++++++++++-
 5 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/app/javascript/.storybook/main.js b/app/javascript/.storybook/main.js
index ebbf1340d..9a75e680e 100644
--- a/app/javascript/.storybook/main.js
+++ b/app/javascript/.storybook/main.js
@@ -86,6 +86,25 @@ module.exports = {
   },
   babel: async (options) => ({
     ...options,
-    plugins: [...options.plugins, 'inline-react-svg'],
+    plugins: [
+      ...options.plugins,
+      [
+        'inline-react-svg',
+        {
+          svgo: {
+            plugins: [
+              {
+                name: 'preset-default',
+                params: {
+                  overrides: {
+                    removeViewBox: false,
+                  },
+                },
+              },
+            ],
+          },
+        },
+      ],
+    ],
   }),
 };
diff --git a/app/javascript/crayons/Buttons/__tests__/__snapshots__/Buttons.test.jsx.snap b/app/javascript/crayons/Buttons/__tests__/__snapshots__/Buttons.test.jsx.snap
index d0ecddc6d..d14852194 100644
--- a/app/javascript/crayons/Buttons/__tests__/__snapshots__/Buttons.test.jsx.snap
+++ b/app/javascript/crayons/Buttons/__tests__/__snapshots__/Buttons.test.jsx.snap
@@ -14,8 +14,8 @@ exports[`<Button /> renders with a tooltip 1`] = `"<button type=\\"button\\" cla
 
 exports[`<Button /> renders with additional classnames 1`] = `"<button type=\\"button\\" class=\\"c-btn one two three\\">Hello world!</button>"`;
 
-exports[`<Button /> renders with an icon and text 1`] = `"<button type=\\"button\\" class=\\"c-btn c-btn--icon-left\\"><svg class=\\"crayons-icon c-btn__icon\\" aria-hidden=\\"true\\" focusable=\\"false\\" width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"m12 1 9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 2.311L4.5 7.653v8.694l7.5 4.342 7.5-4.342V7.653L12 3.311zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z\\"></path></svg>Hello world!</button>"`;
+exports[`<Button /> renders with an icon and text 1`] = `"<button type=\\"button\\" class=\\"c-btn c-btn--icon-left\\"><svg class=\\"crayons-icon c-btn__icon\\" aria-hidden=\\"true\\" focusable=\\"false\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"m12 1 9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 2.311L4.5 7.653v8.694l7.5 4.342 7.5-4.342V7.653L12 3.311zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z\\"></path></svg>Hello world!</button>"`;
 
-exports[`<Button /> renders with an icon only 1`] = `"<button type=\\"button\\" class=\\"c-btn c-btn--icon-alone\\"><svg class=\\"crayons-icon c-btn__icon\\" aria-hidden=\\"true\\" focusable=\\"false\\" width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"m12 1 9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 2.311L4.5 7.653v8.694l7.5 4.342 7.5-4.342V7.653L12 3.311zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z\\"></path></svg></button>"`;
+exports[`<Button /> renders with an icon only 1`] = `"<button type=\\"button\\" class=\\"c-btn c-btn--icon-alone\\"><svg class=\\"crayons-icon c-btn__icon\\" aria-hidden=\\"true\\" focusable=\\"false\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"m12 1 9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 2.311L4.5 7.653v8.694l7.5 4.342 7.5-4.342V7.653L12 3.311zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z\\"></path></svg></button>"`;
 
 exports[`<Button /> should render a button as a specific button type (HTML type attribute) when buttonType is set. 1`] = `"<button type=\\"submit\\" class=\\"c-btn\\">Hello world!</button>"`;
diff --git a/app/javascript/crayons/Links/__tests__/__snapshots__/Link.test.jsx.snap b/app/javascript/crayons/Links/__tests__/__snapshots__/Link.test.jsx.snap
index 793ce9c7a..8ef189e6a 100644
--- a/app/javascript/crayons/Links/__tests__/__snapshots__/Link.test.jsx.snap
+++ b/app/javascript/crayons/Links/__tests__/__snapshots__/Link.test.jsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Link /> renders a link with icon alone 1`] = `"<a href=\\"/url\\" class=\\"c-link c-link--icon-alone\\"><svg class=\\"crayons-icon c-link__icon\\" aria-hidden=\\"true\\" focusable=\\"false\\" width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"m12 1 9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 2.311L4.5 7.653v8.694l7.5 4.342 7.5-4.342V7.653L12 3.311zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z\\"></path></svg></a>"`;
+exports[`<Link /> renders a link with icon alone 1`] = `"<a href=\\"/url\\" class=\\"c-link c-link--icon-alone\\"><svg class=\\"crayons-icon c-link__icon\\" aria-hidden=\\"true\\" focusable=\\"false\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"m12 1 9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 2.311L4.5 7.653v8.694l7.5 4.342 7.5-4.342V7.653L12 3.311zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z\\"></path></svg></a>"`;
 
 exports[`<Link /> renders block link 1`] = `"<a href=\\"/url\\" class=\\"c-link c-link--block\\">Hello world!</a>"`;
 
@@ -12,4 +12,4 @@ exports[`<Link /> renders rounded link 1`] = `"<a href=\\"/url\\" class=\\"c-lin
 
 exports[`<Link /> renders with additional classnames 1`] = `"<a href=\\"/url\\" class=\\"c-link one two three\\">Hello world!</a>"`;
 
-exports[`<Link /> renders with icon and text 1`] = `"<a href=\\"/url\\" class=\\"c-link c-link--icon-left\\"><svg class=\\"crayons-icon c-link__icon\\" aria-hidden=\\"true\\" focusable=\\"false\\" width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"m12 1 9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 2.311L4.5 7.653v8.694l7.5 4.342 7.5-4.342V7.653L12 3.311zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z\\"></path></svg>Hello world!</a>"`;
+exports[`<Link /> renders with icon and text 1`] = `"<a href=\\"/url\\" class=\\"c-link c-link--icon-left\\"><svg class=\\"crayons-icon c-link__icon\\" aria-hidden=\\"true\\" focusable=\\"false\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"m12 1 9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 2.311L4.5 7.653v8.694l7.5 4.342 7.5-4.342V7.653L12 3.311zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z\\"></path></svg>Hello world!</a>"`;
diff --git a/app/javascript/crayons/MultiSelectAutocomplete/__tests__/__snapshots__/MultiSelectAutocomplete.test.jsx.snap b/app/javascript/crayons/MultiSelectAutocomplete/__tests__/__snapshots__/MultiSelectAutocomplete.test.jsx.snap
index 61e1d361b..851060faa 100644
--- a/app/javascript/crayons/MultiSelectAutocomplete/__tests__/__snapshots__/MultiSelectAutocomplete.test.jsx.snap
+++ b/app/javascript/crayons/MultiSelectAutocomplete/__tests__/__snapshots__/MultiSelectAutocomplete.test.jsx.snap
@@ -4,4 +4,4 @@ exports[`<MultiSelectAutocomplete /> renders default UI 1`] = `"<span aria-hidde
 
 exports[`<MultiSelectAutocomplete /> renders with customisation 1`] = `"<span aria-hidden=\\"true\\" class=\\"absolute pointer-events-none opacity-0 p-2\\"></span><label id=\\"multi-select-label\\" class=\\"screen-reader-only\\">Example label</label><span id=\\"input-description\\" class=\\"screen-reader-only\\"></span><div class=\\"screen-reader-only\\"><p>Selected items:</p><ul class=\\"screen-reader-only list-none\\" aria-live=\\"assertive\\" aria-atomic=\\"false\\" aria-relevant=\\"additions removals\\"></ul></div><div class=\\"c-autocomplete--multi relative\\"><div role=\\"combobox\\" aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" aria-owns=\\"listbox1\\" class=\\"c-autocomplete--multi__wrapper border-none p-0 flex items-center  cursor-text\\"><ul id=\\"combo-selected\\" class=\\"list-none flex flex-wrap w-100\\"><li class=\\"self-center\\" style=\\"order: 1;\\"><input id=\\"example-input-id\\" autocomplete=\\"off\\" class=\\"c-autocomplete--multi__input\\" aria-autocomplete=\\"list\\" aria-labelledby=\\"multi-select-label selected-items-list\\" aria-describedby=\\"input-description\\" aria-disabled=\\"false\\" type=\\"text\\" placeholder=\\"Example placeholder\\"></li></ul></div></div>"`;
 
-exports[`<MultiSelectAutocomplete /> renders with default values 1`] = `"<span aria-hidden=\\"true\\" class=\\"absolute pointer-events-none opacity-0 p-2\\"></span><label id=\\"multi-select-label\\" class=\\"\\">Example label</label><span id=\\"input-description\\" class=\\"screen-reader-only\\"></span><div class=\\"screen-reader-only\\"><p>Selected items:</p><ul class=\\"screen-reader-only list-none\\" aria-live=\\"assertive\\" aria-atomic=\\"false\\" aria-relevant=\\"additions removals\\"></ul></div><div class=\\"c-autocomplete--multi relative\\"><div role=\\"combobox\\" aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" aria-owns=\\"listbox1\\" class=\\"c-autocomplete--multi__wrapper-border crayons-textfield flex items-center  cursor-text\\"><ul id=\\"combo-selected\\" class=\\"list-none flex flex-wrap w-100\\"><li class=\\"c-autocomplete--multi__selection-list-item w-max\\" style=\\"order: 1;\\"><div role=\\"group\\" aria-label=\\"Default one\\" class=\\"flex mr-1 mb-1 w-max\\"><button type=\\"button\\" class=\\"c-btn c-btn--secondary c-autocomplete--multi__selected p-1 cursor-text\\" aria-label=\\"Edit Default one\\">Default one</button><button type=\\"button\\" class=\\"c-btn c-btn--secondary c-autocomplete--multi__selected p-1\\" aria-label=\\"Remove Default one\\"><svg class=\\"crayons-icon\\" width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z\\"></path></svg></button></div></li><li class=\\"c-autocomplete--multi__selection-list-item w-max\\" style=\\"order: 2;\\"><div role=\\"group\\" aria-label=\\"Default two\\" class=\\"flex mr-1 mb-1 w-max\\"><button type=\\"button\\" class=\\"c-btn c-btn--secondary c-autocomplete--multi__selected p-1 cursor-text\\" aria-label=\\"Edit Default two\\">Default two</button><button type=\\"button\\" class=\\"c-btn c-btn--secondary c-autocomplete--multi__selected p-1\\" aria-label=\\"Remove Default two\\"><svg class=\\"crayons-icon\\" width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z\\"></path></svg></button></div></li><li class=\\"self-center\\" style=\\"order: 3;\\"><input autocomplete=\\"off\\" class=\\"c-autocomplete--multi__input\\" aria-autocomplete=\\"list\\" aria-labelledby=\\"multi-select-label selected-items-list\\" aria-describedby=\\"input-description\\" aria-disabled=\\"false\\" type=\\"text\\" placeholder=\\"Add another...\\"></li></ul></div></div>"`;
+exports[`<MultiSelectAutocomplete /> renders with default values 1`] = `"<span aria-hidden=\\"true\\" class=\\"absolute pointer-events-none opacity-0 p-2\\"></span><label id=\\"multi-select-label\\" class=\\"\\">Example label</label><span id=\\"input-description\\" class=\\"screen-reader-only\\"></span><div class=\\"screen-reader-only\\"><p>Selected items:</p><ul class=\\"screen-reader-only list-none\\" aria-live=\\"assertive\\" aria-atomic=\\"false\\" aria-relevant=\\"additions removals\\"></ul></div><div class=\\"c-autocomplete--multi relative\\"><div role=\\"combobox\\" aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" aria-owns=\\"listbox1\\" class=\\"c-autocomplete--multi__wrapper-border crayons-textfield flex items-center  cursor-text\\"><ul id=\\"combo-selected\\" class=\\"list-none flex flex-wrap w-100\\"><li class=\\"c-autocomplete--multi__selection-list-item w-max\\" style=\\"order: 1;\\"><div role=\\"group\\" aria-label=\\"Default one\\" class=\\"flex mr-1 mb-1 w-max\\"><button type=\\"button\\" class=\\"c-btn c-btn--secondary c-autocomplete--multi__selected p-1 cursor-text\\" aria-label=\\"Edit Default one\\">Default one</button><button type=\\"button\\" class=\\"c-btn c-btn--secondary c-autocomplete--multi__selected p-1\\" aria-label=\\"Remove Default one\\"><svg class=\\"crayons-icon\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z\\"></path></svg></button></div></li><li class=\\"c-autocomplete--multi__selection-list-item w-max\\" style=\\"order: 2;\\"><div role=\\"group\\" aria-label=\\"Default two\\" class=\\"flex mr-1 mb-1 w-max\\"><button type=\\"button\\" class=\\"c-btn c-btn--secondary c-autocomplete--multi__selected p-1 cursor-text\\" aria-label=\\"Edit Default two\\">Default two</button><button type=\\"button\\" class=\\"c-btn c-btn--secondary c-autocomplete--multi__selected p-1\\" aria-label=\\"Remove Default two\\"><svg class=\\"crayons-icon\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z\\"></path></svg></button></div></li><li class=\\"self-center\\" style=\\"order: 3;\\"><input autocomplete=\\"off\\" class=\\"c-autocomplete--multi__input\\" aria-autocomplete=\\"list\\" aria-labelledby=\\"multi-select-label selected-items-list\\" aria-describedby=\\"input-description\\" aria-disabled=\\"false\\" type=\\"text\\" placeholder=\\"Add another...\\"></li></ul></div></div>"`;
diff --git a/babel.config.js b/babel.config.js
index c20f2f7bf..63bc9dc89 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -69,7 +69,23 @@ module.exports = function (api) {
           pragma: 'h',
         },
       ],
-      'inline-react-svg',
+      [
+        'inline-react-svg',
+        {
+          svgo: {
+            plugins: [
+              {
+                name: 'preset-default',
+                params: {
+                  overrides: {
+                    removeViewBox: false,
+                  },
+                },
+              },
+            ],
+          },
+        },
+      ],
       [
         'module-resolver',
         {