Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit a52adba

Browse files
authoredNov 2, 2022
Update the documentation to use 'GlobalStyles' along with 'ThemeProvider' (#850)
1 parent 8ee3b52 commit a52adba

File tree

64 files changed

+246
-126
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+246
-126
lines changed
 

‎src/components/ui/Navbar/Navbar.mdx

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import Flex from '../Flex';
99
import { lightTheme } from '../../../theme/';
1010
import { GlobalStyles } from '../../../theme/GlobalStyles';
1111

12-
1312
# Navbar
1413

1514
The Navbar component displays a vertical menu with navigation icon buttons and labels. Navbar is constructed using the NavbarHeader and NavbarItem components.
@@ -22,31 +21,28 @@ The Navbar component displays a vertical menu with navigation icon buttons and l
2221
import {
2322
Navbar,
2423
NavbarHeader,
25-
NavbarItem
24+
NavbarItem,
2625
} from 'amazon-chime-sdk-component-library-react';
2726
```
2827

2928
## Example
3029

3130
### Navbar Component
31+
3232
<ThemeProvider theme={lightTheme}>
33-
<GlobalStyles/>
33+
<GlobalStyles />
3434
<Preview>
3535
<Navbar flexDirection="column" container css="height: 50vh">
36-
<NavbarHeader onClose={() => {}}/>
36+
<NavbarHeader onClose={() => {}} />
3737
<Flex>
3838
<NavbarItem
3939
icon={<Information />}
4040
onClick={() => {}}
4141
label="Bridge Information"
4242
/>
43-
<NavbarItem
44-
icon={<Attendees />}
45-
onClick={() => {}}
46-
label="Attendees"
47-
/>
43+
<NavbarItem icon={<Attendees />} onClick={() => {}} label="Attendees" />
4844
</Flex>
49-
<Flex marginTop='auto'>
45+
<Flex marginTop="auto">
5046
<NavbarItem
5147
icon={<LeaveMeeting />}
5248
onClick={() => {}}
@@ -59,21 +55,17 @@ import {
5955
</ThemeProvider>
6056

6157
```jsx
62-
<Navbar flexDirection="column" container height='10%'>
63-
<NavbarHeader onClose={() => {}}/>
58+
<Navbar flexDirection="column" container height="10%">
59+
<NavbarHeader onClose={() => {}} />
6460
<Flex>
6561
<NavbarItem
6662
icon={<Information />}
6763
onClick={() => {}}
6864
label="Bridge Information"
6965
/>
70-
<NavbarItem
71-
icon={<Attendees />}
72-
onClick={() => {}}
73-
label="Attendees"
74-
/>
66+
<NavbarItem icon={<Attendees />} onClick={() => {}} label="Attendees" />
7567
</Flex>
76-
<Flex marginTop='auto'>
68+
<Flex marginTop="auto">
7769
<NavbarItem
7870
icon={<LeaveMeeting />}
7971
onClick={() => {}}
@@ -86,6 +78,7 @@ import {
8678
## Props
8779

8880
### Navbar Props
81+
8982
<Props of={Navbar} />
9083

9184
# NavbarHeader
@@ -97,10 +90,11 @@ It gives a title to Navbar and also a close icon button to close the Navbar in m
9790
# Example
9891

9992
```javascript
100-
<NavbarHeader title="Menu" onClose={() => {}}/>
93+
<NavbarHeader title="Menu" onClose={() => {}} />
10194
```
10295

10396
### NavbarHeader Props
97+
10498
<Props of={NavbarHeader} />
10599

106100
# NavbarItem
@@ -114,6 +108,7 @@ The label is displayed only on smaller screens with width defined by `theme.medi
114108
### NavbarItem component
115109

116110
<ThemeProvider theme={lightTheme}>
111+
<GlobalStyles />
117112
<NavbarItem
118113
icon={<Information />}
119114
onClick={() => {}}
@@ -130,4 +125,5 @@ The label is displayed only on smaller screens with width defined by `theme.medi
130125
```
131126

132127
### NavbarItem Props
128+
133129
<Props of={NavbarItem} />

‎src/components/ui/Portal/Portal.stories.mdx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import Flex from '../Flex';
99

1010
# Portal
1111

12-
The Portal component is used to render children into any DOM node that exists outside the DOM hierarchy of the portal's container.
12+
The Portal component is used to render children into any DOM node that exists outside the DOM hierarchy of the portal's container.
1313

1414
## Importing
1515

@@ -21,11 +21,13 @@ import { Portal } from 'amazon-chime-sdk-component-library-react';
2121

2222
```jsx
2323
<Flex layout="fill-space-centered">
24-
<div id='root-div'>Root Div</div>
25-
<Portal rootId='root-div'><div>Portal content</div></Portal>
24+
<div id="root-div">Root Div</div>
25+
<Portal rootId="root-div">
26+
<div>Portal content</div>
27+
</Portal>
2628
</Flex>
2729
```
2830

2931
## Props
3032

31-
<Props of={Portal} />
33+
<Props of={Portal} />
There was a problem loading the remainder of the diff.

0 commit comments

Comments
 (0)
Please sign in to comment.