@gitlab/ui 43.9.1 → 43.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.9.1",
+  "version": "43.10.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -57,7 +57,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.2",
     "bootstrap-vue": "2.20.1",
-    "dompurify": "^2.3.10",
+    "dompurify": "^2.4.0",
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
     "lodash": "^4.17.20",
@@ -77,11 +77,11 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.18.10",
+    "@babel/core": "^7.18.13",
     "@babel/preset-env": "^7.18.10",
-    "@gitlab/eslint-plugin": "16.0.0",
+    "@gitlab/eslint-plugin": "17.0.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.0.0",
+    "@gitlab/svgs": "3.2.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -94,15 +94,15 @@
     "@storybook/theming": "6.5.10",
     "@storybook/vue": "6.5.10",
     "@vue/test-utils": "1.3.0",
-    "@vue/vue2-jest": "27.0.0",
+    "@vue/vue2-jest": "29.0.0",
     "autoprefixer": "^9.7.6",
-    "babel-jest": "^27.5.1",
+    "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
     "bootstrap": "4.5.3",
-    "cypress": "^6.6.0",
+    "cypress": "^10.6.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.22.0",
     "eslint-import-resolver-jest": "3.0.2",
@@ -112,10 +112,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^27.5.1",
-    "jest-circus": "27.5.1",
-    "jest-environment-jsdom": "27.5.1",
-    "jest-raw-loader": "^1.0.1",
+    "jest": "^29.0.1",
+    "jest-circus": "29.0.1",
+    "jest-environment-jsdom": "29.0.1",
     "jest-serializer-vue": "^2.0.2",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
@@ -143,9 +142,9 @@
     "stylelint": "14.9.1",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-prettier": "2.0.0",
-    "vue": "2.7.9",
+    "vue": "2.7.10",
     "vue-loader": "^15.8.3",
