From 50575f61fa728e22a5ab52f38c0ac5e319ced822 Mon Sep 17 00:00:00 2001 From: PietiKinnunen <106057688+PietiKinnunen@users.noreply.github.com> Date: Wed, 4 Oct 2023 11:54:58 +0300 Subject: [PATCH 1/6] Add Community nav item --- components/Menu/structure.ts | 27 +++++++++++++++++++++++++++ tests/data/navbar-data.ts | 30 +++++++++++++++++++++++++++--- 2 files changed, 54 insertions(+), 3 deletions(-) diff --git a/components/Menu/structure.ts b/components/Menu/structure.ts index 5eda93a252..7686ff8126 100644 --- a/components/Menu/structure.ts +++ b/components/Menu/structure.ts @@ -268,6 +268,33 @@ const menu: MenuCategoryProps[] = [ href: "/pricing/", testId: "pricing", }, + { + title: "Community", + href: "/community/", + testId: "community", + children: [ + { + title: "Getting Started with OSS", + href: "/docs/", + }, + { + title: "Downloads", + href: "/download/", + }, + { + title: "Community Slack", + href: "/community-slack/", + }, + { + title: "GitHub Discussions", + href: "https://github.com/gravitational/teleport/discussions", + }, + { + title: "Podcasts", + href: "/resources/podcast/", + }, + ], + }, ]; export default menu; diff --git a/tests/data/navbar-data.ts b/tests/data/navbar-data.ts index c5ce3f5dcd..7e285566f4 100644 --- a/tests/data/navbar-data.ts +++ b/tests/data/navbar-data.ts @@ -300,9 +300,33 @@ export const navigationData: NavbarData = [ isExternal: true, }, { - button: { title: "", testId: "search" }, - href: "https://goteleport.com/search/", - isExternal: true, + button: { title: "Community", testId: "community" }, + menu: { + title: "Community", + testId: "community-menu", + children: [ + { + title: "Getting Started with OSS", + href: "/docs/", + }, + { + title: "Downloads", + href: "/download/", + }, + { + title: "Community Slack", + href: "/community-slack/", + }, + { + title: "GitHub Discussions", + href: "https://github.com/gravitational/teleport/discussions", + }, + { + title: "Podcasts", + href: "/resources/podcast/", + }, + ], + }, }, { button: { title: "Downloads", testId: "downloads" }, From dd0363d6e725d959c0c0dcfdc7b4c1f0ba27734f Mon Sep 17 00:00:00 2001 From: PietiKinnunen <106057688+PietiKinnunen@users.noreply.github.com> Date: Wed, 4 Oct 2023 11:57:59 +0300 Subject: [PATCH 2/6] Remove downloads link --- components/Header/HeaderCTA.tsx | 8 -------- tests/data/navbar-data.ts | 5 ----- 2 files changed, 13 deletions(-) diff --git a/components/Header/HeaderCTA.tsx b/components/Header/HeaderCTA.tsx index f4b30e01ab..de215d629f 100644 --- a/components/Header/HeaderCTA.tsx +++ b/components/Header/HeaderCTA.tsx @@ -2,7 +2,6 @@ import cn from "classnames"; import { useState, useCallback, useRef, MouseEvent } from "react"; import { useClickAway } from "react-use"; import Button from "components/Button"; -import Link from "components/Link"; import { DropdownMenuOverlay, DropdownMenuCTA, @@ -30,13 +29,6 @@ const HeaderCTA = () => { <> {isSignInVisible && }
- - Downloads -
-
- - - - -
-
- -
- +
+ + +
); }; diff --git a/components/Menu/Category.module.css b/components/Menu/Category.module.css index e4c39d2fd9..147e97979a 100644 --- a/components/Menu/Category.module.css +++ b/components/Menu/Category.module.css @@ -19,7 +19,7 @@ align-items: center; justify-content: center; z-index: 3001; - width: 100%; + white-space: nowrap; min-width: 0; height: 80px; padding: 0 var(--m-2); diff --git a/components/Menu/Menu.module.css b/components/Menu/Menu.module.css index ec63f48b40..4886e87dff 100644 --- a/components/Menu/Menu.module.css +++ b/components/Menu/Menu.module.css @@ -28,3 +28,23 @@ max-width: none; } } + +.signInDropdown { + display: none; + z-index: 3000; + + @media (--sm-scr) { + position: relative; + width: 100%; + } + + @media (--md-scr) { + position: absolute; + left: 0; + min-width: 400px; + } + + &.visible { + display: block; + } +} diff --git a/components/Menu/Menu.tsx b/components/Menu/Menu.tsx index 18377f9514..db8e1ef800 100644 --- a/components/Menu/Menu.tsx +++ b/components/Menu/Menu.tsx @@ -1,10 +1,29 @@ -import { useState } from "react"; +import { useState, useRef, useCallback, MouseEvent } from "react"; +import { useClickAway } from "react-use"; import MenuCategory from "./Category"; import structure from "./structure"; import styles from "./Menu.module.css"; +import categoryStyles from "./Category.module.css"; +import cn from "classnames"; +import { DropdownMenuCTA, DropdownMenuItemCTA } from "../DropdownMenu"; const Menu = () => { const [openedCategoryId, setOpenedCategoryId] = useState(null); + const ref = useRef(null); + + const [isSignInVisible, setIsSignInVisible] = useState(false); + const toggleSignIn = useCallback((e: MouseEvent) => { + e.preventDefault(); + + setIsSignInVisible((value) => !value); + }, []); + + useClickAway(ref, () => { + if (isSignInVisible) { + setIsSignInVisible(false); + } + }); + return ( ); }; From 340a34ffc263ca233d0fd6ad8afb074b12490206 Mon Sep 17 00:00:00 2001 From: PietiKinnunen <106057688+PietiKinnunen@users.noreply.github.com> Date: Wed, 4 Oct 2023 12:40:47 +0300 Subject: [PATCH 4/6] Add ref to Sign In link --- components/Menu/Menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Menu/Menu.tsx b/components/Menu/Menu.tsx index db8e1ef800..55aec8740d 100644 --- a/components/Menu/Menu.tsx +++ b/components/Menu/Menu.tsx @@ -35,7 +35,7 @@ const Menu = () => { {...props} /> ))} -
+
Date: Wed, 4 Oct 2023 12:46:26 +0300 Subject: [PATCH 5/6] Remove pb from DropdownMenu --- components/DropdownMenu/DropdownMenu.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/components/DropdownMenu/DropdownMenu.module.css b/components/DropdownMenu/DropdownMenu.module.css index e27aab5c80..69bcaf54d7 100644 --- a/components/DropdownMenu/DropdownMenu.module.css +++ b/components/DropdownMenu/DropdownMenu.module.css @@ -44,7 +44,6 @@ .body { box-sizing: border-box; display: block; - padding: 0 0 var(--m-2); } .withSubMenus { From 6ec2897ca1c5113c884bb97c90539576cdd5bd45 Mon Sep 17 00:00:00 2001 From: PietiKinnunen <106057688+PietiKinnunen@users.noreply.github.com> Date: Thu, 5 Oct 2023 11:41:34 +0300 Subject: [PATCH 6/6] Structure changes - Removed sign in dropdown - Added GitHub to community menu - Changed the order of CTA buttons - Updated test data --- components/Header/HeaderCTA.tsx | 14 ++++----- components/Menu/Menu.module.css | 20 ------------- components/Menu/Menu.tsx | 52 +-------------------------------- components/Menu/structure.ts | 9 ++++++ tests/data/navbar-data.ts | 26 +++++++---------- 5 files changed, 27 insertions(+), 94 deletions(-) diff --git a/components/Header/HeaderCTA.tsx b/components/Header/HeaderCTA.tsx index dce97c168b..f9db8c3a51 100644 --- a/components/Header/HeaderCTA.tsx +++ b/components/Header/HeaderCTA.tsx @@ -6,20 +6,20 @@ const HeaderCTA = () => {
); diff --git a/components/Menu/Menu.module.css b/components/Menu/Menu.module.css index 4886e87dff..ec63f48b40 100644 --- a/components/Menu/Menu.module.css +++ b/components/Menu/Menu.module.css @@ -28,23 +28,3 @@ max-width: none; } } - -.signInDropdown { - display: none; - z-index: 3000; - - @media (--sm-scr) { - position: relative; - width: 100%; - } - - @media (--md-scr) { - position: absolute; - left: 0; - min-width: 400px; - } - - &.visible { - display: block; - } -} diff --git a/components/Menu/Menu.tsx b/components/Menu/Menu.tsx index 55aec8740d..6323ae2e8e 100644 --- a/components/Menu/Menu.tsx +++ b/components/Menu/Menu.tsx @@ -1,28 +1,10 @@ -import { useState, useRef, useCallback, MouseEvent } from "react"; -import { useClickAway } from "react-use"; +import { useState } from "react"; import MenuCategory from "./Category"; import structure from "./structure"; import styles from "./Menu.module.css"; -import categoryStyles from "./Category.module.css"; -import cn from "classnames"; -import { DropdownMenuCTA, DropdownMenuItemCTA } from "../DropdownMenu"; const Menu = () => { const [openedCategoryId, setOpenedCategoryId] = useState(null); - const ref = useRef(null); - - const [isSignInVisible, setIsSignInVisible] = useState(false); - const toggleSignIn = useCallback((e: MouseEvent) => { - e.preventDefault(); - - setIsSignInVisible((value) => !value); - }, []); - - useClickAway(ref, () => { - if (isSignInVisible) { - setIsSignInVisible(false); - } - }); return ( ); }; diff --git a/components/Menu/structure.ts b/components/Menu/structure.ts index 7686ff8126..2364eb8a4a 100644 --- a/components/Menu/structure.ts +++ b/components/Menu/structure.ts @@ -285,6 +285,10 @@ const menu: MenuCategoryProps[] = [ title: "Community Slack", href: "/community-slack/", }, + { + title: "GitHub", + href: "https://github.com/gravitational/teleport/", + }, { title: "GitHub Discussions", href: "https://github.com/gravitational/teleport/discussions", @@ -295,6 +299,11 @@ const menu: MenuCategoryProps[] = [ }, ], }, + { + title: "Sign In", + href: "https://teleport.sh/", + testId: "sign-in", + }, ]; export default menu; diff --git a/tests/data/navbar-data.ts b/tests/data/navbar-data.ts index e45bb4f76a..6735d7dda4 100644 --- a/tests/data/navbar-data.ts +++ b/tests/data/navbar-data.ts @@ -317,6 +317,11 @@ export const navigationData: NavbarData = [ title: "Community Slack", href: "/community-slack/", }, + { + title: "GitHub", + href: "https://github.com/gravitational/teleport/", + isExternal: true, + }, { title: "GitHub Discussions", href: "https://github.com/gravitational/teleport/discussions", @@ -330,26 +335,15 @@ export const navigationData: NavbarData = [ }, { button: { title: "Sign In", testId: "sign-in" }, - menu: { - title: "Sign in to Teleport", - testId: "sign-in-menu", - children: [ - { - title: "Teleport Cloud Login", - href: "https://teleport.sh/", - isExternal: true, - }, - { - title: "Dashboard Login", - href: "https://dashboard.gravitational.com/web/login/", - isExternal: true, - }, - ], - }, + href: "https://teleport.sh/", }, { button: { title: "Get Started", testId: "get-started" }, href: "/signup/", isExternal: true, }, + { + button: { title: "Contact Sales", testId: "contact-sales" }, + href: "/signup/enterprise/", + }, ];