feat(v2): add isCloseable property for theme-classic announcement bar (#3388)

* feat(v2): add `isCloseable` property for announcement bar

* correct styling for non-closeable announcement

* fix tests

packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js

@@ -41,6 +41,7 @@ describe('themeConfig', () => {
         content: 'pls support',
         backgroundColor: '#fff',
         textColor: '#000',
+        isCloseable: true,
       },
       image: 'img/docusaurus-soc.png',
       navbar: {

packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
 
@@ -15,13 +16,13 @@ function AnnouncementBar(): JSX.Element | null {
   const {
     siteConfig: {themeConfig: {announcementBar = {}} = {}} = {},
   } = useDocusaurusContext();
-  const {content, backgroundColor, textColor} = announcementBar;
+  const {content, backgroundColor, textColor, isCloseable} = announcementBar;
   const {
     isAnnouncementBarClosed,
     closeAnnouncementBar,
   } = useUserPreferencesContext();
 
-  if (!content || isAnnouncementBarClosed) {
+  if (!content || (isCloseable && isAnnouncementBarClosed)) {
     return null;
   }
 
@@ -31,19 +32,22 @@ function AnnouncementBar(): JSX.Element | null {
       style={{backgroundColor, color: textColor}}
       role="banner">
       <div
-        className={styles.announcementBarContent}
+        className={clsx(styles.announcementBarContent, {
+          [styles.announcementBarCloseable]: isCloseable,
+        })}
         // Developer provided the HTML, so assume it's safe.
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{__html: content}}
       />
-
+      {isCloseable ? (
         <button
           type="button"
           className={styles.announcementBarClose}
           onClick={closeAnnouncementBar}
           aria-label="Close">
-        <span aria-hidden="true">&times;</span>
+          <span aria-hidden="true">×</span>
         </button>
+      ) : null}
     </div>
   );
 }

packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css

@@ -42,6 +42,9 @@
   width: 100%;
   text-align: center;
   padding: 5px 0;
+}
+
+.announcementBarCloseable {
   margin-right: 55px;
 }
 

packages/docusaurus-theme-classic/src/validateThemeConfig.js

@@ -169,6 +169,7 @@ const ThemeConfigSchema = Joi.object({
     content: Joi.string(),
     backgroundColor: Joi.string().default('#fff'),
     textColor: Joi.string().default('#000'),
+    isCloseable: Joi.bool().default(true),
   }).optional(),
   navbar: Joi.object({
     hideOnScroll: Joi.bool().default(false),

website/docs/theme-classic.md

@@ -87,7 +87,7 @@ module.exports = {
 
 ### Announcement bar
 
-Sometimes you want to announce something in your website. Just for such a case, you can add an announcement bar. This is a non-fixed and dismissable panel above the navbar.
+Sometimes you want to announce something in your website. Just for such a case, you can add an announcement bar. This is a non-fixed and optionally dismissable panel above the navbar.
 
 ```js {4-10} title="docusaurus.config.js"
 module.exports = {
@@ -99,6 +99,7 @@ module.exports = {
         'We are looking to revamp our docs, please fill <a target="_blank" rel="noopener noreferrer" href="#">this survey</a>',
       backgroundColor: '#fafbfc', // Defaults to `#fff`.
       textColor: '#091E42', // Defaults to `#000`.
+      isCloseable: false, // Defaults to `true`.
     },
     // ...
   },