From fdad635072e10535810ced568672e15ba73b217a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Herrera=20Guzm=C3=A1n?= Date: Tue, 9 Jul 2019 18:45:35 +0200 Subject: [PATCH 1/2] fix: incorrect logos styles - Remove unnecessary quotes in Emotion css templated string - Revert md prop removed in #47 (with the size set before that) --- src/components/Header/Header.tsx | 2 +- .../Header/__snapshots__/Header.test.tsx.snap | 4 ++-- src/components/Loading/Loading.tsx | 2 +- .../Loading/__snapshots__/Loading.test.tsx.snap | 2 +- src/components/Login/Login.tsx | 2 +- .../Login/__snapshots__/Login.test.tsx.snap | 4 ++-- src/components/Logo/Logo.tsx | 16 ++++++++++------ 7 files changed, 18 insertions(+), 14 deletions(-) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 7c8d5b88e4..b0c2ff7f32 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -144,7 +144,7 @@ class Header extends Component { {this.renderLogo()} diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap index 91511b72ec..547a7a4bae 100644 --- a/src/components/Header/__snapshots__/Header.test.tsx.snap +++ b/src/components/Header/__snapshots__/Header.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`
component with logged in state should load the component in logged in state 1`] = `"
"`; +exports[`
component with logged in state should load the component in logged in state 1`] = `"
"`; -exports[`
component with logged out state should load the component in logged out state 1`] = `"
"`; +exports[`
component with logged out state should load the component in logged out state 1`] = `"
"`; diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx index 17d23c1dd6..b7877a3421 100644 --- a/src/components/Loading/Loading.tsx +++ b/src/components/Loading/Loading.tsx @@ -8,7 +8,7 @@ import { Wrapper, Badge } from './styles'; const Loading: React.FC = () => ( - + diff --git a/src/components/Loading/__snapshots__/Loading.test.tsx.snap b/src/components/Loading/__snapshots__/Loading.test.tsx.snap index 680cd3a606..5d29230a94 100644 --- a/src/components/Loading/__snapshots__/Loading.test.tsx.snap +++ b/src/components/Loading/__snapshots__/Loading.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"
"`; +exports[` component should render the component in default state 1`] = `"
"`; diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx index 0c3f8f454f..66b4dc880e 100644 --- a/src/components/Login/Login.tsx +++ b/src/components/Login/Login.tsx @@ -195,7 +195,7 @@ export default class LoginModal extends Component, Logi return ( should load the component in default state 1`] = `"

Login

"`; +exports[` should load the component in default state 1`] = `"

Login

"`; -exports[` should load the component with props 1`] = `"

Login

Error Title
Error Description
"`; +exports[` should load the component with props 1`] = `"

Login

Error Title
Error Description
"`; diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx index 75c52aee81..8a03b051d6 100644 --- a/src/components/Logo/Logo.tsx +++ b/src/components/Logo/Logo.tsx @@ -3,7 +3,11 @@ import React from 'react'; import styled from 'react-emotion'; import logo from './img/logo.svg'; -const StyledLogo = styled('div')` +interface Props { + md?: boolean; +} + +const StyledLogo = styled('div')` && { display: inline-block; vertical-align: middle; @@ -12,11 +16,11 @@ const StyledLogo = styled('div')` background-size: contain; background-image: url(${logo}); background-repeat: no-repeat; - width: 40px; - height: 40px;`; - -const Logo: React.FC = () => { - return ; + width: ${({ md }) => (md ? '90px' : '40px')}; + height: ${({ md }) => (md ? '90px' : '40px')}; +`; +const Logo: React.FC = ({ md = false }) => { + return ; }; export default Logo; From 0d00ab4490acbbe0203a59d888c06388a3a46d97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Herrera=20Guzm=C3=A1n?= Date: Wed, 10 Jul 2019 11:25:12 +0200 Subject: [PATCH 2/2] refactor: use an enum with Logo size --- src/components/Loading/Loading.tsx | 4 ++-- .../Login/__snapshots__/Login.test.tsx.snap | 2 +- src/components/Logo/Logo.tsx | 15 ++++++++++----- src/components/Logo/index.ts | 2 +- 4 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx index b7877a3421..8e32a4c28b 100644 --- a/src/components/Loading/Loading.tsx +++ b/src/components/Loading/Loading.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Logo from '../Logo'; +import Logo, { Size } from '../Logo'; import Spinner from '../Spinner'; import { Wrapper, Badge } from './styles'; @@ -8,7 +8,7 @@ import { Wrapper, Badge } from './styles'; const Loading: React.FC = () => ( - + diff --git a/src/components/Login/__snapshots__/Login.test.tsx.snap b/src/components/Login/__snapshots__/Login.test.tsx.snap index ac78a9008a..584c2ee719 100644 --- a/src/components/Login/__snapshots__/Login.test.tsx.snap +++ b/src/components/Login/__snapshots__/Login.test.tsx.snap @@ -2,4 +2,4 @@ exports[` should load the component in default state 1`] = `"

Login

"`; -exports[` should load the component with props 1`] = `"

Login

Error Title
Error Description
"`; +exports[` should load the component with props 1`] = `"

Login

Error Title
Error Description
"`; diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx index 8a03b051d6..b8abe82729 100644 --- a/src/components/Logo/Logo.tsx +++ b/src/components/Logo/Logo.tsx @@ -3,8 +3,13 @@ import React from 'react'; import styled from 'react-emotion'; import logo from './img/logo.svg'; +export enum Size { + Small = '40px', + Big = '90px', +} + interface Props { - md?: boolean; + size?: Size; } const StyledLogo = styled('div')` @@ -16,11 +21,11 @@ const StyledLogo = styled('div')` background-size: contain; background-image: url(${logo}); background-repeat: no-repeat; - width: ${({ md }) => (md ? '90px' : '40px')}; - height: ${({ md }) => (md ? '90px' : '40px')}; + width: ${({ size }) => size}; + height: ${({ size }) => size}; `; -const Logo: React.FC = ({ md = false }) => { - return ; +const Logo: React.FC = ({ size = Size.Small }) => { + return ; }; export default Logo; diff --git a/src/components/Logo/index.ts b/src/components/Logo/index.ts index a5be7785e1..de10cb2b1d 100644 --- a/src/components/Logo/index.ts +++ b/src/components/Logo/index.ts @@ -1 +1 @@ -export { default } from './Logo'; +export { default, Size } from './Logo';