refactor: removes typography component - fixes #149

itofarina · itofarina · commit d0672b30e319 · 2020-10-01T12:05:26.000-03:00
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/index.modern.js b/dist/index.modern.js
diff --git a/dist/index.modern.js.map b/dist/index.modern.js.map
diff --git a/example/src/pages/LandingPage.jsx b/example/src/pages/LandingPage.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Typography, HeaderTongue, nameServiceImg, storageImg } from '@rsksmart/rif-ui';
+import { HeaderTongue, nameServiceImg, storageImg } from '@rsksmart/rif-ui';
+import Typography from '@material-ui/core/Typography'
 import { Grid, makeStyles } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
diff --git a/src/components/atoms/Typography.tsx b/src/components/atoms/Typography.tsx
diff --git a/src/components/atoms/atoms.test.tsx b/src/components/atoms/atoms.test.tsx
@@ -1,5 +1,5 @@
 import {
-  Button, Checkbox, LoginOption, Logo, LogoNavbar, Typography,
+  Button, Checkbox, LoginOption, Logo, LogoNavbar,
 } from '.'
 
 describe('Button component sanity', () => {
@@ -31,9 +31,3 @@ describe('LogoNavbar component sanity', () => {
     expect(LogoNavbar).toBeTruthy()
   })
 })
-
-describe('Typography component sanity', () => {
-  it('is truthy', () => {
-    expect(Typography).toBeTruthy()
-  })
-})
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
@@ -5,7 +5,6 @@ import Logo from './Logo'
 import LogoNavbar from './LogoNavbar'
 import StyledNavTab from './StyledNavTab'
 import NetworkIndicator from './NetworkIndicator'
-import Typography from './Typography'
 
 export * from './modal'
 
@@ -17,5 +16,4 @@ export {
   LogoNavbar,
   StyledNavTab,
   NetworkIndicator,
-  Typography,
 }
