@gitlab/ui 37.0.0 → 37.3.0

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_input_group/examples/form_input_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-input-group',{scopedSlots:_vm._u([{key:"prepend",fn:function(){return [_c('gl-input-group-text',[_vm._v("Username")])]},proxy:true},{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}])})};
-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_input_group/examples/form_input_group.predefined_options.example.js

@@ -1,54 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      optionValues: [{
-        name: 'Embed',
-        value: 'https://embed.com'
-      }, {
-        name: 'Share',
-        value: 'https://share.org'
-      }]
-    };
-  }
-
-};
-
-/* 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-input-group',{attrs:{"predefined-options":_vm.optionValues},scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}])})};
-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_input_group/examples/form_input_group.predefined_reactive.example.js

@@ -1,55 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      testVal: 'foo',
-      optionValues: [{
-        name: 'Embed',
-        value: 'https://embed.com'
-      }, {
-        name: 'Share',
-        value: 'https://share.org'
-      }]
-    };
-  }
-
-};
-
-/* 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('div',[_c('label',[_vm._v("\n      Data outside of the component\n      "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.testVal),expression:"testVal"}],staticClass:"gl-form-input",attrs:{"type":"text"},domProps:{"value":(_vm.testVal)},on:{"input":function($event){if($event.target.composing){ return; }_vm.testVal=$event.target.value;}}})]),_vm._v(" "),_c('gl-form-input-group',{attrs:{"predefined-options":_vm.optionValues},scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}]),model:{value:(_vm.testVal),callback:function ($$v) {_vm.testVal=$$v;},expression:"testVal"}})],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_input_group/examples/form_input_group.reactive.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      testVal: 'foo'
-    };
-  }
-
-};
-
-/* 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('div',[_c('label',[_vm._v("\n    Data outside of the component\n    "),_c('gl-form-input',{attrs:{"type":"text"},model:{value:(_vm.testVal),callback:function ($$v) {_vm.testVal=$$v;},expression:"testVal"}})],1),_vm._v(" "),_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"prepend",fn:function(){return [_c('gl-input-group-text',[_vm._v("Username")])]},proxy:true},{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}]),model:{value:(_vm.testVal),callback:function ($$v) {_vm.testVal=$$v;},expression:"testVal"}})],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_input_group/examples/index.js

@@ -1,27 +0,0 @@
-import BasicExample from './form_input_group.basic.example';
-import PredefinedOptionsExample from './form_input_group.predefined_options.example';
-import PredefinedReactiveExample from './form_input_group.predefined_reactive.example';
-import ReactiveExample from './form_input_group.reactive.example';
-
-var index = [{
-  name: 'Text Input Group',
-  items: [{
-    id: 'input-text-group',
-    name: 'Basic',
-    component: BasicExample
-  }, {
-    id: 'input-text-group-reactive',
-    name: 'Reactive update of/from the component',
-    component: ReactiveExample
-  }, {
-    id: 'input-text-group-predefined-options',
-    name: 'With predefined options',
-    component: PredefinedOptionsExample
-  }, {
-    id: 'input-text-group-predefined-reactive',
-    name: 'With predefined options and reactive updates',
-    component: PredefinedReactiveExample
-  }]
-}];
-
-export default index;

package/dist/components/base/tabs/tab/examples/index.js

@@ -1,13 +0,0 @@
-import BasicTabExample from './tab.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'tab-basic',
-    name: 'Basic',
-    description: 'Basic Tab',
-    component: BasicTabExample
-  }]
-}];
-
-export default index;

package/dist/components/base/tabs/tab/examples/tab.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-tabs',[_c('gl-tab',{attrs:{"title":"First"}},[_vm._v("first content")])],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/tabs/tab/tab.documentation.js

@@ -1,18 +0,0 @@
-import examples from './examples';
-
-var description = "### GlTab Component cannot be used alone\n\nIt must be used with `tabs` as the parent\n";
-
-var tab_documentation = {
-  description,
-  examples,
-  bootstrapComponent: 'b-tab',
-  followsDesignSystem: true,
-  propsInfo: {
-    queryParamValue: {
-      additionalInfo: 'Query string parameter value to use when `gl-tabs` `sync-active-tab-with-query-params` prop is set to `true`.',
-      type: String
-    }
-  }
-};
-
-export default tab_documentation;

package/dist/components/base/tabs/tabs/examples/index.js

@@ -1,60 +0,0 @@
-import BasicTabsExample from './tabs.basic.example';
-import ContentlessTabExample from './tabs.contentless_tab.example';
-import TabsWithCounterBadgesExample from './tabs.counterbadges.example';
-import CustomTitleExample from './tabs.custom_title.example';
-import DisabledTabExample from './tabs.disabled.example';
-import JustifiedTabsExample from './tabs.justified.example';
-import NoTabsExample from './tabs.no_tabs.example';
-import TabsScrollableExample from './tabs.scrollable.example';
-import TabsStylesOnlyExample from './tabs.styles_only.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'tabs-basic',
-    name: 'Basic',
-    description: 'Basic Tabs',
-    component: BasicTabsExample
-  }, {
-    id: 'tabs-disabled',
-    name: 'Disabled',
-    description: 'Disabled Tab',
-    component: DisabledTabExample
-  }, {
-    id: 'tabs-custom-title',
-    name: 'Custom Title',
-    description: 'Custom Title Tab',
-    component: CustomTitleExample
-  }, {
-    id: 'tabs-contentless-tab',
-    name: 'Contentless Tab',
-    description: 'Contentless Tab',
-    component: ContentlessTabExample
-  }, {
-    id: 'tabs-no-tabs',
-    name: 'Empty state when no tabs',
-    description: 'Empty state/content for when there are no tabs',
-    component: NoTabsExample
-  }, {
-    id: 'tabs-with-counter-badges',
-    name: 'Tabs with counter badges',
-    component: TabsWithCounterBadgesExample
-  }, {
-    id: 'tabs-styles-only',
-    name: 'Tabs styles only',
-    component: TabsStylesOnlyExample
-  }, {
-    id: 'justified-tabs',
-    name: 'Justified tabs',
-    component: JustifiedTabsExample
-  }]
-}, {
-  name: 'Scrollable',
-  items: [{
-    id: 'tabs-scrollable',
-    name: 'Scrollable tabs with lots of tabs',
-    component: TabsScrollableExample
-  }]
-}];
-
-export default index;

package/dist/components/base/tabs/tabs/examples/tabs.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-tabs',[_c('gl-tab',{attrs:{"title":"Tab 1"}},[_vm._v("Tab panel 1")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 2"}},[_vm._v("Tab panel 2")])],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/tabs/tabs/examples/tabs.contentless_tab.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-tabs',{scopedSlots:_vm._u([{key:"tabs-end",fn:function(){return [_c('li',{staticClass:"nav-item align-self-center"},[_vm._v("Contentless tab")])]},proxy:true}])},[_c('gl-tab',{attrs:{"title":"Regular tab"}},[_c('p',[_vm._v("Regular tab content.")]),_vm._v(" "),_c('p',[_vm._v("\n      The contentless tab is not selectable, as it has no content. This is useful for displaying\n      things that aren't really tabs after the list of tabs.\n    ")])]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Another tab"}},[_c('p',[_vm._v("Another tab's content.")])])],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/tabs/tabs/examples/tabs.counterbadges.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-tabs',[_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("Tab")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("500")]),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("items")])]},proxy:true}])},[_vm._v("\n    Tab panel 1\n  ")]),_vm._v(" "),_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("Tab")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("250")]),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("items")])]},proxy:true}])},[_vm._v("\n    Tab panel 2\n  ")]),_vm._v(" "),_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("Tab")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("250")]),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("items")])]},proxy:true}])},[_vm._v("\n    Tab panel 3\n  ")])],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/tabs/tabs/examples/tabs.custom_title.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-tabs',[_c('gl-tab',{attrs:{"title":"Tab 1"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('i',[_vm._v("custom")]),_vm._v(" "),_c('strong',[_vm._v("Title")])]},proxy:true}])},[_vm._v("\n    Tab panel 1\n  ")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 2"}},[_vm._v("Tab panel 2")])],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/tabs/tabs/examples/tabs.disabled.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-tabs',[_c('gl-tab',{attrs:{"title":"Tab 1"}},[_vm._v("Tab panel 1")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 2"}},[_vm._v("Tab panel 2")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 3","disabled":""}},[_vm._v("Disabled tab panel")])],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__;