feat(component): add enhancements to panel component

[davelinke]

trafficstars

What?

Add enhancements to Panel component

Why?

With the introduction of the Lozenge component, the panel also needs to surface this new feature. The action property does now also accept dropdown properties.
Besides, a new PanelContents component is introduced to bridge the gap of a few long missing features such as ability to expand to the panel content boundaries horizontally (for tables) and scroller functionality for certain scenarios.

Screenshots/Screen Recordings

Testing/Proof

dev.tsx code

import { Flex, Panel, PanelContents, Table, Text } from '@bigcommerce/big-design';
import { MoreHorizIcon } from '@bigcommerce/big-design-icons';
import { Header, Page } from '@bigcommerce/big-design-patterns';
import React, { FunctionComponent } from 'react';

const PagePanels: FunctionComponent = () => {
  return (
    <Page
      header={<Header description="A sample of new panel features" title="New panel features" />}
    >
      <Flex flexDirection="column" flexGap="2rem">
        <Panel
          action={{
            items: [
              { content: 'Option 1', onItemClick: (item) => item },
              { content: 'Option 2', onItemClick: (item) => item },
            ],
            toggle: {
              variant: 'utility',
              iconOnly: <MoreHorizIcon />,
            },
          }}
          badge={{ label: 'Active', variant: 'success' }}
          description="Now you can also add lozenges and dropdowns to the panel."
          header="A panel with a lozenge and a dropdown"
          lozenge={{ label: 'Early Access', variant: 'new' }}
        >
          <PanelContents>
            <Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat,
              sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant morbi
              tristique senectus et netus et malesuada fames ac turpis egestas. Duis efficitur risus
              quis ante volutpat finibus. In varius mattis orci, et volutpat erat rhoncus nec.
              Mauris lectus nisi, pharetra eget mollis id, pulvinar in nisi. In dapibus urna turpis.
              Proin iaculis tincidunt turpis ac viverra. Nullam auctor, leo non imperdiet
              consectetur, purus orci posuere magna, eu varius nisl magna semper arcu. In sit amet
              scelerisque enim. In varius, libero euismod finibus congue, turpis neque semper dolor,
              sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit magna, quis
              aliquet arcu pulvinar in.
            </Text>
          </PanelContents>
        </Panel>
        <Panel
          description="Now tables can reach the boundaries of the panels as they should."
          header="A panel with a table"
        >
          <PanelContents padded={false}>
            <Table
              columns={[
                {
                  header: 'Sku',
                  hash: 'sku',
                  tooltip: 'Header tooltip',
                  render: ({ sku }) => sku,
                },
                { header: 'Name', hash: 'name', render: ({ name }) => name },
                { header: 'Stock', hash: 'stock', render: ({ stock }) => stock },
              ]}
              items={[
                { sku: 'SM13', name: '[Sample] Smith Journal 13', stock: 25 },
                { sku: 'DPB', name: '[Sample] Dustpan & Brush', stock: 34 },
                { sku: 'OFSUC', name: '[Sample] Utility Caddy', stock: 45 },
                { sku: 'CLC', name: '[Sample] Canvas Laundry Cart', stock: 2 },
                { sku: 'CGLD', name: '[Sample] Laundry Detergent', stock: 29 },
              ]}
            />
          </PanelContents>
        </Panel>
        <Panel
          description="With the PanelContents component you can now add scrolling to panels."
          header="A panel with a scroller"
        >
          <PanelContents height="300px" scrollable>
            <Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat,
              sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant morbi
              tristique senectus et netus et malesuada fames ac turpis egestas. Duis efficitur risus
              quis ante volutpat finibus. In varius mattis orci, et volutpat erat rhoncus nec.
              Mauris lectus nisi, pharetra eget mollis id, pulvinar in nisi. In dapibus urna turpis.
              Proin iaculis tincidunt turpis ac viverra. Nullam auctor, leo non imperdiet
              consectetur, purus orci posuere magna, eu varius nisl magna semper arcu. In sit amet
              scelerisque enim. In varius, libero euismod finibus congue, turpis neque semper dolor,
              sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit magna, quis
              aliquet arcu pulvinar in.
            </Text>
            <Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat,
              sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant morbi
              tristique senectus et netus et malesuada fames ac turpis egestas. Duis efficitur risus
              quis ante volutpat finibus. In varius mattis orci, et volutpat erat rhoncus nec.
              Mauris lectus nisi, pharetra eget mollis id, pulvinar in nisi. In dapibus urna turpis.
              Proin iaculis tincidunt turpis ac viverra. Nullam auctor, leo non imperdiet
              consectetur, purus orci posuere magna, eu varius nisl magna semper arcu. In sit amet
              scelerisque enim. In varius, libero euismod finibus congue, turpis neque semper dolor,
              sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit magna, quis
              aliquet arcu pulvinar in.
            </Text>
            <Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat,
              sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant morbi
              tristique senectus et netus et malesuada fames ac turpis egestas. Duis efficitur risus
              quis ante volutpat finibus. In varius mattis orci, et volutpat erat rhoncus nec.
              Mauris lectus nisi, pharetra eget mollis id, pulvinar in nisi. In dapibus urna turpis.
              Proin iaculis tincidunt turpis ac viverra. Nullam auctor, leo non imperdiet
              consectetur, purus orci posuere magna, eu varius nisl magna semper arcu. In sit amet
              scelerisque enim. In varius, libero euismod finibus congue, turpis neque semper dolor,
              sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit magna, quis
              aliquet arcu pulvinar in.
            </Text>
            <Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat,
              sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant morbi
              tristique senectus et netus et malesuada fames ac turpis egestas. Duis efficitur risus
              quis ante volutpat finibus. In varius mattis orci, et volutpat erat rhoncus nec.
              Mauris lectus nisi, pharetra eget mollis id, pulvinar in nisi. In dapibus urna turpis.
              Proin iaculis tincidunt turpis ac viverra. Nullam auctor, leo non imperdiet
              consectetur, purus orci posuere magna, eu varius nisl magna semper arcu. In sit amet
              scelerisque enim. In varius, libero euismod finibus congue, turpis neque semper dolor,
              sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit magna, quis
              aliquet arcu pulvinar in.
            </Text>
          </PanelContents>
        </Panel>
      </Flex>
    </Page>
  );
};

export default PagePanels;