Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-docs.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSarah German <sgerman@gitlab.com>2022-07-07 10:47:33 +0300
committerDavid O'Regan <doregan@gitlab.com>2022-07-07 10:47:33 +0300
commitc8c0b1a8bbfebc193ea2e26ac79e3ddc3c0f8108 (patch)
tree88045641c6f51a4b8406041bc799542f146cdb83
parentd3ce55082b3df44d81eb577d89b5a66a9573d707 (diff)
Improve SVG icon handling
-rw-r--r--commands/frontend.rb11
-rw-r--r--content/frontend/shared/components/gl_icon.vue60
-rw-r--r--content/frontend/shared/constants.js1
-rw-r--r--package.json2
-rw-r--r--rollup.config.js8
-rw-r--r--spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap7
-rw-r--r--spec/frontend/shared/components/gl_icon_spec.js81
-rw-r--r--yarn.lock31
8 files changed, 24 insertions, 177 deletions
diff --git a/commands/frontend.rb b/commands/frontend.rb
index d8e662fd..7f93d113 100644
--- a/commands/frontend.rb
+++ b/commands/frontend.rb
@@ -28,17 +28,8 @@ 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...'
+ root = File.expand_path('../', __dir__)
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
deleted file mode 100644
index 73bd0124..00000000
--- a/content/frontend/shared/components/gl_icon.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<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/content/frontend/shared/constants.js b/content/frontend/shared/constants.js
deleted file mode 100644
index 0fc7a0b1..00000000
--- a/content/frontend/shared/constants.js
+++ /dev/null
@@ -1 +0,0 @@
-export const iconSizeOptions = [8, 10, 12, 14, 16, 18, 24, 32, 48, 72];
diff --git a/package.json b/package.json
index c0715237..7940dde2 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"@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",
@@ -44,7 +45,6 @@
"@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 8836b1e2..4fd51b49 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 image = require('@rollup/plugin-image');
+const url = require('@rollup/plugin-url');
const vue = require('rollup-plugin-vue');
function mapDirectory(file) {
@@ -27,7 +27,11 @@ module.exports = glob.sync('content/frontend/**/*.js').map((file) => ({
requireReturnsDefault: 'preferred',
}),
vue(),
- image(),
+ url({
+ destDir: 'public/assets/images',
+ publicPath: '/assets/images/',
+ fileName: 'icons.svg',
+ }),
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
deleted file mode 100644
index be478d99..00000000
--- a/spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// 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
deleted file mode 100644
index 76239651..00000000
--- a/spec/frontend/shared/components/gl_icon_spec.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * @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 d9a88043..e507015b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1486,14 +1486,6 @@
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"
@@ -1530,6 +1522,15 @@
"@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"
@@ -1539,7 +1540,7 @@
estree-walker "^1.0.1"
picomatch "^2.2.2"
-"@rollup/pluginutils@^4.2.0":
+"@rollup/pluginutils@^4.2.0", "@rollup/pluginutils@^4.2.1":
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==
@@ -5210,7 +5211,7 @@ make-dir@^2.1.0:
pify "^4.0.1"
semver "^5.6.0"
-make-dir@^3.0.0:
+make-dir@^3.0.0, make-dir@^3.1.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==
@@ -5363,6 +5364,11 @@ 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"
@@ -5373,11 +5379,6 @@ 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"