graphen 2.0.6 → 2.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphen",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "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/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

@@ -12,18 +12,16 @@
     &--active {
       border-color: $gb-color-primary;
     }
-
-    &:hover {
-      .gc-navigation__suboption {
-        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

@@ -4,6 +4,10 @@
   background-color: transparent;
   z-index: $zlayer-top;
 
+  &--opened {
+    display: block;
+  }
+
   &__content {
     padding: 10px;
     border-radius: $radius-medium;

package/src/components/NavigationOption/index.tsx

@@ -0,0 +1,83 @@
+import React, { useCallback, useState } from "react";
+import classNames from "classnames";
+
+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 toggleSubmenu = useCallback(() => {
+    setIsOpened((previousIsOpened) => !previousIsOpened);
+  }, [setIsOpened]);
+
+  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
+        type="button"
+        className="gc-navigation__link"
+        aria-haspopup="true"
+        aria-expanded={isOpened}
+        onClick={toggleSubmenu}
+      >
+        {label}
+      </button>
+      <div className={submenuClasses}>
+        <div className="gc-submenu__content">{children}</div>
+      </div>
+    </li>
+  );
+}
+
+export default NavigationOption;

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;