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..19ad5afaaa 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,17 +24,16 @@ */ /** @jsx jsx */ -// import { useState, useEffect, useContext } from 'react' - -import { useState } from 'react' +import { Fragment, useState, useEffect } 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 + IconHamburgerLine, + IconXLine, + IconAnalyticsLine, + IconAlertsLine } from '@instructure/ui-icons' /** @@ -44,35 +44,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) => { + return React.Children.map(children, (child) => child).filter( + (child) => 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? +

+
) } @@ -91,31 +155,69 @@ const MobileTopNav = ({ const generateStyles = (props, theme) => { 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 }) => { + return {children} +} + +BtnRow.displayName = 'BtnRow' + +const BreadCrumb = ({ children }) => { + return
{children}
+} + +BreadCrumb.displayName = 'BreadCrumb' + +const Title = ({ children }) => { + return
{children}
+} + +Title.displayName = 'Title' + const withStyles = ( generateStyles: (props: any, theme: any) => ComponentStyle @@ -130,7 +232,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..cfd3b57237 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 @@ -33,8 +33,13 @@ type MobileTopNavStyle = { container: { [key: string]: string | number } + containerHeight: (open: boolean) => { + [key: string]: string | number + } } -type MobileTopNavProps = MobileTopNavOwnProps & { styles: MobileTopNavStyle } +type MobileTopNavProps = MobileTopNavOwnProps & { + styles: MobileTopNavStyle +} & PropsWithChildren export type { MobileTopNavProps, MobileTopNavOwnProps }