Skip to content

Commit d4418f5

Browse files
joyenjoyerjoyenjoyer
committed
WIP(ui-top-nav-bar): some refactoring
1 parent f1bb2f3 commit d4418f5

File tree

10 files changed

+468
-15
lines changed

10 files changed

+468
-15
lines changed

‎packages/__docs__/src/App/index.tsx‎

Lines changed: 108 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* eslint-disable react/jsx-no-undef */
21
/*
32
* The MIT License (MIT)
43
*
@@ -29,20 +28,21 @@ import {
2928
createContext,
3029
LegacyRef,
3130
ReactElement,
32-
SyntheticEvent,
33-
useEffect,
34-
useState
31+
SyntheticEvent
3532
} from 'react'
3633

3734
import { Alert } from '@instructure/ui-alerts'
3835
import { Breadcrumb } from '@instructure/ui-breadcrumb'
39-
import { Checkbox } from '@instructure/ui-checkbox'
4036
import { InstUISettingsProvider, withStyle, jsx } from '@instructure/emotion'
4137
import { Flex } from '@instructure/ui-flex'
4238
import { Text } from '@instructure/ui-text'
4339
import { View } from '@instructure/ui-view'
4440
import { AccessibleContent } from '@instructure/ui-a11y-content'
45-
import { MobileTopNav, DesktopTopNav } from '@instructure/ui-top-nav-bar'
41+
import {
42+
MobileTopNav,
43+
DesktopTopNav,
44+
TopNav
45+
} from '@instructure/ui-top-nav-bar'
4646
import { IconButton } from '@instructure/ui-buttons'
4747
import { Tray } from '@instructure/ui-tray'
4848
import { Link } from '@instructure/ui-link'
@@ -96,7 +96,7 @@ export const AppContext = createContext<AppContextType>({
9696
library: undefined
9797
})
9898

99-
const WrapperComponent = (props) => {
99+
/*const WrapperComponent = (props) => {
100100
const [isSmallScreen, setIsSmallScreen] = useState(false)
101101
const [isLightMode, setIsLightMode] = useState(false)
102102
@@ -345,7 +345,7 @@ const WrapperComponent = (props) => {
345345
}, [])
346346
347347
return <>{isSmallScreen ? <SmallScreen /> : <BigScreen />}</>
348-
}
348+
}*/
349349

350350
@withStyle(generateStyle, generateComponentTheme)
351351
class App extends Component<AppProps, AppState> {
@@ -395,7 +395,6 @@ class App extends Component<AppProps, AppState> {
395395
docData.componentInstance = everyComp[components[0]][components[1]]
396396
} else {
397397
docData.componentInstance =
398-
// eslint-disable-next-line import-x/namespace
399398
EveryComponent[docId as keyof typeof EveryComponent]
400399
}
401400
return docData
@@ -426,7 +425,6 @@ class App extends Component<AppProps, AppState> {
426425
* @returns {Set<string>} the properties
427426
*/
428427
getAllPropNames(object: Record<string, any>) {
429-
// eslint-disable-next-line @typescript-eslint/ban-types
430428
let obj: object | null = object
431429
const props: Set<string> = new Set()
432430
// exclude some common static props for performance
@@ -983,6 +981,27 @@ class App extends Component<AppProps, AppState> {
983981
const key = this.state.key
984982
const { showMenu, layout, docsData, iconsData } = this.state
985983

984+
const isLightMode = false
985+
986+
const brandSvg = (
987+
<IconButton
988+
screenReaderLabel="Canvas Brand"
989+
href="#"
990+
withBackground={false}
991+
withBorder={false}
992+
>
993+
<svg
994+
viewBox="0 0 1920 1920"
995+
xmlns="http://www.w3.org/2000/svg"
996+
fill="#fff"
997+
width="28px"
998+
height="28px"
999+
>
1000+
<path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z" />
1001+
</svg>
1002+
</IconButton>
1003+
)
1004+
9861005
if (!docsData || !iconsData) {
9871006
return <LoadingScreen />
9881007
}
@@ -1003,7 +1022,85 @@ class App extends Component<AppProps, AppState> {
10031022
boxSizing: 'border-box'
10041023
}}
10051024
>
1006-
<WrapperComponent />
1025+
<TopNav>
1026+
<DesktopTopNav>
1027+
<DesktopTopNav.BreadCrumb>
1028+
<Breadcrumb label="You are here:">
1029+
<Breadcrumb.Link>Student Forecast</Breadcrumb.Link>
1030+
<Breadcrumb.Link>University of Utah</Breadcrumb.Link>
1031+
<Breadcrumb.Link>University of Colleges</Breadcrumb.Link>
1032+
</Breadcrumb>
1033+
</DesktopTopNav.BreadCrumb>
1034+
</DesktopTopNav>
1035+
<MobileTopNav brand={brandSvg} lightMode={isLightMode}>
1036+
<MobileTopNav.BtnRow>
1037+
<IconButton
1038+
withBackground={false}
1039+
withBorder={false}
1040+
screenReaderLabel="burgir"
1041+
color={isLightMode ? 'secondary' : 'primary-inverse'}
1042+
>
1043+
<IconAnalyticsLine />
1044+
</IconButton>
1045+
<IconButton
1046+
withBackground={false}
1047+
withBorder={false}
1048+
screenReaderLabel="burgir"
1049+
color={isLightMode ? 'secondary' : 'primary-inverse'}
1050+
>
1051+
<IconAlertsLine />
1052+
</IconButton>
1053+
</MobileTopNav.BtnRow>
1054+
<MobileTopNav.BreadCrumb>
1055+
<Link
1056+
href="#"
1057+
isWithinText={false}
1058+
color={isLightMode ? 'link' : 'link-inverse'}
1059+
>
1060+
<div
1061+
style={{
1062+
display: 'flex',
1063+
alignItems: 'center',
1064+
gap: '8px'
1065+
}}
1066+
>
1067+
<IconArrowOpenStartLine />
1068+
Back
1069+
</div>
1070+
</Link>
1071+
</MobileTopNav.BreadCrumb>
1072+
<MobileTopNav.Title>Courses</MobileTopNav.Title>
1073+
<MobileTopNav.ItemList>
1074+
<MobileTopNav.Item
1075+
leftIcon={<IconUserLine />}
1076+
rightIcon={<IconArrowOpenDownLine />}
1077+
onClick={() => alert('Account clicked')}
1078+
>
1079+
Account
1080+
</MobileTopNav.Item>
1081+
<MobileTopNav.Item
1082+
leftIcon={<IconAdminLine />}
1083+
rightIcon={<IconArrowOpenDownLine />}
1084+
onClick={() => alert('Admin clicked')}
1085+
>
1086+
Admin
1087+
</MobileTopNav.Item>
1088+
<MobileTopNav.Item
1089+
leftIcon={<IconDashboardLine />}
1090+
rightIcon={<IconArrowOpenDownLine />}
1091+
onClick={() => alert('Dashboard')}
1092+
>
1093+
Dashboard
1094+
</MobileTopNav.Item>
1095+
<MobileTopNav.Item
1096+
rightIcon={<IconArrowOpenDownLine />}
1097+
onClick={() => alert('Simple option with no left icon')}
1098+
>
1099+
Simple option with no left icon
1100+
</MobileTopNav.Item>
1101+
</MobileTopNav.ItemList>
1102+
</MobileTopNav>
1103+
</TopNav>
10071104
</div>
10081105
</AppContext.Provider>
10091106
)

‎packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,5 +103,7 @@ const SC: any = withStyles(generateStyles)(DesktopTopNav)
103103
SC.BreadCrumb = BreadCrumb
104104
// TODO investigate whether displayName should be added to the original component
105105

106+
SC.displayName = 'DesktopTopNav'
107+
106108
export { SC as DesktopTopNav }
107109
export default SC

‎packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const generateStyles = (props: DesktopTopNavProps, theme: any) => {
6868
},
6969
btnRow: {
7070
display: 'flex',
71-
gap: '12px'
71+
marginRight: '12px'
7272
}
7373
}
7474
}

