@gitlab/ui 32.47.0 → 32.48.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [32.48.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.47.0...v32.48.0) (2021-12-13)
+
+
+### Features
+
+* **GlAvatarsInline:** Migrate storybook story ([0720510](https://gitlab.com/gitlab-org/gitlab-ui/commit/07205105cb98e8493cfe3f8b70191707175ca8a9))
+
 # [32.47.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.46.0...v32.47.0) (2021-12-13)
 
 

package/dist/components/base/avatar_labeled/avatar_labeled.documentation.js

@@ -1,15 +1,8 @@
-import examples from './examples';
-
-var description = "# Avatar labeled\n\n<!-- STORY -->\n## Usage\n\nAvatars may also be adjacent to a text alternative, such as a user or project name. In these cases,\na null `alt` text should be used so that they can be ignored by assistive technologies.\n\nUse the `avatar-labeled` component in those scenarios. It will set a null `alt` text by default.\nIt allows to display a `label` and/or a `sub-label` next to the avatar image. It accepts the same\nproperties as the avatar component to modify the avatar’s shape and size.\n\n## Using the component\n\n~~~js\n<gl-avatar-labeled\n  :shape=\"shape\"\n  :size=\"size\"\n  :src=\"src\"\n  :label=\"label\"\n  :sub-label=\"subLabel\"\n/>\n~~~\n";
+var description = "## Usage\n\nAvatars may also be adjacent to a text alternative, such as a user or project name. In these cases,\na null `alt` text should be used so that they can be ignored by assistive technologies.\n\nUse the `avatar-labeled` component in those scenarios. It will set a null `alt` text by default.\nIt allows to display a `label` and/or a `sub-label` next to the avatar image. It accepts the same\nproperties as the avatar component to modify the avatar’s shape and size.\n\n## Using the component\n\n```js\n<gl-avatar-labeled\n  :shape=\"shape\"\n  :size=\"size\"\n  :src=\"src\"\n  :label=\"label\"\n  :sub-label=\"subLabel\"\n/>\n```\n";
 
 var avatar_labeled_documentation = {
   followsDesignSystem: true,
-  description,
-  examples,
-  slots: [{
-    name: 'meta',
-    description: 'Meta data to add to the avatar. Generally used for badges or user status emoji.'
-  }]
+  description
 };
 
 export default avatar_labeled_documentation;

package/dist/components/base/avatars_inline/avatars_inline.documentation.js

@@ -1,6 +1,4 @@
-import examples from './examples';
-
-var avatars_inline = "## Avatars inline\n\nUse `<avatars-inline />` to display multiple avatars organized in a single row.\n\n### Basic usage\n\nThe `avatars` property accepts an array of objects that contains the avatar properties. By default,\n`<avatars-inline />` expects each object contained in the array to have the same shape as the\nproperties of the  `<avatar />` component. You can customize the display of each avatar by\noverriding the default slot:\n\n```html\n<gl-avatars-inline :avatars=\"avatars\">\n  <template #avatar=\"{ avatar }\">\n    <gl-avatar-link v-gl-tooltip target=\"blank\" :href=\"avatar.href\" :title=\"avatar.tooltip\">\n      <gl-avatar :src=\"avatar.src\" :size=\"32\" />\n    </gl-avatar-link>\n  </template>\n</gl-avatars-inline>\n```\n\nIn the example above, the avatars displayed inside `<avatars-inline />` are links pointing to a URL\nstored in each avatar object. Each avatar also displays a tooltip. If you override\n`<inline-avatars />` default display, you can pass an array of objects with any desired shape to\nthe `avatars` property.\n\n### Collapsing\n\nWhen the `collapse` property value is `true` and the `maxVisible` property value is a number less\nthan the length of the `avatars` property array, `<avatars-inline>` will hide the overflown avatars\nand display a badge instead.\n\n### Supported sizes\n\n`<avatars-inline>` only supports avatars with `24` or `32` size.\n";
+var avatars_inline = "Use `<avatars-inline />` to display multiple avatars organized in a single row.\n\n### Basic usage\n\nThe `avatars` property accepts an array of objects that contains the avatar properties. By default,\n`<avatars-inline />` expects each object contained in the array to have the same shape as the\nproperties of the `<avatar />` component. You can customize the display of each avatar by\noverriding the default slot:\n\n```html\n<gl-avatars-inline :avatars=\"avatars\">\n  <template #avatar=\"{ avatar }\">\n    <gl-avatar-link v-gl-tooltip target=\"blank\" :href=\"avatar.href\" :title=\"avatar.tooltip\">\n      <gl-avatar :src=\"avatar.src\" :size=\"32\" />\n    </gl-avatar-link>\n  </template>\n</gl-avatars-inline>\n```\n\nIn the example above, the avatars displayed inside `<avatars-inline />` are links pointing to a URL\nstored in each avatar object. Each avatar also displays a tooltip. If you override\n`<inline-avatars />` default display, you can pass an array of objects with any desired shape to\nthe `avatars` property.\n\n### Collapsing\n\nWhen the `collapse` property value is `true` and the `maxVisible` property value is a number less\nthan the length of the `avatars` property array, `<avatars-inline>` will hide the overflown avatars\nand display a badge instead.\n\n### Supported sizes\n\n`<avatars-inline>` only supports avatars with `24` or `32` size.\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9,8 +7,7 @@ var description = /*#__PURE__*/Object.freeze({
 
 var avatars_inline_documentation = {
   followsDesignSystem: true,
-  description,
-  examples
+  description
 };
 
 export default avatars_inline_documentation;

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

@@ -1,6 +1,4 @@
-import examples from './examples';
-
-var gauge = "### Gauge Chart\n\nSome layout problems can be encountered with this component. Specifically, when the gauge chart's\naxis labels or detail text have larger widths, they can overlap with the chart elements.\n\nAlso, when the containing element of the gauge chart has either of a small calculated `width` and\n`height`, its axis width could become bulkier in relation to other chart elements. This is because\nat this time [eCharts only allows for setting the axis line width in absolute units](https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.width).\n\nThis issue is to be addressed by [https://gitlab.com/gitlab-org/gitlab-ui/-/issues/916](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/916).\n";
+var gauge = "Some layout problems can be encountered with this component. Specifically, when the gauge chart's\naxis labels or detail text have larger widths, they can overlap with the chart elements.\n\nAlso, when the containing element of the gauge chart has either of a small calculated `width` and\n`height`, its axis width could become bulkier in relation to other chart elements. This is because\nat this time [eCharts only allows for setting the axis line width in absolute units](https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.width).\n\nThis issue is to be addressed by [https://gitlab.com/gitlab-org/gitlab-ui/-/issues/916](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/916).\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -8,9 +6,7 @@ var description = /*#__PURE__*/Object.freeze({
 });
 
 var gauge_documentation = {
-  description,
-  examples,
-  propsInfo: {}
+  description
 };
 
 export default gauge_documentation;

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

