Add beta badge and callout

guardian · Feb 20, 2025 · e535d6f · e535d6f
1 parent f202256
commit e535d6f
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/newswires/client/src/App.tsx b/newswires/client/src/App.tsx
@@ -1,4 +1,6 @@
 import {
+	EuiBadge,
+	EuiBetaBadge,
 	EuiButton,
 	EuiEmptyPrompt,
 	EuiHeader,
@@ -9,6 +11,7 @@ import {
 	EuiProvider,
 	EuiResizableContainer,
 	EuiShowFor,
+	EuiSpacer,
 	EuiTitle,
 	EuiToast,
 } from '@elastic/eui';
@@ -103,6 +106,14 @@ export function App() {
 											>
 												Newswires
 											</EuiLink>
+											<EuiBetaBadge
+												label="Beta"
+												color={'accent'}
+												size="s"
+												css={css`
+													margin-left: 8px;
+												`}
+											></EuiBetaBadge>
 										</h1>
 									</EuiTitle>
 								</EuiHeaderSectionItem>

diff --git a/newswires/client/src/SideNav.tsx b/newswires/client/src/SideNav.tsx
@@ -1,6 +1,8 @@
 import {
+	EuiAccordion,
 	EuiBadge,
 	EuiBadgeGroup,
+	EuiCallOut,
 	EuiCollapsibleNav,
 	EuiCollapsibleNavGroup,
 	EuiHeaderSectionItemButton,
@@ -239,6 +241,22 @@ export const SideNav = () => {
 						onChange={toggleAutoUpdate}
 					/>
 				</div>
+				<div>
+					<EuiCallOut
+						title="Please use with caution"
+						iconType="iInCircle"
+						color="primary"
+					>
+						<p>
+							This is a beta product. Feedback or questions? We'd love to hear
+							from you at{' '}
+							<a href="mailto:media.and.feeds@theguardian.com">
+								Media & Feeds team
+							</a>
+							.
+						</p>
+					</EuiCallOut>
+				</div>
 			</EuiCollapsibleNav>
 		</>
 	);

diff --git a/newswires/client/src/icons.ts b/newswires/client/src/icons.ts
@@ -17,11 +17,13 @@ import { icon as doubleArrowLeft } from '@elastic/eui/es/components/icon/assets/
 import { icon as empty } from '@elastic/eui/es/components/icon/assets/empty';
 import { icon as faceSad } from '@elastic/eui/es/components/icon/assets/face_sad';
 import { icon as heart } from '@elastic/eui/es/components/icon/assets/heart';
+import { icon as iInCircle } from '@elastic/eui/es/components/icon/assets/iInCircle';
 import { icon as launch } from '@elastic/eui/es/components/icon/assets/launch';
 import { icon as link } from '@elastic/eui/es/components/icon/assets/link';
 import { icon as menu } from '@elastic/eui/es/components/icon/assets/menu';
 import { icon as menuLeft } from '@elastic/eui/es/components/icon/assets/menuLeft';
 import { icon as menuRight } from '@elastic/eui/es/components/icon/assets/menuRight';
+import { icon as pin } from '@elastic/eui/es/components/icon/assets/pin_filled';
 import { icon as popout } from '@elastic/eui/es/components/icon/assets/popout';
 import { icon as refresh } from '@elastic/eui/es/components/icon/assets/refresh';
 import { icon as returnKey } from '@elastic/eui/es/components/icon/assets/return_key';
@@ -57,4 +59,6 @@ appendIconComponentCache({
 	link,
 	copyClipboard,
 	popout,
+	pin,
+	iInCircle,
 });