Merge branch 'main' into ab/add-us-front-restriction

Author: abeddow91

fronts-client/src/components/OphanBanner.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import styled from 'styled-components';
+import { ConicalFlaskIcon } from './icons/Icons';
+import { theme } from 'constants/theme';
+import url from '../constants/url';
+
+const OphanBannerContainer = styled.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 6px;
+	background: ${({ theme }) => theme.abTest.active.background};
+	color: ${({ theme }) => theme.abTest.active.text};
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	padding: 10px 18px;
+	margin: 10px -14px -12px -14px;
+	font-size: 14px;
+`;
+
+const OphanBannerTitle = styled.span`
+	font-weight: 600;
+`;
+
+const OphanBannerLink = styled.a`
+	color: ${({ theme }) => theme.abTest.active.text};
+`;
+
+const OphanBanner = () => {
+	return (
+		<OphanBannerContainer role="status">
+			<ConicalFlaskIcon size="xs" fill={theme.abTest.active.icon} />
+			<OphanBannerTitle>Headline Test In Progress :</OphanBannerTitle>
+			<span>
+				View results in{' '}
+				<OphanBannerLink
+					href={url.ophan}
+					target="_blank"
+					rel="noreferrer noopener"
+					aria-label="View results in Ophan (opens in a new tab)"
+				>
+					Ophan
+				</OphanBannerLink>
+			</span>
+		</OphanBannerContainer>
+	);
+};
+
+export { OphanBanner };

fronts-client/src/components/inputs/HeadlineInput.tsx

@@ -5,6 +5,7 @@ import { RichTextInput } from './RichTextInput';
 import InputTextArea from './InputTextArea';
 import InputCheckboxToggleInline from './InputCheckboxToggleInline';
 import ConditionalField from './ConditionalField';
+import { OphanBanner } from '../OphanBanner';
 import styled from 'styled-components';
 import pageConfig from '../../util/extractConfigFromPage';
 import { normaliseHeadline } from '../../util/abTests';
@@ -135,6 +136,9 @@ const HeadlineInput = ({ ...props }: HeadlineInputProps) => {
 					data-testid="edit-form-headline-field"
 				/>
 			)}
+			{abTestFeatureEnabled && props.abTestEnabled && props.hasActiveABTest && (
+				<OphanBanner />
+			)}
 		</HeadlineInputContainer>
 	);
 };

fronts-client/src/constants/url.ts

@@ -45,4 +45,6 @@ export default {
 	liveUrlPROD: 'https://www.theguardian.com/',
 	emailLiveUrlCODE,
 	emailLiveUrlPROD,
+	//TODO: update to the correct url
+	ophan: 'https://dashboard.ophan.co.uk/',
 };