Merge branch 'latest' of github.com:bbc/psammead into fix-stories-bro…

…ken-for-variants
BBC-archive · Mar 25, 2020 · dc9bf16 · dc9bf16
2 parents 485ef5b + f2f0eb5
commit dc9bf16
Show file tree

Hide file tree

Showing 19 changed files with 149 additions and 200 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,7 +3,8 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
-| 2.0.110 | [PR#3291](https://github.com/bbc/psammead/pull/3291) Bump `@psammead-storybook-helpers` |
+| 2.0.111 | [PR#3291](https://github.com/bbc/psammead/pull/3291) Bump `@psammead-storybook-helpers` |
+| 2.0.110 | [PR#3264](https://github.com/bbc/psammead/pull/3264) Add @bbc/psammead-live-label to dependencies |
 | 2.0.109 | [PR#3292](https://github.com/bbc/psammead/pull/3292) Talos - Bump Dependencies - @bbc/psammead-navigation, @bbc/psammead-section-label |
 | 2.0.108 | [PR#3217](https://github.com/bbc/psammead/pull/3217) Add @loadable/component to devDependencies for @bbc/psammead-social-embed. |
 | 2.0.107 | [PR#3274](https://github.com/bbc/psammead/pull/3274) Talos - Bump Dependencies - @bbc/psammead-calendars, @bbc/psammead-timestamp-container |

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead",
-  "version": "2.0.110",
+  "version": "2.0.111",
   "description": "Core Components Library Developed & Maintained By The Articles and Reach & Languages Team",
   "main": "index.js",
   "private": true,
@@ -68,6 +68,7 @@
     "@bbc/psammead-image": "^1.2.4",
     "@bbc/psammead-image-placeholder": "^1.2.33",
     "@bbc/psammead-inline-link": "^1.3.20",
+    "@bbc/psammead-live-label": "^1.0.0",
     "@bbc/psammead-locales": "^4.1.4",
     "@bbc/psammead-media-indicator": "^4.0.4",
     "@bbc/psammead-media-player": "^2.7.5",

diff --git a/packages/components/psammead-bulletin/CHANGELOG.md b/packages/components/psammead-bulletin/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 3.0.1 | [PR#3264](https://github.com/bbc/psammead/pull/3264) Use `LiveLabel` component |
 | 3.0.0 | [PR#3208](https://github.com/bbc/psammead/pull/3208) Update live label usage, update major version of story promo |
 | 2.0.3 | [PR#3160](https://github.com/bbc/psammead/pull/3160) Refactor visually hidden state label |
 | 2.0.2 | [PR#3135](https://github.com/bbc/psammead/pull/3135) Talos - Bump Dependencies - @bbc/gel-foundations |

diff --git a/packages/components/psammead-bulletin/README.md b/packages/components/psammead-bulletin/README.md
@@ -19,6 +19,7 @@ npm install @bbc/psammead-bulletin --save
 | --------- | ---- | -------- | ------- | ------- |
 | `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', }, }, }` |
 | `service` | string | yes | N/A | `'pidgin'` |
+| `dir` | string | no | `'ltr'` | `One of ['rtl', 'ltr']` |
 | `image` | node | no | `null` | `<Image src={src} alt={alt} />` |
 | `type` | string | yes | N/A | `One of ['audio', 'video']` |
 | `ctaText` | string | yes | N/A | `Watch` |
@@ -27,9 +28,8 @@ npm install @bbc/psammead-bulletin --save
 | `headlineText` | string | yes | N/A  | `'Bulletin headline'` |
 | `isLive` | boolean | no | `false` | `true` |
 | `liveText` | string | no | `'Live'` | `'Localised Live'` |
-| `dir` | string | no | `'ltr'` | `One of ['rtl', 'ltr']` |
-| `lang` | string | no | `'en-GB'` | `'en-GB'` |
 | `offScreenText` | string | yes | N/A | `'Watch Live'` |
+| `lang` | string | no | `'en-GB'` | `'en-GB'` |
 
 ## Usage
 
@@ -43,9 +43,9 @@ const WrappingComponent = () => {
 
   return (
     <Bulletin
-      image={image}
-      service="news"
       script={latin}
+      service="news"
+      image={image}
       type="video"
       ctaLink="/cta"
       ctaText="Watch"

diff --git a/packages/components/psammead-bulletin/package-lock.json b/packages/components/psammead-bulletin/package-lock.json
diff --git a/packages/components/psammead-bulletin/package.json b/packages/components/psammead-bulletin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-bulletin",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
@@ -23,11 +23,12 @@
     "@bbc/psammead-styles": "^4.3.0",
     "@bbc/psammead-assets": "^2.13.0",
     "@bbc/psammead-visually-hidden-text": "^1.2.3",
-    "@bbc/psammead-story-promo": "^5.1.0"
+    "@bbc/psammead-story-promo": "^5.1.0",
+    "@bbc/psammead-live-label": "^1.0.0"
   },
   "peerDependencies": {
-    "react": "^16.10.2",
-    "styled-components": "^4.3.2",
+    "react": "^16.13.0",
+    "styled-components": "^4.4.1",
     "prop-types": "^15.7.2"
   }
 }
diff --git a/packages/components/psammead-bulletin/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-bulletin/src/__snapshots__/index.test.jsx.snap
@@ -336,7 +336,7 @@ exports[`Bulletin should render live audio correctly 1`] = `
   height: 0.75rem;
 }
 
-.c6 {
+.c7 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   -webkit-clip: rect(1px,1px,1px,1px);
@@ -348,6 +348,15 @@ exports[`Bulletin should render live audio correctly 1`] = `
   margin: 0;
 }
 
+.c6 {
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  color: #B80000;
+  display: inline-block;
+  margin-right: 0.5rem;
+}
+
 .c5 {
   position: static;
   color: #222222;
@@ -377,15 +386,6 @@ exports[`Bulletin should render live audio correctly 1`] = `
   color: #6E6E73;
 }
 
-.c7 {
-  font-family: ReithSans,Helvetica,Arial,sans-serif;
-  font-weight: 700;
-  font-style: normal;
-  color: #B80000;
-  display: inline-block;
-  margin-right: 0.5rem;
-}
-
 .c1 {
   vertical-align: top;
   display: inline-block;
@@ -601,21 +601,19 @@ exports[`Bulletin should render live audio correctly 1`] = `
           role="text"
         >
           <span
+            aria-hidden="true"
             class="c6"
-            lang="en-GB"
+            dir="ltr"
           >
-            Listen LIVE, 
+            LIVE 
           </span>
           <span
-            aria-hidden="true"
             class="c7"
-            dir="ltr"
+            lang="en-GB"
           >
-            LIVE 
-          </span>
-          <span>
-            This is the headline
+            Listen LIVE, 
           </span>
+          This is the headline
         </span>
       </a>
     </h3>
@@ -672,7 +670,7 @@ exports[`Bulletin should render live video correctly 1`] = `
   height: 0.75rem;
 }
 
-.c6 {
+.c7 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   -webkit-clip: rect(1px,1px,1px,1px);
@@ -684,6 +682,15 @@ exports[`Bulletin should render live video correctly 1`] = `
   margin: 0;
 }
 
+.c6 {
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  color: #B80000;
+  display: inline-block;
+  margin-right: 0.5rem;
+}
+
 .c5 {
   position: static;
   color: #222222;
@@ -713,15 +720,6 @@ exports[`Bulletin should render live video correctly 1`] = `
   color: #6E6E73;
 }
 
-.c7 {
-  font-family: ReithSans,Helvetica,Arial,sans-serif;
-  font-weight: 700;
-  font-style: normal;
-  color: #B80000;
-  display: inline-block;
-  margin-right: 0.5rem;
-}
-
 .c1 {
   vertical-align: top;
   display: inline-block;
@@ -940,21 +938,19 @@ exports[`Bulletin should render live video correctly 1`] = `
           role="text"
         >
           <span
+            aria-hidden="true"
             class="c6"
-            lang="en-GB"
+            dir="ltr"
           >
-            Watch LIVE, 
+            LIVE 
           </span>
           <span
-            aria-hidden="true"
             class="c7"
-            dir="ltr"
+            lang="en-GB"
           >
-            LIVE 
-          </span>
-          <span>
-            This is the headline
+            Watch LIVE, 
           </span>
+          This is the headline
         </span>
       </a>
     </h3>

diff --git a/packages/components/psammead-bulletin/src/index.jsx b/packages/components/psammead-bulletin/src/index.jsx
@@ -24,8 +24,9 @@ import {
   getLongPrimer,
 } from '@bbc/gel-foundations/typography';
 import { mediaIcons } from '@bbc/psammead-assets/svgs';
+import LiveLabel from '@bbc/psammead-live-label';
 import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';
-import { Link, LiveLabel } from '@bbc/psammead-story-promo';
+import { Link } from '@bbc/psammead-story-promo';
 import ImageGridItem from './ImageStyles';
 import TextGridItem from './TextStyles';
 
@@ -169,17 +170,17 @@ const PlayCTA = styled.div.attrs({ 'aria-hidden': true })`
 const Bulletin = ({
   script,
   service,
-  isLive,
-  headlineText,
-  summaryText,
+  dir,
   image,
   mediaType,
-  ctaText,
+  headlineText,
+  summaryText,
   ctaLink,
+  ctaText,
+  isLive,
   liveText,
-  dir,
-  lang,
   offScreenText,
+  lang,
 }) => {
   const isAudio = mediaType === 'audio';
   const bulletinType = isAudio ? 'radio' : 'tv';
@@ -198,20 +199,27 @@ const Bulletin = ({
           dir={dir}
         >
           <Link href={ctaLink}>
-            {/* eslint-disable jsx-a11y/aria-role */}
-            <span role="text">
-              {offScreenText && (
-                <VisuallyHiddenText lang={lang}>
-                  {`${offScreenText}, `}
-                </VisuallyHiddenText>
-              )}
-              {isLive && (
-                <LiveLabel service={service} dir={dir} ariaHidden>
-                  {`${liveText} `}
-                </LiveLabel>
-              )}
-              <span>{headlineText}</span>
-            </span>
+            {isLive ? (
+              <LiveLabel
+                service={service}
+                dir={dir}
+                liveText={liveText}
+                ariaHidden
+                offScreenText={offScreenText}
+              >
+                {headlineText}
+              </LiveLabel>
+            ) : (
+              // eslint-disable-next-line jsx-a11y/aria-role
+              <span role="text">
+                {offScreenText && (
+                  <VisuallyHiddenText lang={lang}>
+                    {`${offScreenText}, `}
+                  </VisuallyHiddenText>
+                )}
+                <span>{headlineText}</span>
+              </span>
+            )}
           </Link>
         </BulletinHeading>
         <BulletinSummary
@@ -239,25 +247,25 @@ const Bulletin = ({
 
 Bulletin.propTypes = {
   mediaType: oneOf(['video', 'audio']).isRequired,
-  isLive: bool,
   service: string.isRequired,
   script: shape(scriptPropType).isRequired,
+  dir: oneOf(['ltr', 'rtl']),
   ctaText: string.isRequired,
   ctaLink: string.isRequired,
   image: node,
   summaryText: string.isRequired,
   headlineText: string.isRequired,
+  isLive: bool,
   liveText: string,
-  dir: oneOf(['ltr', 'rtl']),
-  lang: string,
   offScreenText: string.isRequired,
+  lang: string,
 };
 
 Bulletin.defaultProps = {
-  isLive: false,
+  dir: 'ltr',
   image: null,
+  isLive: false,
   liveText: 'LIVE',
-  dir: 'ltr',
   lang: 'en-GB',
 };