-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3445311
commit 1546bfc
Showing
6 changed files
with
350 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import * as React from "react"; | ||
| import { | ||
| NavigationMenu, | ||
| NavigationMenuItem, | ||
| NavigationMenuList, | ||
| NavigationMenuTrigger, | ||
| NavigationMenuContent, | ||
| NavigationMenuViewport, | ||
| NavigationMenuLink, | ||
| } from "@radix-ui/react-navigation-menu"; | ||
| import cn from "./utils/cn"; | ||
|
|
||
| const NavigationMenuDemo = ({ | ||
| menuItems, | ||
| navMenuStyling, | ||
| flyOutStyling, | ||
| }: { | ||
| menuItems: { | ||
| label: string; | ||
| content?: React.ReactNode; | ||
| link?: string; | ||
| panelStyling?: string; | ||
| }[]; | ||
| navMenuStyling?: string; | ||
| flyOutStyling?: string; | ||
| }) => { | ||
| const menuLinkStyles = | ||
| "ui-text-menu3 text-neutral-1000 font-bold px-12 py-8 hover:bg-neutral-100 hover:text-neutral-1300 cursor-pointer flex items-center"; | ||
| const viewPortStyling = | ||
| "relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scaleOut data-[state=open]:animate-scaleIn sm:w-[var(--radix-navigation-menu-viewport-width)]"; | ||
| const boxShadowViewport = | ||
| "shadow-[0_201px_56px_0_rgba(20,25,36,0),0_129px_51px_0_rgba(20,25,36,0.02),0_72px_43px_0_rgba(20,25,36,0.06),0_32px_32px_0_rgba(20,25,36,0.10),0_8px_18px_0_rgba(20,25,36,0.12)]"; | ||
|
|
||
| return ( | ||
| <NavigationMenu className={cn(navMenuStyling, "flex w-full relative")}> | ||
| <NavigationMenuList className="flex list-none center"> | ||
| {menuItems.map((menuItem) => ( | ||
| <NavigationMenuItem key={menuItem.label}> | ||
| {menuItem.content ? ( | ||
| <> | ||
| <NavigationMenuTrigger | ||
| className={cn( | ||
| menuLinkStyles, | ||
| "group outline-none focus:outline-none select-none flex items-center justify-between", | ||
| )} | ||
| > | ||
| {menuItem.label} | ||
| </NavigationMenuTrigger> | ||
| <NavigationMenuContent | ||
| className={cn( | ||
| menuItem.panelStyling, | ||
| "absolute left-0 top-0 p-24 z-10", | ||
| )} | ||
| > | ||
| {menuItem.content} | ||
| </NavigationMenuContent> | ||
| </> | ||
| ) : ( | ||
| <NavigationMenuLink> | ||
| <a href={menuItem.link} className={menuLinkStyles}> | ||
| {menuItem.label} | ||
| </a> | ||
| </NavigationMenuLink> | ||
| )} | ||
| </NavigationMenuItem> | ||
| ))} | ||
| </NavigationMenuList> | ||
|
|
||
| <div | ||
| className={cn("absolute left-0 top-full flex w-full", flyOutStyling)} | ||
| > | ||
| <NavigationMenuViewport | ||
| className={cn( | ||
| viewPortStyling, | ||
| boxShadowViewport, | ||
| "border border-neutral-000 rounded-2xl mt-8", | ||
| )} | ||
| /> | ||
| </div> | ||
| </NavigationMenu> | ||
| ); | ||
| }; | ||
|
|
||
| export default NavigationMenuDemo; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| import React from "react"; | ||
| import { StoryFn } from "@storybook/react"; | ||
| import Flyout from "../Flyout"; | ||
| import ProductTile from "../ProductTile"; | ||
| import { ProductName } from "../ProductTile/data"; | ||
| import FeaturedLink from "../FeaturedLink"; | ||
|
|
||
| export default { | ||
| title: "Components/Flyout", | ||
| component: Flyout, | ||
| tags: ["autodocs"], | ||
| }; | ||
|
|
||
| const Template: StoryFn = (args) => <Flyout {...args} />; | ||
|
|
||
| const products: ProductName[] = [ | ||
| "pubsub", | ||
| "chat", | ||
| "spaces", | ||
| "liveSync", | ||
| "assetTracking", | ||
| "liveObjects", | ||
| ]; | ||
|
|
||
| const platforms = [ | ||
| "Infrastructure", | ||
| "Integrations", | ||
| "SDKs", | ||
| "Security & Compliance", | ||
| ]; | ||
|
|
||
| // Note: All the components and data used in this story are just temporary placeholders and will be added as separate component for the Meganav component that can be used here. | ||
| const ProductsGrid = ({ products }: { products: ProductName[] }) => ( | ||
| <div className="grid grid-cols-2"> | ||
| {products.map((product) => ( | ||
| <ProductTile className="bg-neutral-000" name={product} key={product} /> | ||
| ))} | ||
| </div> | ||
| ); | ||
|
|
||
| const Panels = ({ | ||
| panelLeft, | ||
| platforms, | ||
| }: { | ||
| panelLeft: React.ReactNode; | ||
| platforms: string[]; | ||
| }) => ( | ||
| <div className="flex flex-row gap-x-24"> | ||
| <div className="flex-6">{panelLeft}</div> | ||
| <div className="flex-4 pt-12"> | ||
| <p className="ui-text-overline2 text-neutral-700 pb-6">platform</p> | ||
| {platforms.map((item) => ( | ||
| <li className="list-none py-6" key={item}> | ||
| <a | ||
| className="ui-text-menu3 text-neutral-1000" | ||
| href={`/platform/${item.toLowerCase()}`} | ||
| > | ||
| {item} | ||
| </a> | ||
| </li> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| const DefaultPanelLeft = ({ title, desc }: { title: string; desc: string }) => ( | ||
| <div className="bg-neutral-100 w-full p-24"> | ||
| <h4 className="ui-text-h4">{title}</h4> | ||
| <p className="ui-text-p3 text-neutral-800 mt-8">{desc}</p> | ||
| <FeaturedLink | ||
| url="" | ||
| additionalCSS="text-neutral-1300" | ||
| iconColor="text-orange-600" | ||
| > | ||
| Learn more | ||
| </FeaturedLink> | ||
| </div> | ||
| ); | ||
|
|
||
| const panelStyling = "w-full sm:w-[816px] bg-neutral-000"; | ||
|
|
||
| export const Default = Template.bind({}); | ||
| Default.args = { | ||
| menuItems: [ | ||
| { label: "Home", content: null, link: "" }, | ||
| { | ||
| label: "Products", | ||
| content: ( | ||
| <Panels | ||
| panelLeft={<ProductsGrid products={products as ProductName[]} />} | ||
| platforms={platforms} | ||
| /> | ||
| ), | ||
| panelStyling: panelStyling, | ||
| }, | ||
| { | ||
| label: "Solutions", | ||
| content: ( | ||
| <Panels | ||
| panelLeft={ | ||
| <DefaultPanelLeft | ||
| title="Fan engagement" | ||
| desc=" Capture the attention of millions of fans during live events." | ||
| /> | ||
| } | ||
| platforms={platforms} | ||
| /> | ||
| ), | ||
| panelStyling: panelStyling, | ||
| }, | ||
| { | ||
| label: "Company", | ||
| content: ( | ||
| <Panels | ||
| panelLeft={ | ||
| <DefaultPanelLeft | ||
| title="Leading the realtime revolution" | ||
| desc="Hear from our founders about Ably’s ambitious plans to become the world’s definitive realtime platform." | ||
| /> | ||
| } | ||
| platforms={platforms} | ||
| /> | ||
| ), | ||
| panelStyling: panelStyling, | ||
| }, | ||
| { label: "Pricing", content: null, link: "/pricing" }, | ||
| { label: "Docs", content: null, link: "/docs" }, | ||
| ], | ||
| navMenuStyling: "justify-center", | ||
| flyOutStyling: "justify-center", | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Components/Flyout Default smoke-test 1`] = ` | ||
| <nav aria-label="Main" | ||
| data-orientation="horizontal" | ||
| dir="ltr" | ||
| class="justify-center flex w-full relative" | ||
| > | ||
| <div style="position: relative;"> | ||
| <ul data-orientation="horizontal" | ||
| class="flex list-none center" | ||
| dir="ltr" | ||
| > | ||
| <li> | ||
| <a data-radix-collection-item> | ||
| <a href | ||
| class="ui-text-menu3 text-neutral-1000 font-bold px-12 py-8 hover:bg-neutral-100 hover:text-neutral-1300 cursor-pointer flex items-center" | ||
| > | ||
| Home | ||
| </a> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <button id="radix-:r0:-trigger-radix-:r2:" | ||
| data-state="closed" | ||
| aria-expanded="false" | ||
| aria-controls="radix-:r0:-content-radix-:r2:" | ||
| class="ui-text-menu3 text-neutral-1000 font-bold px-12 py-8 hover:bg-neutral-100 hover:text-neutral-1300 cursor-pointer group outline-none focus:outline-none select-none flex items-center justify-between" | ||
| data-radix-collection-item | ||
| > | ||
| Products | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <button id="radix-:r0:-trigger-radix-:r3:" | ||
| data-state="closed" | ||
| aria-expanded="false" | ||
| aria-controls="radix-:r0:-content-radix-:r3:" | ||
| class="ui-text-menu3 text-neutral-1000 font-bold px-12 py-8 hover:bg-neutral-100 hover:text-neutral-1300 cursor-pointer group outline-none focus:outline-none select-none flex items-center justify-between" | ||
| data-radix-collection-item | ||
| > | ||
| Solutions | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <button id="radix-:r0:-trigger-radix-:r4:" | ||
| data-state="closed" | ||
| aria-expanded="false" | ||
| aria-controls="radix-:r0:-content-radix-:r4:" | ||
| class="ui-text-menu3 text-neutral-1000 font-bold px-12 py-8 hover:bg-neutral-100 hover:text-neutral-1300 cursor-pointer group outline-none focus:outline-none select-none flex items-center justify-between" | ||
| data-radix-collection-item | ||
| > | ||
| Company | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <a data-radix-collection-item> | ||
| <a href="/pricing" | ||
| class="ui-text-menu3 text-neutral-1000 font-bold px-12 py-8 hover:bg-neutral-100 hover:text-neutral-1300 cursor-pointer flex items-center" | ||
| > | ||
| Pricing | ||
| </a> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a data-radix-collection-item> | ||
| <a href="/docs" | ||
| class="ui-text-menu3 text-neutral-1000 font-bold px-12 py-8 hover:bg-neutral-100 hover:text-neutral-1300 cursor-pointer flex items-center" | ||
| > | ||
| Docs | ||
| </a> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <div class="absolute left-0 top-full flex w-full justify-center"> | ||
| </div> | ||
| </nav> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters