@bbc/psammead-radio-schedule - npm Package Compare versions

Comparing version 0.1.0-alpha.9 to 0.1.0-alpha.12

CHANGELOG.md

 # Radio Schedule Changelog
 
+<!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 0.1.0-alpha.12 | [PR#3132](https://github.com/bbc/psammead/pull/3132) Render correct hidden `startTime` in RadioSchedule component |
+| 0.1.0-alpha.11 | [PR#3151](https://github.com/bbc/psammead/pull/3151) Talos - Bump Dependencies - @bbc/psammead-timestamp-container |
+| 0.1.0-alpha.10 | [PR#3079](https://github.com/bbc/psammead/pull/3079) Format duration time for the ProgramCard |
 | 0.1.0-alpha.9 | [PR#3135](https://github.com/bbc/psammead/pull/3135) Talos - Bump Dependencies - @bbc/gel-foundations |
@@ -14,2 +18,1 @@ | 0.1.0-alpha.8 | [PR#3130](https://github.com/bbc/psammead/pull/3130) Apply program-card's link to start-time component |
 | 0.1.0-alpha.1 | [PR#2979](https://github.com/BBC-News/psammead/pull/2979) Initial creation of package. |
-

dist/index.js

@@ -68,5 +68,3 @@ "use strict";
       duration = program.duration,
-      durationLabel = program.durationLabel; // we should format the start-time here and pass the formatted start-time to the  program card
-
-  var formattedStartTime = 1566914061212;
+      durationLabel = program.durationLabel;
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(StartTimeWrapper, null, _react.default.createElement(_StartTime.default, {
@@ -88,6 +86,8 @@ timestamp: startTime,
     episodeTitle: episodeTitle,
-    startTime: formattedStartTime,
+    startTime: startTime,
     state: state,
     link: link,
-    stateLabel: stateLabel
+    stateLabel: stateLabel,
+    timezone: timezone,
+    locale: locale
   }));
@@ -94,0 +94,0 @@ };

dist/ProgramCard/index.js

@@ -267,4 +267,5 @@ "use strict";
   }, programStateConfig[state]), _react.default.createElement(IconWrapper, programStateConfig[state], _svgs.mediaIcons.audio), _react.default.createElement(DurationWrapper, {
-    dir: dir
-  }, _react.default.createElement(_psammeadVisuallyHiddenText.default, null, " ".concat(durationLabel, " ").concat(duration.replace(/:/g, ','), " ")), _react.default.createElement(DurationTextWrapper, null, duration))));
+    dir: dir,
+    dateTime: duration
+  }, _react.default.createElement(_psammeadVisuallyHiddenText.default, null, " ".concat(durationLabel, " ").concat((0, _utilities.formatDuration)(duration, 'mm,ss'), " ")), _react.default.createElement(DurationTextWrapper, null, (0, _utilities.formatDuration)(duration)))));
 };
@@ -271,0 +272,0 @@

dist/testHelpers/helper.js

@@ -44,3 +44,3 @@ "use strict";
       summary: withLongSummary && state === 'live' ? "".concat(longText, " ").concat(longText) : longText,
-      duration: '45:00',
+      duration: 'PT45M',
       durationLabel: 'Duration'
@@ -59,3 +59,3 @@ };
       _ref$duration = _ref.duration,
-      duration = _ref$duration === void 0 ? '30:00' : _ref$duration,
+      duration = _ref$duration === void 0 ? 'PT30M' : _ref$duration,
       _ref$durationLabel = _ref.durationLabel,
@@ -62,0 +62,0 @@ durationLabel = _ref$durationLabel === void 0 ? 'Duration' : _ref$durationLabel,

esm/index.js

@@ -50,5 +50,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
       duration = program.duration,
-      durationLabel = program.durationLabel; // we should format the start-time here and pass the formatted start-time to the  program card
-
-  var formattedStartTime = 1566914061212;
+      durationLabel = program.durationLabel;
   return React.createElement(React.Fragment, null, React.createElement(StartTimeWrapper, null, React.createElement(StartTime, {
@@ -70,6 +68,8 @@ timestamp: startTime,
     episodeTitle: episodeTitle,
-    startTime: formattedStartTime,
+    startTime: startTime,
     state: state,
     link: link,
-    stateLabel: stateLabel
+    stateLabel: stateLabel,
+    timezone: timezone,
+    locale: locale
   }));
@@ -76,0 +76,0 @@ };

esm/ProgramCard/index.js

@@ -20,3 +20,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';
-import { formatUnixTimestamp } from '@bbc/psammead-timestamp-container/utilities';
+import { formatUnixTimestamp, formatDuration } from '@bbc/psammead-timestamp-container/utilities';
 var CardWrapper =