diff --git a/src/components/atoms/modal/ModalTitle.tsx b/src/components/atoms/modal/ModalTitle.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import Typography from '../Typography'
+import Typography from '@material-ui/core/Typography'
 
 export interface ModalTitleProps {
   className?: string
diff --git a/src/components/molecules/Accordion.tsx b/src/components/molecules/Accordion.tsx
@@ -1,10 +1,10 @@
 import React, { FC, useState } from 'react'
 import { Accordion as MUIAccordion, AccordionProps as MUIAccordionProps } from '@material-ui/core'
+import Typography from '@material-ui/core/Typography'
 import AccordionDetails from '@material-ui/core/AccordionDetails'
 import AccordionSummary from '@material-ui/core/AccordionSummary'
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-import { Typography } from '../atoms'
 import { colors } from '../../theme'
 
 interface AccordionProps extends MUIAccordionProps {
diff --git a/src/components/molecules/CopyTextTooltip.tsx b/src/components/molecules/CopyTextTooltip.tsx
@@ -1,7 +1,8 @@
 import React, { FC, useState } from 'react'
 import Tooltip from '@material-ui/core/Tooltip'
-import { Typography, makeStyles } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
 import FileCopyIcon from '@material-ui/icons/FileCopy'
+import Typography from '@material-ui/core/Typography'
 
 export interface CopyTextTooltipProps {
   displayElement: React.ReactElement
diff --git a/src/components/molecules/FAQSection.tsx b/src/components/molecules/FAQSection.tsx
@@ -1,9 +1,11 @@
 import React, { FC, useState } from 'react'
 import { makeStyles, Theme } from '@material-ui/core/styles'
-import { Accordion, AccordionDetails, AccordionSummary } from '@material-ui/core'
+import Accordion from '@material-ui/core/Accordion'
+import AccordionDetails from '@material-ui/core/AccordionDetails'
+import AccordionSummary from '@material-ui/core/AccordionSummary'
+import Typography from '@material-ui/core/Typography'
 import AddIcon from '@material-ui/icons/Add'
 import RemoveIcon from '@material-ui/icons/Remove'
-import { Typography } from '../atoms'
 import { colors, fonts } from '../../theme'
 
 export interface FAQSectionProps {
diff --git a/src/components/molecules/FooterColumn.tsx b/src/components/molecules/FooterColumn.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { NavLinkProps, NavLink } from 'react-router-dom'
 import { makeStyles } from '@material-ui/core/styles'
-import { Typography } from '../atoms'
+import Typography from '@material-ui/core/Typography'
 import { colors, fonts } from '../../theme'
 import { removeEmptySpaces } from '../../utils'
 
diff --git a/src/components/molecules/RangeSliderWithInputs.tsx b/src/components/molecules/RangeSliderWithInputs.tsx
@@ -2,8 +2,9 @@ import Slider, { SliderProps } from '@material-ui/core/Slider'
 import { makeStyles } from '@material-ui/core/styles'
 import React, { FC } from 'react'
 import UnitsInput from './UnitsInput'
-import { Typography } from '../atoms'
+import Typography from '@material-ui/core/Typography'
 import { validatedNumber } from '../../utils'
+import { fonts } from '../../theme'
 
 export interface RangeSliderWithInputsProps extends SliderProps {
   values: {
@@ -30,6 +31,7 @@ const useStyles = makeStyles(() => ({
     display: 'flex',
     justifyContent: 'center',
     width: '100%',
+    fontWeight: fonts.weight.regular
   },
 }))
 
@@ -101,7 +103,7 @@ const RangeSliderWithInputs: FC<RangeSliderWithInputsProps> = ({
           {...getCommonInputValues()}
           value={startValue}
         />
-        <Typography className={classes.toContainer} weight="bold">
+        <Typography className={classes.toContainer}>
           to
         </Typography>
         <UnitsInput
diff --git a/src/components/molecules/UnitsInput.tsx b/src/components/molecules/UnitsInput.tsx
@@ -1,9 +1,8 @@
 import React, { FC } from 'react'
 import { makeStyles, Theme } from '@material-ui/core/styles'
-import { Grid, Input, InputProps } from '@material-ui/core'
-import {
-  Typography,
-} from '../atoms'
+import Input, { InputProps } from '@material-ui/core/Input'
+import Grid from '@material-ui/core/Grid'
+import Typography from '@material-ui/core/Typography'
 import { colors, fonts } from '../../theme'
 
 export interface UnitsInputProps extends InputProps {
diff --git a/src/components/organisms/Account.tsx b/src/components/organisms/Account.tsx
@@ -2,9 +2,10 @@ import React, { FC, useState, useEffect } from 'react'
 import Web3 from 'web3'
 import { makeStyles, Theme } from '@material-ui/core/styles'
 import Popover from '@material-ui/core/Popover'
+import Typography from '@material-ui/core/Typography'
 import ProviderInfo, { EProvider } from '../../models/ProviderInfo'
 import { shortenString } from '../../utils'
-import { Button, NetworkIndicator, Typography } from '../atoms'
+import { Button, NetworkIndicator } from '../atoms'
 import { colors, fonts } from '../../theme'
 import { AccountModal, WrongNetworkModal } from '../molecules'
 import ConnectionStatus from '../../models/Enums'
diff --git a/src/components/organisms/Footer.tsx b/src/components/organisms/Footer.tsx
@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes } from 'react'
 import { Grid } from '@material-ui/core'
 import { makeStyles, Theme } from '@material-ui/core/styles'
-import { Typography } from '../atoms'
+import Typography from '@material-ui/core/Typography'
 import FooterColumn, { FooterColumnProps } from '../molecules/FooterColumn'
 import { colors, fonts } from '../../theme'
 import { logoBlackAndBlue } from '../../assets/images'
diff --git a/src/components/organisms/Header/HeaderDesktop.tsx b/src/components/organisms/Header/HeaderDesktop.tsx
@@ -2,7 +2,8 @@ import React, { FC } from 'react'
 import { AppBar, Toolbar } from '@material-ui/core'
 import { makeStyles, Theme } from '@material-ui/core/styles'
 import { NavLink } from 'react-router-dom'
-import { LogoNavbar, Typography } from '../../atoms'
+import { LogoNavbar } from '../../atoms'
+import Typography from '@material-ui/core/Typography'
 import { colors, fonts, globalConstants } from '../../../theme'
 import { HeaderProps, HeaderItemProps } from './HeaderProps'
 import { removeEmptySpaces } from '../../../utils'
diff --git a/src/components/organisms/Header/HeaderTongue.tsx b/src/components/organisms/Header/HeaderTongue.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { makeStyles, Theme } from '@material-ui/core/styles'
-import { Typography } from '../../atoms'
-import { colors } from '../../../theme'
+import Typography from '@material-ui/core/Typography'
+import { colors, fonts } from '../../../theme'
 import { headerTongueImg } from '../../../assets/images'
 
 export interface HeaderTongueProps {
@@ -36,6 +36,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   titleContent: {
     marginBottom: theme.spacing(1),
     fontSize: theme.spacing(5),
+    fontWeight: fonts.weight.regular
   },
   tongueImg: {
     width: '100%',
@@ -54,7 +55,6 @@ const HeaderTongue: FC<HeaderTongueProps> = (
           <Typography
             className={classes.titleContent}
             variant="h3"
-            weight="lightBold"
           >
             {titleLine1}
             <br />
diff --git a/src/components/templates/FAQPageTemplate.tsx b/src/components/templates/FAQPageTemplate.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react'
 import { makeStyles, Theme } from '@material-ui/core/styles'
 import FAQSection, { FAQSectionProps } from '../molecules/FAQSection'
 import { colors } from '../../theme'
-import { Typography } from '../atoms'
+import Typography from '@material-ui/core/Typography'
 import { removeEmptySpaces } from '../../utils'
 
 export interface FAQPageTemplateProps {
