Merge branch 'revert-ed8428aa' into 'main'

Revert "Merge branch 'safari-svgs' into 'main'"

See merge request gitlab-org/gitlab-docs!2895

7 files changed, 176 insertions, 23 deletions

diff --git a/commands/frontend.rb b/commands/frontend.rb
index dd00c599..d8e662fd 100644
--- a/commands/frontend.rb
+++ b/commands/frontend.rb
@@ -28,6 +28,16 @@ run do |opts, args, cmd|
     ERROR
   end
 
+  puts 'Creating icons.svg ...'
+  root = File.expand_path('../', __dir__)
+  path = 'node_modules/@gitlab/svgs/dist/icons.svg'
+
+  if File.write('public/assets/images/icons.svg', File.read("#{root}/#{path}"))
+    puts 'Done!'
+  else
+    puts 'Failed to create icons.svg!'
+  end
+
   puts 'Copying GitLab UI CSS sourcemaps...'
   gl_ui_src = 'node_modules/@gitlab/ui/dist'
   gl_ui_dest = 'public/frontend/shared'
diff --git a/content/frontend/shared/components/gl_icon.vue b/content/frontend/shared/components/gl_icon.vue
new file mode 100644
index 00000000..73bd0124
--- /dev/null
+++ b/content/frontend/shared/components/gl_icon.vue
@@ -0,0 +1,60 @@
+<script>
+import data from '@gitlab/svgs/dist/icons.json';
+import { iconSizeOptions } from '../constants';
+
+let iconValidator = () => true;
+
+const { icons } = data;
+iconValidator = (value) => {
+  if (icons.includes(value)) {
+    return true;
+  }
+  // eslint-disable-next-line no-console
+  console.warn(`Icon '${value}' is not a known icon of @gitlab/svgs`);
+  return false;
+};
+
+/** This is a re-usable vue component for rendering a svg sprite icon
+ *  @example
+ *  <icon
+ *    name="retry"
+ *    :size="32"
+ *    class="top"
+ *  />
+ */
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+      validator: iconValidator,
+    },
+    size: {
+      type: Number,
+      required: false,
+      default: 16,
+      validator: (value) => iconSizeOptions.includes(value),
+    },
+    className: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  computed: {
+    iconSizeClass() {
+      return this.size ? `s${this.size}` : '';
+    },
+    iconHref() {
+      return `#${this.name}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <svg :class="['gl-icon', iconSizeClass, className]">
+    <use :href="iconHref" />
+  </svg>
+</template>
diff --git a/package.json b/package.json
index 886e7c37..734ccf2c 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
-    "@rollup/plugin-url": "^7.0.0",
     "@vue/test-utils": "^1.3.0",
     "@vue/vue2-jest": "^28.0.1",
     "babel-jest": "^28.1.2",
@@ -45,6 +44,7 @@
     "@gitlab/svgs": "^2.25.0",
     "@gitlab/ui": "^42.12.0",
     "@popperjs/core": "^2.11.5",
+    "@rollup/plugin-image": "^2.1.1",
     "algoliasearch": "^4.13.1",
     "bootstrap": "^4.6.1",
     "clipboard": "^2.0.11",
diff --git a/rollup.config.js b/rollup.config.js
index 4fd51b49..8836b1e2 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -7,7 +7,7 @@ const commonjs = require('@rollup/plugin-commonjs');
 const { babel } = require('@rollup/plugin-babel');
 const importResolver = require('rollup-plugin-import-resolver');
 const css = require('rollup-plugin-import-css');
-const url = require('@rollup/plugin-url');
+const image = require('@rollup/plugin-image');
 const vue = require('rollup-plugin-vue');
 
 function mapDirectory(file) {
@@ -27,11 +27,7 @@ module.exports = glob.sync('content/frontend/**/*.js').map((file) => ({
       requireReturnsDefault: 'preferred',
     }),
     vue(),
-    url({
-      destDir: 'public/assets/images',
-      publicPath: '/assets/images/',
-      fileName: 'icons.svg',
-    }),
+    image(),
     inject({
       exclude: 'node_modules/**',
     }),
diff --git a/spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap b/spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap
new file mode 100644
index 00000000..be478d99
--- /dev/null
+++ b/spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GlIcon component when created shows svg class "s8" and path "/path/to/icons.svg#check-circle" 1`] = `
+"<svg class=\\"gl-icon s8\\">
+  <use href=\\"#check-circle\\"></use>
+</svg>"
+`;
diff --git a/spec/frontend/shared/components/gl_icon_spec.js b/spec/frontend/shared/components/gl_icon_spec.js
new file mode 100644
index 00000000..76239651
--- /dev/null
+++ b/spec/frontend/shared/components/gl_icon_spec.js
@@ -0,0 +1,81 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import GlIcon from '../../../../content/frontend/shared/components/gl_icon.vue';
+import { iconSizeOptions } from '../../../../content/frontend/shared/constants';
+
+const ICONS_PATH = '/path/to/icons.svg';
+const TEST_SIZE = 8;
+const TEST_NAME = 'check-circle';
+
+const localVue = createLocalVue();
+
+jest.mock('@gitlab/svgs/dist/icons.svg', () => '/path/to/icons.svg');
+
+describe('GlIcon component', () => {
+  let wrapper;
+  let consoleSpy;
+
+  const createComponent = (props) => {
+    wrapper = shallowMount(GlIcon, {
+      propsData: {
+        size: TEST_SIZE,
+        name: TEST_NAME,
+        ...props,
+      },
+      localVue,
+    });
+  };
+
+  const validateSize = (size) => GlIcon.props.size.validator(size);
+  const validateName = (name) => GlIcon.props.name.validator(name);
+
+  afterEach(() => {
+    wrapper.destroy();
+
+    if (consoleSpy) {
+      consoleSpy.mockRestore();
+    }
+  });
+
+  describe('when created', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it(`shows svg class "s${TEST_SIZE}" and path "${ICONS_PATH}#${TEST_NAME}"`, () => {
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+
+  describe('size validator', () => {
+    const maxSize = Math.max(...iconSizeOptions);
+
+    it('fails with size outside options', () => {
+      expect(validateSize(maxSize + 10)).toBe(false);
+    });
+
+    it('passes with size in options', () => {
+      expect(validateSize(maxSize)).toBe(true);
+    });
+  });
+
+  describe('name validator', () => {
+    it('fails with name that does not exist', () => {
+      const badName = `${TEST_NAME}-bogus-zebra`;
+      consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+
+      expect(validateName(badName)).toBe(false);
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        `Icon '${badName}' is not a known icon of @gitlab/svgs`,
+      );
+    });
+
+    it('passes with name that exists', () => {
+      expect(validateName(TEST_NAME)).toBe(true);
+    });
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index e507015b..d9a88043 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1486,6 +1486,14 @@
     magic-string "^0.25.7"
     resolve "^1.17.0"
 
+"@rollup/plugin-image@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-image/-/plugin-image-2.1.1.tgz#898d6b59ac0025d7971ef45640ab330cb0663b0c"
+  integrity sha512-AgP4U85zuQJdUopLUCM+hTf45RepgXeTb8EJsleExVy99dIoYpt3ZlDYJdKmAc2KLkNntCDg6BPJvgJU3uGF+g==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    mini-svg-data-uri "^1.2.3"
+
 "@rollup/plugin-inject@^4.0.4":
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-inject/-/plugin-inject-4.0.4.tgz#fbeee66e9a700782c4f65c8b0edbafe58678fbc2"
@@ -1522,15 +1530,6 @@
     "@rollup/pluginutils" "^3.1.0"
     magic-string "^0.25.7"
 
-"@rollup/plugin-url@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-url/-/plugin-url-7.0.0.tgz#571f6fd51c3d0e00f7404c67efdb93492bfac7f8"
-  integrity sha512-cIWcEObrmEPAU8q8NluGWlCPlQDuoSKvkyI3eOFO4fx6W02mLNj4ZEiUT0X2mKMIvQzoWL1feEK9d1yr1ICgrw==
-  dependencies:
-    "@rollup/pluginutils" "^4.2.1"
-    make-dir "^3.1.0"
-    mime "^2.4.6"
-
 "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
@@ -1540,7 +1539,7 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rollup/pluginutils@^4.2.0", "@rollup/pluginutils@^4.2.1":
+"@rollup/pluginutils@^4.2.0":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
   integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
@@ -5211,7 +5210,7 @@ make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.0, make-dir@^3.1.0:
+make-dir@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -5364,11 +5363,6 @@ mime@^1.4.1:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^2.4.6:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
-  integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
-
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -5379,6 +5373,11 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"