@@ -1,11 +1,8 @@
-import examples from './examples';
-
-var description = "## Intersperse\n\nThe intersperse component separates a list of elements\nby a given character (the default is `, `).\n\nIt takes all direct descendants of its default slot and inserts\nthe given separator between each item:\n\n`item 1, item 2, item 3`\n\nOptionally the character used for separating each item and the last separator can be set\nindependently:\n\n* `separator=\"/\"`  renders `item 1/item 2/item 3`\n* `lastSeparator=\" and \"` will render `item 1, item 2, and item 3`\n* `lastSeparator=\" and \"` and given two items will render `item 1 and item 2`\n\n**Note**:\n\nThe component provides an inline context since the result is wrapped in a `span`.\n\nAlso, whitespace elements that are direct children of the default-slot get removed to ensure\nconsistent formatting.\n\n## Usage\n\n### Default\n\n```html\n<gl-intersperse>\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>, <span>Item 2</span>, <span>Item 3</span></span>\n```\n\n### Custom Separator\n\nA custom separator can be defined via the `separator` prop:\n\n```html\n<gl-intersperse separator=\"/\">\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>/<span>Item 2</span>/<span>Item 3</span></span>\n```\n\n### Custom Last Separator\n\nA custom last separator can be defined via the `lastSeparator` prop:\n\n```html\n<gl-intersperse last-separator=\" and \">\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>, <span>Item 2</span>, and <span>Item 3</span></span>\n```\n\nA custom last separator used on two items will only place `lastSeparator` between them:\n\n```html\n<gl-intersperse last-separator=\" and \">\n    <span>Item 1</span>\n    <span>Item 2</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span> and <span>Item 2</span></span>\n```\n";
+var description = "The intersperse component separates a list of elements\nby a given character (the default is `, `).\n\nIt takes all direct descendants of its default slot and inserts\nthe given separator between each item:\n\n`item 1, item 2, item 3`\n\nOptionally the character used for separating each item and the last separator can be set\nindependently:\n\n* `separator=\"/\"`  renders `item 1/item 2/item 3`\n* `lastSeparator=\" and \"` will render `item 1, item 2, and item 3`\n* `lastSeparator=\" and \"` and given two items will render `item 1 and item 2`\n\n**Note**:\n\nThe component provides an inline context since the result is wrapped in a `span`.\n\nAlso, whitespace elements that are direct children of the default-slot get removed to ensure\nconsistent formatting.\n\n## Usage\n\n### Default\n\n```html\n<gl-intersperse>\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>, <span>Item 2</span>, <span>Item 3</span></span>\n```\n\n### Custom Separator\n\nA custom separator can be defined via the `separator` prop:\n\n```html\n<gl-intersperse separator=\"/\">\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>/<span>Item 2</span>/<span>Item 3</span></span>\n```\n\n### Custom Last Separator\n\nA custom last separator can be defined via the `lastSeparator` prop:\n\n```html\n<gl-intersperse last-separator=\" and \">\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>, <span>Item 2</span>, and <span>Item 3</span></span>\n```\n\nA custom last separator used on two items will only place `lastSeparator` between them:\n\n```html\n<gl-intersperse last-separator=\" and \">\n    <span>Item 1</span>\n    <span>Item 2</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span> and <span>Item 2</span></span>\n```\n";
 
 var intersperse_documentation = {
   followsDesignSystem: false,
-  description,
-  examples
+  description
 };
 
 export default intersperse_documentation;

