@gitlab/ui 32.47.0 → 32.51.0

package/src/components/charts/gauge/gauge.stories.js

@@ -1,5 +1,3 @@
-import { withKnobs, object, number, text as textKnob, array } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { toolbox } from '../../../utils/charts/story_config';
 import readme from './gauge.md';
 import GlGauge from './gauge.vue';
@@ -16,7 +14,7 @@ const template = `
   />
 `;
 
-function generateProps({
+const generateProps = ({
   value = 48,
   min = 0,
   max = 100,
@@ -24,88 +22,74 @@ function generateProps({
   option = {},
   thresholds = [38, 82],
   splitNumber = 10,
-} = {}) {
-  return {
-    option: {
-      default: object('EChart Options', option),
-    },
-    value: {
-      default: number('Value', value),
-    },
-    min: {
-      default: number('Min', min),
-    },
-    max: {
-      default: number('Max', max),
-    },
-    thresholds: {
-      default: array('Thresholds', thresholds),
-    },
-    text: {
-      default: textKnob('Detail Text', text),
-    },
-    splitNumber: {
-      default: number('Split Number', splitNumber),
-    },
-  };
-}
+} = {}) => ({
+  option,
+  value,
+  min,
+  max,
+  thresholds,
+  text,
+  splitNumber,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlGauge },
+  props: Object.keys(argTypes),
+  template,
+});
 
-documentedStoriesOf('charts/gauge-chart', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components: { GlGauge },
-    template,
-  }))
-  .add('one threshold', () => ({
-    props: generateProps({
-      value: 65,
-      thresholds: [85],
-    }),
-    components: { GlGauge },
-    template,
-  }))
-  .add('two thresholds', () => ({
-    props: generateProps({
-      value: 90,
-      thresholds: [60, 85],
-    }),
-    components: { GlGauge },
-    template,
-  }))
-  .add('no thresholds', () => ({
-    props: generateProps({
-      value: 90,
-      thresholds: [],
-    }),
-    components: { GlGauge },
-    template,
-  }))
-  .add('with custom detail text', () => ({
-    props: generateProps({
-      value: 90,
-      text: '90Mbps',
-      thresholds: [60, 85],
-    }),
-    components: { GlGauge },
-    template,
-  }))
-  .add('with NaN values', () => ({
-    props: generateProps({
-      min: 'not a number value',
-      max: 'not a number value',
-      value: 'not a number value',
-      thresholds: [60, 85],
-    }),
-    components: { GlGauge },
-    template,
-  }))
-  .add('with toolbox', () => ({
-    props: generateProps({
-      option: {
-        toolbox,
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const OneThreshold = Template.bind({});
+OneThreshold.args = generateProps({
+  value: 65,
+  thresholds: [85],
+});
+
+export const TwoThresholds = Template.bind({});
+TwoThresholds.args = generateProps({
+  value: 90,
+  thresholds: [60, 85],
+});
+
+export const NoThresholds = Template.bind({});
+NoThresholds.args = generateProps({
+  value: 90,
+  thresholds: [],
+});
+
+export const WithCustomDetailText = Template.bind({});
+WithCustomDetailText.args = generateProps({
+  value: 90,
+  text: '90Mbps',
+  thresholds: [60, 85],
+});
+
+export const WithNaNValues = Template.bind({});
+WithNaNValues.args = generateProps({
+  min: 'not a number value',
+  max: 'not a number value',
+  value: 'not a number value',
+  thresholds: [60, 85],
+});
+
+export const WithToolbox = Template.bind({});
+WithToolbox.args = generateProps({
+  option: {
+    toolbox,
+  },
+});
+
+export default {
+  title: 'charts/gauge-chart',
+  component: GlGauge,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
       },
-    }),
-    components: { GlGauge },
-    template,
-  }));
+    },
+  },
+};

package/src/components/utilities/intersperse/intersperse.documentation.js

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

package/src/components/utilities/intersperse/intersperse.md

@@ -1,5 +1,3 @@
-## Intersperse
-
 The intersperse component separates a list of elements
 by a given character (the default is `, `).
 

package/src/components/utilities/intersperse/intersperse.stories.js

@@ -1,5 +1,3 @@
-import { array, text, withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlIntersperse } from '../../../../index';
 import readme from './intersperse.md';
 
@@ -11,44 +9,46 @@ const template = `
   </div>
   `;
 
-function generateProps({
+const generateProps = ({
   separator = ', ',
   lastSeparator = '',
   items = ['Foo', 'Bar', 'Baz', 'Qaz'],
-} = {}) {
-  return {
-    items: {
-      default: array('items', items),
-    },
-    separator: {
-      default: text('separator', separator),
-    },
-    lastSeparator: {
-      default: text('lastSeparator', lastSeparator),
-    },
-  };
-}
+} = {}) => ({
+  separator,
+  lastSeparator,
+  items,
+});
 
-documentedStoriesOf('utilities/intersperse', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components: {
-      GlIntersperse,
-    },
-    template,
-  }))
-  .add('custom seperator', () => ({
-    props: generateProps({ separator: '-' }),
-    components: {
-      GlIntersperse,
-    },
-    template,
-  }))
-  .add('custom last separator', () => ({
-    props: generateProps({ lastSeparator: ' and ' }),
-    components: {
-      GlIntersperse,
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlIntersperse,
+  },
+  props: Object.keys(argTypes),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'utilities/intersperse',
+  component: GlIntersperse,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
     },
-    template,
-  }));
+  },
+};
+
+export const CustomSeparator = Template.bind({});
+CustomSeparator.args = generateProps({
+  separator: '-',
+});
+
+export const CustomLastSeparator = Template.bind({});
+CustomLastSeparator.args = generateProps({
+  lastSeparator: ' and ',
+});

