Skip to content

Commit 4e76645

Browse files
Andrew-K-Lamagorovyi
Andrew-K-Lam
authored and
agorovyi
committed
feat(community-side-navigation): change to styled components
1 parent 484b734 commit 4e76645

File tree

4 files changed

+150
-67
lines changed

4 files changed

+150
-67
lines changed

‎packages/SideNavigation/SideNavigation.jsx‎

Lines changed: 74 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,65 @@
11
import React, { Component } from 'react'
22
import PropTypes from 'prop-types'
3+
import styled from 'styled-components'
34

45
import safeRest from '@tds/shared-safe-rest'
6+
import { colorGainsboro } from '@tds/core-colours'
7+
58
import joinClassNames from '../../shared/utils/joinClassNames'
69

710
import Link from './Link/Link'
811
import SubMenu from './SubMenu/SubMenu'
912

1013
import styles from './SideNavigation.scss'
1114

15+
const DivContainer = styled.div({
16+
position: 'relative',
17+
height: '100%',
18+
})
19+
20+
const NavContainer = styled.nav(props => ({
21+
position: props.theme.position,
22+
maxWidth: props.theme.maxWidth,
23+
top: props.theme.top,
24+
width: props.theme.width,
25+
overflowY: props.theme.overflowY,
26+
bottom: props.theme.bottom,
27+
}))
28+
29+
const StyledUl = styled.ul({
30+
listStyle: 'none',
31+
display: 'flex',
32+
flexDirection: 'column',
33+
justifyContent: 'space-around',
34+
margin: '0',
35+
borderTop: `1px solid ${colorGainsboro}`,
36+
})
37+
38+
const StyledLi = styled.li({
39+
borderBottom: `1px solid ${colorGainsboro}`,
40+
alignItems: 'center',
41+
fontSize: '0',
42+
})
43+
44+
const topPosition = {
45+
position: 'relative',
46+
maxWidth: 'inherit',
47+
width: '50%',
48+
overflowY: 'auto',
49+
}
50+
51+
const fixedPosition = {
52+
position: 'fixed',
53+
maxWidth: 'inherit',
54+
top: '0px',
55+
width: 'inherit',
56+
}
57+
58+
const bottomPosition = {
59+
position: 'absolute',
60+
bottom: '0px',
61+
}
62+
1263
/**
1364
* The SideNavigation component is used in conjuntion with a large amount of educational / informational content,
1465
* allowing the user to navigate between options frequently and efficiently.
@@ -121,33 +172,41 @@ class SideNavigation extends Component {
121172
const { children, verticalSpacing, accordion, ...rest } = this.props
122173
const { variant } = this.state
123174

124-
let classes = joinClassNames(
125-
verticalSpacing ? styles[`verticalPadding-${verticalSpacing}`] : undefined,
126-
styles.topPosition
127-
)
175+
// let classes = joinClassNames(
176+
// verticalSpacing ? styles[`verticalPadding-${verticalSpacing}`] : undefined,
177+
// styles.topPosition
178+
// )
179+
// if (variant === 'bottom') {
180+
// classes = styles.bottomPosition
181+
// } else if (variant === 'fixed') {
182+
// classes = styles.fixedPosition
183+
// } else if (variant === 'fixedOverflow') {
184+
// classes = joinClassNames(styles.fixedPosition, styles.fixedOverflow)
185+
// }
186+
187+
let classes = topPosition // Need verticalSpacing
128188
if (variant === 'bottom') {
129-
classes = styles.bottomPosition
189+
classes = bottomPosition
130190
} else if (variant === 'fixed') {
131-
classes = styles.fixedPosition
191+
classes = fixedPosition
132192
} else if (variant === 'fixedOverflow') {
133193
classes = joinClassNames(styles.fixedPosition, styles.fixedOverflow)
134194
}
135195

136196
return (
137-
<div
197+
<DivContainer
138198
{...safeRest(rest)}
139199
ref={c => {
140200
this._sideNavContainer = c
141201
}}
142-
className={styles.container}
143202
>
144-
<nav
203+
<NavContainer
145204
ref={c => {
146205
this._sideNav = c
147206
}}
148-
className={classes}
207+
theme={classes}
149208
>
150-
<ul className={styles.spaced}>
209+
<StyledUl>
151210
{React.Children.map(children, (child, index) => {
152211
let options = {}
153212
const id = `TDS-SideNavigation-${index}`
@@ -160,11 +219,11 @@ class SideNavigation extends Component {
160219
id,
161220
}
162221
}
163-
return <li className={styles.navLi}>{React.cloneElement(child, options)}</li>
222+
return <StyledLi>{React.cloneElement(child, options)}</StyledLi>
164223
})}
165-
</ul>
166-
</nav>
167-
</div>
224+
</StyledUl>
225+
</NavContainer>
226+
</DivContainer>
168227
)
169228
}
170229
}

‎packages/SideNavigation/SideNavigation.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,19 @@
1414
<SideNavigation.Link href="#">Top of the page</SideNavigation.Link>
1515
<SideNavigation.SubMenu label="Overview" active>
1616
<SideNavigation.Link href="#introduction">Introduction</SideNavigation.Link>
17+
<SideNavigation.Link href="#introduction">Introduction</SideNavigation.Link>
18+
<SideNavigation.Link href="#introduction">Introduction</SideNavigation.Link>
19+
<SideNavigation.Link href="#introduction">Introduction</SideNavigation.Link>
20+
<SideNavigation.Link href="#introduction">Introduction</SideNavigation.Link>
21+
<SideNavigation.Link href="#introduction">Introduction</SideNavigation.Link>
22+
<SideNavigation.Link href="#introduction">Introduction</SideNavigation.Link>
23+
<SideNavigation.Link href="#introduction">Introduction</SideNavigation.Link>
24+
<SideNavigation.Link href="#introduction">Introduction</SideNavigation.Link>
25+
<SideNavigation.Link href="#introduction">Introduction</SideNavigation.Link>
26+
<SideNavigation.Link href="#introduction">Introduction</SideNavigation.Link>
27+
<SideNavigation.Link href="#introduction">Introduction</SideNavigation.Link>
28+
<SideNavigation.Link href="#introduction">Introduction</SideNavigation.Link>
29+
<SideNavigation.Link href="#introduction">Introduction</SideNavigation.Link>
1730
</SideNavigation.SubMenu>
1831
<SideNavigation.SubMenu label="Reference Architecture">
1932
<SideNavigation.Link href="#reference">Overview</SideNavigation.Link>
@@ -33,6 +46,66 @@
3346
software specifications, standards and architecture evolution.
3447
</Text>
3548
</Box>
49+
<Box id="introduction" vertical={3}>
50+
<Heading level="h2">Overview</Heading>
51+
<Text>This is an introduction to the Side Navigation component</Text>
52+
</Box>
53+
<Box id="reference" vertical={3}>
54+
<Heading level="h2">Reference Architecture</Heading>
55+
<Text>
56+
Our software and technical standards are communicated through our reference architecture.
57+
The Reference Architecture serves as a source of truth for all the technical knowledge,
58+
software specifications, standards and architecture evolution.
59+
</Text>
60+
</Box>
61+
<Box id="introduction" vertical={3}>
62+
<Heading level="h2">Overview</Heading>
63+
<Text>This is an introduction to the Side Navigation component</Text>
64+
</Box>
65+
<Box id="reference" vertical={3}>
66+
<Heading level="h2">Reference Architecture</Heading>
67+
<Text>
68+
Our software and technical standards are communicated through our reference architecture.
69+
The Reference Architecture serves as a source of truth for all the technical knowledge,
70+
software specifications, standards and architecture evolution.
71+
</Text>
72+
</Box>
73+
<Box id="introduction" vertical={3}>
74+
<Heading level="h2">Overview</Heading>
75+
<Text>This is an introduction to the Side Navigation component</Text>
76+
</Box>
77+
<Box id="reference" vertical={3}>
78+
<Heading level="h2">Reference Architecture</Heading>
79+
<Text>
80+
Our software and technical standards are communicated through our reference architecture.
81+
The Reference Architecture serves as a source of truth for all the technical knowledge,
82+
software specifications, standards and architecture evolution.
83+
</Text>
84+
</Box>
85+
<Box id="introduction" vertical={3}>
86+
<Heading level="h2">Overview</Heading>
87+
<Text>This is an introduction to the Side Navigation component</Text>
88+
</Box>
89+
<Box id="reference" vertical={3}>
90+
<Heading level="h2">Reference Architecture</Heading>
91+
<Text>
92+
Our software and technical standards are communicated through our reference architecture.
93+
The Reference Architecture serves as a source of truth for all the technical knowledge,
94+
software specifications, standards and architecture evolution.
95+
</Text>
96+
</Box>
97+
<Box id="introduction" vertical={3}>
98+
<Heading level="h2">Overview</Heading>
99+
<Text>This is an introduction to the Side Navigation component</Text>
100+
</Box>
101+
<Box id="reference" vertical={3}>
102+
<Heading level="h2">Reference Architecture</Heading>
103+
<Text>
104+
Our software and technical standards are communicated through our reference architecture.
105+
The Reference Architecture serves as a source of truth for all the technical knowledge,
106+
software specifications, standards and architecture evolution.
107+
</Text>
108+
</Box>
36109
</FlexGrid.Col>
37110
</FlexGrid.Row>
38111
</FlexGrid>

‎packages/SideNavigation/SideNavigation.scss‎

Lines changed: 0 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -40,58 +40,7 @@ $desktop: (
4040
@include spacingClasses($level, $value, map-get($desktop, $level));
4141
}
4242

43-
.container {
44-
position: relative;
45-
height: 100%;
46-
}
47-
48-
.spaced {
49-
list-style: none;
50-
display: flex;
51-
flex-direction: column;
52-
justify-content: space-around;
53-
margin: 0;
54-
border-top: 1px solid $color-gainsboro;
55-
}
56-
57-
.navLi {
58-
border-bottom: 1px solid $color-gainsboro;
59-
align-items: center;
60-
font-size: 0;
61-
}
62-
63-
.active {
64-
border-left: 4px solid $color-telus-purple;
65-
}
66-
67-
.topPosition {
68-
position: relative;
69-
max-width: inherit;
70-
width: 100%;
71-
overflow-y: auto;
72-
}
73-
74-
.fixedPosition {
75-
position: fixed;
76-
max-width: inherit;
77-
top: 0px;
78-
width: inherit;
79-
}
80-
8143
.fixedOverflow {
8244
overflow-y: auto;
8345
bottom: 0px;
8446
}
85-
86-
.bottomPosition {
87-
position: absolute;
88-
bottom: 0px;
89-
}
90-
91-
.removeBottomPadding {
92-
padding-bottom: 0px;
93-
}
94-
95-
.removeTopPadding {
96-
padding-top: 0px;
97-
}

‎packages/SideNavigation/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,12 @@
2222
"homepage": "http://tds.telus.com",
2323
"peerDependencies": {
2424
"react": ">=15",
25-
"react-dom": ">=15"
25+
"react-dom": ">=15",
26+
"styled-components": "^4.1.3"
2627
},
2728
"dependencies": {
2829
"@tds/core-box": "^1.0.1",
30+
"@tds/core-colours": "^1.1.1",
2931
"@tds/core-decorative-icon": "^1.2.0",
3032
"@tds/core-text": "^1.1.0",
3133
"@tds/shared-animation": "1.1.0",

0 commit comments

Comments
 (0)