@gitlab/ui 84.1.0 → 85.0.0

package/src/vendor/bootstrap-vue/src/components/input-group/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@bootstrap-vue/input-group",
+  "version": "1.0.0",
+  "meta": {
+    "title": "Input Group",
+    "description": "Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.",
+    "components": [
+      {
+        "component": "BInputGroup",
+        "props": [
+          {
+            "prop": "append",
+            "description": "Text to append to the input group"
+          },
+          {
+            "prop": "appendHtml",
+            "description": "HTML string to append to the input group. Has precedence over 'append' prop",
+            "xss": true
+          },
+          {
+            "prop": "prepend",
+            "description": "Text to prepend to the input group"
+          },
+          {
+            "prop": "prependHtml",
+            "description": "HTML string to prepend to the input group. Has precedence over 'prepend' prop",
+            "xss": true
+          },
+          {
+            "prop": "size",
+            "description": "Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'"
+          }
+        ],
+        "slots": [
+          {
+            "name": "append",
+            "description": "Append attachment"
+          },
+          {
+            "name": "default",
+            "description": "Content to place in the input group"
+          },
+          {
+            "name": "prepend",
+            "description": "Prepend attachment"
+          }
+        ]
+      },
+      {
+        "component": "BInputGroupPrepend",
+        "props": [
+          {
+            "prop": "isText",
+            "description": "When 'true', wraps the content in a b-input-group-text component"
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content to place in the input group prepend"
+          }
+        ]
+      },
+      {
+        "component": "BInputGroupAppend",
+        "props": [
+          {
+            "prop": "isText",
+            "description": "When 'true', wraps the content in a b-input-group-text component"
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content to place in the input group append"
+          }
+        ]
+      },
+      {
+        "component": "BInputGroupText",
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content to place in the input group text"
+          }
+        ]
+      },
+      {
+        "component": "BInputGroupAddon",
+        "props": [
+          {
+            "prop": "append",
+            "description": "When set to 'true' sets the addon as being appended. defaults to 'false' which is prepended"
+          },
+          {
+            "prop": "isText",
+            "description": "When 'true', wraps the content in a b-input-group-text component"
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content to place in the input group addon"
+          }
+        ]
+      }
+    ]
+  }
+}

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

