Add Pane component

src/Pane/Pane.js

@@ -0,0 +1,21 @@
+// @flow
+import React, { type Node } from 'react';
+
+import _Pane from './styled';
+
+type Props = {
+  border: boolean | 'shadow',
+  className?: string,
+  children?: Node,
+  isFullWidth?: boolean
+};
+
+const Pane = ({ children, ...props }: Props) => <_Pane {...props}>{children}</_Pane>;
+
+Pane.defaultProps = {
+  className: undefined,
+  children: undefined,
+  isFullWidth: false
+};
+
+export default Pane;

src/Pane/Pane.mdx

@@ -0,0 +1,58 @@
+---
+name: Pane
+route: /layout/pane
+menu: Layout
+---
+
+import { Playground, PropsTable } from 'docz';
+import Pane from '../Pane';
+
+# Pane
+
+## Import
+
+`import { Pane } from 'fannypack'`
+
+## Basic Usage
+
+A `<Pane>` is the same as a `<Box>`, except it has a default border radius, and has the ability to add different types of borders to it. Using `<Pane>` and `<Box>` together are most likely the two building blocks for the layout of your app.
+
+<Playground>
+  <Pane backgroundColor="whiteDarker" padding="large">Hello world</Pane>
+</Playground>
+
+## Shadowed
+
+<Playground>
+  <Pane border="shadow" padding="large">Hello world</Pane>
+</Playground>
+
+## Bordered
+
+<Playground>
+  <Pane border padding="large">Hello world</Pane>
+</Playground>
+
+## Full width
+
+<Playground>
+  <Pane border isFullWidth padding="large">Hello world</Pane>
+</Playground>
+
+## Props
+
+<PropsTable of={Pane} />
+
+## Theming
+
+### Schema
+
+```jsx
+{
+  base: string | Object,
+  border: {
+    default: string | Object,
+    shadow: string | Object
+  }
+}
+```

src/Pane/index.js

@@ -0,0 +1,2 @@
+export { default } from './Pane';
+export { default as Pane } from './Pane';

src/Pane/styled.js

@@ -0,0 +1,40 @@
+import { palette, theme } from 'styled-tools';
+import styled, { css } from '../styled';
+import { Box } from '../primitives';
+
+const Pane = styled(Box)`
+  display: inline-flex;
+  border-radius: 3px;
+  flex-wrap: wrap;
+
+  ${props =>
+    props.border === 'shadow' &&
+    css`
+      box-shadow: 0px 2px 4px 0px ${palette('whiteDarkest')}, 0px 0px 0px 1px ${palette('whiteDarkest')};
+
+      & {
+        ${theme('fannypack.Pane.border.shadow')};
+      }
+    `};
+  ${props =>
+    props.border === true &&
+    css`
+      border: 1px solid ${palette('whiteDarkest')};
+
+      & {
+        ${theme('fannypack.Pane.border.default')};
+      }
+    `};
+  ${props =>
+    props.isFullWidth &&
+    css`
+      width: 100%;
+      margin-right: 0px !important;
+    `};
+
+  & {
+    ${theme('fannypack.Pane.base')};
+  }
+`;
+
+export default Pane;

src/index.js

@@ -23,6 +23,7 @@ export { Label } from './Label';
 export { Link } from './Link';
 export { List, ListItem } from './List';
 export { Navigation } from './Navigation';
+export { Pane } from './Pane';
 export { Paragraph } from './Paragraph';
 export { Radio, RadioGroup, RadioGroupField } from './Radio';
 export { Rating, RatingStar } from './Rating';

src/themes/themes.mdx

@@ -178,6 +178,7 @@ const App = () => (
   Label: LabelThemeConfig,
   Link: LinkThemeConfig,
   List: ListThemeConfig,
+  Pane: PaneThemeConfig,
   Paragraph: ParagraphThemeConfig,
   Radio: RadioThemeConfig,
   RadioGroup: RadioGroupThemeConfig
@@ -217,6 +218,7 @@ Components:
 - [LabelThemeConfig](/form/label#theming)
 - [LinkThemeConfig](/typography/link#theming)
 - [ListThemeConfig](/typography/list#theming)
+- [PaneThemeConfig](/layout/pane#theming)
 - [ParagraphThemeConfig](/typography/paragraph#theming)
 - [RadioThemeConfig](/form/radio#theming)
 - [RadioGroupThemeConfig](/form/radiogroup#theming)

src/types.js

@@ -152,6 +152,13 @@ export type ListThemeConfig = {
 export type NavigationThemeConfig = {
   base?: Stylesheet
 };
+export type PaneThemeConfig = {
+  base?: Stylesheet,
+  border?: {
+    default?: Stylesheet,
+    shadow?: Stylesheet
+  }
+};
 export type ParagraphThemeConfig = {
   base?: Stylesheet
 };
@@ -285,6 +292,7 @@ export type ThemeConfig = {
   Link?: LinkThemeConfig,
   List?: ListThemeConfig,
   Navigation?: NavigationThemeConfig,
+  Pane?: PaneThemeConfig,
   Paragraph?: ParagraphThemeConfig,
   Radio?: RadioThemeConfig,
   RadioGroup?: RadioGroupThemeConfig,