Merge pull request #16339 from overleaf/jdt-ghost-offer-btn

adding new ad offering variants to ghost btn and notification

GitOrigin-RevId: 108e06cf53826ee6781fb57cd9f67fc7f3ef4655

services/web/frontend/js/shared/components/notification.tsx

@@ -3,7 +3,12 @@ import React, { ReactElement, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import MaterialIcon from './material-icon'
 
-export type NotificationType = 'info' | 'success' | 'warning' | 'error'
+export type NotificationType =
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'offer'
 
 type NotificationProps = {
   action?: React.ReactElement
@@ -35,8 +40,9 @@ function NotificationIcon({
     icon = <MaterialIcon type="warning" />
   } else if (notificationType === 'error') {
     icon = <MaterialIcon type="error" />
+  } else if (notificationType === 'offer') {
+    icon = <MaterialIcon type="campaign" />
   }
-
   return <div className="notification-icon">{icon}</div>
 }
 

services/web/frontend/stories/style-guide.stories.jsx

@@ -210,6 +210,12 @@ const ButtonsTemplate = (args, { globals: { theme } }) => {
                 <Button className="btn-danger-ghost" bsStyle={null}>
                   Danger Ghost
                 </Button>
+                <Button className="btn-info-ghost" bsStyle={null}>
+                  Info Ghost
+                </Button>
+                <Button className="btn-bg-ghost" bsStyle={null}>
+                  Background (bg) Ghost
+                </Button>
               </div>
 
               <h3>Sizes</h3>
@@ -287,6 +293,18 @@ export const Alerts = () => {
                 </div>
               }
             />
+
+            <Notification
+              type="offer"
+              body={
+                <div>
+                  <b>
+                    <code>.notitifcation .notification-type-offer</code>
+                  </b>
+                </div>
+              }
+            />
+
             <b>
               Note: these styles below will be deprecated since there are new
               alert styles rolling out as part of the new design system

services/web/frontend/stylesheets/components/buttons.less

@@ -103,6 +103,10 @@
 .btn-info-ghost {
   .btn-borderless(@blue-50, @btn-info-ghost-bg, @blue-10);
 }
+// Background Ghost appear as neutral-90 (matching our text colour) with no border
+.btn-bg-ghost {
+  .btn-borderless(@neutral-90, @btn-info-ghost-bg, @neutral-10);
+}
 // Inline button to fit text, without link styling.
 // TODO: generic class for other styles
 .btn-info-ghost-inline {

services/web/frontend/stylesheets/components/notifications.less

@@ -151,6 +151,13 @@
       color: @red-50;
     }
   }
+  &.notification-type-offer {
+    background-color: @white;
+    border: 1px solid @neutral-20;
+    .notification-icon {
+      color: @neutral-50;
+    }
+  }
 
   @media (min-width: @screen-sm-min) {
     &:not(.notification-cta-below-content) {