@gitlab/ui 42.11.0 → 42.13.1

package/dist/utils/test_utils.js

@@ -23,6 +23,10 @@ const getResetAnimationsCSS = () => `
     -ms-animation: none !important;
     -o-animation: none !important;
     animation: none !important;
+  }
+
+  input, textarea {
+    caret-color: transparent !important;
   }`;
 
 export { getResetAnimationsCSS, setStoryTimeout, waitForAnimationFrame };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "42.11.0",
+  "version": "42.13.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -81,9 +81,9 @@
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
-    "@gitlab/eslint-plugin": "12.3.0",
+    "@gitlab/eslint-plugin": "13.0.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "2.22.0",
+    "@gitlab/svgs": "2.25.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -105,10 +105,10 @@
     "bootstrap": "4.5.3",
     "cypress": "^6.6.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.18.0",
+    "eslint": "8.19.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "0.5.12",
+    "eslint-plugin-storybook": "0.5.13",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",

package/src/components/base/card/card.vue

@@ -32,7 +32,7 @@ export default {
 
 <template>
   <div class="gl-card">
-    <div v-if="$slots.header" class="gl-card-header" :class="headerClass">
+    <div v-if="$scopedSlots.header" class="gl-card-header" :class="headerClass">
       <!-- @slot The card's header content. -->
       <slot name="header"></slot>
     </div>
@@ -40,7 +40,7 @@ export default {
       <!-- @slot The card's main content. -->
       <slot></slot>
     </div>
-    <div v-if="$slots.footer" class="gl-card-footer" :class="footerClass">
+    <div v-if="$scopedSlots.footer" class="gl-card-footer" :class="footerClass">
       <!-- @slot The card's footer content. -->
       <slot name="footer"></slot>
     </div>

package/src/directives/safe_html/safe_html.js

@@ -6,7 +6,11 @@ import { forbiddenDataAttrs } from './constants';
 // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1782
 // and https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2127
 // for more details.
-const DEFAULT_CONFIG = { RETURN_DOM_FRAGMENT: true, FORBID_ATTR: [...forbiddenDataAttrs] };
+const DEFAULT_CONFIG = {
+  RETURN_DOM_FRAGMENT: true,
+  ALLOW_UNKNOWN_PROTOCOLS: true,
+  FORBID_ATTR: [...forbiddenDataAttrs],
+};
 
 const transform = (el, binding) => {
   if (binding.oldValue !== binding.value) {

package/src/directives/safe_html/safe_html.spec.js

@@ -2,6 +2,17 @@ import { shallowMount } from '@vue/test-utils';
 import { forbiddenDataAttrs } from './constants';
 import { SafeHtmlDirective as safeHtml } from './safe_html';
 
+/* eslint-disable no-script-url */
+const invalidProtocolUrls = [
+  'javascript:alert(1)',
+  'jAvascript:alert(1)',
+  'data:text/html,<script>alert(1);</script>',
+  ' javascript:',
+  'javascript :',
+];
+/* eslint-enable no-script-url */
+const validProtocolUrls = ['slack://open', 'x-devonthink-item://90909', 'x-devonthink-item:90909'];
+
 describe('safe html directive', () => {
   let wrapper;
 
@@ -46,6 +57,22 @@ describe('safe html directive', () => {
       expect(wrapper.html()).toEqual('<div>hello world</div>');
     });
 
+    describe('with non-http links', () => {
+      it.each(validProtocolUrls)('should allow %s', (url) => {
+        createComponent({
+          html: `<a href="${url}">internal link</a>`,
+        });
+        expect(wrapper.html()).toContain(`<a href="${url}">internal link</a>`);
+      });
+
+      it.each(invalidProtocolUrls)('should not allow %s', (url) => {
+        createComponent({
+          html: `<a href="${url}">internal link</a>`,
+        });
+        expect(wrapper.html()).toContain(`<a>internal link</a>`);
+      });
+    });
+
     describe('handles data attributes correctly', () => {
       const acceptedDataAttrs = ['data-safe', 'data-random'];
 

package/src/scss/utilities.scss

@@ -6178,12 +6178,6 @@
 .gl-gap-6\! {
   gap: $gl-spacing-scale-6 !important;
 }
-.gl-grid-gap-6 {
-  gap: $gl-spacing-scale-6;
-}
-.gl-grid-gap-6\! {
-  gap: $gl-spacing-scale-6 !important;
-}
 .gl-xs-mb-3 {
   @include gl-media-breakpoint-down(sm) {
   margin-bottom: $gl-spacing-scale-3;

package/src/scss/utility-mixins/spacing.scss

@@ -817,11 +817,6 @@
   gap: $gl-spacing-scale-6;
 }
 
-/* Deprecated */
-@mixin gl-grid-gap-6 {
-  @include gl-gap-6;
-}
-
 /**
 * Responsive margin utilities.
 *

package/src/utils/test_utils.js

@@ -26,4 +26,8 @@ export const getResetAnimationsCSS = () => `
     -ms-animation: none !important;
     -o-animation: none !important;
     animation: none !important;
+  }
+
+  input, textarea {
+    caret-color: transparent !important;
   }`;