From 306aac76aee4639b965185c9ef3b38d608f24b4f Mon Sep 17 00:00:00 2001 From: Alan Date: Tue, 28 May 2019 13:25:48 +0200 Subject: [PATCH 01/24] add sub navigation STAR-620 --- src/components/navigation.tsx | 221 ++++---------------- src/components/navigation_desktop.tsx | 69 ++++++ src/components/navigation_mobile.tsx | 179 ++++++++++++++++ src/components/sub_navigation_menu.tsx | 33 +++ src/components/sub_navigation_menu_item.tsx | 30 +++ src/index.tsx | 5 + src/stories/layout.stories.tsx | 18 +- src/stylesheets/_navigation.scss | 5 +- src/stylesheets/_sub_navigation_menu.scss | 25 +++ src/stylesheets/main.scss | 1 + 10 files changed, 407 insertions(+), 179 deletions(-) create mode 100644 src/components/navigation_desktop.tsx create mode 100644 src/components/navigation_mobile.tsx create mode 100644 src/components/sub_navigation_menu.tsx create mode 100644 src/components/sub_navigation_menu_item.tsx create mode 100644 src/stylesheets/_sub_navigation_menu.scss diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx index 2726a62e..e4928aa8 100644 --- a/src/components/navigation.tsx +++ b/src/components/navigation.tsx @@ -1,17 +1,20 @@ import * as React from 'react'; -import { NavLink } from 'react-router-dom'; import classNames from 'classnames'; // components -import Button from './button'; -import ProfileImage from './profile_image'; -import SlideOutContainer from './slide_out_container'; -import SlideInPanel from '../components/slide_in_panel'; +import NavigationDesktop from './navigation_desktop'; +import NavigationMobile from './navigation_mobile'; + +export interface SubNavRoute { + path: string; + label: string; +} export interface NavRoute { path: string; label: string; visible: boolean; + subRoutes?: SubNavRoute[]; } export interface NavigationProps { @@ -51,177 +54,41 @@ export interface NavigationProps { showMobileAccountNav?: boolean; } -export interface NavigationState { - showAccountNav: boolean; -} - -export class Navigation extends React.Component { - state = { - showAccountNav: false, - } - - constructor(props) { - super(props); - - this._onCloseMobileMenuHandler = this._onCloseMobileMenuHandler.bind(this); - } - - private _onCloseMobileMenuHandler(): void { - const { onCloseMobileMenuHandler } = this.props; - - if (onCloseMobileMenuHandler) { - onCloseMobileMenuHandler(); - } - } - - private _toggleShowAccountNav(showAccountNav: boolean): void { - this.setState({ - showAccountNav, - }); - } - - private _renderMobileMenu(visibleNavLinks: NavRoute[]): JSX.Element { - const { - onSignOutClickHandler, onSignInClickHandler, manageAccountURL, showMobileMenu, - signedOut, accountButtonText, signOutButtonText, accountImageURL, accountDisplayName, - signInButtonText, showMobileAccountNav, - } = this.props; - const { showAccountNav } = this.state; - - return ( -
- - - -
- {showMobileAccountNav && ( -
- {signedOut && ( - - )} - {!signedOut && ( - -
- -
-
-
{accountDisplayName}
-
-
- )} - onHeaderClick={ - () => this._toggleShowAccountNav(!showAccountNav) - } - > -
    - {manageAccountURL && ( -
  • - - {accountButtonText} - -
    • - )} - - {onSignOutClickHandler && ( -
  • - -
    • - )} -
- - )} -
- )} - -
    - {visibleNavLinks.map(navLink => ( -
  • - - {navLink.label} - -
    • - ))} -
-
- - - - - ); - } - - render(): JSX.Element { - const { - navLinks, showMobileMenu, navLabel, - } = this.props; - - const navClasses = classNames('navigation', { 'navigation--open': showMobileMenu }); - const visibleNavLinks = navLinks.filter(navLink => navLink.visible); - - return ( -
- {(visibleNavLinks.length > 0 || navLabel) && ( -
- {visibleNavLinks.length > 0 && ( -
- -
- )} - - {navLabel && ( -
-
- {navLabel} -
-
- )} -
- )} - - {this._renderMobileMenu(visibleNavLinks)} -
- ); - } -} +export const Navigation: React.StatelessComponent = ({ + navLinks, navLabel, manageAccountURL, onSignOutClickHandler, + onSignInClickHandler, accountButtonText, signOutButtonText, signInButtonText, + accountDisplayName, accountImageURL, signedOut, showMobileMenu, + onCloseMobileMenuHandler, showMobileAccountNav, +}) => { + const navClasses = classNames('navigation', { 'navigation--open': showMobileMenu }); + const visibleNavLinks = navLinks.filter(navLink => navLink.visible); + + return ( +
+ {(visibleNavLinks.length > 0 || navLabel) && ( + + )} + + +
+ ); +}; export default Navigation; diff --git a/src/components/navigation_desktop.tsx b/src/components/navigation_desktop.tsx new file mode 100644 index 00000000..4cfbf694 --- /dev/null +++ b/src/components/navigation_desktop.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +import { NavLink, withRouter, RouteComponentProps } from 'react-router-dom'; + +// components +import SubNavigationMenu from './sub_navigation_menu'; +import SubNavigationMenuItem from './sub_navigation_menu_item'; +import { NavRoute } from './Navigation'; + +export interface NavigationDesktopProps extends RouteComponentProps<{}> { + /** Details for the visible nav items */ + visibleNavLinks: NavRoute[]; + /** A label to be shown in the navigation bar */ + navLabel?: string; +} + + +export const NavigationDesktop: React.StatelessComponent = ({ + navLabel, visibleNavLinks, location, +}) => ( +
+ {visibleNavLinks.length > 0 && ( +
+ +
+ )} + + {navLabel && ( +
+
+ {navLabel} +
+
+ )} +
+); + +NavigationDesktop.displayName = 'NavigationDesktop'; + +export default withRouter(NavigationDesktop); diff --git a/src/components/navigation_mobile.tsx b/src/components/navigation_mobile.tsx new file mode 100644 index 00000000..56c2d89f --- /dev/null +++ b/src/components/navigation_mobile.tsx @@ -0,0 +1,179 @@ +import * as React from 'react'; +import { NavLink } from 'react-router-dom'; + +// components +import Button from './button'; +import ProfileImage from './profile_image'; +import SlideOutContainer from './slide_out_container'; +import SlideInPanel from '../components/slide_in_panel'; + +// components +import { NavRoute } from './Navigation'; + +export interface NavigationMobileProps { + /** Details for the visible nav items */ + visibleNavLinks: NavRoute[]; + /** URL for the account portal */ + manageAccountURL?: string; + /** Called when sign out is clicked */ + onSignOutClickHandler?: () => void; + /** Called when the sign in button is clicked */ + onSignInClickHandler?: () => void; + /** The label for account navigation on mobile */ + accountButtonText?: string; + /** The label for sign out on mobile */ + signOutButtonText?: string; + /** The label for sign in */ + signInButtonText?: string; + /** The username of the user to be shown in the mobile menu */ + accountDisplayName?: string; + /** The URL to the user's account page */ + accountImageURL?: string; + /** Whether the user is signed out */ + signedOut?: boolean; + /** + * Used to toggle the visibility of the mobile navigation menu. + * Passed in by the header component. + */ + showMobileMenu?: boolean; + /** + * Called when the mobile navigation is closed. + * Passed in by the header component. + */ + onCloseMobileMenuHandler?: () => void; + /** Whether the user profile should be displayed in the mobile menu */ + showMobileAccountNav?: boolean; +} + +export interface NavigationMobileState { + showAccountNav: boolean; +} + +export class NavigationMobile extends + React.Component { + state = { + showAccountNav: false, + } + + constructor(props) { + super(props); + + this._onCloseMobileMenuHandler = this._onCloseMobileMenuHandler.bind(this); + } + + private _onCloseMobileMenuHandler(): void { + const { onCloseMobileMenuHandler } = this.props; + + if (onCloseMobileMenuHandler) { + onCloseMobileMenuHandler(); + } + } + + private _toggleShowAccountNav(showAccountNav: boolean): void { + this.setState({ + showAccountNav, + }); + } + + render(): JSX.Element { + const { + onSignOutClickHandler, onSignInClickHandler, manageAccountURL, showMobileMenu, + signedOut, accountButtonText, signOutButtonText, accountImageURL, accountDisplayName, + signInButtonText, showMobileAccountNav, visibleNavLinks, + } = this.props; + const { showAccountNav } = this.state; + + return ( +
+ +
+ {showMobileAccountNav && ( +
+ {signedOut && ( + + )} + {!signedOut && ( + +
+ +
+
+
{accountDisplayName}
+
+
+ )} + onHeaderClick={ + () => this._toggleShowAccountNav(!showAccountNav) + } + > +
    + {manageAccountURL && ( +
  • + + {accountButtonText} + +
    • + )} + + {onSignOutClickHandler && ( +
  • + +
    • + )} +
+ + )} +
+ )} +
    + {visibleNavLinks.map(navLink => ( +
  • + + {navLink.label} + + {navLink.subRoutes && navLink.subRoutes.map(subNavItem => ( + + {subNavItem.label} + + ))} +
    • + + ))} +