package/documentation/documented_stories.js

@@ -60,6 +60,7 @@ export const setupStorybookReadme = () =>
         'GlTableLite',
         'GlAlert',
         'GlSparklineChart',
+        'GlAvatarsInline',
         'GlSprintf',
         'GlLink',
         'GlChart',
@@ -88,7 +89,9 @@ export const setupStorybookReadme = () =>
         'GlFormCheckbox',
         'GlAccordion',
         'GlAccordionItem',
+        'GlIntersperse',
         'GlDaterangePicker',
+        'GlAvatarLabeled',
         'GlBarChart',
         'GlCarousel',
         'GlMarkdown',
@@ -107,6 +110,7 @@ export const setupStorybookReadme = () =>
         'GlFormCombobox',
         'GlChartTooltip',
         'GlInputGroupText',
+        'GlGaugeChart',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

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

package/src/components/base/avatar_labeled/avatar_labeled.documentation.js

@@ -1,15 +1,6 @@
 import description from './avatar_labeled.md';
-import examples from './examples';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  slots: [
-    {
-      name: 'meta',
-      description:
-        'Meta data to add to the avatar. Generally used for badges or user status emoji.',
-    },
-  ],
 };

package/src/components/base/avatar_labeled/avatar_labeled.md

@@ -1,6 +1,3 @@
-# Avatar labeled
-
-<!-- STORY -->
 ## Usage
 
 Avatars may also be adjacent to a text alternative, such as a user or project name. In these cases,
