Reusable Components: Panel

Description

We need a Panel component that we can use anywhere in our application. It should be able to accept a title, content and components in the footer.

const classes = {
  root: styles.classNameForRootElement,
  title: styles.classForTheTitle,
  close: styles.classForTheCloseButton,
  body: styles.classForTheBodyContainer,
  footer: 'custom-class-for-the-footer-container',
};

<Panel closable={false} onClose={onClose} classes={classes} modal={true}>
  <Panel.Header>Some title here</Panel.Header>
  <Panel.Content>
    <img src="something.png" />
    <div>
       <p>We should be able to add anything as the content<.p>
    </div>
  </Panel.Content>
  <Panel.Footer>
    <CustomFooterComponent />
  </Panel.Footer>
</Panel>

If the modal property is set to false, the panel should render in place. For example in a sidebar or anywhere else.

Properties

• title A string with for the main title (Optional)
• closable If true the panel should display a close icon at the top, defaults to false (Optional)
• onClose A callback when use clicks the close icon (Optional)
• modal If true it shows the panel like a modal window, defaults to false
• classes An object with custom classes to apply to the inner elements of the panel (Optional)

Design

The Panel component should only need the title and background styles from the design, The content will be provided by others.

[linux-nerd]

Am I the only one that doesn’t like the name closable? What about canBeClosed?

I am fine with closable. 😃

[crysfel]

No, the content should be independent of the Panel. We are going to add a placeholder for loading large images, I have a PR where I’m going to include that.