@gitlab/duo-ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,13 @@
+//
+// Breadcrumb
+//
+import { BvComponent } from '../../'
+
+// Component: b-breadcrumb
+export declare class BBreadcrumb extends BvComponent {}
+
+// Component: b-breadcrumb-item
+export declare class BBreadcrumbItem extends BvComponent {}
+
+// Component: b-breadcrumb-link
+export declare class BBreadcrumbLink extends BvComponent {}

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

@@ -0,0 +1,62 @@
+{
+  "name": "@bootstrap-vue/breadcrumb",
+  "version": "1.0.0",
+  "meta": {
+    "title": "Breadcrumb",
+    "description": "Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through ::before and content.",
+    "components": [
+      {
+        "component": "BBreadcrumb",
+        "props": [
+          {
+            "prop": "items",
+            "description": "Array of breadcrumb items to render"
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content (breadcrumb items) to place in the breadcrumb"
+          }
+        ]
+      },
+      {
+        "component": "BBreadcrumbItem",
+        "props": [
+          {
+            "prop": "ariaCurrent",
+            "description": "Sets the value of the 'aria-current' attribute (when the item is the active item). Supported string values are 'location', 'page', or 'true'"
+          },
+          {
+            "prop": "html",
+            "description": "HTML string to render in the breadcrumb item",
+            "xss": true
+          },
+          {
+            "prop": "text",
+            "description": "Text to render in the breadcrumb item"
+          }
+        ],
+        "events": [
+          {
+            "event": "click",
+            "description": "Emitted when clicked",
+            "args": [
+              {
+                "arg": "event",
+                "type": "MouseEvent",
+                "description": "Native click event object"
+              }
+            ]
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": "Content to place in the breadcrumb item"
+          }
+        ]
+      }
+    ]
+  }
+}

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