@@ -0,0 +1,109 @@
+# Jumbotron
+
+> A lightweight, flexible component that can optionally extend the entire viewport to showcase key
+> marketing messages on your site.
+
+You can set the heading and lead text via the `header` and `lead` props, or use the named slots
+`header` and `lead` if you need HTML support.
+
+Anything else between the opening and closing tags will be rendered at the bottom of the jumbotron.
+
+**Usage with props:**
+
+```html
+<div>
+  <b-jumbotron header="BootstrapVue" lead="Bootstrap v4 Components for Vue.js 2">
+    <p>For more information visit website</p>
+    <b-button variant="primary" href="#">More Info</b-button>
+  </b-jumbotron>
+</div>
+
+<!-- b-jumbotron.vue -->
+```
+
+**Usage with slots:**
+
+```html
+<div>
+  <b-jumbotron>
+    <template #header>BootstrapVue</template>
+
+    <template #lead>
+      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
+      featured content or information.
+    </template>
+
+    <hr class="my-4">
+
+    <p>
+      It uses utility classes for typography and spacing to space content out within the larger
+      container.
+    </p>
+
+    <b-button variant="primary" href="#">Do Something</b-button>
+    <b-button variant="success" href="#">Do Something Else</b-button>
+  </b-jumbotron>
+</div>
+
+<!-- b-jumbotron-using-slots.vue -->
+```
+
+## Options
+
+### Header
+
+Control which tag is rendered for the header by setting the `header-tag` to the appropriate HTML
+element. The default is `h1`. Both the prop `header` and slot `header` will be rendered inside this
+tag. If both the prop and the slot are specified, the slot will be shown.
+
+Control the overall size of the header text by setting the `header-level` prop to a value between
+`1` and `4` - with `1` being the largest and `4` being smallest. The default value is `3`.
+
+### Lead text
+
+Control which tag is rendered for the lead text by setting the `lead-tag` to the desired HTML
+element. The default is `p`. Both the prop `lead` and slot `lead` will be rendered inside this tag.
+If both the prop and the slot are specified, the slot will be shown.
+
+## Fluid width
+
+To make `<b-jumbotron>` full width, and without rounded corners, set the `fluid` prop. The inner
+content will automatically be placed into a `<b-container>` (fixed width at the various
+breakpoints). To change this to a fluid container, set the `container-fluid` prop. The
+`container-fluid` prop has no effect if the `fluid` prop is not set
+
+## Component tag
+
+By default, `<b-jumbotron>` will render its root element as a `div`. Change the element tag to any
+other appropriate element by setting the `tag` prop to the desired element tag name.
+
+## Variants
+
+Control the overall background variant with the `bg-variant` prop ( set to `info`, `danger`,
+`warning`, `light`, `dark`, etc.), the border variant with the `border-variant` prop, and the text
+variant with `text-variant` prop. All three props default to `null`, which will instruct the
+jumbotron to use the default styling.
+
+```html
+<div>
+  <b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
+    <template #header>BootstrapVue</template>
+
+    <template #lead>
+      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
+      featured content or information.
+    </template>
+
+    <hr class="my-4">
+
+    <p>
+      It uses utility classes for typography and spacing to space content out within the larger
+      container.
+    </p>
+  </b-jumbotron>
+</div>
+
+<!-- b-jumbotron-variants.vue -->
+```
+
+<!-- Component reference added automatically from component package.json -->

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

@@ -0,0 +1,11 @@
+//
+// Jumbotron
+//
+import Vue from 'vue'
+import { BvPlugin, BvComponent } from '../../'
+
+// Plugin
+export declare const JumbotronPlugin: BvPlugin
+
+// Component: b-jumbotron
+export declare class BJumbotron extends BvComponent {}

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

@@ -0,0 +1,8 @@
+import { BJumbotron } from './jumbotron'
+import { pluginFactory } from '../../utils/plugins'
+
+const JumbotronPlugin = /*#__PURE__*/ pluginFactory({
+  components: { BJumbotron }
+})
+
+export { JumbotronPlugin, BJumbotron }

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

