fix: pfe-readtime word count calculation (#1537)

alazzara · github-actions[bot] · [ Cassondra ] · web-flow · commit 48b3c305367d · 2021-04-15T11:50:08.000-04:00
* 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 &lt;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 ] &lt;castastrophe@users.noreply.github.com&gt;

* Update elements/pfe-readtime/README.md

Co-authored-by: [ Cassondra ] &lt;castastrophe@users.noreply.github.com&gt;

* 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 &amp; attributes

* update changelogs

* Update baselines

* add test for templateString

* update templateString test name

* Update tests

* Revert clipboard update

* Update storybook

* Fix template error

* Update readme

* remove 1 test

* replace wordcunt logic with a more accurate regex

* fix js and minor updates to demos

* Update elements/pfe-readtime/src/pfe-readtime.js

Co-authored-by: [ Cassondra ] &lt;castastrophe@users.noreply.github.com&gt;

* Update elements/pfe-readtime/src/pfe-readtime.js

Co-authored-by: [ Cassondra ] &lt;castastrophe@users.noreply.github.com&gt;

* branch feedback and updates to demo page

Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;
Co-authored-by: [ Cassondra ] &lt;carobert@redhat.com&gt;
Co-authored-by: [ Cassondra ] &lt;castastrophe@users.noreply.github.com&gt;
Co-authored-by: heyMP &lt;mgp140@gmail.com&gt;
diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md
@@ -1,3 +1,7 @@
+# 1.5.1 (2021-04-15)
+
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: adjust word-count calculation on pfe-readtime
+
 # 1.5.0 (2021-04-14)
 
 - [a1e4b67](https://github.com/patternfly/patternfly-elements/commit/a1e4b67ac012f5987e6cddf2cc7b532a135fa989) feat: Add CSS variable support for typography & background colors on tabs
diff --git a/elements/pfe-readtime/demo/demo.css b/elements/pfe-readtime/demo/demo.css
@@ -17,11 +17,6 @@ h3.custom-band-summary {
 [data-padding="30"] {
   padding: 30px;
 }
-.cards {
-  display: grid;
-  grid-auto-flow: column;
-  grid-gap: 15px;
-}
 .card {
   border: 1px solid #ddd;
   border-radius: 3px;
diff --git a/elements/pfe-readtime/demo/index.html b/elements/pfe-readtime/demo/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="es">
+<html lang="en">
 
 <head>
   <meta charset="utf-8">
@@ -83,7 +83,7 @@ <h3><code>lang</code> attribute</h3>
     <section class="readtime-section" word-count="1600" id="readtime1">
       <pfe-band color="lightest">
         <header slot="pfe-band--header">
-          <h2>This is pfe-readtime with a given word-count.</h2>
+          <h2>This is pfe-readtime with a given word-count of 1600.</h2>
           <h3 class="custom-band-summary">This component gets the readtime from the 'word-count' data attribute's given
             value. </h3>
         </header>
@@ -251,7 +251,7 @@ <h4>This is another header</h4>
   <!-- Example 3 -->
   <div class="container" data-padding="30">
 
-    <pfe-readtime for="readtime3" lang="en">-minute readtime</pfe-readtime>
+    <pfe-readtime for="readtime3">-minute readtime</pfe-readtime>
 
     <section class="readtime-section" word-count="0" id="readtime3">
       <pfe-band color="lightest">
@@ -272,7 +272,7 @@ <h4>This is a header</h4>
             esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
             qui officia deserunt mollit anim id est laborum.</p>
 
-          <div class="cards">
+          <div class="pfe-l-grid pfe-m-gutters pfe-m-all-4-col">
             <div class="card" data-padding="30">
               <h5>Card 1</h5>
               <ul>
diff --git a/elements/pfe-readtime/package.json b/elements/pfe-readtime/package.json
@@ -53,7 +53,6 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@patternfly/pfelement": "^1.5.0",
-    "gh-pages": "^2.2.0"
+    "@patternfly/pfelement": "^1.5.0"
   }
 }
diff --git a/elements/pfe-readtime/src/pfe-readtime.js b/elements/pfe-readtime/src/pfe-readtime.js
@@ -23,6 +23,7 @@ function getEstimatedWPM(language) {
       return 228;
   }
 }
+
 class PfeReadtime extends PFElement {
   static get tag() {
     return "pfe-readtime";
@@ -51,14 +52,6 @@ class PfeReadtime extends PFElement {
 
   static get properties() {
     return {
-      _lang: {
-        title: "Language of content",
-        type: String,
-        attr: "lang",
-        enum: ["en", "ko", "zh", "fr", "ja", "de", "it", "pt-br", "es"],
-        default: () => document.documentElement.lang || "en",
-        observer: "_langChangedHandler"
-      },
       wpm: {
         title: "Words per minute",
         type: Number,
@@ -80,6 +73,14 @@ class PfeReadtime extends PFElement {
         default: el => el.textContent.trim() || "%t-minute readtime",
         observer: `render`
       },
+      _lang: {
+        title: "Language of content",
+        type: String,
+        attr: "lang",
+        enum: ["en", "ko", "zh", "fr", "ja", "de", "it", "pt-br", "es"],
+        default: () => document.documentElement.lang || "en",
+        observer: `_langChangedHandler`
+      },
       for: {
         title: "Element containing content",
         //This is the unique selector of the target
@@ -138,7 +139,7 @@ class PfeReadtime extends PFElement {
           this.wordCount = Number(wcAttr);
         }
       } else if (target.textContent.trim()) {
-        this.wordCount = target.textContent.trim().split(" ").length;
+        this.wordCount = target.textContent.split(/\b\w+\b/).length;
       }
 
       // If a new target element is identified, re-render

Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,6 @@`
`53`	`53`	`],`
`54`	`54`	`"license": "MIT",`
`55`	`55`	`"dependencies": {`
`56`		`- "@patternfly/pfelement": "^1.5.0",`
`57`		`- "gh-pages": "^2.2.0"`
	`56`	`+ "@patternfly/pfelement": "^1.5.0"`
`58`	`57`	`}`
`59`	`58`	`}`