← All changes | src/Notifications/templates/Card.jsx +10 -23 3.1.6 → 3.2.2 View file →

		@@ -1,13 +1,7 @@
1		-import classNames from 'classnames';
2		-import {
3		- buttonHoverClasses,
4		- cardVariables,
5		- colorsOf,
6		- designButtonVariables,
7		-} from '../colors';
	1	+import { Cta } from '../Cta';
	2	+import { cardVariables, colorsOf } from '../colors';
8	3	import { DismissButton } from '../DismissButton';
9		-import { externalLinkProps } from '../notification-link';
10	4
11	5	export const Card = ({
12	6	notification,
13	7	href,
		@@ -16,9 +10,8 @@
16	10	onDismiss,
17	11	onClick,
18	12	}) => {
19	13	const { title, content, image } = notification;
20		- const ctaLabel = notification['cta-label'];
21	14	const colors = colorsOf(notification);
22	15
23	16	return (
24	17	<div
		@@ -40,22 +33,16 @@
40	33	<div>
41	34	<div className="text-lg font-semibold">{title}</div>
42	35	<div className="mt-1 text-sm">{content}</div>
43	36	</div>
44		- {ctaLabel && href && (
45		- <a
46		- href={href}
47		- {...externalLinkProps(external)}
48		- onClick={onClick}
49		- className={classNames(
50		- 'inline-flex h-10 cursor-pointer items-center rounded-xs bg-design-main px-4 text-sm text-design-text no-underline',
51		- buttonHoverClasses(colors),
52		- )}
53		- style={designButtonVariables(colors)}
54		- >
55		- {ctaLabel}
56		- </a>
57		- )}
	37	+ <Cta
	38	+ notification={notification}
	39	+ href={href}
	40	+ external={external}
	41	+ onClick={onClick}
	42	+ surface="design"
	43	+ className="inline-flex h-10 cursor-pointer items-center rounded-xs bg-design-main px-4 text-sm text-design-text no-underline"
	44	+ />
58	45	</div>
59	46	</div>
60	47	);
61	48	};