@gitlab/ui 84.2.0 → 85.0.0

package/src/vendor/bootstrap-vue/src/components/avatar/avatar.spec.js

@@ -0,0 +1,355 @@
+import { createLocalVue, mount } from '@vue/test-utils'
+import { BIconPerson } from '../../icons/icons'
+import { BAvatar } from './avatar'
+
+describe('avatar', () => {
+  it('should have expected default structure', async () => {
+    const wrapper = mount(BAvatar)
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.element.tagName).toBe('SPAN')
+    expect(wrapper.classes()).toContain('b-avatar')
+    expect(wrapper.classes()).toContain('badge-secondary')
+    expect(wrapper.classes()).not.toContain('disabled')
+    expect(wrapper.attributes('href')).toBeUndefined()
+    expect(wrapper.attributes('type')).toBeUndefined()
+    wrapper.destroy()
+  })
+
+  it('should have expected structure when prop `button` set', async () => {
+    const wrapper = mount(BAvatar, {
+      propsData: {
+        button: true
+      }
+    })
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.element.tagName).toBe('BUTTON')
+    expect(wrapper.classes()).toContain('b-avatar')
+    expect(wrapper.classes()).toContain('btn-secondary')
+    expect(wrapper.classes()).not.toContain('disabled')
+    expect(wrapper.attributes('href')).toBeUndefined()
+    expect(wrapper.attributes('type')).toBeDefined()
+    expect(wrapper.attributes('type')).toEqual('button')
+    expect(wrapper.text()).toEqual('')
+    expect(wrapper.find('.b-icon').exists()).toBe(true)
+    expect(wrapper.find('img').exists()).toBe(false)
+
+    expect(wrapper.emitted('click')).toBeUndefined()
+
+    await wrapper.trigger('click')
+
+    expect(wrapper.emitted('click')).not.toBeUndefined()
+    expect(wrapper.emitted('click').length).toBe(1)
+    expect(wrapper.emitted('click')[0][0]).toBeInstanceOf(Event)
+
+    wrapper.destroy()
+  })
+
+  it('should have expected structure when prop `href` set', async () => {
+    const wrapper = mount(BAvatar, {
+      propsData: {
+        href: '#foo'
+      }
+    })
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.element.tagName).toBe('A')
+    expect(wrapper.classes()).toContain('b-avatar')
+    expect(wrapper.classes()).toContain('badge-secondary')
+    expect(wrapper.classes()).not.toContain('disabled')
+    expect(wrapper.attributes('href')).toBeDefined()
+    expect(wrapper.attributes('href')).toEqual('#foo')
+    expect(wrapper.attributes('type')).toBeUndefined()
+    expect(wrapper.attributes('type')).not.toEqual('button')
+    expect(wrapper.text()).toEqual('')
+    expect(wrapper.find('.b-icon').exists()).toBe(true)
+    expect(wrapper.find('img').exists()).toBe(false)
+
+    expect(wrapper.emitted('click')).toBeUndefined()
+
+    await wrapper.trigger('click')
+
+    expect(wrapper.emitted('click')).not.toBeUndefined()
+    expect(wrapper.emitted('click').length).toBe(1)
+    expect(wrapper.emitted('click')[0][0]).toBeInstanceOf(Event)
+
+    wrapper.destroy()
+  })
+
+  it('should have expected structure when prop `text` set', async () => {
+    const wrapper = mount(BAvatar, {
+      propsData: {
+        text: 'BV'
+      }
+    })
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.element.tagName).toBe('SPAN')
+    expect(wrapper.classes()).toContain('b-avatar')
+    expect(wrapper.classes()).toContain('badge-secondary')
+    expect(wrapper.classes()).not.toContain('disabled')
+    expect(wrapper.attributes('href')).toBeUndefined()
+    expect(wrapper.attributes('type')).toBeUndefined()
+    expect(wrapper.text()).toContain('BV')
+    expect(wrapper.find('.b-icon').exists()).toBe(false)
+    expect(wrapper.find('img').exists()).toBe(false)
+    wrapper.destroy()
+  })
+
+  it('should have expected structure when default slot used', async () => {
+    const wrapper = mount(BAvatar, {
+      propsData: {
+        text: 'FOO'
+      },
+      slots: {
+        default: 'BAR'
+      }
+    })
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.element.tagName).toBe('SPAN')
+    expect(wrapper.classes()).toContain('b-avatar')
+    expect(wrapper.classes()).toContain('badge-secondary')
+    expect(wrapper.classes()).not.toContain('disabled')
+    expect(wrapper.attributes('href')).toBeUndefined()
+    expect(wrapper.attributes('type')).toBeUndefined()
+    expect(wrapper.text()).toContain('BAR')
+    expect(wrapper.text()).not.toContain('FOO')
+    expect(wrapper.find('.b-icon').exists()).toBe(false)
+    expect(wrapper.find('img').exists()).toBe(false)
+    wrapper.destroy()
+  })
+
+  it('should have expected structure when prop `src` set', async () => {
+    const wrapper = mount(BAvatar, {
+      propsData: {
+        src: '/foo/bar',
+        text: 'BV'
+      }
+    })
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.element.tagName).toBe('SPAN')
+    expect(wrapper.classes()).toContain('b-avatar')
+    expect(wrapper.classes()).toContain('badge-secondary')
+    expect(wrapper.classes()).not.toContain('disabled')
+    expect(wrapper.attributes('href')).toBeUndefined()
+    expect(wrapper.attributes('type')).toBeUndefined()
+    expect(wrapper.text()).toEqual('')
+    expect(wrapper.find('.b-icon').exists()).toBe(false)
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.find('img').attributes('src')).toEqual('/foo/bar')
+    expect(wrapper.text()).not.toContain('BV')
+
+    await wrapper.setProps({ src: '/foo/baz' })
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.find('img').attributes('src')).toEqual('/foo/baz')
+    expect(wrapper.text()).not.toContain('BV')
+    expect(wrapper.emitted('img-error')).toBeUndefined()
+    expect(wrapper.text()).not.toContain('BV')
+
+    // Fake an image error
+    await wrapper.find('img').trigger('error')
+    expect(wrapper.emitted('img-error')).toBeDefined()
+    expect(wrapper.emitted('img-error').length).toBe(1)
+    expect(wrapper.find('img').exists()).toBe(false)
+    expect(wrapper.text()).toContain('BV')
+
+    wrapper.destroy()
+  })
+
+  it('should have expected structure when prop `icon` set', async () => {
+    const localVue = createLocalVue()
+    localVue.component('BIconPerson', BIconPerson)
+
+    const wrapper = mount(BAvatar, {
+      localVue,
+      propsData: {
+        icon: 'person'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.element.tagName).toBe('SPAN')
+    expect(wrapper.classes()).toContain('b-avatar')
+    expect(wrapper.classes()).toContain('badge-secondary')
+    expect(wrapper.classes()).not.toContain('disabled')
+    expect(wrapper.attributes('href')).toBeUndefined()
+    expect(wrapper.attributes('type')).toBeUndefined()
+    expect(wrapper.text()).toEqual('')
+    const $icon = wrapper.find('.b-icon')
+    expect($icon.exists()).toBe(true)
+    expect($icon.classes()).toContain('bi-person')
+    wrapper.destroy()
+  })
+
+  it('`size` prop should work as expected', async () => {
+    const wrapper1 = mount(BAvatar)
+    expect(wrapper1.attributes('style')).toEqual(undefined)
+    wrapper1.destroy()
+
+    const wrapper2 = mount(BAvatar, { propsData: { size: 'sm' } })
+    expect(wrapper2.attributes('style')).toEqual(undefined)
+    expect(wrapper2.classes()).toContain('b-avatar-sm')
+    wrapper2.destroy()
+
+    const wrapper3 = mount(BAvatar, { propsData: { size: 'md' } })
+    expect(wrapper3.attributes('style')).toEqual(undefined)
+    expect(wrapper3.classes()).not.toContain('b-avatar-md')
+    wrapper3.destroy()
+
+    const wrapper4 = mount(BAvatar, { propsData: { size: 'lg' } })
+    expect(wrapper4.attributes('style')).toEqual(undefined)
+    expect(wrapper4.classes()).toContain('b-avatar-lg')
+    wrapper4.destroy()
+
+    const wrapper5 = mount(BAvatar, { propsData: { size: 20 } })
+    expect(wrapper5.attributes('style')).toEqual('width: 20px; height: 20px;')
+    wrapper5.destroy()
+
+    const wrapper6 = mount(BAvatar, { propsData: { size: '24.5' } })
+    expect(wrapper6.attributes('style')).toEqual('width: 24.5px; height: 24.5px;')
+    wrapper6.destroy()
+
+    const wrapper7 = mount(BAvatar, { propsData: { size: '5em' } })
+    expect(wrapper7.attributes('style')).toEqual('width: 5em; height: 5em;')
+    wrapper7.destroy()
+
+    const wrapper8 = mount(BAvatar, { propsData: { size: '36px' } })
+    expect(wrapper8.attributes('style')).toEqual('width: 36px; height: 36px;')
+    wrapper8.destroy()
+  })
+
+  it('should have expected structure when prop badge is set', async () => {
+    const wrapper = mount(BAvatar, {
+      propsData: {
+        badge: true
+      }
+    })
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.element.tagName).toBe('SPAN')
+    expect(wrapper.classes()).toContain('b-avatar')
+    expect(wrapper.classes()).toContain('badge-secondary')
+    expect(wrapper.classes()).not.toContain('disabled')
+    expect(wrapper.attributes('href')).toBeUndefined()
+    expect(wrapper.attributes('type')).toBeUndefined()
+
+    const $badge = wrapper.find('.b-avatar-badge')
+    expect($badge.exists()).toBe(true)
+    expect($badge.classes()).toContain('badge-primary')
+    expect($badge.text()).toEqual('')
+
+    await wrapper.setProps({ badge: 'FOO' })
+    expect($badge.classes()).toContain('badge-primary')
+    expect($badge.text()).toEqual('FOO')
+
+    await wrapper.setProps({ badgeVariant: 'info' })
+    expect($badge.classes()).not.toContain('badge-primary')
+    expect($badge.classes()).toContain('badge-info')
+    expect($badge.text()).toEqual('FOO')
+
+    wrapper.destroy()
+  })
+
+  it('should handle b-avatar-group variant', async () => {
+    const wrapper1 = mount(BAvatar, {
+      provide: {
+        // Emulate `undefined`/`null` props
+        getBvAvatarGroup: () => ({})
+      }
+    })
+
+    expect(wrapper1.vm).toBeDefined()
+    expect(wrapper1.element.tagName).toBe('SPAN')
+    expect(wrapper1.classes()).toContain('b-avatar')
+    expect(wrapper1.classes()).toContain('badge-secondary')
+    // Uses avatar group size (default)
+    expect(wrapper1.attributes('style')).toBe(undefined)
+
+    wrapper1.destroy()
+
+    const wrapper2 = mount(BAvatar, {
+      provide: {
+        getBvAvatarGroup: () => ({
+          variant: 'danger'
+        })
+      }
+    })
+
+    expect(wrapper2.vm).toBeDefined()
+    expect(wrapper2.element.tagName).toBe('SPAN')
+    expect(wrapper2.classes()).toContain('b-avatar')
+    expect(wrapper2.classes()).toContain('badge-danger')
+    expect(wrapper2.classes()).not.toContain('badge-secondary')
+    // Uses avatar group size (default)
+    expect(wrapper2.attributes('style')).toBe(undefined)
+
+    wrapper2.destroy()
+  })
+
+  it('should handle b-avatar-group size', async () => {
+    const wrapper1 = mount(BAvatar, {
+      propsData: {
+        size: '5em'
+      },
+      provide: {
+        // Emulate `undefined`/`null` props
+        getBvAvatarGroup: () => ({})
+      }
+    })
+
+    expect(wrapper1.vm).toBeDefined()
+    expect(wrapper1.element.tagName).toBe('SPAN')
+    expect(wrapper1.classes()).toContain('b-avatar')
+    expect(wrapper1.classes()).toContain('badge-secondary')
+    // Uses avatar group size (default)
+    expect(wrapper1.attributes('style')).toBe(undefined)
+
+    wrapper1.destroy()
+
+    const wrapper2 = mount(BAvatar, {
+      propsData: {
+        size: '2em'
+      },
+      provide: {
+        getBvAvatarGroup: () => ({
+          size: '5em'
+        })
+      }
+    })
+
+    expect(wrapper2.vm).toBeDefined()
+    expect(wrapper2.element.tagName).toBe('SPAN')
+    expect(wrapper2.classes()).toContain('b-avatar')
+    expect(wrapper2.classes()).toContain('badge-secondary')
+    // Should use BAvatarGroup size prop
+    expect(wrapper2.attributes('style')).toContain('width: 5em; height: 5em;')
+
+    wrapper2.destroy()
+  })
+
+  it('should render `alt` attribute if `alt` prop is empty string', async () => {
+    const wrapper = mount(BAvatar, {
+      propsData: {
+        src: '/foo/bar',
+        alt: ''
+      }
+    })
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.find('img').attributes('src')).toEqual('/foo/bar')
+    expect(wrapper.find('img').attributes('alt')).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('should not render `alt` attribute if `alt` prop is null', async () => {
+    const wrapper = mount(BAvatar, {
+      propsData: {
+        src: '/foo/bar',
+        alt: null
+      }
+    })
+    expect(wrapper.vm).toBeDefined()
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.find('img').attributes('src')).toEqual('/foo/bar')
+    expect(wrapper.find('img').attributes('alt')).toBeUndefined()
+
+    wrapper.destroy()
+  })
+})

