Skip to content

Commit bdc14f7

Browse files
alazzaragithub-actions[bot][ Cassondra ]castastropheheyMP
authored
feat: pfe-readtime (#1510)
* cleaned up code and tied it all together * fix word-count calculation functionality * Updating readtime calculation to be based on the average readtime of supported countries * update demo page styles as well as add language code functionality * remove some css * demo page updates * Pair programming * WIP updates for multiple calls to functions from observers. * fix JS * fix for -forChangedHandler * update pfe-readtim_test * Update JS to not show pfe-readtime if the calculated readtime is <1 minute and update demo page to show this example in action. * Update elements/pfe-readtime/demo/pfe-readtime.story.js Co-authored-by: [ Cassondra ] <[email protected]> * Update elements/pfe-readtime/README.md Co-authored-by: [ Cassondra ] <[email protected]> * some code review feedback items * update vue and react test.html files * code review updates * update readme * add var for font size * WIP: AT updates * clean up test.html * fix: added setup element references to readtime element * fixes for lang fuctionality * cleanup of lang code functionality * WIP: fix hidding readtime if there is no value * Adding in getters & attributes * update changelogs * Update baselines * add test for templateString * update templateString test name * Update tests * Revert clipboard update * Update storybook * Fix template error Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: [ Cassondra ] <[email protected]> Co-authored-by: [ Cassondra ] <[email protected]> Co-authored-by: heyMP <[email protected]>
1 parent 90acada commit bdc14f7

23 files changed

+1527
-1
lines changed

‎CHANGELOG-1.x.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
# 1.5.0 (TBD)
22

33
- [a1e4b67](https://github.com/patternfly/patternfly-elements/commit/a1e4b67ac012f5987e6cddf2cc7b532a135fa989) feat: Add CSS variable support for typography & background colors on tabs
4-
- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Updated CSS to allow CSS custom properties to override dynamically calculated theme context
4+
- [84cb0b1](https://github.com/patternfly/patternfly-elements/commit/84cb0b1ea257a33dc28954367e82771bb3e17a52) fix: Updated CSS to allow CSS custom properties to override dynamically calculated theme context
5+
- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add a new readtime component to display estimated time to read content
6+
57

68
# 1.4.0 (2021-03-30)
79

‎elements/pfe-readtime/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-readtime/README.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# PatternFly Element | Readtime element
2+
This component takes in the word count of a given section and does a calculation on that number to return an estimated read time based on language. The words-per-minute values were sourced from [this article](https://irisreading.com/average-reading-speed-in-various-languages) with the data originating from [this research](https://iovs.arvojournals.org/article.aspx?articleid=2166061). For more information, see the [Readtime calculation information](https://github.com/patternfly/patternfly-elements/blob/d6dcd30dd5398acb01bef7ca304b2bec7faf673e/elements/pfe-readtime/README.md#readtime-calculation-information) below.
3+
4+
## Usage
5+
6+
```html
7+
<pfe-readtime for="#readtime1" hidden>%t-minute readtime</pfe-readtime>
8+
```
9+
10+
### Accessibility
11+
This component functions purely as inline-content and does not require any focus state. Should be read by screen-readers inline with it's contextual content.
12+
13+
## Attributes
14+
15+
- `word-count`: Is the data-attribute you will leverage for readtime. Example: word-count="2500" will let the component know that there is 2500 words in that section and it will do it's calculations based on that number. If you don't want to/have a data-attribute to leverage you can use id="readtime1" and it will get the word count for you.
16+
-`wpm`: Is the attribute used to store the average words per minute readtime for each supported country. For more information on these you can read https://irisreading.com/average-reading-speed-in-various-languages and https://iovs.arvojournals.org/article.aspx?articleid=216606.
17+
- `template`: Rather than use the light DOM region to provide the string template, you can also pass in the value via this attribute. Note that %t will be replaced with the computed readtime.
18+
- `lang`: By default the component will look to the language specified on the html tag but it can also accept an override via this attribute on a component level.
19+
- `for`: Specify the selector of the content you want to capture the word-count from. Whatever you enter into this attribute will be found using `document.querySelector(<for attribute value>)`.
20+
21+
## Readtime calculation
22+
23+
Average read time by country is determined using the following research: https://irisreading.com/average-reading-speed-in-various-languages
24+
25+
Korean read time research:
26+
https://files.osf.io/v1/resources/xynwg/providers/osfstorage/5cb0b53ff2be3c0016ffe637?action=download&version=1&direct&format=pdf
27+
28+
TLDR:
29+
For Korean, we were able to locate 7 studies in five articles: 5 with silent reading and 2 with reading aloud. Silent reading rate was 226 wpm, reading aloud 133 wpm.
30+
31+
## Dependencies
32+
There are no dependencies for this web component.
33+
34+
## Dev
35+
36+
`npm start`
37+
38+
## Test
39+
40+
`npm run dev pfe-readtime`
41+
42+
## Build
43+
44+
`npm run build`
45+
46+
## Demo
47+
48+
From the PFElements root directory, run:
49+
50+
`npm run demo`
51+
52+
## Code style
53+
54+
Readtime (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.
55+
56+
[prettier]: https://github.com/prettier/prettier/
57+
[prettier-ed]: https://prettier.io/docs/en/editors.html
58+
[web-component-tester]: https://github.com/Polymer/web-component-tester

‎elements/pfe-readtime/demo/demo.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.container {
2+
margin: 0 auto;
3+
max-width: 1200px;
4+
}
5+
.container:not(:last-child) {
6+
border-bottom: 1px solid #ccc;
7+
}
8+
.readtime-section {
9+
margin-top: 20px;
10+
}
11+
h3.custom-band-summary {
12+
margin-bottom: 40px;
13+
}
14+
[data-background="gray"] {
15+
background-color: #f0f0f0;
16+
}
17+
[data-padding="30"] {
18+
padding: 30px;
19+
}
20+
.cards {
21+
display: grid;
22+
grid-auto-flow: column;
23+
grid-gap: 15px;
24+
}
25+
.card {
26+
border: 1px solid #ddd;
27+
border-radius: 3px;
28+
}

0 commit comments

Comments
 (0)