@gitlab/ui 37.2.0 → 37.3.0

package/documentation/documented_stories.js

@@ -77,6 +77,7 @@ export const setupStorybookReadme = () =>
         'GlSorting',
         'GlSortingItem',
         'GlIcon',
+        'GlSafeLinkDirective',
         'GlDashboardSkeleton',
         'GlToggle',
         'GlNavbar',
@@ -113,6 +114,7 @@ export const setupStorybookReadme = () =>
         'GlChartTooltip',
         'GlInputGroupText',
         'GlGaugeChart',
+        'GlSafeHtmlDirective',
         'GlFormRadio',
         'GlModal',
         'GlKeysetPagination',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "37.2.0",
+  "version": "37.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/directives/safe_html/safe_html.md

@@ -1,9 +1,5 @@
-# Safe Html
-
 A Vue Directive to sanitize HTML to avoid any XSS vulnerabilities.
 
-<!-- STORY -->
-
 ## Usage
 
 This directive can be used to sanitize HTML code which may contain user input, to prevent cross-site

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

@@ -1,50 +1,59 @@
-import { withKnobs, text } from '@storybook/addon-knobs';
 import { sanitize } from 'dompurify';
-import { escape } from 'lodash';
-import { documentedStoriesOf } from '../../../documentation/documented_stories';
-import { GlSafeHtmlDirective } from '../../index';
+import { GlSafeHtmlDirective as GlSafeHtml } from '../../index';
 import readme from './safe_html.md';
 
-documentedStoriesOf('directives/safe-html-directive', readme)
-  .addDecorator(withKnobs)
-  .addParameters({ storyshots: false, knobs: { escapeHTML: false } })
-  .add('default', () => ({
-    directives: {
-      'gl-safe-html': GlSafeHtmlDirective,
-    },
-    props: {
-      unsafeHTML: {
-        type: String,
-        default: text('Unsafe HTML', '<a href="javascript:alert(document.domain)">Click me</a>'),
-      },
+const generateProps = ({
+  unsafeHTML = '<a href="javascript:alert(document.domain)">Click me</a>',
+} = {}) => ({
+  unsafeHTML,
+});
+
+export const Default = (_args, { argTypes }) => ({
+  directives: {
+    GlSafeHtml,
+  },
+  props: Object.keys(argTypes),
+  computed: {
+    sanitizedHtml() {
+      return sanitize(this.unsafeHTML);
     },
-    computed: {
-      sanitizedHtml() {
-        return sanitize(this.unsafeHTML);
+  },
+  template: `
+  <table class="gl-table">
+    <thead>
+      <tr>
+        <th>Directive</th>
+        <th>Output</th>
+        <th>Rendered</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><strong>v-html</strong></td>
+        <td><code>{{ unsafeHTML }}</code></td>
+        <td>N/A for security reasons</td>
+      </tr>
+      <tr>
+        <td><strong>v-safe-html</strong></td>
+        <td><code>{{ sanitizedHtml }}</code></td>
+        <td v-gl-safe-html="unsafeHTML"></td>
+      </tr>
+    </tbody>
+  </table>
+  `,
+});
+Default.args = generateProps();
+
+export default {
+  title: 'directives/safe-html-directive',
+  component: GlSafeHtml,
+  parameters: {
+    storyshots: { disable: true },
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
       },
     },
-    escape,
-    template: `
-    <table class="gl-table">
-      <thead>
-        <tr>
-          <th>Directive</th>
-          <th>Output</th>
-          <th>Rendered</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td><strong>v-html</strong></td>
-          <td><code v-html="$options.escape(unsafeHTML)"></code></td>
-          <td>N/A for security reasons</td>
-        </tr>
-        <tr>
-          <td><strong>v-safe-html</strong></td>
-          <td><code v-html="$options.escape(sanitizedHtml)"></code></td>
-          <td v-gl-safe-html="unsafeHTML"></td>
-        </tr>
-      </tbody>
-    </table>
-    `,
-  }));
+  },
+};

package/src/directives/safe_link/safe_link.documentation.js

@@ -3,5 +3,4 @@ import description from './safe_link.md';
 export default {
   followsDesignSystem: false,
   description,
-  examples: false,
 };

package/src/directives/safe_link/safe_link.md

@@ -1,9 +1,5 @@
-# Safe Link Directive
-
 A Vue directive to make the hyperlinks secure by default.
 
-<!-- STORY -->
-
 ## Security measures
 
 ### rel

package/src/directives/safe_link/safe_link.stories.js

@@ -1,6 +1,3 @@
-import { withKnobs, text, select } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../documentation/documented_stories';
-import { targetOptions } from '../../utils/constants';
 import { SafeLinkDirective as SafeLink } from './safe_link';
 import readme from './safe_link.md';
 
@@ -9,31 +6,35 @@ const directives = {
 };
 
 // eslint-disable-next-line no-script-url
-function generateProps({ href = 'javascript:alert(1)', target = '_blank' } = {}) {
-  return {
-    href: {
-      type: String,
-      default: text('href', href),
-    },
-    target: {
-      type: String,
-      default: select('target', targetOptions, target),
-    },
-  };
-}
+const generateProps = ({ href = 'javascript:alert(1)', target = '_blank' } = {}) => ({
+  href,
+  target,
+});
+
+export const Default = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  directives,
+  template: `
+    <a
+      :href="href"
+      :target="target"
+      v-safe-link
+    >
+      This is a secure link
+    </a>`,
+});
+Default.args = generateProps();
 
-documentedStoriesOf('directives/safe-link-directive', readme)
-  .addParameters({ storyshots: false })
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    directives,
-    template: `
-      <a
-        :href="href"
-        :target="target"
-        v-safe-link
-      >
-          This is a secure link
-      </a>`,
-  }));
+export default {
+  title: 'directives/safe-link-directive',
+  component: SafeLink,
+  parameters: {
+    knobs: { disable: true },
+    storyshots: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/scss/utilities.scss

@@ -410,6 +410,14 @@
   background-color: $orange-700 !important
 }
 
+.gl-bg-purple-50 {
+  background-color: $purple-50
+}
+
+.gl-bg-purple-50\! {
+  background-color: $purple-50 !important
+}
+
 .gl-bg-red-50 {
   background-color: $red-50
 }

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

@@ -142,6 +142,10 @@
   background-color: $orange-700;
 }
 
+@mixin gl-bg-purple-50 {
+  background-color: $purple-50;
+}
+
 @mixin gl-bg-red-50 {
   background-color: $red-50;
 }