diff options
author | Evan Read <eread@gitlab.com> | 2022-07-06 13:36:47 +0300 |
---|---|---|
committer | Evan Read <eread@gitlab.com> | 2022-07-06 13:36:47 +0300 |
commit | 374584a50b626ac90665b40465bde6ca0417ffa1 (patch) | |
tree | 13bfe7c1763be4ec232add36131df86449cac821 | |
parent | ed8428aa294b7c51fc332e60ad3a589f2db15656 (diff) | |
parent | 17ba820448e999d683b17950d65541a64f4182ba (diff) |
Merge branch 'revert-ed8428aa' into 'main'
Revert "Merge branch 'safari-svgs' into 'main'"
See merge request gitlab-org/gitlab-docs!2895
-rw-r--r-- | commands/frontend.rb | 10 | ||||
-rw-r--r-- | content/frontend/shared/components/gl_icon.vue | 60 | ||||
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | rollup.config.js | 8 | ||||
-rw-r--r-- | spec/frontend/shared/components/__snapshots__/gl_icon_spec.js.snap | 7 | ||||
-rw-r--r-- | spec/frontend/shared/components/gl_icon_spec.js | 81 | ||||
-rw-r--r-- | yarn.lock | 31 |
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); + }); + }); +}); @@ -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" |