package/src/vendor/bootstrap-vue/src/components/avatar/index.d.ts

@@ -0,0 +1,14 @@
+//
+// Avatar
+//
+import Vue from 'vue'
+import { BvPlugin, BvComponent } from '../../'
+
+// Plugin
+export declare const AvatarPlugin: BvPlugin
+
+// Component: b-avatar
+export declare class BAvatar extends BvComponent {}
+
+// Component: b-avatar-group
+export declare class BAvatarGroup extends BvComponent {}

package/src/vendor/bootstrap-vue/src/components/avatar/index.js

@@ -0,0 +1,9 @@
+import { BAvatar } from './avatar'
+import { BAvatarGroup } from './avatar-group'
+import { pluginFactory } from '../../utils/plugins'
+
+const AvatarPlugin = /*#__PURE__*/ pluginFactory({
+  components: { BAvatar, BAvatarGroup }
+})
+
+export { AvatarPlugin, BAvatar, BAvatarGroup }

package/src/vendor/bootstrap-vue/src/components/avatar/index.scss

@@ -0,0 +1 @@
+@import "avatar";

package/src/vendor/bootstrap-vue/src/components/avatar/package.json

@@ -0,0 +1,149 @@
+{
+  "name": "@bootstrap-vue/avatar",
+  "version": "1.0.0",
+  "meta": {
+    "title": "Avatar",
+    "version": "2.8.0",
+    "description": "Avatars are typically used to display a user profile as a picture, an icon, or short text.",
+    "components": [
+      {
+        "component": "BAvatar",
+        "version": "2.8.0",
+        "props": [
+          {
+            "prop": "alt",
+            "version": "2.9.0",
+            "description": "Value to place in the 'alt' attribute for image and icon avatars"
+          },
+          {
+            "prop": "badge",
+            "version": "2.12.0",
+            "description": "When `true` shows an empty badge on the avatar, alternatively set to a string for content in the badge"
+          },
+          {
+            "prop": "badgeLeft",
+            "version": "2.12.0",
+            "description": "When `true` places the badge at the left instead of the right"
+          },
+          {
+            "prop": "badgeOffset",
+            "version": "2.12.0",
+            "description": "CSS length to offset the badge. Positive values move the badge inwards, while negative values move the badge outwards"
+          },
+          {
+            "prop": "badgeTop",
+            "version": "2.12.0",
+            "description": "When `true` places the badge at the top instead of the bottom"
+          },
+          {
+            "prop": "badgeVariant",
+            "version": "2.12.0",
+            "description": "Applies one of the Bootstrap theme color variants to the badge"
+          },
+          {
+            "prop": "button",
+            "description": "When set to `true`, renders the avatar as a button"
+          },
+          {
+            "prop": "buttonType",
+            "description": "Type of button to render (i.e. `button`, `submit`, `reset`). Has no effect if prop button is not set"
+          },
+          {
+            "prop": "icon",
+            "description": "Icon name to use for the avatar. Must be all lowercase. Defaults to `person-fill` if `text` or `src` props not provided"
+          },
+          {
+            "prop": "rounded",
+            "description": "Specifies the type of rounding to apply to the avatar. The `square` prop takes precedence. Refer to the documentation for details"
+          },
+          {
+            "prop": "size",
+            "description": "Size of the avatar. Refer to the documentation for details"
+          },
+          {
+            "prop": "square",
+            "description": "Disables rounding of the avatar, rending the avatar with square corners"
+          },
+          {
+            "prop": "src",
+            "description": "Image URL to use for the avatar"
+          },
+          {
+            "prop": "text",
+            "description": "Text to place in the avatar"
+          },
+          {
+            "prop": "variant",
+            "description": "Applies one of the Bootstrap theme color variants to the component"
+          }
+        ],
+        "slots": [
+          {
+            "name": "badge",
+            "version": "2.12.0",
+            "description": "Content to place in the avatars optional badge. Overrides the `badge` prop"
+          },
+          {
+            "name": "default",
+            "description": "Content to place in the avatar. Overrides props `text`, `src`, and `icon-name`"
+          }
+        ],
+        "events": [
+          {
+            "event": "click",
+            "description": "Emitted when the avatar is clicked when rendered as a button or link. Not emitted otherwise",
+            "args": [
+              {
+                "arg": "event",
+                "description": "Native Event object"
+              }
+            ]
+          },
+          {
+            "event": "img-error",
+            "version": "2.11.0",
+            "description": "Emitted if an image `src` is provided and the image fails to load",
+            "args": [
+              {
+                "arg": "event",
+                "description": "Native Event object"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "component": "BAvatarGroup",
+        "version": "2.14.0",
+        "props": [
+          {
+            "prop": "overlap",
+            "description": "Floating point number specifying the amount of overlap where `0` is no overlap and `1` is 100% overlap"
+          },
+          {
+            "prop": "rounded",
+            "description": "Specifies the type of rounding to apply to the child avatars. The `square` prop takes precedence. Refer to the documentation for details"
+          },
+          {
+            "prop": "size",
+            "description": "Size of all the child avatars. Refer to the documentation for details"
+          },
+          {
+            "prop": "square",
+            "description": "Disables rounding of the child avatars, rendering each avatar with square corners"
+          },
+          {
+            "prop": "variant",
+            "description": "Applies one of the Bootstrap theme color variants to all child avatars"
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content (avatars) to place in the avatar group"
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/vendor/bootstrap-vue/src/components/badge/README.md

@@ -0,0 +1,126 @@
+# Badge
+
+> Small and adaptive tag for adding context to just about any content.
+
+## Overview
+
+Badges scale to match the size of the immediate parent element by using relative font sizing and
+`em` units.
+
+```html
+<div>
+  <h2>Example heading <b-badge>New</b-badge></h2>
+  <h3>Example heading <b-badge>New</b-badge></h3>
+  <h4>Example heading <b-badge>New</b-badge></h4>
+  <h5>Example heading <b-badge>New</b-badge></h5>
+  <h6>Example heading <b-badge>New</b-badge></h6>
+</div>
+
+<!-- b-badges.vue -->
+```
+
+Badges can be used as part of links or buttons to provide a counter (or similar flag).
+
+```html
+<div class="text-center">
+  <b-button variant="primary">
+    Notifications <b-badge variant="light">4</b-badge>
+  </b-button>
+</div>
+
+<!-- b-badge-button.vue -->
+```
+
+Note that depending on how they are used, badges may be confusing for users of screen readers and
+similar assistive technologies. While the styling of badges provides a visual cue as to their
+purpose, these users will simply be presented with the content of the badge. Depending on the
+specific situation, these badges may seem like random additional words or numbers at the end of a
+sentence, link, or button.
+
+Unless the context is clear (as with the "Notifications" example, where it is understood that the
+"4" is the number of notifications), consider including additional context with a visually hidden
+piece of additional text.
+
+```html
+<div class="text-center">
+  <b-button variant="primary">
+    Profile
+    <b-badge variant="light">9 <span class="sr-only">unread messages</span></b-badge>
+  </b-button>
+</div>
+
+<!-- b-badge-button-aria.vue -->
+```
+
+## Contextual variations
+
+Add any of the following variants via the `variant` prop to change the appearance of a `<b-badge>`:
+`default`, `primary`, `success`, `warning`, `info`, and `danger`. If no variant is specified
+`default` will be used.
+
+```html
+<div>
+  <b-badge variant="primary">Primary</b-badge>
+  <b-badge variant="secondary">Secondary</b-badge>
+  <b-badge variant="success">Success</b-badge>
+  <b-badge variant="danger">Danger</b-badge>
+  <b-badge variant="warning">Warning</b-badge>
+  <b-badge variant="info">Info</b-badge>
+  <b-badge variant="light">Light</b-badge>
+  <b-badge variant="dark">Dark</b-badge>
+</div>
+
+<!-- b-badge-variants.vue -->
+```
+
+### Conveying meaning to assistive technologies
+
+Using color to add meaning only provides a visual indication, which will not be conveyed to users of
+assistive technologies – such as screen readers. Ensure that information denoted by the color is
+either obvious from the content itself (e.g. the visible text), or is included through alternative
+means, such as additional text hidden with the `.sr-only` class.
+
+## Pill badges
+
+Use the `pill` prop to make badges more rounded (with a larger border-radius and additional
+horizontal padding). Useful if you miss the badges from Bootstrap v3.
+
+```html
+<div>
+  <b-badge pill variant="primary">Primary</b-badge>
+  <b-badge pill variant="secondary">Secondary</b-badge>
+  <b-badge pill variant="success">Success</b-badge>
+  <b-badge pill variant="danger">Danger</b-badge>
+  <b-badge pill variant="warning">Warning</b-badge>
+  <b-badge pill variant="info">Info</b-badge>
+  <b-badge pill variant="light">Light</b-badge>
+  <b-badge pill variant="dark">Dark</b-badge>
+</div>
+
+<!-- b-badge-pill.vue -->
+```
+
+## Actionable badges
+
+Quickly provide actionable badges with hover and focus states by specifying either the `href` prop
+(links) or `to` prop (router-links):
+
+```html
+<div>
+  <b-badge href="#" variant="primary">Primary</b-badge>
+  <b-badge href="#" variant="secondary">Secondary</b-badge>
+  <b-badge href="#" variant="success">Success</b-badge>
+  <b-badge href="#" variant="danger">Danger</b-badge>
+  <b-badge href="#" variant="warning">Warning</b-badge>
+  <b-badge href="#" variant="info">Info</b-badge>
+  <b-badge href="#" variant="light">Light</b-badge>
+  <b-badge href="#" variant="dark">Dark</b-badge>
+</div>
+
+<!-- b-badge-action.vue -->
+```
+
+Refer to the [Router support](/docs/reference/router-links) reference page for router-link specific
+props.
+
+<!-- Component reference added automatically from component package.json -->