-    "vue-template-compiler": "2.7.9"
+    "vue-template-compiler": "2.7.10"
   },
   "release": {
     "branches": [

package/src/components/base/alert/alert.scss

@@ -63,25 +63,6 @@
   @include gl-line-height-normal;
 }
 
-// Todo: deprecate the .gl-alert-dismiss styles after all instances from HAML and Ruby have been migrated
-.gl-alert-dismiss {
-  @include gl-absolute;
-  @include gl-top-0;
-  @include gl-right-0;
-  @include gl-p-5;
-  @include gl-line-height-normal;
-  @include gl-bg-none;
-  @include gl-border-none;
-  @include gl-text-gray-500;
-
-  > svg {
-    @include gl-fill-current-color;
-    @include gl-w-5;
-    @include gl-h-5;
-    @include gl-vertical-align-middle;
-  }
-}
-
 // This is the replacement for .gl-alert-dismiss
 .gl-dismiss-btn {
   @include gl-absolute;

package/src/components/base/markdown/markdown.scss

@@ -155,6 +155,22 @@
     @include gl-py-1;
   }
 
+  pre {
+    @include gl-py-3;
+    @include gl-px-4;
+    @include gl-rounded-base;
+    @include gl-inset-border-1-gray-100;
+    @include gl-my-7;
+    @include gl-overflow-auto;
+
+    code {
+      @include gl-bg-white;
+      @include gl-rounded-0;
+      @include gl-text-gray-900;
+      @include gl-p-0;
+    }
+  }
+
   .audio-container {
     @include gl-display-inline-flex;
     @include gl-flex-direction-column;

package/src/components/base/markdown/markdown_typescale_demo.html

@@ -1,32 +1,46 @@
 <h1>MD Doc h1 • GitLab uses "GitLab Flavored Markdown" (GFM)</h1>
-<p>MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-  significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-  requests, milestones, snippets and more.</p>
-<p class="sm">MD Doc Small Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
-  in a few significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues,
-  merge requests, milestones, snippets and more.</p>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
+<p class="sm">
+  MD Doc Small Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard
+  Markdown in a few significant ways to add some useful functionality. You can use GFM in the
+  following areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
 <p class="monospace">UI Monospace</p>
 <p class="monospace sm">UI Small Monospace</p>
 <h2>MD Doc h2 • GitLab uses "GitLab Flavored Markdown" (GFM)</h2>
-<p>MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-  significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-  requests, milestones, snippets and more.</p>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
 <h3>MD Doc h3 • GitLab uses "GitLab Flavored Markdown" (GFM)</h3>
-<p>MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-  significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-  requests, milestones, snippets and more.</p>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
 <h4>MD Doc h4 • GitLab uses "GitLab Flavored Markdown" (GFM)</h4>
-<p>MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-  significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-  requests, milestones, snippets and more.</p>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
 <h5>MD Doc h5 • GitLab uses "GitLab Flavored Markdown" (GFM)</h5>
-<p>MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-  significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-  requests, milestones, snippets and more.</p>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
 <h6>MD Doc h6 • GitLab uses "GitLab Flavored Markdown" (GFM)</h6>
-<p>MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-  significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-  requests, milestones, snippets and more.</p>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
 
 <table>
   <thead>
@@ -38,46 +52,31 @@
   </thead>
   <tbody>
     <tr>
+      <td>Test summary</td>
+      <td>Test summary contained 3 failed, 1 fixed test result out of 15 total tests</td>
       <td>
-        Test summary
-      </td>
-      <td>
-        Test summary contained 3 failed, 1 fixed test result out of 15 total tests
-      </td>
-      <td>
-        This is the only one that doesn't include the breakdown in the Level 1 subtext. Does it need to be updated?
+        This is the only one that doesn't include the breakdown in the Level 1 subtext. Does it need
+        to be updated?
       </td>
     </tr>
     <tr>
-      <td>
-        Browser performance
-      </td>
-      <td>
-        Browser performance test metrics: 7 changes
-      </td>
-      <td>
-        Browser performance test metrics detected 7 changes
-      </td>
+      <td>Browser performance</td>
+      <td>Browser performance test metrics: 7 changes</td>
+      <td>Browser performance test metrics detected 7 changes</td>
     </tr>
     <tr>
-      <td>
-        Load performance
-      </td>
-      <td>
-        Load performance test metrics detected 4 changes
-      </td>
-      <td>
-        ✅
-      </td>
+      <td>Load performance</td>
+      <td>Load performance test metrics detected 4 changes</td>
+      <td>✅</td>
     </tr>
   </tbody>
 </table>
 
 <blockquote>
   <p>
-    MD Doc Blockquote • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-    significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-    requests, milestones, snippets and more.
+    MD Doc Blockquote • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard
+    Markdown in a few significant ways to add some useful functionality. You can use GFM in the
+    following areas: comments, issues, merge requests, milestones, snippets and more.
   </p>
 </blockquote>
 <blockquote>
@@ -102,26 +101,55 @@
 </blockquote>
 <blockquote>
   <blockquote>
-    <p>
-      Nested blockquote
-    </p>
+    <p>Nested blockquote</p>
   </blockquote>
 </blockquote>
 <p>
   This is a paragraph with two types inline diff <span class="idiff addition">addition</span> and
   <span class="idiff deletion">deletion</span>
 </p>
-<p>
-  This block implements the "GitLab Flavored Markdown" <code>Code span</code> styles.
-</p>
+<p>This block implements the "GitLab Flavored Markdown" <code>Code span</code> styles.</p>
 
 <p>
   This is an audio file
   <span class="media-container audio-container">
-    <audio src="file.mp3" controls="true" data-setup="{}" data-title="file.mp3" data-canonical-src="file.mp3"
-      class="gfm">
-    </audio>
-    <a href="file.mp3" target="_blank" rel="noopener noreferrer" title="Download file.mp3" data-canonical-src="file.mp3"
-      data-link="true" class="gfm">file.mp3</a>
+    <audio
+      src="file.mp3"
+      controls="true"
+      data-setup="{}"
+      data-title="file.mp3"
+      data-canonical-src="file.mp3"
+      class="gfm"
+    ></audio>
+    <a
+      href="file.mp3"
+      target="_blank"
+      rel="noopener noreferrer"
+      title="Download file.mp3"
+      data-canonical-src="file.mp3"
+      data-link="true"
+      class="gfm"
+      >file.mp3</a
+    >
   </span>
 </p>
+<p>Code block</p>
+<pre class="code"><code>pre {
+  @include gl-py-4;
+  @include gl-px-6;
+
+  code {
+    @include gl-bg-white;
+    @include gl-rounded-0;
+    @include gl-text-gray-900;
+    @include gl-px-0;
+    @include gl-py-0;
+  }
+}
+</code></pre>
+<p>Code block with long lines scrolls horizontally</p>
+<pre
+  class="code"
+><code>MD Doc Small Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
+significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge requests, milestones, snippets and more.
+</code></pre>

package/src/components/regions/empty_state/empty_state.stories.js

@@ -1,3 +1,5 @@
+import securityDashboardEmptyStateSvg from '@gitlab/svgs/dist/illustrations/security-dashboard-empty-state.svg';
+import issuesSvg from '@gitlab/svgs/dist/illustrations/issues.svg';
 import { GlButton, GlEmptyState } from '../../../index';
 import readme from './empty_state.md';
 
@@ -24,7 +26,7 @@ const Template = (args) => ({
 
 const generateProps = ({
   title = 'This state is empty',
-  svgPath = 'https://gitlab.com/gitlab-org/gitlab-svgs/raw/v1.152.0/illustrations/security-dashboard-empty-state.svg',
+  svgPath = securityDashboardEmptyStateSvg,
   svgHeight = 145,
   description = 'The title and message should be clear, concise, and explain why the user is seeing this screen.',
   primaryButtonText = 'Something actionable',
@@ -134,7 +136,7 @@ export const SlottedDescription = (args) => ({
 });
 SlottedDescription.args = generateProps({
   title: 'Slotted description example',
-  svgPath: 'https://gitlab.com/gitlab-org/gitlab-svgs/raw/v1.152.0/illustrations/issues.svg',
+  svgPath: issuesSvg,
   primaryButtonText: 'Learn more',
   secondaryButtonText: null,
 });

package/src/directives/safe_html/safe_html.js

@@ -1,6 +1,8 @@
-import { sanitize } from 'dompurify';
+import DOMPurify from 'dompurify';
 import { forbiddenDataAttrs } from './constants';
 
+const { sanitize } = DOMPurify;
+
 // Mitigate against future dompurify mXSS bypasses by
 // avoiding additional serialize/parse round trip.
 // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1782

package/src/directives/safe_html/safe_html.stories.js

@@ -1,7 +1,9 @@
-import { sanitize } from 'dompurify';
+import DOMPurify from 'dompurify';
 import { GlSafeHtmlDirective as GlSafeHtml } from '../../index';
 import readme from './safe_html.md';
 
+const { sanitize } = DOMPurify;
+
 const generateProps = ({
   unsafeHTML = '<a href="javascript:alert(document.domain)">Click me</a>',
 } = {}) => ({