Permalink
Browse files

feat: link, breadcrumb, & button functional components (#830)

* [WIP] feat: link & button FC’s

* refactor: move fixtures into tests

* fix(tests): collapse fixes for FCs

* fix(test): collapse passing again

* feat(btn): pressed feature parity

* fix(circleci): config for jest

* fix(circleci): adjusting jest config

* fix(circleci): correct typo

* fix(breadcrumb): repair failing tests

* fix(docs): update docs

* fix: rm old .vue & handle focus on btn

* fix: import new btn.js

* fix(docs): modal docs spelling and submit bug

* fix(modal): bad default btn size value

* Update meta.json

* update: apply link changes to related components

* fix: watch using `to` prop when you don't mean it!

* fix: grammar/syntax on doc alert

* fix(docs): unclosed div tag in docs

* Update README.md

* Update alert.vue

* fix: readme updates

* fix(docs): no more `to` props without router-link!

* fix: seriously, we don't have vue-router

* fix: more `to`

* fix: to's and missing closing tags

* Update README.md

* fix: link-gen as function
  • Loading branch information...
alexsasharegan committed Aug 14, 2017
1 parent 6cc2a2b commit cdbef2d720282144fb87fa53c1d4aec0b0e4bf1b
Showing with 1,380 additions and 1,677 deletions.
  1. +6 −10 docs/components/breadcrumb/README.md
  2. +2 −12 docs/components/breadcrumb/meta.json
  3. +32 −20 docs/components/button/README.md
  4. +39 −25 docs/components/card/README.md
  5. +10 −10 docs/components/card/meta.json
  6. +4 −4 docs/components/list-group/README.md
  7. +92 −82 docs/components/modal/README.md
  8. +16 −3 docs/components/nav/README.md
  9. +42 −31 docs/components/navbar/README.md
  10. +18 −9 docs/components/pagination-nav/README.md
  11. +2 −2 docs/nuxt/components/alert.vue
  12. +0 −4 fixtures/alert/demo.css
  13. +0 −15 fixtures/alert/demo.details
  14. +0 −4 fixtures/badge/demo.css
  15. +0 −15 fixtures/badge/demo.details
  16. +0 −4 fixtures/breadcrumb/demo.css
  17. +0 −15 fixtures/breadcrumb/demo.details
  18. +0 −4 fixtures/breadcrumb/demo.html
  19. +0 −31 fixtures/breadcrumb/demo.js
  20. +0 −4 fixtures/button-group/demo.css
  21. +0 −15 fixtures/button-group/demo.details
  22. +0 −4 fixtures/button/demo.css
  23. +0 −15 fixtures/button/demo.details
  24. +0 −11 fixtures/button/demo.js
  25. +0 −4 fixtures/card/demo.css
  26. +0 −15 fixtures/card/demo.details
  27. +0 −4 fixtures/carousel/demo.css
  28. +0 −14 fixtures/carousel/demo.details
  29. +0 −4 fixtures/collapse/demo.css
  30. +0 −15 fixtures/collapse/demo.details
  31. +0 −92 fixtures/collapse/demo.html
  32. +0 −4 fixtures/dropdown/demo.css
  33. +0 −15 fixtures/dropdown/demo.details
  34. +0 −4 fixtures/form-checkbox/demo.css
  35. +0 −15 fixtures/form-checkbox/demo.details
  36. +0 −4 fixtures/form-fieldset/demo.css
  37. +0 −15 fixtures/form-fieldset/demo.details
  38. +0 −4 fixtures/form-file/demo.css
  39. +0 −15 fixtures/form-file/demo.details
  40. +0 −4 fixtures/form-input/demo.css
  41. +0 −15 fixtures/form-input/demo.details
  42. +0 −4 fixtures/form-radio/demo.css
  43. +0 −15 fixtures/form-radio/demo.details
  44. +0 −4 fixtures/form-select/demo.css
  45. +0 −15 fixtures/form-select/demo.details
  46. +0 −4 fixtures/jumbotron/demo.css
  47. +0 −15 fixtures/jumbotron/demo.details
  48. +0 −4 fixtures/list-group/demo.css
  49. +0 −15 fixtures/list-group/demo.details
  50. +0 −4 fixtures/media/demo.css
  51. +0 −15 fixtures/media/demo.details
  52. +0 −4 fixtures/modal/demo.css
  53. +0 −15 fixtures/modal/demo.details
  54. +0 −4 fixtures/nav/demo.css
  55. +0 −15 fixtures/nav/demo.details
  56. +0 −4 fixtures/navbar/demo.css
  57. +0 −15 fixtures/navbar/demo.details
  58. +0 −4 fixtures/pagination-nav/demo.css
  59. +0 −16 fixtures/pagination-nav/demo.details
  60. +0 −4 fixtures/pagination/demo.css
  61. +0 −15 fixtures/pagination/demo.details
  62. +0 −4 fixtures/popover/demo.css
  63. +0 −15 fixtures/popover/demo.details
  64. +0 −4 fixtures/progress/demo.css
  65. +0 −15 fixtures/progress/demo.details
  66. +0 −4 fixtures/tab/demo.css
  67. +0 −16 fixtures/tab/demo.details
  68. +0 −4 fixtures/table/demo.css
  69. +0 −16 fixtures/table/demo.details
  70. +0 −4 fixtures/tooltip/demo.css
  71. +0 −15 fixtures/tooltip/demo.details
  72. +30 −0 lib/components/breadcrumb-item.js
  73. +43 −0 lib/components/breadcrumb-link.js
  74. +41 −0 lib/components/breadcrumb.js
  75. +0 −93 lib/components/breadcrumb.vue
  76. +108 −0 lib/components/button.js
  77. +0 −133 lib/components/button.vue
  78. +5 −5 lib/components/carousel.vue
  79. +1 −2 lib/components/dropdown-item.vue
  80. +1 −1 lib/components/dropdown.vue
  81. +56 −52 lib/components/index.js
  82. +165 −0 lib/components/link.js
  83. +0 −39 lib/components/link.vue
  84. +8 −15 lib/components/list-group-item.vue
  85. +2 −2 lib/components/modal.vue
  86. +1 −2 lib/components/nav-item.vue
  87. +16 −18 lib/components/navbar-brand.vue
  88. +1 −1 lib/components/pagination-nav.vue
  89. +7 −102 lib/mixins/link.js
  90. +35 −32 lib/utils/array.js
  91. +4 −3 package.json
  92. +58 −63 tests/components/breadcrumb.spec.js
  93. +79 −86 tests/components/button.spec.js
  94. +112 −134 tests/components/collapse.spec.js
  95. +84 −0 tests/components/link.spec.js
  96. 0 { → tests}/fixtures/alert/demo.html
  97. 0 { → tests}/fixtures/alert/demo.js
  98. 0 { → tests}/fixtures/badge/demo.html
  99. 0 { → tests}/fixtures/badge/demo.js
  100. +9 −0 tests/fixtures/breadcrumb/demo.html
  101. +41 −0 tests/fixtures/breadcrumb/demo.js
  102. 0 { → tests}/fixtures/button-group/demo.html
  103. 0 { → tests}/fixtures/button-group/demo.js
  104. +6 −3 { → tests}/fixtures/button/demo.html
  105. +26 −0 tests/fixtures/button/demo.js
  106. 0 { → tests}/fixtures/card/demo.html
  107. 0 { → tests}/fixtures/card/demo.js
  108. 0 { → tests}/fixtures/carousel/demo.html
  109. 0 { → tests}/fixtures/carousel/demo.js
  110. +118 −0 tests/fixtures/collapse/demo.html
  111. 0 { → tests}/fixtures/collapse/demo.js
  112. 0 { → tests}/fixtures/dropdown/demo.html
  113. 0 { → tests}/fixtures/dropdown/demo.js
  114. 0 { → tests}/fixtures/form-checkbox/demo.html
  115. 0 { → tests}/fixtures/form-checkbox/demo.js
  116. 0 { → tests}/fixtures/form-fieldset/demo.html
  117. 0 { → tests}/fixtures/form-fieldset/demo.js
  118. 0 { → tests}/fixtures/form-file/demo.html
  119. 0 { → tests}/fixtures/form-file/demo.js
  120. 0 { → tests}/fixtures/form-input/demo.html
  121. 0 { → tests}/fixtures/form-input/demo.js
  122. 0 { → tests}/fixtures/form-radio/demo.html
  123. 0 { → tests}/fixtures/form-radio/demo.js
  124. 0 { → tests}/fixtures/form-select/demo.html
  125. 0 { → tests}/fixtures/form-select/demo.js
  126. 0 { → tests}/fixtures/jumbotron/demo.html
  127. 0 { → tests}/fixtures/jumbotron/demo.js
  128. +23 −0 tests/fixtures/link/demo.html
  129. +21 −0 tests/fixtures/link/demo.js
  130. +2 −2 { → tests}/fixtures/list-group/demo.html
  131. 0 { → tests}/fixtures/list-group/demo.js
  132. 0 { → tests}/fixtures/media/demo.html
  133. 0 { → tests}/fixtures/media/demo.js
  134. +7 −2 { → tests}/fixtures/modal/demo.html
  135. 0 { → tests}/fixtures/modal/demo.js
  136. 0 { → tests}/fixtures/nav/demo.html
  137. 0 { → tests}/fixtures/nav/demo.js
  138. 0 { → tests}/fixtures/navbar/demo.html
  139. 0 { → tests}/fixtures/navbar/demo.js
  140. 0 { → tests}/fixtures/pagination-nav/demo.html
  141. 0 { → tests}/fixtures/pagination-nav/demo.js
  142. 0 { → tests}/fixtures/pagination/demo.html
  143. 0 { → tests}/fixtures/pagination/demo.js
  144. 0 { → tests}/fixtures/popover/demo.html
  145. 0 { → tests}/fixtures/popover/demo.js
  146. 0 { → tests}/fixtures/progress/demo.html
  147. 0 { → tests}/fixtures/progress/demo.js
  148. 0 { → tests}/fixtures/tab/demo.html
  149. 0 { → tests}/fixtures/tab/demo.js
  150. 0 { → tests}/fixtures/table/demo.html
  151. 0 { → tests}/fixtures/table/demo.js
  152. 0 { → tests}/fixtures/tooltip/demo.html
  153. 0 { → tests}/fixtures/tooltip/demo.js
  154. +1 −1 tests/helpers.js
  155. +6 −6 yarn.lock
@@ -13,10 +13,10 @@ export default {
data: {
items: [{
text: 'Admin',
link: '#',
href: '#',
}, {
text: 'Manage',
link: '#',
href: '#',
}, {
text: 'Library',
active: true
@@ -28,26 +28,22 @@ export default {
<!-- breadcrumb.vue -->
```
Items are rendered using `:items` prop.
Items are rendered using `:items` prop.
It can be an array of objects to provide link and active state.
Links can be `href`'s for anchor tags, or `to`'s for router-links.
Active state of last element is automatically set if it is undefined.
```
```
items = [
{
text: 'Home',
href: 'http://google.com',
}, {
text: 'Posts',
to: '/another/path',
to: { name: 'home' },
}, {
text: 'Another Story',
active: true
}
]
```
Or you can simply pass a simple array and use `@click` event handler on breadcrumb to manually handle links.
```
items: ['Home','Posts','Another story']
```
@@ -1,16 +1,6 @@
{
"title": "Breadcrumb",
"component": "bBreadcrumb",
"events": [
{
"event": "click",
"args": [
{
"arg": "item",
"description": "The item which clicked on"
}
],
"description": "Only if item is not active"
}
]
"components": ["bBreadcrumbItem", "bBreadcrumbLink"],
"events": []
}
@@ -1,23 +1,24 @@
# Buttons
> 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.
> 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.
```html
<div class="row">
<template v-for="variant in ['primary','secondary','success','outline-success','warning','danger','link']">
<div class="col-md-4 pb-2" v-for="size in ['sm','','lg']">
<b-button :size="size" :variant="variant">
{{variant}} {{size}}
</b-button>
</div>
</template>
<template v-for="variant in ['primary','secondary','success','outline-success','warning','danger','link']">
<div class="col-md-4 pb-2" v-for="size in ['sm','','lg']" :key="`{variant}_${size}`">
<b-button :size="size" :variant="variant">
{{variant}} {{size}}
</b-button>
</div>
</template>
</div>
<!-- button-1.vue -->
```
### Element type
## 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 man also generate
`vue-router` `<router-link>` when providing a value for the `to` prop (`vue-router`
@@ -32,33 +33,39 @@ is required).
<!-- button-2.vue -->
```
### Button Sizing
## Button Sizing
Fancy larger or smaller buttons? Specify `lg` or `sm` via the `size` prop.
Create block level buttons — those that span the full width of a parent — by
setting the `block` prop.
### Button contextual variants
## Button contextual variants
Use the `variant` prop to generate the various bootstrap contextual button variants.
By default `<b-button>` will render with the `secondary` variant.
#### Solid color variants:
### Solid color variants
`primary`, `secondary`, `success`, `warning`, and `danger`.
#### Outline color variants:
In need of a button, but not the hefty background colors they bring? Use the
### 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-warning`,
and `outline-danger`.
#### Link variant:
Variant `link` will render a button with the appearance of a link while maintaning the
### Link variant
Variant `link` will render a button with the appearance of a link while maintaining the
default padding and size of a button.
### Disabled state
Set the `disabled` prop to disable button default funtionality. `disabled` also
Set the `disabled` prop to disable button default functionality. `disabled` also
works with buttons, rendered as `<a>` elements and `<router-link>`.
```html
@@ -71,15 +78,18 @@ works with buttons, rendered as `<a>` elements and `<router-link>`.
```
### Button type
When neither `href` nor `to` props are provided, `<b-button>` renders an html `<button>`
element. You can specify the button's type by setting the prop `type` to `button`,
`submit` or `reset`. The default type is `button`.
### Pressed state and toggling
Buttons will appear pressed (with a darker background, darker border, and inset shadow)
when the prop `presed` 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.
@@ -133,14 +143,16 @@ the `.sync` prop modifier (available in Vue 2.3+) on the `pressed` property
```
### Router links
Refer to [`vue-router`](https://router.vuejs.org/) docs for the various `<router-link>` related props.
Note the `tag` attribute for `<router-link>` is refered to as `router-tag` in `bootstrap-vue`.
Note the `tag` attribute for `<router-link>` is referred to as `router-tag` in `bootstrap-vue`.
### Alias
`<b-button>` can also be used by its shorter alias `<b-btn>`.
### See also
- [`<b-button-group>`](./button-group)
- [`<b-button-toolbar>`](./button-toolbar)
@@ -1,7 +1,7 @@
# Cards
> A card is a flexible and extensible content container. It includes options for headers and footers,
a wide variety of content, contextual background colors, and powerful display options.
> A card is a flexible and extensible content container. It includes options for headers and footers,
a wide variety of content, contextual background colors, and powerful display options.
Cards are built with as little markup and styles as possible, but still manage to deliver a
ton of control and customization. Built with flexbox, they offer easy alignment and mix well
@@ -17,6 +17,7 @@ Change the default `div` root tag to any other HTML element by specifying via th
<b-card title="Card Title"
img="https://lorempixel.com/600/300/food/5/"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2">
@@ -30,11 +31,13 @@ Change the default `div` root tag to any other HTML element by specifying via th
<!-- card-1.vue -->
```
### Content types
## Content types
Cards support a wide variety of content, including images, text, list groups,
links and more. Below are examples of what’s supported.
#### Card Body:
### Card Body
The building block of a card is the `.card-body` section which provides a padded
section within a card. By default the `<b-card>` content is placed in the
`.card-body` section:
@@ -59,7 +62,8 @@ Disable the `.card-body` section (and associated padding) by setting the prop `n
Note that with `no-body` enabled, `title` and `sub-title` will not be rendered.
#### Titles, text, and links:
#### Titles, text, and links
*Card titles* are adding via the `title` prop, and *sub titles* are added via the
`sub-title` prop. Links can be added and placed next to each other by adding
the `.card-link` class to a <a> tag (or `<b-link>`).
@@ -82,15 +86,16 @@ can also be styled with the standard HTML tags.
<!-- card-text-1.vue -->
```
#### Images:
#### Images
The prop `img` places an image on the top of the card, and use the `img-alt` prop to
specify a string to be placed in the image's `alt` attribute. The image specified
by the `img` prop will be responsive and will adjust it's width when the width of the
card is changed.
```html
<div>
<b-card img="https://placekitten.com/1000/300" img-alt="Card image">
<b-card img="https://placekitten.com/1000/300" img-alt="Card image" img-top>
<p class="card-text">
Some quick example text to build on the card and make up the bulk of the card's content.
</p>
@@ -107,6 +112,7 @@ Place the image in the background of the card by setting the boolean prop `overl
<b-card overlay
img="https://lorempixel.com/900/250/sports/6/"
img-alt="Card Image"
img-top
title="Image Overlay"
sub-title="Subtitle"
>
@@ -119,9 +125,8 @@ Place the image in the background of the card by setting the boolean prop `overl
<!-- card-img-2.vue -->
```
Take control over the image tag by specifying an `<img>` element targetting the `img` named slot:
This allwos you to override the default classes applied to the image:
Take control over the image tag by specifying an `<img>` element targeting the `img` named slot:
This allows you to override the default classes applied to the image:
```html
<div>
@@ -136,10 +141,11 @@ This allwos you to override the default classes applied to the image:
<!-- card-img-3.vue -->
```
When using the `img` slot, it is reccommended to apply the class `img-flud` (as in the above
When using the `img` slot, it is recommended to apply the class `img-fluid` (as in the above
example) to ensure responsiveness.
#### Header and footer:
#### Header and footer
Add an optional header and/or footer within a card via the `header`/`footer`
props or named slots. You can control the wrapper element tags used by setting
the `header-tag` and `footer-tag` props (both default is `div`)
@@ -169,7 +175,8 @@ the `header-tag` and `footer-tag` props (both default is `div`)
<!-- card-header-footer-1.vue -->
```
#### Kitchen sink:
#### Kitchen sink
Mix and match multiple content types to create the card you need, or throw everything in
there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in
a fixed-width card.
@@ -202,14 +209,14 @@ a fixed-width card.
<!-- card-kitchen-1.vue -->
```
### Colored text
### Inverted text
By default, cards use dark text and assume a light background. You can reverse that by
toggling the color of text within, as well as that of the card’s subcomponents,
via the prop `inverse`. Then, specify a dark background variant.
toggling the color of text within, as well as that of the card’s sub-components,
via the prop `text-variant`. Then, specify a dark background variant.
```html
<b-card variant="dark" inverse title="Card Title">
<b-card variant="dark" text-variant="white" title="Card Title">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>
@@ -218,11 +225,13 @@ via the prop `inverse`. Then, specify a dark background variant.
```
### Background and Bordered variants
Cards include their own variant style for quickly changing the background-color and
of a card via the `variant` prop. Darker solid variants my require setting the
boolean prop `inverse` to adjust the text color.
#### Solid:
#### Solid
```html
<div>
<b-card variant="primary" text-variant="white" header="Primary" class="mb-3 text-center">
@@ -254,7 +263,8 @@ boolean prop `inverse` to adjust the text color.
<!-- card-variants-1.vue -->
```
#### Bordered:
#### Bordered
```html
<div>
<b-card variant="primary" bordered header="Primary" class="mb-3 text-center">
@@ -285,11 +295,13 @@ boolean prop `inverse` to adjust the text color.
<!-- card-variants-2.vue -->
```
#### Variant to class mapping:
#### Variant to class mapping
BootstrapVue `<b-card>` variants are directly mapped to Bootstrap V4 card classes by
pre-pending `bg-` (for solid) or `border-` (for bordered) to the above variant names.
#### Header and Footer variants:
#### Header and Footer variants
You can also apply the solid and outline variants individually to card headers and footers
via the `header-variant` and `footer-variant` props respectively.
@@ -311,13 +323,15 @@ via the `header-variant` and `footer-variant` props respectively.
<!-- card-header-footer-variant.vue -->
```
#### Conveying meaning to assistive technologies:
#### 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.
### Card Groups
In addition to styling the content within cards, BootstrapVue includes a `<b-card-group>`
component for laying out series of cards. For the time being, these layout options are
not yet responsive.
@@ -330,7 +344,7 @@ When using card groups with footers, their content will automatically line up.
```html
<div>
<b-card-group>
<b-card title="Title" img="https://placekitten.com/g/300/450" img-alt="Img">
<b-card title="Title" img="https://placekitten.com/g/300/450" img-alt="Img" img-top>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
@@ -339,15 +353,15 @@ When using card groups with footers, their content will automatically line up.
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</b-card>
<b-card title="Title" img="https://placekitten.com/g/300/450" img-alt="Img">
<b-card title="Title" img="https://placekitten.com/g/300/450" img-alt="Img" img-top>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
</p>
<div slot="footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</b-card>
<b-card title="Title" img="https://placekitten.com/g/300/450" img-alt="Img">
<b-card title="Title" img="https://placekitten.com/g/300/450" img-alt="Img" img-top>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to additional
content. This card has even longer content than the first to show that equal height action.
Oops, something went wrong.

0 comments on commit cdbef2d

Please sign in to comment.