@@ -0,0 +1,281 @@
+# Button
+
+> Use Bootstrap's custom `b-button` component for actions in forms, dialogs, and more. Includes
+> support for a handful of contextual variations, sizes, states, and more.
+
+## Overview
+
+BootstrapVue's `<b-button>` component generates either a `<button>` element, `<a>` element, or
+`<router-link>` component with the styling of a button.
+
+```html
+<div>
+  <b-button>Button</b-button>
+  <b-button variant="danger">Button</b-button>
+  <b-button variant="success">Button</b-button>
+  <b-button variant="outline-primary">Button</b-button>
+</div>
+
+<!-- b-button.vue -->
+```
+
+## Element type
+
+The `<b-button>` component generally renders a `<button>` element. However, you can also render an
+`<a>` element by providing an `href` prop value. You may also generate `vue-router` `<router-link>`
+when providing a value for the `to` prop (`vue-router` is required).
+
+```html
+<div>
+  <b-button>I am a Button</b-button>
+  <b-button href="#">I am a Link</b-button>
+</div>
+
+<!-- b-button-types.vue -->
+```
+
+## Type
+
+You can specify the button's type by setting the prop `type` to `'button'`, `'submit'` or `'reset'`.
+The default type is `'button'`.
+
+Note the `type` prop has no effect when either `href` or `to` props are set.
+
+## Sizing
+
+Fancy larger or smaller buttons? Specify `lg` or `sm` via the `size` prop.
+
+```html
+<b-row>
+  <b-col lg="4" class="pb-2"><b-button size="sm">Small Button</b-button></b-col>
+  <b-col lg="4" class="pb-2"><b-button>Default Button</b-button></b-col>
+  <b-col lg="4" class="pb-2"><b-button size="lg">Large Button</b-button></b-col>
+</b-row>
+
+<!-- b-button-sizes.vue -->
+```
+
+## Contextual variants
+
+Use the `variant` prop to generate the various Bootstrap contextual button variants.
+
+By default `<b-button>` will render with the `secondary` variant.
+
+The `variant` prop adds the Bootstrap v4.3 class `.btn-<variant>` on the rendered button.
+
+### Solid color variants
+
+`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light` and `dark`.
+
+```html
+<div>
+  <b-button variant="primary">Primary</b-button>
+  <b-button variant="secondary">Secondary</b-button>
+  <b-button variant="success">Success</b-button>
+  <b-button variant="danger">Danger</b-button>
+  <b-button variant="warning">Warning</b-button>
+  <b-button variant="info">Info</b-button>
+  <b-button variant="light">Light</b-button>
+  <b-button variant="dark">Dark</b-button>
+</div>
+
+<!-- b-button-solid.vue -->
+```
+
+### Outline color variants
+
+In need of a button, but not the hefty background colors they bring? Use the `outline-*` variants to
+remove all background images and colors on any `<b-button>`:
+
+`outline-primary`, `outline-secondary`, `outline-success`, `outline-danger`, `outline-warning`,
+`outline-info`, `outline-light` and `outline-dark`.
+
+```html
+<div>
+  <b-button variant="outline-primary">Primary</b-button>
+  <b-button variant="outline-secondary">Secondary</b-button>
+  <b-button variant="outline-success">Success</b-button>
+  <b-button variant="outline-danger">Danger</b-button>
+  <b-button variant="outline-warning">Warning</b-button>
+  <b-button variant="outline-info">Info</b-button>
+  <b-button variant="outline-light">Light</b-button>
+  <b-button variant="outline-dark">Dark</b-button>
+</div>
+
+<!-- b-button-outline.vue -->
+```
+
+### Link variant
+
+Variant `link` will render a button with the appearance of a link while maintaining the default
+padding and size of a button.
+
+```html
+<div>
+  <b-button variant="link">Link</b-button>
+</div>
+
+<!-- b-button-link.vue -->
+```
+
+**Tip:** remove the hover underline from a link variant button by adding the Bootstrap v4.3 utility
+class `text-decoration-none` to `<b-button>`.
+
+## Block level buttons
+
+Create block level buttons — those that span the full width of a parent — by setting the `block`
+prop.
+
+```html
+<div>
+  <b-button block variant="primary">Block Level Button</b-button>
+</div>
+
+<!-- b-button-block.vue -->
+```
+
+## Pill style
+
+Prefer buttons with a more rounded-pill style? Just set the prop `pill` to true.
+
+```html
+<div>
+  <b-button pill>Button</b-button>
+  <b-button pill variant="primary">Button</b-button>
+  <b-button pill variant="outline-secondary">Button</b-button>
+  <b-button pill variant="success">Button</b-button>
+  <b-button pill variant="outline-danger">Button</b-button>
+  <b-button pill variant="info">Button</b-button>
+</div>
+
+<!-- b-button-pill.vue -->
+```
+
+This prop adds the Bootstrap v4.3 utility class `.rounded-pill` on the rendered button.
+
+## Squared style
+
+Prefer buttons with a more square corner style? Just set the prop `squared` to true.
+
+```html
+<div>
+  <b-button squared>Button</b-button>
+  <b-button squared variant="primary">Button</b-button>
+  <b-button squared variant="outline-secondary">Button</b-button>
+  <b-button squared variant="success">Button</b-button>
+  <b-button squared variant="outline-danger">Button</b-button>
+  <b-button squared variant="info">Button</b-button>
+</div>
+
+<!-- b-button-square.vue -->
+```
+
+The `squared` prop adds the Bootstrap v4.3 utility class `.rounded-0` on the rendered button. The
+`pill` prop takes precedence over the `squared` prop.
+
+## Disabled state
+
+Set the `disabled` prop to disable button default functionality. `disabled` also works with buttons
+rendered as `<a>` elements and `<router-link>` (i.e. with the `href` or `to` prop set).
+
+```html
+<div>
+  <b-button disabled size="lg" variant="primary">Disabled</b-button>
+  <b-button disabled size="lg">Also Disabled</b-button>
+</div>
+
+<!-- b-button-disabled.vue -->
+```
+
+## Pressed state and toggling
+
+Buttons will appear pressed (with a darker background, darker border, and inset shadow) when the
+prop `pressed` is set to `true`.
+
+The `pressed` prop can be set to one of three values:
+
+- `true`: Sets the `.active` class and adds the attribute `aria-pressed="true"`.
+- `false`: Clears the `.active` class and adds the attribute `aria-pressed="false"`.
+- `null`: (default) Neither the class `.active` nor the attribute `aria-pressed` will be set.
+
+To create a button that can be toggled between active and non-active states, use the `.sync` prop
+modifier (available in Vue 2.3+) on the `pressed` property
+
+```html
+<template>
+  <div>
+    <h5>Pressed and un-pressed state</h5>
+    <b-button :pressed="true" variant="success">Always Pressed</b-button>
+    <b-button :pressed="false" variant="success">Not Pressed</b-button>
+
+    <h5 class="mt-3">Toggleable Button</h5>
+    <b-button :pressed.sync="myToggle" variant="primary">Toggle Me</b-button>
+    <p>Pressed State: <strong>{{ myToggle }}</strong></p>
+
+    <h5>In a button group</h5>
+    <b-button-group size="sm">
+      <b-button
+        v-for="(btn, idx) in buttons"
+        :key="idx"
+        :pressed.sync="btn.state"
+        variant="primary"
+      >
+        {{ btn.caption }}
+      </b-button>
+    </b-button-group>
+    <p>Pressed States: <strong>{{ btnStates }}</strong></p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        myToggle: false,
+        buttons: [
+          { caption: 'Toggle 1', state: true },
+          { caption: 'Toggle 2', state: false },
+          { caption: 'Toggle 3', state: true },
+          { caption: 'Toggle 4', state: false }
+        ]
+      }
+    },
+    computed: {
+      btnStates() {
+        return this.buttons.map(btn => btn.state)
+      }
+    }
+  }
+</script>
+
+<!-- b-button-toggles.vue -->
+```
+
+If using toggle button style for a radio or checkbox style interface, it is best to use the built-in
+`button` style support of [`<b-form-radio-group>`](/docs/components/form-radio) and
+[`<b-form-checkbox-group>`](/docs/components/form-checkbox).
+
+## Router link support
+
+Refer to the [`Router support`](/docs/reference/router-links) reference docs for the various
+supported `<router-link>` related props.
+
+## Accessibility
+
+When the `href` prop is set to `'#'`, `<b-button>` will render a link (`<a>`) element with attribute
+`role="button"` set and appropriate keydown listeners (<kbd>Enter</kbd> and <kbd>Space</kbd>) so
+that the link acts like a native HTML `<button>` for screen reader and keyboard-only users. When
+disabled, the `aria-disabled="true"` attribute will be set on the `<a>` element.
+
+When the `href` is set to any other value (or the `to` prop is used), `role="button"` will not be
+added, nor will the keyboard event listeners be enabled.
+
+## See also
+
+- [`<b-button-group>`](/docs/components/button-group)
+- [`<b-button-toolbar>`](/docs/components/button-toolbar)
+- [`<b-link>`](/docs/components/link)
+- [Router Link Support](/docs/reference/router-links)
+- [Color Variants](/docs/reference/color-variants)
+
+<!-- Component reference added automatically from component package.json -->

