@gitlab/ui 32.43.3 → 32.46.0

package/documentation/documented_stories.js

@@ -95,6 +95,15 @@ export const setupStorybookReadme = () =>
         'GlTokenSelector',
         'GlTooltip',
         'GlFormTextarea',
+        'GlFormInput',
+        'GlSegmentedControl',
+        'GlAvatar',
+        'GlAvatarLink',
+        'GlPagination',
+        'GlSkeletonLoader',
+        'GlLabel',
+        'GlStackedColumnChart',
+        'GlDiscreteScatterChart',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.43.3",
+  "version": "32.46.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -63,6 +63,7 @@
     "dompurify": "^2.3.4",
     "echarts": "^5.2.1",
     "highlight.js": "^10.6.0",
+    "iframe-resizer": "^4.3.2",
     "js-beautify": "^1.8.8",
     "lodash": "^4.17.20",
     "portal-vue": "^2.1.6",
@@ -88,16 +89,16 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.8",
-    "@storybook/addon-docs": "6.4.8",
-    "@storybook/addon-essentials": "6.4.8",
+    "@storybook/addon-a11y": "6.4.9",
+    "@storybook/addon-docs": "6.4.9",
+    "@storybook/addon-essentials": "6.4.9",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.8",
-    "@storybook/addon-storyshots-puppeteer": "6.4.8",
-    "@storybook/addon-viewport": "6.4.8",
-    "@storybook/theming": "6.4.8",
-    "@storybook/vue": "6.4.8",
-    "@vue/test-utils": "1.1.3",
+    "@storybook/addon-storyshots": "6.4.9",
+    "@storybook/addon-storyshots-puppeteer": "6.4.9",
+    "@storybook/addon-viewport": "6.4.9",
+    "@storybook/theming": "6.4.9",
+    "@storybook/vue": "6.4.9",
+    "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.0.5",

package/src/components/base/alert/alert.spec.js

@@ -50,7 +50,7 @@ describe('Alert component', () => {
     });
 
     it('renders default slot content', () => {
-      expect(findBodyContainer().find(DummyComponent).exists()).toBe(true);
+      expect(findBodyContainer().findComponent(DummyComponent).exists()).toBe(true);
     });
   });
 
@@ -148,7 +148,7 @@ describe('Alert component', () => {
 
     const actionsContainer = findActionsContainer();
     expect(actionsContainer.exists()).toBe(true);
-    expect(actionsContainer.find(DummyComponent).exists()).toBe(true);
+    expect(actionsContainer.findComponent(DummyComponent).exists()).toBe(true);
   });
 
   describe('top-level classes', () => {

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

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

package/src/components/base/avatar/avatar.md

@@ -1,3 +1 @@
-## Usage
-
 Avatars are used to represent a unique entity, be it a person, a group, or a project.

package/src/components/base/avatar/avatar.spec.js

@@ -27,8 +27,7 @@ describe('GlAvatar', () => {
     it.each([12, 28, 36, 54, 98])('displays an error for size %s', (size) => {
       createWrapper({ size });
 
-      expect(global.console).toHaveLoggedVueErrors();
-      global.console.error.mockReset();
+      expect(wrapper).toHaveLoggedVueErrors();
     });
   });
 });

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

@@ -1,121 +1,75 @@
-import { select, text, number, withKnobs } 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.md';
 
 Vue.directive('gl-tooltip', GlTooltipDirective);
 
-function generateImageProps() {
-  const defaultSize = avatarSizeOptions[1];
-  const props = {
-    size: {
-      type: Number,
-      default: select('size', avatarSizeOptions, defaultSize),
-    },
-    shape: {
-      type: String,
-      default: select('shape', avatarShapeOptions, 'circle'),
-    },
-  };
-
-  return props;
-}
-
-function generateProjectFallbackProps() {
-  const defaultSize = avatarSizeOptions[1];
-  const props = {
-    entityId: {
-      type: Number,
-      default: number('entityId', 123),
-    },
-    entityName: {
-      type: String,
-      default: text('entityName', 'Some Project'),
-    },
-    size: {
-      type: Number,
-      default: select('size', avatarSizeOptions, defaultSize),
-    },
-  };
+const generateImageProps = ({ size = 64, shape = 'circle' } = {}) => ({
+  size,
+  shape,
+});
 
-  return props;
-}
+const generateProjectFallbackProps = ({
+  size = 64,
+  entityId = 123,
+  entityName = 'Some Project',
+} = {}) => ({
+  entityId,
+  entityName,
+  size,
+});
 
