@gitlab/ui 39.3.0 → 39.4.0

package/src/components/base/new_dropdowns/listbox/listbox_item.spec.js

@@ -0,0 +1,104 @@
+import { mount } from '@vue/test-utils';
+import GLIcon from '../../icon/icon.vue';
+
+import { ENTER, SPACE } from '../constants';
+import GlListboxItem from './listbox_item.vue';
+
+describe('GlListboxItem', () => {
+  let wrapper;
+
+  const buildWrapper = (propsData, slots = {}) => {
+    wrapper = mount(GlListboxItem, {
+      propsData,
+      slots,
+    });
+  };
+  const findItem = () => wrapper.find('[role="option"]');
+  const findCheckIcon = () => findItem().findComponent(GLIcon);
+
+  describe('toggleSelection', () => {
+    describe('when selected ', () => {
+      beforeEach(() => {
+        buildWrapper({ isSelected: true });
+      });
+
+      it('should set `aria-selected` attribute on the list item to `true`', () => {
+        expect(findItem().attributes('aria-selected')).toBe('true');
+      });
+
+      it('should display check icon', () => {
+        expect(findCheckIcon().classes()).not.toContain('gl-visibility-hidden');
+      });
+
+      it('should emit the `select` event when clicked', async () => {
+        await findItem().trigger('click');
+        expect(wrapper.emitted('select')[0][0]).toBe(false);
+      });
+
+      it('should emit the `select` event on `ENTER` keydown event', async () => {
+        await findItem().trigger('click');
+        findItem().trigger('keydown', { code: SPACE });
+        expect(wrapper.emitted('select')[0][0]).toBe(false);
+      });
+
+      it('should emit the `select` event on `SPACE` keydown event', async () => {
+        await findItem().trigger('click');
+        findItem().trigger('keydown', { code: SPACE });
+        expect(wrapper.emitted('select')[0][0]).toBe(false);
+      });
+    });
+
+    describe('when not selected ', () => {
+      beforeEach(() => {
+        buildWrapper({ isSelected: false });
+      });
+
+      it('should set `aria-selected` attribute on the list item to `false`', () => {
+        expect(findItem().attributes('aria-selected')).toBeUndefined();
+      });
+
+      it('should not  display check icon', () => {
+        expect(findCheckIcon().classes()).toContain('gl-visibility-hidden');
+      });
+
+      it('should emit the `select` event when clicked', async () => {
+        await findItem().trigger('click');
+        expect(wrapper.emitted('select')[0][0]).toBe(true);
+      });
+
+      it('should emit the `select` event on `ENTER` keydown event', async () => {
+        await findItem().trigger('click');
+        findItem().trigger('keydown', { code: ENTER });
+        expect(wrapper.emitted('select')[0][0]).toBe(true);
+      });
+
+      it('should emit the `select` event on `SPACE` keydown event', async () => {
+        await findItem().trigger('click');
+        findItem().trigger('keydown', { code: SPACE });
+        expect(wrapper.emitted('select')[0][0]).toBe(true);
+      });
+    });
+  });
+
+  describe('tabindex', () => {
+    it('should set tabindex to `-1` when item is not focused', () => {
+      buildWrapper({ isFocused: false });
+      expect(wrapper.attributes('tabindex')).toBe('-1');
+    });
+
+    it('should set tabindex to `0` when item is focused', () => {
+      buildWrapper({ isFocused: true });
+      expect(wrapper.attributes('tabindex')).toBe('0');
+    });
+  });
+
+  describe('when default slot content provided', () => {
+    const content = 'This is an item';
+    const slots = { default: content };
+
+    it('renders it', () => {
+      buildWrapper({}, slots);
+      expect(wrapper.text()).toContain(content);
+    });
+  });
+});

package/src/components/base/new_dropdowns/listbox/listbox_item.vue

