@gitlab/ui 37.1.0 → 37.4.0

package/src/components/base/tabs/tabs/tabs.stories.js

@@ -7,10 +7,8 @@ const components = {
   GlTab,
 };
 
-const defaultValue = (prop) => GlTabs.props[prop].default;
-
 const generateProps = ({
-  justified = defaultValue('justified'),
+  justified,
   actionPrimary = null,
   actionSecondary = null,
   actionTertiary = null,
@@ -238,7 +236,7 @@ WithScrollAndGrowing.parameters = {
 };
 
 export default {
-  title: 'base/tabs/tabs',
+  title: 'base/tabs',
   component: GlTabs,
   subcomponents: { GlTab, GlScrollableTabs },
   parameters: {

package/src/directives/hover_load/hover_load.md

@@ -1,5 +1,3 @@
-# Hover Load
-
 A Vue Directive to help with preloading resources when hovering over an element.
 
 ## Usage

package/src/directives/hover_load/hover_load.stories.js

@@ -1,5 +1,3 @@
-import { text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../documentation/documented_stories';
 import { GlHoverLoadDirective } from '../../index';
 import readme from './hover_load.md';
 
@@ -8,39 +6,46 @@ const directives = {
 };
 
 // eslint-disable-next-line no-script-url
-function generateProps({ endpoint = 'some/endpoint' } = {}) {
-  return {
-    endpoint: {
-      type: String,
-      default: text('endpoint', endpoint),
+const generateProps = ({ endpoint = 'some/endpoint' } = {}) => ({
+  endpoint,
+});
+
+export const Default = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  directives,
+  data: () => ({
+    isPreloaded: false,
+  }),
+  methods: {
+    handlePreload() {
+      fetch(this.endpoint);
+      this.isPreloaded = true;
     },
-  };
-}
+  },
+  template: `
+  <div>
+    <a
+      :href="endpoint"
+      v-gl-hover-load="handlePreload"
+    >
+        Hover me to preload
+    </a>
+    
+    <span>(Preloaded: {{isPreloaded}})</span>
+    </div>
+    `,
+});
+Default.args = generateProps();
 
-documentedStoriesOf('directives/hover-load-directive', readme)
-  .addParameters({ storyshots: false })
-  .add('default', () => ({
-    props: generateProps(),
-    directives,
-    data: () => ({
-      isPreloaded: false,
-    }),
-    methods: {
-      handlePreload() {
-        fetch(this.endpoint);
-        this.isPreloaded = true;
+export default {
+  title: 'directives/hover-load-directive',
+  component: GlHoverLoadDirective,
+  parameters: {
+    storyshots: { disable: true },
+    docs: {
+      description: {
+        component: readme,
       },
     },
-    template: `
-    <div>
-      <a
-        :href="endpoint"
-        v-gl-hover-load="handlePreload"
-      >
-          Hover me to preload
-      </a>
-      
-      <span>(Preloaded: {{isPreloaded}})</span>
-      </div>
-      `,
-  }));
+  },
+};

package/src/directives/resize_observer/resize_observer.documentation.js

@@ -1,8 +1,6 @@
-import examples from './examples';
 import description from './resize_observer.md';
 
 export default {
   followsDesignSystem: false,
   description,
-  examples,
 };

package/src/directives/resize_observer/resize_observer.md

@@ -1,9 +1,3 @@
-# Resize Observer
-
-<!-- STORY -->
-
-## Usage
-
 This directive can be used to get notified whenever a given element's size (width or height) changes
 and to retrieve the updated dimensions.
 

package/src/directives/resize_observer/resize_observer.stories.js

@@ -1,60 +1,79 @@
-import { withKnobs, select } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../documentation/documented_stories';
-import { GlResizeObserverDirective } from '../../index';
+import { GlResizeObserverDirective as GlResizeObserver } from '../../index';
 import readme from './resize_observer.md';
 
-documentedStoriesOf('directives/resize-observer-directive', readme)
-  .addParameters({ storyshots: false })
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: {
-      elementWidth: {
-        default: select('elementWidth', ['100%', '75%', '50%'], '100%'),
-      },
-      elementHeight: {
-        default: select('elementHeight', ['100%', '75%', '50%'], '100%'),
-      },
-    },
-    directives: {
-      'gl-resize-observer': GlResizeObserverDirective,
-    },
-    data() {
+const generateProps = ({ elementWidth = '100%', elementHeight = '100%' } = {}) => ({
+  elementWidth,
+  elementHeight,
+});
+
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  directives: {
+    GlResizeObserver,
+  },
+  data() {
+    return {
+      width: 0,
+      height: 0,
+    };
+  },
+  computed: {
+    wrapperStyles() {
       return {
-        width: 0,
-        height: 0,
+        height: '400px',
       };
     },
-    computed: {
-      wrapperStyles() {
-        return {
-          height: '400px',
-        };
-      },
-      elementStyles() {
-        return {
-          height: this.elementHeight,
-          width: this.elementWidth,
-        };
-      },
+    elementStyles() {
+      return {
+        height: this.elementHeight,
+        width: this.elementWidth,
+      };
     },
-    methods: {
-      handleResize({ contentRect: { width, height } }) {
-        this.width = Math.round(width);
-        this.height = Math.round(height);
-      },
+  },
+  methods: {
+    handleResize({ contentRect: { width, height } }) {
+      this.width = Math.round(width);
+      this.height = Math.round(height);
     },
-    template: `
+  },
+  template: `
+    <div
+      :style="wrapperStyles"
+      class="d-flex justify-content-center align-items-center">
       <div
-        :style="wrapperStyles"
-        class="d-flex justify-content-center align-items-center">
-        <div
-          v-gl-resize-observer="handleResize"
-          :style="elementStyles"
-          class="d-flex position-relative justify-content-center align-items-center bg-light text-dark">
-            <span class="d-inline-block p-2">
-              I am {{ width }}px wide and {{ height }}px high.
-            </span>
-        </div>
+        v-gl-resize-observer="handleResize"
+        :style="elementStyles"
+        class="d-flex position-relative justify-content-center align-items-center bg-light text-dark">
+          <span class="d-inline-block p-2">
+            I am {{ width }}px wide and {{ height }}px high.
+          </span>
       </div>
-    `,
-  }));
+    </div>
+  `,
+});
+Default.args = generateProps();
+
+const makeControl = () => ({
+  options: ['100%', '75%', '50%'],
+  control: {
+    type: 'select',
+  },
+});
+
+export default {
+  title: 'directives/resize-observer-directive',
+  component: GlResizeObserver,
+  parameters: {
+    knobs: { disable: true },
+    storyshots: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    elementWidth: makeControl(),
+    elementHeight: makeControl(),
+  },
+};

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;
 }

package/dist/components/base/form/form_group/examples/form_group/form_group.basic.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-group',{attrs:{"id":"group-id","label":"Label","label-size":"sm","description":"Form group description","label-for":"input1"}},[_c('gl-form-input',{attrs:{"id":"input1"}})],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/form_group/examples/form_group/form_group.disabled.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  computed: {
-    disabled() {
-      return true;
-    }
-
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-group',{attrs:{"id":"group-id","label":"Label Name","label-size":"sm","description":"This feature is disabled","label-for":"input1"}},[_c('gl-form-input',{attrs:{"id":"input1","type":"text","disabled":_vm.disabled,"value":"Disabled"}})],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/form_group/examples/form_group/form_group.textarea.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      text: ''
-    };
-  }
-
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-group',{attrs:{"id":"group-id-textarea1","label":"Label Name","label-for":"textarea1"}},[_c('gl-form-textarea',{attrs:{"id":"textarea1","placeholder":"Enter something"},model:{value:(_vm.text),callback:function ($$v) {_vm.text=$$v;},expression:"text"}})],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;