feat(content-sidebar): Add lowercase version number badge variant

i18n/en-US.properties

@@ -846,6 +846,8 @@ be.sidebarVersions.versionLimitExceeded = You are limited to the last {versionLi
 be.sidebarVersions.versionMaxEntries = Version history is limited to the last {maxVersions} entries.
 # Text to display in the version badge.
 be.sidebarVersions.versionNumberBadge = V{versionNumber}
+# Text to display in the version badge, lowercase variant.
+be.sidebarVersions.versionNumberBadgeLowercase = v{versionNumber}
 # Label given to the version badge for screen readers.
 be.sidebarVersions.versionNumberLabel = Version number {versionNumber}
 # Message describing when the version will be deleted due to an applied retention policy.

src/elements/content-sidebar/versions/VersionsItemBadge.js

@@ -6,6 +6,7 @@
 import * as React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import classNames from 'classnames';
+import { useFeatureEnabled } from '../../common/feature-checking';
 import messages from './messages';
 import './VersionsItemBadge.scss';
 
@@ -17,6 +18,7 @@ type Props = {
 
 const VersionsItemBadge = ({ intl, isCurrent, versionNumber }: Props) => {
     const intlValues = { versionNumber };
+    const isLowercase = useFeatureEnabled('versions.versionNumberBadge.lowercase.enabled');
 
     return (
         <div
@@ -25,7 +27,10 @@ const VersionsItemBadge = ({ intl, isCurrent, versionNumber }: Props) => {
                 'bcs-VersionsItemBadge--current': isCurrent,
             })}
         >
-            <FormattedMessage {...messages.versionNumberBadge} values={intlValues} />
+            <FormattedMessage
+                {...(isLowercase ? messages.versionNumberBadgeLowercase : messages.versionNumberBadge)}
+                values={intlValues}
+            />
         </div>
     );
 };

src/elements/content-sidebar/versions/VersionsSidebar.scss

@@ -9,6 +9,10 @@
         padding-top: 0;
     }
 
+    .bcs-title {
+        align-items: center;
+    }
+
     .bdl-BackButton {
         margin-right: 5px;
     }

src/elements/content-sidebar/versions/__tests__/VersionsItemBadge.test.js

@@ -18,6 +18,14 @@ describe('elements/content-sidebar/versions/VersionsItemBadge', () => {
             expect(screen.getByLabelText('Version number 5')).toBeInTheDocument();
         });
 
+        test('should render lowercase version number badge when feature is enabled', () => {
+            render(<VersionsItemBadge versionNumber="7" />, {
+                wrapperProps: { features: { versions: { versionNumberBadge: { lowercase: { enabled: true } } } } },
+            });
+
+            expect(screen.getByText('v7')).toBeInTheDocument();
+        });
+
         test.each`
             isCurrent    | shouldHaveCurrentClass
             ${true}      | ${true}

src/elements/content-sidebar/versions/messages.js

@@ -127,6 +127,11 @@ const messages = defineMessages({
         defaultMessage: 'V{versionNumber}',
         description: 'Text to display in the version badge.',
     },
+    versionNumberBadgeLowercase: {
+        id: 'be.sidebarVersions.versionNumberBadgeLowercase',
+        defaultMessage: 'v{versionNumber}',
+        description: 'Text to display in the version badge, lowercase variant.',
+    },
     versionNumberLabel: {
         id: 'be.sidebarVersions.versionNumberLabel',
         defaultMessage: 'Version number {versionNumber}',