diff --git a/demos/top-app-bar.html b/demos/top-app-bar.html new file mode 100644 index 00000000000..95988e62f7e --- /dev/null +++ b/demos/top-app-bar.html @@ -0,0 +1,143 @@ + + + + + + MDC Top App Bar Demo + + + + + + + + + +
+
+
+ menu + Title +
+
+ file_download + print + bookmark +
+
+
+ + + +
+
+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. +

+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. +

+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. +

+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. +

+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. +

+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. +

+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. +

+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. +

+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. +

+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. +

+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. +

+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. +

+
+
+ + + + + + diff --git a/demos/top-app-bar.scss b/demos/top-app-bar.scss new file mode 100644 index 00000000000..698d4f36ba3 --- /dev/null +++ b/demos/top-app-bar.scss @@ -0,0 +1,31 @@ +// +// Copyright 2017 Google Inc. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// + +@import "common"; +@import "../packages/mdc-top-app-bar/mdc-top-app-bar"; +@import "../packages/mdc-drawer/mdc-drawer"; +@import "../packages/mdc-list/mdc-list"; + +.demo-paragraph { + margin: 0; + padding: 20px 28px; +} + +@media (max-width: $mdc-top-app-bar-mobile-breakpoint) { + .demo-paragraph { + padding: 16px; + } +} diff --git a/package.json b/package.json index 6f37e634b60..e3eb1929397 100644 --- a/package.json +++ b/package.json @@ -151,6 +151,7 @@ "text-field", "theme", "toolbar", + "top-app-bar", "typography", "demos", "infrastructure", @@ -176,6 +177,7 @@ "mdc-ripple", "mdc-selection-control", "mdc-slider", - "mdc-textfield" + "mdc-textfield", + "mdc-top-app-bar" ] } diff --git a/packages/material-components-web/index.js b/packages/material-components-web/index.js index 6fe16e86a5e..534701070da 100644 --- a/packages/material-components-web/index.js +++ b/packages/material-components-web/index.js @@ -35,6 +35,7 @@ import * as snackbar from '@material/snackbar/index'; import * as tabs from '@material/tabs/index'; import * as textField from '@material/textfield/index'; import * as toolbar from '@material/toolbar/index'; +import * as topAppBar from '@material/top-app-bar/index'; // Register all components autoInit.register('MDCLineRipple', lineRipple.MDCLineRipple); @@ -58,6 +59,7 @@ autoInit.register('MDCMenu', menu.MDCMenu); autoInit.register('MDCSelect', select.MDCSelect); autoInit.register('MDCSlider', slider.MDCSlider); autoInit.register('MDCToolbar', toolbar.MDCToolbar); +autoInit.register('MDCTopAppBar', topAppBar.MDCTopAppBar); // Export all components. export { @@ -82,4 +84,5 @@ export { tabs, textField, toolbar, + topAppBar, }; diff --git a/packages/material-components-web/material-components-web.scss b/packages/material-components-web/material-components-web.scss index d791151ceb0..c75a5eda455 100644 --- a/packages/material-components-web/material-components-web.scss +++ b/packages/material-components-web/material-components-web.scss @@ -40,4 +40,5 @@ @import "@material/textfield/mdc-text-field"; @import "@material/theme/mdc-theme"; @import "@material/toolbar/mdc-toolbar"; +@import "@material/top-app-bar/mdc-top-app-bar"; @import "@material/typography/mdc-typography"; diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json index 6a28bb043e1..6c35aca89e7 100644 --- a/packages/material-components-web/package.json +++ b/packages/material-components-web/package.json @@ -44,6 +44,7 @@ "@material/textfield": "^0.31.0", "@material/theme": "^0.30.0", "@material/toolbar": "^0.30.0", + "@material/top-app-bar": "^0.0.0", "@material/typography": "^0.28.0" } } diff --git a/packages/mdc-top-app-bar/README.md b/packages/mdc-top-app-bar/README.md new file mode 100644 index 00000000000..f90425b997b --- /dev/null +++ b/packages/mdc-top-app-bar/README.md @@ -0,0 +1,103 @@ +# Top App Bar + +MDC Top App Bar acts as a container for items such as application title, navigation menu, and action items, among other +things. Top app bars scroll with content by default. + +## Design & API Documentation + + + +## Installation + +``` +npm install --save @material/top-app-bar +``` + +## Usage + +### HTML Structure + +```html +
+
+
+ menu + Title +
+
+
+``` + +Top app bars can accommodate multiple icons on the right: + +```html +
+
+
+ menu + Title +
+
+ file_download + print + bookmark +
+
+
+``` + +### JavaScript + +```js + // Instantiation + var topAppBarElement = document.querySelector('#topAppBar'); + var topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarElement); + + // Listen for navigation icon events + topAppBarElement.addEventListener('MDCTopAppBar:nav', function () { + // do something + }); +``` + +### CSS Classes + +Class | Description +--- | --- +`mdc-top-app-bar` | Mandatory + +### Sass Mixins + +Mixin | Description +--- | --- +`mdc-top-app-bar-ink-color($color)` | Sets the ink color of the top app bar +`mdc-top-app-bar-icon-ink-color($color)` | Sets the ink color of the top app bar icons +`mdc-top-app-bar-fill-color($color)` | Sets the fill color of the top app bar +`mdc-top-app-bar-fill-color-accessible($color)` | Sets the fill color of the top app bar and automatically sets a high-contrast ink color + +### `MDCTopAppBar` + +See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript. + +#### `MDCTopAppBarAdapter` + +Method Signature | Description +--- | --- +`hasClass(className: string) => boolean` | Checks if the root element of the component has the given className. +`addClass(className: string) => void` | Adds a class to the root element of the component. +`removeClass(className: string) => void` | Removes a class from the root element of the component. +`registerNavigationIconInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the native navigation icon element for a given event. +`deregisterNavigationIconInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the native navigation icon element for a given event. +`notifyNavigationIconClicked() => void` | Emits a custom event `MDCTopAppBar:nav` when the navigation icon is clicked. + +### Events + +Event Name | Event Data Structure | Description +--- | --- | --- +`MDCTopAppBar:nav` | None | Emits when the navigation icon is clicked. diff --git a/packages/mdc-top-app-bar/_mixins.scss b/packages/mdc-top-app-bar/_mixins.scss new file mode 100644 index 00000000000..240e195d6b6 --- /dev/null +++ b/packages/mdc-top-app-bar/_mixins.scss @@ -0,0 +1,72 @@ +// +// Copyright 2017 Google Inc. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// + +@import "@material/theme/variables"; // for mdc-theme-accessible-ink-color +@import "@material/theme/mixins"; +@import "@material/ripple/mixins"; +@import "./variables"; + +// +// Public +// + +@mixin mdc-top-app-bar-ink-color($color) { + @include mdc-theme-prop(color, $color); +} + +@mixin mdc-top-app-bar-fill-color($color) { + @include mdc-theme-prop(background-color, $color); +} + +@mixin mdc-top-app-bar-fill-color-accessible($color) { + @include mdc-top-app-bar-fill-color($color); + @include mdc-top-app-bar-ink-color(mdc-theme-accessible-ink-color($color)); +} + +@mixin mdc-top-app-bar-icon-ink-color($color) { + .mdc-top-app-bar__icon, + .mdc-top-app-bar__menu-icon { + @include mdc-theme-prop(color, $color); + @include mdc-states($color); + } +} + +// +// Private +// + +// Applies styles to the different types of icons that can exist in top-app-bars. +// Both .mdc-top-app-bar__icon and .mdc-top-app-bar__menu-icon share all styles except for +// horizontal padding. +@mixin mdc-top-app-bar-icon_() { + @include mdc-ripple-surface; + @include mdc-ripple-radius-unbounded; + + display: flex; + position: relative; + align-items: center; + justify-content: center; + width: $mdc-top-app-bar-icon-size; + height: $mdc-top-app-bar-icon-size; + padding: $mdc-top-app-bar-icon-padding; + border: none; + outline: none; + background-color: transparent; + fill: currentColor; + color: inherit; + text-decoration: none; + cursor: pointer; +} diff --git a/packages/mdc-top-app-bar/_variables.scss b/packages/mdc-top-app-bar/_variables.scss new file mode 100644 index 00000000000..df59bfa9dea --- /dev/null +++ b/packages/mdc-top-app-bar/_variables.scss @@ -0,0 +1,30 @@ +// +// Copyright 2017 Google Inc. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// + +$mdc-top-app-bar-row-height: 64px; +$mdc-top-app-bar-title-left-padding: 10px; +$mdc-top-app-bar-section-vertical-padding: 8px; +$mdc-top-app-bar-section-horizontal-padding: 12px; + +$mdc-top-app-bar-icon-padding: 12px; + +$mdc-top-app-bar-mobile-breakpoint: 599px; + +$mdc-top-app-bar-mobile-row-height: 56px; +$mdc-top-app-bar-mobile-title-left-padding: 12px; +$mdc-top-app-bar-mobile-section-padding: 4px; + +$mdc-top-app-bar-icon-size: 24px; diff --git a/packages/mdc-top-app-bar/adapter.js b/packages/mdc-top-app-bar/adapter.js new file mode 100644 index 00000000000..b4b3c793bc2 --- /dev/null +++ b/packages/mdc-top-app-bar/adapter.js @@ -0,0 +1,71 @@ +/** + * @license + * Copyright 2018 Google Inc. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* eslint no-unused-vars: [2, {"args": "none"}] */ + +/** + * Adapter for MDC Top App Bar + * + * Defines the shape of the adapter expected by the foundation. Implement this + * adapter to integrate the Top App Bar into your framework. See + * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md + * for more information. + * + * @record + */ +class MDCTopAppBarAdapter { + /** + * Adds a class to the root Element. + * @param {string} className + */ + addClass(className) {} + + /** + * Removes a class from the root Element. + * @param {string} className + */ + removeClass(className) {} + + /** + * Returns true if the root Element contains the given class. + * @param {string} className + * @return {boolean} + */ + hasClass(className) {} + + + /** + * Registers an event handler on the navigation icon element for a given event. + * @param {string} type + * @param {function(!Event): undefined} handler + */ + registerNavigationIconInteractionHandler(type, handler) {} + + /** + * Deregisters an event handler on the navigation icon element for a given event. + * @param {string} type + * @param {function(!Event): undefined} handler + */ + deregisterNavigationIconInteractionHandler(type, handler) {} + + /** + * Emits an event when the navigation icon is clicked. + */ + notifyNavigationIconClicked() {} +} + +export default MDCTopAppBarAdapter; diff --git a/packages/mdc-top-app-bar/constants.js b/packages/mdc-top-app-bar/constants.js new file mode 100644 index 00000000000..51a406ec8a5 --- /dev/null +++ b/packages/mdc-top-app-bar/constants.js @@ -0,0 +1,25 @@ +/** + * Copyright 2017 Google Inc. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** @enum {string} */ +const strings = { + NAVIGATION_EVENT: 'MDCTopAppBar:nav', + TITLE_SELECTOR: '.mdc-top-app-bar__title', + MENU_ICON_SELECTOR: '.mdc-top-app-bar__menu-icon', + ACTION_ICON_SELECTOR: '.mdc-top-app-bar__icon', +}; + +export {strings}; diff --git a/packages/mdc-top-app-bar/foundation.js b/packages/mdc-top-app-bar/foundation.js new file mode 100644 index 00000000000..9c273f46e69 --- /dev/null +++ b/packages/mdc-top-app-bar/foundation.js @@ -0,0 +1,66 @@ +/** + * Copyright 2018 Google Inc. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import {strings} from './constants'; + +import MDCTopAppBarAdapter from './adapter'; + +import MDCFoundation from '@material/base/foundation'; + +/** + * @extends {MDCFoundation} + * @final + */ +class MDCTopAppBarFoundation extends MDCFoundation { + /** @return enum {string} */ + static get strings() { + return strings; + } + + /** + * {@see MDCTopAppBarAdapter} for typing information on parameters and return + * types. + * @return {!MDCTopAppBarAdapter} + */ + static get defaultAdapter() { + return /** @type {!MDCTopAppBarAdapter} */ ({ + hasClass: (/* className: string */) => {}, + addClass: (/* className: string */) => {}, + removeClass: (/* className: string */) => {}, + registerNavigationIconInteractionHandler: (/* type: string, handler: EventListener */) => {}, + deregisterNavigationIconInteractionHandler: (/* type: string, handler: EventListener */) => {}, + notifyNavigationIconClicked: () => {}, + }); + } + + /** + * @param {!MDCTopAppBarAdapter} adapter + */ + constructor(adapter) { + super(Object.assign(MDCTopAppBarFoundation.defaultAdapter, adapter)); + + this.navClickHandler_ = () => this.adapter_.notifyNavigationIconClicked(); + } + + init() { + this.adapter_.registerNavigationIconInteractionHandler('click', this.navClickHandler_); + } + + destroy() { + this.adapter_.deregisterNavigationIconInteractionHandler('click', this.navClickHandler_); + } +} + +export default MDCTopAppBarFoundation; diff --git a/packages/mdc-top-app-bar/index.js b/packages/mdc-top-app-bar/index.js new file mode 100644 index 00000000000..6fd91d554c1 --- /dev/null +++ b/packages/mdc-top-app-bar/index.js @@ -0,0 +1,95 @@ +/** + * @license + * Copyright 2018 Google Inc. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import MDCTopAppBarAdapter from './adapter'; +import MDCTopAppBarFoundation from './foundation'; +import MDCComponent from '@material/base/component'; +import {MDCRipple} from '@material/ripple/index'; +import {strings} from './constants'; + +/** + * @extends {MDCComponent} + * @final + */ +class MDCTopAppBar extends MDCComponent { + /** + * @param {...?} args + */ + constructor(...args) { + super(...args); + /** @private {?Element} */ + this.navIcon_; + /** @type {?Array} */ + this.iconRipples_; + } + + initialize( + rippleFactory = (el) => MDCRipple.attachTo(el)) { + this.navIcon_ = this.root_.querySelector(strings.MENU_ICON_SELECTOR); + + // Get all icons in the toolbar and instantiate the ripples + const icons = [].slice.call(this.root_.querySelectorAll(strings.ACTION_ICON_SELECTOR)); + icons.push(this.navIcon_); + + this.iconRipples_ = icons.map((icon) => { + const ripple = rippleFactory(icon); + ripple.unbounded = true; + return ripple; + }); + } + + destroy() { + this.iconRipples_.forEach((iconRipple) => iconRipple.destroy()); + } + + /** + * @param {!Element} root + * @return {!MDCTopAppBar} + */ + static attachTo(root) { + return new MDCTopAppBar(root); + } + + /** + * @return {!MDCTopAppBarFoundation} + */ + getDefaultFoundation() { + return new MDCTopAppBarFoundation( + /** @type {!MDCTopAppBarAdapter} */ (Object.assign({ + hasClass: (className) => this.root_.classList.contains(className), + addClass: (className) => this.root_.classList.add(className), + removeClass: (className) => this.root_.classList.remove(className), + registerNavigationIconInteractionHandler: (evtType, handler) => { + if (this.navIcon_) { + this.navIcon_.addEventListener(evtType, handler); + } + }, + deregisterNavigationIconInteractionHandler: (evtType, handler) => { + if (this.navIcon_) { + this.navIcon_.removeEventListener(evtType, handler); + } + }, + notifyNavigationIconClicked: () => { + this.emit(strings.NAVIGATION_EVENT, {}); + }, + }) + ) + ); + } +} + +export {MDCTopAppBar, MDCTopAppBarFoundation}; diff --git a/packages/mdc-top-app-bar/mdc-top-app-bar.scss b/packages/mdc-top-app-bar/mdc-top-app-bar.scss new file mode 100644 index 00000000000..e67729e0410 --- /dev/null +++ b/packages/mdc-top-app-bar/mdc-top-app-bar.scss @@ -0,0 +1,87 @@ +// +// Copyright 2017 Google Inc. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// + +@import "@material/rtl/mixins"; +@import "@material/typography/mixins"; +@import "./mixins"; +@import "./variables"; + +// postcss-bem-linter: define top-app-bar +.mdc-top-app-bar { + @include mdc-top-app-bar-fill-color-accessible(primary); + @include mdc-top-app-bar-icon-ink-color(text-primary-on-primary); + + display: flex; + position: relative; + flex-direction: column; + justify-content: space-between; + box-sizing: border-box; + width: 100%; + + &__row { + display: flex; + position: relative; + box-sizing: border-box; + width: 100%; + height: auto; + min-height: $mdc-top-app-bar-row-height; + } + + &__section { + display: inline-flex; + flex: 1; + align-items: center; + min-width: 0; + padding: $mdc-top-app-bar-section-vertical-padding $mdc-top-app-bar-section-horizontal-padding; + z-index: 1; + + &--align-start { + justify-content: flex-start; + order: -1; + } + + &--align-end { + justify-content: flex-end; + order: 1; + } + } + + &__title { + @include mdc-typography(title); + @include mdc-rtl-reflexive-box(margin, left, $mdc-top-app-bar-title-left-padding); + + z-index: 1; + } + + &__icon, + &__menu-icon { + @include mdc-top-app-bar-icon_; + } + + @media (max-width: $mdc-top-app-bar-mobile-breakpoint) { + .mdc-top-app-bar__row { + min-height: $mdc-top-app-bar-mobile-row-height; + } + + .mdc-top-app-bar__section { + padding: $mdc-top-app-bar-mobile-section-padding; + } + + .mdc-top-app-bar__title { + @include mdc-rtl-reflexive-box(margin, left, $mdc-top-app-bar-mobile-title-left-padding); + } + } +} diff --git a/packages/mdc-top-app-bar/package.json b/packages/mdc-top-app-bar/package.json new file mode 100644 index 00000000000..5d9ea017e32 --- /dev/null +++ b/packages/mdc-top-app-bar/package.json @@ -0,0 +1,27 @@ +{ + "name": "@material/top-app-bar", + "version": "0.0.0", + "description": "The Material Components for the web top app bar component", + "license": "Apache-2.0", + "repository": { + "type": "git", + "url": "https://github.com/material-components/material-components-web.git" + }, + "keywords": [ + "material components", + "material design", + "top app bar", + "top-app-bar", + "topappbar" + ], + "dependencies": { + "@material/base": "^0.29.0", + "@material/ripple": "^0.31.0", + "@material/rtl": "^0.30.0", + "@material/theme": "^0.30.0", + "@material/typography": "^0.28.0" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/scripts/webpack/css-bundle-factory.js b/scripts/webpack/css-bundle-factory.js index b1ff610af28..75bd9d89375 100644 --- a/scripts/webpack/css-bundle-factory.js +++ b/scripts/webpack/css-bundle-factory.js @@ -154,6 +154,7 @@ module.exports = class { 'mdc.textfield': getAbsolutePath('/packages/mdc-textfield/mdc-text-field.scss'), 'mdc.theme': getAbsolutePath('/packages/mdc-theme/mdc-theme.scss'), 'mdc.toolbar': getAbsolutePath('/packages/mdc-toolbar/mdc-toolbar.scss'), + 'mdc.top-app-bar': getAbsolutePath('/packages/mdc-top-app-bar/mdc-top-app-bar.scss'), 'mdc.typography': getAbsolutePath('/packages/mdc-typography/mdc-typography.scss'), }, output: { diff --git a/test/build/goldens/build-config-dev-env.golden.json b/test/build/goldens/build-config-dev-env.golden.json index e2db288cabe..838f299e945 100644 --- a/test/build/goldens/build-config-dev-env.golden.json +++ b/test/build/goldens/build-config-dev-env.golden.json @@ -69,6 +69,7 @@ "theme/theme-white": "/demos/theme/theme-white.scss", "theme/theme-yellow": "/demos/theme/theme-yellow.scss", "toolbar/toolbar": "/demos/toolbar/toolbar.scss", + "top-app-bar": "/demos/top-app-bar.scss", "typography": "/demos/typography.scss" }, "output": { diff --git a/test/build/goldens/build-config-no-env.golden.json b/test/build/goldens/build-config-no-env.golden.json index 11d6158f66e..e8d12829318 100644 --- a/test/build/goldens/build-config-no-env.golden.json +++ b/test/build/goldens/build-config-no-env.golden.json @@ -104,6 +104,9 @@ ], "toolbar": [ "/packages/mdc-toolbar/index.js" + ], + "topAppBar": [ + "/packages/mdc-top-app-bar/index.js" ] }, "output": { @@ -240,6 +243,7 @@ "mdc.textfield": "/packages/mdc-textfield/mdc-text-field.scss", "mdc.theme": "/packages/mdc-theme/mdc-theme.scss", "mdc.toolbar": "/packages/mdc-toolbar/mdc-toolbar.scss", + "mdc.top-app-bar": "/packages/mdc-top-app-bar/mdc-top-app-bar.scss", "mdc.typography": "/packages/mdc-typography/mdc-typography.scss" }, "output": { diff --git a/test/build/goldens/build-config-prod-env.golden.json b/test/build/goldens/build-config-prod-env.golden.json index 91346016f29..fedf911d410 100644 --- a/test/build/goldens/build-config-prod-env.golden.json +++ b/test/build/goldens/build-config-prod-env.golden.json @@ -104,6 +104,9 @@ ], "toolbar": [ "/packages/mdc-toolbar/index.js" + ], + "topAppBar": [ + "/packages/mdc-top-app-bar/index.js" ] }, "output": { @@ -240,6 +243,7 @@ "mdc.textfield": "/packages/mdc-textfield/mdc-text-field.scss", "mdc.theme": "/packages/mdc-theme/mdc-theme.scss", "mdc.toolbar": "/packages/mdc-toolbar/mdc-toolbar.scss", + "mdc.top-app-bar": "/packages/mdc-top-app-bar/mdc-top-app-bar.scss", "mdc.typography": "/packages/mdc-typography/mdc-typography.scss" }, "output": { diff --git a/test/unit/mdc-top-app-bar/foundation.test.js b/test/unit/mdc-top-app-bar/foundation.test.js new file mode 100644 index 00000000000..c12a689e660 --- /dev/null +++ b/test/unit/mdc-top-app-bar/foundation.test.js @@ -0,0 +1,60 @@ +/** + * Copyright 2016 Google Inc. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {assert} from 'chai'; +import td from 'testdouble'; +import {captureHandlers} from '../helpers/foundation'; + +import {verifyDefaultAdapter} from '../helpers/foundation'; +import MDCTopAppBarFoundation from '../../../packages/mdc-top-app-bar/foundation'; +import {strings} from '../../../packages/mdc-top-app-bar/constants'; + +suite('MDCTopAppBarFoundation'); + +test('exports strings', () => { + assert.isTrue('strings' in MDCTopAppBarFoundation); + assert.deepEqual(MDCTopAppBarFoundation.strings, strings); +}); + +test('defaultAdapter returns a complete adapter implementation', () => { + verifyDefaultAdapter(MDCTopAppBarFoundation, [ + 'hasClass', 'addClass', 'removeClass', 'registerNavigationIconInteractionHandler', + 'deregisterNavigationIconInteractionHandler', 'notifyNavigationIconClicked', + ]); +}); + +const setupTest = () => { + const mockAdapter = td.object(MDCTopAppBarFoundation.defaultAdapter); + + const foundation = new MDCTopAppBarFoundation(mockAdapter); + + return {foundation, mockAdapter}; +}; + +test('on click emits navigation icon event', () => { + const {foundation, mockAdapter} = setupTest(); + const handlers = captureHandlers(mockAdapter, 'registerNavigationIconInteractionHandler'); + foundation.init(); + handlers.click(); + td.verify(mockAdapter.notifyNavigationIconClicked(), {times: 1}); +}); + +test('click handler removed from navigation icon during destroy', () => { + const {foundation, mockAdapter} = setupTest(); + foundation.init(); + foundation.destroy(); + td.verify(mockAdapter.deregisterNavigationIconInteractionHandler('click', td.matchers.isA(Function))); +}); diff --git a/test/unit/mdc-top-app-bar/mdc-top-app-bar.test.js b/test/unit/mdc-top-app-bar/mdc-top-app-bar.test.js new file mode 100644 index 00000000000..7627ed846bc --- /dev/null +++ b/test/unit/mdc-top-app-bar/mdc-top-app-bar.test.js @@ -0,0 +1,152 @@ +/** + * Copyright 2017 Google Inc. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {assert} from 'chai'; +import bel from 'bel'; +import domEvents from 'dom-events'; +import td from 'testdouble'; + +import {MDCTopAppBar} from '../../../packages/mdc-top-app-bar'; + +function getFixture(removeIcon) { + const html = bel` +
+
+
+
+ menu + Title +
+
+ + file_download + + print + bookmark +
+
+ +
+
+
+
+
+
+
+
+ `; + + if (removeIcon) { + const icon = html.querySelector('.mdc-top-app-bar__menu-icon'); + icon.parentNode.removeChild(icon); + } + + return html; +} + +class FakeRipple { + constructor(root) { + this.root = root; + this.destroy = td.func('.destroy'); + this.unbounded = null; + } +} + +function setupTest(removeIcon = false) { + const fixture = getFixture(removeIcon); + const root = fixture.querySelector('.mdc-top-app-bar'); + const adjust = fixture.querySelector('.mdc-top-app-bar-fixed-adjust'); + const icon = root.querySelector('.mdc-top-app-bar__menu-icon'); + const component = new MDCTopAppBar(root, undefined, (el) => new FakeRipple(el)); + + return {root, adjust, component, icon}; +} + +suite('MDCTopAppBar'); + +test('attachTo initializes and returns an MDCTopAppBar instance', () => { + assert.isTrue(MDCTopAppBar.attachTo(getFixture()) instanceof MDCTopAppBar); +}); + +test('constructor instantiates icon ripples', () => { + const {root, component} = setupTest(); + const totalIcons = root.querySelectorAll('.mdc-top-app-bar__icon, .mdc-top-app-bar__menu-icon').length; + + assert.isTrue(component.iconRipples_.length === totalIcons); +}); + +test('destroy destroys icon ripples', () => { + const {component} = setupTest(); + component.destroy(); + component.iconRipples_.forEach((icon) => { + td.verify(icon.destroy()); + }); +}); + +test('adapter#hasClass returns true if the root element has specified class', () => { + const {root, component} = setupTest(); + root.classList.add('foo'); + assert.isTrue(component.getDefaultFoundation().adapter_.hasClass('foo')); +}); + +test('adapter#hasClass returns false if the root element does not have specified class', () => { + const {component} = setupTest(); + assert.isFalse(component.getDefaultFoundation().adapter_.hasClass('foo')); +}); + +test('adapter#addClass adds a class to the root element', () => { + const {root, component} = setupTest(); + component.getDefaultFoundation().adapter_.addClass('foo'); + assert.isTrue(root.classList.contains('foo')); +}); + +test('adapter#removeClass removes a class from the root element', () => { + const {root, component} = setupTest(); + root.classList.add('foo'); + component.getDefaultFoundation().adapter_.removeClass('foo'); + assert.isFalse(root.classList.contains('foo')); +}); + +test('registerNavigationIconInteractionHandler does not add a handler to the nav icon ', () => { + const {component} = setupTest(true); + const handler = td.func('eventHandler'); + + assert.doesNotThrow( + () => component.getDefaultFoundation().adapter_.registerNavigationIconInteractionHandler('click', handler)); +}); + +test('#adapter.registerNavigationIconInteractionHandler adds a handler to the nav icon ' + + 'element for a given event', () => { + const {component, icon} = setupTest(); + const handler = td.func('eventHandler'); + component.getDefaultFoundation().adapter_.registerNavigationIconInteractionHandler('click', handler); + domEvents.emit(icon, 'click'); + td.verify(handler(td.matchers.anything())); +}); + +test('#adapter.deregisterNavigationIconInteractionHandler removes a handler from the nav icon ' + + 'element for a given event', () => { + const {component, icon} = setupTest(); + const handler = td.func('eventHandler'); + + icon.addEventListener('click', handler); + component.getDefaultFoundation().adapter_.deregisterNavigationIconInteractionHandler('click', handler); + domEvents.emit(icon, 'click'); + td.verify(handler(td.matchers.anything()), {times: 0}); +}); diff --git a/webpack.config.js b/webpack.config.js index 77e6726ca9d..82cd26ed75e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -95,6 +95,7 @@ if (!env.isDev()) { tabs: [path.resolve('./packages/mdc-tabs/index.js')], textfield: [path.resolve('./packages/mdc-textfield/index.js')], toolbar: [path.resolve('./packages/mdc-toolbar/index.js')], + topAppBar: [path.resolve('./packages/mdc-top-app-bar/index.js')], }, output: { path: OUT_DIR_ABS,