Skip to content

Commit 3559b83

Browse files
kristian-committedkristian-committed
committed
feat: updated documentation
1 parent 02ad033 commit 3559b83

File tree

2 files changed

+74
-70
lines changed

2 files changed

+74
-70
lines changed

‎src/components/NavigationMenu/NavigationMenu.stories.tsx

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Meta, Story } from '@storybook/react'
22
import React from 'react'
3-
import { styled } from '../../stitches.config'
43
import {
54
NavigationMenu,
65
NavigationMenuContent,
@@ -10,6 +9,7 @@ import {
109
NavigationMenuList,
1110
NavigationMenuTrigger,
1211
NavigationMenuViewport,
12+
NavigationViewportPosition,
1313
NavigationMenuContentList,
1414
NavigationMenuContentListItem
1515
} from '.'
@@ -31,54 +31,37 @@ export default {
3131
}
3232
} as Meta
3333

34-
const ViewportPosition = styled('div', {
35-
position: 'absolute',
36-
display: 'flex',
37-
justifyContent: 'center',
38-
width: '100%',
39-
top: '100%',
40-
left: 0
41-
})
42-
4334
const Template: Story = args => (
4435
<NavigationMenu>
4536
<NavigationMenuList>
4637
<NavigationMenuItem>
4738
<NavigationMenuTrigger caret={true}>
48-
<Text>Learn</Text>
39+
<Text>Components</Text>
4940
</NavigationMenuTrigger>
5041
<NavigationMenuContent>
51-
<NavigationMenuContentList layout="column">
42+
<NavigationMenuContentList layout="row">
5243
<NavigationMenuContentListItem
53-
href="https://stitches.dev/"
54-
title="Stitches"
44+
href="https://components.committed.software"
45+
title="Storybook"
5546
>
56-
<Text>CSS-in-JS with best-in-class developer experience.</Text>
57-
</NavigationMenuContentListItem>
58-
<NavigationMenuContentListItem href="/colors" title="Colors">
59-
<Text>Beautiful, thought-out palettes with auto dark mode.</Text>
47+
<Text>
48+
A live storybook version of the current committed components.
49+
</Text>
6050
</NavigationMenuContentListItem>
6151
<NavigationMenuContentListItem
62-
href="https://icons.modulz.app/"
63-
title="Icons"
52+
href="/design-system-colour--page"
53+
title="Colors"
6454
>
65-
<Text>A crisp set of 15x15 icons, balanced and consistent.</Text>
66-
</NavigationMenuContentListItem>
67-
{/* <NavigationMenuContentListItem
68-
href="https://stitches.dev/"
69-
title="Stitches"
70-
>
71-
<Text>CSS-in-JS with best-in-class developer experience.</Text>
72-
</NavigationMenuContentListItem>
73-
<NavigationMenuContentListItem href="/colors" title="Colors">
7455
<Text>Beautiful, thought-out palettes with auto dark mode.</Text>
7556
</NavigationMenuContentListItem>
7657
<NavigationMenuContentListItem
77-
href="https://icons.modulz.app/"
58+
href="/components-icons--icon-grid"
7859
title="Icons"
7960
>
80-
<Text>A crisp set of 15x15 icons, balanced and consistent.</Text>
81-
</NavigationMenuContentListItem> */}
61+
<Text>
62+
A collection of available icons based on material designs.
63+
</Text>
64+
</NavigationMenuContentListItem>
8265
</NavigationMenuContentList>
8366
</NavigationMenuContent>
8467
</NavigationMenuItem>
@@ -88,19 +71,38 @@ const Template: Story = args => (
8871
<Text>Github</Text>
8972
</NavigationMenuLink>
9073
</NavigationMenuItem>
91-
<NavigationMenuItem>
92-
<NavigationMenuLink href="https://components.committed.software">
93-
<Text>Storybook</Text>
94-
</NavigationMenuLink>
95-
</NavigationMenuItem>
9674

9775
<NavigationMenuIndicator />
9876
</NavigationMenuList>
9977

100-
<ViewportPosition>
78+
<NavigationViewportPosition>
10179
<NavigationMenuViewport />
102-
</ViewportPosition>
80+
</NavigationViewportPosition>
10381
</NavigationMenu>
10482
)
10583

10684
export const Default = Template.bind({})
85+
86+
export const SimpleLinks = () => {
87+
return (
88+
<NavigationMenu>
89+
<NavigationMenuList>
90+
<NavigationMenuItem>
91+
<NavigationMenuLink href="https://github.com/commitd/components">
92+
<Text>Github</Text>
93+
</NavigationMenuLink>
94+
</NavigationMenuItem>
95+
<NavigationMenuItem>
96+
<NavigationMenuLink href="https://components.committed.software">
97+
<Text>Storybook</Text>
98+
</NavigationMenuLink>
99+
</NavigationMenuItem>
100+
<NavigationMenuIndicator />
101+
</NavigationMenuList>
102+
103+
<NavigationViewportPosition>
104+
<NavigationMenuViewport />
105+
</NavigationViewportPosition>
106+
</NavigationMenu>
107+
)
108+
}

‎src/components/NavigationMenu/NavigationMenu.tsx

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -65,27 +65,18 @@ const StyledList = styled(List, {
6565
all: 'unset',
6666
display: 'flex',
6767
justifyContent: 'center',
68-
// backgroundColor: 'white',
6968
padding: 4,
70-
// borderRadius: 6,
7169
listStyle: 'none',
72-
// boxShadow: `0 2px 10px $colors$brandGrey12`
73-
74-
$$main: '$colors$primary',
75-
$$mainHover: '$colors$primaryHighlight',
76-
$$contrast: '$colors$primaryContrast',
77-
$$default: '$colors$default',
78-
$$defaultHover: '$colors$defaultHighlight',
7970

8071
fontSize: '$0',
81-
borderRadius: '$default',
72+
borderRadius: '$3',
8273
backgroundColor: '$paper',
8374
border: 'none',
8475
width: 'fit-content; width: -moz-fit-content'
8576
})
8677

8778
const itemStyles = {
88-
padding: '8px 12px',
79+
padding: '$2 $3',
8980
outline: 'none',
9081
userSelect: 'none',
9182
borderRadius: 4,
@@ -146,7 +137,7 @@ const StyledLink = styled(Link, {
146137
})
147138

148139
const StyledContent = styled(Content, paperStyles, {
149-
borderRadius: '$default',
140+
borderRadius: '$3',
150141
padding: '$4',
151142

152143
display: 'flex',
@@ -162,7 +153,7 @@ const StyledContent = styled(Content, paperStyles, {
162153
top: 0,
163154
left: 0,
164155
width: '100%',
165-
'@media only screen and (min-width: 600px)': { width: 'auto' },
156+
'@default': { width: 'auto' },
166157
'@media (prefers-reduced-motion: no-preference)': {
167158
animationDuration: '250ms',
168159
animationTimingFunction: 'ease',
@@ -213,15 +204,11 @@ const StyledViewport = styled(Viewport, {
213204
marginTop: '$2',
214205
width: '100%',
215206
backgroundColor: '$paper',
216-
borderRadius: '$3',
207+
borderRadius: 6,
217208
overflow: 'hidden',
218-
boxShadow:
219-
'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
209+
boxShadow: '$2',
220210
height: 'var(--radix-navigation-menu-viewport-height)',
221211

222-
'@media only screen and (min-width: 600px)': {
223-
width: 'var(--radix-navigation-menu-viewport-width)'
224-
},
225212
'@media (prefers-reduced-motion: no-preference)': {
226213
transition: 'width, height, 300ms ease',
227214
'&[data-state="open"]': { animation: `${scaleIn} 200ms ease` },
@@ -231,23 +218,21 @@ const StyledViewport = styled(Viewport, {
231218

232219
const ContentList = styled('ul', {
233220
display: 'grid',
234-
padding: '$2',
235221
margin: '$0',
236-
columnGap: '$3',
222+
columnGap: '$2',
237223
rowGap: '$2',
238224
listStyle: 'none',
239225

240226
variants: {
241227
layout: {
242-
one: {
243-
'@media only screen and (min-width: 600px)': {
244-
width: '100%',
245-
gridTemplateColumns: '.75fr 1fr'
228+
row: {
229+
'@default': {
230+
gridAutoFlow: 'row',
231+
gridTemplateRows: 'repeat(3, 1fr)'
246232
}
247233
},
248234
column: {
249-
'@media only screen and (min-width: 600px)': {
250-
width: '100%',
235+
'@default': {
251236
gridAutoFlow: 'column',
252237
gridTemplateRows: 'repeat(3, 1fr)'
253238
}
@@ -273,12 +258,20 @@ const LinkText = styled('p', {
273258
fontWeight: '$regular'
274259
})
275260

261+
const ViewportPosition = styled('div', {
262+
position: 'absolute',
263+
display: 'flex',
264+
justifyContent: 'center',
265+
width: '100%',
266+
top: '100%',
267+
left: 0
268+
})
269+
276270
type ContentListItemProps = ComponentProps<typeof StyledLink> & {
277271
title: string
278272
}
279273

280274
const ContentListItem = forwardRef<
281-
// ElementRef<typeof ListItem>,
282275
ElementRef<typeof StyledLink>,
283276
ContentListItemProps
284277
>(({ children, title, ...props }, forwardedRef) => (
@@ -287,8 +280,7 @@ const ContentListItem = forwardRef<
287280
{...props}
288281
ref={forwardedRef}
289282
css={{
290-
padding: '$3',
291-
borderRadius: '$3',
283+
borderRadius: 3,
292284
'&:hover': { backgroundColor: '$colors$primary7' }
293285
}}
294286
>
@@ -302,12 +294,22 @@ const ContentListItem = forwardRef<
302294

303295
const StyledItem = styled(Item, {})
304296

305-
// Exports
297+
/**
298+
* NavigationMenu component
299+
*
300+
* Displays a collection of links for navigation websites or apps.
301+
*
302+
* Navigation Menu Items can either be in the form of simply links (by using a NavigationMenuLink) or
303+
* take the form of a extended menu, similar to a Popover, controlled by a NavigationMenuTrigger.
304+
*
305+
* Based on [Radix Dropdown Menu](https://radix-ui.com/primitives/docs/components/navigation-menu).
306+
*/
306307
export const NavigationMenu = StyledMenu
307308
export const NavigationMenuList = StyledList
308309
export const NavigationMenuItem = StyledItem
309310
export const NavigationMenuLink = StyledLink
310311
export const NavigationMenuContent = StyledContent
312+
export const NavigationViewportPosition = ViewportPosition
311313
export const NavigationMenuViewport = StyledViewport
312314
export const NavigationMenuIndicator = StyledIndicatorWithArrow
313315
export const NavigationMenuContentList = ContentList

0 commit comments

Comments
 (0)