Add BasicWide layout

BasicWide layout is for templates that require more width.

package.json

@@ -1,5 +1,5 @@
 {
-	"version": "0.2.4",
+	"version": "0.2.5",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",

src/index.ts

@@ -1,4 +1,5 @@
 export * as Basic from './layouts/Basic'
+export * as BasicWide from './layouts/BasicWide'
 export * as BasicNarrow from './layouts/BasicNarrow'
 export * as LeftSidebarWithMenu from './layouts/LeftSidebarWithMenu'
 export * as LeftSidebar from './layouts/LeftSidebar'

src/layouts/BasicWide/index.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import styled, { createGlobalStyle } from 'styled-components'
+import TopBar from '../../widgets/TopBar'
+import {configVar, loadConfig} from '../../utilities/helpers'
+
+const Config = createGlobalStyle({
+	...loadConfig(),
+})
+
+const ContentBase = styled('main')({
+	boxSizing: 'border-box',
+})
+
+export const ContentContainer = styled('div')({
+	padding: '0 1rem',
+	boxSizing: 'border-box',
+	margin: '0 auto',
+	maxWidth: `calc(${configVar('base-width')} * 3)`,
+	width: '100%',
+})
+
+type Props = {
+	brand?: React.ReactNode,
+	userLink?: React.ReactNode,
+	topBarCenter?: React.ReactChild,
+	topBarComponent?: React.ElementType,
+}
+
+export const Layout: React.FC<Props> = ({
+	brand,
+	userLink,
+	topBarCenter,
+	topBarComponent = 'div',
+	children,
+}) => {
+	return (
+		<>
+			<Config />
+			{
+				(
+					brand
+					|| userLink
+					|| topBarCenter
+				)
+				&& (
+					<TopBar
+						brand={brand}
+						userLink={userLink}
+						baseComponent={topBarComponent}
+					>
+						{topBarCenter}
+					</TopBar>
+				)
+			}
+			<ContentBase>
+				{children}
+			</ContentBase>
+		</>
+	)
+}