‎packages/ui-top-nav-bar/src/MobileTopNav/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,7 @@ SC.ItemList = withStyles(generateItemListStyles)(ItemList)
177177
SC.ItemList.displayName = 'ItemList'
178178
SC.Item = withStyles(generateItemStyles)(Item) //withStyles(generateItemStyles)(Item)
179179
SC.Item.displayName = 'Item'
180+
SC.displayName = 'MobileTopNav'
180181

181182
export { SC as MobileTopNav }
182183
export default SC

‎packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,18 @@ import type { MobileTopNavProps } from './props'
2727
const generateStyles = (props: MobileTopNavProps, theme: any) => {
2828
const { lightMode } = props
2929
return {
30-
container: (open: boolean) => {
30+
container: (_open: boolean) => {
3131
return {
3232
height: '54px',
33-
position: open ? 'fixed' : 'relative',
33+
// position: open ? 'fixed' : 'relative',
3434
backgroundColor: lightMode
3535
? theme.colors.ui.surfacePageSecondary
3636
: theme.colors.ui.surfaceDark,
3737
color: lightMode
3838
? theme.colors.contrasts.grey125125
3939
: theme.colors?.contrasts?.white1010,
4040
width: '100%',
41-
zIndex: '1000'
41+
zIndex: '9999'
4242
}
4343
},
4444
topBar: {

‎packages/ui-top-nav-bar/src/TopNav/README.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
describes: MobileTopNav
3+
---
4+
5+
POC mobile top nav
6+
7+
```js
8+
---
9+
type: example
10+
---
11+
const Example = () => {
12+
const lightMode = false
13+
const brandSvg = (
14+
<IconButton screenReaderLabel="Canvas Brand" href="#">
15+
<svg viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" fill="#fff">
16+
<path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z"/>
17+
</svg>
18+
</IconButton>
19+
)
20+
return (
21+
<div>
22+
<p>
23+
1
24+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
25+
</p>
26+
<p>
27+
2
28+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
29+
</p>
30+
<p>
31+
3
32+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
33+
</p>
34+
<p>
35+
4
36+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
37+
</p>
38+
<p>
39+
5
40+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
41+
</p>
42+
<p>
43+
6
44+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
45+
</p>
46+
<p>
47+
7
48+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
49+
</p>
50+
<p>
51+
8
52+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
53+
</p>
54+
<p>
55+
9
56+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
57+
</p>
58+
<p>
59+
10
60+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
61+
</p>
62+
<p>
63+
11
64+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
65+
</p>
66+
<p>
67+
12
68+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
69+
</p>
70+
<p>
71+
13
72+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
73+
</p>
74+
<p>
75+
14
76+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
77+
</p>
78+
<p>
79+
15
80+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
81+
</p>
82+
<p>
83+
16
84+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
85+
</p>
86+
<p>
87+
17
88+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
89+
</p>
90+
<p>
91+
18
92+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
93+
</p>
94+
<p>
95+
19
96+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
97+
</p>
98+
<p>
99+
20
100+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
101+
</p>
102+
</div>
103+
)
104+
}
105+
106+
render(<Example />)
107+
```

0 commit comments

Comments
 (0)