feat(panel): add panel component

Author: arturbien

src/components/Panel/Panel.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import {
+  createBorderStyles,
+  createBoxStyles,
+  createWellBorderStyles
+} from '../common';
+
+const createPanelStyles = (variant = 'default') => {
+  switch (variant) {
+    case 'well':
+      return css`
+        ${createWellBorderStyles(true)}
+      `;
+    case 'outside':
+      return css`
+        ${createBorderStyles({ windowBorders: true })}
+      `;
+    default:
+      return css`
+        ${createBorderStyles()}
+      `;
+  }
+};
+
+const StyledPanel = styled.div`
+  position: relative;
+  font-size: 1rem;
+  ${({ variant }) => createPanelStyles(variant)}
+  ${createBoxStyles()}
+`;
+
+const Panel = React.forwardRef(function Panel(props, ref) {
+  const { children, variant, ...otherProps } = props;
+  return (
+    <StyledPanel ref={ref} variant={variant} {...otherProps}>
+      {children}
+    </StyledPanel>
+  );
+});
+
+Panel.defaultProps = {
+  children: null,
+  shadow: false,
+  variant: 'outside'
+};
+
+Panel.propTypes = {
+  variant: propTypes.oneOf(['outside', 'inside', 'well']),
+  children: propTypes.node,
+  shadow: propTypes.bool
+};
+
+export default Panel;

src/components/Panel/Panel.spec.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Panel from './Panel';
+
+describe('<Panel />', () => {
+  it('should render panel', () => {
+    const { container } = render(<Panel />);
+    const panel = container.firstChild;
+
+    expect(panel).toBeInTheDocument();
+  });
+
+  it('should render custom styles', () => {
+    const { container } = render(
+      <Panel style={{ backgroundColor: 'papayawhip' }} />
+    );
+    const panel = container.firstChild;
+
+    expect(panel).toHaveAttribute('style', 'background-color: papayawhip;');
+  });
+
+  it('should render children', async () => {
+    const { findByText } = render(
+      <Panel>
+        <span>Cool panel</span>
+      </Panel>
+    );
+    const content = await findByText(/cool panel/i);
+
+    expect(content).toBeInTheDocument();
+  });
+
+  it('should render custom props', () => {
+    const customProps = { title: 'panel' };
+    const { container } = render(<Panel {...customProps} />);
+    const panel = container.firstChild;
+
+    expect(panel).toHaveAttribute('title', 'panel');
+  });
+});

src/components/Panel/Panel.stories.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Panel } from 'react95';
+
+const Wrapper = styled.div`
+  padding: 5rem;
+  background: ${({ theme }) => theme.material};
+  #default-buttons button {
+    margin-bottom: 1rem;
+    margin-right: 1rem;
+  }
+
+  #cutout {
+    background: ${({ theme }) => theme.canvas};
+    padding: 1rem;
+    width: 300px;
+  }
+`;
+
+export default {
+  title: 'Panel',
+  component: Panel,
+  decorators: [story => <Wrapper>{story()}</Wrapper>]
+};
+
+export const Default = () => (
+  <Panel
+    variant='outside'
+    shadow
+    style={{ padding: '0.5rem', lineHeight: '1.5', width: 600 }}
+  >
+    <p style={{ padding: '0.5rem' }}>
+      Notice the subtle difference in borders. The lightest border is not on the
+      edge of this panel.
+    </p>
+    <Panel variant='default' style={{ margin: '1rem', padding: '1rem' }}>
+      This panel on the other hand has the lightest border on the edge. Use this
+      panel inside &apos;outside&apos; panels.
+      <br />
+      <Panel
+        variant='well'
+        style={{ marginTop: '1rem', padding: '1rem', height: 200, width: 100 }}
+      >
+        Put some content here
+      </Panel>
+    </Panel>
+    <Panel
+      variant='well'
+      style={{ marginTop: '1rem', padding: '0.1rem 0.25rem', width: '100%' }}
+    >
+      The &apos;well&apos; variant of a panel is often used as a window footer.
+    </Panel>
+  </Panel>
+);
+
+Default.story = {
+  name: 'default'
+};

src/components/index.js

@@ -19,6 +19,7 @@ export { default as List } from './List/List';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as LoadingIndicator } from './LoadingIndicator/LoadingIndicator';
 export { default as NumberField } from './NumberField/NumberField';
+export { default as Panel } from './Panel/Panel';
 export { default as Progress } from './Progress/Progress';
 export { default as Radio } from './Radio/Radio';
 export { default as Select } from './Select/Select';