Skip to content

Commit 824f03d

Browse files
bennypowersbennypowers
committed
feat(band)!: migrate pfe-band to lit
test(pfe-band): e2e tests fix(band)!: remove public has_ attrs feat(band): add parts for wrapper elements, updated docs (#1836) test(pfe-band): e2e tests with page object model docs(band): fix demo
1 parent 998b50c commit 824f03d

27 files changed

+881
-1594
lines changed

‎elements/pfe-band/.npmignore‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎elements/pfe-band/custom-elements-manifest.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { pfeCustomElementsManifestConfig } from '@patternfly/pfe-tools/custom-elements-manifest.js';
2+
3+
export default pfeCustomElementsManifestConfig({
4+
globs: ['pfe-*.ts'],
5+
});

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

Lines changed: 0 additions & 472 deletions
This file was deleted.

‎elements/pfe-band/demo/pfe-band.html‎

Lines changed: 389 additions & 0 deletions
Large diffs are not rendered by default.

‎elements/pfe-band/demo/pfe-band.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import '@patternfly/pfe-band';
2+
import '@patternfly/pfe-card';
3+
import '@patternfly/pfe-cta';
4+
import '@patternfly/pfe-select';

‎elements/pfe-band/demo/pfe-band.story.js‎

Lines changed: 0 additions & 129 deletions
This file was deleted.

‎elements/pfe-band/docs/index.md‎

Lines changed: 45 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: layout-basic.html
2+
layout: layout-basic.njk
33
title: Band
44
description: Provides a set of slots in which to render banded content
55
package: pfe-band
@@ -11,137 +11,69 @@ tags:
1111
- component
1212
---
1313

14-
::: section header
15-
# {{ title }}
16-
:::
17-
18-
::: section
19-
## Overview
20-
21-
Band is a container component that provides a set of slots in which to render banded content.
22-
:::
14+
{% renderOverview for=package, title=title %}
15+
<div class="faux-band">
16+
<pfe-band>
17+
<h2 slot="header" class="no-header-styles">Header Slot</h2>
18+
<p>This content is in the main slot. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata dolor sit amet.</p>
19+
<pfe-card slot="aside" color="lightest">
20+
<h3 slot="header" class="no-header-styles">Aside slot</h3>
21+
<p>Content for a card that is in the aside slot.</p>
22+
</pfe-card>
23+
<div slot="footer">
24+
<p>This is the footer slot.</p>
25+
<pfe-cta>
26+
<a href="#">Learn more</a>
27+
</pfe-cta>
28+
</div>
29+
</pfe-band>
30+
</div>
31+
{% endrenderOverview %}
2332

24-
<div class="faux-band">
33+
{% band header="Usage" %}
34+
```html
2535
<pfe-band>
26-
<h2 slot="pfe-band--header">Header Slot</h2>
36+
<h2 slot="header">Header Slot</h2>
2737
<p>This content is in the main slot. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata dolor sit amet.</p>
28-
<pfe-card slot="pfe-band--aside" color="lightest">
29-
<h3 slot="pfe-card--header">Aside slot</h3>
38+
<pfe-card slot="aside" color="lightest">
39+
<h3 slot="header">Aside slot</h3>
3040
<p>Content for a card that is in the aside slot.</p>
3141
</pfe-card>
32-
<div slot="pfe-band--footer">
42+
<div slot="footer">
3343
<p>This is the footer slot.</p>
3444
<pfe-cta>
3545
<a href="#">Learn more</a>
3646
</pfe-cta>
3747
</div>
3848
</pfe-band>
39-
</div>
40-
41-
::: section
42-
## Installation
43-
44-
```shell
45-
npm install @patternfly/{{ package }}
46-
```
47-
:::
48-
49-
::: section
50-
## Usage
51-
52-
```html
53-
<pfe-band>
54-
<h2 slot="pfe-band--header">Header Slot</h2>
55-
<p>This content is in the main slot. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata dolor sit amet.</p>
56-
<pfe-card slot="pfe-band--aside" color="lightest">
57-
<h3 slot="pfe-card--header">Aside slot</h3>
58-
<p>Content for a card that is in the aside slot.</p>
59-
</pfe-card>
60-
<div slot="pfe-band--footer">
61-
<p>This is the footer slot.</p>
62-
<pfe-cta>
63-
<a href="#">Learn more</a>
64-
</pfe-cta>
65-
</div>
66-
</pfe-band>
67-
```
68-
:::
69-
70-
::: section
71-
## Slots
72-
73-
All slots other than `pfe-band--body` are optional. If the slot is not defined, the container tag for it will not be rendered in the template.
74-
75-
### pfe-band--header
76-
This slot renders at the top of the container and generally contains the title, headline, and/or subheadline content. Other possible candidates include a set of social sharing links or tags that describe the content below. The template is automatically wrapping this slot in a `header` tag. Recommend using h-level or p tags inside this slot.
77-
78-
### Default slot
79-
This unnamed slot should contain the bulk of the content in this element. The template is automatically wrapping all content within an `article` tag.
80-
81-
### pfe-band--footer
82-
This slot is typically used for calls-to-action or footnotes and is pushed to the bottom of the container. Recommended tags include `pfe-cta`.The template is automatically wrapping this slot in a `footer` tag.
83-
84-
### pfe-band--aside
85-
This slot is for content that should be rendered to the right or left of the default slot on desktop. Asides often contain `pfe-card` or interest forms which provide users a little more information or context for the band. The template is automatically wrapping this slot in an `aside` tag.
86-
:::
87-
88-
::: section
89-
## Attributes
90-
91-
### color
92-
Options include darkest, darker, accent, complement, lighter, lightest. The band has a default value of `#dfdfdf`. Your theme will influence these colors so check there first if you are seeing inconsistencies.
93-
94-
### img-src
95-
Optional background image applied to the entire band container. Alignment of this image can be managed using the `--pfe-band--BackgroundPosition` variable which is set to `center center` by default.
96-
97-
### size
98-
Optionally adjusts the padding on the container. Accepts: `small`.
99-
100-
## Aside settings
101-
The aside settings have defaults and if no attribute is defined on the element's main tag, these attributes will be injected with their default values automatically.
102-
103-
### aside-desktop
104-
This influences where the aside is rendered at the desktop view and are indicated relative to the body content. Options are `right` or `left`. **Right is the default.**
49+
```
50+
{% endband %}
10551

106-
### aside-mobile
107-
This influences the position of the aside in the mobile view as well as where in the DOM the aside markup is rendered. These names are relative to the body content. Options are `top` or `bottom`. **Bottom is the default.**
52+
{% renderSlots for=package %}{% endrenderSlots %}
10853

109-
### aside-height
110-
This influences the height of the aside region relative to the body content. Options are `full` or `body`. A `full` height starts at the top of the band and spans the header, body, and footer regions. A `body` height spans the body and footer regions only with the header region sitting above it in the rendered view. **Body is the default.**
111-
:::
54+
{% renderAttributes for=package %}{% endrenderAttributes %}
11255

113-
::: section
114-
## Methods
115-
None
116-
:::
56+
{% renderMethods for=package %}{% endrenderMethods %}
11757

118-
::: section
119-
## Events
120-
None
121-
:::
58+
{% renderEvents for=package %}{% endrenderEvents %}
12259

123-
::: section
124-
## Styling hooks
60+
{% renderCssCustomProperties for=package %}
61+
### Vertical and horizontal padding
62+
`--pfe-band--Padding--vertical` and `--pfe-band--Padding--horizontal` accept size values such as px, em, rem, etc.
12563

126-
### Vertical and horizontal padding
127-
`--pfe-band--Padding--vertical` and `--pfe-band--Padding--horizontal` accept size values such as px, em, rem, etc.
64+
### Background color
65+
Though using the `color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable. If you update this value manually, you should also update the `--theme` context variable to invoke the right theme on it and it's child elements. Supported themes include: `light`, `dark`, and `saturated`.
12866

129-
### Background color
130-
Though using the `color` attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the `--pfe-band--BackgroundColor` variable. If you update this value manually, you should also update the `--theme` context variable to invoke the right theme on it and it's child elements. Supported themes include: `light`, `dark`, and `saturated`.
67+
### Background position
68+
This is designed for use with the `img-src` attribute to allow you to align your background image. Default value is `center center`.
13169

132-
### Background position
133-
This is designed for use with the `img-src` attribute to allow you to align your background image. Default value is `center center`.
70+
### Border
71+
This allows the customization of a border around the entire container and is primarily designed to be used to add a top and/or bottom border line. This variable accepts the entire border shorthand and is set to transparent by default.
13472

135-
### Border
136-
This allows the customization of a border around the entire container and is primarily designed to be used to add a top and/or bottom border line. This variable accepts the entire border shorthand and is set to transparent by default.
73+
### Layout
74+
The band has a rudimentary layout system designed to be used inside the slot regions for the header, body, footer, and aside. It uses the CSS grid spec and creates a stacked layout by default. By updating these values, you will be able to create simple grid layouts. Please note that these do not include fallbacks for older browsers.
13775

138-
### Layout
139-
The band has a rudimentary layout system designed to be used inside the slot regions for the header, body, footer, and aside. It uses the CSS grid spec and creates a stacked layout by default. By updating these values, you will be able to create simple grid layouts. Please note that these do not include fallbacks for older browsers.
76+
Possible values include: `1fr 1fr`, `repeat(3, 1fr)`, `repeat(auto-fill, minmax(300px, 1fr))`
77+
{% endrenderCssCustomProperties %}
14078

141-
Possible values include: `1fr 1fr`, `repeat(3, 1fr)`, `repeat(auto-fill, minmax(300px, 1fr))`
142-
- `--pfe-band--layout`: Applied to `.pfe-band__container`
143-
- `--pfe-band_header--layout`: Applied to `.pfe-band__header`
144-
- `--pfe-band_body--layout`: Applied to `.pfe-band__body`
145-
- `--pfe-band_footer--layout`: Applied to `.pfe-band__footer`
146-
- `--pfe-band_aside--layout`: Applied to `.pfe-band__aside`
147-
:::
79+
{% renderCssParts for=package %}{% endrenderCssParts %}

‎elements/pfe-band/gulpfile.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)