@@ -0,0 +1,59 @@
+<script>
+import GlIcon from '../../icon/icon.vue';
+import { ENTER, SPACE } from '../constants';
+import { stopEvent } from '../../../../utils/utils';
+
+export default {
+  components: {
+    GlIcon,
+  },
+  props: {
+    isSelected: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    isFocused: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  methods: {
+    toggleSelection() {
+      this.$emit('select', !this.isSelected);
+    },
+    onKeydown(event) {
+      const { code } = event;
+
+      if (code === ENTER || code === SPACE) {
+        stopEvent(event);
+        this.toggleSelection();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <li
+    class="gl-new-dropdown-item"
+    role="option"
+    :tabindex="isFocused ? 0 : -1"
+    :aria-selected="isSelected"
+    @click="toggleSelection"
+    @keydown="onKeydown"
+  >
+    <span class="dropdown-item">
+      <gl-icon
+        name="mobile-issue-close"
+        data-testid="dropdown-item-checkbox"
+        class="gl-mt-3 gl-align-self-start"
+        :class="['gl-new-dropdown-item-check-icon', { 'gl-visibility-hidden': !isSelected }]"
+      />
+      <span class="gl-new-dropdown-item-text-wrapper">
+        <slot></slot>
+      </span>
+    </span>
+  </li>
+</template>

package/src/index.js

@@ -54,6 +54,10 @@ export { default as GlDropdownSectionHeader } from './components/base/dropdown/d
 export { default as GlDropdownDivider } from './components/base/dropdown/dropdown_divider.vue';
 export { default as GlDropdownText } from './components/base/dropdown/dropdown_text.vue';
 export { default as GlDropdown } from './components/base/dropdown/dropdown.vue';
+// new components aiming to replace GlDropdown  - start
+export { default as GlListbox } from './components/base/new_dropdowns/listbox/listbox.vue';
+export { default as GlListboxItem } from './components/base/new_dropdowns/listbox/listbox_item.vue';
+// new components aiming to replace GlDropdown  - end
 export { default as GlPath } from './components/base/path/path.vue';
 export { default as GlTable } from './components/base/table/table.vue';
 export { default as GlBreadcrumb } from './components/base/breadcrumb/breadcrumb.vue';

package/src/scss/utilities.scss

@@ -2061,6 +2061,14 @@
   color: $white !important;
 }
 
+.gl-text-contrast-light {
+  color: $white-contrast;
+}
+
+.gl-text-contrast-light\! {
+  color: $white-contrast !important;
+}
+
 .gl-text-body {
   color: $body-color;
 }

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

@@ -19,6 +19,10 @@
   color: $white;
 }
 
+@mixin gl-text-contrast-light {
+  color: $white-contrast;
+}
+
 @mixin gl-text-body {
   color: $body-color;
 }

package/src/scss/variables.scss

@@ -45,6 +45,7 @@ $black: #000 !default;
 $black-normal: #333 !default;
 
 $white: #fff !default;
+$white-contrast: #fff !default;
 $white-normal: #f0f0f0 !default;
 $white-dark: #eaeaea !default;
 $white-transparent: rgba(255, 255, 255, 0.8) !default;

package/src/utils/utils.js

@@ -122,3 +122,21 @@ export function logWarning(message = '') {
     console.warn(message); // eslint-disable-line no-console
   }
 }
+
+/**
+ * Stop default event handling and propagation
+ */
+export function stopEvent(
+  event,
+  { preventDefault = true, stopPropagation = true, stopImmediatePropagation = false } = {}
+) {
+  if (preventDefault) {
+    event.preventDefault();
+  }
+  if (stopPropagation) {
+    event.stopPropagation();
+  }
+  if (stopImmediatePropagation) {
+    event.stopImmediatePropagation();
+  }
+}

package/src/utils/utils.spec.js

@@ -1,4 +1,4 @@
-import { isElementFocusable, focusFirstFocusableElement } from './utils';
+import { isElementFocusable, focusFirstFocusableElement, stopEvent } from './utils';
 
 describe('isElementFocusable', () => {
   const myBtn = () => document.querySelector('button');
@@ -77,3 +77,43 @@ describe('focusFirstFocusableElement', () => {
     expect(document.activeElement).toBe(myInput());
   });
 });
+
+describe('stopEvent', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const event = {
+    preventDefault: jest.fn(),
+    stopPropagation: jest.fn(),
+    stopImmediatePropagation: jest.fn(),
+  };
+
+  it('calls preventDefault and stopPropagation by default', () => {
+    stopEvent(event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(event.stopPropagation).toHaveBeenCalledTimes(1);
+    expect(event.stopImmediatePropagation).not.toHaveBeenCalled();
+  });
+
+  it('completely stops the event when stopImmediatePropagation is true', () => {
+    stopEvent(event, { stopImmediatePropagation: true });
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(event.stopPropagation).toHaveBeenCalledTimes(1);
+    expect(event.stopImmediatePropagation).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls event stop methods set to true', () => {
+    stopEvent(event, {
+      preventDefault: false,
+      stopPropagation: false,
+      stopImmediatePropagation: true,
+    });
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(event.stopPropagation).not.toHaveBeenCalled();
+    expect(event.stopImmediatePropagation).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -1,8 +0,0 @@
-var description = "Accordions are used to group similar content and hide or show it depending on user needs or\npreferences. Accordions give users more granular control over the interface and help digest content\nin stages, rather than all at once.\n";
-
-var accordion_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default accordion_documentation;

package/dist/components/base/accordion/accordion_item.documentation.js

@@ -1,7 +0,0 @@
-var description = "## Usage\n\nUse `GlAccordionItem` to place the accordion item within your accordion.\n";
-
-var accordion_item_documentation = {
-  description
-};
-
-export default accordion_item_documentation;

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

@@ -1,13 +0,0 @@
-var alert = "Alerts allow the application to pass along relevant system information to the\nuser without impeding their journey. Alerts are system generated and may or may\nnot be derived by a user’s action.\n\n## Dismissible alerts\n\nAlerts don't handle their own visibility, so it's the parent component's\nresponsbility to listen for the `dismiss` event and hide the alert in some way.\nFor example:\n\n```html\n<script>\n  ...\n  computed: {\n    shouldShowAlert() {\n      return !this.isAlertDismissed && this.someOtherCondition();\n    },\n  },\n  ...\n</script>\n\n<template>\n  ...\n  <gl-alert v-if=\"shouldShowAlert\" @dismiss=\"isAlertDismissed = true\">\n    An important message\n  </gl-alert>\n  ...\n</template>\n```\n\n## Sticky alerts\n\nAny alert can use `position: sticky`, however it should be limited to critical alerts where keeping\nthe alert visually in context is necessary or when alerts are injected into a page and might\notherwise go unnoticed.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': alert
-});
-
-var alert_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default alert_documentation;

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

@@ -1,8 +0,0 @@
-var description = "Avatars are used to represent a unique entity, be it a person, a group, or a project.\n";
-
-var avatar_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default avatar_documentation;

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

@@ -1,8 +0,0 @@
-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
-};
-
-export default avatar_labeled_documentation;

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

@@ -1,8 +0,0 @@
-var description = "`<gl-avatar-link>` decorates `<gl-avatar>` with hyperlink functionality. It accepts the same\nproperties as the `<gl-link>` component and it works in the same way too. The main purpose of this\ncomponent is to apply visual enhancements that makes evident that the user can interact with the\navatar.\n\n## Using the component\n\nWhen wrapping an `<gl-avatar>` component, `<gl-avatar-link>` darkens\nthe border that surrounds the avatar image or fallback text when hovering over it.\n\n```vue\n<gl-avatar-link target=\"blank\" href=\"https://gitlab.com/gitlab-org/gitlab\">\n  <gl-avatar\n    :size=\"32\"\n    :src=\"avatarUrl\"\n  />\n</gl-avatar-link>\n```\n\nWhen wrapping an `<avatar-labeled>` component, `<avatar-link>` underlines\nthe label and sub-label text when hovering over the avatar. It also applies the\nsame effects described in the first example.\n\n```vue\n<gl-avatar-link target=\"blank\" href=\"https://gitlab.com/gitlab-org/gitlab\">\n  <gl-avatar-labeled\n    :size=\"32\"\n    entity-name=\"GitLab\"\n    label=\"GitLab User\"\n    sub-label=\"@gitlab\"\n  />\n</gl-avatar-link>\n```\n";
-
-var avatar_link_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default avatar_link_documentation;

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

@@ -1,13 +0,0 @@
-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### Badge description in screen readers\n\nThe `badgeSrOnlyText` property provides a meaningful description of the badge that appears\nwhen avatars are collapsed for screen reader users.\n\n### Supported sizes\n\n`<avatars-inline>` only supports avatars with `24` or `32` size.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': avatars_inline
-});
-
-var avatars_inline_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default avatars_inline_documentation;

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

@@ -1,8 +0,0 @@
-var description = "Badges highlight metadata of objects, the kind of information that always needs\nsome context and isn’t useful on its own. For example, they can be used to\nindicate an issue’s status, a member’s role, or if a branch is protected.\n\n## Usage\n\n```html\n<gl-badge>Hello, world!</gl-badge>\n```\n\n> Note: Native support for icons in badges will be added in a future version.\n\n### Using icon-only badges\n\nWhen a badge only has an icon and no slot content, be sure to set the `aria-label` attribute of the\nbadge for best accessibility.\n\n```html\n<!-- bad -->\n<gl-badge icon=\"eye\" />\n\n<!-- good -->\n<gl-badge icon=\"eye\" aria-label=\"Mark as confidential\" />\n```\n\n## Edge cases\n\nWhile this component is based on\n[`BBadge`](https://bootstrap-vue.org/docs/components/badge) from\n`bootstrap-vue`, it is not a drop-in replacement. Specifically, this component:\n\n- Has a different set of valid `variant`s. See the examples or props\n   documentation for those values.\n- Always sets the `pill` prop of the underlying `BBadge` to `true`. Any passed\n   in `pill` prop value is ignored.\n- Does _not_ scale itself to match the size of its immediate parent, like\n   `BBadge` does.\n";
-
-var badge_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default badge_documentation;

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

@@ -1,8 +0,0 @@
-var description = "## Dismiss\n\nUsers are able to permanently dismiss banners by default.\nBanners may also be dismissed temporarily, depending on the use case.\n\n### Permanent dismissal\n\nThe dismiss action is always represented by the `Close` icon and anchored\nto the top right of the banner.\n\nBanner dismissal should work as follows:\n\n* Banner dismissal must be associated with the user in the system database.\n  Dismissal must persist, even across version upgrades and clients.\n* Banners do not reappear by default. In rare circumstances, you may present the\n  banner again to a user after some time has passed.\n* Banners should only be shown to users who are logged in.\n\n**Implementation Notes:**\n\n* The dismissal of the banner is achieved using the `UserCallout` model on the backend and the\n  `PersistentUserCallout` JS file on the frontend. If both parameters are implemented correctly, the\n  banner will adhere to the dismissal guidelines above.\n\n### Temporary dismissal\n\nTo introduce temporary dismissal, include a secondary or tertiary button placed alongside\nthe primary action button. Follow the [button](https://design.gitlab.com/components/button#alignment)\nalignment and order guidelines.\n\nTemporary dismissals should work as follows:\n\n* Banners dismissed temporarily will reappear after **7 days**.\n* After a banner is dismissed temporarily, use a [toast](?path=/story/base-toast--default) message\n  to let the user know they will see the banner again in 7 days.\n";
-
-var banner_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default banner_documentation;

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

@@ -1,8 +0,0 @@
-var description = "## Usage\n\nThis component provides two `<slot>` elements for customization. The first is a `<slot #avatar>`\nso an avatar can appear before the first breadcrumb. The second is a `<slot #separator>` to\ncustomize the icon that appears between each breadcrumb.\n\n**note:** the component supports passing the property `to` in the list items to enable navigation\nthrough `vue-router`\n\n### Example\n\nYou can use any kind of separator you want in the slot, like below, which uses `<svg>`\nto draw a `/`\n\n```html\n<gl-breadcrumb :items=\"items\">\n  <template #avatar>\n    <img \n      alt=\"\"\n      class=\"gl-breadcrumb-avatar-tile\"\n      src=\"https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16\"\n      width=\"16\"\n      height=\"16\"\n    />\n  </template>\n  <template #separator>\n    <svg height=\"16\">\n      <line x1=\"100%\" y1=\"0\" x2=\"0\" y2=\"100%\" stroke=\"gray\" />\n    </svg>\n  </template>\n</gl-breadcrumb>\n```\n";
-
-var breadcrumb_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default breadcrumb_documentation;

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

@@ -1,8 +0,0 @@
-var description = "Broadcast messages provide an efficient and prominent way to deliver critical messages at the\ninstance level to all users. For example, a broadcast message can be used when an admin wants to\nannounce that their platform will experience downtime during a specific period.\n\nIn comparison with an alert, broadcast messages are created by an admin and not triggered by the\nsystem.\n\nPlease refer to [Pajamas' documentation](https://design.gitlab.com/components/broadcast-message)\nfor more information on when to use this component.\n\n## Dismiss a broadcast message\n\nThe `GlBroadcastMessage` component deals with users dismissal the same way `GlAlert` does, meaning\nit does not handle its own visibility but emits a `dismiss` event that the parent component should\nlisten to in order to hide the message. Example:\n\n```html\n<template>\n  ...\n  <gl-broadcast-message v-if=\"!dismissed\" @dismiss=\"dismissed = true\">\n    An important message\n  </gl-broadcast-message>\n  ...\n</template>\n```\n";
-
-var broadcast_message_documentation = {
-  followsDesignSystem: false,
-  description
-};
-
-export default broadcast_message_documentation;

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

@@ -1,24 +0,0 @@
-var description = "Buttons execute an action, either in the background or foreground of an experience. Different button\ncategories help guide users through certain actions. Buttons express what action will occur when the\nuser clicks or touches it either by text, icon, or both. Additional meaning can be derived from the\nbutton variant.\n\n## Button link\n\nA button link is a link that is styled to look like a button, semantically speaking it's a `<a>` tag\nwith the necessary classes added to make it look like a button, it shares the same functionality as\n[`<gl-link>`]\n\n> Note: Setting a `target` attribute without a `href` attribute, will not create any side effects.\n> Without the presence of a `href` attribute, this component will render a `<button>`.\n\n[`<gl-link>`]: ./?path=/story/base-link--default-link\n\n## Icon-only button\n\nIcon-only buttons must have an accessible name.\nYou can provide one with the `aria-label` attribute, which is read out by screen readers.\n\n```html\n<gl-button icon=\"close\" aria-label=\"Close\" />\n```\n\n## Label button\n\nA label button renders a non-interactive `span` styled as a button. This can be especially useful\nwhen used in a button group to render text-only labels along with actionable buttons. To improve\naccessibility, and when applicable, consider using [`aria-describedby`] to establish a\nrelationship between the label button and the associated button.\n\n[`aria-describedby`]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute\n\n## Security\n\nThis component implements a few security measures to make it as safe as possible by default.\nSee [SafeLinkDirective docs] for more details.\n\n### Linking to an unsafe URL\n\nIf you're trying to link to a location considered unsafe by the `SafeLink` directive (when rendering\na download link with a [Data URL] for example), you'll need to bypass the `href` attribute's\nsanitization. This component exposes the `is-unsafe-link` prop for that purpose.\n\n> **Warning:** Only disable URL sanitization when absolutely necessary.\n\n```html\n<gl-button\n  is-unsafe-link\n  download=\"file.txt\"\n  href=\"data:text/plain;charset=utf-8,GitLab%20is%20awesome\">Download</gl-button>\n```\n\n[SafeLinkDirective docs]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/directives-safe-link-directive--default\n[Data URL]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs\n\n## vue-bootstrap component\n\nThis component uses [`BButton`](https://bootstrap-vue.org/docs/components/button) from vue-bootstrap\ninternally. So please take a look also there at their extensive documentation.\n";
-
-var button_documentation = {
-  description,
-  followsDesignSystem: true,
-  bootstrapComponent: 'b-button',
-  bootstrapPropsInfo: {
-    category: {
-      enum: 'buttonCategoryOptions'
-    },
-    variant: {
-      enum: 'buttonVariantOptions'
-    },
-    size: {
-      enum: 'buttonSizeOptions'
-    }
-  },
-  events: [{
-    event: 'click',
-    description: 'Emitted when clicked on button'
-  }]
-};
-
-export default button_documentation;

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

@@ -1,8 +0,0 @@
-var description = "Button groups are an easy way to group a series of buttons together.\n\n## vue-bootstrap component\n\nThis component uses [`BButtonGroup`](https://bootstrap-vue.org/docs/components/button-group) from vue-bootstrap\ninternally. So please take a look also there at their extensive documentation.\n";
-
-var button_group_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default button_group_documentation;

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

@@ -1,13 +0,0 @@
-var card = "Cards are a flexible component used to display content and actions in a variety of contexts.\nThey are generally restricted to a single topic and it should be easy for users to scan relevant and\nactionable information. Content, such as images and text, should be positioned within them in a\nmanner that demonstrates their intended hierarchy.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': card
-});
-
-var card_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default card_documentation;

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

