LiveLabel - remove withOffScreenText prop

packages/components/psammead-livel-label/CHANGELOG.md

@@ -3,4 +3,5 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 0.1.0-alpha.2 | [PR#3276](https://github.com/bbc/psammead/pull/3276) Remove `withOffScreenText` prop. |
 | 0.1.0-alpha.1 | [PR#3224](https://github.com/bbc/psammead/pull/3224) Initial creation of package. |

packages/components/psammead-livel-label/README.md

@@ -21,8 +21,7 @@ The `LiveLabel` component implements a span for use on live content.
 | dir               | string  | no       | `'ltr'`   | `'rtl'`                 |
 | ariaHidden        | bool    | no       | `false`   | `true`                  |
 | liveText          | string  | no       | `'LIVE'`  | `'Localised Live'`      |
-| withOffScreenText | boolean | no       | `false`   | `true`                  |
-| offScreenText     | string  | no       | `Live`    | `'Watch Live'`          |
+| offScreenText     | string  | no       | `null`    | `'Live'`          |
 | lang              | string  | no       | `'en-GB'` | `'en-GB'`               |
 | children          | node    | no       | `null`    | `<span>Headline</span>` |
 
@@ -37,7 +36,7 @@ import { latin } from '@bbc/gel-foundations/scripts';
 
 <Headline script={latin} service="news">
   <Link href="https://www.bbc.co.uk/news">
-    <LiveLabel service={service} dir={dir} ariaHidden withOffScreenText>
+    <LiveLabel service={service} dir={dir} ariaHidden offScreenText="Live">
       The headline of the live promo
     </LiveLabel>
   </Link>

packages/components/psammead-livel-label/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-live-label",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.2",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

packages/components/psammead-livel-label/src/index.jsx

@@ -23,7 +23,6 @@ const LiveLabel = ({
   dir,
   ariaHidden,
   liveText,
-  withOffScreenText,
   offScreenText,
   lang,
   children,
@@ -33,7 +32,7 @@ const LiveLabel = ({
     <StyledSpan service={service} dir={dir} ariaHidden={ariaHidden}>
       {`${liveText} `}
     </StyledSpan>
-    {withOffScreenText && (
+    {offScreenText && (
       <VisuallyHiddenText lang={lang}>
         {`${offScreenText}, `}
       </VisuallyHiddenText>
@@ -47,7 +46,6 @@ LiveLabel.propTypes = {
   dir: oneOf(['rtl', 'ltr']),
   ariaHidden: bool,
   liveText: string,
-  withOffScreenText: bool,
   offScreenText: string,
   lang: string,
   children: node,
@@ -57,8 +55,7 @@ LiveLabel.defaultProps = {
   dir: 'ltr',
   ariaHidden: false,
   liveText: 'LIVE',
-  withOffScreenText: false,
-  offScreenText: 'Live',
+  offScreenText: null,
   lang: 'en-GB',
   children: null,
 };

packages/components/psammead-livel-label/src/index.stories.jsx

@@ -17,7 +17,7 @@ storiesOf('Components/LiveLabel', module)
   .add(
     'with english live text',
     ({ service, dir }) => (
-      <LiveLabel service={service} dir={dir} ariaHidden withOffScreenText />
+      <LiveLabel service={service} dir={dir} ariaHidden offScreenText="Live" />
     ),
     {
       notes,
@@ -39,7 +39,6 @@ storiesOf('Components/LiveLabel', module)
         service={service}
         dir={dir}
         ariaHidden
-        withOffScreenText
         offScreenText="Watch Live"
       />
     ),
@@ -53,7 +52,12 @@ storiesOf('Components/LiveLabel', module)
       <Wrapper>
         <Headline script={script} service={service}>
           <Link href="https://www.bbc.co.uk/news">
-            <LiveLabel service={service} dir={dir} ariaHidden withOffScreenText>
+            <LiveLabel
+              service={service}
+              dir={dir}
+              ariaHidden
+              offScreenText="Live"
+            >
               {headline}
             </LiveLabel>
           </Link>

packages/components/psammead-livel-label/src/index.test.jsx

@@ -6,7 +6,7 @@ import LiveLabel from './index';
 describe('LiveLabel', () => {
   shouldMatchSnapshot(
     'should render correctly with english live text',
-    <LiveLabel service="news" ariaHidden withOffScreenText />,
+    <LiveLabel service="news" ariaHidden offScreenText="Live" />,
   );
 
   shouldMatchSnapshot(
@@ -16,16 +16,11 @@ describe('LiveLabel', () => {
 
   shouldMatchSnapshot(
     'should render correctly with custom offscreen text',
-    <LiveLabel
-      service="news"
-      ariaHidden
-      withOffScreenText
-      offScreenText="Watch Live"
-    />,
+    <LiveLabel service="news" ariaHidden offScreenText="Watch Live" />,
   );
 
   shouldMatchSnapshot(
     'should correctly render for RTL service',
-    <LiveLabel service={arabic} dir="rtl" ariaHidden withOffScreenText />,
+    <LiveLabel service={arabic} dir="rtl" ariaHidden offScreenText="Live" />,
   );
 });