package/src/vendor/bootstrap-vue/src/components/button/button-close.spec.js

@@ -0,0 +1,210 @@
+import { mount } from '@vue/test-utils'
+import { BButtonClose } from './button-close'
+
+describe('button-close', () => {
+  it('has root element "button"', async () => {
+    const wrapper = mount(BButtonClose)
+
+    expect(wrapper.element.tagName).toBe('BUTTON')
+
+    wrapper.destroy()
+  })
+
+  it('has class "close"', async () => {
+    const wrapper = mount(BButtonClose)
+
+    expect(wrapper.classes()).toContain('close')
+    expect(wrapper.classes().length).toBe(1)
+
+    wrapper.destroy()
+  })
+
+  it('has attribute type="button"', async () => {
+    const wrapper = mount(BButtonClose)
+
+    expect(wrapper.attributes('type')).toBe('button')
+
+    wrapper.destroy()
+  })
+
+  it('does not have attribute "disabled" by default', async () => {
+    const wrapper = mount(BButtonClose)
+
+    expect(wrapper.attributes('disabled')).toBeUndefined()
+
+    wrapper.destroy()
+  })
+
+  it('has attribute "disabled" when prop "disabled" is set', async () => {
+    const wrapper = mount(BButtonClose, {
+      context: {
+        props: { disabled: true }
+      }
+    })
+
+    expect(wrapper.attributes('disabled')).toBeDefined()
+
+    wrapper.destroy()
+  })
+
+  it('has attribute aria-label="Close" by default', async () => {
+    const wrapper = mount(BButtonClose)
+
+    expect(wrapper.attributes('aria-label')).toBe('Close')
+
+    wrapper.destroy()
+  })
+
+  it('has custom attribute "aria-label" when prop "aria-label" set', async () => {
+    const wrapper = mount(BButtonClose, {
+      context: {
+        props: { ariaLabel: 'foobar' }
+      }
+    })
+
+    expect(wrapper.attributes('aria-label')).toBe('foobar')
+
+    wrapper.destroy()
+  })
+
+  it('has text variant class when "variant" prop set', async () => {
+    const wrapper = mount(BButtonClose, {
+      context: {
+        props: { textVariant: 'primary' }
+      }
+    })
+
+    expect(wrapper.classes()).toContain('close')
+    expect(wrapper.classes()).toContain('text-primary')
+    expect(wrapper.classes().length).toBe(2)
+
+    wrapper.destroy()
+  })
+
+  it('should have default content', async () => {
+    const wrapper = mount(BButtonClose)
+
+    // '×' gets converted to '×'
+    expect(wrapper.text()).toContain('×')
+
+    wrapper.destroy()
+  })
+
+  it('should have custom content from "content" prop', async () => {
+    const wrapper = mount(BButtonClose, {
+      context: {
+        props: { content: 'Close' }
+      }
+    })
+
+    expect(wrapper.text()).toContain('Close')
+
+    wrapper.destroy()
+  })
+
+  it('should have custom content from default slot', async () => {
+    const wrapper = mount(BButtonClose, {
+      slots: {
+        default: '<i>foobar</i>'
+      }
+    })
+
+    expect(wrapper.text()).toContain('foobar')
+
+    wrapper.destroy()
+  })
+
+  it('should emit "click" event when clicked', async () => {
+    let event = null
+    const spy1 = jest.fn(e => {
+      event = e
+    })
+    const wrapper = mount(BButtonClose, {
+      context: {
+        on: { click: spy1 }
+      },
+      slots: {
+        default: '<i>some <span>text</span></i>'
+      }
+    })
+
+    expect(spy1).not.toHaveBeenCalled()
+
+    const btn = wrapper.find('button')
+    expect(btn).toBeDefined()
+    await btn.trigger('click')
+
+    expect(spy1).toHaveBeenCalled()
+    expect(spy1.mock.calls.length).toBe(1)
+    expect(event).toBeInstanceOf(MouseEvent)
+
+    // Works when clicking on an inner element
+    const span = wrapper.find('span')
+    expect(span).toBeDefined()
+    await span.trigger('click')
+
+    expect(spy1.mock.calls.length).toBe(2)
+
+    wrapper.destroy()
+  })
+
+  it('should not emit "click" event when disabled and clicked', async () => {
+    const spy1 = jest.fn()
+    const wrapper = mount(BButtonClose, {
+      context: {
+        props: {
+          disabled: true
+        },
+        on: { click: spy1 }
+      },
+      slots: {
+        default: '<i>some <span>text</span></i>'
+      }
+    })
+
+    expect(spy1).not.toHaveBeenCalled()
+
+    const btn = wrapper.find('button')
+    expect(btn).toBeDefined()
+    await btn.trigger('click')
+
+    expect(spy1).not.toHaveBeenCalled()
+
+    // For some reason, JSDOM emits a click on button when clicking inner element
+    // Although testing in docs, this click is not emitted when disabled
+    // Appears to be a bug in JSDOM
+    //
+    // // Does not emit click on inner element clicks
+    // const span = wrapper.find('span')
+    // expect(span).toBeDefined()
+    // await span.trigger('click')
+    //
+    // expect(spy1).not.toHaveBeenCalled()
+
+    wrapper.destroy()
+  })
+
+  it('handles multiple click listeners', async () => {
+    const spy1 = jest.fn()
+    const spy2 = jest.fn()
+    const wrapper = mount(BButtonClose, {
+      context: {
+        on: { click: [spy1, spy2] }
+      }
+    })
+
+    expect(spy1).not.toHaveBeenCalled()
+    expect(spy2).not.toHaveBeenCalled()
+
+    const btn = wrapper.find('button')
+    expect(btn).toBeDefined()
+    await btn.trigger('click')
+
+    expect(spy1).toHaveBeenCalled()
+    expect(spy2).toHaveBeenCalled()
+    expect(spy1.mock.calls.length).toBe(1)
+    expect(spy2.mock.calls.length).toBe(1)
+
+    wrapper.destroy()
+  })
+})