Merge pull request #83 from Ultimaker/user-account-menu

Add sign in button to UserAccountMenu
Ultimaker · Oct 25, 2018 · 5bdb558 · 5bdb558
2 parents aa4dc6e + cfbd7ec
commit 5bdb558
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 26 deletions.
diff --git a/src/components/__tests__/__snapshots__/user_account_menu.test.tsx.snap b/src/components/__tests__/__snapshots__/user_account_menu.test.tsx.snap
@@ -213,3 +213,69 @@ exports[`The UserAccountMenu component should render 1`] = `
   </div>
 </div>
 `;
+
+exports[`The UserAccountMenu component should render sign in button 1`] = `
+<div
+  className="user-account-menu"
+  onClick={[Function]}
+  tabIndex={1}
+>
+  <div
+    className="trigger"
+    onClick={[Function]}
+  >
+    <ProfileImage
+      size="3.6rem"
+    />
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="menu"
+    >
+      <Collapse
+        fixedHeight={-1}
+        forceInitialAnimation={false}
+        hasNestedCollapse={false}
+        isOpened={false}
+        onMeasure={[Function]}
+        onRender={[Function]}
+        onRest={[Function]}
+        springConfig={
+          Object {
+            "damping": 32,
+            "stiffness": 390,
+          }
+        }
+        style={Object {}}
+        theme={
+          Object {
+            "collapse": "ReactCollapse--collapse",
+            "content": "ReactCollapse--content",
+          }
+        }
+      >
+        <div
+          className="sections"
+        >
+          <div
+            className="account-section"
+          >
+            <Button
+              className=""
+              linkToNewTab={false}
+              onClickHandler={[Function]}
+              shape="rectangle"
+              style="secondary"
+              type="button"
+            >
+              Sign in
+            </Button>
+          </div>
+        </div>
+      </Collapse>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/__tests__/user_account_menu.test.tsx b/src/components/__tests__/user_account_menu.test.tsx
@@ -17,7 +17,9 @@ describe('The UserAccountMenu component', () => {
         props = {
             manageAccountURL: 'https://account-staging.ultimaker.com',
             onSignOutClickHandler: jest.fn(),
-            displayName: 'Test User'
+            onSignInClickHandler: jest.fn(),
+            displayName: 'Test User',
+            signedOut: false,
         };
         wrapper = shallow(<UserAccountMenu {...props} />);
     });
@@ -63,4 +65,10 @@ describe('The UserAccountMenu component', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
+    it('should render sign in button', () => {
+        wrapper.setProps({ signedOut: 'true' });
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onSignInClickHandler).not.toHaveBeenCalled();
+    });
+
 });
diff --git a/src/components/user_account_menu.tsx b/src/components/user_account_menu.tsx
@@ -12,6 +12,10 @@ import { I18n } from '../utils/i18n';
 
 
 export interface UserAccountMenuProps {
+    /** Whether the user is signed out */
+    signedOut?: boolean;
+    /** Called when the sign in button is clicked */
+    onSignInClickHandler?: () => void;
     /** Called when the sign out button is clicked */
     onSignOutClickHandler: () => void;
     /** URL to the account management page */
@@ -70,7 +74,7 @@ export class UserAccountMenu extends React.Component<UserAccountMenuProps, UserA
     render(): JSX.Element {
 
         const { onSignOutClickHandler, manageAccountURL, displayName, imageURL,
-            triggerWidth, triggerHeight, children } = this.props;
+            triggerWidth, triggerHeight, signedOut, onSignInClickHandler, children } = this.props;
         const { showMenu } = this.state;
 
         const classes = classNames('user-account-menu', { 'visible': showMenu });
@@ -99,27 +103,36 @@ export class UserAccountMenu extends React.Component<UserAccountMenuProps, UserA
                             }
 
                             <div className="account-section">
-                                <div className="account-section__title">
-                                    {I18n.translate("User account menu title", "My account")}
-                                </div>
-
-                                <div className="account-section__profile">
-                                    <div className="account-section__icon">
-                                        <ProfileImage imageURL={imageURL} size="10rem" />
-                                    </div>
-                                    <div className="account-section__name">{displayName}</div>
-                                </div>
-
-                                <div className="account-section__buttons">
-                                    <Button style="secondary" type="link" linkURL={manageAccountURL} linkToNewTab>
-                                        {I18n.translate("User account menu button", "Manage account")}
-                                        <LinkIcon />
+                                {!signedOut &&
+                                    <React.Fragment>
+                                        <div className="account-section__title">
+                                            {I18n.translate("User account menu title", "My account")}
+                                        </div>
+
+                                        <div className="account-section__profile">
+                                            <div className="account-section__icon">
+                                                <ProfileImage imageURL={imageURL} size="10rem" />
+                                            </div>
+                                            <div className="account-section__name">{displayName}</div>
+                                        </div>
+
+                                        <div className="account-section__buttons">
+                                            <Button style="secondary" type="link" linkURL={manageAccountURL} linkToNewTab>
+                                                {I18n.translate("User account menu button", "Manage account")}
+                                                <LinkIcon />
+                                            </Button>
+
+                                            <Button style="secondary" onClickHandler={() => { this._setShowMenu(false); onSignOutClickHandler() }}>
+                                                {I18n.translate("User account menu button", "Sign out")}
+                                            </Button>
+                                        </div>
+                                    </React.Fragment>
+                                }
+                                {signedOut &&
+                                    <Button style="secondary" onClickHandler={() => { this._setShowMenu(false); onSignInClickHandler() }}>
+                                        {I18n.translate("User account menu button", "Sign in")}
                                     </Button>
-
-                                    <Button style="secondary" onClickHandler={() => { this._setShowMenu(false); onSignOutClickHandler() }}>
-                                        {I18n.translate("User account menu button", "Sign out")}
-                                    </Button>
-                                </div>
+                                }
                             </div>
 
                         </div>

diff --git a/src/stories/menu.stories.tsx b/src/stories/menu.stories.tsx
@@ -66,5 +66,7 @@ stories.add('User account menu', withInfo(
         displayName="Test User"
         triggerWidth={text('Trigger width', null)}
         triggerHeight={text('Trigger height', null)}
+        signedOut={boolean('Sign out', false)}
+        onSignInClickHandler={action('clicked')}
     ></UserAccountMenu>
 ));
diff --git a/src/stylesheets/_buttons.scss b/src/stylesheets/_buttons.scss
@@ -218,6 +218,8 @@ button {
     }
 
     .floating-action-btn--trigger {
+        height: 5rem;
+        width: 5rem;
         position: relative;
         z-index: 99;
         font-size: 2rem;

diff --git a/src/stylesheets/_navigation.scss b/src/stylesheets/_navigation.scss
@@ -9,12 +9,28 @@
 
     .burger-menu {
         > .btn {
+            height: 5rem;
+            width: 5rem;
             top: 0.9rem;
             box-shadow: 0 2px 3px 0 $color-shadow;
             z-index: 999999;
         }
     }
 
+    .user-account-menu {
+        .trigger {
+            height: 4.6rem;
+
+            @include respond-to(sm) {
+                height: 5rem;
+            }
+
+            @include respond-to(md) {
+                height: 6rem;
+            }
+        }
+    }
+
     ul {
         width: 100vw;
         padding: 0;
@@ -67,7 +83,7 @@
                 margin: 0;
             }
 
-            a {
+            > a {
                 border-radius: 9999px;
                 background: white;
                 font-size: 1.6rem;
@@ -76,8 +92,8 @@
                 text-decoration: none;
                 color: $secondary-btn-color-text;
                 position: relative;
-                width: 46px;
-                height: 46px;
+                width: 4.6rem;
+                height: 4.6rem;
 
                 @include respond-to(sm) {
                     border-radius: 0;

diff --git a/src/stylesheets/_user_account_menu.scss b/src/stylesheets/_user_account_menu.scss
@@ -32,7 +32,6 @@
 
     .account-section {
         width: 28rem;
-        min-height: 37.8rem;
         padding: 2.4rem;
         display: flex;
         flex-direction: column;
@@ -44,6 +43,7 @@
             flex-wrap: nowrap;
             justify-content: center;
             flex-grow: 1;
+            padding: 3.6rem 0;
         }
 
         .account-section__title {