@@ -1,8 +0,0 @@
-var description = "The carousel is a slideshow for cycling through a series of content, built with CSS 3D\ntransforms. It works with a series of images, text, or custom markup. It also includes support\nfor previous/next controls and indicators.\n";
-
-var carousel_documentation = {
-  description,
-  bootstrapComponent: 'b-carousel'
-};
-
-export default carousel_documentation;

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

@@ -1,7 +0,0 @@
-var description = "Collapse is used to keep pages focused on the overview of what the user can do. Details and\nadditional actions are hidden in the fold, and can be opened if the user wants to interact with\nthose elements.\n";
-
-var collapse_documentation = {
-  description
-};
-
-export default collapse_documentation;

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

@@ -1,7 +0,0 @@
-var description = "Date picker allows users to choose and input a date by manually typing the date into the input field\nor by using a calendar-like dropdown.\n\n### Warning\n\nBe careful when binding a date value using `value` prop. `value` is a watched property and Date\npicker will emit `input` event on _initial load_. Alternatively, use `defaultDate` to set the\ninitial date then receive updated date values through `input` events.\n";
-
-var datepicker_documentation = {
-  description
-};
-
-export default datepicker_documentation;

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

@@ -1,8 +0,0 @@
-var description = "## Usage\n\nDaterange picker allows users to choose a date range by manually typing the start/end date\ninto the input fields or by using a calendar-like dropdown.\n\nA `maxDateRange` can be specified in order to limit the maximum number of days the component\nwill allow to be selected i.e. if the start date is `2020-08-01` and `maxDateRange` is set to `10`,\nthe highest selectable end date would be `2020-08-11`. This value will be offset by `1` if\n`sameDaySelection` is set to `true`. A `defaultMaxDate` will need to be\nprovided when making use of the `maxDateRange`.\n\nBy default, the component does not allow selection of the same start and end date.\nIn a scenario where this is required, the `sameDaySelection` property can be configured.\nThis is specifically useful when a single day selection is being defined as `2020-01-01 00:00:00`\nto `2020-01-01 23:59:59` instead of `2020-01-01 00:00:00` to `2020-01-02 00:00:00`.\n\nWhen `maxDateRange` is set it's a good idea to set the `tooltip` specifying the date range limit\nand to indicate the number of days currently selected using the default slot. For example:\n\n```vue\n<template #default=\"{ daysSelected }\">\n  <span v-if=\"daysSelected > -1\">{{ daysSelected }} days selected</span>\n  <span v-else>No days selected</span>\n</template>\n```\n\nThe `daysSelected` slot prop is the effective date range, thus the value is increased by one when\n`sameDaySelection` is set to `true`. When no date range has been selected the value is `-1`.\n\n### Note\n\nIf specifying a maxDateRange, it is good practice to include a date range indicator and toolip.\n";
-
-var daterange_picker_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default daterange_picker_documentation;

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

