Skip to content

Commit f0140c7

Browse files
kylebuch8mwcz
kylebuch8
authored and
mwcz
committed
Pfe (#264)
* changing from RHElements to PFElements This is a monster commit that has all name and prefix changes for all of our elements. * switching from pfelements package to patternfly package. * changing the package name in the root package.json file * two more package changes * updating dependencies * Updating storybook name from PFElements to PatternFly Elements
1 parent b824f8c commit f0140c7

File tree

385 files changed

+11830
-11837
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

385 files changed

+11830
-11837
lines changed

‎.storybook/config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { setOptions } from "@storybook/addon-options";
33
const req = require.context("../elements", true, /\.story\.js$/);
44

55
setOptions({
6-
name: "RHElements",
6+
name: "PatternFly Elements",
77
url: "/",
88
addonPanelInRight: true
99
});

‎.storybook/utils.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// This is a collection of functions to reuse within RHElements stories.
1+
// This is a collection of functions to reuse within PFElements stories.
22

33
export function escapeHTML(html) {
44
const div = document.createElement("div");

‎README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
**[Getting Started][start] | [Element Catalog][storybook] | [Creating Components][develop] | [Theming Components][theming]**
22

3-
![RHElements logo](./brand/logo/png/rhelements-logo-red.png)
3+
![PFElements logo](./brand/logo/png/rhelements-logo-red.png)
44

5-
[RHElements][rhe] is a collection of flexible and lightweight [Web Components][wc], and the tools to build them. RHElements are...
5+
[PFElements][rhe] is a collection of flexible and lightweight [Web Components][wc], and the tools to build them. PFElements are...
66

7-
- **Lightweight**: small file size, minimal boilerplate, no "framework-like" features.
8-
- **Universal**: write once, use everywhere. RHElements work in React, Vue, Angular, vanilla JS, anywhere HTML elements are used.
7+
- **Lightweight**: small file size, minimal boilerplate, no "framework-like" features.
8+
- **Universal**: write once, use everywhere. PFElements work in React, Vue, Angular, vanilla JS, anywhere HTML elements are used.
99

1010
The result of these two principles is plugging one set of comopnents into a wide variety of applications, bringing UX consistency and developer familiarity to any web project.
1111

@@ -20,9 +20,9 @@ Let's get started!
2020
npm install # this will take a while due to lerna bootstrap
2121
npm start
2222

23-
The `start` script will launch the demo pages. Demo pages are static showcases of each element, and also serve as scratchpads for experimenting while working on an element.
23+
The `start` script will launch the demo pages. Demo pages are static showcases of each element, and also serve as scratchpads for experimenting while working on an element.
2424

25-
*Notice: You will need to use [Node](https://nodejs.org/en/) v.7 or higher. Storybook _may_ not work with Node v.10.*
25+
_Notice: You will need to use [Node](https://nodejs.org/en/) v.7 or higher. Storybook *may* not work with Node v.10._
2626

2727
---
2828

elements/rh-accordion/.babelrc renamed to elements/pfe-accordion/.babelrc

File renamed without changes.

elements/rh-accordion/.editorconfig renamed to elements/pfe-accordion/.editorconfig

File renamed without changes.

elements/rh-accordion/.npmignore renamed to elements/pfe-accordion/.npmignore

File renamed without changes.

elements/rh-accordion/.travis.yml renamed to elements/pfe-accordion/.travis.yml

File renamed without changes.

elements/rh-accordion/LICENSE.txt renamed to elements/pfe-accordion/LICENSE.txt

File renamed without changes.

‎elements/pfe-accordion/README.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
# WIP 🐣: PFElements Accordion Element
2+
3+
## Usage
4+
5+
```
6+
<pfe-accordion>
7+
<pfe-accordion-header>
8+
<h2>Why do wizards need money if they could just create it?</h2>
9+
</pfe-accordion-header>
10+
<pfe-accordion-panel>
11+
<p>There is legislation that decides what you can conjure and what you can not. Because things that you conjure out of thin air will not last, it is illegal in the wizarding world.</p>
12+
</pfe-accordion-panel>
13+
<pfe-accordion-header>
14+
<h2>Why doesn't Harry have a portrait of his parents?</h2>
15+
</pfe-accordion-header>
16+
<pfe-accordion-panel>
17+
<p>The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.</p>
18+
</pfe-accordion-panel>
19+
</pfe-accordion>
20+
```
21+
22+
## Slots
23+
24+
### Default slot in pfe-accordion
25+
26+
Place the `pfe-accordion-header` and `pfe-accordion-panel` elements here.
27+
28+
### Default slot in pfe-accordion-header
29+
30+
We expect the light DOM of the `pfe-accordion-header` to be a heading level tag
31+
(h1, h2, h3, h4, h5, h6)
32+
33+
### Default slot in pfe-accordion-panel
34+
35+
Add the content for your accordion panel here.
36+
37+
## Attributes
38+
39+
**`color`**
40+
Changes the color of `<pfe-accordion-header>`
41+
42+
| Value | Description |
43+
| ----------------- | ------------------------------------------------------------------------- |
44+
| `striped` | Alternates `light` and `lightest` theme colors on `<pfe-accordion-header>` |
45+
| `lightest` | `lightest` theme color |
46+
| `light` (default) | `light` theme color |
47+
| `base` | `base` theme color |
48+
| `dark` | `dark` theme color |
49+
| `darkest` | `darkest` theme color |
50+
| `complement` | `complement`theme color |
51+
| `accent` | `accent` theme color |
52+
53+
## Styling
54+
55+
| Theme Var Hook | Description | Default |
56+
| ----------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------- |
57+
| `--pfe-theme--color--surface--lighter` | Default `<pfe-accordion-header>` color | $pfe-color--surface--lighter |
58+
| `--pfe-theme--color--surface--lighter--text` | Default `<pfe-accordion-header>` text color | $pfe-color--surface--lighter--text |
59+
| `--pfe-theme--color--surface--lighter--link--focus` | Focus border color for default `<pfe-accordion-header>` | $pfe-color--surface--lighter--link--focus |
60+
| `--pfe-theme--color--surface--lightest` | Lightest `<pfe-accordion-header>` color option | $pfe-color--surface--lighter |
61+
| `--pfe-theme--color--surface--lightest--text` | Lightest `<pfe-accordion-header>` text color option | $pfe-color--surface--lightest--text |
62+
| `--pfe-theme--color--surface--lightest--link--focus` | Focus border color for lightest `<pfe-accordion-header>` | $pfe-color--surface--lightest--link--focus |
63+
| `--pfe-theme--color--surface--base` | Base `<pfe-accordion-header>` color option | $pfe-color--surface--base |
64+
| `--pfe-theme--color--surface--base--text` | Base `<pfe-accordion-header>` text color option | $pfe-color--surface--base--text |
65+
| `--pfe-theme--color--surface--base--link--focus` | Focus border color for base `<pfe-accordion-header>` | $pfe-color--surface--base--link--focus |
66+
| `--pfe-theme--color--surface--darker` | Dark `<pfe-accordion-header>` color option | $pfe-color--surface--darker |
67+
| `--pfe-theme--color--surface--darker--text` | Dark `<pfe-accordion-header>` text color option | $pfe-color--surface--darker--text |
68+
| `--pfe-theme--color--surface--darker--link--focus` | Focus border color for dark `<pfe-accordion-header>` | $pfe-color--surface--darker--link--focus |
69+
| `--pfe-theme--color--surface--darkest` | Darkest `<pfe-accordion-header>` color option | $pfe-color--surface--darkest |
70+
| `--pfe-theme--color--surface--darkest--text` | Darkest `<pfe-accordion-header>` text color option | $pfe-color--surface--darkest--text |
71+
| `--pfe-theme--color--surface--darkest--link--focus` | Focus border color for darkest `<pfe-accordion-header>` | $pfe-color--surface--darkest--link--focus |
72+
| `--pfe-theme--color--surface--complement` | Complement `<pfe-accordion-header>` color option | $pfe-color--surface--complement |
73+
| `--pfe-theme--color--surface--complement--text` | Complement `<pfe-accordion-header>` text color option | $pfe-color--surface--complement--text |
74+
| `--pfe-theme--color--surface--complement--link--focus` | Focus border color for complement `<pfe-accordion-header>` | $pfe-color--surface--complement--link--focus |
75+
| `--pfe-theme--color--surface--accent` | Accent `<pfe-accordion-header>` color option | $pfe-color--surface--accent |
76+
| `--pfe-theme--color--surface--accent--text` | Accent `<pfe-accordion-header>` text color option | $pfe-color--surface--accent--text |
77+
| `--pfe-theme--color--surface--accent--link--focus` | Focus border color for accent `<pfe-accordion-header>` | $pfe-color--surface--accent--link--focus |
78+
79+
## Events
80+
81+
### pfe-accordion:change
82+
83+
Fires when an pfe-accordion-header is activated. The detail object contains the
84+
following
85+
86+
```
87+
detail: {
88+
expanded: Boolean
89+
}
90+
```
91+
92+
## Test
93+
94+
npm run test
95+
96+
## Build
97+
98+
npm run build
99+
100+
## Demo
101+
102+
From the PFElements root directory, run:
103+
104+
npm start
105+
106+
## Code style
107+
108+
Accordion (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
109+
110+
[prettier]: https://github.com/prettier/prettier/
111+
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
112+
[web-component-tester]: https://github.com/Polymer/web-component-tester

elements/rh-accordion/demo/index.html renamed to elements/pfe-accordion/demo/index.html

Lines changed: 49 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,99 +2,98 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>RHElements: rh-accordion Demo</title>
5+
<title>PFElements: pfe-accordion Demo</title>
66

77
<link rel="stylesheet" href="http://overpass-30e2.kxcdn.com/overpass.css" />
88
<!-- <link rel="stylesheet" href="../../../themes/cp-theme/cp-theme.css" /> -->
99

1010
<noscript>
11-
<link href="../../rhelement/rhelement-noscript.min.css" rel="stylesheet">
11+
<link href="../../pfelement/pfelement-noscript.min.css" rel="stylesheet">
1212
</noscript>
1313

14-
<link href="../../rhelement/rhelement.min.css" rel="stylesheet">
14+
<link href="../../pfelement/pfelement.min.css" rel="stylesheet">
1515

1616

1717
<!-- uncomment the es5-adapter if you're using the umd version -->
1818
<script src="/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
1919
<script src="/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
2020
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
2121
<script>require([
22-
'../../../themes/cp-theme/cp-theme.umd.js',
23-
'../rh-accordion.umd.js'
22+
'../pfe-accordion.umd.js'
2423
])</script>
2524
</head>
2625
<body unresolved>
27-
<h1>&lt;rh-accordion&gt;</h1>
26+
<h1>&lt;pfe-accordion&gt;</h1>
2827
<section>
29-
<rh-accordion color="lightest">
30-
<rh-accordion-header>
28+
<pfe-accordion color="lightest">
29+
<pfe-accordion-header>
3130
<h2>Why do wizards need money if they could just create it?</h2>
32-
</rh-accordion-header>
33-
<rh-accordion-panel>
31+
</pfe-accordion-header>
32+
<pfe-accordion-panel>
3433
<p>There is legislation that decides what you can conjure and what you can not. Because things that you conjure out of thin air will not last, it is illegal in the wizarding world.</p>
35-
</rh-accordion-panel>
36-
<rh-accordion-header>
34+
</pfe-accordion-panel>
35+
<pfe-accordion-header>
3736
<h2>Why doesn't Harry have a portrait of his parents?</h2>
38-
</rh-accordion-header>
39-
<rh-accordion-panel>
37+
</pfe-accordion-header>
38+
<pfe-accordion-panel>
4039
<p>The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.</p>
41-
</rh-accordion-panel>
42-
<rh-accordion-header>
40+
</pfe-accordion-panel>
41+
<pfe-accordion-header>
4342
<h2>Why is Harry considered a half-blood if both of his parents could use magic?</h2>
44-
</rh-accordion-header>
45-
<rh-accordion-panel>
43+
</pfe-accordion-header>
44+
<pfe-accordion-panel>
4645
<p>Because Harry's grandparents were not able to do magic. This is generally frowned upon by those who consider themselves pure, such as the Malfoy's or other antagonists.</p>
47-
</rh-accordion-panel>
48-
<rh-accordion-header>
46+
</pfe-accordion-panel>
47+
<pfe-accordion-header>
4948
<h2>Is Hogwarts the only wizarding school?</h2>
50-
</rh-accordion-header>
51-
<rh-accordion-panel>
49+
</pfe-accordion-header>
50+
<pfe-accordion-panel>
5251
<p>No! It has been revealed that there are actually 11 long established and prestigious schools around the globe. These include Castelobruxo in the rainforest of Brazil, Durmstrang Institute (whereas nobody is certain of it’s whereabouts), and Ilvermorny, right here in the United States.</p>
53-
</rh-accordion-panel>
54-
<rh-accordion-header>
52+
</pfe-accordion-panel>
53+
<pfe-accordion-header>
5554
<h2>Where do the main characters work as adults?</h2>
56-
</rh-accordion-header>
57-
<rh-accordion-panel>
55+
</pfe-accordion-header>
56+
<pfe-accordion-panel>
5857
<p>Harry and Hermione are at the Ministry: he ends up leading the Auror department. Ron helps George at the joke shop and does very well. Ginny becomes a professional Quidditch player and then sportswriter for the Daily Prophet.</p>
5958
<p><a href="https://www.pottermore.com/collection/characters" target="blank">Read more about the characters</a></p>
60-
</rh-accordion-panel>
61-
</rh-accordion>
59+
</pfe-accordion-panel>
60+
</pfe-accordion>
6261
</section>
6362
<section>
6463
<h2>Striped Accordion</h2>
65-
<rh-accordion color="striped">
66-
<rh-accordion-header>
64+
<pfe-accordion color="striped">
65+
<pfe-accordion-header>
6766
<h2>Why do wizards need money if they could just create it?</h2>
68-
</rh-accordion-header>
69-
<rh-accordion-panel>
67+
</pfe-accordion-header>
68+
<pfe-accordion-panel>
7069
<p>There is legislation that decides what you can conjure and what you can not. Because things that you conjure out of thin air will not last, it is illegal in the wizarding world.</p>
71-
</rh-accordion-panel>
72-
<rh-accordion-header>
70+
</pfe-accordion-panel>
71+
<pfe-accordion-header>
7372
<h2>Why doesn't Harry have a portrait of his parents?</h2>
74-
</rh-accordion-header>
75-
<rh-accordion-panel>
73+
</pfe-accordion-header>
74+
<pfe-accordion-panel>
7675
<p>The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.</p>
77-
</rh-accordion-panel>
78-
<rh-accordion-header>
76+
</pfe-accordion-panel>
77+
<pfe-accordion-header>
7978
<h2>Why is Harry considered a half-blood if both of his parents could use magic?</h2>
80-
</rh-accordion-header>
81-
<rh-accordion-panel>
79+
</pfe-accordion-header>
80+
<pfe-accordion-panel>
8281
<p>Because Harry's grandparents were not able to do magic. This is generally frowned upon by those who consider themselves pure, such as the Malfoy's or other antagonists.</p>
83-
</rh-accordion-panel>
84-
<rh-accordion-header>
82+
</pfe-accordion-panel>
83+
<pfe-accordion-header>
8584
<h2>Is Hogwarts the only wizarding school?</h2>
86-
</rh-accordion-header>
87-
<rh-accordion-panel>
85+
</pfe-accordion-header>
86+
<pfe-accordion-panel>
8887
<p>No! It has been revealed that there are actually 11 long established and prestigious schools around the globe. These include Castelobruxo in the rainforest of Brazil, Durmstrang Institute (whereas nobody is certain of it’s whereabouts), and Ilvermorny, right here in the United States.</p>
89-
</rh-accordion-panel>
90-
<rh-accordion-header>
88+
</pfe-accordion-panel>
89+
<pfe-accordion-header>
9190
<h2>Where do the main characters work as adults?</h2>
92-
</rh-accordion-header>
93-
<rh-accordion-panel>
91+
</pfe-accordion-header>
92+
<pfe-accordion-panel>
9493
<p>Harry and Hermione are at the Ministry: he ends up leading the Auror department. Ron helps George at the joke shop and does very well. Ginny becomes a professional Quidditch player and then sportswriter for the Daily Prophet.</p>
9594
<p><a href="https://www.pottermore.com/collection/characters" target="blank">Read more about the characters</a></p>
96-
</rh-accordion-panel>
97-
</rh-accordion>
95+
</pfe-accordion-panel>
96+
</pfe-accordion>
9897
</section>
9998
</body>
10099
</html>

0 commit comments

Comments
 (0)