@atom-learning/components 2.11.0-canary.0.2 → 2.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/components/image/Image.d.ts +1 -3
- package/dist/components/image/Image.js +1 -1
- package/dist/components/navigation/NavigationMenu.d.ts +2 -1
- package/dist/components/navigation/NavigationMenu.js +1 -1
- package/dist/components/navigation/NavigationMenuItem.d.ts +539 -0
- package/dist/components/navigation/NavigationMenuItem.js +1 -1
- package/dist/docgen.json +1 -1
- package/dist/docs/NavigationMenu.mdx +25 -15
- package/dist/index.cjs.js +1 -1
- package/package.json +1 -1
|
@@ -87,22 +87,10 @@ In the below example the styling of `NavigationMenu.DropdownContent` has been ch
|
|
|
87
87
|
>
|
|
88
88
|
{['colours', 'icons', 'effects', 'typography'].map((item) => (
|
|
89
89
|
<NavigationMenu.DropdownItem href={`/theme/${item}`}>
|
|
90
|
-
<
|
|
91
|
-
css={{
|
|
92
|
-
mb: '0.75rem',
|
|
93
|
-
textTransform: 'capitalize'
|
|
94
|
-
}}
|
|
95
|
-
>
|
|
90
|
+
<NavigationMenu.DropdownItemTitle>
|
|
96
91
|
{item}
|
|
97
|
-
</
|
|
98
|
-
<Text
|
|
99
|
-
css={{
|
|
100
|
-
color: 'inherit',
|
|
101
|
-
lineHeight: 1.5,
|
|
102
|
-
fontWeight: 400,
|
|
103
|
-
fontSize: 14
|
|
104
|
-
}}
|
|
105
|
-
>
|
|
92
|
+
</NavigationMenu.DropdownItemTitle
|
|
93
|
+
<Text>
|
|
106
94
|
This is some example text about {item}
|
|
107
95
|
</Text>
|
|
108
96
|
</NavigationMenu.DropdownItem>
|
|
@@ -111,3 +99,25 @@ In the below example the styling of `NavigationMenu.DropdownContent` has been ch
|
|
|
111
99
|
</NavigationMenu.Dropdown>
|
|
112
100
|
</NavigationMenu>
|
|
113
101
|
```
|
|
102
|
+
|
|
103
|
+
## DropdownItem composition example
|
|
104
|
+
|
|
105
|
+
DropdownItem gives a lot of flexibility. It's an easy to compose it for own purposes.
|
|
106
|
+
|
|
107
|
+
```
|
|
108
|
+
<NavigationMenu.DropdownItem href="/" active>
|
|
109
|
+
<Grid
|
|
110
|
+
css={{
|
|
111
|
+
gridTemplateColumns: '1fr 7fr'
|
|
112
|
+
}}
|
|
113
|
+
>
|
|
114
|
+
<Icon is={Feed} size={'md'} />
|
|
115
|
+
<Flex css={{ flexDirection: 'column' }}>
|
|
116
|
+
<NavigationMenu.DropdownItemTitle bold css={{ mb: '$3' }}>
|
|
117
|
+
Example title
|
|
118
|
+
</NavigationMenu.DropdownItemTitle>
|
|
119
|
+
<Text>This is example subtitle</Text>
|
|
120
|
+
</Flex>
|
|
121
|
+
</Grid>
|
|
122
|
+
</NavigationMenu.DropdownItem>
|
|
123
|
+
```
|