Panel

A panel is a folding block displaying compact information and controls.

Import

Panel: The panel component.
PanelSection: A helper component designed to represent a section inside the panel.

The Panel component is highly customizable, first with the title, header, footer, and footerSummary props, which are used to add content at the top and bottom of the panel, and the onClose prop which will add the cross icon at the top of the panel.

The PanelSection component lets you define sections inside the panel, which will automatically be separated by dividers. The isEditable and isCollapsible props allow you to define your sections as editable or collapsible, and a number of props will help you customize editable sections.

const Demo = () => {
  const [legalName, setLegalName] = useState("google");
  const [tmpLegalName, setTmpLegalName] = useState("");

  return (
    <Panel
      title="Supplier details"
      onClose={() => {}}
      header={
        <>
          <Avatar
            iconName="building-storefront"
            text="supplier"
            variant="square"
          />
          <div>
            <div>Google</div>
            <div>401000</div>
          </div>
        </>
      }
      footer={
        <Button
          variant="secondaryNeutral"
          fit="parent"
          text="Archive supplier"
        />
      }
      footerSummary={{
        title: "Summary",
        isCollapsible: true,
        content: (
          <>
            <div>Total amount</div>
            <div>500€</div>
          </>
        ),
      }}
    >
      <PanelSection
        title="Information"
        isEditable
        editSection={
          <FormField label="Legal name">
            <TextInput
              onChange={(event) => setTmpLegalName(event.target.value)}
              value={tmpLegalName}
            />
          </FormField>
        }
        cancelTranslation="Cancel"
        saveTranslation="Save changes"
        onSave={() => {
          setLegalName(tmpLegalName);
        }}
        onCancel={() => {
          console.log("onCancel");
        }}
      >
        <div>Legal name</div>
        <div>{legalName}</div>
      </PanelSection>
      <PanelSection title="Bank details" isEditable={false} isCollapsible>
        <div>Bank country</div>
        <div>France</div>
        <div>IBAN</div>
        <div>-</div>
        <div>BIC</div>
        <div>-</div>
      </PanelSection>
      <PanelSection title="Proof of bank details" isEditable={false}>
        <DeprecatedPreview
          fit="parent"
          iconName="receipt-checked"
          primaryText="Uploaded on November 4, 2020"
          rightAddon={
            <Icon
              aria-hidden="true"
              color="var(--grapes-color-content-decorative-icon)"
              name="magnifying-glass"
            />
          }
        />
      </PanelSection>
    </Panel>
  );
};

Footer and footer summary

Two props are available to display information at the bottom of a panel: footer and footerSummary. You can use one or the other, or both at the same time.

The footerSummary has a number of options, including title and content, and can be collapsed with the isCollapsible property. If the footer summary is collapsed, the options isDefaultCollapsed, onCollapsed, and onExtended become available.

<>
  <Panel footer={<div>Footer</div>}></Panel>
  <Panel footerSummary={{ content: "Footer summary" }}></Panel>
  <Panel
    footerSummary={{
      title: "Collapsible footer summary",
      content: <div className="mt-16">Footer summary content</div>,
      isCollapsible: true,
    }}
  ></Panel>
  <Panel
    footer={<div>Footer</div>}
    footerSummary={{ content: "Footer summary" }}
  ></Panel>
</>

Basic usage

Google

401000

Information

Legal name

google

Bank details

Bank country

France

IBAN

BIC

Proof of bank details

const Demo = () => {
  const [legalName, setLegalName] = useState("google");
  const [tmpLegalName, setTmpLegalName] = useState("");

  return (
    <Panel
      title="Supplier details"
      onClose={() => {}}
      header={
        <>
          <Avatar
            iconName="building-storefront"
            text="supplier"
            variant="square"
          />
          <div>
            <div>Google</div>
            <div>401000</div>
          </div>
        </>
      }
      footer={
        <Button
          variant="secondaryNeutral"
          fit="parent"
          text="Archive supplier"
        />
      }
      footerSummary={{
        title: "Summary",
        isCollapsible: true,
        content: (
          <>
            <div>Total amount</div>
            <div>500€</div>
          </>
        ),
      }}
    >
      <PanelSection
        title="Information"
        isEditable
        editSection={
          <FormField label="Legal name">
            <TextInput
              onChange={(event) => setTmpLegalName(event.target.value)}
              value={tmpLegalName}
            />
          </FormField>
        }
        cancelTranslation="Cancel"
        saveTranslation="Save changes"
        onSave={() => {
          setLegalName(tmpLegalName);
        }}
        onCancel={() => {
          console.log("onCancel");
        }}
      >
        <div>Legal name</div>
        <div>{legalName}</div>
      </PanelSection>
      <PanelSection title="Bank details" isEditable={false} isCollapsible>
        <div>Bank country</div>
        <div>France</div>
        <div>IBAN</div>
        <div>-</div>
        <div>BIC</div>
        <div>-</div>
      </PanelSection>
      <PanelSection title="Proof of bank details" isEditable={false}>
        <DeprecatedPreview
          fit="parent"
          iconName="receipt-checked"
          primaryText="Uploaded on November 4, 2020"
          rightAddon={
            <Icon
              aria-hidden="true"
              color="var(--grapes-color-content-decorative-icon)"
              name="magnifying-glass"
            />
          }
        />
      </PanelSection>
    </Panel>
  );
};

Footer and footer summary

Two props are available to display information at the bottom of a panel: footer and footerSummary. You can use one or the other, or both at the same time.

<>
  <Panel footer={<div>Footer</div>}></Panel>
  <Panel footerSummary={{ content: "Footer summary" }}></Panel>
  <Panel
    footerSummary={{
      title: "Collapsible footer summary",
      content: <div className="mt-16">Footer summary content</div>,
      isCollapsible: true,
    }}
  ></Panel>
  <Panel
    footer={<div>Footer</div>}
    footerSummary={{ content: "Footer summary" }}
  ></Panel>
</>