[release notes] Adjust release note details -> Display product and …

…`productArea` (#1989) * feat: show product and productArea on release notes * chore: add changeset * refactor: component naming * refactor: validate products in siteMetadata
commercetools · May 28, 2024 · cf10210 · cf10210
1 parent dc1bdf3
commit cf10210
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 3 deletions.
diff --git a/.changeset/brown-lies-accept.md b/.changeset/brown-lies-accept.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-docs/gatsby-theme-docs': patch
+'@commercetools-docs/ui-kit': patch
+---
+
+Display 'product' and 'productArea' of the release note next to the type.
diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-release-note-body.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-release-note-body.js
@@ -5,12 +5,13 @@ import SpacingsStack from '@commercetools-uikit/spacings-stack';
 import SpacingsInline from '@commercetools-uikit/spacings-inline';
 import Stamp from '@commercetools-uikit/stamp';
 import { designSystem } from '@commercetools-docs/ui-kit';
+import { useSiteData } from '../../hooks/use-site-data';
 
 const DateElement = styled.div`
   line-height: ${designSystem.typography.lineHeights.small};
 `;
 const Topics = styled.div`
-  color: ${designSystem.colors.light.textInfo};
+  color: ${designSystem.colors.light.textSearchHeading};
   font-size: ${designSystem.typography.fontSizes.small};
 
   > * + * {
@@ -20,8 +21,30 @@ const Topics = styled.div`
   }
 `;
 
+const CustomStamp = styled.div`
+  color: ${designSystem.colors.light.selfLearningLoginButton};
+  padding: 2px 4px;
+  font-size: ${designSystem.typography.fontSizes.extraSmall};
+  border: 1px solid ${designSystem.colors.light.selfLearningLoginButton};
+  border-radius: ${designSystem.tokens.borderRadiusForBetaFlag};
+`;
+
+const SeparatorLine = styled.div`
+  height: ${designSystem.dimensions.heights.separatorLine};
+  border-left: 1px solid ${designSystem.colors.light.surfaceSecondary3};
+`;
+
 const ReleaseNoteBody = (props) => {
+  // Using the siteMetadata to determine the product and productArea if the frontmatter is not defined.
+  const siteData = useSiteData();
+  const product =
+    props.product ||
+    ((siteData.siteMetadata.products?.[0] || '') !== ''
+      ? siteData.siteMetadata.products[0]
+      : null);
+  const productArea = props.productArea || siteData.siteMetadata.title;
   const releaseNoteType = Array.isArray(props.type) ? props.type : [props.type];
+
   return (
     <SpacingsStack scale="m">
       <SpacingsStack scale="s">
@@ -36,7 +59,18 @@ const ReleaseNoteBody = (props) => {
             colorError: designSystem.colors.light.borderForReleaseNoteTypeFix,
           })}
         >
-          <SpacingsInline>
+          <SpacingsInline alignItems="center">
+            {product && (
+              <CustomStamp>
+                <span>{product}</span>
+              </CustomStamp>
+            )}
+            {productArea && (
+              <CustomStamp>
+                <span>{productArea}</span>
+              </CustomStamp>
+            )}
+            <SeparatorLine />
             {releaseNoteType.map((type) => {
               return (
                 <Stamp
@@ -67,6 +101,8 @@ ReleaseNoteBody.propTypes = {
   // eslint-disable-next-line react/no-unused-prop-types
   type: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
   topics: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+  product: PropTypes.string,
+  productArea: PropTypes.string,
   children: PropTypes.node.isRequired,
 };
 

diff --git a/packages/ui-kit/src/design-system.ts b/packages/ui-kit/src/design-system.ts
@@ -258,6 +258,7 @@ export const dimensions = {
     globalNotificationContent: '36px',
     globalNotificationWithSmallSpacing: 'calc(36px + 8px)',
     megaMenuItemTitle: '38px',
+    separatorLine: '22px',
   },
   widths: {
     pageContent: pageWidth,

diff --git a/websites/documentation/src/content/writing/release-notes.mdx b/websites/documentation/src/content/writing/release-notes.mdx
@@ -65,7 +65,7 @@ If there is no more, remove the marker above, too.
 - `title` (string, required): The title for the website
 - `description` (string, required): Max 256 characters plain text containing the change and its advantage ("tweet-able" and for RSS).
   256 = 280 twitter minus 23 for a link. Do not imply the title, this text is used stand-alone in Merchant Center and other feed recipients. It must convey the value proposition and key change topic.
-- `type` (string | string[], required): Must be either `feature` (for "New Feature"), `fix` (for "Resolved Issue") or `enhancement` (for "Enhancement")
+- `type` (string | string[], required): Must be either `feature` (for "New feature"), `enhancement` (for "Enhancement"), `fix` (for "Resolved issue"), `announcement` (for "Announcement") or `deprecation` (for "Deprecation")
 - `topics` (array of string, optional): YAML array of free to choose text entries. The Filter UI may be constrained to pre-defined topics.
 - `published` (boolean, optional, defaults to `true`): `false` prevents rendering of the release in the site. **Should not be used in the main documentation**, reserved for atypical situations. Not included in the template.
 - `slug` (string, optional, defaults to `$date-$title` (slugified)): Allows overriding the autogenerated URL slug. **Should not be used in the main documentation**, reserved for migrating legacy docs.