Skip to content
This repository has been archived by the owner on May 19, 2020. It is now read-only.

refactor(*): replace style props with CSS classNames - #320 #387

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

refactor(*): replace style props with CSS classNames - #320 #387

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ae0871f
refactor(ErrorLogger): remove style props and replace with classNames…
98lenvi Apr 17, 2020
001b31a
refactor(Navigation): remove style props and replace with classNames …
98lenvi Apr 18, 2020
d1dde36
refactor(TemplateLibrary): remove style props and replace with classN…
98lenvi Apr 18, 2020
3c125e1
fix(ErrorLogger): Add classNames for for both states of ArrowDiv - i320
98lenvi Apr 18, 2020
184a711
refactor(*): code cleanup,remove unecessary CSS - i320
98lenvi Apr 24, 2020
06bf8ce
refactor(*): remove CustomStylesWrapper - i320
98lenvi Apr 24, 2020
b6eabe5
refactor(*): add CiceroUI as common className - i320
98lenvi Apr 24, 2020
3b7c7ea
refactor(*): rename classNames - i320
98lenvi May 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 7 additions & 39 deletions src/ErrorLogger/Error.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,60 +9,44 @@ import * as ACT from './actions';
import * as SC from './styles';

const ErrorComponent = (props) => {
const { error, errorProps, errorNav } = props;
const { error, errorNav } = props;
const [specErrorVisible, setspecErrorVisible] = useState(false);

const handleClickSpecError = () => {
setspecErrorVisible(!specErrorVisible);
};

const componentProps = {
borderBottom: errorProps.ERROR_BORDER_BOTTOM,
};

const fileProps = {
errorFile: errorProps.ERROR_FILE,
errorFileHover: errorProps.ERROR_FILE_HOVER,
};

const typeProps = {
onClick: handleClickSpecError,
errorType: errorProps.ERROR_TYPE,
};

const shortMessageProps = {
onClick: handleClickSpecError,
shortMessage: errorProps.ERROR_SHORT_MESSAGE,
};

const fullMessageProps = {
fullMessage: errorProps.ERROR_FULL_MESSAGE,
};

const errorArrowProps = {
expanded: specErrorVisible,
onClick: handleClickSpecError,
errorArrow: errorProps.ERROR_EXPAND_ARROW,
};

return (
<SC.ErrorComponent {...componentProps}>
<SC.ErrorComponent className='errorLoggerError'>

<SC.ArrowDiv {...errorArrowProps} />
<SC.ErrorFile {...fileProps} onClick={() => errorNav(error)} >
<SC.ArrowDiv {...errorArrowProps} className={specErrorVisible?'errorLoggerErrorArrowExpanded':'errorLoggerErrorArrowCollapsed'}/>
<SC.ErrorFile onClick={() => errorNav(error)} className='errorLoggerError'>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'errorLoggerErrorFile'

{ACT.typeSwitchCase(error || {})}
</SC.ErrorFile>

<SC.ErrorType {...typeProps} >
<SC.ErrorType {...typeProps} className='errorLoggerErrorType'>
{ACT.overalltypeSwitchCase(error).name || 'Unknown Error'}:
</SC.ErrorType>

<SC.ErrorShortMessage {...shortMessageProps} >
<SC.ErrorShortMessage {...shortMessageProps} className='errorLoggerErrorShortMessage'>
{ACT.truncateMessage(ACT.overalltypeSwitchCase(error).shortMessage || 'Unknown Error')}
</SC.ErrorShortMessage>

{specErrorVisible
&& <SC.ErrorFullMessage {...fullMessageProps} >
&& <SC.ErrorFullMessage {...fullMessageProps} className='errorLoggerErrorFullMessage'>
{ACT.overalltypeSwitchCase(error).message || 'Unknown Error'}
</SC.ErrorFullMessage>}
</SC.ErrorComponent>
Expand All @@ -72,22 +56,6 @@ const ErrorComponent = (props) => {
ErrorComponent.propTypes = {
error: PropTypes.object.isRequired,
errorNav: PropTypes.func,
errorProps: PropTypes.shape({
ERRORS_HEADER_BACKGROUND: PropTypes.string,
ERRORS_HEADER_BACKGROUND_HOVER: PropTypes.string,
ERRORS_HEADER_EXPAND_ARROW: PropTypes.string,
ERRORS_HEADER_BORDER_TOP: PropTypes.string,
ERRORS_HEADER_SHADOW: PropTypes.string,
ERRORS_DISPLAY_BACKGROUND: PropTypes.string,
ERRORS_DISPLAY_SHADOW: PropTypes.string,
ERROR_BORDER_BOTTOM: PropTypes.string,
ERROR_EXPAND_ARROW: PropTypes.string,
ERROR_FILE: PropTypes.string,
ERROR_FILE_HOVER: PropTypes.string,
ERROR_TYPE: PropTypes.string,
ERROR_FULL_MESSAGE: PropTypes.string,
ERROR_SHORT_MESSAGE: PropTypes.string,
}),
};

export default ErrorComponent;
36 changes: 4 additions & 32 deletions src/ErrorLogger/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import ErrorComponent from './Error';
const ErrorLogger = (props) => {
const { errors, errorNav } = props;
const errorLength = Object.keys(errors).length ? Object.keys(errors).length : 0;
const errorsProps = props.errorsProps || Object.create(null);

const [errorsVisible, setErrorsVisible] = useState(false);

Expand All @@ -26,24 +25,15 @@ const ErrorLogger = (props) => {
id: 'ErrorComponentHeader',
errors: ACT.errorsExist(errors),
onClick: handleClickErrorsBar,
headerBackground: errorsProps.ERRORS_HEADER_BACKGROUND,
headerBackgroundHover: errorsProps.ERRORS_HEADER_BACKGROUND_HOVER,
headerShadow: errorsProps.ERRORS_HEADER_SHADOW,
headerTop: errorsProps.ERRORS_HEADER_BORDER_TOP,
zIndexInput: errorsProps.ERRORS_DISPLAY_Z_INDEX,
};

const displayProps = {
id: 'ErrorComponentDisplay',
errorDisplay: errorsVisible,
displayBackground: errorsProps.ERRORS_DISPLAY_BACKGROUND,
displayShadow: errorsProps.ERRORS_DISPLAY_SHADOW,
zIndexInput: errorsProps.ERRORS_DISPLAY_Z_INDEX,
};

const barArrowProps = {
errorDisplay: errorsVisible,
headerBarArrow: errorsProps.ERRORS_HEADER_EXPAND_ARROW,
};

const symbolProps = {
Expand All @@ -53,23 +43,22 @@ const ErrorLogger = (props) => {

const errorComponentGenerator = errors => Object.values(errors)
.map(errorValue => <ErrorComponent
errorProps={errorsProps}
error={errorValue}
errorNav={errorNav}
key={ACT.keySwitchCase(errorValue)} />);

return (
<div>
<div className='ciceroUI'>
{errorsVisible
&& <SC.ErrorDisplay {...displayProps} >
&& <SC.ErrorDisplay {...displayProps} className='errorLoggerDisplay'>
{errorComponentGenerator(errors)}
</SC.ErrorDisplay>
}
<SC.ErrorsHeader {...headerProps} >
<SC.ErrorsHeader {...headerProps} className='errorLoggerHeader'>
{ACT.gtZero(errorLength)
&& <SC.ErrorSymbol {...symbolProps} />}
{ACT.errorArrayLength(errors)} {ACT.isMultipleErrors(errors)}
<SC.ErrorBarArrow {...barArrowProps} />
<SC.ErrorBarArrow {...barArrowProps} className='errorLoggerBarArrow'/>
</SC.ErrorsHeader>
</div>
);
Expand All @@ -78,23 +67,6 @@ const ErrorLogger = (props) => {
ErrorLogger.propTypes = {
errors: PropTypes.object.isRequired,
errorNav: PropTypes.func,
errorsProps: PropTypes.shape({
ERRORS_HEADER_BACKGROUND: PropTypes.string,
ERRORS_HEADER_BACKGROUND_HOVER: PropTypes.string,
ERRORS_HEADER_EXPAND_ARROW: PropTypes.string,
ERRORS_HEADER_BORDER_TOP: PropTypes.string,
ERRORS_HEADER_SHADOW: PropTypes.string,
ERRORS_DISPLAY_BACKGROUND: PropTypes.string,
ERRORS_DISPLAY_SHADOW: PropTypes.string,
ERRORS_DISPLAY_Z_INDEX: PropTypes.string,
ERROR_BORDER_BOTTOM: PropTypes.string,
ERROR_EXPAND_ARROW: PropTypes.string,
ERROR_FILE: PropTypes.string,
ERROR_FILE_HOVER: PropTypes.string,
ERROR_TYPE: PropTypes.string,
ERROR_FULL_MESSAGE: PropTypes.string,
ERROR_SHORT_MESSAGE: PropTypes.string,
}),
};

export default ErrorLogger;
42 changes: 20 additions & 22 deletions src/ErrorLogger/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,23 @@ export const ErrorDisplay = styled.div`
position: fixed;
max-height: 300px;
overflow-y: scroll;
background-color: ${props => props.displayBackground || '#1E2D53'};
box-shadow: ${props => props.displayShadow || '0 -2px 20px 0 rgba(20,31,60,0.65)'};
z-index: ${props => props.zIndexInput || 'auto'};
background-color: #1E2D53;
box-shadow: 0 -2px 20px 0 rgba(20,31,60,0.65);
`;

ErrorDisplay.displayName = 'ErrorDisplay';
ErrorDisplay.displayName = 'errorLoggerDisplay';

export const ErrorsHeader = styled.div`
z-index: ${props => props.zIndexInput || 'auto'};
width: 100%;
position: fixed;
transition: 1s;
padding: 0.1em 0.1em 0.1em 1em;
bottom: 0;
height: 25px;
display: ${props => (props.errors ? 'inline' : 'none')};
background-color: ${props => props.headerBackground || '#1E2D53'};
box-shadow: ${props => props.headerShadow || '0 -2px 20px 0 rgba(20,31,60,0.65)'};
border-top: ${props => props.headerTop || ' 1px solid #50637F'};
background-color: #1E2D53;
box-shadow: 0 -2px 20px 0 rgba(20,31,60,0.65);
border-top: 1px solid #50637F;

color: #FF4242;
font-family: "IBM Plex Sans";
Expand All @@ -37,7 +35,7 @@ export const ErrorsHeader = styled.div`
line-height: 20px;

&:hover {
background-color: ${props => props.headerBackgroundHover || '#364C77'};
background-color: #364C77;
cursor: pointer;
}
`;
Expand All @@ -55,22 +53,22 @@ export const ErrorBarArrow = styled.div`
margin: 5px 15px;

border-top: ${props => (props.errorDisplay
? (`7px solid ${props.headerBarArrow || '#7B9AD1'}`) : '0')};
? (`7px solid #7B9AD1`) : '0')};

border-right: 4px solid transparent;

border-left: 4px solid transparent;

border-bottom: ${props => (props.errorDisplay
? '0' : (`7px solid ${props.headerBarArrow || '#7B9AD1'}`))};
? '0' : (`7px solid #7B9AD1`))};
`;

ErrorBarArrow.displayName = 'ErrorBarArrow';
ErrorBarArrow.displayName = 'errorLoggerBarArrow';

export const ErrorComponent = styled.div`
width: 100%;
color: #F0F0F0;
border-bottom: 1px solid ${props => props.borderBottom || '#50637F'};
border-bottom: 1px solid #50637F;
padding: 10px 16px;

display: grid;
Expand All @@ -81,12 +79,12 @@ export const ErrorComponent = styled.div`
grid-template-rows: min-content auto;
`;

ErrorComponent.displayName = 'ErrorComponent';
ErrorComponent.displayName = 'errorLoggerError';

export const ErrorFile = styled.a`
text-decoration: underline;

color: ${props => props.errorFile || '#FFFFFF'};
color: #FFFFFF;
font-family: "IBM Plex Sans";
font-size: 0.81em;
line-height: 13px;
Expand All @@ -95,15 +93,15 @@ export const ErrorFile = styled.a`
align-self: center;
&:hover {
cursor: pointer;
color: ${props => props.errorFileHover || '#0066CC'};
color: #0066CC;
}
`;

ErrorFile.displayName = 'ErrorFile';

export const ErrorType = styled.div`
grid-area: errorType;
color: ${props => props.errorType || '#B9BCC4'};
color: #B9BCC4;
font-family: "IBM Plex Sans";
font-size: 0.81em;
line-height: 13px;
Expand All @@ -115,19 +113,19 @@ ErrorType.displayName = 'ErrorType';

export const ErrorShortMessage = styled.div`
grid-area: errorMessage;
color: ${props => props.shortMessage || '#B9BCC4'};
color: #B9BCC4;
font-family: "IBM Plex Sans";
font-size: 0.81em;
line-height: 13px;
align-self: center;
padding: 5px;
`;

ErrorShortMessage.displayName = 'ErrorShortMessage';
ErrorShortMessage.displayName = 'errorLoggerErrorShortMessage';

export const ErrorFullMessage = styled.div`
grid-area: errorFull;
color: ${props => props.fullMessage || '#FFFFFF'};
color: #FFFFFF;
font-family: "IBM Plex Sans";
font-size: 0.81em;
line-height: 13px;
Expand All @@ -143,14 +141,14 @@ export const ArrowDiv = styled.div`
margin: 5px;

border-top: ${props => (props.expanded
? (`10px solid ${props.errorArrow || '#50637F'}`) : '4px solid transparent')};
? (`10px solid #50637F`) : '4px solid transparent')};

border-right: ${props => (props.expanded ? '4px solid transparent' : '0')};

border-bottom: ${props => (props.expanded ? '0' : '4px solid transparent')};

border-left: ${props => (props.expanded
? '4px solid transparent' : (`10px solid ${props.errorArrow || '#50637F'}`))};
? '4px solid transparent' : (`10px solid #50637F`))};

