feat: upgrade page components

.storybook/Story.scss

@@ -133,6 +133,18 @@
   }
 }
 
+.appWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+@media screen and (min-width: $nav-menu--breakpoint) {
+  .appWrapper {
+    flex-direction: row;
+  }
+}
+
 .mockOverlay {
   position: absolute;
   width: 100%;

CHANGELOG.md

@@ -5,6 +5,9 @@
 - [#256](https://github.com/influxdata/clockface/pull/256): Add markdown documentation for `NavMenu` component family
 - [#255](https://github.com/influxdata/clockface/pull/255): Introduce `TextPopover` as a simplified composed version of `Popover`
 - [#255](https://github.com/influxdata/clockface/pull/255): [Breaking] rename `Popover` prop `initiallyVisible` to `visible` (now allows full external control of popover state)
+- [#254](https://github.com/influxdata/clockface/pull/254): Add markdown documentation for `Page` components
+- [#254](https://github.com/influxdata/clockface/pull/254): [Breaking] Simplify how "Presentation Mode" is handled
+- [#254](https://github.com/influxdata/clockface/pull/254): Fix style bug in `Page` components that prevented `PageHeader` and `PageContents` from aligning properly
 - [#252](https://github.com/influxdata/clockface/pull/252): Add new colors and gradients from InfluxData Brand guidelines
 - [#251](https://github.com/influxdata/clockface/pull/251): Introduce `Wand`, `WrenchNav`, and `DisksNav` icons to icon font
 

src/Components/AppWrapper/AppWrapper.scss

@@ -23,3 +23,22 @@
     flex-direction: row;
   }
 }
+
+/*
+   Presentation Mode
+   -----------------------------------------------------------------------------
+*/
+
+.clockface--app-wrapper__presentation-mode {
+  .cf-nav, 
+  .cf-page-header {
+    display: none;
+  }
+
+  .cf-page-contents__fixed,
+  .cf-page-contents__fluid,
+  .cf-page-contents.cf-dapper-scrollbars .cf-page-contents__fluid,
+  .cf-page-contents.cf-dapper-scrollbars .cf-page-contents__fixed {
+    padding: $page--gutter-small;
+  }
+}

src/Components/AppWrapper/AppWrapper.tsx

@@ -8,13 +8,17 @@ import './AppWrapper.scss'
 // Types
 import {StandardProps} from '../../Types'
 
-interface Props extends StandardProps {}
+interface Props extends StandardProps {
+  /** Hides the page header and nav menu so that the contents can take up the whole screen */
+  presentationMode: boolean
+}
 
 export class AppWrapper extends PureComponent<Props> {
   public static readonly displayName = 'AppWrapper'
 
   public static defaultProps = {
     testID: 'app-wrapper',
+    presentationMode: false,
   }
 
   public render() {
@@ -33,8 +37,11 @@ export class AppWrapper extends PureComponent<Props> {
   }
 
   private get className(): string {
-    const {className} = this.props
+    const {className, presentationMode} = this.props
 
-    return classnames('clockface--app-wrapper', {[`${className}`]: className})
+    return classnames('clockface--app-wrapper', {
+      'clockface--app-wrapper__presentation-mode': presentationMode,
+      [`${className}`]: className,
+    })
   }
 }

src/Components/NavMenu/NavMenu.stories.tsx

@@ -34,7 +34,7 @@ navMenuStories.add(
   'NavMenu',
   () => (
     <div className="story--example">
-      <NavMenu hide={boolean('hide', false)}>
+      <NavMenu>
         <NavMenu.Item
           titleLink={className => (
             <a className={className} href="#">

src/Components/NavMenu/NavMenu.tsx

@@ -13,10 +13,7 @@ import {StandardProps} from '../../Types'
 // Styles
 import './NavMenu.scss'
 
-interface Props extends StandardProps {
-  /** Prevents NavMenu from rendering (used in presentation mode) */
-  hide?: boolean
-}
+type Props = StandardProps
 
 export class NavMenu extends PureComponent<Props> {
   public static readonly displayName = 'NavMenu'
@@ -33,11 +30,7 @@ export class NavMenu extends PureComponent<Props> {
   }
 
   public render() {
-    const {children, testID, hide, id, style} = this.props
-
-    if (hide) {
-      return
-    }
+    const {children, testID, id, style} = this.props
 
     const className = classnames('cf-nav', {
       [`${this.props.className}`]: this.props.className,

src/Components/Page/FullPage.md

@@ -0,0 +1,26 @@
+# Full Page Example
+
+This an example of all the `Page` components working together.
+
+### Usage
+```tsx
+import {Page} from '@influxdata/clockface'
+```
+```tsx
+<Page>
+  <Page.Header fullWidth={true} />
+  <Page.Contents fullWidth={true}>
+    // Contents go here
+  </Page.Contents>
+</Page>
+```
+
+### Example
+<!-- STORY -->
+
+
+<!-- STORY HIDE START -->
+
+<!-- STORY HIDE END -->
+
+<!-- PROPS -->

src/Components/Page/Page.md

@@ -0,0 +1,31 @@
+# Page
+
+The `Page` component family is for laying out pages, hence the name. It is best used in combination with `AppWrapper` and `NavMenu`. *NOTE:* `Page` components used outside of `AppWrapper` may not appear as expected.
+
+### Usage
+```tsx
+import {Page} from '@influxdata/clockface'
+```
+In combination with `AppWrapper` and `NavMenu`:
+
+```tsx
+<AppWrapper>
+  <NavMenu />
+  <Page>
+    <Page.Header />
+    <Page.Contents>
+      // Contents go here
+    </Page.Contents>
+  </Page>
+</AppWrapper>
+```
+
+### Example
+<!-- STORY -->
+
+
+<!-- STORY HIDE START -->
+
+<!-- STORY HIDE END -->
+
+<!-- PROPS -->

src/Components/Page/Page.scss

@@ -7,34 +7,62 @@
 
 .cf-page {
   width: 100%;
-  flex: 1 0 calc(100% - #{$nav-menu--size});
+  flex: 1 0 100%;
   display: flex;
   flex-direction: column;
   align-items: stretch;
+
+  .cf-nav + & {
+    flex: 1 0 calc(100% - #{$nav-menu--size});
+  }
 }
 
 @media screen and (min-width: $nav-menu--breakpoint) {
   .cf-page {
     width: auto;
     height: 100%;
+    flex: 1 0 100%;
   }
 }
 
+/*
+   Gutters & Max Width
+   -----------------------------------------------------------------------------
+*/
+
+.cf-page-header--fluid,
+.cf-page-header--fixed,
+.cf-page-contents__fluid,
+.cf-page-contents__fixed {
+  width: 100%;
+  padding: 0 $page--gutter-small;
+}
+
+.cf-page-header--fixed,
+.cf-page-contents__fixed {
+  margin: 0 auto;
+  max-width: $page--max-width;
+}
+
+/*
+   Page Header
+   -----------------------------------------------------------------------------
+*/
+
 .cf-page-header {
-  height: $page--header-size;
+  width: 100%;
+  flex: 0 0 $page--header-size;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.cf-page-header--container {
+.cf-page-header--fluid,
+.cf-page-header--fixed {
   display: flex;
-  padding: 0 $page--gutter-small;
   align-items: center;
   justify-content: space-between;
   flex-wrap: nowrap;
-  width: 100%;
-  max-width: $page--max-width;
 }
 
 .cf-page-header--left,
@@ -77,10 +105,15 @@
   cursor: default;
 }
 
+/*
+  Page Contents
+  ------------------------------------------------------------------------------
+*/
+
 .cf-page-contents {
   width: 100%;
   position: relative;
-  height: calc(100% - #{$page--header-size}) !important;
+  flex: 1 0 calc(100% - #{$page--header-size});
   overflow: hidden;
 
   & > .cf-dapper-scrollbars--track-y {
@@ -92,58 +125,36 @@
   }
 }
 
-.cf-page-contents--padding {
+.cf-page-contents__fluid {
   min-height: 100%;
-  padding: $page--gutter-small;
-  padding-top: 0;
 }
 
-.cf-page-contents--container {
+.cf-page-contents__fixed {
   margin: 0 auto;
-  max-width: $page--max-width;
-}
-
-/*
-  Full Width Page
-  ------------------------------------------------------------------------------
-*/
-
-.cf-page-contents.full-width .cf-page-contents--padding {
-  padding: 0 $page--gutter-small;
-}
-
-.cf-page-contents--container.full-width {
-  max-width: 100%;
-}
-
-.cf-page-header.full-width .cf-page-header--container {
-  max-width: 100%;
 }
 
 /*
   Scrollable Page
   ------------------------------------------------------------------------------
 */
 
-.cf-page-contents.cf-dapper-scrollbars > .cf-page-contents--padding {
+.cf-page-contents.cf-dapper-scrollbars .cf-page-contents__fluid,
+.cf-page-contents.cf-dapper-scrollbars .cf-page-contents__fixed {
   padding-bottom: $page--gutter-small;
 }
 
 /*
-  Full Height Mode
+  Non-Scrollable Page
   ------------------------------------------------------------------------------
 */
 
-.cf-page-contents.full-height {
-  height: 100% !important;
-}
-
-.cf-page-contents.full-height .cf-page-contents--padding {
-  padding: $cf-marg-b;
-}
+.cf-page-contents__no-scroll {
+  display: flex;
 
-.cf-page-contents.full-height.cf-dapper-scrollbars .cf-page-contents--padding {
-  padding-right: $cf-marg-c;
+  .cf-page-contents__fluid,
+  .cf-page-contents__fixed {
+    height: 100%;
+  }
 }
 
 /*
@@ -152,17 +163,21 @@
 */
 
 @media screen and (min-width: $nav-menu--breakpoint) {
-  .cf-page-header--container {
+  .cf-page-header--fluid,
+  .cf-page-header--fixed,
+  .cf-page-contents__fluid,
+  .cf-page-contents__fixed {
     padding: 0 $page--gutter;
   }
-  .cf-page-contents--padding {
-    padding: $page--gutter;
-    padding-top: 0;
-  }
-  .cf-page-contents.full-width .cf-page-contents--padding {
-    padding: 0 $page--gutter;
-  }
-  .cf-page-contents.cf-dapper-scrollbars > .cf-page-contents--padding {
+
+  .cf-page-contents.cf-dapper-scrollbars .cf-page-contents__fluid,
+  .cf-page-contents.cf-dapper-scrollbars .cf-page-contents__fixed {
     padding-bottom: $page--gutter;
   }
 }
+
+/*
+  PresentationMode
+  ------------------------------------------------------------------------------
+*/
+

src/Components/Page/Page.tsx

@@ -23,6 +23,7 @@ export class Page extends Component<Props> {
 
   public static defaultProps = {
     testID: 'page',
+    presentationMode: false,
   }
 
   public static Header = PageHeader

src/Components/Page/PageContents.md

@@ -0,0 +1,23 @@
+# Page Contents
+
+Used alongside `<Page.Header />` to layout  page, this component is for containing the body of the page.
+
+### Usage
+```tsx
+import {Page} from '@influxdata/clockface'
+```
+```tsx
+<Page.Contents>
+  // Contents go here
+</Page.Contents>
+```
+
+### Example
+<!-- STORY -->
+
+
+<!-- STORY HIDE START -->
+
+<!-- STORY HIDE END -->
+
+<!-- PROPS -->