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] 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 b7877a3..8e32a4c 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 ac78a90..584c2ee 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 8a03b05..b8abe82 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 a5be778..de10cb2 100644 --- a/src/components/Logo/index.ts +++ b/src/components/Logo/index.ts @@ -1 +1 @@ -export { default } from './Logo'; +export { default, Size } from './Logo';