From b93c859fd5eff9da17f7b9c1973001d543458f10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20S=C3=A1ros?= Date: Thu, 22 Aug 2024 16:40:04 +0200 Subject: [PATCH] WIP(ui-top-nav-bar): wip --- package-lock.json | 403 +----------------- packages/__docs__/src/App/index.tsx | 51 ++- packages/__docs__/src/index.js | 8 +- .../ui-top-nav-bar/src/MobileTopNav/README.md | 12 +- .../ui-top-nav-bar/src/MobileTopNav/index.tsx | 208 ++++++--- .../ui-top-nav-bar/src/MobileTopNav/props.ts | 17 +- 6 files changed, 220 insertions(+), 479 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3d20ae5cf0..4e126b5487 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11508,406 +11508,6 @@ } } }, - "node_modules/@xn-sakina/phoenix": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@xn-sakina/phoenix/-/phoenix-1.0.3.tgz", - "integrity": "sha512-ux7bsSChXVW36jG6902jnO+frMUHFgOQXHNSaY9xihOKcHoGJFdOa6tOzt7J4JaMZNtFKwuZrT/WjUJL23dzvg==", - "deprecated": "This package will no longer be maintained", - "dev": true, - "dependencies": { - "esbuild": "^0.17.11", - "pirates": "^4.0.5" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/android-arm": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz", - "integrity": "sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/android-arm64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz", - "integrity": "sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/android-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.19.tgz", - "integrity": "sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/darwin-arm64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz", - "integrity": "sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/darwin-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz", - "integrity": "sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/freebsd-arm64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz", - "integrity": "sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/freebsd-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz", - "integrity": "sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-arm": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz", - "integrity": "sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-arm64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz", - "integrity": "sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-ia32": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz", - "integrity": "sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-loong64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz", - "integrity": "sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==", - "cpu": [ - "loong64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-mips64el": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz", - "integrity": "sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==", - "cpu": [ - "mips64el" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-ppc64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz", - "integrity": "sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-riscv64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz", - "integrity": "sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==", - "cpu": [ - "riscv64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-s390x": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz", - "integrity": "sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==", - "cpu": [ - "s390x" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/linux-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz", - "integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/netbsd-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz", - "integrity": "sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/openbsd-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz", - "integrity": "sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/sunos-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz", - "integrity": "sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "sunos" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/win32-arm64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz", - "integrity": "sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/win32-ia32": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz", - "integrity": "sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/@esbuild/win32-x64": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz", - "integrity": "sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@xn-sakina/phoenix/node_modules/esbuild": { - "version": "0.17.19", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz", - "integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==", - "dev": true, - "hasInstallScript": true, - "bin": { - "esbuild": "bin/esbuild" - }, - "engines": { - "node": ">=12" - }, - "optionalDependencies": { - "@esbuild/android-arm": "0.17.19", - "@esbuild/android-arm64": "0.17.19", - "@esbuild/android-x64": "0.17.19", - "@esbuild/darwin-arm64": "0.17.19", - "@esbuild/darwin-x64": "0.17.19", - "@esbuild/freebsd-arm64": "0.17.19", - "@esbuild/freebsd-x64": "0.17.19", - "@esbuild/linux-arm": "0.17.19", - "@esbuild/linux-arm64": "0.17.19", - "@esbuild/linux-ia32": "0.17.19", - "@esbuild/linux-loong64": "0.17.19", - "@esbuild/linux-mips64el": "0.17.19", - "@esbuild/linux-ppc64": "0.17.19", - "@esbuild/linux-riscv64": "0.17.19", - "@esbuild/linux-s390x": "0.17.19", - "@esbuild/linux-x64": "0.17.19", - "@esbuild/netbsd-x64": "0.17.19", - "@esbuild/openbsd-x64": "0.17.19", - "@esbuild/sunos-x64": "0.17.19", - "@esbuild/win32-arm64": "0.17.19", - "@esbuild/win32-ia32": "0.17.19", - "@esbuild/win32-x64": "0.17.19" - } - }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -42460,7 +42060,8 @@ "@instructure/ui-babel-preset": "10.0.0", "@types/jscodeshift": "^0.11.11", "@types/prettier": "^2.7.3", - "@xn-sakina/phoenix": "^1.0.3", + "esbuild": "^0.23.0", + "pirates": "^4.0.6", "vitest": "^2.0.2" } }, diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx index f623f2fd16..6caad73dcb 100644 --- a/packages/__docs__/src/App/index.tsx +++ b/packages/__docs__/src/App/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/jsx-no-undef */ /* * The MIT License (MIT) * @@ -732,26 +733,24 @@ class App extends Component { return } + const lightMode = false const brandSvg = ( - // eslint-disable-next-line jsx-a11y/anchor-is-valid - - + ) return ( @@ -770,7 +769,37 @@ class App extends Component { boxSizing: 'border-box' }} > - + + + + + + + + + + + +
+ + Back +
+ + + Courses +

1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus diff --git a/packages/__docs__/src/index.js b/packages/__docs__/src/index.js index 56e9c416ef..c958c53ec8 100644 --- a/packages/__docs__/src/index.js +++ b/packages/__docs__/src/index.js @@ -30,9 +30,7 @@ import { InstUISettingsProvider } from '@instructure/emotion' import '../globals' createRoot(document.getElementById('app')).render( - - - - - + + + ) diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/README.md b/packages/ui-top-nav-bar/src/MobileTopNav/README.md index 7fd75d41fe..32fd6797e8 100644 --- a/packages/ui-top-nav-bar/src/MobileTopNav/README.md +++ b/packages/ui-top-nav-bar/src/MobileTopNav/README.md @@ -9,16 +9,16 @@ POC mobile top nav type: example --- const Example = () => { + const lightMode = false const brandSvg = ( - + - - - + + + ) return ( -

- +

1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet? diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx index dae154106d..867835e1c2 100644 --- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx +++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/display-name */ /* * The MIT License (MIT) * @@ -23,18 +24,13 @@ */ /** @jsx jsx */ -// import { useState, useEffect, useContext } from 'react' - -import { useState } from 'react' +import { Children, Fragment, useState, useEffect } from 'react' +import type { PropsWithChildren } from 'react' import { jsx, useTheme } from '@instructure/emotion' -import type { MobileTopNavProps, MobileTopNavOwnProps } from './props' +import type { MobileTopNavProps } from './props' import { IconButton } from '@instructure/ui-buttons' -import { - IconHamburgerSolid, - IconEyeSolid, - IconXSolid -} from '@instructure/ui-icons' +import { IconHamburgerLine, IconXLine } from '@instructure/ui-icons' /** --- @@ -44,35 +40,28 @@ category: components const MobileTopNav = ({ lightMode = false, brand, - styles + styles, + children }: MobileTopNavProps) => { const [open, setOpen] = useState(false) + useEffect(() => { + const body = document.getElementsByTagName('body')[0] + body.style.overflow = open ? 'hidden' : 'visible' + }, [open]) + + const getSubComponent = (displayName: any) => { + return Children.map(children, (child: any) => child).filter( + (child: any) => child?.type?.displayName === displayName + ) + } + return ( -

