SONAR-19391 Measures page sidebar adopts the new UI

5 files changed, 75 insertions, 14 deletions

diff --git a/server/sonar-web/design-system/src/components/icons/Icon.tsx b/server/sonar-web/design-system/src/components/icons/Icon.tsx
index 3a90211b525..80e0e64be88 100644
--- a/server/sonar-web/design-system/src/components/icons/Icon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/Icon.tsx
@@ -26,9 +26,11 @@ import { themeColor } from '../../helpers/theme';
 import { CSSColor, ThemeColors } from '../../types/theme';
 
 interface Props {
+  'aria-hidden'?: boolean | 'true' | 'false';
   'aria-label'?: string;
   children: React.ReactNode;
   className?: string;
+  description?: React.ReactNode;
 }
 
 export interface IconProps extends Omit<Props, 'children'> {
@@ -38,10 +40,17 @@ export interface IconProps extends Omit<Props, 'children'> {
 }
 
 export function CustomIcon(props: Props) {
-  const { 'aria-label': ariaLabel, children, className, ...iconProps } = props;
+  const {
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaHidden,
+    children,
+    className,
+    description,
+    ...iconProps
+  } = props;
   return (
     <svg
-      aria-hidden={ariaLabel ? 'false' : 'true'}
+      aria-hidden={ariaHidden ?? ariaLabel ? 'false' : 'true'}
       aria-label={ariaLabel}
       className={className}
       fill="none"
@@ -63,6 +72,7 @@ export function CustomIcon(props: Props) {
       xmlnsXlink="http://www.w3.org/1999/xlink"
       {...iconProps}
     >
+      {description && <desc>{description}</desc>}
       {children}
     </svg>
   );
diff --git a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx
index e38644eea62..01e017f100f 100644
--- a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx
+++ b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx
@@ -18,27 +18,43 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import { ReactNode, useCallback } from 'react';
+import { ReactNode, useCallback, useState } from 'react';
 import tw from 'twin.macro';
 import { themeColor, themeContrast } from '../../helpers/theme';
 import { BareButton } from '../buttons';
 import { OpenCloseIndicator } from '../icons/OpenCloseIndicator';
 import { SubnavigationGroup } from './SubnavigationGroup';
 
-interface Props {
+interface CommonProps {
   children: ReactNode;
   className?: string;
-  expanded?: boolean;
   header: ReactNode;
   id: string;
   onSetExpanded?: (expanded: boolean) => void;
 }
 
+interface ControlledProps extends CommonProps {
+  expanded: boolean | undefined;
+  initExpanded?: never;
+}
+
+interface UncontrolledProps extends CommonProps {
+  expanded?: never;
+  initExpanded?: boolean;
+}
+
+type Props = ControlledProps | UncontrolledProps;
+
 export function SubnavigationAccordion(props: Props) {
-  const { children, className, header, id, expanded = true, onSetExpanded } = props;
+  const { children, className, expanded, header, id, initExpanded, onSetExpanded } = props;
+
+  const [innerExpanded, setInnerExpanded] = useState(initExpanded ?? false);
+  const finalExpanded = expanded ?? innerExpanded;
+
   const toggleExpanded = useCallback(() => {
-    onSetExpanded?.(!expanded);
-  }, [expanded, onSetExpanded]);
+    setInnerExpanded(!finalExpanded);
+    onSetExpanded?.(!finalExpanded);
+  }, [finalExpanded, onSetExpanded]);
 
   return (
     <SubnavigationGroup
@@ -49,14 +65,14 @@ export function SubnavigationAccordion(props: Props) {
     >
       <SubnavigationAccordionItem
         aria-controls={`${id}-subnavigation-accordion`}
-        aria-expanded={expanded}
+        aria-expanded={finalExpanded}
         id={`${id}-subnavigation-accordion-button`}
         onClick={toggleExpanded}
       >
         {header}
-        <OpenCloseIndicator open={Boolean(expanded)} />
+        <OpenCloseIndicator open={finalExpanded} />
       </SubnavigationAccordionItem>
-      {expanded && children}
+      {finalExpanded && children}
     </SubnavigationGroup>
   );
 }
diff --git a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx
new file mode 100644
index 00000000000..574247578b8
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationSubheading.tsx
@@ -0,0 +1,34 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2023 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import styled from '@emotion/styled';
+import tw from 'twin.macro';
+import { themeColor, themeContrast } from '../../helpers/theme';
+
+export const SubnavigationSubheading = styled.div`
+  ${tw`sw-flex`}
+  ${tw`sw-box-border`}
+  ${tw`sw-body-sm`}
+  ${tw`sw-px-4 sw-pt-6 sw-pb-2`}
+  ${tw`sw-w-full`}
+
+  color: ${themeContrast('subnavigationSubheading')};
+  background-color: ${themeColor('subnavigationSubheading')};
+`;
+SubnavigationSubheading.displayName = 'SubnavigationSubheading';
diff --git a/server/sonar-web/design-system/src/components/subnavigation/__tests__/SubnavigationAccordion-test.tsx b/server/sonar-web/design-system/src/components/subnavigation/__tests__/SubnavigationAccordion-test.tsx
index ebf76171247..884fd13db3b 100644
--- a/server/sonar-web/design-system/src/components/subnavigation/__tests__/SubnavigationAccordion-test.tsx
+++ b/server/sonar-web/design-system/src/components/subnavigation/__tests__/SubnavigationAccordion-test.tsx
@@ -31,17 +31,17 @@ it('should have correct style and html structure', () => {
 });
 
 it('should display expanded', () => {
-  setupWithProps({ expanded: true });
+  setupWithProps({ initExpanded: true });
 
   expect(screen.getByRole('button', { expanded: true })).toBeVisible();
   expect(screen.getByText('Foo')).toBeVisible();
 });
 
-it('should display expanded by default', () => {
+it('should display collapsed by default', () => {
   setupWithProps();
 
   expect(screen.getByRole('button')).toBeVisible();
-  expect(screen.getByText('Foo')).toBeVisible();
+  expect(screen.queryByText('Foo')).not.toBeInTheDocument();
 });
 
 it('should toggle expand', async () => {
diff --git a/server/sonar-web/design-system/src/components/subnavigation/index.ts b/server/sonar-web/design-system/src/components/subnavigation/index.ts
index 89410cd2e49..0d4265cbfe1 100644
--- a/server/sonar-web/design-system/src/components/subnavigation/index.ts
+++ b/server/sonar-web/design-system/src/components/subnavigation/index.ts
@@ -21,3 +21,4 @@ export * from './SubnavigationAccordion';
 export * from './SubnavigationGroup';
 export * from './SubnavigationHeading';
 export * from './SubnavigationItem';
+export * from './SubnavigationSubheading';