Merge pull request #11300 from bbc/live-label-primitive

Moves live label text and pulse to primitive components
bbc · Jan 13, 2025 · f31f9fa · f31f9fa
2 parents 82706e5 + 98deaef
commit f31f9fa
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 17 deletions.
diff --git a/src/app/components/Billboard/index.tsx b/src/app/components/Billboard/index.tsx
@@ -6,10 +6,11 @@ import useViewTracker from '#app/hooks/useViewTracker';
 import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
 import { EventTrackingMetadata } from '#app/models/types/eventTracking';
 import Heading from '../Heading';
-import LiveLabel from '../LiveLabel';
 import MaskedImage from '../MaskedImage';
 import styles from './index.styles';
 import Text from '../Text';
+import LivePulse from '../LivePulse';
+import LiveText from '../LiveText';
 
 interface BillboardProps {
   heading: string;
@@ -60,14 +61,14 @@ const Billboard = forwardRef(
                 >
                   {showLiveLabel ? (
                     <div data-testid="billboard-live-label">
-                      <LiveLabel.Pulse
+                      <LivePulse
                         width="24"
                         height="24"
                         css={styles.liveLabelPulse}
                       />
-                      <LiveLabel.Text css={styles.liveLabelText}>
+                      <LiveText css={styles.liveLabelText}>
                         <div>{heading}</div>
-                      </LiveLabel.Text>
+                      </LiveText>
                     </div>
                   ) : (
                     heading

diff --git a/src/app/components/LiveLabel/index.tsx b/src/app/components/LiveLabel/index.tsx
@@ -4,8 +4,8 @@ import React, { PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
 import { LiveLabelProps } from './types';
 import styles from './index.styles';
-import Text from './Text';
-import Pulse from './Pulse';
+import Text from '../LiveText';
+import Pulse from '../LivePulse';
 
 const LiveLabel = ({
   lang = 'en-GB',
@@ -29,7 +29,4 @@ const LiveLabel = ({
   );
 };
 
-LiveLabel.Text = Text;
-LiveLabel.Pulse = Pulse;
-
 export default LiveLabel;
diff --git a/...omponents/LiveLabel/Pulse/index.styles.ts → src/app/components/LivePulse/index.styles.ts b/...omponents/LiveLabel/Pulse/index.styles.ts → src/app/components/LivePulse/index.styles.ts
diff --git a/src/app/components/LiveLabel/Pulse/index.tsx → src/app/components/LivePulse/index.tsx b/src/app/components/LiveLabel/Pulse/index.tsx → src/app/components/LivePulse/index.tsx
@@ -2,7 +2,7 @@
 import { PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
 import styles from './index.styles';
-import { PulseProps } from '../types';
+import { PulseProps } from '../LiveLabel/types';
 
 const Pulse = ({ className, width, height }: PropsWithChildren<PulseProps>) => {
   return (

diff --git a/...components/LiveLabel/Text/index.styles.ts → src/app/components/LiveText/index.styles.ts b/...components/LiveLabel/Text/index.styles.ts → src/app/components/LiveText/index.styles.ts
diff --git a/src/app/components/LiveLabel/Text/index.tsx → src/app/components/LiveText/index.tsx b/src/app/components/LiveLabel/Text/index.tsx → src/app/components/LiveText/index.tsx
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import { PropsWithChildren, useContext } from 'react';
 import { jsx } from '@emotion/react';
-import VisuallyHiddenText from '../../VisuallyHiddenText';
-import { ServiceContext } from '../../../contexts/ServiceContext';
+import VisuallyHiddenText from '../VisuallyHiddenText';
+import { ServiceContext } from '../../contexts/ServiceContext';
 import styles from './index.styles';
-import { TextProps } from '../types';
+import { TextProps } from '../LiveLabel/types';
 
 const Text = ({
   lang = 'en-GB',

diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.tsx
@@ -2,7 +2,8 @@
 import { PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
 import { LiveLabelProps } from '#app/components/LiveLabel/types';
-import LiveLabel from '#app/components/LiveLabel';
+import LivePulse from '#app/components/LivePulse';
+import LiveText from '#app/components/LiveText';
 import styles from './index.styles';
 
 interface LiveLabelPromoProps extends LiveLabelProps {
@@ -19,13 +20,13 @@ const LiveLabelHeader = ({
 }: PropsWithChildren<LiveLabelPromoProps>) => {
   return (
     <div data-testid="live-label">
-      <LiveLabel.Pulse
+      <LivePulse
         className={className}
         width="24"
         height="24"
         css={styles.liveLabelPulse}
       />
-      <LiveLabel.Text
+      <LiveText
         lang={lang}
         id={id}
         offScreenText={offScreenText}
@@ -36,7 +37,7 @@ const LiveLabelHeader = ({
         }
       >
         {children}
-      </LiveLabel.Text>
+      </LiveText>
     </div>
   );
 };