fix(top-app-bar): add fixed adjust component

packages/top-app-bar/FixedAdjust.js

@@ -0,0 +1,56 @@
+// The MIT License
+//
+// Copyright (c) 2018 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const FixedAdjust = (props) => {
+  const {
+    tag: Tag,
+    children,
+    className,
+    ...otherProps
+  } = props;
+
+  return (
+    <Tag
+      className={classnames('mdc-top-app-bar--fixed-adjust', className)}
+      {...otherProps}
+    >
+      {children}
+    </Tag>
+  );
+};
+
+FixedAdjust.propTypes = {
+  tag: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+FixedAdjust.defaultProps = {
+  tag: 'main',
+  className: '',
+};
+
+export default FixedAdjust;

packages/top-app-bar/README.md

@@ -26,23 +26,30 @@ import '@material/react-material-icon/dist/material-icon.css';
 
 ### Javascript Instantiation
 ```js
-import TopAppBar from '@material/react-top-app-bar';
+import TopAppBar, {TopAppBarFixedAdjust} from '@material/react-top-app-bar';
 import MaterialIcon from '@material/react-material-icon';
 
 const MyComponent = () => {
   return (
-    <TopAppBar
-      title='Miami, FL'
-      navigationIcon={<MaterialIcon
-        icon='menu'
-        onClick={() => console.log('click')}
-      />}
-      actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
-    />
+    <div>
+      <TopAppBar
+        title='Miami, FL'
+        navigationIcon={<MaterialIcon
+          icon='menu'
+          onClick={() => console.log('click')}
+        />}
+        actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
+      />
+      <TopAppBarFixedAdjust>
+        My exciting content!
+      </TopAppBarFixedAdjust>
+    </div>
   );
 }
 ```
 
+Use the `<TopAppBarFixedAdjust />` component to give your content top-padding, so it isn't hidden on page render.
+
 ## Props
 
 Prop Name | Type | Description

packages/top-app-bar/index.js

@@ -23,6 +23,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import TopAppBarFixedAdjust from './FixedAdjust';
 import {
   MDCFixedTopAppBarFoundation,
   MDCTopAppBarFoundation,
@@ -221,3 +222,5 @@ TopAppBar.defaultProps = {
   style: {},
   title: '',
 };
+
+export {TopAppBarFixedAdjust};

test/screenshot/golden.json

@@ -19,11 +19,11 @@
   "text-field": "196a5491b2cb5a2bd6256bf2921ec9bc615fb3723dcdbbc32e21b0cec452b0a2",
   "text-field/helper-text": "59604d0f39e0846fc97aae7573d317dded215282a677e4641c5e33426e3a2a1e",
   "text-field/icon": "c34dae5444deec222533b3f43448c0393b0c8543a5af4e50cc12d71611f366a7",
-  "top-app-bar/fixed": "90534d59d40f8c050aae022e94b0afa022a00d1e00c19e3f92dcc1908efcd831",
-  "top-app-bar/prominent": "34d03c5809067cc06a67dce1e03d3e1edaf306360479ac1955299d3eeffc6113",
-  "top-app-bar/short": "fe50f5577ef8c9def95450090eae4033192034dd0e0890407d4ab80e04e3e6a1",
-  "top-app-bar/shortCollapsed": "894054d0962880d7bd6dde5f05f496435e799254a5af490f929341f7995686f1",
-  "top-app-bar/standard": "90534d59d40f8c050aae022e94b0afa022a00d1e00c19e3f92dcc1908efcd831",
-  "top-app-bar/standardNoActionItems": "9102ece0efc0a040e0dc2b097c66d2ee5ecc9c91759aeb16ea5aa2baabe7307a",
-  "top-app-bar/standardWithNavigationIconElement": "91b10df9c4faf85ba63c84b1cf82a1c1143a3d8c4ba7ed8af477fabdc65ec25e"
+  "top-app-bar/fixed": "7a2dd6318d62ac2eabd66f1b28100db7c15840ccb753660065fa9524db6435d6",
+  "top-app-bar/prominent": "5a63148610f315001fbf80bd3f4b8ceb37691bd1a7ec81a33228bb3c2b364dae",
+  "top-app-bar/short": "0e0e8a6c812e93910a540689bc6a962a1c8097c9f4e8b9ca65f35994bb380cfc",
+  "top-app-bar/shortCollapsed": "5934b2260760fa716c461c55aadb5b2da2695a8eeb507cd4afe49e088e8a28c3",
+  "top-app-bar/standard": "7a2dd6318d62ac2eabd66f1b28100db7c15840ccb753660065fa9524db6435d6",
+  "top-app-bar/standardNoActionItems": "6d361edb994cafcc6ac720336d12ee7d7114745993e16abd6e6b00f078424ff2",
+  "top-app-bar/standardWithNavigationIconElement": "95afd559c35dede805e4d4b51ad1fabd82b4117c358a8679e3166b88e059bf68"
 }

test/screenshot/top-app-bar/fixed.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import TopAppBar from '../../../packages/top-app-bar';
 import MaterialIcon from '../../../packages/material-icon';
+import MainTopAppBarContent from './mainContent';
 
 const TopAppBarFixedScreenshotTest = () => {
   return (
@@ -14,6 +15,7 @@ const TopAppBarFixedScreenshotTest = () => {
         />}
         actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
       />
+      <MainTopAppBarContent />
     </div>
   );
 };

test/screenshot/top-app-bar/mainContent.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {TopAppBarFixedAdjust} from '../../../packages/top-app-bar';
+
+const MainTopAppBarContent = () => {
+  return (
+    <TopAppBarFixedAdjust>
+      <h1>
+        {'Look at me I\'m a header'}
+      </h1>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+      qui officia deserunt mollit anim id est laborum.
+    </TopAppBarFixedAdjust>
+  );
+};
+
+export default MainTopAppBarContent;

test/screenshot/top-app-bar/prominent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import TopAppBar from '../../../packages/top-app-bar';
 
 import MaterialIcon from '../../../packages/material-icon';
+import MainTopAppBarContent from './mainContent';
 
 const TopAppBarProminentScreenshotTest = () => {
   return (
@@ -15,6 +16,7 @@ const TopAppBarProminentScreenshotTest = () => {
         />}
         actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
       />
+      <MainTopAppBarContent />
     </div>
   );
 };

test/screenshot/top-app-bar/short.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import TopAppBar from '../../../packages/top-app-bar';
 import MaterialIcon from '../../../packages/material-icon';
+import MainTopAppBarContent from './mainContent';
 
 const TopAppBarShortScreenshotTest = () => {
   return (
@@ -14,6 +15,7 @@ const TopAppBarShortScreenshotTest = () => {
         />}
         actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
       />
+      <MainTopAppBarContent />
     </div>
   );
 };

test/screenshot/top-app-bar/shortCollapsed.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import TopAppBar from '../../../packages/top-app-bar';
 import MaterialIcon from '../../../packages/material-icon';
+import MainTopAppBarContent from './mainContent';
 
 const TopAppBarShortCollapsedScreenshotTest = () => {
   return (
@@ -12,6 +13,7 @@ const TopAppBarShortCollapsedScreenshotTest = () => {
           onClick={() => console.log('click')}
         />}
       />
+      <MainTopAppBarContent />
     </div>
   );
 };

test/screenshot/top-app-bar/standard.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import TopAppBar from '../../../packages/top-app-bar';
 import MaterialIcon from '../../../packages/material-icon';
+import MainTopAppBarContent from './mainContent';
 
 const TopAppBarStandardScreenshotTest = () => {
   return (
@@ -13,6 +14,7 @@ const TopAppBarStandardScreenshotTest = () => {
         />}
         actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
       />
+      <MainTopAppBarContent />
     </div>
   );
 };

test/screenshot/top-app-bar/standardNoActionItems.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import TopAppBar from '../../../packages/top-app-bar';
 import MaterialIcon from '../../../packages/material-icon';
+import MainTopAppBarContent from './mainContent';
 
 const TopAppBarStandardNoActionItemsScreenshotTest = () => {
   return (
@@ -12,6 +13,7 @@ const TopAppBarStandardNoActionItemsScreenshotTest = () => {
           onClick={() => console.log('click')}
         />}
       />
+      <MainTopAppBarContent />
     </div>
   );
 };

test/screenshot/top-app-bar/standardWithNavigationIconElement.js

@@ -2,6 +2,7 @@ import React from 'react';
 import TopAppBar from '../../../packages/top-app-bar';
 import MaterialIcon from '../../../packages/material-icon';
 import withRipple from '../../../packages/ripple';
+import MainTopAppBarContent from './mainContent';
 
 const NavigationIcon = ({
   hasRipple, initRipple, unbounded, ...otherProps // eslint-disable-line react/prop-types
@@ -37,6 +38,7 @@ const TopAppBarStandardWithNavigationIconElementScreenshotTest = () => {
         navigationIcon={<NavigationIconWithRipple unbounded />}
         actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
       />
+      <MainTopAppBarContent />
     </div>
   );
 };

test/unit/top-app-bar/FixedAdjust.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import {assert} from 'chai';
+import {shallow} from 'enzyme';
+import {TopAppBarFixedAdjust} from '../../../packages/top-app-bar/index';
+
+suite('TopAppBarFixedAdjust');
+
+test('classNames adds classes', () => {
+  const wrapper = shallow(<TopAppBarFixedAdjust className='test-class-name'>
+    hello
+  </TopAppBarFixedAdjust>);
+  assert.isTrue(wrapper.hasClass('test-class-name'));
+  assert.isTrue(wrapper.hasClass('mdc-top-app-bar--fixed-adjust'));
+});
+
+test('renders children', () => {
+  const wrapper = shallow(<TopAppBarFixedAdjust>
+    <span className='child-element'>HI</span>
+  </TopAppBarFixedAdjust>);
+  assert.equal(wrapper.find('.child-element').length, 1);
+});
+
+test('renders as a different tag name when passed props.tag', () => {
+  const wrapper = shallow(<TopAppBarFixedAdjust tag='div'>hello</TopAppBarFixedAdjust>);
+  assert.equal(wrapper.find('main').length, 0);
+  assert.equal(wrapper.type(), 'div');
+});