+
+ + + ); + } +} + +export default NavigationMobile; diff --git a/src/components/sub_navigation_menu.tsx b/src/components/sub_navigation_menu.tsx new file mode 100644 index 00000000..c12ade0a --- /dev/null +++ b/src/components/sub_navigation_menu.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import classNames from 'classnames'; + +// components +import DropDownMenu from './drop_down_menu'; + +export interface SubNavigationMenuProps { + menuLabel: string; + active: boolean; + children: JSX.Element | JSX.Element[]; +} + +/** + * Component that displays information about a product + */ +export const SubNavigationMenu: React.StatelessComponent = ({ + menuLabel, active, children, +}) => { + const navClasses = classNames('sub-navigation-menu', { 'sub-navigation-menu--active': active }); + + return ( +
+ + {children} + +
+ + ); +}; + +SubNavigationMenu.displayName = 'SubNavigationMenu'; + +export default SubNavigationMenu; diff --git a/src/components/sub_navigation_menu_item.tsx b/src/components/sub_navigation_menu_item.tsx new file mode 100644 index 00000000..7fe9c88f --- /dev/null +++ b/src/components/sub_navigation_menu_item.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; + +import { NavLink } from 'react-router-dom'; + +export interface SubNavigationMenuItemProps { + path: string; + label: string; + /** Passed by the DropDownMenu component */ + onCloseMenuHandler?: () => void; +} + +/** + * Component that displays information about a product + */ +export const SubNavigationMenuItem: React.StatelessComponent = ({ + path, label, onCloseMenuHandler, +}) => ( + +
{label}
+ +); + +SubNavigationMenuItem.displayName = 'SubNavigationMenuItem'; + +export default SubNavigationMenuItem; diff --git a/src/index.tsx b/src/index.tsx index 12ae891b..2cd2bc9c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -37,6 +37,9 @@ export * from './components/loading'; export * from './components/modal'; export * from './components/more_pill'; export * from './components/navigation'; +export * from './components/navigation_desktop'; +export * from './components/navigation_mobile'; +export * from './components/navigation'; export * from './components/navigation_old'; export * from './components/page_section'; export * from './components/page_title'; @@ -60,6 +63,8 @@ export * from './components/setting_panel'; export * from './components/slide_in_panel'; export * from './components/slide_out_container'; export * from './components/spinner'; +export * from './components/sub_navigation_menu'; +export * from './components/sub_navigation_menu_item'; export * from './components/sub_resource_item'; export * from './components/sub_resource_list'; export * from './components/tags_selector'; diff --git a/src/stories/layout.stories.tsx b/src/stories/layout.stories.tsx index c4aa017f..4681d2a7 100644 --- a/src/stories/layout.stories.tsx +++ b/src/stories/layout.stories.tsx @@ -23,7 +23,7 @@ import SettingPanel from '../components/setting_panel'; import Carousel from '../components/carousel'; import AspectRatioContainer from '../components/aspect_ratio_container'; import Header from '../components/header'; -import Navigation from '../components/navigation'; +import Navigation, { NavRoute } from '../components/navigation'; import HeaderOld from '../components/header_old'; import NavigationOld from '../components/navigation_old'; import UserAccountMenu from '../components/user_account_menu'; @@ -160,6 +160,22 @@ const routes = [{ component: null, visible: true, }, +{ + path: '/manage', + label: 'Manage', + component: null, + visible: true, + subRoutes: [ + { + path: '/manage/teams', + label: 'Teams', + }, + { + path: '/manage/printers', + label: 'Printers', + }, + ], +}, { path: '/settings', label: 'Settings', diff --git a/src/stylesheets/_navigation.scss b/src/stylesheets/_navigation.scss index dcf8a60b..b314f095 100644 --- a/src/stylesheets/_navigation.scss +++ b/src/stylesheets/_navigation.scss @@ -28,7 +28,6 @@ border: none; li { - flex: 1 1 0; margin: 0; } } @@ -111,3 +110,7 @@ display: block; width: 80%; } + +.mobile-sub-navigation-menu-item { + margin-left: 2.4rem; +} diff --git a/src/stylesheets/_sub_navigation_menu.scss b/src/stylesheets/_sub_navigation_menu.scss new file mode 100644 index 00000000..637d4ec8 --- /dev/null +++ b/src/stylesheets/_sub_navigation_menu.scss @@ -0,0 +1,25 @@ +.sub-navigation-menu { + .drop-down-menu .drop-down-menu-base__menu { + min-width: 100%; + } + .drop-down-menu .drop-down-menu-base__trigger { + border-bottom: 0.3rem solid transparent; + padding: 0 1.8rem 0 2.4rem; + height: 4.8rem; + + &:hover, &:focus { + background-color: transparent; + border-bottom-color: rgba(0, 0, 0, 0.06); + } + } +} + +.sub-navigation-menu--active { + .drop-down-menu .drop-down-menu-base__trigger { + border-bottom-color: $color-border-active; + + &:hover, &:focus { + border-bottom-color: $color-border-active; + } + } +} diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss index 718f9366..832c5259 100644 --- a/src/stylesheets/main.scss +++ b/src/stylesheets/main.scss @@ -58,6 +58,7 @@ @import "sub_resource_list"; @import "sub_resource_item"; @import "app_switcher_menu"; +@import "sub_navigation_menu"; @import "header_old"; @import "navigation_old"; From 68afe4a9856c76d1dbc80737cd47d9ea440ecc10 Mon Sep 17 00:00:00 2001 From: Alan Date: Tue, 28 May 2019 14:40:11 +0200 Subject: [PATCH 02/24] make hovering menu items clearer --- src/stylesheets/_navigation.scss | 3 ++- src/stylesheets/_sub_navigation_menu.scss | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/stylesheets/_navigation.scss b/src/stylesheets/_navigation.scss index b314f095..b3c09334 100644 --- a/src/stylesheets/_navigation.scss +++ b/src/stylesheets/_navigation.scss @@ -43,11 +43,12 @@ justify-content: center; text-align: center; border-bottom: 3px solid transparent; + transition: all 0.2s ease-out; @include font-size-text-1; &:hover, &:focus { - border-bottom-color: $color-background-darker; + color: $color-blue; text-decoration: none; } diff --git a/src/stylesheets/_sub_navigation_menu.scss b/src/stylesheets/_sub_navigation_menu.scss index 637d4ec8..f85abb4a 100644 --- a/src/stylesheets/_sub_navigation_menu.scss +++ b/src/stylesheets/_sub_navigation_menu.scss @@ -6,10 +6,11 @@ border-bottom: 0.3rem solid transparent; padding: 0 1.8rem 0 2.4rem; height: 4.8rem; + transition: all 0.2s ease-out; &:hover, &:focus { background-color: transparent; - border-bottom-color: rgba(0, 0, 0, 0.06); + color: $color-blue; } } } From f515c5fbdd5273b0c43c0f9537490d0a3e968b35 Mon Sep 17 00:00:00 2001 From: Alan Date: Tue, 28 May 2019 16:15:29 +0200 Subject: [PATCH 03/24] align menu to the left --- src/stylesheets/_sub_navigation_menu.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/stylesheets/_sub_navigation_menu.scss b/src/stylesheets/_sub_navigation_menu.scss index f85abb4a..9492e15a 100644 --- a/src/stylesheets/_sub_navigation_menu.scss +++ b/src/stylesheets/_sub_navigation_menu.scss @@ -1,6 +1,7 @@ .sub-navigation-menu { .drop-down-menu .drop-down-menu-base__menu { min-width: 100%; + right: auto; } .drop-down-menu .drop-down-menu-base__trigger { border-bottom: 0.3rem solid transparent; From 06d97d483f71d463a553015deebda9c5164e604d Mon Sep 17 00:00:00 2001 From: Alan Date: Tue, 28 May 2019 17:26:21 +0200 Subject: [PATCH 04/24] make mobile sub navigation an accordion --- src/components/navigation_mobile.tsx | 199 +++++++++--------- src/components/sub_navigation_mobile_menu.tsx | 47 +++++ src/stylesheets/_navigation.scss | 15 +- src/stylesheets/_sub_navigation_menu.scss | 1 + .../_sub_navigation_mobile_menu.scss | 17 ++ src/stylesheets/main.scss | 1 + 6 files changed, 173 insertions(+), 107 deletions(-) create mode 100644 src/components/sub_navigation_mobile_menu.tsx create mode 100644 src/stylesheets/_sub_navigation_mobile_menu.scss diff --git a/src/components/navigation_mobile.tsx b/src/components/navigation_mobile.tsx index 56c2d89f..47bbe101 100644 --- a/src/components/navigation_mobile.tsx +++ b/src/components/navigation_mobile.tsx @@ -5,7 +5,8 @@ import { NavLink } from 'react-router-dom'; import Button from './button'; import ProfileImage from './profile_image'; import SlideOutContainer from './slide_out_container'; -import SlideInPanel from '../components/slide_in_panel'; +import SlideInPanel from './slide_in_panel'; +import SubNavigationMobileMenu from './sub_navigation_mobile_menu'; // components import { NavRoute } from './Navigation'; @@ -45,16 +46,7 @@ export interface NavigationMobileProps { showMobileAccountNav?: boolean; } -export interface NavigationMobileState { - showAccountNav: boolean; -} - -export class NavigationMobile extends - React.Component { - state = { - showAccountNav: false, - } - +export class NavigationMobile extends React.Component { constructor(props) { super(props); @@ -69,19 +61,106 @@ export class NavigationMobile extends } } - private _toggleShowAccountNav(showAccountNav: boolean): void { - this.setState({ - showAccountNav, - }); - } - - render(): JSX.Element { + private _renderAccountNav(): JSX.Element { const { - onSignOutClickHandler, onSignInClickHandler, manageAccountURL, showMobileMenu, + onSignOutClickHandler, onSignInClickHandler, manageAccountURL, signInButtonText, signedOut, accountButtonText, signOutButtonText, accountImageURL, accountDisplayName, - signInButtonText, showMobileAccountNav, visibleNavLinks, } = this.props; - const { showAccountNav } = this.state; + + return ( +
+ {signedOut && ( + + )} + {!signedOut && ( + +
+ +
+
+
{accountDisplayName}
+
+
+ )} + > +
    + {manageAccountURL && ( +
  • + + {accountButtonText} + +
    • + )} + + {onSignOutClickHandler && ( +
  • + +
    • + )} +
+ + )} + + ); + } + + private _renderNavLinks(): JSX.Element { + const { visibleNavLinks } = this.props; + + return ( +
    + {visibleNavLinks.map(navLink => ( +
  • + {!navLink.subRoutes && ( + + {navLink.label} + + )} + {navLink.subRoutes && ( + +
      + {navLink.subRoutes && navLink.subRoutes.map(subNavItem => ( +
    • + + {subNavItem.label} + +
      • + ))} +
    +     + )} +
    • + + ))} +
+ ); + } + + render(): JSX.Element { + const { showMobileMenu, showMobileAccountNav } = this.props; return (
@@ -93,82 +172,8 @@ export class NavigationMobile extends slideDirection="left" >
- {showMobileAccountNav && ( -
- {signedOut && ( - - )} - {!signedOut && ( - -
- -
-
-
{accountDisplayName}
-
-
- )} - onHeaderClick={ - () => this._toggleShowAccountNav(!showAccountNav) - } - > -
    - {manageAccountURL && ( -
  • - - {accountButtonText} - -
    • - )} - - {onSignOutClickHandler && ( -
  • - -
    • - )} -
- - )} -
- )} -
    - {visibleNavLinks.map(navLink => ( -
  • - - {navLink.label} - - {navLink.subRoutes && navLink.subRoutes.map(subNavItem => ( - - {subNavItem.label} - - ))} -
    • - - ))} -