-
+
+
{brand} - - - - + + {!open && getSubComponent('BtnRow')} setOpen((open) => !open)} > - {open ? : } + {open ? : }
+ +
+ {getSubComponent('BreadCrumb')} + {getSubComponent('Title')} +

+ 1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias + excepturi a blanditiis, aspernatur repellat repellendus dolores cum + labore eligendi architecto asperiores, dolor quisquam sequi mollitia + quibusdam, cumque id ab amet? +

+

+ 2 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias + excepturi a blanditiis, aspernatur repellat repellendus dolores cum + labore eligendi architecto asperiores, dolor quisquam sequi mollitia + quibusdam, cumque id ab amet? +

+

+ 3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias + excepturi a blanditiis, aspernatur repellat repellendus dolores cum + labore eligendi architecto asperiores, dolor quisquam sequi mollitia + quibusdam, cumque id ab amet? +

+

+ 4 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias + excepturi a blanditiis, aspernatur repellat repellendus dolores cum + labore eligendi architecto asperiores, dolor quisquam sequi mollitia + quibusdam, cumque id ab amet? +

+

+ 5 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias + excepturi a blanditiis, aspernatur repellat repellendus dolores cum + labore eligendi architecto asperiores, dolor quisquam sequi mollitia + quibusdam, cumque id ab amet? +

+

+ 6 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias + excepturi a blanditiis, aspernatur repellat repellendus dolores cum + labore eligendi architecto asperiores, dolor quisquam sequi mollitia + quibusdam, cumque id ab amet? +

+

+ 7 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias + excepturi a blanditiis, aspernatur repellat repellendus dolores cum + labore eligendi architecto asperiores, dolor quisquam sequi mollitia + quibusdam, cumque id ab amet? +