&:hover {
cursor: pointer;
Expand Down
12 changes: 2 additions & 10 deletions src/Navigation/ComponentSwitch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,6 @@ import { NAVIGATION, FILES } from './constants';
*/
const NavigationComponent = (props) => {
const navigationSwitchProps = {
headerFont: props.headerFont,
titleActive: props.titleActive,
titleInactive: props.titleInactive,
filesVisible: props.filesVisible,
navState: props.navState,
};

Expand All @@ -37,10 +33,10 @@ const NavigationComponent = (props) => {

return (
<React.Fragment>
<SC.Navigation {...navigationProps}>
<SC.Navigation {...navigationProps} className={props.navState === 'NAVIGATION'?'navigationTitleActive':'navigationTitleInactive'}>
NAVIGATION
</SC.Navigation>
<SC.Files {...fileProps}>
<SC.Files {...fileProps} className={props.navState === 'FILES'?'navigationTitleActive':'navigationTitleInactive'}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'navigationFilesActive' and 'navigationFilesInactive'

FILES
</SC.Files>
</React.Fragment>
Expand All @@ -50,10 +46,6 @@ const NavigationComponent = (props) => {
NavigationComponent.propTypes = {
setNavState: PropTypes.func.isRequired,
navState: PropTypes.string.isRequired,
filesVisible: PropTypes.bool,
headerFont: PropTypes.string,
titleActive: PropTypes.string,
titleInactive: PropTypes.string,
};

export default NavigationComponent;
10 changes: 0 additions & 10 deletions src/Navigation/Files/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,6 @@ import PropTypes from 'prop-types';
const ClauseNavigation = () => <p style={{ color: '#fff' }}>Feature in progress</p>;

ClauseNavigation.propTypes = {
styleProps: PropTypes.shape({
titleColor: PropTypes.string,
titleHover: PropTypes.string,
arrowColor: PropTypes.string,
arrowHover: PropTypes.string,
deleteColor: PropTypes.string,
deleteHover: PropTypes.string,
addColor: PropTypes.string,
addHover: PropTypes.string,
}),
};

export default ClauseNavigation;
Loading