-function generateEmojiProjectProps() {
-  const defaultSize = avatarSizeOptions[1];
-  const props = {
-    entityId: {
-      type: Number,
-      default: number('entityId', 123),
-    },
-    entityName: {
-      type: String,
-      default: text('entityName', '🦊Tanuki'),
-    },
-    size: {
-      type: Number,
-      default: select('size', avatarSizeOptions, defaultSize),
-    },
-  };
+const generateEmojiProjectProps = ({
+  size = 64,
+  entityId = 123,
+  entityName = '🦊Tanuki',
+} = {}) => ({
+  entityId,
+  entityName,
+  size,
+});
 
-  return props;
-}
-
-function generateTooltipProps() {
-  const props = {
-    tooltipText: {
-      type: String,
-      default: text('tooltipText', 'Avatar tooltip'),
-    },
-    placement: {
-      type: String,
-      default: select('placement', tooltipPlacements, 'top'),
-    },
-  };
+const generateTooltipProps = ({ tooltipText = 'Avatar tooltip', placement = 'top' } = {}) => ({
+  tooltipText,
+  placement,
+});
 
-  return props;
-}
+const template = `
+<gl-avatar
+  :entity-name="entityName"
+  :entity-id="entityId"
+  :size="size"
+  shape="rect" />
+`;
 
-documentedStoriesOf('base/avatar', readme)
-  .addDecorator(withKnobs)
-  .add('image', () => ({
-    props: generateImageProps(),
-    template: `
+export const Image = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar
         :size="size"
         :shape="shape"
         src="https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg"
       />
     `,
-  }))
-  .add('project-fallback', () => ({
-    props: generateProjectFallbackProps(),
-    template: `
-      <gl-avatar
-        :entity-name="entityName"
-        :entity-id="entityId"
-        :size="size"
-        shape="rect" />
-    `,
-  }))
-  .add('emoji-project-name', () => ({
-    props: generateEmojiProjectProps(),
-    template: `
-      <gl-avatar
-        :entity-name="entityName"
-        :entity-id="entityId"
-        :size="size"
-        shape="rect" />
-    `,
-  }))
-  .add('with-tooltip', () => ({
-    props: {
-      ...generateImageProps(),
-      ...generateTooltipProps(),
-    },
-    template: `
+});
+Image.args = generateImageProps();
+
+export const ProjectFallback = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template,
+});
+ProjectFallback.args = generateProjectFallbackProps();
+
+export const EmojiProjectName = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template,
+});
+EmojiProjectName.args = generateEmojiProjectProps();
+
+export const WithTooltip = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar
         :size="size"
         :shape="shape"
@@ -124,4 +78,37 @@ documentedStoriesOf('base/avatar', readme)
         v-gl-tooltip="{ placement }"
       />
     `,
-  }));
+});
+WithTooltip.args = { ...generateImageProps(), ...generateTooltipProps() };
+
+export default {
+  title: 'base/avatar',
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      options: avatarSizeOptions,
+      control: {
+        type: 'select',
+      },
+    },
+    shape: {
+      options: avatarShapeOptions,
+      control: {
+        type: 'select',
+      },
+    },
+    placement: {
+      options: tooltipPlacements,
+      control: {
+        type: 'select',
+      },
+    },
+  },
+};

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

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

package/src/components/base/avatar_link/avatar_link.md

@@ -1,5 +1,3 @@
-## Avatar link
-
 `<gl-avatar-link>` decorates `<gl-avatar>` with hyperlink functionality. It accepts the same
 properties as the `<gl-link>` component and it works in the same way too. The main purpose of this
 component is to apply visual enhancements that makes evident that the user can interact with the
@@ -10,20 +8,20 @@ avatar.
 When wrapping an `<gl-avatar>` component, `<gl-avatar-link>` darkens
 the border that surrounds the avatar image or fallback text when hovering over it.
 
