Scope product-callout and contributor-callout css to component (githu…

…b#20801)

* remove custom css for product-callout and contributor-callout

* create callout component, update existing test

* use Callout in more places

components/article/ArticlePage.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from 'components/hooks/useTranslation'
 import { LearningTrackNav } from './LearningTrackNav'
 import { ArticleContent } from './ArticleContent'
 import { ArticleGridLayout } from './ArticleGridLayout'
+import { Callout } from 'components/ui/Callout'
 
 export const ArticlePage = () => {
   const {
@@ -36,14 +37,14 @@ export const ArticlePage = () => {
               <ArticleTitle>{title}</ArticleTitle>
 
               {contributor && (
-                <div className="contributor-callout border rounded-1 mb-4 p-3 color-border-info color-bg-info f5">
+                <Callout variant="info" className="mb-3">
                   <p>
                     <span className="mr-2">
                       <InfoIcon />
                     </span>
                     {t('contributor_callout')} <a href={contributor.URL}>{contributor.name}</a>.
                   </p>
-                </div>
+                </Callout>
               )}
 
               {intro && <div className="lead-mktg" dangerouslySetInnerHTML={{ __html: intro }} />}
@@ -86,8 +87,9 @@ export const ArticlePage = () => {
               )}
 
               {product && (
-                <div
-                  className="product-callout border rounded-1 mb-4 p-3 color-border-success color-bg-success"
+                <Callout
+                  variant="success"
+                  className="mb-4"
                   dangerouslySetInnerHTML={{ __html: product }}
                 />
               )}

components/landing/TocLanding.tsx

@@ -7,6 +7,7 @@ import { ArticleContent } from 'components/article/ArticleContent'
 import { ArticleList } from 'components/landing/ArticleList'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { ArticleGridLayout } from 'components/article/ArticleGridLayout'
+import { Callout } from 'components/ui/Callout'
 
 export const TocLanding = () => {
   const { title, introPlainText, tocItems, productCallout, variant, featuredLinks, renderedPage } =
@@ -26,10 +27,7 @@ export const TocLanding = () => {
           </div>
 
           {productCallout && (
-            <div
-              className="product-callout border rounded-1 mb-4 p-3 color-border-success color-bg-success"
-              dangerouslySetInnerHTML={{ __html: productCallout }}
-            />
+            <Callout variant="success" dangerouslySetInnerHTML={{ __html: productCallout }} />
           )}
 
           <div className="border-bottom border-xl-0 pb-4 mb-5 pb-xl-2 mb-xl-2" />

components/page-header/DeprecationBanner.tsx

@@ -1,5 +1,6 @@
 import { useMainContext } from 'components/context/MainContext'
 import { useVersion } from 'components/hooks/useVersion'
+import { Callout } from 'components/ui/Callout'
 
 export const DeprecationBanner = () => {
   const { data, enterpriseServerReleases } = useMainContext()
@@ -15,8 +16,8 @@ export const DeprecationBanner = () => {
 
   return (
     <div data-testid="deprecation-banner" className="container-xl mt-3 mx-auto p-responsive">
-      <div className="border rounded-1 color-bg-warning p-3 color-border-warning f5">
-        <p className="m-0">
+      <Callout variant="warning">
+        <p>
           <b className="text-bold">
             <span dangerouslySetInnerHTML={{ __html: message }} />{' '}
             <span
@@ -34,7 +35,7 @@ export const DeprecationBanner = () => {
             }}
           />
         </p>
-      </div>
+      </Callout>
     </div>
   )
 }

components/ui/Callout.module.scss

@@ -0,0 +1,3 @@
+.container p {
+  margin: 0;
+}

components/ui/Callout.tsx

@@ -0,0 +1,28 @@
+import { DOMAttributes, ReactNode } from 'react'
+import cx from 'classnames'
+import styles from './Callout.module.scss'
+
+type Props = {
+  dangerouslySetInnerHTML?: DOMAttributes<HTMLDivElement>['dangerouslySetInnerHTML']
+  variant: 'success' | 'info' | 'warning'
+  children?: ReactNode
+  className?: string
+}
+export const Callout = ({ variant, className, dangerouslySetInnerHTML, children }: Props) => {
+  return (
+    <div
+      data-testid="callout"
+      className={cx(
+        className,
+        styles.container,
+        'border rounded-1 p-3 f5',
+        variant === 'success' && 'color-border-success color-bg-success',
+        variant === 'info' && 'color-border-info color-bg-info',
+        variant === 'warning' && 'color-bg-warning color-border-warning'
+      )}
+      dangerouslySetInnerHTML={dangerouslySetInnerHTML}
+    >
+      {children}
+    </div>
+  )
+}

stylesheets/headings.scss

@@ -42,8 +42,3 @@ h3 {
 .markdown-body .lead-mktg p {
   color: var(--color-auto-gray-9);
 }
-
-.product-callout p,
-.contributor-callout p {
-  margin: 0;
-}

tests/rendering/server.js

@@ -298,14 +298,13 @@ describe('server', () => {
 
   test('renders product frontmatter callouts', async () => {
     const $ = await getDOM('/en/articles/about-branch-restrictions')
-    const note = $('.product-callout').eq(0)
-    expect(note.hasClass('color-border-success')).toBe(true)
-    expect(note.hasClass('color-bg-success')).toBe(true)
+    const note = $('[data-testid=callout]').eq(0)
+    expect(note).toBeTruthy()
   })
 
   test('renders liquid within liquid within product frontmatter callouts', async () => {
     const $ = await getDOM('/en/articles/about-branch-restrictions')
-    const note = $('.product-callout').eq(0)
+    const note = $('[data-testid=callout]').eq(0)
     expect(
       note
         .first()