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

Comparing version 2.0.2 to 3.0.0

CHANGELOG.md

@@ -6,5 +6,6 @@ # Radio Schedule Changelog
 |---------|-------------|
+| 3.0.0 | [PR#3408](https://github.com/bbc/psammead/pull/3408) Use detokenizer to construct duration label |
 | 2.0.2 | [PR#3427](https://github.com/bbc/psammead/pull/3427) Updating tests with dependency bump |
 | 2.0.1 | [PR#3414](https://github.com/bbc/psammead/pull/3414) Talos - Bump Dependencies - @bbc/psammead-timestamp-container |
-| 2.0.0 | [PR#3377](https://github.com/bbc/psammead/pull/3377) Remove episodeTitle prop. In ProgramCard, generate episodeTitle with moment using startTime. |
+| 2.0.0 | [PR#3377](https://github.com/bbc/psammead/pull/3377) Remove episodeTitle prop. In ProgramCard, generate episodeTitle with moment using startTime |
 | 1.0.8 | [PR#3400](https://github.com/bbc/psammead/pull/3400) Talos - Bump Dependencies - @bbc/psammead-timestamp-container |
@@ -11,0 +12,0 @@ | 1.0.7 | [PR#3398](https://github.com/bbc/psammead/pull/3398) Talos - Bump Dependencies - @bbc/psammead-timestamp-container |

dist/index.js

@@ -72,3 +72,4 @@ "use strict";
       nextLabel = _ref2.nextLabel,
-      liveLabel = _ref2.liveLabel;
+      liveLabel = _ref2.liveLabel,
+      durationLabel = _ref2.durationLabel;
   var state = program.state,
@@ -79,4 +80,3 @@ startTime = program.startTime,
       summary = program.summary,
-      duration = program.duration,
-      durationLabel = program.durationLabel;
+      duration = program.duration;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StartTimeWrapper, null, /*#__PURE__*/_react.default.createElement(_StartTime.default, {
@@ -83,0 +83,0 @@ timestamp: startTime,

dist/ProgramCard/index.js

@@ -34,2 +34,6 @@ "use strict";
 
+var _psammeadDetokeniser = _interopRequireDefault(require("@bbc/psammead-detokeniser"));
+
+var _utilities2 = _interopRequireDefault(require("../utilities"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -231,13 +235,2 @@
 
-var getDurationFormat = function getDurationFormat(duration) {
-  var separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ':';
-  var timeSections = ['mm', 'ss'];
-
-  if (duration.includes('H')) {
-    timeSections.unshift('h');
-  }
-
-  return timeSections.join(separator);
-};
-
 var ProgramCard = function ProgramCard(_ref19) {
@@ -282,7 +275,6 @@ var dir = _ref19.dir,
     dateTime: duration
-  }, /*#__PURE__*/_react.default.createElement(_psammeadVisuallyHiddenText.default, null, " ".concat(durationLabel, " ").concat((0, _utilities.formatDuration)({
+  }, /*#__PURE__*/_react.default.createElement(_psammeadVisuallyHiddenText.default, null, " ".concat((0, _psammeadDetokeniser.default)(durationLabel, (0, _utilities2.default)({
     duration: duration,
-    format: getDurationFormat(duration, ','),
     locale: locale
-  }), " ")), /*#__PURE__*/_react.default.createElement(DurationTextWrapper, null, (0, _utilities.formatDuration)({
+  })), " ")), /*#__PURE__*/_react.default.createElement(DurationTextWrapper, null, (0, _utilities.formatDuration)({
     duration: duration,
@@ -301,2 +293,3 @@ locale: locale
   liveLabel: _propTypes.string.isRequired,
+  durationLabel: _propTypes.string.isRequired,
   startTime: _propTypes.number.isRequired,
@@ -314,3 +307,2 @@ timezone: _propTypes.string,
   dir: (0, _propTypes.oneOf)(['rtl', 'ltr']),
-  durationLabel: _propTypes.string.isRequired,
   duration: _propTypes.string.isRequired,
@@ -317,0 +309,0 @@ summary: _propTypes.string

dist/testHelpers/helper.js

@@ -35,3 +35,3 @@ "use strict";
       timezone = _TEXT_VARIANTS$servic.timezone;
-  var programDurationLabel = service === 'arabic' ? 'المدة الزمنية' : 'Duration';
+  var programDurationLabel = service === 'arabic' ? 'المدة الزمنية %duration%' : 'Duration %duration%';
   return stateTypes.map(function (state, index) {
@@ -59,3 +59,3 @@ return {
       _ref$durationLabel = _ref.durationLabel,
-      durationLabel = _ref$durationLabel === void 0 ? 'Duration' : _ref$durationLabel,
+      durationLabel = _ref$durationLabel === void 0 ? 'Duration %duration%' : _ref$durationLabel,
       _ref$startTime = _ref.startTime,
@@ -72,3 +72,3 @@ startTime = _ref$startTime === void 0 ? 1566914061212 : _ref$startTime,
       timezone = _TEXT_VARIANTS$servic2.timezone;
-  var programDurationLabel = dir === 'rtl' ? 'المدة الزمنية' : durationLabel;
+  var programDurationLabel = dir === 'rtl' ? 'المدة الزمنية %duration%' : durationLabel;
   var nextLabel = dir === 'rtl' ? 'مباشر' : 'NEXT';
@@ -113,2 +113,3 @@ var liveLabel = dir === 'rtl' ? 'مباشر' : 'LIVE';
   var liveLabel = dir === 'rtl' ? 'مباشر' : 'LIVE';
+  var durationLabel = dir === 'rtl' ? 'المدة الزمنية %duration%' : 'Duration %duration%';
   return /*#__PURE__*/_react.default.createElement(_index.default, {
@@ -122,2 +123,3 @@ schedules: getSchedule(selectedService, withLongSummary),
     liveLabel: liveLabel,
+    durationLabel: durationLabel,
     dir: dir
@@ -124,0 +126,0 @@ });

esm/index.js

@@ -53,3 +53,4 @@ 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); }
       nextLabel = _ref2.nextLabel,
-      liveLabel = _ref2.liveLabel;
+      liveLabel = _ref2.liveLabel,
+      durationLabel = _ref2.durationLabel;
   var state = program.state,
@@ -60,4 +61,3 @@ startTime = program.startTime,
       summary = program.summary,
-      duration = program.duration,
-      durationLabel = program.durationLabel;
+      duration = program.duration;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartTimeWrapper, null, /*#__PURE__*/React.createElement(StartTime, {
@@ -64,0 +64,0 @@ timestamp: startTime,

esm/ProgramCard/index.js

@@ -22,2 +22,4 @@ 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 { formatUnixTimestamp, formatDuration } from '@bbc/psammead-timestamp-container/utilities';
+import detokenise from '@bbc/psammead-detokeniser';
+import durationDictionary from '../utilities';
 var TitleWrapper = /*#__PURE__*/styled.span.withConfig({
@@ -195,13 +197,2 @@ displayName: "TitleWrapper",
 
-var getDurationFormat = function getDurationFormat(duration) {
-  var separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ':';
-  var timeSections = ['mm', 'ss'];
-
-  if (duration.includes('H')) {
-    timeSections.unshift('h');
-  }
-
-  return timeSections.join(separator);
-};
-
 var ProgramCard = function ProgramCard(_ref19) {
@@ -246,7 +237,6 @@ var dir = _ref19.dir,
     dateTime: duration
-  }, /*#__PURE__*/React.createElement(VisuallyHiddenText, null, " ".concat(durationLabel, " ").concat(formatDuration({
+  }, /*#__PURE__*/React.createElement(VisuallyHiddenText, null, " ".concat(detokenise(durationLabel, durationDictionary({
     duration: duration,
-    format: getDurationFormat(duration, ','),
     locale: locale
-  }), " ")), /*#__PURE__*/React.createElement(DurationTextWrapper, null, formatDuration({
+  })), " ")), /*#__PURE__*/React.createElement(DurationTextWrapper, null, formatDuration({
     duration: duration,
@@ -265,2 +255,3 @@ locale: locale
   liveLabel: string.isRequired,
+  durationLabel: string.isRequired,
   startTime: number.isRequired,
@@ -278,3 +269,2 @@ timezone: string,
   dir: oneOf(['rtl', 'ltr']),
-  durationLabel: string.isRequired,
   duration: string.isRequired,
@@ -281,0 +271,0 @@ summary: string

esm/testHelpers/helper.js

@@ -18,3 +18,3 @@ /* eslint-disable react/prop-types */
       timezone = _TEXT_VARIANTS$servic.timezone;
-  var programDurationLabel = service === 'arabic' ? 'المدة الزمنية' : 'Duration';
+  var programDurationLabel = service === 'arabic' ? 'المدة الزمنية %duration%' : 'Duration %duration%';
   return stateTypes.map(function (state, index) {
@@ -42,3 +42,3 @@ return {
       _ref$durationLabel = _ref.durationLabel,
-      durationLabel = _ref$durationLabel === void 0 ? 'Duration' : _ref$durationLabel,
+      durationLabel = _ref$durationLabel === void 0 ? 'Duration %duration%' : _ref$durationLabel,
       _ref$startTime = _ref.startTime,
@@ -55,3 +55,3 @@ startTime = _ref$startTime === void 0 ? 1566914061212 : _ref$startTime,
       timezone = _TEXT_VARIANTS$servic2.timezone;
-  var programDurationLabel = dir === 'rtl' ? 'المدة الزمنية' : durationLabel;
+  var programDurationLabel = dir === 'rtl' ? 'المدة الزمنية %duration%' : durationLabel;
   var nextLabel = dir === 'rtl' ? 'مباشر' : 'NEXT';
@@ -93,2 +93,3 @@ var liveLabel = dir === 'rtl' ? 'مباشر' : 'LIVE';
   var liveLabel = dir === 'rtl' ? 'مباشر' : 'LIVE';
+  var durationLabel = dir === 'rtl' ? 'المدة الزمنية %duration%' : 'Duration %duration%';
   return /*#__PURE__*/React.createElement(RadioSchedule, {
@@ -102,4 +103,5 @@ schedules: getSchedule(selectedService, withLongSummary),
     liveLabel: liveLabel,
+    durationLabel: durationLabel,
     dir: dir
   });
 };

package.json

 {
   "name": "@bbc/psammead-radio-schedule",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "main": "dist/index.js",
@@ -26,3 +26,4 @@ "module": "esm/index.js",
     "@bbc/psammead-styles": "^4.3.1",
-    "@bbc/psammead-timestamp-container": "^3.0.1"
+    "@bbc/psammead-timestamp-container": "^3.0.1",
+    "@bbc/psammead-detokeniser": "^1.0.0"
   },
@@ -29,0 +30,0 @@ "peerDependencies": {

README.md

@@ -26,3 +26,3 @@ # psammead-radio-schedule - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-radio-schedule%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-radio-schedule%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-radio-schedule)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-radio-schedule) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-radio-schedule)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-radio-schedule&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/radio-schedule--containing-image) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-radio-schedule.svg)](https://www.npmjs.com/package/@bbc/psammead-radio-schedule) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)
 | -------- | ---- | -------- | ------- | ------- |
-| schedules | array | yes | N/A | `[{ id: '1', state: 'live', stateLabel: 'Live', startTime: '1566914061212', link: 'www.bbc.co.uk', brandTitle: 'This is a brand title', episodeTitle: 'This is an episode title', summary: 'This is a summary', duration: '45:00', durationLabel: 'Duration'}]` |
+| schedules | array | yes | N/A | `[{ id: '1', state: 'live', stateLabel: 'Live', startTime: '1566914061212', link: 'www.bbc.co.uk', brandTitle: 'This is a brand title', episodeTitle: 'This is an episode title', summary: 'This is a summary', duration: '45:00', durationLabel: 'Duration %duration%'}]` |
 | service | string | yes | N/A | `'news'` |
@@ -32,2 +32,3 @@ | script | object | yes | N/A | `{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }` |
 | timezone | string | no | N/A | `'Europe/London'` |
+| durationLabel | string | yes | N/A | `'Duration %duration%'` |
 | liveLabel | string | yes | N/A | `'LIVE'` |
@@ -55,3 +56,3 @@ | nextLabel | string | yes | N/A | `'NEXT'` |
     duration: '45:00',
-    durationLabel: 'Duration',
+    durationLabel: 'Duration %duration%',
   },
@@ -82,3 +83,3 @@ ];
 | duration | string | yes | N/A | `'PT30M'` |
-| durationLabel | string | yes | N/A | `'duration'` |
+| durationLabel | string | yes | N/A | `'Duration %duration%'` |
 | state | string | yes | N/A | `'live'` |
@@ -112,3 +113,3 @@ | liveLabel | string | yes | N/A | `'LIVE'` |
   duration="PT30M"
-  durationLabel="duration"
+  durationLabel="Duration %duration%"
   state="live"
@@ -115,0 +116,0 @@ liveLabel="LIVE"

src/index.jsx

@@ -45,12 +45,5 @@ import React from 'react';
   liveLabel,
+  durationLabel,
 }) => {
-  const {
-    state,
-    startTime,
-    link,
-    brandTitle,
-    summary,
-    duration,
-    durationLabel,
-  } = program;
+  const { state, startTime, link, brandTitle, summary, duration } = program;
 
@@ -57,0 +50,0 @@ return (

src/ProgramCard/index.jsx

@@ -32,2 +32,4 @@ import React from 'react';
 } from '@bbc/psammead-timestamp-container/utilities';
+import detokenise from '@bbc/psammead-detokeniser';
+import durationDictionary from '../utilities';
 
@@ -218,10 +220,2 @@ const TitleWrapper = styled.span`
 
-const getDurationFormat = (duration, separator = ':') => {
-  const timeSections = ['mm', 'ss'];
-  if (duration.includes('H')) {
-    timeSections.unshift('h');
-  }
-  return timeSections.join(separator);
-};
-
 const ProgramCard = ({
@@ -280,7 +274,6 @@ dir,
         <VisuallyHiddenText>
-          {` ${durationLabel} ${formatDuration({
-            duration,
-            format: getDurationFormat(duration, ','),
-            locale,
-          })} `}
+          {` ${detokenise(
+            durationLabel,
+            durationDictionary({ duration, locale }),
+          )} `}
         </VisuallyHiddenText>
@@ -303,2 +296,3 @@ <DurationTextWrapper>
   liveLabel: string.isRequired,
+  durationLabel: string.isRequired,
   startTime: number.isRequired,
@@ -324,3 +318,2 @@ timezone: string,
   dir: oneOf(['rtl', 'ltr']),
-  durationLabel: string.isRequired,
   duration: string.isRequired,
@@ -327,0 +320,0 @@ summary: string,

src/testHelpers/helper.jsx

@@ -16,3 +16,3 @@ /* eslint-disable react/prop-types */
   const programDurationLabel =
-    service === 'arabic' ? 'المدة الزمنية' : 'Duration';
+    service === 'arabic' ? 'المدة الزمنية %duration%' : 'Duration %duration%';
 
@@ -39,3 +39,3 @@ return stateTypes.map((state, index) => ({
   duration = 'PT30M',
-  durationLabel = 'Duration',
+  durationLabel = 'Duration %duration%',
   startTime = 1566914061212,
@@ -47,3 +47,4 @@ displaySummary = boolean('show summary', true),
   ];
-  const programDurationLabel = dir === 'rtl' ? 'المدة الزمنية' : durationLabel;
+  const programDurationLabel =
+    dir === 'rtl' ? 'المدة الزمنية %duration%' : durationLabel;
   const nextLabel = dir === 'rtl' ? 'مباشر' : 'NEXT';
@@ -83,2 +84,4 @@ const liveLabel = dir === 'rtl' ? 'مباشر' : 'LIVE';
   const liveLabel = dir === 'rtl' ? 'مباشر' : 'LIVE';
+  const durationLabel =
+    dir === 'rtl' ? 'المدة الزمنية %duration%' : 'Duration %duration%';
 
@@ -94,2 +97,3 @@ return (
       liveLabel={liveLabel}
+      durationLabel={durationLabel}
       dir={dir}
@@ -96,0 +100,0 @@ />

No alert changes

Improved metrics

Total package byte prevSize

172361

increased by2.35%

Number of package files

28

increased by16.67%

Lines of code

2251

increased by4.45%

Number of lines in readme file

176

increased by0.57%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Added@bbc/psammead-detokeniser@^1.0.0

• + Added@bbc/psammead-detokeniser@1.0.7(transitive)