Skip to content

Commit bf8790f

Browse files
castastrophekylebuch8
castastrophe
authored and
kylebuch8
committed
Card feature updates (#312)
* Updating card layout with new variables and features; add schema * Tidy up and compile * Update doc file to remove old hide-show references * Update card story to fix issue with extra padding * Remove the hide-show component from the index file * Write additional card tests * Updating the readme * Commit compiled assets after sass updates * Update package-lock files to point to updated .8 versions * Fix compilation error * Revert doc file * Compile assets * Compile repo * Compile band asset * Revert unchanged project files being edited * Update story location for untouched files * Fix index file for compilation listing * Fix location of story files and add back package-lock * Revert copyright in story files * Compile assets with updated variables * Remove border weight * Revert changes to build task * Revert avatar and content-set changes * Fix typo in sass file * Update package-lock file with npm install * Revert harmony changes * Remove harmony and add opacity for header; add overflow property * Revert colors updates * Revert unneeded updates from this PR * Update cards to support border-radius of 3px from DSC * Use better placeholder images :) * Update storybook to use complement as default view * Update utils to support self-closing tags! Add image option to storybook * Add test cases for the new overflow property * Add tests for custom properties; adjust error messaging * Update styles for better older browser support (styling on ShadowDOM classes doesn't work in Edge and IE) * Update styles with IE11 fallbacks * Due to code in the redhat-theme and styles often applied to h-level headings; added !important to header margins * Remove the !importants from right and left; add !important to overflow-top setting * Update card component to support Angular * Pull out storybook changes from this repo * Fix styles in storybook that were breaking the header region * Remove weird dependency * adding a mutationobserver to card and using attributes instead of classes * updating pfe-card tests * moving slot attribute check test to top
1 parent 84dbf03 commit bf8790f

File tree

11 files changed

+858
-315
lines changed

11 files changed

+858
-315
lines changed

‎elements/pfe-card/README.md‎

Lines changed: 51 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,64 @@ PFElements Card Element
44

55
```html
66
<pfe-card>
7-
<h2 slot="header">RH Card</h2>
8-
This is the pfe-card body.
9-
<div slot="footer">Text in footer</div>
7+
<h2 slot="pfe-card--header">Card header</h2>
8+
<p>This is the pfe-card body.</p>
9+
<pfe-cta slot="pfe-card--footer">
10+
<a href="#">Footer link</a>
11+
</pfe-cta>
1012
</pfe-card>
1113
```
1214

1315
## Slots
16+
All slots are optional. If the slot is not defined, the content will be added to the `body` region of the card.
1417

15-
### header
16-
If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6) to
17-
be used here.
18+
### Header
19+
If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6). An icon, svg, or use of the icon component are also valid in this region.
1820

