diff --git a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap index 95729a8..773b53e 100644 --- a/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap +++ b/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap @@ -2,6 +2,6 @@ exports[` component should render the component in default state 1`] = `""`; -exports[` component when there is a button to download a tarball 1`] = `""`; +exports[` component when there is a button to download a tarball 1`] = `"
"`; -exports[` component when there is a button to open an issue 1`] = `"
"`; +exports[` component when there is a button to open an issue 1`] = `"
"`; diff --git a/src/components/ActionBar/styles.ts b/src/components/ActionBar/styles.ts index 6efd19f..a1691b2 100644 --- a/src/components/ActionBar/styles.ts +++ b/src/components/ActionBar/styles.ts @@ -1,8 +1,8 @@ import styled from 'react-emotion'; -import { default as MuiFab } from '@material-ui/core/Fab'; import colors from '../../utils/styles/colors'; import ListItem from '../../muiComponents/ListItem'; +import FloatingActionButton from '../../muiComponents/FloatingActionButton'; export const ActionListItem = styled(ListItem)({ paddingTop: 0, @@ -10,10 +10,8 @@ export const ActionListItem = styled(ListItem)({ paddingRight: 0, }); -export const Fab = styled(MuiFab)({ - '&&': { - backgroundColor: colors.primary, - color: colors.white, - marginRight: '10px', - }, +export const Fab = styled(FloatingActionButton)({ + backgroundColor: colors.primary, + color: colors.white, + marginRight: '10px', }); diff --git a/src/components/Author/__snapshots__/Author.test.tsx.snap b/src/components/Author/__snapshots__/Author.test.tsx.snap index 1b5fd66..c9c4e05 100644 --- a/src/components/Author/__snapshots__/Author.test.tsx.snap +++ b/src/components/Author/__snapshots__/Author.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"
    Author
    \\"verdaccio
    verdaccio user
"`; +exports[` component should render the component in default state 1`] = `"
    Author
    \\"verdaccio
    verdaccio user
"`; -exports[` component should render the component when there is no author email 1`] = `"
    Author
    \\"verdaccio
    verdaccio user
"`; +exports[` component should render the component when there is no author email 1`] = `"
    Author
    \\"verdaccio
    verdaccio user
"`; diff --git a/src/components/Author/styles.ts b/src/components/Author/styles.ts index 6341375..d713489 100644 --- a/src/components/Author/styles.ts +++ b/src/components/Author/styles.ts @@ -1,9 +1,9 @@ import styled from 'react-emotion'; -import ListItemText from '@material-ui/core/ListItemText'; import { fontWeight } from '../../utils/styles/sizes'; import ListItem from '../../muiComponents/ListItem'; import Text from '../../muiComponents/Text'; +import ListItemText from '../../muiComponents/ListItemText'; export const StyledText = styled(Text)({ fontWeight: fontWeight.bold, @@ -11,17 +11,13 @@ export const StyledText = styled(Text)({ }); export const AuthorListItem = styled(ListItem)({ - '&&': { - padding: 0, - }, - '&&:hover': { + padding: 0, + ':hover': { backgroundColor: 'transparent', }, }); export const AuthorListItemText = styled(ListItemText)({ - '&&': { - padding: '0 10px', - margin: 0, - }, + padding: '0 10px', + margin: 0, }); diff --git a/src/components/AutoComplete/AutoComplete.tsx b/src/components/AutoComplete/AutoComplete.tsx index e06d958..7c78a79 100644 --- a/src/components/AutoComplete/AutoComplete.tsx +++ b/src/components/AutoComplete/AutoComplete.tsx @@ -3,9 +3,9 @@ import { css } from 'emotion'; import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest'; import match from 'autosuggest-highlight/match'; import parse from 'autosuggest-highlight/parse'; -import MenuItem from '@material-ui/core/MenuItem'; import { fontWeight } from '../../utils/styles/sizes'; +import MenuItem from '../../muiComponents/MenuItem'; import { Wrapper, InputField, SuggestionContainer } from './styles'; diff --git a/src/components/AutoComplete/styles.tsx b/src/components/AutoComplete/styles.tsx index a46dc47..21e4504 100644 --- a/src/components/AutoComplete/styles.tsx +++ b/src/components/AutoComplete/styles.tsx @@ -1,8 +1,8 @@ import React from 'react'; import styled, { css } from 'react-emotion'; -import Paper from '@material-ui/core/Paper'; import TextField from '../../muiComponents/TextField'; +import Paper from '../../muiComponents/Paper'; export interface InputFieldProps { color: string; diff --git a/src/components/Dependencies/Dependencies.tsx b/src/components/Dependencies/Dependencies.tsx index 5dd2ca4..7e3481b 100644 --- a/src/components/Dependencies/Dependencies.tsx +++ b/src/components/Dependencies/Dependencies.tsx @@ -1,7 +1,7 @@ import React, { useContext } from 'react'; import { useHistory } from 'react-router-dom'; -import CardContent from '@material-ui/core/CardContent'; +import CardContent from '../../muiComponents/CardContent'; import { PackageDependencies } from '../../../types/packageMeta'; import { DetailContext } from '../../pages/Version'; import NoItems from '../NoItems'; diff --git a/src/components/Dependencies/styles.ts b/src/components/Dependencies/styles.ts index edf371e..7db712c 100644 --- a/src/components/Dependencies/styles.ts +++ b/src/components/Dependencies/styles.ts @@ -1,14 +1,12 @@ import styled from 'react-emotion'; -import Chip from '@material-ui/core/Chip'; import { fontWeight } from '../../utils/styles/sizes'; import Text from '../../muiComponents/Text'; import Card from '../../muiComponents/Card'; +import Chip from '../../muiComponents/Chip'; export const CardWrap = styled(Card)({ - '&&': { - margin: '0 0 16px', - }, + margin: '0 0 16px', }); export const StyledText = styled(Text)({ @@ -17,16 +15,12 @@ export const StyledText = styled(Text)({ }); export const Tags = styled('div')({ - '&&': { - display: 'flex', - justifyContent: 'start', - flexWrap: 'wrap', - margin: '0 -5px', - }, + display: 'flex', + justifyContent: 'start', + flexWrap: 'wrap', + margin: '0 -5px', }); export const Tag = styled(Chip)({ - '&&': { - margin: '5px', - }, + margin: '5px', }); diff --git a/src/components/DetailContainer/DetailContainer.tsx b/src/components/DetailContainer/DetailContainer.tsx index 89ea18f..fe586e0 100644 --- a/src/components/DetailContainer/DetailContainer.tsx +++ b/src/components/DetailContainer/DetailContainer.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useState, ChangeEvent, useContext } from 'react'; -import Box from '@material-ui/core/Box'; import { DetailContext } from '../../pages/Version'; +import Box from '../../muiComponents/Box'; import DetailContainerTabs from './DetailContainerTabs'; import DetailContainerContent from './DetailContainerContent'; diff --git a/src/components/DetailContainer/DetailContainerTabs.tsx b/src/components/DetailContainer/DetailContainerTabs.tsx index 3354b48..23b19fc 100644 --- a/src/components/DetailContainer/DetailContainerTabs.tsx +++ b/src/components/DetailContainer/DetailContainerTabs.tsx @@ -1,8 +1,9 @@ import React, { ChangeEvent, useState, useEffect } from 'react'; -import { default as MuiTabs } from '@material-ui/core/Tabs'; -import Tab from '@material-ui/core/Tab'; import styled from 'react-emotion'; +import { default as MuiTabs } from '../../muiComponents/Tabs'; +import Tab from '../../muiComponents/Tab'; + import { TabPosition } from './tabs'; interface Props { diff --git a/src/components/DetailSidebar/DetailSidebar.tsx b/src/components/DetailSidebar/DetailSidebar.tsx index d1d924a..fccb2e7 100644 --- a/src/components/DetailSidebar/DetailSidebar.tsx +++ b/src/components/DetailSidebar/DetailSidebar.tsx @@ -1,5 +1,4 @@ import React, { ReactElement } from 'react'; -import CardContent from '@material-ui/core/CardContent'; import { ActionBar } from '../ActionBar/ActionBar'; import Author from '../Author'; @@ -11,6 +10,7 @@ import Repository from '../Repository/Repository'; import { DetailContext } from '../../pages/Version'; import List from '../../muiComponents/List'; import Card from '../../muiComponents/Card'; +import CardContent from '../../muiComponents/CardContent'; import { TitleListItem, TitleListItemText, PackageDescription, PackageVersion } from './styles'; diff --git a/src/components/DetailSidebar/styles.ts b/src/components/DetailSidebar/styles.ts index 664ce0d..131100e 100644 --- a/src/components/DetailSidebar/styles.ts +++ b/src/components/DetailSidebar/styles.ts @@ -1,7 +1,7 @@ import styled from 'react-emotion'; -import ListItemText from '@material-ui/core/ListItemText'; import ListItem from '../../muiComponents/ListItem'; +import ListItemText from '../../muiComponents/ListItemText'; export const TitleListItem = styled(ListItem)({ paddingLeft: 0, @@ -10,21 +10,15 @@ export const TitleListItem = styled(ListItem)({ }); export const TitleListItemText = styled(ListItemText)({ - '&&': { - paddingLeft: 0, - paddingRight: 0, - paddingTop: '8px', - }, + paddingLeft: 0, + paddingRight: 0, + paddingTop: '8px', }); export const PackageDescription = styled('span')({ - '&&': { - display: 'block', - }, + display: 'block', }); export const PackageVersion = styled('span')({ - '&&': { - display: 'block', - }, + display: 'block', }); diff --git a/src/components/Developers/styles.ts b/src/components/Developers/styles.ts index bd3124a..15ab694 100644 --- a/src/components/Developers/styles.ts +++ b/src/components/Developers/styles.ts @@ -1,9 +1,9 @@ import styled from 'react-emotion'; -import { default as MuiFab } from '@material-ui/core/Fab'; import colors from '../../utils/styles/colors'; import { fontWeight } from '../../utils/styles/sizes'; import Text from '../../muiComponents/Text'; +import FloatingActionButton from '../../muiComponents/FloatingActionButton'; export const Details = styled('span')({ display: 'flex', @@ -26,9 +26,7 @@ export const StyledText = styled(Text)({ textTransform: 'capitalize', }); -export const Fab = styled(MuiFab)({ - '&&': { - backgroundColor: colors.primary, - color: colors.white, - }, +export const Fab = styled(FloatingActionButton)({ + backgroundColor: colors.primary, + color: colors.white, }); diff --git a/src/components/Dist/__snapshots__/Dist.test.tsx.snap b/src/components/Dist/__snapshots__/Dist.test.tsx.snap index 629c9fa..6ead806 100644 --- a/src/components/Dist/__snapshots__/Dist.test.tsx.snap +++ b/src/components/Dist/__snapshots__/Dist.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` component should render the component in default state 1`] = `"
    Latest Distribution
    file count: 7
    size: 10.00 Bytes
"`; +exports[` component should render the component in default state 1`] = `"
    Latest Distribution
    file count: 7
    size: 10.00 Bytes
"`; -exports[` component should render the component with license as object 1`] = `"
    Latest Distribution
    file count: 7
    size: 10.00 Bytes
    license: MIT
"`; +exports[` component should render the component with license as object 1`] = `"
    Latest Distribution
    file count: 7
    size: 10.00 Bytes
    license: MIT
"`; -exports[` component should render the component with license as string 1`] = `"
    Latest Distribution
    file count: 7
    size: 10.00 Bytes
    license: MIT
"`; +exports[` component should render the component with license as string 1`] = `"
    Latest Distribution
    file count: 7
    size: 10.00 Bytes
    license: MIT
"`; diff --git a/src/components/Dist/styles.ts b/src/components/Dist/styles.ts index bc8436a..30da4e7 100644 --- a/src/components/Dist/styles.ts +++ b/src/components/Dist/styles.ts @@ -1,11 +1,11 @@ import styled from 'react-emotion'; -import { default as MuiFab } from '@material-ui/core/Fab'; -import Chip from '@material-ui/core/Chip'; import colors from '../../utils/styles/colors'; import { fontWeight } from '../../utils/styles/sizes'; import ListItem from '../../muiComponents/ListItem'; import Text from '../../muiComponents/Text'; +import FloatingActionButton from '../../muiComponents/FloatingActionButton'; +import Chip from '../../muiComponents/Chip'; export const StyledText = styled(Text)({ fontWeight: fontWeight.bold, @@ -13,22 +13,16 @@ export const StyledText = styled(Text)({ }); export const DistListItem = styled(ListItem)({ - '&&': { - paddingLeft: 0, - paddingRight: 0, - }, + paddingLeft: 0, + paddingRight: 0, }); export const DistChips = styled(Chip)({ - '&&': { - marginRight: '5px', - textTransform: 'capitalize', - }, + marginRight: '5px', + textTransform: 'capitalize', }); -export const DownloadButton = styled(MuiFab)({ - '&&': { - backgroundColor: colors.primary, - color: colors.white, - }, +export const DownloadButton = styled(FloatingActionButton)({ + backgroundColor: colors.primary, + color: colors.white, }); diff --git a/src/components/Engines/Engines.tsx b/src/components/Engines/Engines.tsx index 508af55..bfb9486 100644 --- a/src/components/Engines/Engines.tsx +++ b/src/components/Engines/Engines.tsx @@ -1,11 +1,11 @@ import React, { Component, ReactElement } from 'react'; -import Grid from '@material-ui/core/Grid'; -import ListItemText from '@material-ui/core/ListItemText'; import { VersionPageConsumerProps, DetailContextConsumer } from '../../pages/Version'; import Avatar from '../../muiComponents/Avatar'; import List from '../../muiComponents/List'; import npm from '../Install/img/npm.svg'; +import ListItemText from '../../muiComponents/ListItemText'; +import Grid from '../../muiComponents/Grid'; import { StyledText, EngineListItem } from './styles'; // @ts-ignore diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 0feb0c6..21f0cff 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -50,7 +50,9 @@ const Header: React.FC = ({ logo, withoutSearch, username, onLogout, onTo - + )} diff --git a/src/components/Header/HeaderMenu.tsx b/src/components/Header/HeaderMenu.tsx index ddb2cce..ea83cda 100644 --- a/src/components/Header/HeaderMenu.tsx +++ b/src/components/Header/HeaderMenu.tsx @@ -1,9 +1,9 @@ import React, { MouseEvent } from 'react'; -import MenuItem from '@material-ui/core/MenuItem'; -import Menu from '@material-ui/core/Menu'; import AccountCircle from '@material-ui/icons/AccountCircle'; import IconButton from '../../muiComponents/IconButton'; +import MenuItem from '../../muiComponents/MenuItem'; +import Menu from '../../muiComponents/Menu'; import HeaderGreetings from './HeaderGreetings'; @@ -39,7 +39,6 @@ const HeaderMenu: React.FC = ({ vertical: 'top', horizontal: 'right', }} - id="header--button-account" onClose={onLoggedInMenuClose} open={isMenuOpen} transformOrigin={{ @@ -49,7 +48,7 @@ const HeaderMenu: React.FC = ({ - + {'Logout'} diff --git a/src/components/Header/HeaderToolTipIcon.tsx b/src/components/Header/HeaderToolTipIcon.tsx index f10271c..76e2ac6 100644 --- a/src/components/Header/HeaderToolTipIcon.tsx +++ b/src/components/Header/HeaderToolTipIcon.tsx @@ -1,31 +1,37 @@ -import React from 'react'; +import React, { forwardRef } from 'react'; import Info from '@material-ui/icons/Info'; import Help from '@material-ui/icons/Help'; import Search from '@material-ui/icons/Search'; import IconButton from '../../muiComponents/IconButton'; -import { IconSearchButton, StyledExternalLink } from './styles'; +import { IconSearchButton, StyledLink } from './styles'; export type TooltipIconType = 'search' | 'help' | 'info'; - interface Props { tooltipIconType: TooltipIconType; onClick?: () => void; } -const HeaderToolTipIcon: React.FC = ({ tooltipIconType, onClick }) => { +type HeaderToolTipIconRef = HTMLButtonElement; + +/* eslint-disable react/jsx-no-undef */ +/* eslint-disable react/display-name */ +const HeaderToolTipIcon = forwardRef(function HeaderToolTipIcon( + { tooltipIconType, onClick }, + ref +) { switch (tooltipIconType) { case 'help': return ( - - + ); case 'info': return ( @@ -33,7 +39,8 @@ const HeaderToolTipIcon: React.FC = ({ tooltipIconType, onClick }) => { color="inherit" data-testid={'header--tooltip-info'} id="header--button-registryInfo" - onClick={onClick}> + onClick={onClick} + ref={ref}> ); @@ -46,6 +53,6 @@ const HeaderToolTipIcon: React.FC = ({ tooltipIconType, onClick }) => { default: return null; } -}; +}); export default HeaderToolTipIcon; diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap index a27a30f..224925c 100644 --- a/src/components/Header/__snapshots__/Header.test.tsx.snap +++ b/src/components/Header/__snapshots__/Header.test.tsx.snap @@ -5,10 +5,10 @@ exports[`
component with logged in state should load the component in class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc emotion-9 MuiAppBar-colorPrimary" >
component with logged in state should load the component in />
component with logged in state should load the component in class="MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart" >
component with logged in state should load the component in
- + + + + + - + + + + +