| @@ -1,21 +1,32 @@ | ||
| 1 | +import { Cta } from '../Cta'; | |
| 2 | +import { cardVariables, colorsOf } from '../colors'; | |
| 1 | 3 | import { DismissButton } from '../DismissButton'; |
| 2 | -import { externalLinkProps } from '../notification-link'; | |
| 3 | 4 | |
| 4 | -export const Card = ({ notification, href, external, onDismiss, onClick }) => { | |
| 5 | +export const Card = ({ | |
| 6 | + notification, | |
| 7 | + href, | |
| 8 | + external, | |
| 9 | + dismissible, | |
| 10 | + onDismiss, | |
| 11 | + onClick, | |
| 12 | +}) => { | |
| 5 | 13 | const { title, content, image } = notification; |
| 6 | - const ctaLabel = notification['cta-label']; | |
| 14 | + const colors = colorsOf(notification); | |
| 7 | 15 | |
| 8 | 16 | return ( |
| 9 | 17 | <div |
| 10 | - className="relative h-full min-h-32 w-full rounded-sm border border-[#d1d5db] bg-white px-5 py-5 text-base text-gray-900 lg:px-8 lg:py-6" | |
| 18 | + className="relative h-full min-h-32 w-full rounded-sm border border-[#d1d5db] bg-(--ext-notification-card-main,#ffffff) px-5 py-5 text-base text-(--ext-notification-card-text,#1e1e1e) lg:px-8 lg:py-6" | |
| 19 | + style={cardVariables(colors)} | |
| 11 | 20 | data-test="notification-card" |
| 12 | 21 | > |
| 13 | - <DismissButton | |
| 14 | - onClick={onDismiss} | |
| 15 | - size={32} | |
| 16 | - className="absolute right-0 top-0 flex h-8 w-8 items-center justify-center rounded-bl rounded-se bg-[#f3f4f6] p-1.5 text-center text-gray-900 hover:bg-[#d1d5db] rtl:left-0 rtl:right-auto rtl:rounded-bl-none rtl:rounded-br" | |
| 17 | - /> | |
| 22 | + {dismissible && ( | |
| 23 | + <DismissButton | |
| 24 | + onClick={onDismiss} | |
| 25 | + size={32} | |
| 26 | + className="absolute right-0 top-0 flex h-8 w-8 items-center justify-center rounded-bl rounded-se bg-[#f3f4f6] p-1.5 text-center text-gray-900 hover:bg-[#d1d5db] rtl:left-0 rtl:right-auto rtl:rounded-bl-none rtl:rounded-br" | |
| 27 | + /> | |
| 28 | + )} | |
| 18 | 29 | <div className="flex flex-col items-start gap-4"> |
| 19 | 30 | {image && ( |
| 20 | 31 | <img src={image} alt="" className="max-h-8 w-auto rounded-xs" /> |
| 21 | 32 | )} |
| @@ -22,18 +33,16 @@ | ||
| 22 | 33 | <div> |
| 23 | 34 | <div className="text-lg font-semibold">{title}</div> |
| 24 | 35 | <div className="mt-1 text-sm">{content}</div> |
| 25 | 36 | </div> |
| 26 | - {ctaLabel && href && ( | |
| 27 | - <a | |
| 28 | - href={href} | |
| 29 | - {...externalLinkProps(external)} | |
| 30 | - onClick={onClick} | |
| 31 | - className="inline-flex h-10 cursor-pointer items-center rounded-xs bg-design-main px-4 text-sm text-design-text no-underline hover:opacity-90" | |
| 32 | - > | |
| 33 | - {ctaLabel} | |
| 34 | - </a> | |
| 35 | - )} | |
| 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 | + /> | |
| 36 | 45 | </div> |
| 37 | 46 | </div> |
| 38 | 47 | ); |
| 39 | 48 | }; |