+ {showMobileAccountNav && this._renderAccountNav()} + {this._renderNavLinks()}
diff --git a/src/components/sub_navigation_mobile_menu.tsx b/src/components/sub_navigation_mobile_menu.tsx new file mode 100644 index 00000000..ce2cf7c7 --- /dev/null +++ b/src/components/sub_navigation_mobile_menu.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; + +// components +import SlideOutContainer from './slide_out_container'; + +export interface SubNavigationMobileMenuProps { + menuLabel: string | JSX.Element | JSX.Element[]; +} + +export interface SubNavigationMobileMenuState { + isOpen: boolean; +} + +export class SubNavigationMobileMenu extends + React.Component { + state = { + isOpen: false, + } + + private _toggleShowAccountNav(isOpen: boolean): void { + this.setState({ + isOpen, + }); + } + + render(): JSX.Element { + const { menuLabel, children } = this.props; + const { isOpen } = this.state; + + return ( +
+ this._toggleShowAccountNav(!isOpen) + } + > + {children} + +
+ ); + } +} + +export default SubNavigationMobileMenu; diff --git a/src/stylesheets/_navigation.scss b/src/stylesheets/_navigation.scss index b3c09334..e6bbe9a6 100644 --- a/src/stylesheets/_navigation.scss +++ b/src/stylesheets/_navigation.scss @@ -75,7 +75,7 @@ } .drop-down-menu-base__item { - padding: 1.2rem 3.6rem; + padding: 1.2rem 2.4rem; &.active .label { border-bottom: 2px solid $color-border-active; @@ -91,21 +91,16 @@ border-bottom: 1px solid $color-border-light; margin-bottom: 1.2rem; - .slide-out-container__header { - padding: 2.4rem 1.8rem; + .sub-navigation-mobile-menu .slide-out-container__header { + padding: 2.4rem 2.4rem 2.4rem 1.8rem; font-family: $font-primary; } - .slide-out-container__body { - padding: 0; + .sub-navigation-mobile-menu__options { + border-bottom: none; } } -.navigation__account-options { - background: $color-grey-lightest; - border-top: 1px solid $color-border-light; -} - .navigation__account-sign-in-btn { margin: 2.4rem auto; display: block; diff --git a/src/stylesheets/_sub_navigation_menu.scss b/src/stylesheets/_sub_navigation_menu.scss index 9492e15a..95651bf7 100644 --- a/src/stylesheets/_sub_navigation_menu.scss +++ b/src/stylesheets/_sub_navigation_menu.scss @@ -8,6 +8,7 @@ padding: 0 1.8rem 0 2.4rem; height: 4.8rem; transition: all 0.2s ease-out; + @include font-size-text-1; &:hover, &:focus { background-color: transparent; diff --git a/src/stylesheets/_sub_navigation_mobile_menu.scss b/src/stylesheets/_sub_navigation_mobile_menu.scss new file mode 100644 index 00000000..fbcc8e42 --- /dev/null +++ b/src/stylesheets/_sub_navigation_mobile_menu.scss @@ -0,0 +1,17 @@ +.sub-navigation-mobile-menu { + .slide-out-container__header { + font-size: 1.4rem; + padding: 1.2rem 2.4rem; + font-family: $font-primary; + } + + .slide-out-container__body { + padding: 0; + } +} + +.sub-navigation-mobile-menu__options { + background: $color-grey-lightest; + border-top: 1px solid $color-border-light; + border-bottom: 1px solid $color-border-light; +} diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss index 832c5259..033e84bd 100644 --- a/src/stylesheets/main.scss +++ b/src/stylesheets/main.scss @@ -59,6 +59,7 @@ @import "sub_resource_item"; @import "app_switcher_menu"; @import "sub_navigation_menu"; +@import "sub_navigation_mobile_menu"; @import "header_old"; @import "navigation_old"; From ddd4967753b65b28851003d3d922b804f803aae8 Mon Sep 17 00:00:00 2001 From: Alan Date: Tue, 28 May 2019 17:58:59 +0200 Subject: [PATCH 05/24] improve spacing --- src/stylesheets/_navigation.scss | 11 +++-------- src/stylesheets/_sub_navigation_mobile_menu.scss | 5 +++-- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/stylesheets/_navigation.scss b/src/stylesheets/_navigation.scss index e6bbe9a6..7f48260a 100644 --- a/src/stylesheets/_navigation.scss +++ b/src/stylesheets/_navigation.scss @@ -75,10 +75,10 @@ } .drop-down-menu-base__item { - padding: 1.2rem 2.4rem; + padding: 1.8rem 2.4rem; &.active .label { - border-bottom: 2px solid $color-border-active; + color: $color-blue; } &:hover, &:focus { @@ -89,10 +89,9 @@ .navigation__account { border-bottom: 1px solid $color-border-light; - margin-bottom: 1.2rem; .sub-navigation-mobile-menu .slide-out-container__header { - padding: 2.4rem 2.4rem 2.4rem 1.8rem; + padding: 2.4rem; font-family: $font-primary; } @@ -106,7 +105,3 @@ display: block; width: 80%; } - -.mobile-sub-navigation-menu-item { - margin-left: 2.4rem; -} diff --git a/src/stylesheets/_sub_navigation_mobile_menu.scss b/src/stylesheets/_sub_navigation_mobile_menu.scss index fbcc8e42..a52866a5 100644 --- a/src/stylesheets/_sub_navigation_mobile_menu.scss +++ b/src/stylesheets/_sub_navigation_mobile_menu.scss @@ -1,7 +1,7 @@ .sub-navigation-mobile-menu { .slide-out-container__header { font-size: 1.4rem; - padding: 1.2rem 2.4rem; + padding: 1.8rem 2.4rem; font-family: $font-primary; } @@ -10,7 +10,8 @@ } } -.sub-navigation-mobile-menu__options { +.sub-navigation-mobile-menu__options{ + padding: 0.6rem 0; background: $color-grey-lightest; border-top: 1px solid $color-border-light; border-bottom: 1px solid $color-border-light; From abc43007460e4b7ab95f409e97cc9fda27055188 Mon Sep 17 00:00:00 2001 From: Alan Date: Mon, 3 Jun 2019 09:29:54 +0200 Subject: [PATCH 06/24] add mising key --- src/components/navigation_mobile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/navigation_mobile.tsx b/src/components/navigation_mobile.tsx index 47bbe101..5610f677 100644 --- a/src/components/navigation_mobile.tsx +++ b/src/components/navigation_mobile.tsx @@ -137,7 +137,7 @@ export class NavigationMobile extends React.Component >
    {navLink.subRoutes && navLink.subRoutes.map(subNavItem => ( -
  • +
  • Date: Mon, 3 Jun 2019 09:59:28 +0200 Subject: [PATCH 07/24] fix loading page position --- src/stylesheets/_loading.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/stylesheets/_loading.scss b/src/stylesheets/_loading.scss index 3b1d799f..d284b6cc 100644 --- a/src/stylesheets/_loading.scss +++ b/src/stylesheets/_loading.scss @@ -20,8 +20,11 @@ } .loading-page { - height: 100vh; - width: 100vw; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; display: flex; justify-content: center; align-items: center; From 7b40ad9ad7a92a569e8f735a61f2a38b31f56f52 Mon Sep 17 00:00:00 2001 From: Alan Date: Mon, 3 Jun 2019 10:01:21 +0200 Subject: [PATCH 08/24] don't show subRoutes if list is empty --- src/components/navigation_desktop.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/navigation_desktop.tsx b/src/components/navigation_desktop.tsx index 4cfbf694..6e862179 100644 --- a/src/components/navigation_desktop.tsx +++ b/src/components/navigation_desktop.tsx @@ -24,7 +24,7 @@ export const NavigationDesktop: React.StatelessComponent
      {visibleNavLinks.map(navLink => (
    • - {!navLink.subRoutes && ( + {(!navLink.subRoutes || navLink.subRoutes.length === 0) && ( {navLink.label} )} - {navLink.subRoutes && ( + {navLink.subRoutes && navLink.subRoutes.length > 0 && ( Date: Mon, 3 Jun 2019 10:09:45 +0200 Subject: [PATCH 09/24] update snapshots --- .../__snapshots__/navigation.test.tsx.snap | 713 +++++++----------- src/components/navigation.tsx | 2 + 2 files changed, 255 insertions(+), 460 deletions(-) diff --git a/src/components/__tests__/__snapshots__/navigation.test.tsx.snap b/src/components/__tests__/__snapshots__/navigation.test.tsx.snap index 08ac372d..e669a9e0 100644 --- a/src/components/__tests__/__snapshots__/navigation.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/navigation.test.tsx.snap @@ -4,57 +4,13 @@ exports[`The Navigation component should not render desktop navigation if no vis
      -
      - -
      -
      - -
      - -
      -
      -
      -
      -
      - } - headerTextAlignment="left" - isOpen={false} - onHeaderClick={[Function]} - panelArrowWidth="1.2rem" - showHeaderPanelArrow={true} - > -
        - -
      -
        -
      -       -
      +
      `; @@ -62,109 +18,32 @@ exports[`The Navigation component should render 1`] = `
      -
      -
      - -
      -
      -
      - -
      -
      - -
      - -
      -
      -
      -
      -
      - } - headerTextAlignment="left" - isOpen={false} - onHeaderClick={[Function]} - panelArrowWidth="1.2rem" - showHeaderPanelArrow={true} - > -
        - -
      -
        -
      • - - - Home - - -
        • -
      -
      -       -
      + +
      `; @@ -222,120 +101,124 @@ exports[`The Navigation component should render manage account button 1`] = ` class="navigation__account" >
      -
      - - -
      + +
      - + + Account + + +
      • +
    + @@ -418,124 +301,128 @@ exports[`The Navigation component should render sign out button 1`] = ` class="navigation__account" >
    -
    - - -
    + +
    - + +
    • +
+ @@ -568,85 +455,33 @@ exports[`The Navigation component should render when signed out 1`] = `
-
-
- -
-
-
- -
-
-
-
    -
  • - - - Home - - -
    • -
-
- -
+ +
`; @@ -654,73 +489,31 @@ exports[`The Navigation component should render without mobile account navigatio
-
-
- -
-
-
- -
-
    -
  • - - - Home - - -
    • -
-
- -
+ +
`; diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx index e4928aa8..5c1af2ed 100644 --- a/src/components/navigation.tsx +++ b/src/components/navigation.tsx @@ -91,4 +91,6 @@ export const Navigation: React.StatelessComponent = ({ ); }; +Navigation.displayName = 'Navigation'; + export default Navigation; From fb6d3043def9a24e4be228e6ac96c71df3f643b6 Mon Sep 17 00:00:00 2001 From: Alan Date: Mon, 3 Jun 2019 10:12:48 +0200 Subject: [PATCH 10/24] remove padding to align with logo --- src/stylesheets/_navigation.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/stylesheets/_navigation.scss b/src/stylesheets/_navigation.scss index 7f48260a..b554b1b8 100644 --- a/src/stylesheets/_navigation.scss +++ b/src/stylesheets/_navigation.scss @@ -1,7 +1,6 @@ .navigation__desktop { background-color: $color-background; position: relative; - padding: 0 2.4rem; border-bottom: 1px solid $color-border-light; .navigation__container { From 0bc1b2379ca46fcebe22b257c516ff1584708ddd Mon Sep 17 00:00:00 2001 From: Alan Date: Mon, 3 Jun 2019 10:27:30 +0200 Subject: [PATCH 11/24] fix navigation tests --- .../__snapshots__/navigation.test.tsx.snap | 34 +++++++++++++++++++ src/components/__tests__/navigation.test.tsx | 33 +----------------- 2 files changed, 35 insertions(+), 32 deletions(-) diff --git a/src/components/__tests__/__snapshots__/navigation.test.tsx.snap b/src/components/__tests__/__snapshots__/navigation.test.tsx.snap index e669a9e0..12aba324 100644 --- a/src/components/__tests__/__snapshots__/navigation.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/navigation.test.tsx.snap @@ -247,6 +247,40 @@ exports[`The Navigation component should render manage account button 1`] = ` `; +exports[`The Navigation component should render navigation label 1`] = ` +
+ + +
+`; + exports[`The Navigation component should render sign out button 1`] = `
{ expect(wrapper).toMatchSnapshot(); }); - it('should render sign out button', () => { - wrapper = shallow( - - - , - ); - expect(wrapper.render()).toMatchSnapshot(); - }); - - it('should render manage account button', () => { - wrapper = shallow( - - - , - ); - expect(wrapper.render()).toMatchSnapshot(); - }); - - it('should close mobile navigation menu when navigating', () => { - wrapper = shallow(); - wrapper.find(NavLink).first().props().onClick(); - expect(props.onCloseMobileMenuHandler).toBeCalled(); - }); - - it('should show account mobile navigation menu', () => { - wrapper = shallow(); - expect(wrapper.find(SlideOutContainer).props().isOpen).toBe(false); - wrapper.find(SlideOutContainer).props().onHeaderClick(); - expect(wrapper.find(SlideOutContainer).props().isOpen).toBe(true); - }); - it('should render navigation label', () => { wrapper = shallow(); - expect(wrapper.find('.navigation__label').text()).toBe('Nav Label'); + expect(wrapper).toMatchSnapshot(); }); it('should not render desktop navigation if no visible links or label', () => { From 7cc67ff1c4b55154c15eee2661af092fa1c4834f Mon Sep 17 00:00:00 2001 From: Alan Date: Mon, 3 Jun 2019 10:28:29 +0200 Subject: [PATCH 12/24] remove obsolete snapshots --- .../__snapshots__/navigation.test.tsx.snap | 404 ------------------ 1 file changed, 404 deletions(-) diff --git a/src/components/__tests__/__snapshots__/navigation.test.tsx.snap b/src/components/__tests__/__snapshots__/navigation.test.tsx.snap index 12aba324..4fcf7ae0 100644 --- a/src/components/__tests__/__snapshots__/navigation.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/navigation.test.tsx.snap @@ -47,206 +47,6 @@ exports[`The Navigation component should render 1`] = `
`; -exports[`The Navigation component should render manage account button 1`] = ` -
-
-
- -
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-`; - exports[`The Navigation component should render navigation label 1`] = `
`; -exports[`The Navigation component should render sign out button 1`] = ` -
-
-
- -
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-`; - exports[`The Navigation component should render when signed out 1`] = `
Date: Mon, 3 Jun 2019 11:49:28 +0200 Subject: [PATCH 13/24] truncate long sub route labels --- src/stylesheets/_sub_navigation_menu.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/stylesheets/_sub_navigation_menu.scss b/src/stylesheets/_sub_navigation_menu.scss index 95651bf7..566655e3 100644 --- a/src/stylesheets/_sub_navigation_menu.scss +++ b/src/stylesheets/_sub_navigation_menu.scss @@ -26,3 +26,11 @@ } } } + +.sub-navigation-menu-item { + max-width: 30rem; + + .label { + @extend .truncate; + } +} From 0efa4116f27df62222fd6153265ae2f1fa2590a6 Mon Sep 17 00:00:00 2001 From: Alan Date: Mon, 3 Jun 2019 13:57:09 +0200 Subject: [PATCH 14/24] NavigationDesktop tests --- .../navigation_desktop.test.tsx.snap | 121 ++++++++++++++++++ src/components/__tests__/navigation.test.tsx | 2 - .../__tests__/navigation_desktop.test.tsx | 62 +++++++++ 3 files changed, 183 insertions(+), 2 deletions(-) create mode 100644 src/components/__tests__/__snapshots__/navigation_desktop.test.tsx.snap create mode 100644 src/components/__tests__/navigation_desktop.test.tsx diff --git a/src/components/__tests__/__snapshots__/navigation_desktop.test.tsx.snap b/src/components/__tests__/__snapshots__/navigation_desktop.test.tsx.snap new file mode 100644 index 00000000..e0f964a7 --- /dev/null +++ b/src/components/__tests__/__snapshots__/navigation_desktop.test.tsx.snap @@ -0,0 +1,121 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`The NavigationDesktop component should render 1`] = ` +
+
+ +
+
+`; + +exports[`The NavigationDesktop component should render navigation label 1`] = ` +
+
+ +
+
+
+ Nav Label +
+
+
+`; + +exports[`The NavigationDesktop component should render sub navigation 1`] = ` +
+
+ +
+
+`; diff --git a/src/components/__tests__/navigation.test.tsx b/src/components/__tests__/navigation.test.tsx index ceddb977..4dd3c7ba 100644 --- a/src/components/__tests__/navigation.test.tsx +++ b/src/components/__tests__/navigation.test.tsx @@ -1,11 +1,9 @@ // Copyright (c) 2018 Ultimaker B.V. import * as React from 'react'; import { shallow } from 'enzyme'; -import { BrowserRouter, NavLink } from 'react-router-dom'; // component import { Navigation, NavigationProps } from '../navigation'; -import SlideOutContainer from '../slide_out_container'; describe('The Navigation component', () => { let props: NavigationProps; diff --git a/src/components/__tests__/navigation_desktop.test.tsx b/src/components/__tests__/navigation_desktop.test.tsx new file mode 100644 index 00000000..2f2df12e --- /dev/null +++ b/src/components/__tests__/navigation_desktop.test.tsx @@ -0,0 +1,62 @@ +// Copyright (c) 2018 Ultimaker B.V. +import * as React from 'react'; +import { shallow } from 'enzyme'; +import { BrowserRouter, NavLink } from 'react-router-dom'; + +// component +import { NavigationDesktop, NavigationDesktopProps } from '../navigation_desktop'; + +describe('The NavigationDesktop component', () => { + let props; + let wrapper; + + beforeEach(() => { + props = { + visibleNavLinks: [ + { + path: '/home', + label: 'Home', + visible: true, + }, + ], + location: { + pathname: 'home', + }, + }; + wrapper = shallow(); + }); + + it('should render', () => { + expect(wrapper).toMatchSnapshot(); + }); + + it('should render navigation label', () => { + wrapper.setProps({ + navLabel: 'Nav Label', + }); + expect(wrapper).toMatchSnapshot(); + }); + + it('should render sub navigation', () => { + wrapper.setProps({ + visibleNavLinks: [ + { + path: '/home', + label: 'Home', + visible: true, + subRoutes: [ + { + path: '/home/teams', + label: 'Teams', + }, + { + path: '/home/printers', + label: 'Printers', + }, + ], + }, + ], + }); + expect(wrapper).toMatchSnapshot(); + }); +}); From 10e6f2085e515fffe13d6717885e7ef033700f37 Mon Sep 17 00:00:00 2001 From: Alan Date: Mon, 3 Jun 2019 14:16:12 +0200 Subject: [PATCH 15/24] NavigationMobile tests --- .../navigation_mobile.test.tsx.snap | 378 ++++++++++++++++++ .../__tests__/navigation_desktop.test.tsx | 3 +- .../__tests__/navigation_mobile.test.tsx | 85 ++++ src/components/navigation_mobile.tsx | 7 +- 4 files changed, 469 insertions(+), 4 deletions(-) create mode 100644 src/components/__tests__/__snapshots__/navigation_mobile.test.tsx.snap create mode 100644 src/components/__tests__/navigation_mobile.test.tsx diff --git a/src/components/__tests__/__snapshots__/navigation_mobile.test.tsx.snap b/src/components/__tests__/__snapshots__/navigation_mobile.test.tsx.snap new file mode 100644 index 00000000..4f30d89c --- /dev/null +++ b/src/components/__tests__/__snapshots__/navigation_mobile.test.tsx.snap @@ -0,0 +1,378 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`The NavigationMobile component should render 1`] = ` +
+ +
+
+ +
+ +
+
+
+
+
+ } + > +
    + +
+
    +
  • + + + Home + + +
    • +
+
+ +
+`; + +exports[`The NavigationMobile component should render account link 1`] = ` +
+ +
+
+ +
+ +
+
+
+
+
+ } + > + + +
+
    +
  • + + + Home + + +
    • +
+
+ +
+`; + +exports[`The NavigationMobile component should render sign in button 1`] = ` +
+ +
+
+
+
    +
  • + + + Home + + +
    • +
+
+ +
+`; + +exports[`The NavigationMobile component should render sign out button 1`] = ` +
+ +
+
+ +
+ +
+
+
+
+
+ } + > +
    +
  • + +
    • +
+ +
+
    +
  • + + + Home + + +
    • +
+
+ +
+`; + +exports[`The NavigationMobile component should render sub navigation 1`] = ` +
+ +
+
+ +
+ +
+
+
+
+
+ } + > +
    + +
+
    +
  • + +
      +
    • + + + Teams + + +
      • +
    • + + + Printers + + +
      • +
    +     +
    • +
+
+ +
+`; diff --git a/src/components/__tests__/navigation_desktop.test.tsx b/src/components/__tests__/navigation_desktop.test.tsx index 2f2df12e..4d032706 100644 --- a/src/components/__tests__/navigation_desktop.test.tsx +++ b/src/components/__tests__/navigation_desktop.test.tsx @@ -1,10 +1,9 @@ // Copyright (c) 2018 Ultimaker B.V. import * as React from 'react'; import { shallow } from 'enzyme'; -import { BrowserRouter, NavLink } from 'react-router-dom'; // component -import { NavigationDesktop, NavigationDesktopProps } from '../navigation_desktop'; +import { NavigationDesktop } from '../navigation_desktop'; describe('The NavigationDesktop component', () => { let props; diff --git a/src/components/__tests__/navigation_mobile.test.tsx b/src/components/__tests__/navigation_mobile.test.tsx new file mode 100644 index 00000000..333d0173 --- /dev/null +++ b/src/components/__tests__/navigation_mobile.test.tsx @@ -0,0 +1,85 @@ +// Copyright (c) 2018 Ultimaker B.V. +import * as React from 'react'; +import { shallow } from 'enzyme'; +import { BrowserRouter, NavLink } from 'react-router-dom'; + +// component +import { NavigationMobile, NavigationMobileProps } from '../navigation_mobile'; + +describe('The NavigationMobile component', () => { + let props: NavigationMobileProps; + let wrapper; + + beforeEach(() => { + props = { + visibleNavLinks: [ + { + path: '/home', + label: 'Home', + visible: true, + }, + ], + accountButtonText: 'Account', + signOutButtonText: 'Sign out', + onCloseMobileMenuHandler: jest.fn(), + showMobileAccountNav: true, + }; + wrapper = shallow(); + }); + + it('should render', () => { + expect(wrapper).toMatchSnapshot(); + }); + + it('should render sub navigation', () => { + wrapper.setProps({ + visibleNavLinks: [ + { + path: '/home', + label: 'Home', + visible: true, + subRoutes: [ + { + path: '/home/teams', + label: 'Teams', + }, + { + path: '/home/printers', + label: 'Printers', + }, + ], + }, + ], + }); + expect(wrapper).toMatchSnapshot(); + }); + + it('should close mobile navigation menu when navigating', () => { + wrapper.find(NavLink).first().props().onClick(); + expect(props.onCloseMobileMenuHandler).toBeCalled(); + }); + + it('should render sign out button', () => { + const onSignOutClickHandler = jest.fn(); + wrapper.setProps({ + onSignOutClickHandler, + }); + expect(wrapper).toMatchSnapshot(); + wrapper.find('.navigation__account-sign-out-btn').props().onClickHandler(); + expect(onSignOutClickHandler).toBeCalled(); + }); + + it('should render sign in button', () => { + wrapper.setProps({ + signedOut: true, + }); + expect(wrapper).toMatchSnapshot(); + }); + + it('should render account link', () => { + wrapper.setProps({ + manageAccountURL: '/signout', + }); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/src/components/navigation_mobile.tsx b/src/components/navigation_mobile.tsx index 5610f677..4cc05116 100644 --- a/src/components/navigation_mobile.tsx +++ b/src/components/navigation_mobile.tsx @@ -4,7 +4,6 @@ import { NavLink } from 'react-router-dom'; // components import Button from './button'; import ProfileImage from './profile_image'; -import SlideOutContainer from './slide_out_container'; import SlideInPanel from './slide_in_panel'; import SubNavigationMobileMenu from './sub_navigation_mobile_menu'; @@ -102,7 +101,11 @@ export class NavigationMobile extends React.Component {onSignOutClickHandler && (
  • -
    • From 5dcced68d1b2fd9edcc5e16d8c4ae19cc2baf86e Mon Sep 17 00:00:00 2001 From: Alan Date: Mon, 3 Jun 2019 14:35:23 +0200 Subject: [PATCH 16/24] add sub navigation tests --- .../sub_navigation_menu.test.tsx.snap | 29 +++++++++++++++++ .../sub_navigation_menu_item.test.tsx.snap | 17 ++++++++++ .../sub_navigation_mobile_menu.test.tsx.snap | 16 ++++++++++ .../__tests__/sub_navigation_menu.test.tsx | 31 +++++++++++++++++++ .../sub_navigation_menu_item.test.tsx | 24 ++++++++++++++ .../sub_navigation_mobile_menu.test.tsx | 29 +++++++++++++++++ 6 files changed, 146 insertions(+) create mode 100644 src/components/__tests__/__snapshots__/sub_navigation_menu.test.tsx.snap create mode 100644 src/components/__tests__/__snapshots__/sub_navigation_menu_item.test.tsx.snap create mode 100644 src/components/__tests__/__snapshots__/sub_navigation_mobile_menu.test.tsx.snap create mode 100644 src/components/__tests__/sub_navigation_menu.test.tsx create mode 100644 src/components/__tests__/sub_navigation_menu_item.test.tsx create mode 100644 src/components/__tests__/sub_navigation_mobile_menu.test.tsx diff --git a/src/components/__tests__/__snapshots__/sub_navigation_menu.test.tsx.snap b/src/components/__tests__/__snapshots__/sub_navigation_menu.test.tsx.snap new file mode 100644 index 00000000..49fac371 --- /dev/null +++ b/src/components/__tests__/__snapshots__/sub_navigation_menu.test.tsx.snap @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`The SubNavigationMenu component should render 1`] = ` +
    + +
    + Test +
    +     +
    +`; + +exports[`The SubNavigationMenu component should render as active 1`] = ` +
    + +
    + Test +
    +     +
    +`; diff --git a/src/components/__tests__/__snapshots__/sub_navigation_menu_item.test.tsx.snap b/src/components/__tests__/__snapshots__/sub_navigation_menu_item.test.tsx.snap new file mode 100644 index 00000000..cc330db2 --- /dev/null +++ b/src/components/__tests__/__snapshots__/sub_navigation_menu_item.test.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`The SubNavigationMenuItem component should render 1`] = ` + +
    + Home +
    +     +`; diff --git a/src/components/__tests__/__snapshots__/sub_navigation_mobile_menu.test.tsx.snap b/src/components/__tests__/__snapshots__/sub_navigation_mobile_menu.test.tsx.snap new file mode 100644 index 00000000..d324907c --- /dev/null +++ b/src/components/__tests__/__snapshots__/sub_navigation_mobile_menu.test.tsx.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`The SubNavigationMobileMenu component should render 1`] = ` +
    + +
    +`; diff --git a/src/components/__tests__/sub_navigation_menu.test.tsx b/src/components/__tests__/sub_navigation_menu.test.tsx new file mode 100644 index 00000000..8af9512f --- /dev/null +++ b/src/components/__tests__/sub_navigation_menu.test.tsx @@ -0,0 +1,31 @@ +// Copyright (c) 2018 Ultimaker B.V. +import * as React from 'react'; +import { shallow } from 'enzyme'; + +// component +import { SubNavigationMenu, SubNavigationMenuProps } from '../sub_navigation_menu'; + +describe('The SubNavigationMenu component', () => { + let props: SubNavigationMenuProps; + let wrapper; + + beforeEach(() => { + props = { + menuLabel: 'Home', + active: false, + children:
    Test
    , + }; + wrapper = shallow(); + }); + + it('should render', () => { + expect(wrapper).toMatchSnapshot(); + }); + + it('should render as active', () => { + wrapper.setProps({ + active: true, + }); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/src/components/__tests__/sub_navigation_menu_item.test.tsx b/src/components/__tests__/sub_navigation_menu_item.test.tsx new file mode 100644 index 00000000..7db902a5 --- /dev/null +++ b/src/components/__tests__/sub_navigation_menu_item.test.tsx @@ -0,0 +1,24 @@ +// Copyright (c) 2018 Ultimaker B.V. +import * as React from 'react'; +import { shallow } from 'enzyme'; + +// component +import { SubNavigationMenuItem, SubNavigationMenuItemProps } from '../sub_navigation_menu_item'; + +describe('The SubNavigationMenuItem component', () => { + let props: SubNavigationMenuItemProps; + let wrapper; + + beforeEach(() => { + props = { + path: '/home', + label: 'Home', + onCloseMenuHandler: jest.fn(), + }; + wrapper = shallow(); + }); + + it('should render', () => { + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/src/components/__tests__/sub_navigation_mobile_menu.test.tsx b/src/components/__tests__/sub_navigation_mobile_menu.test.tsx new file mode 100644 index 00000000..0ca98bf4 --- /dev/null +++ b/src/components/__tests__/sub_navigation_mobile_menu.test.tsx @@ -0,0 +1,29 @@ +// Copyright (c) 2018 Ultimaker B.V. +import * as React from 'react'; +import { shallow } from 'enzyme'; + +// component +import { SubNavigationMobileMenu, SubNavigationMobileMenuProps } from '../sub_navigation_mobile_menu'; +import SlideOutContainer from '../slide_out_container'; + +describe('The SubNavigationMobileMenu component', () => { + let props: SubNavigationMobileMenuProps; + let wrapper; + + beforeEach(() => { + props = { + menuLabel: 'Home', + }; + wrapper = shallow(); + }); + + it('should render', () => { + expect(wrapper).toMatchSnapshot(); + }); + + it('should show account mobile navigation menu', () => { + expect(wrapper.find(SlideOutContainer).props().isOpen).toBe(false); + wrapper.find(SlideOutContainer).props().onHeaderClick(); + expect(wrapper.find(SlideOutContainer).props().isOpen).toBe(true); + }); +}); From 9ebe4ce6fc4f7420867442715e88e2ae7572dfb0 Mon Sep 17 00:00:00 2001 From: Alan Date: Mon, 3 Jun 2019 14:43:05 +0200 Subject: [PATCH 17/24] remove old header components --- .../__snapshots__/header_old.test.tsx.snap | 18 -- .../navigation_old.test.tsx.snap | 169 ------------------ src/components/__tests__/header_old.test.tsx | 18 -- .../__tests__/navigation_old.test.tsx | 49 ----- src/components/header_old.tsx | 39 ---- src/components/navigation_old.tsx | 127 ------------- 6 files changed, 420 deletions(-) delete mode 100644 src/components/__tests__/__snapshots__/header_old.test.tsx.snap delete mode 100644 src/components/__tests__/__snapshots__/navigation_old.test.tsx.snap delete mode 100644 src/components/__tests__/header_old.test.tsx delete mode 100644 src/components/__tests__/navigation_old.test.tsx delete mode 100644 src/components/header_old.tsx delete mode 100644 src/components/navigation_old.tsx diff --git a/src/components/__tests__/__snapshots__/header_old.test.tsx.snap b/src/components/__tests__/__snapshots__/header_old.test.tsx.snap deleted file mode 100644 index f611cb4e..00000000 --- a/src/components/__tests__/__snapshots__/header_old.test.tsx.snap +++ /dev/null @@ -1,18 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`The Header component should render 1`] = ` -
    - - - -
    -
    -`; diff --git a/src/components/__tests__/__snapshots__/navigation_old.test.tsx.snap b/src/components/__tests__/__snapshots__/navigation_old.test.tsx.snap deleted file mode 100644 index 4cbc8f2d..00000000 --- a/src/components/__tests__/__snapshots__/navigation_old.test.tsx.snap +++ /dev/null @@ -1,169 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`The Navigation component should render 1`] = ` - -`; - -exports[`The Navigation component should render manage account button 1`] = ` - -`; - -exports[`The Navigation component should render sign out button 1`] = ` - -`; diff --git a/src/components/__tests__/header_old.test.tsx b/src/components/__tests__/header_old.test.tsx deleted file mode 100644 index 945fbea7..00000000 --- a/src/components/__tests__/header_old.test.tsx +++ /dev/null @@ -1,18 +0,0 @@ -// Copyright (c) 2018 Ultimaker B.V. -import * as React from 'react'; -import { shallow } from 'enzyme'; - -// component -import HeaderOld from '../header_old'; - -describe('The Header component', () => { - let wrapper; - - beforeEach(() => { - wrapper = shallow(); - }); - - it('should render', () => { - expect(wrapper).toMatchSnapshot(); - }); -}); diff --git a/src/components/__tests__/navigation_old.test.tsx b/src/components/__tests__/navigation_old.test.tsx deleted file mode 100644 index 5a270f80..00000000 --- a/src/components/__tests__/navigation_old.test.tsx +++ /dev/null @@ -1,49 +0,0 @@ -// Copyright (c) 2018 Ultimaker B.V. -import * as React from 'react'; -import { shallow } from 'enzyme'; -import { BrowserRouter } from 'react-router-dom'; - -// component -import { NavigationOld, NavigationOldProps } from '../navigation_old'; - -describe('The Navigation component', () => { - let props: NavigationOldProps; - let wrapper; - - beforeEach(() => { - props = { - navLinks: [ - { - path: '/home', - label: 'Home', - visible: true, - }, - ], - accountNavText: 'Account', - signOutNavText: 'Sign out', - }; - wrapper = shallow(); - }); - - it('should render', () => { - expect(wrapper.render()).toMatchSnapshot(); - }); - - it('should render sign out button', () => { - wrapper = shallow( - - - , - ); - expect(wrapper.render()).toMatchSnapshot(); - }); - - it('should render manage account button', () => { - wrapper = shallow( - - - , - ); - expect(wrapper.render()).toMatchSnapshot(); - }); -}); diff --git a/src/components/header_old.tsx b/src/components/header_old.tsx deleted file mode 100644 index 5a111478..00000000 --- a/src/components/header_old.tsx +++ /dev/null @@ -1,39 +0,0 @@ -// Copyright (c) 2018 Ultimaker B.V. -import * as React from 'react'; -import { Link } from 'react-router-dom'; -import UltimakerLogo from './icons/ultimaker_logo'; - -export interface HeaderOldProps { - showNav?: boolean; - headerLogo?: JSX.Element; - headerLogoUrl?: string; - rightSideLabel?: string; -} - -export const HeaderOld: React.StatelessComponent = ({ - showNav, headerLogo, headerLogoUrl, rightSideLabel, children, -}) => ( -
    - - {headerLogo} - -
    - {showNav && children} - {rightSideLabel && ( -
    - {rightSideLabel} -
    - )} -
    -
    -); - -HeaderOld.defaultProps = { - showNav: true, - headerLogo: , - headerLogoUrl: '/', -}; - -HeaderOld.displayName = 'HeaderOld'; - -export default HeaderOld; diff --git a/src/components/navigation_old.tsx b/src/components/navigation_old.tsx deleted file mode 100644 index cfe56f85..00000000 --- a/src/components/navigation_old.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import * as React from 'react'; -import { NavLink } from 'react-router-dom'; -import classNames from 'classnames'; -import { Spring } from 'react-spring'; - -// components -import Button from './button'; - -export interface NavRouteOld { - path: string; - label: string; - visible: boolean; -} - -export interface NavigationOldProps { - /** Details for the nav items */ - navLinks: NavRouteOld[]; - /** URL for the account portal */ - manageAccountURL?: string; - /** Called when sign out is clicked */ - onSignOutClickHandler?: () => void; - /** The label for account navigation on mobile */ - accountNavText: string; - /** The label for sign out on mobile */ - signOutNavText: string; -} - -export interface NavigationOldState { - showNav: boolean; -} - -export class NavigationOld extends React.Component { - state = { - showNav: false, - } - - private _toggleShowNav(showNav: boolean): void { - if (showNav) { - document.body.classList.add('noscroll'); - } else { - document.body.classList.remove('noscroll'); - } - - this.setState({ - showNav, - }); - } - - render(): JSX.Element { - const { - navLinks, onSignOutClickHandler, manageAccountURL, - accountNavText, signOutNavText, children, - } = this.props; - const { showNav } = this.state; - - const burgerIconClasses = classNames('burger-menu__icon', { open: showNav }); - const navClasses = classNames('navigation--old', { open: showNav }); - const visibleNavLinks = navLinks.filter(navLink => navLink.visible); - - return ( - - ); - } -} - -export default NavigationOld; From 88682a7693c9119d6bcba0b95ce76442d59801f1 Mon Sep 17 00:00:00 2001 From: Alan Date: Mon, 3 Jun 2019 14:51:21 +0200 Subject: [PATCH 18/24] adjust threshold --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index dba42e19..81ab4b0f 100644 --- a/package.json +++ b/package.json @@ -111,8 +111,8 @@ "coverageThreshold": { "global": { "statements": 93, - "branches": 89, - "functions": 93, + "branches": 88, + "functions": 91, "lines": 93 } }, From b4ee6bb527330228e440141381d9eaa039d1fd56 Mon Sep 17 00:00:00 2001 From: Alan Date: Mon, 3 Jun 2019 14:58:03 +0200 Subject: [PATCH 19/24] remove old header story --- src/stories/layout.stories.tsx | 31 ------------------------------- 1 file changed, 31 deletions(-) diff --git a/src/stories/layout.stories.tsx b/src/stories/layout.stories.tsx index 4681d2a7..b64e73fd 100644 --- a/src/stories/layout.stories.tsx +++ b/src/stories/layout.stories.tsx @@ -24,8 +24,6 @@ import Carousel from '../components/carousel'; import AspectRatioContainer from '../components/aspect_ratio_container'; import Header from '../components/header'; import Navigation, { NavRoute } from '../components/navigation'; -import HeaderOld from '../components/header_old'; -import NavigationOld from '../components/navigation_old'; import UserAccountMenu from '../components/user_account_menu'; import AppSwitcherMenu from '../components/app_switcher_menu'; @@ -262,35 +260,6 @@ stories.add('Header', withInfo( ))); -stories.add('Header Old', withInfo( - 'Old application header with navigation', -)(() => ( - -
    - - { }} - accountNavText="Account" - signOutNavText="Sign out" - > - { }} - displayName="Test User" - onSignInClickHandler={() => { }} - triggerWidth="10rem" - accountHeaderText="My account" - accountButtonText="Manage account" - signOutButtonText="Sign out" - signInButtonText="Sign in" - /> - - -
    -     -))); - stories.add('Carousel', withInfo( 'A carrousel component', )(() => { From 69eae4cb2620a3eda8678c296137896d1263d7b1 Mon Sep 17 00:00:00 2001 From: Alan Date: Mon, 3 Jun 2019 14:58:48 +0200 Subject: [PATCH 20/24] Update index.tsx --- src/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 2cd2bc9c..4f82898a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -25,7 +25,6 @@ export * from './components/grid_empty'; export * from './components/grid_item'; export * from './components/grid'; export * from './components/header'; -export * from './components/header_old'; export * from './components/image_cropper'; export * from './components/image_upload'; export * from './components/image'; @@ -40,7 +39,6 @@ export * from './components/navigation'; export * from './components/navigation_desktop'; export * from './components/navigation_mobile'; export * from './components/navigation'; -export * from './components/navigation_old'; export * from './components/page_section'; export * from './components/page_title'; export * from './components/page'; @@ -65,6 +63,7 @@ export * from './components/slide_out_container'; export * from './components/spinner'; export * from './components/sub_navigation_menu'; export * from './components/sub_navigation_menu_item'; +export * from './components/sub_navigation_mobile_menu'; export * from './components/sub_resource_item'; export * from './components/sub_resource_list'; export * from './components/tags_selector'; From c1955abf3046328d91bc38bca1c3809b49ca713c Mon Sep 17 00:00:00 2001 From: Alan Date: Mon, 3 Jun 2019 15:35:28 +0200 Subject: [PATCH 21/24] fix imports --- src/components/navigation_desktop.tsx | 2 +- src/components/navigation_mobile.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/navigation_desktop.tsx b/src/components/navigation_desktop.tsx index 6e862179..68b8143c 100644 --- a/src/components/navigation_desktop.tsx +++ b/src/components/navigation_desktop.tsx @@ -4,7 +4,7 @@ import { NavLink, withRouter, RouteComponentProps } from 'react-router-dom'; // components import SubNavigationMenu from './sub_navigation_menu'; import SubNavigationMenuItem from './sub_navigation_menu_item'; -import { NavRoute } from './Navigation'; +import { NavRoute } from './navigation'; export interface NavigationDesktopProps extends RouteComponentProps<{}> { /** Details for the visible nav items */ diff --git a/src/components/navigation_mobile.tsx b/src/components/navigation_mobile.tsx index 4cc05116..c0719e2e 100644 --- a/src/components/navigation_mobile.tsx +++ b/src/components/navigation_mobile.tsx @@ -8,7 +8,7 @@ import SlideInPanel from './slide_in_panel'; import SubNavigationMobileMenu from './sub_navigation_mobile_menu'; // components -import { NavRoute } from './Navigation'; +import { NavRoute } from './navigation'; export interface NavigationMobileProps { /** Details for the visible nav items */ From 45639149cc73729936a8ab5c6f271ce576465e70 Mon Sep 17 00:00:00 2001 From: Alan Date: Wed, 5 Jun 2019 11:09:24 +0200 Subject: [PATCH 22/24] add align to PageTitle --- .../__tests__/__snapshots__/page.test.tsx.snap | 1 + .../__tests__/__snapshots__/page_title.test.tsx.snap | 5 +++++ src/components/page.tsx | 10 ++++++---- src/components/page_title.tsx | 11 +++++++++-- src/stories/layout.stories.tsx | 2 +- 5 files changed, 22 insertions(+), 7 deletions(-) diff --git a/src/components/__tests__/__snapshots__/page.test.tsx.snap b/src/components/__tests__/__snapshots__/page.test.tsx.snap index 870c7588..b9904847 100644 --- a/src/components/__tests__/__snapshots__/page.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/page.test.tsx.snap @@ -14,6 +14,7 @@ exports[`The Page component should render 1`] = ` } >
    diff --git a/src/components/__tests__/__snapshots__/page_title.test.tsx.snap b/src/components/__tests__/__snapshots__/page_title.test.tsx.snap index f429dbe7..132d9051 100644 --- a/src/components/__tests__/__snapshots__/page_title.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/page_title.test.tsx.snap @@ -3,6 +3,11 @@ exports[`The PageTitle component should render 1`] = `
    = ({ - title, isBeta, maxWidth, id, className, children, + title, isBeta, maxWidth, id, className, titleAlign, children, }): JSX.Element => (
    - {title && } + {title && } {children}
    diff --git a/src/components/page_title.tsx b/src/components/page_title.tsx index 45146530..1daf8f96 100644 --- a/src/components/page_title.tsx +++ b/src/components/page_title.tsx @@ -1,15 +1,18 @@ import * as React from 'react'; import BetaPill from './beta_pill'; +export type PageTitleAlign = 'left' | 'center' | 'right'; + export interface PageTitleProps { title: string; isBeta?: boolean; + align?: PageTitleAlign } export const PageTitle: React.StatelessComponent = ( - { title, isBeta }, + { title, isBeta, align }, ): JSX.Element => ( -
    +

    {title} @@ -19,6 +22,10 @@ export const PageTitle: React.StatelessComponent = (

    ); +PageTitle.defaultProps = { + align: 'center', +}; + PageTitle.displayName = 'PageTitle'; export default PageTitle; diff --git a/src/stories/layout.stories.tsx b/src/stories/layout.stories.tsx index b64e73fd..82939388 100644 --- a/src/stories/layout.stories.tsx +++ b/src/stories/layout.stories.tsx @@ -23,7 +23,7 @@ import SettingPanel from '../components/setting_panel'; import Carousel from '../components/carousel'; import AspectRatioContainer from '../components/aspect_ratio_container'; import Header from '../components/header'; -import Navigation, { NavRoute } from '../components/navigation'; +import Navigation from '../components/navigation'; import UserAccountMenu from '../components/user_account_menu'; import AppSwitcherMenu from '../components/app_switcher_menu'; From e28657dd1145bb94606b9cde8054769bce6c3602 Mon Sep 17 00:00:00 2001 From: Alan Date: Wed, 5 Jun 2019 13:47:47 +0200 Subject: [PATCH 23/24] remove navigation role --- .../__tests__/__snapshots__/navigation_desktop.test.tsx.snap | 3 --- src/components/navigation_desktop.tsx | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/__tests__/__snapshots__/navigation_desktop.test.tsx.snap b/src/components/__tests__/__snapshots__/navigation_desktop.test.tsx.snap index e0f964a7..3cef2715 100644 --- a/src/components/__tests__/__snapshots__/navigation_desktop.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/navigation_desktop.test.tsx.snap @@ -9,7 +9,6 @@ exports[`The NavigationDesktop component should render 1`] = ` >