@@ -0,0 +1,103 @@
+import { extend, mergeData } from '../../vue'
+import { NAME_JUMBOTRON } from '../../constants/components'
+import {
+  PROP_TYPE_BOOLEAN,
+  PROP_TYPE_BOOLEAN_STRING,
+  PROP_TYPE_NUMBER_STRING,
+  PROP_TYPE_STRING
+} from '../../constants/props'
+import { SLOT_NAME_DEFAULT, SLOT_NAME_HEADER, SLOT_NAME_LEAD } from '../../constants/slots'
+import { htmlOrText } from '../../utils/html'
+import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { BContainer } from '../layout/container'
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  {
+    bgVariant: makeProp(PROP_TYPE_STRING),
+    borderVariant: makeProp(PROP_TYPE_STRING),
+    containerFluid: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
+    fluid: makeProp(PROP_TYPE_BOOLEAN, false),
+    header: makeProp(PROP_TYPE_STRING),
+    headerHtml: makeProp(PROP_TYPE_STRING),
+    headerLevel: makeProp(PROP_TYPE_NUMBER_STRING, 3),
+    headerTag: makeProp(PROP_TYPE_STRING, 'h1'),
+    lead: makeProp(PROP_TYPE_STRING),
+    leadHtml: makeProp(PROP_TYPE_STRING),
+    leadTag: makeProp(PROP_TYPE_STRING, 'p'),
+    tag: makeProp(PROP_TYPE_STRING, 'div'),
+    textVariant: makeProp(PROP_TYPE_STRING)
+  },
+  NAME_JUMBOTRON
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BJumbotron = /*#__PURE__*/ extend({
+  name: NAME_JUMBOTRON,
+  functional: true,
+  props,
+  render(h, { props, data, slots, scopedSlots }) {
+    const { header, headerHtml, lead, leadHtml, textVariant, bgVariant, borderVariant } = props
+    const $scopedSlots = scopedSlots || {}
+    const $slots = slots()
+    const slotScope = {}
+
+    let $header = h()
+    const hasHeaderSlot = hasNormalizedSlot(SLOT_NAME_HEADER, $scopedSlots, $slots)
+    if (hasHeaderSlot || header || headerHtml) {
+      const { headerLevel } = props
+
+      $header = h(
+        props.headerTag,
+        {
+          class: { [`display-${headerLevel}`]: headerLevel },
+          domProps: hasHeaderSlot ? {} : htmlOrText(headerHtml, header)
+        },
+        normalizeSlot(SLOT_NAME_HEADER, slotScope, $scopedSlots, $slots)
+      )
+    }
+
+    let $lead = h()
+    const hasLeadSlot = hasNormalizedSlot(SLOT_NAME_LEAD, $scopedSlots, $slots)
+    if (hasLeadSlot || lead || leadHtml) {
+      $lead = h(
+        props.leadTag,
+        {
+          staticClass: 'lead',
+          domProps: hasLeadSlot ? {} : htmlOrText(leadHtml, lead)
+        },
+        normalizeSlot(SLOT_NAME_LEAD, slotScope, $scopedSlots, $slots)
+      )
+    }
+
+    let $children = [
+      $header,
+      $lead,
+      normalizeSlot(SLOT_NAME_DEFAULT, slotScope, $scopedSlots, $slots)
+    ]
+
+    // If fluid, wrap content in a container
+    if (props.fluid) {
+      $children = [h(BContainer, { props: { fluid: props.containerFluid } }, $children)]
+    }
+
+    return h(
+      props.tag,
+      mergeData(data, {
+        staticClass: 'jumbotron',
+        class: {
+          'jumbotron-fluid': props.fluid,
+          [`text-${textVariant}`]: textVariant,
+          [`bg-${bgVariant}`]: bgVariant,
+          [`border-${borderVariant}`]: borderVariant,
+          border: borderVariant
+        }
+      }),
+      $children
+    )
+  }
+})

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

