Docs: add enterprise admonition (#1198)

* adds enterprise admonition

* adds inline styling

* adds styling to component

* swaps material ui icon

* adds enterprise admonition examples

* swaps mui icon and deletes gif example

* adds dark mode colors

* updates dark mode palette

* simplify dark mode styling

* updates hex code

---------

Co-authored-by: Kenneth Jenkins <[email protected]>

Author: 2 people

content/docs/capabilities/branding.md

@@ -5,7 +5,7 @@ description: Add custom colors, logos, and error messages.
 
 # Custom Branding / White Labeling
 
-:::tip
+:::enterprise Pomerium Enterprise
 
 This article describes a use case available to [Pomerium Enterprise](/docs/deploy/enterprise/install) customers.
 

content/docs/capabilities/original-request-context.md

@@ -7,7 +7,7 @@ description: This article describes how the original user context is passed seco
 
 # Original User Context
 
-:::tip
+:::enterprise Pomerium Enterprise
 
 This article describes a use case available to [Pomerium Enterprise](/docs/deploy/enterprise/install) customers.
 

docusaurus.config.js

@@ -37,6 +37,10 @@ const config = {
           routeBasePath: '/',
           sidebarPath: require.resolve('./sidebars.js'),
           editUrl: 'https://github.com/pomerium/documentation/tree/main',
+          admonitions: {
+            keywords: ['note', 'tip', 'info', 'caution', 'danger', 'enterprise'],
+            extendDefaults: true,
+          },
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),

src/theme/Admonition/Types.js

@@ -0,0 +1,23 @@
+import DefaultAdmonitionTypes from '@theme-original/Admonition/Types';
+import BusinessIcon from '@mui/icons-material/Business';
+
+import styles from './styles.module.css';
+
+function EnterpriseAdmonition(props) {
+  return (
+    <div className={styles.enterprise}>
+      <div className={styles.enterprise_header}>
+        <BusinessIcon />
+        <h5>{props.title}</h5>
+      </div>
+      {props.children}
+    </div>
+  );
+}
+
+const AdmonitionTypes = {
+  ...DefaultAdmonitionTypes,
+  'enterprise': EnterpriseAdmonition,
+}
+
+export default AdmonitionTypes;

src/theme/Admonition/styles.module.css

@@ -0,0 +1,37 @@
+.enterprise {
+  border: #ededed 1px solid;
+  border-left: #6F43E7 solid 4px;
+  border-radius: 10px;
+  margin: 0 0 16px 0;
+  padding: 16px;
+  background-color: #f6f3ff;
+}
+[data-theme='dark'] .enterprise {
+  border-color: #612fea;
+  border-left-color: #ece5ff;
+  background-color: #4d25bb;
+}
+
+.enterprise > :last-child {
+  margin-bottom: 0;
+}
+
+.enterprise_header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1em;
+}
+
+.enterprise_header h5 {
+  margin: 0 5px;
+  font-size: 16px;
+  color: #6F43E7;
+}
+[data-theme='dark'] .enterprise_header h5 {
+  color: #ECE5FF;
+}
+
+[data-theme='dark'] .enterprise a {
+  color: #f1e8f9;
+  font-weight: bold;
+}