@@ -12,7 +9,7 @@ properties as the avatar component to modify the avatar’s shape and size.
 
 ## Using the component
 
-~~~js
+```js
 <gl-avatar-labeled
   :shape="shape"
   :size="size"
@@ -20,4 +17,4 @@ properties as the avatar component to modify the avatar’s shape and size.
   :label="label"
   :sub-label="subLabel"
 />
-~~~
+```

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

@@ -1,62 +1,32 @@
-import { text, withKnobs, select } from '@storybook/addon-knobs';
 import Vue from 'vue';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './avatar_labeled.md';
 
 Vue.directive('gl-tooltip', GlTooltipDirective);
 
-function generateProps() {
-  const props = {
-    label: {
-      type: String,
-      default: text('label', 'GitLab User'),
-    },
-    subLabel: {
-      type: String,
-      default: text('subLabel', '@gitlab'),
-    },
-    size: {
-      type: Number,
-      default: select('size', avatarSizeOptions, 32),
-    },
-    shape: {
-      type: String,
-      default: select('shape', avatarShapeOptions, 'circle'),
-    },
-    src: {
-      type: String,
-      default: text(
-        'src',
-        'https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64'
-      ),
-    },
-  };
-
-  return props;
-}
-
-function generateTooltipProps() {
-  const props = {
-    tooltipText: {
-      type: String,
-      default: text('tooltipText', 'Avatar tooltip'),
-    },
-    placement: {
-      type: String,
-      default: select('placement', tooltipPlacements, 'top'),
-    },
-  };
+const generateProps = ({
+  label = 'GitLab User',
+  subLabel = '@gitlab',
+  size = 32,
+  shape = 'circle',
+  src = 'https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64',
+} = {}) => ({
+  label,
+  subLabel,
+  size,
+  shape,
+  src,
+});
 
-  return props;
-}
+const generateTooltipProps = ({ tooltipText = 'Avatar tooltip', placement = 'top' } = {}) => ({
+  tooltipText,
+  placement,
+});
 
-documentedStoriesOf('base/avatar/labeled', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    template: `
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar-labeled
         :shape="shape"
         :size="size"
@@ -65,13 +35,12 @@ documentedStoriesOf('base/avatar/labeled', readme)
         :sub-label="subLabel"
       />
     `,
-  }))
-  .add('with-tooltip', () => ({
-    props: {
-      ...generateProps(),
-      ...generateTooltipProps(),
-    },
-    template: `
+});
+Default.args = generateProps();
+
+export const WithTooltip = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar-labeled
         :shape="shape"
         :size="size"
@@ -82,10 +51,20 @@ documentedStoriesOf('base/avatar/labeled', readme)
         v-gl-tooltip="{ placement }"
       />
     `,
-  }))
-  .add('with-badges', () => ({
-    props: generateProps(),
-    template: `
+});
+WithTooltip.args = { ...generateProps(), ...generateTooltipProps() };
+WithTooltip.argTypes = {
+  placement: {
+    control: {
+      type: 'select',
+      options: tooltipPlacements,
+    },
+  },
+};
+
+export const WithBadges = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar-labeled
         :shape="shape"
         :size="size"
@@ -103,4 +82,31 @@ documentedStoriesOf('base/avatar/labeled', readme)
         </template>
       </gl-avatar-labeled>
     `,
-  }));
+});
+WithBadges.args = generateProps();
+
+export default {
+  title: 'base/avatar/labeled',
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: avatarSizeOptions,
+      },
+    },
+    shape: {
+      control: {
+        type: 'select',
+        options: avatarShapeOptions,
+      },
+    },
+  },
+};

