Skip to content

feat: Add Card Component

Zack Cuddy requested to merge card-component into master

Closes #400 (closed)

I had a little trouble getting the existing branch up and running for this: https://gitlab.com/gitlab-org/gitlab-ui/tree/add-card-component so I apologize if there was some overlap here.

I focused on trying to make the most MVC to get a card component in the system based on my requirements and review comments here: gitlab!19116 (comment 236240939)

What does this MR do?

This adds a basic wrapper around the Bootstrap Vue Card component. This is needed for a WIP MR and wanted to avoid bringing in bootstrap-vue for a basic card. I recognize there are a lot of things that a card can be, but for the scope of this MR I only added the basic bootstrap props as well as the ability to have a Header, Body, and Footer.

Screenshots

Card page: Screen_Shot_2019-10-28_at_10.18.46_AM

Basic Card: Screen_Shot_2019-10-28_at_10.18.56_AM

Card with Header/Footer props: Screen_Shot_2019-10-28_at_10.19.02_AM

Props/Etc: Screen_Shot_2019-10-28_at_10.19.18_AM

Tests

I wasn't sure if tests were needed for just a bootstrap wrapper. If there is a case for tests on this could someone please point me to an example of an existing test around simply wrapping the component. Most of what I saw was for extensions.

Notes

I am still getting used to the process at GitLab so I did want to apologize in advance if I broke the pattern or didn't correctly follow the process for this MR. Please leave me any feedback if that is the case!

cc @rhardarson

Edited by Zack Cuddy

Merge request reports