From 63572a4809513a5290c90071cd3e8b8a7c7ab202 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Tue, 1 Sep 2020 22:59:37 +0200
Subject: [PATCH 1/3] feat(v2): add `isCloseable` property for announcement bar

---
 .../src/theme/AnnouncementBar/index.tsx       | 21 ++++++++++---------
 .../src/validateThemeConfig.js                |  1 +
 website/docs/theme-classic.md                 |  3 ++-
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx
index 761123214871..d0c2d27ba6fb 100644
--- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx
@@ -15,13 +15,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;
   }
 
@@ -36,14 +36,15 @@ function AnnouncementBar(): JSX.Element | null {
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{__html: content}}
       />
-
-      <button
-        type="button"
-        className={styles.announcementBarClose}
-        onClick={closeAnnouncementBar}
-        aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-      </button>
+      {isCloseable ? (
+        <button
+          type="button"
+          className={styles.announcementBarClose}
+          onClick={closeAnnouncementBar}
+          aria-label="Close">
+          <span aria-hidden="true">×</span>
+        </button>
+      ) : null}
     </div>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.js b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
index 7a35e103af69..968e6e37bda7 100644
--- a/packages/docusaurus-theme-classic/src/validateThemeConfig.js
+++ b/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),
diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md
index 91dab8be62b4..769411b915ea 100644
--- a/website/docs/theme-classic.md
+++ b/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`.
     },
     // ...
   },

From 381acc8d494ffa7be969a165fe69551c8056665d Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Tue, 1 Sep 2020 23:47:03 +0200
Subject: [PATCH 2/3] correct styling for non-closeable announcement

---
 .../src/theme/AnnouncementBar/index.tsx                      | 5 ++++-
 .../src/theme/AnnouncementBar/styles.module.css              | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx
index d0c2d27ba6fb..de339ea493a9 100644
--- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx
+++ b/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';
 
@@ -31,7 +32,9 @@ 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}}
diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css
index 12350cc8eccb..72fab1b31de9 100644
--- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css
+++ b/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;
 }
 

From eaea10eaec0e43c1a1ed890342e919c786055898 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Wed, 2 Sep 2020 00:00:12 +0200
Subject: [PATCH 3/3] fix tests

---
 .../src/__tests__/validateThemeConfig.test.js                    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js
index a2f8a50db129..a336c122634b 100644
--- a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js
+++ b/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: {