graphen 2.0.7 → 2.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphen",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "Graphen is a small library, that keeps reusable blocks of UI and helps making application design consistent across multiple projects.",
   "main": "src/index.ts",
   "files": [

package/src/components/Dropdown/integration/dropdown.spec.js

@@ -1,6 +1,6 @@
 describe("dropdown menu", () => {
   it("should open dropdown and pick a value", () => {
-    cy.visit("http://localhost:3000");
+    cy.visit("/");
 
     cy.get("#dropdown").scrollIntoView();
 

package/src/components/Navigation/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+function Navigation({ className = "", children = null }: Props) {
+  const navigationClasses = classNames(
+    className,
+    "gc-navigation",
+    "gc-navigation--default"
+  );
+
+  return <ul className={navigationClasses}>{children}</ul>;
+}
+
+export default Navigation;

package/src/components/Navigation/styles/_styles.scss

@@ -7,24 +7,21 @@
 
   &__option {
     display: inline-block;
-    position: relative;
     border-bottom: 3px solid transparent;
 
     &--active {
       border-color: $gb-color-primary;
     }
-
-    &:hover {
-      .gc-submenu {
-        display: block;
-      }
-    }
   }
 
   &__link {
     display: block;
-    padding-left: $spacing-large;
-    padding-right: $spacing-large;
+    padding: 0 $spacing-large;
+    border: 0;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
     line-height: 54px;
     font-weight: 600;
   }

package/src/components/Navigation/styles/_submenu.scss

@@ -1,14 +1,11 @@
 .gc-submenu {
   display: none;
-  position: absolute;
-  top: 100%;
-  left: 0;
+  position: fixed;
   background-color: transparent;
   z-index: $zlayer-top;
 
-  @include gx-phone {
-    left: auto;
-    right: 0;
+  &--opened {
+    display: block;
   }
 
   &__content {

package/src/components/NavigationOption/index.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
+import classNames from "classnames";
+
+const SUBMENU_VIEWPORT_MARGIN = 10;
+
+type Props = {
+  className?: string;
+  label: React.ReactNode;
+  href?: string;
+  isActive?: boolean;
+  children?: React.ReactNode;
+};
+
+function NavigationOption({
+  className = "",
+  label,
+  href = undefined,
+  isActive = false,
+  children = null,
+}: Props) {
+  const [isOpened, setIsOpened] = useState(false);
+  const [submenuPosition, setSubmenuPosition] = useState({ top: 0, left: 0 });
+  const triggerReference = useRef<HTMLButtonElement>(null);
+  const submenuReference = useRef<HTMLDivElement>(null);
+
+  const toggleSubmenu = useCallback(() => {
+    setIsOpened((previousIsOpened) => !previousIsOpened);
+  }, [setIsOpened]);
+
+  const updateSubmenuPosition = useCallback(() => {
+    const trigger = triggerReference.current;
+    const submenu = submenuReference.current;
+
+    if (!trigger || !submenu) {
+      return;
+    }
+
+    const triggerRect = trigger.getBoundingClientRect();
+    const maximumLeft =
+      window.innerWidth - submenu.offsetWidth - SUBMENU_VIEWPORT_MARGIN;
+
+    setSubmenuPosition({
+      top: triggerRect.bottom,
+      left: Math.max(
+        SUBMENU_VIEWPORT_MARGIN,
+        Math.min(triggerRect.left, maximumLeft)
+      ),
+    });
+  }, [setSubmenuPosition]);
+
+  useLayoutEffect(() => {
+    if (!isOpened) {
+      return undefined;
+    }
+
+    updateSubmenuPosition();
+
+    // capture phase catches scrolling inside consumer overflow containers
+    window.addEventListener("scroll", updateSubmenuPosition, true);
+    window.addEventListener("resize", updateSubmenuPosition);
+
+    return () => {
+      window.removeEventListener("scroll", updateSubmenuPosition, true);
+      window.removeEventListener("resize", updateSubmenuPosition);
+    };
+  }, [isOpened, updateSubmenuPosition]);
+
+  const closeSubmenuOnBlur = useCallback(
+    (event: React.FocusEvent<HTMLLIElement>) => {
+      if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+        setIsOpened(false);
+      }
+    },
+    [setIsOpened]
+  );
+
+  const closeSubmenuOnEscape = useCallback(
+    (event: React.KeyboardEvent<HTMLLIElement>) => {
+      if (event.key === "Escape") {
+        setIsOpened(false);
+      }
+    },
+    [setIsOpened]
+  );
+
+  const optionClasses = classNames(className, "gc-navigation__option", {
+    "gc-navigation__option--active": isActive,
+  });
+
+  if (!children) {
+    return (
+      <li className={optionClasses}>
+        <a className="gc-navigation__link" href={href}>
+          {label}
+        </a>
+      </li>
+    );
+  }
+
+  const submenuClasses = classNames("gc-submenu", {
+    "gc-submenu--opened": isOpened,
+  });
+
+  return (
+    <li
+      className={optionClasses}
+      onBlur={closeSubmenuOnBlur}
+      onKeyDown={closeSubmenuOnEscape}
+    >
+      <button
+        ref={triggerReference}
+        type="button"
+        className="gc-navigation__link"
+        aria-haspopup="true"
+        aria-expanded={isOpened}
+        onClick={toggleSubmenu}
+      >
+        {label}
+      </button>
+      <div
+        ref={submenuReference}
+        className={submenuClasses}
+        style={{ top: submenuPosition.top, left: submenuPosition.left }}
+      >
+        <div className="gc-submenu__content">{children}</div>
+      </div>
+    </li>
+  );
+}
+
+export default NavigationOption;

package/src/components/NavigationOption/integration/navigation-option.spec.js

@@ -0,0 +1,30 @@
+describe("navigation submenu", () => {
+  it("should anchor submenu to its parent option in a scrolled navigation", () => {
+    cy.visit("/");
+
+    cy.get("#navigation").scrollIntoView();
+
+    cy.get("#navigation .gc-navigation")
+      .eq(1)
+      .parent()
+      .scrollTo("right")
+      .within(() => {
+        cy.contains("button.gc-navigation__link", "Platform").click();
+      });
+
+    cy.window().then((win) => {
+      cy.contains("button.gc-navigation__link", "Platform").then(($trigger) => {
+        const triggerRect = $trigger[0].getBoundingClientRect();
+
+        cy.get(".gc-submenu--opened").then(($submenu) => {
+          const submenuRect = $submenu[0].getBoundingClientRect();
+
+          expect(submenuRect.top).to.be.closeTo(triggerRect.bottom, 1);
+          expect(submenuRect.left).to.be.at.most(triggerRect.left + 1);
+          expect(submenuRect.left).to.be.at.least(0);
+          expect(submenuRect.right).to.be.at.most(win.innerWidth);
+        });
+      });
+    });
+  });
+});

package/src/example/styles/_docs.scss

@@ -605,6 +605,63 @@ body.docs-body {
   overflow: hidden;
 }
 
+.docs-flex-demo {
+  width: 100%;
+}
+
+.docs-flex-box {
+  padding: 10px 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-2);
+  font-size: 13px;
+  color: var(--text);
+}
+
+.docs-loader-stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 96px;
+  border-radius: var(--radius-lg);
+  background: #23272e;
+}
+
+.docs-skeleton-demo {
+  width: 260px;
+
+  .gc-skeleton:nth-child(2) {
+    width: 80%;
+  }
+
+  .gc-skeleton:nth-child(3) {
+    width: 55%;
+  }
+}
+
+.docs-tooltip-anchor {
+  position: relative;
+  width: 180px;
+  height: 56px;
+}
+
+.docs-list-demo {
+  width: 100%;
+  max-width: 360px;
+  margin: 0;
+}
+
+.docs-scroller-track {
+  width: 240px;
+}
+
+.docs-demo-value {
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  color: var(--text-muted);
+}
+
 .docs-type-row {
   display: grid;
   grid-template-columns: 80px 80px 1fr;