@@ -1,8 +0,0 @@
-var description = "The drawer is used to show more information about a certain resource in the UI and potentially\nhandle actions on the information.\n\n### By default\n\n```html\n<gl-drawer :open=\"open\" @close=\"close\">\n  <template #header>Your Title</template>\n  <template>\n   ...children\n  </template>\n</gl-drawer>\n```\n\n- `v-bind:open` will be a boolean you will pass to `gl-drawer` and `@close` is a listener that will\nbe a function that will toggle open to `false`.\n";
-
-var drawer_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default drawer_documentation;

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

@@ -1,8 +0,0 @@
-var description = "The dropdown component offers a user multiple items or actions to choose from which are initially\ncollapsed behind a button.\n\n### Icon-only dropdown\n\nIcon-only dropdowns must have an accessible name.\nYou can provide this with the combination of `text` and `text-sr-only` props.\n\nOptionally, you can use `no-caret` to remove the caret and `category=\"tertiary\"` to remove the border.\n\n```html\n<gl-dropdown\n  icon=\"ellipsis_v\"\n  text=\"More actions\"\n  :text-sr-only=\"true\"\n  category=\"tertiary\"\n  no-caret\n>\n```\n\n### Button Content\n\nThere are 3 ways to set the dropdown button's content.\n\n1. Use the `text` attribute. This will display the text with the loading spinner (shown with the\n`loading` attribute), icon (if provided by the `icon` attribute), and dropdown caret:\n\n    ```html\n    <gl-dropdown text=\"Button text\">\n    ```\n\n1. Use the `button-text` template. This allows custom content for the button's text, but keeps the\nloading spinner, icon, and dropdown caret:\n\n    ```html\n    <gl-dropdown>\n      <template #button-text>\n        <!-- Loading spinner shown here -->\n        <!-- Icon shown here -->\n        Custom <strong>Content</strong> with <em>HTML</em> via Slot\n        <gl-truncate position=\"middle\" text=\"Truncated button text\"/>\n        <!-- Dropdown arrow shown here -->\n      </template>\n    </gl-dropdown>\n    ```\n\n1. Use the `button-content` template. This will replace everything in the button with the template:\n\n    ```html\n    <gl-dropdown>\n      <template #button-content>\n        Custom <strong>Content</strong> with <em>HTML</em> via Slot\n      </template>\n    </gl-dropdown>\n    ```\n\n### GlDropdownForm\n\nUnlike `b-dropdown-form`, we do _not_ add any additional padding with the `gl-dropdown-form` component.\nThis is to prevent double padding with `gl-dropdown-item` and similar components, so in most cases\nshouldn't be needed. To add padding, either add a padding utility class to your form, or an inner\nelement with some padding.\n";
-
-var dropdown_documentation = {
-  description,
-  followsDesignSystem: false
-};
-
-export default dropdown_documentation;

