Merge pull request #6 from Bedrock-Layouts/appboundary

Appboundary

package.json

@@ -32,6 +32,7 @@
     "@bedrock-layout/grid": "file:./packages/grid",
     "@bedrock-layout/padbox": "file:./packages/padbox",
     "@bedrock-layout/columns": "file:./packages/columns",
+    "@bedrock-layout/appboundary": "file:./packages/appboundary",
     "@reach/visually-hidden": "^0.9.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

packages/appboundary/.gitignore

@@ -0,0 +1,102 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+lib
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

packages/appboundary/README.md

@@ -0,0 +1,32 @@
+# `@bedrock-layout/appboundary`
+
+Layout helper that clamps that app at the xxlarge breakpoint
+
+## When to Use
+
+Used to control the width of the app on xlarge screens
+
+## How to install
+
+`npm install @bedrock-layout/appboundary`
+
+## Usage
+
+```javascript
+import AppBoundary from '@bedrock-layout/appboundary';
+
+<AppBoundary>
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+  <div>6</div>
+</AppBoundary>;
+```
+
+## API
+
+| Property | Description | Type      | Default |
+| -------- | ----------- | --------- | ------- |
+| children |             | ReactNode | -       |

packages/appboundary/__tests__/__snapshots__/appboundary.test.js.snap

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppBoundary correct usage renders default gutters 1`] = `
+.c0 {
+  padding: 0;
+  max-width: 100%;
+  overflow: hidden;
+  height: 100%;
+}
+
+.c1 {
+  margin: 0 auto;
+  padding: 0 0;
+  max-width: 90rem;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in vestibulum tortor, vitae venenatis lectus. Praesent gravida dapibus neque sit amet molestie. Morbi blandit eu dolor a luctus. Vestibulum sollicitudin elit ac nunc scelerisque rhoncus. Nulla felis sapien, condimentum ut imperdiet vel, aliquet id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ultrices, quam nec scelerisque malesuada, lectus elit semper diam, ac placerat purus tortor et enim.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in vestibulum tortor, vitae venenatis lectus. Praesent gravida dapibus neque sit amet molestie. Morbi blandit eu dolor a luctus. Vestibulum sollicitudin elit ac nunc scelerisque rhoncus. Nulla felis sapien, condimentum ut imperdiet vel, aliquet id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ultrices, quam nec scelerisque malesuada, lectus elit semper diam, ac placerat purus tortor et enim.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in vestibulum tortor, vitae venenatis lectus. Praesent gravida dapibus neque sit amet molestie. Morbi blandit eu dolor a luctus. Vestibulum sollicitudin elit ac nunc scelerisque rhoncus. Nulla felis sapien, condimentum ut imperdiet vel, aliquet id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ultrices, quam nec scelerisque malesuada, lectus elit semper diam, ac placerat purus tortor et enim.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in vestibulum tortor, vitae venenatis lectus. Praesent gravida dapibus neque sit amet molestie. Morbi blandit eu dolor a luctus. Vestibulum sollicitudin elit ac nunc scelerisque rhoncus. Nulla felis sapien, condimentum ut imperdiet vel, aliquet id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ultrices, quam nec scelerisque malesuada, lectus elit semper diam, ac placerat purus tortor et enim.
+    </p>
+  </div>
+</div>
+`;
+
+exports[`AppBoundary correct usage renders with theme overrides 1`] = `
+.c0 {
+  padding: 0;
+  max-width: 100%;
+  overflow: hidden;
+  height: 100%;
+}
+
+.c1 {
+  margin: 0 auto;
+  padding: 0 0;
+  max-width: 90rem;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in vestibulum tortor, vitae venenatis lectus. Praesent gravida dapibus neque sit amet molestie. Morbi blandit eu dolor a luctus. Vestibulum sollicitudin elit ac nunc scelerisque rhoncus. Nulla felis sapien, condimentum ut imperdiet vel, aliquet id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ultrices, quam nec scelerisque malesuada, lectus elit semper diam, ac placerat purus tortor et enim.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in vestibulum tortor, vitae venenatis lectus. Praesent gravida dapibus neque sit amet molestie. Morbi blandit eu dolor a luctus. Vestibulum sollicitudin elit ac nunc scelerisque rhoncus. Nulla felis sapien, condimentum ut imperdiet vel, aliquet id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ultrices, quam nec scelerisque malesuada, lectus elit semper diam, ac placerat purus tortor et enim.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in vestibulum tortor, vitae venenatis lectus. Praesent gravida dapibus neque sit amet molestie. Morbi blandit eu dolor a luctus. Vestibulum sollicitudin elit ac nunc scelerisque rhoncus. Nulla felis sapien, condimentum ut imperdiet vel, aliquet id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ultrices, quam nec scelerisque malesuada, lectus elit semper diam, ac placerat purus tortor et enim.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in vestibulum tortor, vitae venenatis lectus. Praesent gravida dapibus neque sit amet molestie. Morbi blandit eu dolor a luctus. Vestibulum sollicitudin elit ac nunc scelerisque rhoncus. Nulla felis sapien, condimentum ut imperdiet vel, aliquet id ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ultrices, quam nec scelerisque malesuada, lectus elit semper diam, ac placerat purus tortor et enim.
+    </p>
+  </div>
+</div>
+`;
+
+exports[`AppBoundary incorrect usage renders default with console error with no children 1`] = `
+.c0 {
+  padding: 0;
+  max-width: 100%;
+  overflow: hidden;
+  height: 100%;
+}
+
+.c1 {
+  margin: 0 auto;
+  padding: 0 0;
+  max-width: 90rem;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  />
+</div>
+`;

packages/appboundary/__tests__/appboundary.test.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { create } from 'react-test-renderer';
+import { ThemeProvider } from 'styled-components';
+import AppBoundary from '../src';
+
+const Lorem = () => (
+  <>
+    {Array.from(Array(4).keys()).map(i => (
+      <p key={i}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in
+        vestibulum tortor, vitae venenatis lectus. Praesent gravida dapibus
+        neque sit amet molestie. Morbi blandit eu dolor a luctus. Vestibulum
+        sollicitudin elit ac nunc scelerisque rhoncus. Nulla felis sapien,
+        condimentum ut imperdiet vel, aliquet id ante. Pellentesque habitant
+        morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+        Quisque ultrices, quam nec scelerisque malesuada, lectus elit semper
+        diam, ac placerat purus tortor et enim.
+      </p>
+    ))}
+  </>
+);
+
+describe('AppBoundary', () => {
+  describe('correct usage', () => {
+    test('AppBoundary is not null', () => {
+      expect(AppBoundary).toBeTruthy();
+    });
+
+    it('renders default gutters', () => {
+      const appboundary = create(
+        <AppBoundary>
+          <Lorem />
+        </AppBoundary>
+      );
+      expect(appboundary.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders with theme overrides', () => {
+      const appboundary = create(
+        <ThemeProvider theme={{ breakPoints: { xlargeOnly: '1600px' } }}>
+          <AppBoundary>
+            <Lorem />
+          </AppBoundary>
+        </ThemeProvider>
+      );
+      expect(appboundary.toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe('incorrect usage', () => {
+    let originalError;
+    let spy;
+    beforeEach(() => {
+      originalError = console.error;
+      spy = jest.fn();
+      console.error = spy;
+    });
+    afterEach(() => {
+      console.error = originalError;
+    });
+
+    it('renders default with console error with no children', () => {
+      expect(spy.mock.calls.length).toBe(0);
+
+      const errorStack = create(<AppBoundary />);
+
+      expect(spy.mock.calls.length).toBe(1);
+      expect(errorStack.toJSON()).toMatchSnapshot();
+    });
+  });
+});

packages/appboundary/examples/basic.example.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import AppBoundary from '@bedrock-layout/appboundary';
+import styled from 'styled-components';
+
+const BorderedBox = styled.div`
+  border: 1px solid black;
+`;
+BorderedBox.displayName = 'BorderedBox';
+
+let title = 'AppBoundary';
+let name = 'Basic';
+
+function Example() {
+  return (
+    <AppBoundary>
+      <BorderedBox>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
+        consequuntur corrupti beatae commodi vitae, perspiciatis totam provident
+        architecto doloribus aperiam sapiente, incidunt nihil suscipit
+        voluptatibus tempore est dolor! Iusto, vero.
+      </BorderedBox>
+      <BorderedBox>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
+        consequuntur corrupti beatae commodi vitae, perspiciatis totam provident
+        architecto doloribus aperiam sapiente, incidunt nihil suscipit
+        voluptatibus tempore est dolor! Iusto, vero.
+      </BorderedBox>
+      <BorderedBox>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
+        consequuntur corrupti beatae commodi vitae, perspiciatis totam provident
+        architecto doloribus aperiam sapiente, incidunt nihil suscipit
+        voluptatibus tempore est dolor! Iusto, vero.
+      </BorderedBox>
+      <BorderedBox>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
+        consequuntur corrupti beatae commodi vitae, perspiciatis totam provident
+        architecto doloribus aperiam sapiente, incidunt nihil suscipit
+        voluptatibus tempore est dolor! Iusto, vero.
+      </BorderedBox>
+    </AppBoundary>
+  );
+}
+
+Example.story = { name };
+export const Comp = Example;
+export default {
+  title,
+};