Skip to content

Commit 1e28aea

Browse files
mcokermcoker
committed
chore(hc-demo): use latest css from core
1 parent cfe4695 commit 1e28aea

File tree

637 files changed

+396747
-7
lines changed

Some content is hidden

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

637 files changed

+396747
-7
lines changed

‎packages/react-docs/patternfly-docs/patternfly-dist-hc/CODE_OF_CONDUCT.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
This project is governed by the [Contributor Covenant version 1.4][1]. All contributors and participants agree to abide by its terms. To report violations, send an email to [patternfly@redhat.com][2].
2+
3+
[1]: https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
4+
[2]: mailto:patternfly@redhat.com

‎packages/react-docs/patternfly-docs/patternfly-dist-hc/README.md‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
# PatternFly
2+
3+
## Install
4+
5+
- This assumes an environment is already set up for npm packages - if not, please use npm init following the steps at [https://docs.npmjs.com/getting-started/using-a-package.json](https://docs.npmjs.com/getting-started/using-a-package.json).
6+
- run `npm install @patternfly/patternfly --save`
7+
8+
When you install PatternFly, the package includes:
9+
10+
- a single file for the entire compiled library: `node_modules/@patternfly/patternfly/patternfly.css`
11+
- individual files with each component compiled separately: `node_modules/@patternfly/patternfly/<ComponentName>/styles.css`
12+
- a single file for the entire library's source (SASS): `node_modules/@patternfly/patternfly/patternfly.scss`
13+
- individual files for each component's source (SASS): `node_modules/@patternfly/patternfly/<ComponentName>/styles.scss`
14+
15+
Any of the files above are meant for use in consuming the library. The recommended consumption approach will vary from project to project.
16+
17+
## Development
18+
19+
**PatternFly Development requires Node v18.0.0 or greater**
20+
21+
To setup the PatternFly development environment:
22+
23+
- clone the project
24+
- run `yarn install` from the project root
25+
- run `yarn start`
26+
- open your browser to `http://localhost:8001`
27+
28+
After working on your contribution, check for [accessibility violations](#testing-for-accessibility).
29+
30+
### Create components, layouts...
31+
32+
To create source file scaffolding for a new component, layout, utility, or demo, run the NPM script:
33+
34+
`node generate <CamelName>`
35+
36+
Below are the full options for this script:
37+
38+
```sh
39+
Options:
40+
-f, --folder <folder> Source folder (components, demos, layouts, or utilities) (default: "components")
41+
```
42+
43+
#### Examples
44+
45+
To create a "Test component" component (`.pf-v6-c-test-component`), run:
46+
47+
`node generate TestComponent`
48+
49+
To create a "Test layout" layout (`.pf-l-test-layout`), run:
50+
51+
`node generate TestLayout -f layouts`
52+
53+
To create 3 new demos named "Test demo", "Test demo 2", and "Test demo 3", run:
54+
55+
`node generate TestDemo TestDemo2 TestDemo3 -f demos`
56+
57+
58+
#### Update screenshots
59+
When making visual changes to a full page example, new example preview screenshots must be generated. To update the screenshots:
60+
61+
- open a terminal and run `yarn build && yarn serve`
62+
- in another terminal, run `yarn screenshots`
63+
64+
## Guidelines for CSS development
65+
66+
- For issues created in Core that will affect a component in PF-React, a follow up issue must be created in PF-React once the Pull Request is merged. The issue should include the Core PR #, the Core Release, a link to the component in https://pf-core-staging.patternfly.org, and information detailing the change.
67+
- If global variables are modified in Core, a React issue should be opened to address this.
68+
- CSS developers should ensure that animation is well documented and communicated to the respective React developer.
69+
- Once the component/enhancement is complete it should receive sign off from a visual designer who can then update the master sketch file with any changes.
70+
71+
### Handlebars guidelines
72+
[For information on how to contribute, refer to our guidelines.](https://pf-core-staging.patternfly.org/contribution)
73+
74+
### CSS/Sass guidelines
75+
[For more information on using CSS and Sass, refer to our guidelines.](https://pf-core-staging.patternfly.org/guidelines)
76+
77+
### Custom icon guidelines
78+
[For more information on custom icons, refer to our guidelines.](https://pf-core-staging.patternfly.org/adding-custom-icons)
79+
80+
## Beta components
81+
82+
When creating a brand new component, it should be released as beta in order to get feedback.
83+
84+
## Testing for accessibility
85+
86+
PatternFly uses [aXe: The Accessibility Engine](https://www.deque.com/axe/) to check for accessibility violations. Our goal is to meet WCAG 2.0 AA requirements, as noted in our [Accessibility guide](https://www.patternfly.org/accessibility/patternflys-accessibility).
87+
88+
### How to perform an accessibility audit with aXe
89+
aXe is available as either a browser extension or npm script.
90+
91+
To run the a11y audit locally:
92+
93+
- install the latest [chromedriver](http://chromedriver.chromium.org/downloads) and ensure its available on your system `$PATH`
94+
- macOS users can simply `brew cask install chromedriver`
95+
- open a terminal and run `yarn build && yarn serve`
96+
- in another terminal, run `yarn a11y`
97+
98+
The tool is configured to return WCAG 2.0 AA violations for the full page renderings of all components, layouts, utilities, and demos. The tool will provide feedback about what the violation is and a link to documentation about how to address the violation.
99+
100+
The same tool is also available as a browser extension for [Chrome](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/).
101+
102+
### Fixing violations
103+
104+
Ignore the violations that aren’t related to your contribution.
105+
106+
Fix violations related to your contribution.
107+
108+
If there are violations that are not obvious how to fix, then [create an issue](https://github.com/patternfly/patternfly/issues/new) with information about the violation that was found. For example, some violations might require further discussion before they can be addressed. And some violations may not be valid and require changes to the workspace or tooling to stop flagging the violation.
109+
110+
If you have any suggestions about ways that we can improve how we use this tool, please let us know by opening an issue.
111+
112+
## FAQ
113+
114+
#### CSS Variables
115+
[How do I use CSS variables to customize the library?](https://pf-core-staging.patternfly.org/guidelines#variables)
116+
117+
#### Browser support
118+
PatternFly is supported on the latest two major versions of the following browsers:
119+
120+
- Chrome
121+
- Firefox
122+
- Safari
123+
- Edge

‎packages/react-docs/patternfly-docs/patternfly-dist-hc/assets/fontawesome/_animated.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// Animated icons
2+
// --------------------------
3+
@use './variables' as *;
4+
5+
.#{$fa-css-prefix}-spin {
6+
animation: fa-spin 2s infinite linear;
7+
}
8+
9+
.#{$fa-css-prefix}-pulse {
10+
animation: fa-spin 1s infinite steps(8);
11+
}
12+
13+
@keyframes fa-spin {
14+
0% {
15+
transform: rotate(0deg);
16+
}
17+
18+
100% {
19+
transform: rotate(360deg);
20+
}
21+
}

‎packages/react-docs/patternfly-docs/patternfly-dist-hc/assets/fontawesome/_bordered-pulled.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// Bordered & pulled
2+
// -------------------------
3+
@use './variables' as *;
4+
5+
.#{$fa-css-prefix}-border {
6+
border: solid .08em $fa-border-color;
7+
border-radius: .1em;
8+
padding: .2em .25em .15em;
9+
}
10+
11+
.#{$fa-css-prefix}-pull-left { float: left; }
12+
.#{$fa-css-prefix}-pull-right { float: right; }
13+
14+
.#{$fa-css-prefix},
15+
.fas,
16+
.far,
17+
.fal,
18+
.fab {
19+
&.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
20+
&.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
21+
}

‎packages/react-docs/patternfly-docs/patternfly-dist-hc/assets/fontawesome/_fixed-width.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Fixed width icons
2+
// -------------------------
3+
@use './variables' as *;
4+
5+
.#{$fa-css-prefix}-fw {
6+
text-align: center;
7+
width: #{$fa-fw-width};
8+
}

0 commit comments

Comments
 (0)