package/dist/components/base/dropdown/dropdown_item.documentation.js

@@ -1,7 +0,0 @@
-var description = "The dropdown item component is meant to be used for clickable entries inside a dropdown component.\nIf you provide the `href` attribute, it renders a link instead of a button.\n";
-
-var dropdown_item_documentation = {
-  description
-};
-
-export default dropdown_item_documentation;

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

@@ -1,13 +0,0 @@
-var filtered_search = "The filtered search component is responsible for managing search with possible filters.\n\n## Usage\n\nEach filter option (named token) requires a separate Vue component. `GlFilteredSearchToken` is an\nexample of such a token.\n\nPrepare array of available token configurations with the following fields:\n\n- `type`: unique identifier of token type\n- `title`: human-readable title of the token\n- `icon`: token icon\n- `token`: (optional) the token Vue component to use (e.g. `AuthorToken`)\n- `dataType`: (optional) identifier of type (for example \"user\") for this filter. Tokens\n  of the same type could be switched without losing their values\n- `unique`: (optional) indicate this token could appear only once in the filter\n- `disabled`: (optional) indicate this token should be hidden from the dropdown\n- `operators`: (optional) an array of selectable operators.\n  Each array item is an object that must contain `value` and `description`, and optionally `default`\n  (e.g. `{ value: '=', description: 'is', default: 'true' }`)\n- `multiSelect`: (optional) when `true`, the suggestions list becomes multi-select instead of single-select.\n  It is discouraged to use this together with `unique`, as `unique` is intended for single-select.\n- `options`: (optional) an array of options which the user can pick after the operator has been selected.\n  The option object can have the following properties defined: `value`, `icon`, `text`, and `default`\n  all of which are expected be of type `string`. If the `default` is omitted, the `value` of the first\n  option will be displayed as a suggestion\n- any additional fields required to configure your component\n\nEach token for filtered search is a Vue component with the following props:\n\n- `value`: an object with a `data` property containing the current value, and optionally an\n`operator` value containing the operator value\n- `active`: indicates if the token is currently active. It's the token's responsibility\n  to render proper control for editing (for example input).\n- `current-value`: current tokens of the filtered search.\n- `index`: current token position in the filtered search.\n- `config`: additional configuration, supplied in filtered search config for this token.\n\nThe token should emit the following events:\n\n- `activate`: when the token requests activation (for example, when being clicked).\n- `deactivate`: when token requests deactivation (for example due to losing blur on input).\n- `destroy`: when token requests self-destruction (for instance for clicking \"X\" sign).\n- `replace`: token requests its replacement with another token.\n- `split`: token requests adding string values after the current token.\n- `complete`: token indicates its editing is completed.\n\n## Examples\n\nDefine a list of available tokens:\n\n```js\nconst availableTokens = [\n  { type: 'static', icon: 'label', title: 'static:token', token: staticToken },\n  { type: 'dynamic', icon: 'rocket', title: 'dynamic:~token', token: dynamicToken },\n];\n```\n\nPass the list of tokens to the search component. Optionally, you can use `v-model` to receive\nrealtime updates:\n\n```html\n\n<gl-filtered-search :available-tokens=\"tokens\" v-model=\"value\" />\n```\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': filtered_search
-});
-
-var filtered_search_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default filtered_search_documentation;

