add option to add borders on scroll panel (#551)

src/clients/AdvancedTab.tsx

@@ -178,7 +178,7 @@ export const AdvancedTab = ({
 
   return (
     <PageSection variant="light" className="pf-u-py-0">
-      <ScrollForm sections={sections}>
+      <ScrollForm sections={sections} borders>
         <>
           <Text className="pf-u-pb-lg">
             <Trans i18nKey="clients-help:notBeforeIntro">

src/components/scroll-form/ScrollForm.tsx

@@ -10,11 +10,14 @@ import {
 } from "@patternfly/react-core";
 
 import { mainPageContentId } from "../../App";
+import { ScrollPanel } from "./ScrollPanel";
 import { FormPanel } from "./FormPanel";
+
 import "./scroll-form.css";
 
 type ScrollFormProps = GridProps & {
   sections: string[];
+  borders?: boolean;
   children: React.ReactNode;
 };
 
@@ -24,6 +27,7 @@ const spacesToHyphens = (string: string): string => {
 
 export const ScrollForm = ({
   sections,
+  borders = false,
   children,
   ...rest
 }: ScrollFormProps) => {
@@ -34,9 +38,22 @@ export const ScrollForm = ({
     <Grid hasGutter {...rest}>
       <GridItem span={8}>
         {sections.map((cat, index) => (
-          <FormPanel scrollId={spacesToHyphens(cat)} key={cat} title={cat}>
-            {nodes[index]}
-          </FormPanel>
+          <>
+            {!borders && (
+              <ScrollPanel
+                scrollId={spacesToHyphens(cat)}
+                key={cat}
+                title={cat}
+              >
+                {nodes[index]}
+              </ScrollPanel>
+            )}
+            {borders && (
+              <FormPanel scrollId={spacesToHyphens(cat)} key={cat} title={cat}>
+                {nodes[index]}
+              </FormPanel>
+            )}
+          </>
         ))}
       </GridItem>
       <GridItem span={4}>

src/components/scroll-form/ScrollPanel.tsx

@@ -0,0 +1,28 @@
+import React, { HTMLProps, ReactNode } from "react";
+import { Title } from "@patternfly/react-core";
+
+import "./form-panel.css";
+
+type ScrollPanelProps = HTMLProps<HTMLFormElement> & {
+  title: string;
+  scrollId: string;
+  children: ReactNode;
+};
+
+export const ScrollPanel = (props: ScrollPanelProps) => {
+  const { title, children, scrollId, ...rest } = props;
+  return (
+    <section {...rest} className="kc-form-panel__panel">
+      <Title
+        headingLevel="h4"
+        size="xl"
+        className="kc-form-panel__title"
+        id={scrollId}
+        tabIndex={0} // so that jumpLink sends focus to the section for a11y
+      >
+        {title}
+      </Title>
+      {children}
+    </section>
+  );
+};

src/components/scroll-form/form-panel.css

@@ -2,3 +2,7 @@
   margin-top: var(--pf-global--spacer--lg);
   padding-bottom: var(--pf-global--spacer--2xl);
 }
+
+.kc-form-panel__title {
+  margin-bottom: var(--pf-global--spacer--lg);
+}