1921
### Default slot (body)
20-
Any content that is not designated for the header or footer slot, will go to this slot.
21-
22-
### footer
23-
Use this slot for anything that you want in the footer of the card.
22+
Any content that is not designated for the `header` or `footer` slot, will go to this slot.
23+
24+
### Footer
25+
Use this slot for anything that you want to be stuck to the base of the card. This region is bottom-aligned.
26+
27+
## Attributes
28+
29+
<style>
30+
.color-preview {
31+
display: inline-block;
32+
width: 1em;
33+
height: 1em;
34+
vertical-align: middle;
35+
background-color: var(--bg, #ffffff);
36+
border: 1px solid #444444;
37+
}
38+
</style>
39+
40+
There are several attributes available for customizing the visual treatment of this container.
41+
42+
- `pfe-color`: Options include darkest, darker, accent, complement, lighter, lightest. The card has a default value of `#dfdfdf`. Your theme will influence these colors so check there first if you are seeing inconsistencies.
43+
44+
| color | hex |
45+
|-------|-----|
46+
| default | <span class="color-preview" style="--bg:#dfdfdf"></span> #dfdfdf |
47+
| darker | <span class="color-preview" style="--bg:#464646"></span> #464646 |
48+
| darkest | <span class="color-preview" style="--bg:#131313"></span> #131313 |
49+
| accent | <span class="color-preview" style="--bg:#fe460d"></span> #fe460d |
50+
| complement | <span class="color-preview" style="--bg:#0477a4"></span> #0477a4 |
51+
| lighter | <span class="color-preview" style="--bg:#ececec"></span> #ececec |
52+
| lightest | <span class="color-preview" style="--bg:#ffffff"></span> #ffffff |
53+
54+
- `pfe-img-src`: Optional background image applied to the entire card container. Alignment of this image can be managed using the `--pfe-card--BackgroundPosition` variable which is set to `center center` by default.
55+
- `pfe-size`: Optionally adjusts the padding on the container. Accepts: `small`.
56+
- `pfe-overflow`: Optionally allows an image or element to overflow the padding on the container. This property should be added to the direct child of the slotm such as on an image tag; should be added to the element that you want to overflow the container. Accepts: `top`, `right`, `bottom`, `left`.
57+
58+
## Variables
59+
There are several powerful variables available to hook into and override default styles.
60+
61+
- Background color: Though using the `pfe-color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-card--BackgroundColor` variable. If you update this value manually, you should also update the `--pfe-broadcasted--color--text`, `--pfe-broadcasted--color--ui-link`[--visited, --hover, --focus] at the same time so that the text and links rendered on this background color show up correctly.
62+
- Background position: This is designed for use with the `pfe-img-src` attribute to allow you to align your background image. Default value is `center center`. **Variable name:** `--pfe-card--BackgroundPosition`.
63+
- Border: This allows the customization of a border around the entire container. There is a variable for the entire border shorthand (transparent by default) or you can hook into the individual properties. **Variable name:** `--pfe-card--BorderRadius` and `--pfe-card--Border` or `--pfe-card--BorderWeight`, `--pfe-card--BorderStyle`, `--pfe-card--BorderColor`.
64+
- Padding: You can customize the padding around the outside of the card container by connecting to either the shortcut padding variable or just one or more of the individual padding regions. **Variable names:** `--pfe-card--Padding` or `--pfe-card--PaddingTop`, `--pfe-card--PaddingRight`, `--pfe-card--PaddingBottom`, `--pfe-card--PaddingLeft`.
2465

2566
## Test
2667

‎elements/pfe-card/demo/index.html‎

Lines changed: 110 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
56
<title>PFElements: pfe-card Demo</title>
67

78
<!-- uncomment the es5-adapter if you're using the umd version -->
@@ -27,67 +28,136 @@
2728
<link href="../../pfelement/pfelement.min.css" rel="stylesheet">
2829

2930
<style>
30-
/* For demo only */
31-
.demo-cards {
32-
display: flex;
33-
flex-wrap: wrap;
34-
}
35-
36-
.demo-cards > * {
37-
margin: 0 16px 32px;
38-
width: calc(25% - 32px);
39-
}
31+
/* For demo only */
32+
.demo-cards {
33+
display: flex;
34+
flex-wrap: wrap;
35+
}
36+
37+
.demo-cards > * {
38+
margin: 0 16px 32px;
39+
min-width: 200px;
40+
width: calc(25% - 32px);
41+
}
42+
43+
h2[slot="pfe-card--header"] {
44+
font-size: 1.1em;
45+
font-weight: bolder;
46+
}
47+
48+
.custom-border {
49+
--pfe-card--BorderColor: #eee;
50+
--pfe-card--BorderWeight: 1px;
51+
}
52+
53+
.custom-header-background {
54+
--pfe-card__header--BackgroundColor: #0477a4;
55+
--pfe-card__header--Color: #fff;
56+
}
4057
</style>
4158

4259
</head>
4360
<body unresolved>
4461
<h1>&lt;pfe-card&gt;</h1>
4562
<div class="demo-cards">
4663

47-
<pfe-card color="lightest">
48-
<h2 slot="header">Lightest card</h2>
64+
<pfe-card pfe-color="lightest" class="custom-border">
65+
<h2 slot="pfe-card--header">Lightest card</h2>
4966
<p>This is the lightest pfe-card and <a href="#">a link</a>.</p>
50-
<div slot="footer"><pfe-cta priority="primary"><a href="#">Learn more</a></pfe-cta></div>
67+
<pfe-cta slot="pfe-card--footer">
68+
<a href="#">Learn more</a>
69+
</pfe-cta>
5170
</pfe-card>
52-
<pfe-card color="light">
53-
<h2 slot="header">Light card</h2>
54-
55-
<p>
56-
This is the light pfe-card and <a href="#">a link</a>.
57-
</p>
58-
<p>
59-
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
60-
</p>
61-
<p>
62-
Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
63-
</p>
64-
65-
<div slot="footer"><pfe-cta priority="secondary"><a href="#">Learn more</a></pfe-cta></div>
71+
72+
<pfe-card pfe-color="lighter">
73+
<h2 slot="pfe-card--header">Light card</h2>
74+
<p>This is the light pfe-card and <a href="#">a link</a>.</p>
75+
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
76+
<p>Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
77+
<pfe-cta slot="pfe-card--footer">
78+
<a href="#">Learn more</a>
79+
</pfe-cta>
6680
</pfe-card>
81+
6782
<pfe-card>
68-
<h2 slot="header">Default card</h2>
83+
<h2 slot="pfe-card--header">Default card</h2>
6984
Unwrapped item. This is the default pfe-card and <a href="#">a link</a>.
70-
<div slot="footer"><pfe-cta priority="secondary"><a href="#">Learn more</a></pfe-cta></div>
85+
<pfe-cta slot="pfe-card--footer">
86+
<a href="#">Learn more</a>
87+
</pfe-cta>
7188
</pfe-card>
72-
<pfe-card color="dark">
73-
<h2 slot="header">Dark Card</h2>
89+
90+
<pfe-card pfe-color="darker" pfe-img-src="https://www.redhat.com/files/webux/img/bandbg/bg-infrastructure-management-pattern-transparent-tile.png" style="--pfe-card__header--BackgroundColor: rgba(45,45,45,.7);">
91+
<h2 slot="pfe-card--header">Dark Card</h2>
7492
<p>This is the dark pfe-card and <a href="#">a link</a>.</p>
75-
<div slot="footer"><pfe-cta priority="secondary" on="dark"><a href="#">Learn more</a></pfe-cta></div>
93+
<pfe-cta slot="pfe-card--footer">
94+
<a href="#">Learn more</a>
95+
</pfe-cta>
7696
</pfe-card>
77-
<pfe-card color="darkest">
78-
<h2 slot="header">Darkest Card</h2>
97+
98+
<pfe-card pfe-color="darkest">
99+
<h2 slot="pfe-card--header">Darkest Card</h2>
79100
<p>This is the darkest pfe-card and <a href="#">a link</a>.</p>
80-
<div slot="footer"><pfe-cta priority="secondary" on="dark"><a href="#">Learn more</a></pfe-cta></div>
101+
<pfe-cta slot="pfe-card--footer">
102+
<a href="#">Learn more</a>
103+
</pfe-cta>
81104
</pfe-card>
82-
<pfe-card color="complement">
83-
<h2 slot="header">Complement Card</h2>
105+
106+
<pfe-card pfe-color="complement">
107+
<h2 slot="pfe-card--header">Complement Card</h2>
84108
<p>This is the complement pfe-card and <a href="#">a link</a>.</p>
85-
<div slot="footer"><pfe-cta priority="secondary" on="dark"><a href="#">Learn more</a></pfe-cta></div>
109+
<pfe-cta slot="pfe-card--footer">
110+
<a href="#">Learn more</a>
111+
</pfe-cta>
86112
</pfe-card>
87-
<pfe-card color="accent">
88-
<h2 slot="header">Accent Card</h2>
113+
114+
<pfe-card pfe-color="accent">
115+
<h2 slot="pfe-card--header">Accent Card</h2>
89116
<p>This is the accent pfe-card and <a href="#">a link</a>. Leverage agile frameworks to provide a robust synopsis for high level overviews.</p>
90117
</pfe-card>
91118
</div>
119+
120+
<div class="demo-cards">
121+
<pfe-card pfe-color="lighter">
122+
<img src="http://placekitten.com/200/150"/>
123+
<h2>Imaged card with no overflow</h2>
124+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
125+
<pfe-cta slot="pfe-card--footer">
126+
<a href="#">Learn more</a>
127+
</pfe-cta>
128+
</pfe-card>
129+
130+
<pfe-card pfe-color="lighter">
131+
<img pfe-overflow="top right left" src="http://placekitten.com/600/300"/>
132+
<h2>Imaged card with top & side overflow</h2>
133+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat porro similique saepe tempora vel! Facilis, porro?</p>
134+
<pfe-cta slot="pfe-card--footer">
135+
<a href="#">Learn more</a>
136+
</pfe-cta>
137+
</pfe-card>
138+
139+
<pfe-card pfe-color="lighter" class="custom-header-background">
140+
<h2 slot="pfe-card--header">Imaged card with side overflow + header</h2>
141+
<img pfe-overflow="top right left" src="http://placekitten.com/500/250"/>
142+
<p style="margin-top: 10px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat porro similique saepe tempora vel! Facilis, porro?</p>
143+
<pfe-cta slot="pfe-card--footer">
144+
<a href="#">Learn more</a>
145+
</pfe-cta>
146+
</pfe-card>
147+
148+
<pfe-card pfe-color="lighter">
149+
<h2>Imaged card with side overflow</h2>
150+
<img pfe-overflow="right left" src="http://placekitten.com/450/250"/>
151+
<pfe-cta slot="pfe-card--footer">
152+
<a href="#">Learn more</a>
153+
</pfe-cta>
154+
</pfe-card>
155+
156+
<pfe-card pfe-color="lighter">
157+
<h2>Imaged card with side & bottom overflow</h2>
158+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta rerum tempore natus alias! Cumque illum provident corrupti voluptates.</p>
159+
<img pfe-overflow="right left bottom" src="http://placekitten.com/400/250" slot="pfe-card--footer"/>
160+
</pfe-card>
161+
</div>
92162
</body>
93163
</html>

0 commit comments

Comments
 (0)