package/dist/components/base/filtered_search/filtered_search_suggestion.documentation.js

@@ -1,7 +0,0 @@
-var description = "The filtered search suggestion component is a wrapper around `GlDropdownItem`, which registers\nsuggestions in a top-level suggestion list:\n\n```html\n<gl-filtered-search-suggestion-list>\n  <gl-filtered-search-suggestion value=\"foo\">Example suggestion</gl-filtered-search-suggestion>\n  <gl-filtered-search-suggestion value=\"bar\">Example suggestion 2</gl-filtered-search-suggestion>\n</gl-filtered-search-suggestion-list>\n```\n";
-
-var filtered_search_suggestion_documentation = {
-  description
-};
-
-export default filtered_search_suggestion_documentation;

package/dist/components/base/filtered_search/filtered_search_suggestion_list.documentation.js

@@ -1,7 +0,0 @@
-var description = "The filtered search suggestion list component is responsible for managing underlying suggestion instances.\nYou obtain the ref for this component and manage suggestion selection via the component public API:\n\n- `getValue()` - Retrieves the current selected suggestion.\n- `nextItem()` - Selects the next suggestion. If last suggestion was selected, selection is cleared.\n- `prevItem()` - Selects the previous suggestion. If first suggestion was selected, selection is cleared.\n\n```html\n<gl-filtered-search-suggestion-list ref=\"suggestions\">\n  <gl-filtered-search-suggestion value=\"foo\">Example suggestion</gl-filtered-search-suggestion>\n  <gl-filtered-search-suggestion value=\"bar\">Example suggestion 2</gl-filtered-search-suggestion>\n</gl-filtered-search-suggestion-list>\n```\n";
-
-var filtered_search_suggestion_list_documentation = {
-  description
-};
-
-export default filtered_search_suggestion_list_documentation;

