feat: pfe-datetime adding time zone attribute (#881)

* feat: pfe-datetime adding time zone attribute

Closes #880

* changelog update

Author: kylebuch8

CHANGELOG-prerelease.md

@@ -1,3 +1,7 @@
+## Prerelease 48 ( TBD )
+
+- []() feat: pfe-datetime adding time zone attribute #881
+
 ## Prerelease 47 ( 2020-05-14 )
 
 - [0323eab](https://github.com/patternfly/patternfly-elements/commit/0323eab2d9dd944cb51dee263056566fe1a14a57) fix: pfe-navigtation-item shouldn't add duplicative event listeners #870

elements/pfe-datetime/demo/index.html

@@ -114,6 +114,15 @@ <h3>Local</h3>
           Mon Jan 2 15:04:05 EST 2006
         </pfe-datetime>
       </p>
+      <p>
+        <strong>With time zone</strong>
+        <pfe-datetime 
+          datetime="2019-05-07T00:00:00.000Z" 
+          time-zone="UTC" 
+          time-zone-name="short">
+          2019-05-07T00:00:00.000Z
+        </pfe-datetime>
+      </p>
     </div>
     <div>
       <h3>Time Adverbial</h3>

elements/pfe-datetime/demo/pfe-datetime.story.js

@@ -79,9 +79,18 @@ stories.add(PfeDatetime.tag, () => {
       enum: ["numeric", "2-digit"]
     },
     locale: {
-      title: "Timezone",
+      title: "Locale",
       type: "string",
       default: "en-US"
+    },
+    "time-zone": {
+      title: "Time Zone",
+      type: "string"
+    },
+    "time-zone-name": {
+      title: "Time Zone Name",
+      type: "string",
+      enum: ["short", "long"]
     }
   };
 
@@ -204,6 +213,23 @@ storiesOf("Datetime", module).add("Demo", () => {
             ${now}
           </pfe-datetime>
         </p>
+        <p>
+          <strong>With a time zone: </strong>
+          <pfe-datetime
+            datetime="${now}"
+            type="local"
+            weekday="long"
+            month="short"
+            day="2-digit"
+            year="numeric"
+            hour="2-digit"
+            minute="2-digit"
+            second="2-digit"
+            time-zone="UTC"
+            time-zone-name="short">
+            ${now}
+          </pfe-datetime>
+        </p>
       </section>
       <section>
         <h2>Time Adverbial</h2>

elements/pfe-datetime/src/pfe-datetime.js

@@ -114,12 +114,25 @@ class PfeDatetime extends PFElement {
     let options = {};
 
     for (const prop in props) {
-      const value = props[prop][this.getAttribute(prop)];
+      // converting the prop name from camel case to
+      // hyphenated so it matches the attribute.
+      // for example: timeZoneName to time-zone-name
+      let attributeName = prop
+        .replace(/[\w]([A-Z])/g, match => {
+          return match[0] + "-" + match[1];
+        })
+        .toLowerCase();
+
+      const value = props[prop][this.getAttribute(attributeName)];
       if (value) {
         options[prop] = value;
       }
     }
 
+    if (this.getAttribute("time-zone")) {
+      options.timeZone = this.getAttribute("time-zone");
+    }
+
     return options;
   }
 

elements/pfe-datetime/src/pfe-datetime.json

@@ -72,8 +72,12 @@
           "type": "string",
           "default": "en-US"
         },
-        "time_zone_name": {
+        "time_zone": {
           "title": "Time Zone",
+          "type": "string"
+        },
+        "time_zone_name": {
+          "title": "Time Zone Name",
           "type": "string",
           "enum": ["short", "long"]
         }

elements/pfe-datetime/test/pfe-datetime_test.html

@@ -87,6 +87,14 @@
       Mon Jan 2 15:04:05 EST 2006
     </pfe-datetime>
 
+    <pfe-datetime
+      id="withTimeZone"
+      datetime="Mon Jan 2 15:04:05 EST 2006"
+      time-zone="UTC"
+      time-zone-name="short">
+      Mon Jan 2 15:04:05 EST 2006
+    </pfe-datetime>
+
     <script>
       suite('<pfe-datetime>', () => {
         test('it should upgrade', () => {
@@ -138,6 +146,13 @@
 
           assert.equal(text, 'lunes, 02 de ene. de 2006', "should show a (locally) formatted date with time");
         });
+
+        test("it should show formatted date for a specified time zone", () => {
+          const element = document.getElementById("withTimeZone");
+          const text = element.shadowRoot.querySelector("span").textContent;
+
+          assert.equal(text, "1/2/2006, UTC", "should show a formatted date for a specified time zone");
+        });
       })
     </script>
   </body>