Merge pull request #159 from balena-io-modules/announcement-improvements

Remove mandatory link in the announcement component
balena-io-modules · Nov 21, 2024 · bbd3974 · bbd3974
2 parents 05fd994 + 2cd81ef
commit bbd3974
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 26 deletions.
diff --git a/src/components/Announcement/Announcement.stories.tsx b/src/components/Announcement/Announcement.stories.tsx
@@ -14,15 +14,20 @@ export const Default: Story = {
 	args: {
 		open: true,
 		campaignId: 'storybook-test',
-		children: <>Discover everything we’ve done these past two months!</>,
+		children: (
+			<>
+				Discover what we&apos;ve been working on recently in our{' '}
+				<a>Product Roundup</a>.
+			</>
+		),
 		title: 'balena Cycle Round-Up',
-		linkLabel: "Check out this cycle's roundup!",
-		linkHref: 'https://blog.balena.io',
 		illustration: <img alt="" src="/images/logo-icon.svg" />,
 		onClose: () => {
 			console.log('click on close button');
 		},
 		sx: {
+			// force Snackbar relative positioning for the story
+			right: 'auto !important',
 			position: 'relative',
 		},
 	},

diff --git a/src/components/Announcement/index.tsx b/src/components/Announcement/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Typography } from '@mui/material';
 import type { SlideProps, SxProps } from '@mui/material';
 import {
 	Box,
@@ -10,9 +11,7 @@ import {
 } from '@mui/material';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faClose } from '@fortawesome/free-solid-svg-icons/faClose';
-import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare';
 import { shape } from '@balena/design-tokens';
-import { MUILinkWithTracking } from '../MUILinkWithTracking';
 import { IconButtonWithTracking } from '../IconButtonWithTracking';
 import { useEffect } from 'react';
 import { useAnalyticsContext } from '../../contexts/AnalyticsContext';
@@ -33,8 +32,6 @@ export interface AnnouncementProps {
 	children: React.ReactNode;
 	illustration?: React.ReactNode;
 	title: string;
-	linkHref: string;
-	linkLabel: string;
 	sx?: SxProps;
 }
 
@@ -59,7 +56,7 @@ const AnnouncementIllustration = styled('figure', {
 })(({ theme }) => ({
 	margin: 0,
 	maxWidth: 48,
-	minWidth: 32,
+	minWidth: 48,
 	[theme.breakpoints.up('sm')]: {
 		maxWidth: 72,
 	},
@@ -109,8 +106,6 @@ export const Announcement = React.forwardRef<HTMLDivElement, AnnouncementProps>(
 			campaignId,
 			children,
 			title,
-			linkHref,
-			linkLabel,
 			onClose,
 			open,
 			sx,
@@ -166,22 +161,7 @@ export const Announcement = React.forwardRef<HTMLDivElement, AnnouncementProps>(
 								<FontAwesomeIcon icon={faClose} />
 							</IconButtonWithTracking>
 						</AnnouncementTitle>
-						{children}
-						<MUILinkWithTracking
-							href={linkHref}
-							eventName="Announcement link clicked"
-							onClick={(e) => {
-								onClose?.(e, 'linkClick');
-							}}
-							eventProperties={{
-								campaign_id: campaignId,
-								href: linkHref,
-								label: linkLabel,
-							}}
-						>
-							{linkLabel}{' '}
-							<FontAwesomeIcon size="sm" icon={faArrowUpRightFromSquare} />
-						</MUILinkWithTracking>
+						<Typography>{children}</Typography>
 					</AnnouncementContent>
 				</AnnouncementRoot>
 			</Snackbar>