SONAR-19021 Accordion component for overview qg section

diff --git a/server/sonar-web/design-system/src/components/Accordion.tsx b/server/sonar-web/design-system/src/components/Accordion.tsx
new file mode 100644 (file)
index 0000000..d1af31d
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/Accordion.tsx
@@ -0,0 +1,65 @@
+/*
+ * 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 classNames from 'classnames';
+import { uniqueId } from 'lodash';
+import * as React from 'react';
+import { BareButton } from './buttons';
+import { OpenCloseIndicator } from './icons/OpenCloseIndicator';
+
+interface AccordionProps {
+  children: React.ReactNode;
+  className?: string;
+  data?: string;
+  header: React.ReactNode;
+  onClick: (data?: string) => void;
+  open: boolean;
+}
+
+export function Accordion(props: AccordionProps) {
+  const { className, open, header, data, onClick } = props;
+
+  const id = React.useMemo(() => uniqueId('accordion-'), []);
+  const handleClick = React.useCallback(() => {
+    onClick(data);
+  }, [onClick, data]);
+
+  return (
+    <div
+      className={classNames('sw-cursor-pointer', className, {
+        open,
+      })}
+      role="listitem"
+    >
+      <BareButton
+        aria-controls={`${id}-panel`}
+        aria-expanded={open}
+        className="sw-flex sw-items-center sw-justify-between sw-px-2 sw-py-2 sw-box-border sw-w-full"
+        id={`${id}-header`}
+        onClick={handleClick}
+      >
+        {header}
+        <OpenCloseIndicator aria-hidden={true} className="sw-ml-2" open={open} />
+      </BareButton>
+      <div aria-labelledby={`${id}-header`} id={`${id}-panel`} role="region">
+        {open && <div>{props.children}</div>}
+      </div>
+    </div>
+  );
+}

diff --git a/server/sonar-web/design-system/src/components/__tests__/Accordion-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Accordion-test.tsx
new file mode 100644 (file)
index 0000000..323175c
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/__tests__/Accordion-test.tsx
@@ -0,0 +1,53 @@
+/*
+ * 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 { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+import { render } from '../../helpers/testUtils';
+import { Accordion } from '../Accordion';
+
+it('should behave correctly', async () => {
+  const user = userEvent.setup();
+  const children = 'hello';
+  renderAccordion(children);
+  expect(screen.queryByText(children)).not.toBeInTheDocument();
+  await user.click(screen.getByRole('button', { expanded: false }));
+  expect(screen.getByText(children)).toBeInTheDocument();
+});
+
+function renderAccordion(children: React.ReactNode) {
+  function AccordionTest() {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <Accordion
+        header="test"
+        onClick={() => {
+          setOpen(!open);
+        }}
+        open={open}
+      >
+        <div>{children}</div>
+      </Accordion>
+    );
+  }
+
+  return render(<AccordionTest />);
+}

diff --git a/server/sonar-web/design-system/src/components/icons/OpenCloseIndicator.tsx b/server/sonar-web/design-system/src/components/icons/OpenCloseIndicator.tsx
new file mode 100644 (file)
index 0000000..4f4a5f4
--- /dev/null
+++ b/server/sonar-web/design-system/src/components/icons/OpenCloseIndicator.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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 { ChevronDownIcon } from './ChevronDownIcon';
+import { ChevronRightIcon } from './ChevronRightIcon';
+import { IconProps } from './Icon';
+
+interface Props extends IconProps {
+  open: boolean;
+}
+
+export function OpenCloseIndicator({ open, ...iconProps }: Props) {
+  return open ? <ChevronDownIcon {...iconProps} /> : <ChevronRightIcon {...iconProps} />;
+}

diff --git a/server/sonar-web/design-system/src/components/icons/index.ts b/server/sonar-web/design-system/src/components/icons/index.ts
index 846f8271ac738eb6bdebcaf49af0967c3a0a3ad0..fd76e9c1719d72017adaca6ec05a1462bb946dec 100644 (file)
--- a/server/sonar-web/design-system/src/components/icons/index.ts
+++ b/server/sonar-web/design-system/src/components/icons/index.ts
@@ -34,6 +34,7 @@ export { HomeIcon } from './HomeIcon';
 export { MainBranchIcon } from './MainBranchIcon';
 export { MenuHelpIcon } from './MenuHelpIcon';
 export { MenuSearchIcon } from './MenuSearchIcon';
+export { OpenCloseIndicator } from './OpenCloseIndicator';
 export { OpenNewTabIcon } from './OpenNewTabIcon';
 export { OverviewQGNotComputedIcon } from './OverviewQGNotComputedIcon';
 export { OverviewQGPassedIcon } from './OverviewQGPassedIcon';

diff --git a/server/sonar-web/design-system/src/components/index.ts b/server/sonar-web/design-system/src/components/index.ts
index b75799cde77866301dd14798e94d8597375367f7..1a9eb75d615ab125b05f2687a37350af6d647d56 100644 (file)
--- a/server/sonar-web/design-system/src/components/index.ts
+++ b/server/sonar-web/design-system/src/components/index.ts
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
+export * from './Accordion';
 export * from './Avatar';
 export { default as Badge } from './Badge';
 export { default as DeferredSpinner } from './DeferredSpinner';