Permalink
Browse files

feat(card): functional components for card (#827)

* [WIP] feat(card): functional components for card 🎴

* remove all block refs & use body

* refactor: remove inverse & add textVariant

* chore: add indent guide to eslint

* fix(card-group): remove excess function

* chore: add switch case indentation

* feat(card): add bordered props to header/footer

* fix(card): rm defunct tests

* feat(card): add header/footer text variant props

* refactor(card): rm .vue version of card

* [caqrd] update comment

* feat(card): new card-img FC

* refactor(card): show off feat in readme

* refactor: move examples to fixtures
  • Loading branch information...
alexsasharegan committed Aug 13, 2017
1 parent 8e6fc42 commit 2089252ba3b7d3a8589f772c4b6273e389608b64
Showing with 510 additions and 316 deletions.
  1. +1 βˆ’1 .eslintrc.js
  2. +20 βˆ’17 docs/components/card/README.md
  3. +0 βˆ’49 examples/card/demo.html
  4. +0 βˆ’3 examples/tooltip/demo.js
  5. 0 {examples β†’ fixtures}/alert/demo.css
  6. 0 {examples β†’ fixtures}/alert/demo.details
  7. 0 {examples β†’ fixtures}/alert/demo.html
  8. 0 {examples β†’ fixtures}/alert/demo.js
  9. 0 {examples β†’ fixtures}/badge/demo.css
  10. 0 {examples β†’ fixtures}/badge/demo.details
  11. 0 {examples β†’ fixtures}/badge/demo.html
  12. 0 {examples β†’ fixtures}/badge/demo.js
  13. 0 {examples β†’ fixtures}/breadcrumb/demo.css
  14. 0 {examples β†’ fixtures}/breadcrumb/demo.details
  15. 0 {examples β†’ fixtures}/breadcrumb/demo.html
  16. 0 {examples β†’ fixtures}/breadcrumb/demo.js
  17. 0 {examples β†’ fixtures}/button-group/demo.css
  18. 0 {examples β†’ fixtures}/button-group/demo.details
  19. 0 {examples β†’ fixtures}/button-group/demo.html
  20. 0 {examples β†’ fixtures}/button-group/demo.js
  21. 0 {examples β†’ fixtures}/button/demo.css
  22. 0 {examples β†’ fixtures}/button/demo.details
  23. 0 {examples β†’ fixtures}/button/demo.html
  24. 0 {examples β†’ fixtures}/button/demo.js
  25. 0 {examples β†’ fixtures}/card/demo.css
  26. 0 {examples β†’ fixtures}/card/demo.details
  27. +53 βˆ’0 fixtures/card/demo.html
  28. +8 βˆ’0 fixtures/card/demo.js
  29. 0 {examples β†’ fixtures}/carousel/demo.css
  30. 0 {examples β†’ fixtures}/carousel/demo.details
  31. 0 {examples β†’ fixtures}/carousel/demo.html
  32. 0 {examples β†’ fixtures}/carousel/demo.js
  33. 0 {examples β†’ fixtures}/collapse/demo.css
  34. 0 {examples β†’ fixtures}/collapse/demo.details
  35. 0 {examples β†’ fixtures}/collapse/demo.html
  36. 0 {examples β†’ fixtures}/collapse/demo.js
  37. 0 {examples β†’ fixtures}/dropdown/demo.css
  38. 0 {examples β†’ fixtures}/dropdown/demo.details
  39. 0 {examples β†’ fixtures}/dropdown/demo.html
  40. 0 {examples/card β†’ fixtures/dropdown}/demo.js
  41. 0 {examples β†’ fixtures}/form-checkbox/demo.css
  42. 0 {examples β†’ fixtures}/form-checkbox/demo.details
  43. 0 {examples β†’ fixtures}/form-checkbox/demo.html
  44. 0 {examples β†’ fixtures}/form-checkbox/demo.js
  45. 0 {examples β†’ fixtures}/form-fieldset/demo.css
  46. 0 {examples β†’ fixtures}/form-fieldset/demo.details
  47. 0 {examples β†’ fixtures}/form-fieldset/demo.html
  48. 0 {examples β†’ fixtures}/form-fieldset/demo.js
  49. 0 {examples β†’ fixtures}/form-file/demo.css
  50. 0 {examples β†’ fixtures}/form-file/demo.details
  51. 0 {examples β†’ fixtures}/form-file/demo.html
  52. 0 {examples β†’ fixtures}/form-file/demo.js
  53. 0 {examples β†’ fixtures}/form-input/demo.css
  54. 0 {examples β†’ fixtures}/form-input/demo.details
  55. 0 {examples β†’ fixtures}/form-input/demo.html
  56. 0 {examples β†’ fixtures}/form-input/demo.js
  57. 0 {examples β†’ fixtures}/form-radio/demo.css
  58. 0 {examples β†’ fixtures}/form-radio/demo.details
  59. 0 {examples β†’ fixtures}/form-radio/demo.html
  60. 0 {examples β†’ fixtures}/form-radio/demo.js
  61. 0 {examples β†’ fixtures}/form-select/demo.css
  62. 0 {examples β†’ fixtures}/form-select/demo.details
  63. 0 {examples β†’ fixtures}/form-select/demo.html
  64. 0 {examples β†’ fixtures}/form-select/demo.js
  65. 0 {examples β†’ fixtures}/jumbotron/demo.css
  66. 0 {examples β†’ fixtures}/jumbotron/demo.details
  67. 0 {examples β†’ fixtures}/jumbotron/demo.html
  68. 0 {examples/dropdown β†’ fixtures/jumbotron}/demo.js
  69. 0 {examples β†’ fixtures}/list-group/demo.css
  70. 0 {examples β†’ fixtures}/list-group/demo.details
  71. 0 {examples β†’ fixtures}/list-group/demo.html
  72. 0 {examples/jumbotron β†’ fixtures/list-group}/demo.js
  73. 0 {examples β†’ fixtures}/media/demo.css
  74. 0 {examples β†’ fixtures}/media/demo.details
  75. 0 {examples β†’ fixtures}/media/demo.html
  76. 0 {examples/list-group β†’ fixtures/media}/demo.js
  77. 0 {examples β†’ fixtures}/modal/demo.css
  78. 0 {examples β†’ fixtures}/modal/demo.details
  79. 0 {examples β†’ fixtures}/modal/demo.html
  80. 0 {examples β†’ fixtures}/modal/demo.js
  81. 0 {examples β†’ fixtures}/nav/demo.css
  82. 0 {examples β†’ fixtures}/nav/demo.details
  83. 0 {examples β†’ fixtures}/nav/demo.html
  84. 0 {examples/media β†’ fixtures/nav}/demo.js
  85. 0 {examples β†’ fixtures}/navbar/demo.css
  86. 0 {examples β†’ fixtures}/navbar/demo.details
  87. 0 {examples β†’ fixtures}/navbar/demo.html
  88. 0 {examples/nav β†’ fixtures/navbar}/demo.js
  89. 0 {examples β†’ fixtures}/pagination-nav/demo.css
  90. 0 {examples β†’ fixtures}/pagination-nav/demo.details
  91. 0 {examples β†’ fixtures}/pagination-nav/demo.html
  92. 0 {examples β†’ fixtures}/pagination-nav/demo.js
  93. 0 {examples β†’ fixtures}/pagination/demo.css
  94. 0 {examples β†’ fixtures}/pagination/demo.details
  95. 0 {examples β†’ fixtures}/pagination/demo.html
  96. 0 {examples β†’ fixtures}/pagination/demo.js
  97. 0 {examples β†’ fixtures}/popover/demo.css
  98. 0 {examples β†’ fixtures}/popover/demo.details
  99. 0 {examples β†’ fixtures}/popover/demo.html
  100. 0 {examples β†’ fixtures}/popover/demo.js
  101. 0 {examples β†’ fixtures}/progress/demo.css
  102. 0 {examples β†’ fixtures}/progress/demo.details
  103. 0 {examples β†’ fixtures}/progress/demo.html
  104. 0 {examples β†’ fixtures}/progress/demo.js
  105. 0 {examples β†’ fixtures}/tab/demo.css
  106. 0 {examples β†’ fixtures}/tab/demo.details
  107. 0 {examples β†’ fixtures}/tab/demo.html
  108. 0 {examples β†’ fixtures}/tab/demo.js
  109. 0 {examples β†’ fixtures}/table/demo.css
  110. 0 {examples β†’ fixtures}/table/demo.details
  111. 0 {examples β†’ fixtures}/table/demo.html
  112. 0 {examples β†’ fixtures}/table/demo.js
  113. 0 {examples β†’ fixtures}/tooltip/demo.css
  114. 0 {examples β†’ fixtures}/tooltip/demo.details
  115. 0 {examples β†’ fixtures}/tooltip/demo.html
  116. 0 {examples/navbar β†’ fixtures/tooltip}/demo.js
  117. +51 βˆ’0 lib/components/card-footer.js
  118. +32 βˆ’0 lib/components/card-group.js
  119. +51 βˆ’0 lib/components/card-header.js
  120. +27 βˆ’0 lib/components/card-img.js
  121. +143 βˆ’0 lib/components/card.js
  122. +0 βˆ’174 lib/components/card.vue
  123. +8 βˆ’2 lib/components/index.js
  124. +2 βˆ’1 lib/utils/index.js
  125. +15 βˆ’0 lib/utils/pluckProps.js
  126. +98 βˆ’68 tests/components/card.spec.js
  127. +1 βˆ’1 tests/helpers.js
@@ -85,7 +85,7 @@ module.exports = {
'id-blacklist': 'error',
'id-length': 'off',
'id-match': 'error',
'indent': 'off',
'indent': ['warn', 4, { "SwitchCase": 1 }],
'init-declarations': 'off',
'jsx-quotes': 'off',
'key-spacing': 'off',
@@ -31,7 +31,7 @@ Change the default `div` root tag to any other HTML element by specifying via th
```
### Content types
Cards support a wide variety of content, including images, text, list groups,
Cards support a wide variety of content, including images, text, list groups,
links and more. Below are examples of what’s supported.
#### Card Body:
@@ -176,11 +176,11 @@ a fixed-width card.
```html
<div>
<b-card no-body style="max-width: 20rem;" img="https://placekitten.com/380/200" img-alt="Image">
<b-card no-body style="max-width: 20rem;" img="https://placekitten.com/380/200" img-alt="Image" img-top>
<h4 slot="header">Hello World</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card
Some quick example text to build on the card
title and make up the bulk of the card's content.
</p>
</div>
@@ -225,28 +225,28 @@ boolean prop `inverse` to adjust the text color.
#### Solid:
```html
<div>
<b-card variant="primary" inverse header="Primary" class="mb-3 text-center">
<b-card variant="primary" text-variant="white" header="Primary" class="mb-3 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</b-card>
<b-card variant="secondary" inverse header="Secondary" class="mb-3 text-center">
<b-card variant="secondary" text-variant="white" header="Secondary" class="mb-3 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</b-card>
<b-card variant="success" inverse header="Success" class="mb-3 text-center">
<b-card variant="success" text-variant="white" header="Success" class="mb-3 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</b-card>
<b-card variant="info" inverse header="Info" class="mb-3 text-center">
<b-card variant="info" text-variant="white" header="Info" class="mb-3 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</b-card>
<b-card variant="warning" inverse header="Warning" class="mb-3 text-center">
<b-card variant="warning" text-variant="white" header="Warning" class="mb-3 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</b-card>
<b-card variant="danger" inverse header="Danger" class="mb-3 text-center">
<b-card variant="danger" text-variant="white" header="Danger" class="mb-3 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</b-card>
<b-card variant="light" header="Light" class="mb-3 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</b-card>
<b-card variant="dark" header="Dark" inverse class="mb-3 text-center">
<b-card variant="dark" header="Dark" text-variant="white" class="mb-3 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</b-card>
</div>
@@ -260,7 +260,7 @@ boolean prop `inverse` to adjust the text color.
<b-card variant="primary" bordered header="Primary" class="mb-3 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</b-card>
<b-card variant="secondary" bordered header="Secondary" class="mb-3 text-center">
<b-card variant="secondary" bordered header="Secondary" header-bordered header-variant="secondary" class="mb-3 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</b-card>
<b-card variant="success" bordered header="Success" class="mb-3 text-center">
@@ -272,7 +272,7 @@ boolean prop `inverse` to adjust the text color.
<b-card variant="warning" bordered header="Warning" class="mb-3 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</b-card>
<b-card variant="danger" bordered header="Danger" class="mb-3 text-center">
<b-card variant="danger" bordered header="Danger" header-bordered header-variant="danger" header-text-variant="danger" class="mb-3 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</b-card>
<b-card variant="light" bordered header="Light" class="mb-3 text-center">
@@ -296,6 +296,7 @@ via the `header-variant` and `footer-variant` props respectively.
```html
<div>
<b-card header="Card Header"
header-text-variant="white"
header-tag="header"
footer="Card Footer"
footer-tag="footer"
@@ -369,7 +370,7 @@ card footers in decks will automatically line up.
```html
<div>
<b-card-group deck>
<b-card title="Title" img="https://lorempixel.com/300/300/" img-alt="Img">
<b-card title="Title" img="https://lorempixel.com/300/300/" 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.
@@ -378,15 +379,15 @@ card footers in decks will automatically line up.
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</b-card>
<b-card title="Title" img="https://lorempixel.com/300/300/" img-alt="Img">
<b-card title="Title" img="https://lorempixel.com/300/300/" 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://lorempixel.com/300/300/" img-alt="Img">
<b-card title="Title" img="https://lorempixel.com/300/300/" 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.
@@ -419,6 +420,7 @@ isn’t a bulletproof solution yet.
img="https://placekitten.com/g/400/450"
img-fluid
img-alt="image"
img-top
>
<p class="card-text">
This is a wider card with supporting text below as a natural lead-in to
@@ -439,6 +441,7 @@ isn’t a bulletproof solution yet.
img="https://placekitten.com/500/350"
img-fluid
img-alt="image"
img-top
>
<p class="card-text">
This card has supporting text below as a natural lead-in to additional content.
@@ -447,7 +450,7 @@ isn’t a bulletproof solution yet.
</b-card>
<b-card variant="primary" inverse>
<blockquote class="card-blockquote"
<blockquote class="card-blockquote"
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
@@ -465,7 +468,7 @@ isn’t a bulletproof solution yet.
<b-card img="https://lorempixel.com/400/400/" img-fuid img-alt="image" overlay>
</b-card>
<b-card img="https://lorempixel.com/400/200/" img-fluid img-alt="image">
<b-card img="https://lorempixel.com/400/200/" img-fluid img-alt="image" 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.

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -0,0 +1,53 @@
<div id="app">
<!-- Simple -->
<b-card class="mb-2"
variant="success"
ref="simple_card">Simple Card</b-card>
<!-- Standard -->
<b-card :header="headerText"
class="mb-2"
title="Card title"
sub-title="Card subtitle"
ref="standard_card">
<small slot="footer"
class="text-muted">
Last updated 3 mins ago
</small>
</b-card>
<!-- Leave this example with a single child for testing -->
<b-card no-body
ref="no_body">
<div id="no_body_default_slot"
ref="no_body_default_slot">No body</div>
</b-card>
<!-- With image -->
<b-card :img="img0"
title="Skulls are nice"
class="mb-2"
ref="img_card">
This is my opinion :)
</b-card>
<!-- Overlay image -->
<b-card overlay
:img="img1"
class="mb-2"
ref="img_overlay_card">
Overlay cards are cute!
</b-card>
<b-card-group tag="section"
ref="card_group">
<b-card tag="article"
title="Groupie"
title-tag="h1"
id="title-tag-test"></b-card>
<b-card tag="article"
sub-title="Groupie"
sub-title-tag="h2"
id="sub-title-tag-test"></b-card>
</b-card-group>
</div>
@@ -0,0 +1,8 @@
window.app = new Vue({
el: "#app",
data: {
headerText: "Card header text",
img0: "http://placeskull.com/200/200/ABABAB/-1/0",
img1: "http://placeskull.com/200/200/E8117F/-1/0",
}
})
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -0,0 +1,51 @@
import { mergeData } from "../utils";
export const props = {
footer: {
type: String,
default: null
},
footerBordered: {
type: Boolean,
default: false
},
footerVariant: {
type: String,
default: null
},
footerTextVariant: {
type: String,
default: null
},
footerClass: {
type: [String, Object, Array],
default: null
},
footerTag: {
type: String,
default: "div"
}
};
export default {
functional: true,
props,
render(h, { props, data, slots }) {
const variantPrefix = props.footerBordered ? "border-" : "bg-";
return h(
props.footerTag,
mergeData(data, {
staticClass: "card-footer",
class: [
props.footerClass,
{
[variantPrefix + props.footerVariant]: Boolean(props.footerVariant),
[`text-${props.footerTextVariant}`]: Boolean(props.footerTextVariant)
}
]
}),
slots().default || [h("div", { domProps: { innerHTML: props.footer } })]
);
}
};
@@ -0,0 +1,32 @@
import { mergeData } from "../utils";
export const props = {
tag: {
type: String,
default: "div"
},
deck: {
type: Boolean,
default: false
},
columns: {
type: Boolean,
default: false
}
};
export default {
functional: true,
props,
render(h, { props, data, children }) {
let staticClass = "card-group";
if (props.columns) {
staticClass = "card-columns";
}
if (props.deck) {
staticClass = "card-deck";
}
return h(props.tag, mergeData(data, { staticClass }), children);
}
};
Oops, something went wrong.

0 comments on commit 2089252

Please sign in to comment.