CCSAAS-2087: Added PaaS badge for staging content

Author: jeff-matthews

gatsby-browser.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import React from 'react';
+import { MDXProvider } from '@mdx-js/react';
+import { Edition } from './src/@adobe/gatsby-theme-aio/components/Edition';
+
+// Define the components that will be available in MDX files
+const components = {
+  // Register the Edition component for inline use
+  Edition
+};
+
+// Wrap the root element with the MDXProvider
+export const wrapRootElement = ({ element }) => {
+  return <MDXProvider components={components}>{element}</MDXProvider>;
+};

gatsby-ssr.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2021 Adobe. All rights reserved.
+ * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
  * of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -11,10 +11,16 @@
  */
 
 import React from 'react';
-import {withPrefix} from 'gatsby';
+import { MDXProvider } from '@mdx-js/react';
+import { Edition } from './src/@adobe/gatsby-theme-aio/components/Edition';
 
-export const onRenderBody = ({setHeadComponents}) => {
-  setHeadComponents([
-    <script src={withPrefix('/redirections.js')}></script>
-  ]);
-};
+// Define the components that will be available in MDX files
+const components = {
+  // Register the Edition component for inline use
+  Edition
+};
+
+// Wrap the root element with the MDXProvider
+export const wrapRootElement = ({ element }) => {
+  return <MDXProvider components={components}>{element}</MDXProvider>;
+};

src/@adobe/gatsby-theme-aio/components/Edition/index.js

@@ -0,0 +1,71 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import '@spectrum-css/badge';
+import '@spectrum-css/link';
+import '@spectrum-css/tooltip';
+
+let editionText = '';
+let editionColor = '';
+let editionTooltip = '';
+const EDITIONS_LINK = 'https://experienceleague.adobe.com/en/docs/commerce/user-guides/product-solutions';
+
+const Edition = ({ ...props }) => {
+  switch (props.name) {
+    case 'paas':
+      editionText = 'PaaS only';
+      editionColor = 'spectrum-Badge--informative';
+      editionTooltip = 'Applies to Adobe Commerce on Cloud (Adobe-managed PaaS infrastructure) and on-premises projects only.';
+      break;
+    case 'saas':
+      editionText = 'SaaS only';
+      editionColor = 'spectrum-Badge--positive';
+      editionTooltip = 'Applies to Adobe Commerce as a Cloud Service and Adobe Commerce Optimizer projects only (Adobe-managed SaaS infrastructure).';
+      break;
+    default:
+      editionText = 'Create an Edition tag';
+      editionColor = 'spectrum-Badge--yellow';
+      editionTooltip = '';
+  }
+
+  return (
+    <a 
+      href={EDITIONS_LINK}
+      className="spectrum-Link"
+      target="_blank"
+      rel="noreferrer"
+      style={{ 
+        textDecoration: 'none',
+        display: 'inline-block',
+        marginTop: '1rem',
+        marginRight: '0.5rem',
+        position: 'relative'
+      }}
+      title={editionTooltip}
+    >
+      <span 
+        className={`spectrum-Badge spectrum-Badge--sizeS ${editionColor}`} 
+        style={{ paddingBottom: '4px', cursor: 'pointer' }}
+      >
+        {editionText}
+      </span>
+    </a>
+  );
+};
+
+Edition.propTypes = {
+  name: PropTypes.string
+};
+
+export { Edition };

src/pages/development/components/app-server.md

@@ -3,7 +3,7 @@ title: GraphQL Application Server | Commerce PHP Extensions
 description: Learn about GraphQL Application Server architecture and how to ensure compatibility with custom extensions.
 keywords:
   - Extensions
-edition: ee
+edition: pass
 ---
 
 <InlineAlert variant="info" slots="text" />

src/pages/development/staging.md

@@ -1,7 +1,7 @@
 ---
 title: Staging | Commerce PHP Extensions
 description: Learn how to manage campaigns in Adobe Commerce and Magento Open Source using the staging module.
-edition: ee
+edition: paas
 keywords:
   - Extensions
 ---