package/src/components/base/avatar_labeled/avatar_labeled.vue

@@ -49,6 +49,7 @@ export default {
           <span class="gl-avatar-labeled-label">{{ label }}</span>
         </gl-link>
         <span v-else class="gl-avatar-labeled-label">{{ label }}</span>
+        <!-- @slot Metadata to add to the avatar. Generally used for badges or user status emoji. -->
         <slot name="meta"></slot>
       </div>
       <gl-link v-if="hasSubLabelLink" :href="subLabelLink" class="gl-avatar-link">

package/src/components/base/avatars_inline/avatars_inline.documentation.js

@@ -1,8 +1,6 @@
 import * as description from './avatars_inline.md';
-import examples from './examples';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
 };

package/src/components/base/avatars_inline/avatars_inline.md

@@ -1,12 +1,10 @@
-## Avatars inline
-
 Use `<avatars-inline />` to display multiple avatars organized in a single row.
 
 ### Basic usage
 
 The `avatars` property accepts an array of objects that contains the avatar properties. By default,
 `<avatars-inline />` expects each object contained in the array to have the same shape as the
-properties of the  `<avatar />` component. You can customize the display of each avatar by
+properties of the `<avatar />` component. You can customize the display of each avatar by
 overriding the default slot:
 
 ```html

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

@@ -1,7 +1,4 @@
-import { number, boolean, object, select, withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { avatarsInlineSizeOptions } from '../../../utils/constants';
-
 import readme from './avatars_inline.md';
 
 const defaultAvatars = [
@@ -12,53 +9,61 @@ const defaultAvatars = [
   { src: 'https://picsum.photos/id/1012/32' },
 ];
 
-function generateProps(avatars = defaultAvatars) {
-  const props = {
-    maxVisible: {
-      type: Number,
-      default: number('maxVisible', 2),
-    },
-    collapsed: {
-      type: Boolean,
-      default: boolean('collapsed', true),
-    },
-    size: {
-      type: Number,
-      default: select('size', avatarsInlineSizeOptions, 24),
-    },
-    avatars: {
-      type: Array,
-      default: object('avatars', avatars),
-    },
-  };
-
-  return props;
-}
+const generateProps = (
+  avatars = defaultAvatars,
+  { maxVisible = 2, collapsed = true, avatarSize = 24 } = {}
+) => ({
+  maxVisible,
+  collapsed,
+  avatarSize,
+  avatars,
+});
 
-documentedStoriesOf('base/avatar/avatars-inline', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    template: `
-    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="size" :max-visible="maxVisible">
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
+    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible">
     </gl-avatars-inline>
     `,
-  }))
-  .add('with links and tooltips', () => ({
-    props: generateProps(
-      defaultAvatars.map((avatar, index) => ({
-        ...avatar,
-        href: '//gitlab.com',
-        tooltip: `Avatar ${index}`,
-      }))
-    ),
-    template: `
-    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="size" :max-visible="maxVisible">
+});
+Default.args = generateProps();
+
+export const WithLinksAndTooltips = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
+    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible">
       <template #avatar="{ avatar }">
         <gl-avatar-link target="blank" :href="avatar.href" v-gl-tooltip :title="avatar.tooltip">
-          <gl-avatar :src="avatar.src" :size="size" />
+          <gl-avatar :src="avatar.src" :size="avatarSize" />
         </gl-avatar-link>
       </template>
     </gl-avatars-inline>
     `,
-  }));
+});
+WithLinksAndTooltips.args = generateProps(
+  defaultAvatars.map((avatar, index) => ({
+    ...avatar,
+    href: '//gitlab.com',
+    tooltip: `Avatar ${index}`,
+  }))
+);
+
+export default {
+  title: 'base/avatar/avatars-inline',
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    avatarSize: {
+      control: {
+        type: 'select',
+        options: avatarsInlineSizeOptions,
+      },
+    },
+  },
+};

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.