Merge pull request #183 from Ultimaker/STAR-517-app-switcher

STAR-517 app switcher
Ultimaker · Apr 29, 2019 · 4f67ed1 · 4f67ed1
2 parents a355d3c + d42cec5
commit 4f67ed1
Show file tree

Hide file tree

Showing 34 changed files with 2,101 additions and 797 deletions.
diff --git a/src/components/__tests__/__snapshots__/app_switcher_menu.test.tsx.snap b/src/components/__tests__/__snapshots__/app_switcher_menu.test.tsx.snap
@@ -0,0 +1,267 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The AppSwitcherMenu component should render 1`] = `
+<div
+  className="app-switcher-menu"
+>
+  <div
+    className="app-switcher-menu__desktop show-sm"
+  >
+    <DropDownMenuBase
+      menuDirection="south"
+      onToggleMenuHandler={[Function]}
+      showMenu={false}
+      triggerElement={
+        <AppSwitcherTrigger
+          isAppSwitcherOpen={false}
+        />
+      }
+    >
+      <div>
+        <li
+          key="https://mycloud-staging.ultimaker.com"
+        >
+          <Button
+            appearance="no-style"
+            className="drop-down-menu-base__item"
+            linkToNewTab={false}
+            linkURL="https://mycloud-staging.ultimaker.com"
+            onClickHandler={[Function]}
+            shape="rectangle"
+            type="link"
+          >
+            My Cloud Portal
+          </Button>
+        </li>
+        <li
+          key="https://account-staging.ultimaker.com"
+        >
+          <Button
+            appearance="no-style"
+            className="drop-down-menu-base__item"
+            linkToNewTab={false}
+            linkURL="https://account-staging.ultimaker.com"
+            onClickHandler={[Function]}
+            shape="rectangle"
+            type="link"
+          >
+            Account
+          </Button>
+        </li>
+        <li
+          key="https://contribute-staging.ultimaker.com"
+        >
+          <Button
+            appearance="no-style"
+            className="drop-down-menu-base__item"
+            linkToNewTab={false}
+            linkURL="https://contribute-staging.ultimaker.com"
+            onClickHandler={[Function]}
+            shape="rectangle"
+            type="link"
+          >
+            Marketplace Portal
+          </Button>
+        </li>
+        <Divider
+          direction="horizontal"
+          margin={true}
+          width="1px"
+        />
+        <li
+          key="https://community.ultimaker.com"
+        >
+          <Button
+            appearance="no-style"
+            className="drop-down-menu-base__item"
+            linkToNewTab={true}
+            linkURL="https://community.ultimaker.com"
+            onClickHandler={[Function]}
+            shape="rectangle"
+            type="link"
+          >
+            Ultimaker Community
+            <Icon(LinkIcon) />
+          </Button>
+        </li>
+        <li
+          key="https://ultimaker.com"
+        >
+          <Button
+            appearance="no-style"
+            className="drop-down-menu-base__item"
+            linkToNewTab={true}
+            linkURL="https://ultimaker.com"
+            onClickHandler={[Function]}
+            shape="rectangle"
+            type="link"
+          >
+            Ultimaker.com
+            <Icon(LinkIcon) />
+          </Button>
+        </li>
+      </div>
+    </DropDownMenuBase>
+  </div>
+  <div
+    className="app-switcher-menu__mobile hide-sm"
+  >
+    <Button
+      appearance="no-style"
+      className="app-switcher-menu__mobile-trigger"
+      linkToNewTab={false}
+      onClickHandler={[Function]}
+      shape="rectangle"
+      type="button"
+    >
+      <AppSwitcherTrigger
+        isAppSwitcherOpen={false}
+      />
+    </Button>
+    <SlideInPanel
+      includeHeader={false}
+      isOpen={false}
+      onOverlayClickHandler={[Function]}
+      slideDirection="right"
+      width="30rem"
+    >
+      <ul
+        className="drop-down-menu-base__menu-list"
+      >
+        <div>
+          <li
+            key="https://mycloud-staging.ultimaker.com"
+          >
+            <Button
+              appearance="no-style"
+              className="drop-down-menu-base__item"
+              linkToNewTab={false}
+              linkURL="https://mycloud-staging.ultimaker.com"
+              onClickHandler={[Function]}
+              shape="rectangle"
+              type="link"
+            >
+              My Cloud Portal
+            </Button>
+          </li>
+          <li
+            key="https://account-staging.ultimaker.com"
+          >
+            <Button
+              appearance="no-style"
+              className="drop-down-menu-base__item"
+              linkToNewTab={false}
+              linkURL="https://account-staging.ultimaker.com"
+              onClickHandler={[Function]}
+              shape="rectangle"
+              type="link"
+            >
+              Account
+            </Button>
+          </li>
+          <li
+            key="https://contribute-staging.ultimaker.com"
+          >
+            <Button
+              appearance="no-style"
+              className="drop-down-menu-base__item"
+              linkToNewTab={false}
+              linkURL="https://contribute-staging.ultimaker.com"
+              onClickHandler={[Function]}
+              shape="rectangle"
+              type="link"
+            >
+              Marketplace Portal
+            </Button>
+          </li>
+          <Divider
+            direction="horizontal"
+            margin={true}
+            width="1px"
+          />
+          <li
+            key="https://community.ultimaker.com"
+          >
+            <Button
+              appearance="no-style"
+              className="drop-down-menu-base__item"
+              linkToNewTab={true}
+              linkURL="https://community.ultimaker.com"
+              onClickHandler={[Function]}
+              shape="rectangle"
+              type="link"
+            >
+              Ultimaker Community
+              <Icon(LinkIcon) />
+            </Button>
+          </li>
+          <li
+            key="https://ultimaker.com"
+          >
+            <Button
+              appearance="no-style"
+              className="drop-down-menu-base__item"
+              linkToNewTab={true}
+              linkURL="https://ultimaker.com"
+              onClickHandler={[Function]}
+              shape="rectangle"
+              type="link"
+            >
+              Ultimaker.com
+              <Icon(LinkIcon) />
+            </Button>
+          </li>
+        </div>
+      </ul>
+    </SlideInPanel>
+  </div>
+</div>
+`;
+
+exports[`The AppSwitcherMenu component should render when there are no apps 1`] = `
+<div
+  className="app-switcher-menu"
+>
+  <div
+    className="app-switcher-menu__desktop show-sm"
+  >
+    <DropDownMenuBase
+      menuDirection="south"
+      onToggleMenuHandler={[Function]}
+      showMenu={false}
+      triggerElement={
+        <AppSwitcherTrigger
+          isAppSwitcherOpen={false}
+        />
+      }
+    />
+  </div>
+  <div
+    className="app-switcher-menu__mobile hide-sm"
+  >
+    <Button
+      appearance="no-style"
+      className="app-switcher-menu__mobile-trigger"
+      linkToNewTab={false}
+      onClickHandler={[Function]}
+      shape="rectangle"
+      type="button"
+    >
+      <AppSwitcherTrigger
+        isAppSwitcherOpen={false}
+      />
+    </Button>
+    <SlideInPanel
+      includeHeader={false}
+      isOpen={false}
+      onOverlayClickHandler={[Function]}
+      slideDirection="right"
+      width="30rem"
+    >
+      <ul
+        className="drop-down-menu-base__menu-list"
+      />
+    </SlideInPanel>
+  </div>
+</div>
+`;
diff --git a/src/components/__tests__/__snapshots__/app_switcher_trigger.test.tsx.snap b/src/components/__tests__/__snapshots__/app_switcher_trigger.test.tsx.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The AppSwitcherTrigger component should render 1`] = `
+<div
+  className="app_switcher_trigger"
+>
+  <div
+    className="grid-icon"
+  >
+    <span
+      className="layer layer--primary"
+    >
+      <span />
+    </span>
+    <span
+      className="layer layer--secondary"
+    >
+      <span />
+    </span>
+    <span
+      className="layer layer--tertiary"
+    >
+      <span />
+    </span>
+  </div>
+</div>
+`;
diff --git a/src/components/__tests__/__snapshots__/button.test.tsx.snap b/src/components/__tests__/__snapshots__/button.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`The Button component renders a anchor when prop \`type\` is link and an
   className="btn btn--primary btn--rectangle "
   href="https://ultimaker.com/"
   id="testButton"
+  onClick={[Function]}
   rel="noopener noreferrer"
 >
   <span

diff --git a/src/components/__tests__/__snapshots__/divider.test.tsx.snap b/src/components/__tests__/__snapshots__/divider.test.tsx.snap
@@ -3,5 +3,23 @@
 exports[`The Divider component should render 1`] = `
 <div
   className="divider divider--horizontal"
+  style={
+    Object {
+      "borderWidth": "2px",
+      "height": "2px",
+    }
+  }
+/>
+`;
+
+exports[`The Divider component should render vertically 1`] = `
+<div
+  className="divider divider--vertical"
+  style={
+    Object {
+      "borderWidth": "2px",
+      "width": "2px",
+    }
+  }
 />
 `;