@gitlab/ui 84.2.0 → 85.0.0

package/src/vendor/bootstrap-vue/src/components/card/card-title.spec.js

@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils'
+import { BCardTitle } from './card-title'
+
+describe('card-title', () => {
+  it('default has tag "h4"', async () => {
+    const wrapper = mount(BCardTitle)
+
+    expect(wrapper.element.tagName).toBe('H4')
+
+    wrapper.destroy()
+  })
+
+  it('default has class "card-title"', async () => {
+    const wrapper = mount(BCardTitle)
+
+    expect(wrapper.classes()).toContain('card-title')
+    expect(wrapper.classes().length).toBe(1)
+
+    wrapper.destroy()
+  })
+
+  it('renders custom tag', async () => {
+    const wrapper = mount(BCardTitle, {
+      context: {
+        props: { titleTag: 'div' }
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+
+    wrapper.destroy()
+  })
+
+  it('has content from default slot', async () => {
+    const wrapper = mount(BCardTitle, {
+      slots: {
+        default: 'bar'
+      }
+    })
+
+    expect(wrapper.text()).toContain('bar')
+
+    wrapper.destroy()
+  })
+})

package/src/vendor/bootstrap-vue/src/components/card/card.js

@@ -0,0 +1,140 @@
+import { extend, mergeData } from '../../vue'
+import { NAME_CARD } from '../../constants/components'
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
+import { SLOT_NAME_DEFAULT, SLOT_NAME_FOOTER, SLOT_NAME_HEADER } from '../../constants/slots'
+import { htmlOrText } from '../../utils/html'
+import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
+import { sortKeys } from '../../utils/object'
+import {
+  copyProps,
+  makeProp,
+  makePropsConfigurable,
+  pluckProps,
+  prefixPropName,
+  unprefixPropName
+} from '../../utils/props'
+import { props as cardProps } from '../../mixins/card'
+import { BCardBody, props as BCardBodyProps } from './card-body'
+import { BCardHeader, props as BCardHeaderProps } from './card-header'
+import { BCardFooter, props as BCardFooterProps } from './card-footer'
+import { BCardImg, props as BCardImgProps } from './card-img'
+
+// --- Props ---
+
+const cardImgProps = copyProps(BCardImgProps, prefixPropName.bind(null, 'img'))
+cardImgProps.imgSrc.required = false
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...BCardBodyProps,
+    ...BCardHeaderProps,
+    ...BCardFooterProps,
+    ...cardImgProps,
+    ...cardProps,
+    align: makeProp(PROP_TYPE_STRING),
+    noBody: makeProp(PROP_TYPE_BOOLEAN, false)
+  }),
+  NAME_CARD
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BCard = /*#__PURE__*/ extend({
+  name: NAME_CARD,
+  functional: true,
+  props,
+  render(h, { props, data, slots, scopedSlots }) {
+    const {
+      imgSrc,
+      imgLeft,
+      imgRight,
+      imgStart,
+      imgEnd,
+      imgBottom,
+      header,
+      headerHtml,
+      footer,
+      footerHtml,
+      align,
+      textVariant,
+      bgVariant,
+      borderVariant
+    } = props
+    const $scopedSlots = scopedSlots || {}
+    const $slots = slots()
+    const slotScope = {}
+
+    let $imgFirst = h()
+    let $imgLast = h()
+    if (imgSrc) {
+      const $img = h(BCardImg, {
+        props: pluckProps(cardImgProps, props, unprefixPropName.bind(null, 'img'))
+      })
+
+      if (imgBottom) {
+        $imgLast = $img
+      } else {
+        $imgFirst = $img
+      }
+    }
+
+    let $header = h()
+    const hasHeaderSlot = hasNormalizedSlot(SLOT_NAME_HEADER, $scopedSlots, $slots)
+    if (hasHeaderSlot || header || headerHtml) {
+      $header = h(
+        BCardHeader,
+        {
+          props: pluckProps(BCardHeaderProps, props),
+          domProps: hasHeaderSlot ? {} : htmlOrText(headerHtml, header)
+        },
+        normalizeSlot(SLOT_NAME_HEADER, slotScope, $scopedSlots, $slots)
+      )
+    }
+
+    let $content = normalizeSlot(SLOT_NAME_DEFAULT, slotScope, $scopedSlots, $slots)
+
+    // Wrap content in `<card-body>` when `noBody` prop set
+    if (!props.noBody) {
+      $content = h(BCardBody, { props: pluckProps(BCardBodyProps, props) }, $content)
+
+      // When the `overlap` prop is set we need to wrap the `<b-card-img>` and `<b-card-body>`
+      // into a relative positioned wrapper to don't distract a potential header or footer
+      if (props.overlay && imgSrc) {
+        $content = h('div', { staticClass: 'position-relative' }, [$imgFirst, $content, $imgLast])
+        // Reset image variables since they are already in the wrapper
+        $imgFirst = h()
+        $imgLast = h()
+      }
+    }
+
+    let $footer = h()
+    const hasFooterSlot = hasNormalizedSlot(SLOT_NAME_FOOTER, $scopedSlots, $slots)
+    if (hasFooterSlot || footer || footerHtml) {
+      $footer = h(
+        BCardFooter,
+        {
+          props: pluckProps(BCardFooterProps, props),
+          domProps: hasHeaderSlot ? {} : htmlOrText(footerHtml, footer)
+        },
+        normalizeSlot(SLOT_NAME_FOOTER, slotScope, $scopedSlots, $slots)
+      )
+    }
+
+    return h(
+      props.tag,
+      mergeData(data, {
+        staticClass: 'card',
+        class: {
+          'flex-row': imgLeft || imgStart,
+          'flex-row-reverse': (imgRight || imgEnd) && !(imgLeft || imgStart),
+          [`text-${align}`]: align,
+          [`bg-${bgVariant}`]: bgVariant,
+          [`border-${borderVariant}`]: borderVariant,
+          [`text-${textVariant}`]: textVariant
+        }
+      }),
+      [$imgFirst, $header, $content, $footer, $imgLast]
+    )
+  }
+})

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

@@ -0,0 +1,296 @@
+import { mount } from '@vue/test-utils'
+import { BCard } from './card'
+
+describe('card', () => {
+  it('default has expected structure', async () => {
+    const wrapper = mount(BCard)
+
+    // Outer div
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('card')
+    expect(wrapper.classes().length).toBe(1)
+
+    // Should have one child div.card-body
+    expect(wrapper.findAll('.card > .card-body').length).toBe(1)
+    expect(wrapper.findAll('.card-body').length).toBe(1)
+    expect(wrapper.find('.card-body').element.tagName).toBe('DIV')
+    expect(wrapper.find('.card-body').classes()).toContain('card-body')
+    expect(wrapper.find('.card-body').classes().length).toBe(1)
+
+    // Should have no content by default
+    expect(wrapper.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('should not contain "card-body" if prop no-body set', async () => {
+    const wrapper = mount(BCard, {
+      propsData: {
+        noBody: true
+      }
+    })
+
+    // Outer div
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('card')
+    expect(wrapper.classes().length).toBe(1)
+
+    // Should no have a card body
+    expect(wrapper.findAll('.card-body').length).toBe(0)
+    // Should have no content by default
+    expect(wrapper.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('renders custom root element when tag prop set', async () => {
+    const wrapper = mount(BCard, {
+      propsData: {
+        tag: 'article',
+        noBody: true
+      }
+    })
+
+    // Outer div
+    expect(wrapper.element.tagName).toBe('ARTICLE')
+    expect(wrapper.classes()).toContain('card')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('applies variant classes to root element', async () => {
+    const wrapper = mount(BCard, {
+      propsData: {
+        noBody: true,
+        bgVariant: 'info',
+        borderVariant: 'danger',
+        textVariant: 'dark'
+      }
+    })
+
+    // Outer div
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('card')
+    expect(wrapper.classes()).toContain('bg-info')
+    expect(wrapper.classes()).toContain('border-danger')
+    expect(wrapper.classes()).toContain('text-dark')
+    expect(wrapper.classes().length).toBe(4)
+    expect(wrapper.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('applies text align class to when align prop set', async () => {
+    const wrapper = mount(BCard, {
+      propsData: {
+        noBody: true,
+        align: 'right'
+      }
+    })
+
+    // Outer div
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('card')
+    expect(wrapper.classes()).toContain('text-right')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('should have content from default slot', async () => {
+    const wrapperBody = mount(BCard, {
+      propsData: {
+        noBody: false
+      },
+      slots: {
+        default: 'foobar'
+      }
+    })
+    const wrapperNoBody = mount(BCard, {
+      propsData: {
+        noBody: true
+      },
+      slots: {
+        default: 'foobar'
+      }
+    })
+
+    // With body
+    expect(wrapperBody.element.tagName).toBe('DIV')
+    expect(wrapperBody.findAll('.card-body').length).toBe(1)
+    expect(wrapperBody.find('.card-body').text()).toBe('foobar')
+
+    // With no body
+    expect(wrapperNoBody.element.tagName).toBe('DIV')
+    expect(wrapperNoBody.findAll('.card-body').length).toBe(0)
+    expect(wrapperNoBody.text()).toBe('foobar')
+
+    wrapperBody.destroy()
+    wrapperNoBody.destroy()
+  })
+
+  it('should have class flex-row when img-left set', async () => {
+    const wrapper = mount(BCard, {
+      propsData: {
+        noBody: true,
+        imgLeft: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('card')
+    expect(wrapper.classes()).toContain('flex-row')
+    expect(wrapper.classes().length).toBe(2)
+
+    wrapper.destroy()
+  })
+
+  it('should have class flex-row-reverse when img-right set', async () => {
+    const wrapper = mount(BCard, {
+      propsData: {
+        noBody: true,
+        imgRight: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('card')
+    expect(wrapper.classes()).toContain('flex-row-reverse')
+    expect(wrapper.classes().length).toBe(2)
+
+    wrapper.destroy()
+  })
+
+  it('should have class flex-row when img-left and img-right set', async () => {
+    const wrapper = mount(BCard, {
+      propsData: {
+        noBody: true,
+        imgLeft: true,
+        imgRight: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('card')
+    expect(wrapper.classes()).toContain('flex-row')
+    expect(wrapper.classes()).not.toContain('flex-row-reverse')
+    expect(wrapper.classes().length).toBe(2)
+
+    wrapper.destroy()
+  })
+
+  it('should have header and footer when header and footer props are set', async () => {
+    const wrapper = mount(BCard, {
+      propsData: {
+        header: 'foo',
+        footer: 'bar'
+      },
+      slots: {
+        default: 'fizzle'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('card')
+
+    expect(wrapper.findAll('.card-header').length).toBe(1)
+    expect(wrapper.find('.card-header').text()).toBe('foo')
+    expect(wrapper.findAll('.card-body').length).toBe(1)
+    expect(wrapper.find('.card-body').text()).toBe('fizzle')
+    expect(wrapper.findAll('.card-footer').length).toBe(1)
+    expect(wrapper.find('.card-footer').text()).toBe('bar')
+
+    // Expected order
+    expect(wrapper.find('.card-header+.card-body+.card-footer').exists()).toBe(true)
+
+    wrapper.destroy()
+  })
+
+  it('should have img at top', async () => {
+    const wrapper = mount(BCard, {
+      propsData: {
+        imgSrc: '/foo/bar',
+        imgAlt: 'foobar',
+        imgTop: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('card')
+
+    expect(wrapper.findAll('img').length).toBe(1)
+    const $img = wrapper.find('img')
+    expect($img.element.tagName).toBe('IMG')
+    expect($img.attributes('src')).toBe('/foo/bar')
+    expect($img.attributes('alt')).toBe('foobar')
+    expect($img.classes()).toContain('card-img-top')
+    expect($img.classes().length).toBe(1)
+
+    // Expected order
+    expect(wrapper.find('img + .card-body').exists()).toBe(true)
+
+    wrapper.destroy()
+  })
+
+  it('should have img at bottom', async () => {
+    const wrapper = mount(BCard, {
+      propsData: {
+        imgSrc: '/foo/bar',
+        imgAlt: 'foobar',
+        imgBottom: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('card')
+
+    expect(wrapper.findAll('img').length).toBe(1)
+    const $img = wrapper.find('img')
+    expect($img.element.tagName).toBe('IMG')
+    expect($img.attributes('src')).toBe('/foo/bar')
+    expect($img.attributes('alt')).toBe('foobar')
+    expect($img.classes()).toContain('card-img-bottom')
+    expect($img.classes().length).toBe(1)
+
+    // Expected order
+    expect(wrapper.find('.card-body + img').exists()).toBe(true)
+
+    wrapper.destroy()
+  })
+
+  it('should have img overlay', async () => {
+    const wrapper = mount(BCard, {
+      propsData: {
+        imgSrc: '/foo/bar',
+        imgAlt: 'foobar',
+        overlay: true
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('card')
+    expect(wrapper.classes().length).toBe(1)
+
+    expect(wrapper.findAll('img').length).toBe(1)
+    const $img = wrapper.find('img')
+    expect($img.element.tagName).toBe('IMG')
+    expect($img.attributes('src')).toBe('/foo/bar')
+    expect($img.attributes('alt')).toBe('foobar')
+    expect($img.classes()).toContain('card-img')
+    expect($img.classes().length).toBe(1)
+
+    expect(wrapper.findAll('.card-body').length).toBe(1)
+    const $body = wrapper.find('.card-body')
+    expect($body.classes()).toContain('card-body')
+    expect($body.classes()).toContain('card-img-overlay')
+    expect($body.classes().length).toBe(2)
+
+    // Expected order
+    expect(wrapper.find('img + .card-body').exists()).toBe(true)
+
+    wrapper.destroy()
+  })
+})

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

@@ -0,0 +1,38 @@
+//
+// Card
+//
+import Vue from 'vue'
+import { BvPlugin, BvComponent } from '../../'
+
+// Plugin
+export declare const CardPlugin: BvPlugin
+
+// Component: b-card
+export declare class BCard extends BvComponent {}
+
+// Component: b-card-header
+export declare class BCardHeader extends BvComponent {}
+
+// Component: b-card-footer
+export declare class BCardFooter extends BvComponent {}
+
+// Component: b-card-body
+export declare class BCardBody extends BvComponent {}
+
+// Component: b-card-title
+export declare class BCardTitle extends BvComponent {}
+
+// Component: b-card-sub-title
+export declare class BCardSubTitle extends BvComponent {}
+
+// Component: b-card-img
+export declare class BCardImg extends BvComponent {}
+
+// Component: b-card-img-lazy
+export declare class BCardImgLazy extends BvComponent {}
+
+// Component: b-card-text
+export declare class BCardText extends BvComponent {}
+
+// Component: b-card-group
+export declare class BCardGroup extends BvComponent {}

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

@@ -0,0 +1,40 @@
+import { BCard } from './card'
+import { BCardHeader } from './card-header'
+import { BCardBody } from './card-body'
+import { BCardTitle } from './card-title'
+import { BCardSubTitle } from './card-sub-title'
+import { BCardFooter } from './card-footer'
+import { BCardImg } from './card-img'
+import { BCardImgLazy } from './card-img-lazy'
+import { BCardText } from './card-text'
+import { BCardGroup } from './card-group'
+import { pluginFactory } from '../../utils/plugins'
+
+const CardPlugin = /*#__PURE__*/ pluginFactory({
+  components: {
+    BCard,
+    BCardHeader,
+    BCardBody,
+    BCardTitle,
+    BCardSubTitle,
+    BCardFooter,
+    BCardImg,
+    BCardImgLazy,
+    BCardText,
+    BCardGroup
+  }
+})
+
+export {
+  CardPlugin,
+  BCard,
+  BCardHeader,
+  BCardBody,
+  BCardTitle,
+  BCardSubTitle,
+  BCardFooter,
+  BCardImg,
+  BCardImgLazy,
+  BCardText,
+  BCardGroup
+}

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

@@ -0,0 +1 @@
+@import "card-img";