@gitlab/ui 32.46.0 → 32.50.0

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

@@ -1,8 +1,5 @@
-import examples from './examples';
 import * as description from './gauge.md';
 
 export default {
   description,
-  examples,
-  propsInfo: {},
 };

package/src/components/charts/gauge/gauge.md

@@ -1,5 +1,3 @@
-### Gauge Chart
-
 Some layout problems can be encountered with this component. Specifically, when the gauge chart's
 axis labels or detail text have larger widths, they can overlap with the chart elements.
 

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/charts/tooltip/tooltip.documentation.js

@@ -1,9 +1,6 @@
-import examples from './examples';
 import description from './tooltip.md';
 
 export default {
   followsDesignSystem: false,
   description,
-  examples,
-  bootstrapComponent: 'b-popover',
 };

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

@@ -1,11 +1,9 @@
 import { GlChart, GlChartTooltip, GlChartSeriesLabel } from '../../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import {
   SERIES_NAME,
   SERIES_NAME_LONG,
   SERIES_NAME_LONG_WITHOUT_SPACES,
 } from '../../../utils/stories_utils';
-
 import readme from './tooltip.md';
 
 const components = {
@@ -33,10 +31,9 @@ const baseStoryOptions = {
   },
 };
 
-const getStoryOptions = (tooltipContent) => {
-  return {
-    ...baseStoryOptions,
-    template: `<div class="position-relative">
+const getStoryOptions = (tooltipContent) => ({
+  ...baseStoryOptions,
+  template: `<div class="position-relative">
     <gl-chart
       :options="options"
       :height="100"
@@ -57,43 +54,61 @@ const getStoryOptions = (tooltipContent) => {
       ${tooltipContent}
     </gl-chart-tooltip>
 </div>`,
-  };
-};
+});
+
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...getStoryOptions('Example Content'),
+});
+
+export const WithLongSeriesLabel = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...getStoryOptions(`
+        <gl-chart-series-label color="#1F78D1">${SERIES_NAME[SERIES_NAME_LONG]}</gl-chart-series-label>
+      `),
+});
 
-documentedStoriesOf('charts/chart-tooltip', readme)
-  .add('default', () => getStoryOptions('Example Content'))
-  .add('with long series label', () =>
-    getStoryOptions(`
-      <gl-chart-series-label color="#1F78D1">${SERIES_NAME[SERIES_NAME_LONG]}</gl-chart-series-label>
-    `)
-  )
-  .add('with long series label with no spaces', () =>
-    getStoryOptions(`
-      <gl-chart-series-label color="#1F78D1">${SERIES_NAME[SERIES_NAME_LONG_WITHOUT_SPACES]}</gl-chart-series-label>
-    `)
-  )
+export const WithLongSeriesLabelWithNoSpaces = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...getStoryOptions(`
+        <gl-chart-series-label color="#1F78D1">${SERIES_NAME[SERIES_NAME_LONG_WITHOUT_SPACES]}</gl-chart-series-label>
+      `),
+});
 
-  // This story exists to avoid regressions as part of
-  // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1482, and may be affected
-  // by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1479
-  .add('title prop', () => ({
-    ...baseStoryOptions,
-    template: `
-      <div class="position-relative">
-        <gl-chart
-          :options="options"
-          :height="100"
-          @created="onCreated"
-        />
-        <gl-chart-tooltip
-          v-if="chart"
-          :chart="chart"
-          :show="showTooltip"
-          :top="top"
-          :left="left"
-          title="Title from prop"
-        >
-          Example content
-        </gl-chart-tooltip>
-      </div>`,
-  }));
+export const TitleProp = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...baseStoryOptions,
+  template: `
+        <div class="position-relative">
+          <gl-chart
+            :options="options"
+            :height="100"
+            @created="onCreated"
+          />
+          <gl-chart-tooltip
+            v-if="chart"
+            :chart="chart"
+            :show="showTooltip"
+            :top="top"
+            :left="left"
+            title="Title from prop"
+          >
+            Example content
+          </gl-chart-tooltip>
+        </div>`,
+});
+
+export default {
+  title: 'charts/chart-tooltip',
+  component: GlChartTooltip,
+  parameters: {
+    bootstrapComponent: 'b-popover',
+    knobs: { disable: true },
+    controls: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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