package/src/scss/utilities.scss

@@ -4313,6 +4313,22 @@
   max-width: $gl-spacing-scale-15 !important;
 }
 
+.gl-max-w-26 {
+  max-width: $gl-spacing-scale-26;
+}
+
+.gl-max-w-26\! {
+  max-width: $gl-spacing-scale-26 !important;
+}
+
+.gl-max-w-62 {
+  max-width: $gl-spacing-scale-62;
+}
+
+.gl-max-w-62\! {
+  max-width: $gl-spacing-scale-62 !important;
+}
+
 .gl-max-w-none {
   max-width: none;
 }

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

@@ -271,6 +271,14 @@
   max-width: $gl-spacing-scale-15;
 }
 
+@mixin gl-max-w-26 {
+  max-width: $gl-spacing-scale-26;
+}
+
+@mixin gl-max-w-62 {
+  max-width: $gl-spacing-scale-62;
+}
+
 @mixin gl-max-w-none {
   max-width: none;
 }

package/src/scss/variables.scss

@@ -18,6 +18,8 @@ $gl-spacing-scale-12: 10 * $grid-size;
 $gl-spacing-scale-13: 12 * $grid-size;
 $gl-spacing-scale-15: 15 * $grid-size;
 $gl-spacing-scale-20: 20 * $grid-size;
+$gl-spacing-scale-26: 26 * $grid-size;
+$gl-spacing-scale-62: 62 * $grid-size;
 
 // Responsive breakpoints
 

package/dist/components/base/avatar_labeled/examples/avatar.labeled.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-avatar-labeled',{attrs:{"size":32,"src":"https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64","label":"GitLab User","sub-label":"gitlab"}})};
-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/avatar_labeled/examples/avatar.labeled_badges.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-avatar-labeled',{attrs:{"size":32,"src":"https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64","label":"GitLab User","sub-label":"gitlab"},scopedSlots:_vm._u([{key:"meta",fn:function(){return [_c('div',{staticClass:"gl-p-1"},[_c('gl-badge',{staticClass:"gl-display-flex!",attrs:{"size":"sm","variant":"info"}},[_vm._v("2FA")])],1),_vm._v(" "),_c('div',{staticClass:"gl-p-1"},[_c('gl-badge',{staticClass:"gl-display-flex!",attrs:{"size":"sm","variant":"danger"}},[_vm._v("Blocked")])],1)]},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/avatar_labeled/examples/avatar.labeled_links.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-avatar-labeled',{attrs:{"size":32,"src":"https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64","label":"GitLab User","sub-label":"gitlab@example.com","label-link":"#","sub-label-link":"mailto:#"}})};
-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/avatar_labeled/examples/avatar.labeled_tooltip.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-avatar-labeled',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip",value:({ placement: 'bottom' }),expression:"{ placement: 'bottom' }"}],attrs:{"size":32,"src":"https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64","label":"GitLab User","sub-label":"gitlab","title":"Avatar labeled with tooltip"}})};
-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/avatar_labeled/examples/index.js

@@ -1,31 +0,0 @@
-import AvatarLabeledExample from './avatar.labeled.example';
-import AvatarLabeledBadgesExample from './avatar.labeled_badges.example';
-import AvatarLabeledSlotsExample from './avatar.labeled_links.example';
-import AvatarLabeledTooltipExample from './avatar.labeled_tooltip.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'avatar-labeled',
-    name: 'Avatar Labeled',
-    description: 'Avatar with text labels',
-    component: AvatarLabeledExample
-  }, {
-    id: 'avatar-labeled-tooltip',
-    name: 'With tooltip',
-    description: 'Avatar labeled with tooltip',
-    component: AvatarLabeledTooltipExample
-  }, {
-    id: 'avatar-labeled-badges',
-    name: 'With badges',
-    description: 'Avatar labeled with badges',
-    component: AvatarLabeledBadgesExample
-  }, {
-    id: 'avatar-labeled-links',
-    name: 'With label links',
-    description: 'Avatar labeled with links',
-    component: AvatarLabeledSlotsExample
-  }]
-}];
-
-export default index;

package/dist/components/base/avatars_inline/examples/avatars.inline.example.js

@@ -1,58 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      avatars: [{
-        src: 'https://picsum.photos/id/1005/24'
-      }, {
-        src: 'https://picsum.photos/id/1006/24'
-      }, {
-        src: 'https://picsum.photos/id/1009/24'
-      }, {
-        src: 'https://picsum.photos/id/1011/24'
-      }, {
-        src: 'https://picsum.photos/id/1012/24'
-      }]
-    };
-  }
-
-};
-
-/* 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-avatars-inline',{attrs:{"avatars":_vm.avatars,"collapsed":true,"avatar-size":24,"max-visible":2}})};
-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/avatars_inline/examples/avatars.inline_large.example.js

@@ -1,58 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      avatars: [{
-        src: 'https://picsum.photos/id/1005/32'
-      }, {
-        src: 'https://picsum.photos/id/1006/32'
-      }, {
-        src: 'https://picsum.photos/id/1009/32'
-      }, {
-        src: 'https://picsum.photos/id/1011/32'
-      }, {
-        src: 'https://picsum.photos/id/1012/32'
-      }]
-    };
-  }
-
-};
-
-/* 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-avatars-inline',{attrs:{"avatars":_vm.avatars,"collapsed":true,"avatar-size":32,"max-visible":2}})};
-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__;