package/dist/components/base/filtered_search/filtered_search_term.documentation.js

@@ -1,12 +0,0 @@
-var filtered_search_term = "The filtered search term is a component for managing \"free input\" in the filtered search component.\nIt is responsible for autocompleting available tokens and \"converting\" to a relevant\ncomponent when an autocomplete item is selected.\n\n## Usage\n\nThis component is internal and is not intended to be used by `@gitlab/ui` users.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': filtered_search_term
-});
-
-var filtered_search_term_documentation = {
-  description
-};
-
-export default filtered_search_term_documentation;

package/dist/components/base/filtered_search/filtered_search_token.documentation.js

@@ -1,12 +0,0 @@
-var filtered_search_token = "Filtered search token is a helper component, intended to\nsimplify the creation of filters tokens which consist of a title, operators\nand an editable value with autocomplete. This component abstracts token management\nlogic and allows you to focus on implementing autocomplete or view logic.\n\nThis component is not intended to be used outside of the `GlFilteredSearch` component.\n\n## Usage\n\nMake sure to pass `$listeners` to `gl-filtered-search-token`, or route events properly:\n\n```html\n<gl-filtered-search-token\n  title=\"Confidential\"\n  :active=\"active\"\n  :value=\"value\"\n  v-on=\"$listeners\"\n>\n  <template #suggestions>\n    <gl-filtered-search-suggestion value=\"Yes\"><gl-icon name=\"eye-slash\" :size=\"16\"/> Yes</gl-filtered-search-suggestion>\n    <gl-filtered-search-suggestion value=\"No\"><gl-icon name=\"eye\" :size=\"16\"/> No</gl-filtered-search-suggestion>\n  </template>\n</gl-filtered-search-token>\n```\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': filtered_search_token
-});
-
-var filtered_search_token_documentation = {
-  description
-};
-
-export default filtered_search_token_documentation;