@@ -0,0 +1,254 @@
+import { mount } from '@vue/test-utils'
+import { BJumbotron } from './jumbotron'
+
+describe('jumbotron', () => {
+  it('has expected default structure', async () => {
+    const wrapper = mount(BJumbotron)
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('jumbotron')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('renders with custom root element when prop "tag" is set', async () => {
+    const wrapper = mount(BJumbotron, {
+      propsData: {
+        tag: 'article'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('ARTICLE')
+    expect(wrapper.classes()).toContain('jumbotron')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toEqual('')
+
+    wrapper.destroy()
+  })
+
+  it('has border when prop "border-variant" is set', async () => {
+    const wrapper = mount(BJumbotron, {
+      propsData: {
+        borderVariant: 'danger'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('jumbotron')
+    expect(wrapper.classes()).toContain('border')
+    expect(wrapper.classes()).toContain('border-danger')
+    expect(wrapper.classes().length).toBe(3)
+
+    wrapper.destroy()
+  })
+
+  it('has background variant when prop "bg-variant" is set', async () => {
+    const wrapper = mount(BJumbotron, {
+      propsData: {
+        bgVariant: 'info'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('jumbotron')
+    expect(wrapper.classes()).toContain('bg-info')
+    expect(wrapper.classes().length).toBe(2)
+
+    wrapper.destroy()
+  })
+
+  it('has text variant when prop "text-variant" is set', async () => {
+    const wrapper = mount(BJumbotron, {
+      propsData: {
+        textVariant: 'primary'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('jumbotron')
+    expect(wrapper.classes()).toContain('text-primary')
+    expect(wrapper.classes().length).toBe(2)
+
+    wrapper.destroy()
+  })
+
+  it('renders default slot content', async () => {
+    const wrapper = mount(BJumbotron, {
+      slots: {
+        default: 'foobar'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('jumbotron')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toEqual('foobar')
+    expect(wrapper.findAll('.jumbotron > *').length).toBe(0)
+
+    wrapper.destroy()
+  })
+
+  it('renders default slot content inside container when "fluid" prop set', async () => {
+    const wrapper = mount(BJumbotron, {
+      propsData: {
+        fluid: true
+      },
+      slots: {
+        default: 'foobar'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('jumbotron')
+    expect(wrapper.classes()).toContain('jumbotron-fluid')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.findAll('.jumbotron > *').length).toBe(1)
+    expect(wrapper.findAll('.container').length).toBe(1)
+    expect(wrapper.find('.container').element.tagName).toBe('DIV')
+    expect(wrapper.find('.container').text()).toEqual('foobar')
+    expect(wrapper.text()).toEqual('foobar')
+
+    wrapper.destroy()
+  })
+
+  it('renders default slot content inside ".container-fluid" when props "fluid" and "container-fluid" set', async () => {
+    const wrapper = mount(BJumbotron, {
+      propsData: {
+        fluid: true,
+        containerFluid: true
+      },
+      slots: {
+        default: 'foobar'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('jumbotron')
+    expect(wrapper.classes()).toContain('jumbotron-fluid')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.findAll('.jumbotron > *').length).toBe(1)
+    expect(wrapper.findAll('.container').length).toBe(0)
+    expect(wrapper.findAll('.container-fluid').length).toBe(1)
+    expect(wrapper.find('.container-fluid').element.tagName).toBe('DIV')
+    expect(wrapper.find('.container-fluid').text()).toEqual('foobar')
+    expect(wrapper.text()).toEqual('foobar')
+
+    wrapper.destroy()
+  })
+
+  it('renders header and lead content by props', async () => {
+    const wrapper = mount(BJumbotron, {
+      propsData: {
+        header: 'foo',
+        lead: 'bar'
+      },
+      slots: {
+        default: '<span>baz</span>'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('jumbotron')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.findAll('h1').length).toBe(1)
+    expect(wrapper.findAll('p').length).toBe(1)
+    expect(wrapper.findAll('span').length).toBe(1)
+    expect(wrapper.find('.jumbotron > h1 + p + span').exists()).toBe(true)
+
+    const $header = wrapper.find('h1')
+    expect($header.classes()).toContain('display-3')
+    expect($header.classes().length).toBe(1)
+    expect($header.text()).toEqual('foo')
+
+    const $lead = wrapper.find('p')
+    expect($lead.classes()).toContain('lead')
+    expect($lead.classes().length).toBe(1)
+    expect($lead.text()).toEqual('bar')
+
+    expect(wrapper.find('span').text()).toEqual('baz')
+
+    wrapper.destroy()
+  })
+
+  it('renders header and lead content by html props', async () => {
+    const wrapper = mount(BJumbotron, {
+      propsData: {
+        // We also pass non-html props to ensure html props have precedence
+        header: 'foo',
+        headerHtml: '<strong>baz</strong>',
+        lead: 'bar',
+        leadHtml: '<strong>bat</strong>'
+      },
+      slots: {
+        default: '<span>baz</span>'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('jumbotron')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.findAll('h1').length).toBe(1)
+    expect(wrapper.findAll('p').length).toBe(1)
+    expect(wrapper.findAll('span').length).toBe(1)
+    expect(wrapper.find('.jumbotron > h1 + p + span').exists()).toBe(true)
+
+    const $header = wrapper.find('h1')
+    expect($header.classes()).toContain('display-3')
+    expect($header.classes().length).toBe(1)
+    expect($header.find('strong').exists()).toBe(true)
+    expect($header.text()).toEqual('baz')
+
+    const $lead = wrapper.find('p')
+    expect($lead.classes()).toContain('lead')
+    expect($lead.classes().length).toBe(1)
+    expect($lead.find('strong').exists()).toBe(true)
+    expect($lead.text()).toEqual('bat')
+
+    expect(wrapper.find('span').text()).toEqual('baz')
+
+    wrapper.destroy()
+  })
+
+  it('renders header and lead content by slots', async () => {
+    const wrapper = mount(BJumbotron, {
+      propsData: {
+        // We also pass as props to ensure slots have precedence
+        header: 'foo',
+        headerHtml: '<strong>baz</strong>',
+        lead: 'bar',
+        leadHtml: '<strong>bat</strong>'
+      },
+      slots: {
+        default: '<span>baz</span>',
+        header: '<small>foo</small>',
+        lead: '<small>bar</small>'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('jumbotron')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.findAll('h1').length).toBe(1)
+    expect(wrapper.findAll('p').length).toBe(1)
+    expect(wrapper.findAll('span').length).toBe(1)
+    expect(wrapper.find('.jumbotron > h1 + p + span').exists()).toBe(true)
+
+    const $header = wrapper.find('h1')
+    expect($header.classes()).toContain('display-3')
+    expect($header.classes().length).toBe(1)
+    expect($header.find('small').exists()).toBe(true)
+    expect($header.text()).toEqual('foo')
+
+    const $lead = wrapper.find('p')
+    expect($lead.classes()).toContain('lead')
+    expect($lead.classes().length).toBe(1)
+    expect($lead.find('small').exists()).toBe(true)
+    expect($lead.text()).toEqual('bar')
+
+    expect(wrapper.find('span').text()).toEqual('baz')
+
+    wrapper.destroy()
+  })
+})

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

@@ -0,0 +1,66 @@
+{
+  "name": "@bootstrap-vue/jumbotron",
+  "version": "1.0.0",
+  "meta": {
+    "title": "Jumbotron",
+    "description": "A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.",
+    "components": [
+      {
+        "component": "BJumbotron",
+        "props": [
+          {
+            "prop": "bgVariant",
+            "description": "Applies one of the Bootstrap theme color variants to the background"
+          },
+          {
+            "prop": "borderVariant",
+            "description": "Applies one of the Bootstrap theme color variants to the border"
+          },
+          {
+            "prop": "containerFluid",
+            "description": "When prop 'fluid' is set, this prop will make the inner container wrapper also fluid in width. Can also be set to one of the Bootstrap breakpoint names"
+          },
+          {
+            "prop": "fluid",
+            "description": "Makes the jumbotron full width, and without rounded corners. When set, the inner content will automatically be wrapped into a 'b-container' (fixed width at the various breakpoints)"
+          },
+          {
+            "prop": "headerLevel",
+            "description": "Scaling factor of the header. Values range from 1 to 5"
+          },
+          {
+            "prop": "lead",
+            "description": "Text string to place in the lead paragraph"
+          },
+          {
+            "prop": "leadHtml",
+            "description": "HTML string to place in the lead paragraph",
+            "xss": true
+          },
+          {
+            "prop": "leadTag",
+            "description": "Specify the HTML tag to render instead of the default tag for the lead paragraph"
+          },
+          {
+            "prop": "textVariant",
+            "description": "Applies one of the Bootstrap theme color variants to the text"
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content to place in the jumbotron"
+          },
+          {
+            "name": "header",
+            "description": "Slot for custom header content. Placed inside 'header-tag'. Overrides the `header` and `header-html` props"
+          },
+          {
+            "name": "lead",
+            "description": "For custom rendering of lead text content. Placed inside 'lead-tag'. Overrides the `lead` and `lead-html` props"
+          }
+        ]
+      }
+    ]
+  }
+}