Replace tertiary Button with Anchor in NotificationBanner

sumup-oss · Dec 5, 2023 · 08ffa4c · 08ffa4c
1 parent 12624f7
commit 08ffa4c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 18 deletions.
diff --git a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.module.css b/packages/circuit-ui/components/NotificationBanner/NotificationBanner.module.css
@@ -65,24 +65,30 @@
   object-position: var(--notification-image-align);
 }
 
-.base .button {
-  padding-top: calc(var(--cui-spacings-bit) - var(--cui-border-width-kilo));
-  padding-bottom: calc(var(--cui-spacings-bit) - var(--cui-border-width-kilo));
+/* Keep in sync with the `.s` class in Button.module.css  */
+.base .button.s,
+.base .button.m {
+  --content-gap: var(--cui-spacings-bit);
+  --loader-diameter: 4px;
+  --loader-gap: 3px;
+  --loader-transform: scale(150%);
+
+  padding: calc(var(--cui-spacings-bit) - var(--cui-border-width-kilo))
+    calc(var(--cui-spacings-kilo) - var(--cui-border-width-kilo));
+  border-radius: 10px;
 }
 
 @media (min-width: 768px) {
-  .base .button.s {
-    padding-top: calc(var(--cui-spacings-bit) - var(--cui-border-width-kilo));
-    padding-bottom: calc(
-      var(--cui-spacings-bit) - var(--cui-border-width-kilo)
-    );
-  }
-
+  /* Keep in sync with the `.m` class in Button.module.css  */
   .base .button.m {
-    padding-top: calc(var(--cui-spacings-kilo) - var(--cui-border-width-kilo));
-    padding-bottom: calc(
-      var(--cui-spacings-kilo) - var(--cui-border-width-kilo)
-    );
+    --content-gap: var(--cui-spacings-byte);
+    --loader-diameter: 6px;
+    --loader-gap: 5px;
+    --loader-transform: scale(133%);
+
+    padding: calc(var(--cui-spacings-kilo) - var(--cui-border-width-kilo))
+      calc(var(--cui-spacings-giga) - var(--cui-border-width-kilo));
+    border-radius: var(--cui-border-radius-kilo);
   }
 }
 

diff --git a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.tsx b/packages/circuit-ui/components/NotificationBanner/NotificationBanner.tsx
@@ -26,6 +26,7 @@ import {
 
 import Button, { ButtonProps, legacyButtonSizeMap } from '../Button/index.js';
 import Headline from '../Headline/index.js';
+import Anchor, { AnchorProps } from '../Anchor/index.js';
 import Body from '../Body/index.js';
 import Image, { ImageProps } from '../Image/index.js';
 import CloseButton from '../CloseButton/index.js';
@@ -36,9 +37,9 @@ import { deprecate } from '../../util/logger.js';
 
 import classes from './NotificationBanner.module.css';
 
-type Action = ButtonProps & {
-  variant: 'primary' | 'tertiary';
-};
+type Action =
+  | (Omit<ButtonProps, 'variant'> & { variant: 'primary' })
+  | (Omit<AnchorProps, 'variant'> & { variant: 'tertiary' });
 
 type NotificationVariant = 'system' | 'promotional';
 
@@ -193,7 +194,14 @@ export const NotificationBanner = forwardRef<
             {headline}
           </Headline>
           <Body className={classes.body}>{body}</Body>
-          <Button className={clsx(classes.button, classes[size])} {...action} />
+          {action.variant === 'tertiary' ? (
+            <Anchor {...action} variant="highlight" />
+          ) : (
+            <Button
+              {...action}
+              className={clsx(action.className, classes.button, classes[size])}
+            />
+          )}
         </div>
         {image && image.src && <NotificationImage {...image} />}
         {onClose && closeButtonLabel && (