Skip to content

Commit 28439ea

Browse files
alistairmckylebuch8diwanshiamcgrana
authored
feat: pfe codeblock #804 (#875)
* New pfe-codeblock created * initial commit wip * wip * update demo html * wip * working prototype * update demo page * update docs * add dark theme support * change dark to okaidia theme * line numbers not working * partialy working line numbers * mostly working line numbers with alignment issue * fix line number offset issue * update for attribute changes * test * updating the location of the prism scss files * adding the watch script for development purposes For some reason the `watch` command wasn't there when I would run `npm run dev pfe-codeblock`. * adding includes polyfill support for IE11 * following the code pattern from other elements for observers I know that this element mirrors pfe-markdown so I'll need to go back and clean that up. I also added a watcher on characterData so if you change any of the text, the component updates the shadow DOM * Added tests for codeblock attributes * update with npm install * update readme * Update readme * removing the unneeded discovery and changelog docs * switching from pfe-color to pfe-codeblock-theme * (fix): remove filter on spaces & line breaks * (chore): add linebreaks in css markup examples with and without line-numbers * update attributes to pfe-c- * fix codeblock tests * update themes for light and dark * fix quote error in _general.scss * update themes * add ignore for .history * wip * npm audi * broken, styles work in progress * line number move * package lock and git ignore * add package lock git ignore and update index.html * fixed branch and merge * add package lock * update colors for brand * update colours for numbers and dividers * update package locks * package lock * update codeblock * make suggested code changes * add back package-locks.json files * add codeblock screenshot * remove duplicate .history entry in .gitignore * revert pfe-markdown package-lock * requested changes * update and remove lock files * add elemants package-lock.json to .gitignore * update lang code * refactor get methods * fix language attribute * removing console.log statement * fixing the React and Vue tests * update package lock * Fix theme spelling * change index back to working version * update after install * fix storybook demo file * changes from code review * merge * adding changelog * remove unused files and update storybook content Co-authored-by: Kyle Buchanan <[email protected]> Co-authored-by: Diwanshi Pandey <[email protected]> Co-authored-by: Alistair Mcgranaghan <[email protected]>
1 parent 45913c6 commit 28439ea

23 files changed

+1660
-1
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ test/.wct-kludge
4242
# IDEs
4343
.vimrc
4444
.sonarlint
45+
.history
4546

4647
# Temp files
4748
*~

‎CHANGELOG-1.x.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
## 1.2.0 ( TBD )
22

3+
- [](https://github.com/patternfly/patternfly-elements/commit/) feat: pfe-codeblock (#804)
34
- [89ddfd](https://github.com/patternfly/patternfly-elements/commit/89ddfdc00382e46946309f02719a5faa1190248f) feat: Add Sassdoc and update build tasks to include link
45
- [4b8326e](https://github.com/patternfly/patternfly-elements/commit/4b8326efea7bd9d45ee0f195ed08ad52b6cdb904) feat: Add typography classes & match PatternFly core variables
56
- [84365f4](https://github.com/patternfly/patternfly-elements/commit/84365f44e380256cd5287a59c06d9baf9bc32328) feat: Add pfe-clipboard element (#803, #810)\
67
- [9fab144](https://github.com/patternfly/patternfly-elements/commit/9fab1440da7bc26e3dd5f92224f03e964ea9eda2) feat: pfe-primary-detail
7-
- [03899cc](https://github.com/patternfly/patternfly-elements/commit/03899ccf7a4421186a7316926955b3a3bd1068f7) fix: Typography: mixins & extends
8+
- [03899cc](https://github.com/patternfly/patternfly-elements/commit/03899ccf7a4421186a7316926955b3a3bd1068f7) fix: Typography: mixins & extends (#1303)
89
- [57b5dd2](https://github.com/patternfly/patternfly-elements/commit/57b5dd2adf1c0fd0e00a6c9112d3ad5fb66a5a11) feat: Update Firefox support to 78 (latest version for RHEL CSB)
910
- [5d661cb](https://github.com/patternfly/patternfly-elements/commit/5d661cb7e85921ed72f324a0b635873c23bc69e9) fix: pfe-clipboard docs; add font-size
1011
- [](https://github.com/patternfly/patternfly-elements/commit/) fix: update font-weight on pfe text modifier classes

‎elements/pfe-codeblock/LICENSE.txt‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright 2021 Red Hat, Inc.
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is
8+
furnished to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in
11+
all copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
SOFTWARE.

‎elements/pfe-codeblock/README.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# PatternFly Element | Codeblock element
2+
Render code in a styled and formatted way
3+
4+
## Usage
5+
Describe how best to use this web component along with best practices.
6+
7+
```html
8+
<h2>HTML Markup</h2>
9+
<pfe-codeblock code-language="markup">
10+
<pre codeblock-container>
11+
<code>
12+
&#x3C;h1&#x3E;example html&#x3C;/h1&#x3E;
13+
&#x3C;p&#x3E;some paragraph text&#x3C;/p&#x3E;
14+
</code>
15+
</pre>
16+
</pfe-codeblock>
17+
18+
<h2>Javascript Markup</h2>
19+
<pfe-codeblock code-language="javascript">
20+
<pre codeblock-container>
21+
<code>
22+
const example="javascript";
23+
let test=null;
24+
</code>
25+
</pre>
26+
</pfe-codeblock>
27+
```
28+
## Attributes
29+
30+
- `code-language`: Describe this attribute and what function is serves.
31+
- `code-line-numbers`: Describe this attribute and what function is serves.
32+
- `code-line-number-start`: Describe this attribute and what function is serves.
33+
- `code-theme`: Describe this attribute and what function is serves.
34+
35+
## Variable hooks
36+
37+
Available hooks for styling:
38+
39+
| Variable name | Default value | Region |
40+
| --- | --- | --- |
41+
| `--pfe-pfe-codeblock--Color` | `#252527` | N/A |
42+
43+
## Dependencies
44+
Describe any dependent elements or libraries here too.
45+
46+
## Dev
47+
48+
`npm start`
49+
50+
## Test
51+
52+
`npm run test`
53+
54+
## Build
55+
56+
`npm run build`
57+
58+
## Demo
59+
60+
From the PFElements root directory, run:
61+
62+
`npm run demo`
63+
64+
## Code style
65+
66+
Codeblock (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.
67+
68+
[prettier]: https://github.com/prettier/prettier/
69+
[prettier-ed]: https://prettier.io/docs/en/editors.html
70+
[web-component-tester]: https://github.com/Polymer/web-component-tester

‎elements/pfe-codeblock/codeblock--screenshot.png‎

48.8 KB
Loading

0 commit comments

Comments
 (0)