Skip to content
This repository has been archived by the owner on Mar 7, 2023. It is now read-only.

Commit

Permalink
fix(menu): fix invisible wrapper (#250)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lyncee59
Lyncee59 authored Feb 21, 2019
1 parent 9b5dcdb commit 53bf85d
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 29 deletions.
2 changes: 1 addition & 1 deletion src/Organisms/Navbar/Navbar.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Navbar from './Navbar'

describe('Navbar', () => {
it('should render correctly', () => {
const tree = mountWithTheme(<Navbar />)
const tree = mountWithTheme(<Navbar>Navbar</Navbar>)

expect(tree.find(Navbar)).toMatchSnapshot()
})
Expand Down
10 changes: 6 additions & 4 deletions src/Organisms/Navbar/NavbarMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,15 @@ export type PropsType = {
}

const Wrapper = styled.div`
display: ${(props) => (props.toggled ? 'block' : 'none')};
position: absolute;
top: 4.5rem;
left: 0;
width: 100%;
height: calc(${prop<PropsType>('maxHeight')} - 4.5rem);
@media (min-width: ${screenSize('sm')}) {
display: block;
position: relative;
top: 0;
width: calc(100% - 12rem);
Expand All @@ -28,7 +30,7 @@ const Wrapper = styled.div`

const Container = styled.div`
position: relative;
display: ${(props) => (props.toggled ? 'flex' : 'none')};
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
Expand Down Expand Up @@ -57,9 +59,9 @@ const Container = styled.div`
}
`

const NavbarMenu = ({ children, maxHeight, toggled, ...rest }: PropsType) => (
<Wrapper maxHeight={maxHeight} {...rest}>
<Container toggled={toggled}>{children}</Container>
const NavbarMenu = ({ children, ...rest }: PropsType) => (
<Wrapper {...rest}>
<Container>{children}</Container>
</Wrapper>
)

Expand Down
4 changes: 3 additions & 1 deletion src/Organisms/Navbar/__snapshots__/Navbar.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,9 @@ exports[`Navbar should render correctly 1`] = `
>
<div
className="c0"
/>
>
Navbar
</div>
</StyledComponent>
</styled.div>
</Navbar>
Expand Down
61 changes: 38 additions & 23 deletions src/Organisms/Navbar/__snapshots__/NavbarMenu.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

exports[`NavbarMenu should render correctly 1`] = `
.c0 {
display: none;
position: absolute;
top: 4.5rem;
left: 0;
Expand All @@ -11,7 +12,10 @@ exports[`NavbarMenu should render correctly 1`] = `
.c1 {
position: relative;
display: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
Expand Down Expand Up @@ -40,6 +44,7 @@ exports[`NavbarMenu should render correctly 1`] = `
@media (min-width:48rem) {
.c0 {
display: block;
position: relative;
top: 0;
width: calc(100% - 12rem);
Expand Down Expand Up @@ -80,6 +85,7 @@ exports[`NavbarMenu should render correctly 1`] = `
>
<styled.div
maxHeight="80vh"
toggled={false}
>
<StyledComponent
forwardedComponent={
Expand All @@ -92,6 +98,9 @@ exports[`NavbarMenu should render correctly 1`] = `
"lastClassName": "c0",
"rules": Array [
"
display: ",
[Function],
";
position: absolute;
top: 4.5rem;
left: 0;
Expand All @@ -103,6 +112,7 @@ exports[`NavbarMenu should render correctly 1`] = `
@media (min-width: ",
[Function],
") {
display: block;
position: relative;
top: 0;
width: calc(100% - 12rem);
Expand All @@ -123,13 +133,12 @@ exports[`NavbarMenu should render correctly 1`] = `
}
forwardedRef={null}
maxHeight="80vh"
toggled={false}
>
<div
className="c0"
>
<styled.div
toggled={false}
>
<styled.div>
<StyledComponent
forwardedComponent={
Object {
Expand All @@ -142,9 +151,7 @@ exports[`NavbarMenu should render correctly 1`] = `
"rules": Array [
"
position: relative;
display: ",
[Function],
";
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
Expand Down Expand Up @@ -191,7 +198,6 @@ exports[`NavbarMenu should render correctly 1`] = `
}
}
forwardedRef={null}
toggled={false}
>
<div
className="c1"
Expand All @@ -206,6 +212,7 @@ exports[`NavbarMenu should render correctly 1`] = `
exports[`NavbarMenu should render correctly with maxHeight 1`] = `
.c0 {
display: none;
position: absolute;
top: 4.5rem;
left: 0;
Expand All @@ -215,7 +222,10 @@ exports[`NavbarMenu should render correctly with maxHeight 1`] = `
.c1 {
position: relative;
display: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
Expand Down Expand Up @@ -244,6 +254,7 @@ exports[`NavbarMenu should render correctly with maxHeight 1`] = `
@media (min-width:48rem) {
.c0 {
display: block;
position: relative;
top: 0;
width: calc(100% - 12rem);
Expand Down Expand Up @@ -284,6 +295,7 @@ exports[`NavbarMenu should render correctly with maxHeight 1`] = `
>
<styled.div
maxHeight="60vh"
toggled={false}
>
<StyledComponent
forwardedComponent={
Expand All @@ -296,6 +308,9 @@ exports[`NavbarMenu should render correctly with maxHeight 1`] = `
"lastClassName": "c0",
"rules": Array [
"
display: ",
[Function],
";
position: absolute;
top: 4.5rem;
left: 0;
Expand All @@ -307,6 +322,7 @@ exports[`NavbarMenu should render correctly with maxHeight 1`] = `
@media (min-width: ",
[Function],
") {
display: block;
position: relative;
top: 0;
width: calc(100% - 12rem);
Expand All @@ -327,13 +343,12 @@ exports[`NavbarMenu should render correctly with maxHeight 1`] = `
}
forwardedRef={null}
maxHeight="60vh"
toggled={false}
>
<div
className="c0"
>
<styled.div
toggled={false}
>
<styled.div>
<StyledComponent
forwardedComponent={
Object {
Expand All @@ -346,9 +361,7 @@ exports[`NavbarMenu should render correctly with maxHeight 1`] = `
"rules": Array [
"
position: relative;
display: ",
[Function],
";
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
Expand Down Expand Up @@ -395,7 +408,6 @@ exports[`NavbarMenu should render correctly with maxHeight 1`] = `
}
}
forwardedRef={null}
toggled={false}
>
<div
className="c1"
Expand All @@ -410,6 +422,7 @@ exports[`NavbarMenu should render correctly with maxHeight 1`] = `
exports[`NavbarMenu should render correctly with toggled 1`] = `
.c0 {
display: block;
position: absolute;
top: 4.5rem;
left: 0;
Expand Down Expand Up @@ -451,6 +464,7 @@ exports[`NavbarMenu should render correctly with toggled 1`] = `
@media (min-width:48rem) {
.c0 {
display: block;
position: relative;
top: 0;
width: calc(100% - 12rem);
Expand Down Expand Up @@ -491,6 +505,7 @@ exports[`NavbarMenu should render correctly with toggled 1`] = `
>
<styled.div
maxHeight="80vh"
toggled={true}
>
<StyledComponent
forwardedComponent={
Expand All @@ -503,6 +518,9 @@ exports[`NavbarMenu should render correctly with toggled 1`] = `
"lastClassName": "c0",
"rules": Array [
"
display: ",
[Function],
";
position: absolute;
top: 4.5rem;
left: 0;
Expand All @@ -514,6 +532,7 @@ exports[`NavbarMenu should render correctly with toggled 1`] = `
@media (min-width: ",
[Function],
") {
display: block;
position: relative;
top: 0;
width: calc(100% - 12rem);
Expand All @@ -534,13 +553,12 @@ exports[`NavbarMenu should render correctly with toggled 1`] = `
}
forwardedRef={null}
maxHeight="80vh"
toggled={true}
>
<div
className="c0"
>
<styled.div
toggled={true}
>
<styled.div>
<StyledComponent
forwardedComponent={
Object {
Expand All @@ -553,9 +571,7 @@ exports[`NavbarMenu should render correctly with toggled 1`] = `
"rules": Array [
"
position: relative;
display: ",
[Function],
";
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
Expand Down Expand Up @@ -602,7 +618,6 @@ exports[`NavbarMenu should render correctly with toggled 1`] = `
}
}
forwardedRef={null}
toggled={true}
>
<div
className="c1"
Expand Down

0 comments on commit 53bf85d

Please sign in to comment.