@@ -234,4 +234,5 @@ /*#__PURE__*/
   }, programStateConfig[state]), React.createElement(IconWrapper, programStateConfig[state], mediaIcons.audio), React.createElement(DurationWrapper, {
-    dir: dir
-  }, React.createElement(VisuallyHiddenText, null, " ".concat(durationLabel, " ").concat(duration.replace(/:/g, ','), " ")), React.createElement(DurationTextWrapper, null, duration))));
+    dir: dir,
+    dateTime: duration
+  }, React.createElement(VisuallyHiddenText, null, " ".concat(durationLabel, " ").concat(formatDuration(duration, 'mm,ss'), " ")), React.createElement(DurationTextWrapper, null, formatDuration(duration)))));
 };
@@ -238,0 +239,0 @@

esm/testHelpers/helper.js

@@ -27,3 +27,3 @@ /* eslint-disable react/prop-types */
       summary: withLongSummary && state === 'live' ? "".concat(longText, " ").concat(longText) : longText,
-      duration: '45:00',
+      duration: 'PT45M',
       durationLabel: 'Duration'
@@ -42,3 +42,3 @@ };
       _ref$duration = _ref.duration,
-      duration = _ref$duration === void 0 ? '30:00' : _ref$duration,
+      duration = _ref$duration === void 0 ? 'PT30M' : _ref$duration,
       _ref$durationLabel = _ref.durationLabel,
@@ -45,0 +45,0 @@ durationLabel = _ref$durationLabel === void 0 ? 'Duration' : _ref$durationLabel,

package.json

 {
   "name": "@bbc/psammead-radio-schedule",
-  "version": "0.1.0-alpha.9",
+  "version": "0.1.0-alpha.12",
   "main": "dist/index.js",
@@ -25,3 +25,3 @@ "module": "esm/index.js",
     "@bbc/psammead-assets": "^2.13.0",
-    "@bbc/psammead-timestamp-container": "^2.7.2"
+    "@bbc/psammead-timestamp-container": "^2.7.5"
   },
@@ -28,0 +28,0 @@ "peerDependencies": {

README.md

@@ -81,3 +81,3 @@ # ⛔️ This is an alpha component ⛔️
 | episodeTitle | string | yes | N/A | `'29/01/1990'` |
-| duration | string | yes | N/A | `'30:00'` |
+| duration | string | yes | N/A | `'PT30M'` |
 | durationLabel | string | yes | N/A | `'duration'` |
@@ -111,3 +111,3 @@ | state | string | yes | N/A | `'live'` |
   episodeTitle="29/01/1990"
-  duration="30:00"
+  duration="PT30M"
   durationLabel="duration"
@@ -114,0 +114,0 @@ state="live"

src/index.jsx

@@ -43,5 +43,2 @@ import React from 'react';
 
-  // we should format the start-time here and pass the formatted start-time to the  program card
-  const formattedStartTime = 1566914061212;
-
   return (
@@ -68,6 +65,8 @@ <>
         episodeTitle={episodeTitle}
-        startTime={formattedStartTime}
+        startTime={startTime}
         state={state}
         link={link}
         stateLabel={stateLabel}
+        timezone={timezone}
+        locale={locale}
       />
@@ -74,0 +73,0 @@ </>

src/ProgramCard/index.jsx

@@ -27,3 +27,6 @@ import React from 'react';
 import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';
-import { formatUnixTimestamp } from '@bbc/psammead-timestamp-container/utilities';
+import {
+  formatUnixTimestamp,
+  formatDuration,
+} from '@bbc/psammead-timestamp-container/utilities';
 
@@ -236,7 +239,7 @@ const CardWrapper = styled.div`
       </IconWrapper>
-      <DurationWrapper dir={dir}>
+      <DurationWrapper dir={dir} dateTime={duration}>
         <VisuallyHiddenText>
-          {` ${durationLabel} ${duration.replace(/:/g, ',')} `}
+          {` ${durationLabel} ${formatDuration(duration, 'mm,ss')} `}
         </VisuallyHiddenText>
-        <DurationTextWrapper>{duration}</DurationTextWrapper>
+        <DurationTextWrapper>{formatDuration(duration)}</DurationTextWrapper>
       </DurationWrapper>
@@ -243,0 +246,0 @@ </ButtonWrapper>

src/ProgramCard/index.test.jsx

@@ -21,3 +21,3 @@ import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
       stateLabel: 'مباشر',
-      duration: '30:00',
+      duration: 'PT30M',
       durationLabel: 'المدة الزمنية',
@@ -24,0 +24,0 @@ service: 'arabic',

src/testHelpers/helper.jsx

@@ -31,3 +31,3 @@ /* eslint-disable react/prop-types */
         : longText,
-    duration: '45:00',
+    duration: 'PT45M',
     durationLabel: 'Duration',
@@ -42,3 +42,3 @@ }));
   episodeTitle = '29/01/1990',
-  duration = '30:00',
+  duration = 'PT30M',
   durationLabel = 'Duration',
@@ -45,0 +45,0 @@ startTime = 1566914061212,

No alert changes

Improved metrics

Total package byte prevSize

144846

0.41%

Lines of code

2044

0.39%

Dependency changes

• Updated

  @bbc/psammead-timestamp-container@^2.7.5