package/dist/components/base/filtered_search/filtered_search_token_segment.documentation.js

@@ -1,12 +0,0 @@
-var filtered_search_token_segment = "The filtered search token segment is a component for managing token input either via free typing\nor by selecting item through dropdown list\n\n## Usage\n\nThis component is internal and is not intended to be used by `@gitlab/ui` users.\n\n## Internet Explorer 11\n\nThis component uses [`String.prototype.startsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)\nand [`String.prototype.endsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith)\nunder the hood. Make sure those methods are polyfilled if you plan on using the component on IE11.\n\n> NOTE: These methods are already polyfilled in GitLab: [`app/assets/javascripts/commons/polyfills.js#L15-16`](https://gitlab.com/gitlab-org/gitlab/blob/dc60dee6ed6234dda9f032195577cd8fad9646d8/app/assets/javascripts/commons/polyfills.js#L15-16)\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': filtered_search_token_segment
-});
-
-var filtered_search_token_segment_documentation = {
-  description
-};
-
-export default filtered_search_token_segment_documentation;

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

@@ -1,7 +0,0 @@
-var description = "A wrapper element for `gl-form-*` input elements. Supports `@submit` and `@reset` events, as well as\ncontrolling validation settings for form inputs.\n";
-
-var form_documentation = {
-  description
-};
-
-export default form_documentation;