+

+ 8 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias + excepturi a blanditiis, aspernatur repellat repellendus dolores cum + labore eligendi architecto asperiores, dolor quisquam sequi mollitia + quibusdam, cumque id ab amet? +

+

+ 9 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias + excepturi a blanditiis, aspernatur repellat repellendus dolores cum + labore eligendi architecto asperiores, dolor quisquam sequi mollitia + quibusdam, cumque id ab amet? +

+

+ 10 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias + excepturi a blanditiis, aspernatur repellat repellendus dolores cum + labore eligendi architecto asperiores, dolor quisquam sequi mollitia + quibusdam, cumque id ab amet? +

+

+ 11 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias + excepturi a blanditiis, aspernatur repellat repellendus dolores cum + labore eligendi architecto asperiores, dolor quisquam sequi mollitia + quibusdam, cumque id ab amet? +

+
) } -const generateStyles = (props, theme) => { +const generateStyles = (props: MobileTopNavProps, theme: any) => { const { lightMode } = props return { - container: { + container: (open: boolean) => { + return { + height: '54px', + position: open ? 'fixed' : 'relative', + backgroundColor: lightMode + ? theme.colors.ui.surfacePageSecondary + : theme.colors.ui.surfaceDark, + color: lightMode + ? theme.colors.contrasts.grey125125 + : theme.colors?.contrasts?.white1010, + width: '100%' + } + }, + topBar: { padding: `0 ${theme.spacing.small}`, - backgroundColor: lightMode - ? theme.colors.ui.surfacePageSecondary - : theme.colors.ui.surfaceDark, - color: lightMode - ? theme.colors.contrasts.grey125125 - : theme.colors?.contrasts?.white1010, - position: 'absolute', - top: 0, - bottom: 0, - left: 0, - right: 0, - width: '100%' + height: '54px', + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between' }, - containerHeight: (open: boolean) => { + content: (open: boolean) => { return { - height: open ? '100%' : '54px', - position: open ? 'absolute' : 'relative' + padding: `0 ${theme.spacing.small}`, + height: open ? '100%' : '0px', + top: '54px', + bottom: 0, + left: 0, + right: 0, + overflow: open ? 'scroll' : 'hidden', + position: 'fixed', + backgroundColor: lightMode + ? theme.colors.ui.surfacePageSecondary + : theme.colors.ui.surfaceDark, + color: lightMode + ? theme.colors.contrasts.grey125125 + : theme.colors?.contrasts?.white1010 } + }, + btnRow: { + display: 'flex', + gap: '12px' } } } -// eslint-disable-next-line react/display-name +const BtnRow = ({ children }: PropsWithChildren) => { + return {children} +} + +BtnRow.displayName = 'BtnRow' + +const BreadCrumb = ({ children }: PropsWithChildren) => { + return
{children}
+} + +BreadCrumb.displayName = 'BreadCrumb' + +const Title = ({ children }: PropsWithChildren) => { + return
{children}
+} + +Title.displayName = 'Title' + const withStyles = ( generateStyles: (props: any, theme: any) => ComponentStyle @@ -130,7 +228,11 @@ const withStyles = return } -const SC = withStyles(generateStyles)(MobileTopNav) +const SC: any = withStyles(generateStyles)(MobileTopNav) + +SC.BtnRow = BtnRow +SC.BreadCrumb = BreadCrumb +SC.Title = Title export { SC as MobileTopNav } export default SC diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts index 841c08cc29..af0fc3d20c 100644 --- a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts +++ b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts @@ -22,7 +22,7 @@ * SOFTWARE. */ -import type { ReactNode } from 'react' +import type { ReactNode, PropsWithChildren } from 'react' type MobileTopNavOwnProps = { lightMode?: boolean @@ -30,11 +30,22 @@ type MobileTopNavOwnProps = { } type MobileTopNavStyle = { - container: { + container: (open: boolean) => { + [key: string]: string | number + } + content: (open: boolean) => { + [key: string]: string | number + } + topBar: { + [key: string]: string | number + } + btnRow: { [key: string]: string | number } } -type MobileTopNavProps = MobileTopNavOwnProps & { styles: MobileTopNavStyle } +type MobileTopNavProps = MobileTopNavOwnProps & { + styles: MobileTopNavStyle +} & PropsWithChildren export type { MobileTopNavProps, MobileTopNavOwnProps }