Skip to content

Commit f8f9004

Browse files
kylebuch8kylebuch8
authored
pfe-markdown element (#358)
* pfe-markdown element * adding defer attribute to global javascript files * fixing an issue where the DOM hasn't finished loading and we try to render the markdown as the page is still loading * Add schema and add storybook utils to demo (#387) * adding slotchange event for compatibility with Angular * switching from .PFElement to [pfelement], updating markdown package.json, removing on dark/light from markdown styles * updating contributor name
1 parent 5d5fb70 commit f8f9004

22 files changed

+662
-0
lines changed

‎.storybook/config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { configure } from "@storybook/polymer";
22
import { setOptions } from "@storybook/addon-options";
3+
4+
import "./test-theme.css";
5+
36
const req = require.context("../elements", true, /\.story\.js$/);
47

58
setOptions({

‎.storybook/test-theme.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
[pfelement] {
2+
font-family: var(--pfe-theme--font-family);
3+
color: var(--pfe-broadcasted--color--text);
4+
}
5+
[pfelement] a {
6+
color: var(--pfe-broadcasted--color--ui-link);
7+
}
8+
[pfelement] a:visited {
9+
color: var(--pfe-broadcasted--color--ui-link--visited);
10+
}
11+
[pfelement] a:hover {
12+
color: var(--pfe-broadcasted--color--ui-link--hover);
13+
}
14+
[pfelement] a:focus {
15+
color: var(--pfe-broadcasted--color--ui-link--focus);
16+
}
17+
[pfelement] > *:first-child {
18+
margin-top: 0;
19+
}
20+
[pfelement] h1,
21+
[pfelement] h2,
22+
[pfelement] h3,
23+
[pfelement] h4,
24+
[pfelement] h5,
25+
[pfelement] h6 {
26+
font-family: var(--pfe-theme--font-family--heading);
27+
}
28+
[pfelement] pre,
29+
[pfelement] code {
30+
font-family: var(--pfe-theme--font-family--code);
31+
}

‎elements/pfe-markdown/.babelrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": [["env", { "modules": false }]],
3+
"plugins": ["external-helpers"]
4+
}

‎elements/pfe-markdown/.editorconfig‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# EditorConfig: http://EditorConfig.org
2+
3+
# Top-most EditorConfig file
4+
root = true
5+
6+
# Rules for JavaScript files:
7+
8+
[*.{js,py,json,sh,html}]
9+
# 4 space indentation
10+
indent_style = space
11+
indent_size = 2
12+
# No trailing spaces
13+
trim_trailing_whitespace = true
14+
# Unix-style newlines
15+
end_of_line = lf
16+
# Newline ending every file
17+
insert_final_newline = true

‎elements/pfe-markdown/.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎elements/pfe-markdown/.travis.yml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
language: node_js
2+
dist: trusty
3+
sudo: required
4+
addons:
5+
firefox: "latest"
6+
apt:
7+
sources:
8+
- google-chrome
9+
packages:
10+
- google-chrome-stable
11+
node_js: stable
12+
before_install:
13+
- npm install -g web-component-tester
14+
install:
15+
- npm install
16+
before_script:
17+
script:
18+
- xvfb-run npm run test

‎elements/pfe-markdown/LICENSE.txt‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright 2019 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-markdown/README.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# PatternFly Element | Markdown Element
2+
3+
Use this element to take markdown and have it display as HTML. This element uses the [marked.js library](https://marked.js.org/#/README.md#README.md) to convert the markdown to HTML.
4+
5+
## Usage
6+
7+
```
8+
<pfe-markdown>
9+
<div pfe-markdown-container># This is a heading</div>
10+
</pfe-markdown>
11+
```
12+
13+
It is important that the div with the `pfe-markdown-container` attribute is present. Without it, the element won't work. This element does not actually use the shadow DOM to display it's contents.
14+
15+
At runtime, a child div with an attribute of `pfe-markdown-render` is appended to the light DOM and the `pfe-markdown-container` div is hidden with an inline style. The purpose behind this is so that all of the styles that are present in the light DOM are available to the converted markdown.
16+
17+
## Slots
18+
19+
There is a default slot but it is just used to capture the light DOM and hide it.
20+
21+
## Attributes
22+
23+
None.
24+
25+
## Test
26+
27+
npm run test
28+
29+
## Build
30+
31+
npm run build
32+
33+
## Demo
34+
35+
From the PFElements root directory, run:
36+
37+
npm start
38+
39+
## Code style
40+
41+
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.
42+
43+
[prettier]: https://github.com/prettier/prettier/
44+
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
45+
[web-component-tester]: https://github.com/Polymer/web-component-tester

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>PatternFly Element | pfe-markdown Demo</title>
6+
7+
<noscript>
8+
<link href="../../pfelement/pfelement-noscript.min.css" rel="stylesheet">
9+
</noscript>
10+
11+
<link href="../../pfelement/pfelement.min.css" rel="stylesheet">
12+
13+
<!-- Test using the Red Hat theme -->
14+
<link href="https://static.redhat.com/libs/redhat/redhat-theme/latest/advanced-theme.css" rel="stylesheet">
15+
16+
<!-- uncomment the es5-adapter if you're using the umd version -->
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.7/custom-elements-es5-adapter.js"></script>
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.7/webcomponents-bundle.js"></script>
19+
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
20+
<script>require(['../pfe-markdown.umd.min.js'])</script>
21+
<!-- <script type="module" src="../pfe-markdown.min.js"></script> -->
22+
23+
<!-- <script defer src="../../pfelement/pfelement.umd.min.js"></script>
24+
<script defer src="../pfe-markdown.umd.min.js"></script> -->
25+
26+
<style>
27+
section {
28+
margin-bottom: 32px;
29+
border-bottom: 1px solid #ececec;
30+
}
31+
32+
a {
33+
color: red;
34+
font-family: cursive;
35+
}
36+
37+
a:visited {
38+
color: teal;
39+
}
40+
</style>
41+
42+
<script>
43+
var markdownSample = "Sometimes you want numbered lists:\n\n" +
44+
"1. One\n" +
45+
"2. Two\n" +
46+
"3. Three\n\n" +
47+
"Sometimes you want bullet points:\n\n" +
48+
"* Start a line with a star\n" +
49+
"* Profit!\n\n" +
50+
"Alternatively,\n\n" +
51+
"- Dashes work just as well\n" +
52+
"- And if you have sub points, put two spaces before the dash or star:\n" +
53+
"\t- Like this\n"
54+
"\t- And this";
55+
56+
var firstMarkdownSample = "# First Markdown Sample";
57+
var secondMarkdownSample = "## Second Markdown Sample";
58+
59+
window.addEventListener("DOMContentLoaded", function() {
60+
setTimeout(function() {
61+
document.querySelector("#markdownTag").innerHTML = markdownSample;
62+
}, 1500);
63+
64+
document.querySelector("#markdownTagSecondTime").innerHTML = firstMarkdownSample;
65+
66+
setTimeout(function() {
67+
document.querySelector("#markdownTagSecondTime").innerHTML = secondMarkdownSample;
68+
}, 3000);
69+
70+
setTimeout(function() {
71+
const element = document.querySelector("#markdownTagUpdatedLightDom");
72+
element.innerHTML += "\n### This is a heading level 3";
73+
}, 1500);
74+
});
75+
</script>
76+
</head>
77+
<body unresolved>
78+
<h1>&lt;pfe-markdown&gt;</h1>
79+
<section>
80+
<pfe-markdown>
81+
<div pfe-markdown-container># This is a heading</div>
82+
</pfe-markdown>
83+
</section>
84+
<section>
85+
<h2>Using markdown in the light dom</h2>
86+
<pfe-markdown>
87+
<div pfe-markdown-container># Markdown in the light dom
88+
[A link! (not Link from Zelda)](https://access.redhat.com)
89+
90+
This is pretty easy too. You just need to worry about indentation.</div>
91+
</pfe-markdown>
92+
</section>
93+
<section>
94+
<h2>Updating the pfe-markdown tag dynamically</h2>
95+
<pfe-markdown>
96+
<div pfe-markdown-container id="markdownTag"></div>
97+
</pfe-markdown>
98+
</section>
99+
<section>
100+
<h2>Updating the pfe-markdown tag dynamically (a second time)</h2>
101+
<pfe-markdown>
102+
<div pfe-markdown-container id="markdownTagSecondTime"></div>
103+
</pfe-markdown>
104+
</section>
105+
<section>
106+
<h2>Changing the light dom to show that pfe-markdown updates the markdown</h2>
107+
<pfe-markdown>
108+
<div pfe-markdown-container id="markdownTagUpdatedLightDom">## Here is a headline</div>
109+
</pfe-markdown>
110+
</section>
111+
</body>
112+
</html>

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { storiesOf } from "@storybook/polymer";
2+
import * as storybookBridge from '@storybook/addon-knobs/polymer';
3+
import * as tools from "../../../.storybook/utils.js";
4+
5+
import PfeMarkdown from "../pfe-markdown.js";
6+
7+
const stories = storiesOf("Markdown", module);
8+
9+
// Define the templates to be used
10+
const template = (data = {}) =>
11+
tools.component(PfeMarkdown.tag, data.prop, data.slots);
12+
13+
stories.addDecorator(storybookBridge.withKnobs);
14+
15+
stories.add(PfeMarkdown.tag, () => {
16+
let config = {};
17+
const props = PfeMarkdown.properties;
18+
const slots = PfeMarkdown.slots;
19+
20+
slots.default.default = `# Here is some markdown
21+
22+
And some some more
23+
24+
### Here is a heading level 3
25+
26+
And a [link](https://redhat.com)`;
27+
28+
// Build the knobs and read in their selections
29+
config.prop = tools.autoPropKnobs(props, storybookBridge);
30+
config.has = tools.autoContentKnobs(slots, storybookBridge);
31+
32+
config.slots = [{
33+
content: tools.customTag({
34+
tag: "div",
35+
attributes: {
36+
"pfe-markdown-container": true
37+
},
38+
content: config.has.default
39+
})
40+
}];
41+
42+
let rendered = template(config);
43+
return tools.preview(rendered);
44+
});

0 commit comments

Comments
 (0)