From dca031afd9360e2b67937392c1af191c9e3978d8 Mon Sep 17 00:00:00 2001 From: Chancellor Clark Date: Wed, 14 Aug 2019 17:12:52 -0500 Subject: [PATCH] feat(docs): add responsive mobile header (#165) * feat(docs): add responsive mobile header * fix: pr comments --- .../src/components/MenuIcon.tsx | 16 ++ .../big-design-icons/src/components/index.ts | 1 + .../big-design-icons/svgs/material/menu.svg | 1 + .../docs/components/Collapsible/styled.tsx | 1 + packages/docs/components/SideNav/SideNav.tsx | 209 +++++++++--------- .../SideNav/SideNavGroup/SideNavGroup.tsx | 2 +- .../SideNav/SideNavLink/SideNavLink.tsx | 9 +- .../SideNav/SideNavLogo/SideNavLogo.tsx | 15 ++ .../components/SideNav/SideNavLogo/index.tsx | 1 + .../components/SideNav/SideNavLogo/styled.tsx | 10 + .../SideNav/SideNavMenu/SideNavMenu.tsx | 25 +++ .../components/SideNav/SideNavMenu/index.tsx | 1 + .../components/SideNav/SideNavMenu/styled.tsx | 38 ++++ packages/docs/components/SideNav/styled.tsx | 24 +- .../pages/Breakpoints/BreakpointsPage.tsx | 116 +++++----- packages/docs/pages/_app.tsx | 28 ++- packages/docs/pages/_document.tsx | 4 +- 17 files changed, 314 insertions(+), 187 deletions(-) create mode 100644 packages/big-design-icons/src/components/MenuIcon.tsx create mode 100644 packages/big-design-icons/svgs/material/menu.svg create mode 100644 packages/docs/components/SideNav/SideNavLogo/SideNavLogo.tsx create mode 100644 packages/docs/components/SideNav/SideNavLogo/index.tsx create mode 100644 packages/docs/components/SideNav/SideNavLogo/styled.tsx create mode 100644 packages/docs/components/SideNav/SideNavMenu/SideNavMenu.tsx create mode 100644 packages/docs/components/SideNav/SideNavMenu/index.tsx create mode 100644 packages/docs/components/SideNav/SideNavMenu/styled.tsx diff --git a/packages/big-design-icons/src/components/MenuIcon.tsx b/packages/big-design-icons/src/components/MenuIcon.tsx new file mode 100644 index 000000000..7bb5da65f --- /dev/null +++ b/packages/big-design-icons/src/components/MenuIcon.tsx @@ -0,0 +1,16 @@ +// ********************************** +// Auto-generated file, do NOT modify +// ********************************** +import React from 'react'; + +import { createStyledIcon, IconProps } from '../base'; + +const Icon = React.memo>(({ title, theme, ...props }) => ( + + {title} + + + +)); + +export const MenuIcon = createStyledIcon(Icon); diff --git a/packages/big-design-icons/src/components/index.ts b/packages/big-design-icons/src/components/index.ts index 7d11caf57..2695ff940 100644 --- a/packages/big-design-icons/src/components/index.ts +++ b/packages/big-design-icons/src/components/index.ts @@ -19,6 +19,7 @@ export * from './FileCopyIcon'; export * from './FilterListIcon'; export * from './InvertColorsIcon'; export * from './LanguageIcon'; +export * from './MenuIcon'; export * from './MoreHorizIcon'; export * from './NotificationsIcon'; export * from './OpenInNewIcon'; diff --git a/packages/big-design-icons/svgs/material/menu.svg b/packages/big-design-icons/svgs/material/menu.svg new file mode 100644 index 000000000..ef29f8ec9 --- /dev/null +++ b/packages/big-design-icons/svgs/material/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/docs/components/Collapsible/styled.tsx b/packages/docs/components/Collapsible/styled.tsx index a2e625dab..f5b034d11 100644 --- a/packages/docs/components/Collapsible/styled.tsx +++ b/packages/docs/components/Collapsible/styled.tsx @@ -4,4 +4,5 @@ import styled from 'styled-components'; export const StyledFlex = styled(Flex)` cursor: pointer; display: inline-flex; + flex-direction: row; `; diff --git a/packages/docs/components/SideNav/SideNav.tsx b/packages/docs/components/SideNav/SideNav.tsx index 55cbbca01..b42296fce 100644 --- a/packages/docs/components/SideNav/SideNav.tsx +++ b/packages/docs/components/SideNav/SideNav.tsx @@ -1,117 +1,122 @@ -import { Badge } from '@bigcommerce/big-design'; -import Link from 'next/link'; +import React from 'react'; -import { StyledFlex, StyledLogo } from './styled'; +import { StyledFlex } from './styled'; import { SideNavGroup } from './SideNavGroup'; import { SideNavLink } from './SideNavLink'; +import { SideNavLogo } from './SideNavLogo'; +import { SideNavMenu } from './SideNavMenu'; export const SideNav: React.FC = () => { return ( - - - - BigDesign Logo - - + + - - - Getting Started - - + + + + Getting Started + + - - - Colors - - - Icons - - - Spacing - - - Typography - - + + + Colors + + + Icons + + + Spacing + + + Typography + + - - - Modal - - - Panel - - - Tabs - - + + + Modal + + + Panel + + + Tabs + + - - - Button - - - Checkbox - - - Dropdown - - - Form - - - Input - - - Link - - - Radio - - - Select - - - Textarea - - + + + Button + + + Checkbox + + + Dropdown + + + Form + + + Input + + + Link + + + Radio + + + Select + + + Textarea + + - - - Badge - - - Progress Bar - - - Progress Circle - - - Tooltip - - + + + Badge + + + Progress Bar + + + Progress Circle + + + Tooltip + + - - - Box - - - Breakpoints - - - Flex - - - Grid - - - Margin - - - Padding - - + + + Box + + + Breakpoints + + + Flex + + + Grid + + + Margin + + + Padding + + + ); }; diff --git a/packages/docs/components/SideNav/SideNavGroup/SideNavGroup.tsx b/packages/docs/components/SideNav/SideNavGroup/SideNavGroup.tsx index 507b66000..ff5a41291 100644 --- a/packages/docs/components/SideNav/SideNavGroup/SideNavGroup.tsx +++ b/packages/docs/components/SideNav/SideNavGroup/SideNavGroup.tsx @@ -11,7 +11,7 @@ const StyledList = styled(List)` export const SideNavGroup: React.FC<{ title: string }> = props => { return ( - +

{props.title}

{props.children} diff --git a/packages/docs/components/SideNav/SideNavLink/SideNavLink.tsx b/packages/docs/components/SideNav/SideNavLink/SideNavLink.tsx index 8723e4ef3..900cc02e6 100644 --- a/packages/docs/components/SideNav/SideNavLink/SideNavLink.tsx +++ b/packages/docs/components/SideNav/SideNavLink/SideNavLink.tsx @@ -4,8 +4,13 @@ import styled from 'styled-components'; import { List, NextLink } from '../../'; const StyledLink = styled(Link)` - display: 'inline-block'; - line-height: ${({ theme }) => theme.lineHeight.medium}; + display: block; + line-height: ${({ theme }) => theme.lineHeight.large}; + + ${({ theme }) => theme.breakpoints.tablet} { + display: inline-block; + line-height: ${({ theme }) => theme.lineHeight.medium}; + } `; export const SideNavLink: React.FC<{ href: string; as?: string }> = props => ( diff --git a/packages/docs/components/SideNav/SideNavLogo/SideNavLogo.tsx b/packages/docs/components/SideNav/SideNavLogo/SideNavLogo.tsx new file mode 100644 index 000000000..440f40a8c --- /dev/null +++ b/packages/docs/components/SideNav/SideNavLogo/SideNavLogo.tsx @@ -0,0 +1,15 @@ +import { Flex } from '@bigcommerce/big-design'; +import Link from 'next/link'; +import React from 'react'; + +import { StyledLogo } from './styled'; + +export const SideNavLogo: React.FC = () => ( + + + + BigDesign Logo + + + +); diff --git a/packages/docs/components/SideNav/SideNavLogo/index.tsx b/packages/docs/components/SideNav/SideNavLogo/index.tsx new file mode 100644 index 000000000..22c1d7e7a --- /dev/null +++ b/packages/docs/components/SideNav/SideNavLogo/index.tsx @@ -0,0 +1 @@ +export * from './SideNavLogo'; diff --git a/packages/docs/components/SideNav/SideNavLogo/styled.tsx b/packages/docs/components/SideNav/SideNavLogo/styled.tsx new file mode 100644 index 000000000..914fffa63 --- /dev/null +++ b/packages/docs/components/SideNav/SideNavLogo/styled.tsx @@ -0,0 +1,10 @@ +import styled from 'styled-components'; + +export const StyledLogo = styled.div` + cursor: pointer; + + img { + margin: 0 auto; + max-width: 100%; + } +`; diff --git a/packages/docs/components/SideNav/SideNavMenu/SideNavMenu.tsx b/packages/docs/components/SideNav/SideNavMenu/SideNavMenu.tsx new file mode 100644 index 000000000..48eacc1bc --- /dev/null +++ b/packages/docs/components/SideNav/SideNavMenu/SideNavMenu.tsx @@ -0,0 +1,25 @@ +import { Button, Flex } from '@bigcommerce/big-design'; +import { MenuIcon } from '@bigcommerce/big-design-icons'; +import { default as Router } from 'next/router'; +import React from 'react'; + +import { StyledMenu, StyledNavigation } from './styled'; + +export const SideNavMenu: React.FC = props => { + const [isExpanded, setIsExpanded] = React.useState(false); + const handleClick = () => setIsExpanded(!isExpanded); + Router.events.on('routeChangeComplete', () => setIsExpanded(false)); + + return ( + + + +