roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-05-07 09:12:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(design-system): redesign tab-view around quick nav (#194)

Browse source 
* feat(design-system): redesign tab-view around quick nav

* fix tests
This commit is contained in:
41666 2021-03-23 00:00:34 -04:00 • committed by GitHub
parent a5f819bc3e
commit 57d83699d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 272 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

31
packages/design-system/atoms/quick-nav/QuickNav.stories.tsx Normal file
View file

@ -0,0 +1,31 @@
import { useState } from 'react';
import { BreakpointsProvider } from '../breakpoints/BreakpointProvider';
import { QuickNav, QuickNavCollapsed, QuickNavExpanded, QuickNavProps } from './QuickNav';
export default {
title: 'Atoms/Quick Nav',
component: QuickNav,
decorators: [(story) => <BreakpointsProvider>{story()}</BreakpointsProvider>],
args: {
navItems: ['AAAA', 'BBBB', 'CCCC'],
currentNavItem: 'AAAA',
},
};
const stateWrapper = (args: QuickNavProps, Component: typeof QuickNav) => {
const [currentNavItem, setCurrentNavItem] = useState(args.currentNavItem);
return (
<Component
{...args}
currentNavItem={currentNavItem}
onNavChange={(newNavItem) => {
setCurrentNavItem(newNavItem);
args.onNavChange(newNavItem);
}}
></Component>
);
};
export const quickNav = (args) => stateWrapper(args, QuickNav);
export const expanded = (args) => stateWrapper(args, QuickNavExpanded);
export const collapsed = (args) => stateWrapper(args, QuickNavCollapsed);