feat(top app bar): dense variant (#520)

Author: mgr34

packages/top-app-bar/README.md

@@ -62,8 +62,9 @@ short | Boolean | Enables short variant.
 shortCollapsed | Boolean | Enables short collapsed variant.
 prominent | Boolean | Enables prominent variant.
 fixed | Boolean | Enables fixed variant.
+dense | Boolean | Enables dense variant.
 
-> NOTE: As per design guidelines, prominent variant should not be used with short or short collapsed.
+> NOTE: As per design guidelines, prominent and dense variants should not be used with short or short collapsed.
 
 
 ## Icons

packages/top-app-bar/index.js

@@ -47,6 +47,7 @@ export default class TopAppBar extends React.Component {
     const {classList} = this.state;
     const {
       className,
+      dense,
       fixed,
       prominent,
       short,
@@ -58,6 +59,7 @@ export default class TopAppBar extends React.Component {
       'mdc-top-app-bar--short': shortCollapsed || short,
       'mdc-top-app-bar--short-collapsed': shortCollapsed,
       'mdc-top-app-bar--prominent': prominent,
+      'mdc-top-app-bar--dense': dense,
     });
   }
 
@@ -222,6 +224,7 @@ export default class TopAppBar extends React.Component {
 TopAppBar.propTypes = {
   actionItems: PropTypes.arrayOf(PropTypes.element),
   className: PropTypes.string,
+  dense: PropTypes.bool,
   fixed: PropTypes.bool,
   navigationIcon: PropTypes.element,
   prominent: PropTypes.bool,
@@ -236,6 +239,7 @@ TopAppBar.propTypes = {
 TopAppBar.defaultProps = {
   actionItems: null,
   className: '',
+  dense: false,
   fixed: false,
   navigationIcon: null,
   prominent: false,

test/screenshot/golden.json

@@ -32,6 +32,8 @@
   "top-app-bar/standard": "7a2dd6318d62ac2eabd66f1b28100db7c15840ccb753660065fa9524db6435d6",
   "top-app-bar/standardNoActionItems": "6d361edb994cafcc6ac720336d12ee7d7114745993e16abd6e6b00f078424ff2",
   "top-app-bar/standardWithNavigationIconElement": "95afd559c35dede805e4d4b51ad1fabd82b4117c358a8679e3166b88e059bf68",
+  "top-app-bar/dense": "e8e288b997fa6cf112053e4ee62ed7c3d601c23a87eaece29348fc172dd5ebe4",
+  "top-app-bar/prominentDense": "280995e7c3df950c72ea39f1673e359c9032ebdfa3ab0309831591b9f79227d6",
   "drawer/permanentBelowTopAppBar": "587ee2605c4b3e3f0408c6130b824b58587e05cedf9b964e14fc481b9de1e4c2",
   "drawer/dismissibleBelowTopAppBar": "a9bf24c0edd3dcc9167516ce3bdd146fd1a352c4f5b9ea76a1f9dad1ba61e0f8",
   "drawer/permanent": "6355905c2241b5e6fdddc2e25119a1cc3b062577375a88b59e6750c4b76e4561",

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import TopAppBar from '../../../packages/top-app-bar';
+
+import MaterialIcon from '../../../packages/material-icon';
+import MainTopAppBarContent from './mainContent';
+
+const TopAppBarDenseScreenshotTest = () => {
+  return (
+    <div className='top-app-bar-container'>
+      <TopAppBar
+        dense
+        title='Miami, FL'
+        navigationIcon={<MaterialIcon
+          icon='menu'
+          onClick={() => console.log('dense click')}
+        />}
+        actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
+      />
+      <MainTopAppBarContent />
+    </div>
+  );
+};
+
+export default TopAppBarDenseScreenshotTest;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import TopAppBar from '../../../packages/top-app-bar';
+
+import MaterialIcon from '../../../packages/material-icon';
+import MainTopAppBarContent from './mainContent';
+
+const TopAppBarProminentDenseScreenshotTest = () => {
+  return (
+    <div className='top-app-bar-container'>
+      <TopAppBar
+        prominent
+        dense
+        title='Miami, FL'
+        navigationIcon={<MaterialIcon
+          icon='menu'
+          onClick={() => console.log('prominent dense click')}
+        />}
+        actionItems={[<MaterialIcon key='item' icon='bookmark' />]}
+      />
+      <MainTopAppBarContent />
+    </div>
+  );
+};
+
+export default TopAppBarProminentDenseScreenshotTest;

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

@@ -1,6 +1,8 @@
 export default [
   'fixed',
+  'dense',
   'prominent',
+  'prominentDense',
   'short',
   'shortCollapsed',
   'standard',

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

@@ -63,6 +63,17 @@ test('has correct fixed class', () => {
   assert.isTrue(wrapper.hasClass('mdc-top-app-bar--fixed'));
 });
 
+test('has correct dense class', () => {
+  const wrapper = shallow(<TopAppBar dense />);
+  assert.isTrue(wrapper.hasClass('mdc-top-app-bar--dense'));
+});
+
+test('has correct prominent dense class', () => {
+  const wrapper = shallow(<TopAppBar prominent dense />);
+  assert.isTrue(wrapper.hasClass('mdc-top-app-bar--dense'));
+  assert.isTrue(wrapper.hasClass('mdc-top-app-bar--prominent'));
+});
+
 test('navigationIcon is rendered with navigation icon class', () => {
   const wrapper = mount(
     <TopAppBar