Merge pull request #210 from dabapps/app-root-component

App root component interacts with NavBar and Footer

README.md

@@ -13,6 +13,12 @@ npm install
 npm start
 ```
 
+Or run the examples directory with livereloading
+
+```shell
+npm run budo
+```
+
 ## Usage
 
 ### Install

browserslist

@@ -0,0 +1,9 @@
+last 10 Chrome versions
+last 10 Firefox versions
+last 10 Edge versions
+last 10 iOS versions
+last 10 Android versions
+last 10 Opera versions
+last 10 Safari versions
+last 10 ExplorerMobile versions
+Explorer >= 9

examples/index.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import {
+  AppRoot,
+  Button,
+  Column,
+  Container,
+  ContentBox,
+  ContentBoxFooter,
+  ContentBoxHeader,
+  DabIpsum,
+  Footer,
+  NavBar,
+  Row,
+  Section,
+  SpacedGroup,
+} from '../src/ts';
+
+const app = document.createElement('app');
+
+document.body.appendChild(app);
+
+ReactDOM.render(
+  (
+    <AppRoot>
+      <NavBar shy>
+        <Container>
+          <h1 className="display-inline font-size-large">
+            NavBar
+          </h1>
+
+          <SpacedGroup className="float-right">
+            <Button>
+              Login
+            </Button>
+          </SpacedGroup>
+        </Container>
+      </NavBar>
+
+      <Container>
+        <h1>
+          Example
+        </h1>
+
+        <DabIpsum />
+
+        <ContentBox>
+          <ContentBoxHeader>
+            <h2>
+              Example
+            </h2>
+          </ContentBoxHeader>
+
+          <Section>
+            <Row>
+              <Column sm={6} md={3}>
+                Column 1
+              </Column>
+              <Column sm={6} md={3}>
+                Column 1
+              </Column>
+              <Column sm={6} md={3}>
+                Column 1
+              </Column>
+              <Column sm={6} md={3}>
+                Column 1
+              </Column>
+            </Row>
+          </Section>
+
+          <Section>
+            <Row>
+              <Column sm={6} md={3}>
+                Column 1
+              </Column>
+              <Column sm={6} md={3}>
+                Column 1
+              </Column>
+              <Column sm={6} md={3}>
+                Column 1
+              </Column>
+              <Column sm={6} md={3}>
+                Column 1
+              </Column>
+            </Row>
+          </Section>
+
+          <ContentBoxFooter>
+            <SpacedGroup block className="padding-vertical-base">
+              <Button>
+                Cancel
+              </Button>
+              <Button className="primary">
+                Submit
+              </Button>
+            </SpacedGroup>
+          </ContentBoxFooter>
+        </ContentBox>
+      </Container>
+
+      <Footer sticky>
+        <Container>
+          <p>
+            Footer
+          </p>
+        </Container>
+      </Footer>
+    </AppRoot>
+  ),
+  app
+);

examples/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../tsconfig.json"
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.8.36",
+  "version": "0.9.0",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",
@@ -13,6 +13,7 @@
     "lint": "npm run lint-js && npm run lint-less",
     "tests": "jest",
     "test": "npm run lint && npm run tests -- --coverage --runInBand",
+    "budo": "budo src/less/index.less examples/index.tsx --live -- -t node-lessify -p [tsify -p examples/tsconfig.json]",
     "prepublish": "./scripts/dist"
   },
   "repository": {
@@ -49,7 +50,6 @@
     "less": "2.7.2",
     "normalize.css": "6.0.0",
     "postcss": "5.2.17",
-    "postcss-cli": "3.2.0",
     "random-seed": "0.3.0",
     "react": "15.5.4",
     "react-dom": "15.5.4",
@@ -64,7 +64,7 @@
     "@types/node": "7.0.13",
     "@types/react-test-renderer": "15.4.5",
     "brfs": "1.4.3",
-    "concurrently": "3.4.0",
+    "budo": "11.1.0",
     "css-loader": "0.28.7",
     "envify": "4.0.0",
     "enzyme": "3.2.0",
@@ -77,6 +77,7 @@
     "less-loader": "4.0.5",
     "lesshint": "3.3.1",
     "livereload": "0.6.2",
+    "node-lessify": "0.1.5",
     "postcss-loader": "2.0.7",
     "react-docgen-typescript": "1.2.2",
     "react-scripts-ts": "2.8.0",
@@ -86,8 +87,6 @@
     "ts-jest": "20.0.14",
     "tslint": "5.8.0",
     "tslint-config-dabapps": "github:dabapps/tslint-config-dabapps#v0.3.1",
-    "watch-less-do-more": "0.2.0",
-    "watchify": "3.9.0",
     "webpack": "3.7.1"
   },
   "peerDependencies": {

src/less/app.less

@@ -0,0 +1,4 @@
+.app-root {
+  position: relative;
+  min-height: 100%;
+}

src/less/footer.less

@@ -0,0 +1,12 @@
+.footer {
+  height: @footer-height;
+  background-color: @footer-background;
+  border-top: @footer-border;
+
+  &.sticky {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+}

src/less/index.less

@@ -2,8 +2,10 @@
 
 @import 'variables.less';
 @import 'overrides.less';
+@import 'app.less';
 @import 'grid.less';
 @import 'nav-bar.less';
+@import 'footer.less';
 @import 'buttons.less';
 @import 'inputs.less';
 @import 'layout.less';

src/less/layout.less

@@ -12,7 +12,7 @@
   margin-left: -@gutter-width / 2;
   margin-right: -@gutter-width / 2;
 
-  &:last-child {
+  &:last-of-type {
     border-bottom: @border-none;
   }
 }

src/less/nav-bar.less

@@ -1,7 +1,3 @@
-body.with-fixed-nav-bar {
-  padding-top: @nav-bar-height;
-}
-
 .nav-bar {
   .clearfix();
   padding: @padding-base 0;

src/less/overrides.less

@@ -12,6 +12,7 @@ body {
   font-size: @font-size-base;
   line-height: @line-height-base;
   letter-spacing: @letter-spacing-base;
+  height: 100%;
 }
 
 h1,

src/less/variables.less

@@ -70,7 +70,11 @@
 @nav-bar-link-text-decoration-hover: @link-text-decoration-hover;
 @nav-bar-background: @body-background;
 @nav-bar-border: @border-base;
-@nav-bar-height: @input-height + @padding-base * 2;
+@nav-bar-height: auto;
+
+@footer-background: @body-background;
+@footer-border: @border-base;
+@footer-height: auto;
 
 @button-text-color-dark: @grey-dark;
 @button-text-color-light: @grey-lightest;

src/ts/components/app/root.examples.md

@@ -0,0 +1,23 @@
+#### Example
+
+```js static
+<AppRoot>
+  <NavBar shy>
+    <Container>
+      NavBar
+    </Container>
+  </NavBar>
+
+  <Container>
+    <h1>
+      Content
+    </h1>
+  </Container>
+
+  <Footer sticky>
+    <Container>
+      Footer
+    </Container>
+  </Footer>
+</AppRoot>
+```

src/ts/components/app/root.tsx

@@ -0,0 +1,53 @@
+import * as classNames from 'classnames';
+import * as React from 'react';
+import { HTMLProps, PureComponent } from 'react';
+import store, { StoreState } from '../../store';
+import { ComponentProps } from '../../types';
+
+export type AppRootProps = HTMLProps<HTMLElement> & ComponentProps & StoreState;
+
+/**
+ * This is the most important part of your app.
+ * This component interacts with other Roe components to adjust styles at the root level.
+ * Your app must have an AppRoot if you wish to used a fixed / shy NavBar or sticky Footer.
+ */
+export class AppRootUnconnected extends PureComponent<AppRootProps, {}> {
+  public render () {
+    const {
+      component: Component = 'div',
+      children,
+      className,
+      hasStickyFooter,
+      hasFixedNavBar,
+      navBarHeight,
+      footerHeight,
+      ...remainingProps,
+    } = this.props;
+
+    const myClassNames = [
+      'app-root',
+      hasStickyFooter && 'has-sticky-footer' || null,
+      hasFixedNavBar && 'has-fixed-nav-bar' || null,
+      className,
+    ];
+
+    const style = {
+      paddingTop: hasFixedNavBar && navBarHeight,
+      paddingBottom: hasStickyFooter && footerHeight,
+    };
+
+    return (
+      <Component
+        {...remainingProps}
+        className={classNames(myClassNames)}
+        style={style}
+      >
+        {children}
+      </Component>
+    );
+  }
+}
+
+export const AppRoot = store.connect(AppRootUnconnected);
+
+export default AppRoot;

src/ts/components/collapse.tsx

@@ -104,7 +104,7 @@ export class Collapse extends PureComponent<CollapseProps, CollapseState> {
     });
   }
 
-  public componentWillMount () {
+  public componentWillUnmount () {
     window.clearTimeout(this.timeout);
   }
 

src/ts/components/navigation/footer.examples.md

@@ -0,0 +1,17 @@
+#### Example
+
+```js
+<Footer>
+  <p>
+    Footer
+  </p>
+</Footer>
+```
+
+#### Less variables
+
+```less
+@footer-background: @body-background;
+@footer-border: @border-base;
+@footer-height: auto;
+```