-~~~vue
+```vue
 <gl-avatar-link target="blank" href="https://gitlab.com/gitlab-org/gitlab">
   <gl-avatar
     :size="32"
     :src="avatarUrl"
   />
 </gl-avatar-link>
-~~~
+```
 
 When wrapping an `<avatar-labeled>` component, `<avatar-link>` underlines
 the label and sub-label text when hovering over the avatar. It also applies the
 same effects described in the first example.
 
-~~~vue
+```vue
 <gl-avatar-link target="blank" href="https://gitlab.com/gitlab-org/gitlab">
   <gl-avatar-labeled
     :size="32"
@@ -32,5 +30,4 @@ same effects described in the first example.
     sub-label="@gitlab"
   />
 </gl-avatar-link>
-
-~~~
+```

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

@@ -1,71 +1,83 @@
-import { select, text, withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
 import readme from './avatar_link.md';
 
-const generateDefaultProps = () => ({
-  href: {
-    type: String,
-    default: text('href', 'https://gitlab.com/gitlab-org/gitlab'),
-  },
-  shape: {
-    type: String,
-    default: select('shape', avatarShapeOptions, 'circle'),
-  },
-  size: {
-    type: Number,
-    default: select('size', avatarSizeOptions, 32),
-  },
+const generateDefaultProps = ({
+  href = 'https://gitlab.com/gitlab-org/gitlab',
+  shape = 'circle',
+  size = 32,
+} = {}) => ({
+  href,
+  shape,
+  size,
 });
 
-const generateLabelsProps = () => ({
-  label: {
-    type: String,
-    default: text('label', 'GitLab User'),
-  },
-  subLabel: {
-    type: String,
-    default: text('subLabel', '@gitlab'),
-  },
+const generateLabelsProps = ({ label = 'GitLab User', subLabel = '@gitlab' } = {}) => ({
+  label,
+  subLabel,
 });
 
-const generateImageProps = () => ({
-  src: {
-    type: String,
-    default: text(
-      'src',
-      'https://assets.gitlab-static.net/uploads/-/system/project/avatar/278964/logo-extra-whitespace.png?width=64'
-    ),
-  },
+const generateImageProps = ({
+  src = 'https://assets.gitlab-static.net/uploads/-/system/project/avatar/278964/logo-extra-whitespace.png?width=64',
+} = {}) => ({
+  src,
 });
 
-documentedStoriesOf('base/avatar/avatar-link', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: { ...generateDefaultProps(), ...generateImageProps() },
-    template: `
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
     <gl-avatar-link target="blank" :href="href">
       <gl-avatar :src="src" :size="size" :shape="shape" />
     </gl-avatar-link>
     `,
-  }))
-  .add('with labeled avatar', () => ({
-    props: {
-      ...generateDefaultProps(),
-      ...generateLabelsProps(),
-      ...generateImageProps(),
-    },
-    template: `
-    <gl-avatar-link target="blank" :href="href">
-      <gl-avatar-labeled :src="src" :size="size" :shape="shape" :label="label" :sub-label="subLabel" />
-    </gl-avatar-link>
-    `,
-  }))
-  .add('with no-image avatar', () => ({
-    props: { ...generateDefaultProps(), ...generateLabelsProps() },
-    template: `
+});
+Default.args = { ...generateDefaultProps(), ...generateImageProps() };
+
+export const WithLabeledAvatar = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
+  <gl-avatar-link target="blank" :href="href">
+    <gl-avatar-labeled :src="src" :size="size" :shape="shape" :label="label" :sub-label="subLabel" />
+  </gl-avatar-link>
+  `,
+});
+WithLabeledAvatar.args = {
+  ...generateDefaultProps({}),
+  ...generateLabelsProps({}),
+  ...generateImageProps({}),
+};
+
+export const WithNoImageAvatar = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
     <gl-avatar-link target="blank" :href="href">
       <gl-avatar-labeled :entity-name="label" :label="label" :sub-label="subLabel" :size="size" :shape="shape" />
     </gl-avatar-link>
     `,
-  }));
+});
+WithNoImageAvatar.args = { ...generateDefaultProps({}), ...generateLabelsProps({}) };
+
+export default {
+  title: 'base/avatar/avatar-link',
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    shape: {
+      options: avatarShapeOptions,
+      control: {
+        type: 'select',
+      },
+    },
+    size: {
+      options: avatarSizeOptions,
+      control: {
+        type: 'select',
+      },
+    },
+  },
+};