adding Kelvine and Rankin

holidayextras · Sep 10, 2015 · a6ba9bd · a6ba9bd
1 parent be47919
commit a6ba9bd
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 6 deletions.
diff --git a/docs/examples/Weather.jsx b/docs/examples/Weather.jsx
@@ -4,7 +4,7 @@ var example = (
     <UIToolkit.Weather type="partly-cloudy" temperature={17} unit="C" date="2016-07-26" />
     <UIToolkit.Weather type="cloudy" temperature={14} unit="F" date="2016-07-27" />
     <UIToolkit.Weather type="light-rain" temperature={10} unit="C" date="2016-07-28" format="dddd"/>
-    <UIToolkit.Weather type="heavy-rain" temperature={5} unit="C" date="2016-07-29 09:00" format="HH:mm" />
+    <UIToolkit.Weather type="heavy-rain" temperature={5} unit="C" date="2016-07-29T09:00" format="HH:mm" />
   </div>
 );
 

diff --git a/docs/src/Components.jsx b/docs/src/Components.jsx
@@ -218,8 +218,8 @@ var Components = React.createClass({
           <ul>
             <li><code>weather</code> String - The type of weather that is occuring. Can be <code>cloudy</code>, <code>fog</code>, <code>hail</code>, <code>heavy-rain</code>, <code>heavy-snow</code>, <code>light-rain</code>, <code>light-snow</code>, <code>night-clear</code>, <code>night-partly-cloudy</code>, <code>partly-cloudy</code>, <code>storm</code>, <code>sunny</code> or <code>windy</code> (more to come)</li>
             <li><code>temperature</code> Number - The current temperature</li>
-            <li><code>unit</code> String - The unit of measurement for temperature <code>C</code> (Celsius) or <code>F</code> (Fahrenheit)</li>
-            <li><code>date</code> String - The date of the weather you want displayed.</li>
+            <li><code>unit</code> String - The unit of measurement for temperature <code>C</code> (Celsius), <code>F</code> (Fahrenheit), <code>K</code> (Kelvin) or <code>R</code> (Rankine)</li>
+            <li><code>date</code> String - The date of the weather you want displayed passed in <a href="https://en.wikipedia.org/wiki/ISO_8601">ISO8601</a> format</li>
             <li><code>format</code> String - Date format required i.e <code>dddd</code>, <code>HH:mm</code> (default) etc</li>
           </ul>
           <small>We currently use a small sample of <a href="http://www.alessioatzeni.com/meteocons/" title="Meteocons">Meteocons</a></small>

diff --git a/src/components/weather/__tests__/weather-test.js b/src/components/weather/__tests__/weather-test.js
@@ -212,6 +212,26 @@ describe('WeatherComponent', function() {
       var renderedWeather = TestUtils.scryRenderedDOMComponentsWithTag(weatherTemp, 'div')[2];
       assert.equal(renderedWeather.getDOMNode().textContent, '20°F');
     });
+
+    it('displays temperature in Rankine', function() {
+
+      var weatherTemp = TestUtils.renderIntoDocument(
+        <WeatherComponent type={type} temperature={temperature} unit="R"/>
+      );
+
+      var renderedWeather = TestUtils.scryRenderedDOMComponentsWithTag(weatherTemp, 'div')[2];
+      assert.equal(renderedWeather.getDOMNode().textContent, '20°R');
+    });
+
+    it('displays temperature in Kelvin', function() {
+
+      var weatherTemp = TestUtils.renderIntoDocument(
+        <WeatherComponent type={type} temperature={temperature} unit="K"/>
+      );
+
+      var renderedWeather = TestUtils.scryRenderedDOMComponentsWithTag(weatherTemp, 'div')[2];
+      assert.equal(renderedWeather.getDOMNode().textContent, '20K');
+    });
   });
 
 });
diff --git a/src/components/weather/code/templates/weatherTemplate.jsx b/src/components/weather/code/templates/weatherTemplate.jsx
@@ -3,14 +3,18 @@ var React = require('react');
 
 module.exports = function() {
 
-  var expectedFormat = ['YYYY-MM-DD', 'YYYY-MM-DD HH:mm'];
+  var expectedFormat = ['YYYY-MM-DD', 'YYYY-MM-DDTHH:mm'];
   var displayFormat = this.props.format || 'ddd';
   var date = this.props.date;
+  var unit = this.props.unit;
+  if(this.props.unit !== 'K') {
+    unit = '°' + unit;
+  }
 
   return (
     <div className="component-weather" itemScope itemType="http://schema.org/QuantitativeValue">
       <div className={this.props.type}>{this.props.type}</div>
-      {(this.props.temperature) ? <div>{this.props.temperature}<span>&deg;{this.props.unit}</span></div> : null}
+      {(this.props.temperature) ? <div>{this.props.temperature}<span>{unit}</span></div> : null}
       {(this.props.date) ? <div>{moment(date, expectedFormat, true).format(displayFormat)}</div> : null}
     </div>
   );

diff --git a/src/components/weather/code/views/weatherView.jsx b/src/components/weather/code/views/weatherView.jsx
@@ -5,7 +5,7 @@ module.exports = React.createClass({
     type: React.PropTypes.oneOf(['cloudy', 'fog', 'hail', 'heavy-rain', 'heavy-snow', 'light-rain', 'light-snow', 'night-clear', 'night-partly-cloudy', 'partly-cloudy', 'storm', 'sunny', 'windy']).isRequired,
     temperature: React.PropTypes.number,
     date: React.PropTypes.string,
-    unit: React.PropTypes.oneOf(['C', 'F'])
+    unit: React.PropTypes.oneOf(['C', 'F', 'K', 'R'])
   },
 
   render: function() {