From ae0871f761c7567e21700882e3a6ab7dd61e7f70 Mon Sep 17 00:00:00 2001 From: Lenvin Gonsalves Date: Fri, 17 Apr 2020 22:13:06 +0530 Subject: [PATCH 1/8] refactor(ErrorLogger): remove style props and replace with classNames - i320 Signed-off-by: Lenvin Gonsalves --- src/ErrorLogger/Error.js | 43 ++++++--------------------------- src/ErrorLogger/customStyles.js | 22 +++++++++++++++++ src/ErrorLogger/index.js | 41 ++++++------------------------- src/ErrorLogger/styles.js | 36 +++++++++++++-------------- 4 files changed, 55 insertions(+), 87 deletions(-) create mode 100644 src/ErrorLogger/customStyles.js diff --git a/src/ErrorLogger/Error.js b/src/ErrorLogger/Error.js index fc925461..ee0769dc 100644 --- a/src/ErrorLogger/Error.js +++ b/src/ErrorLogger/Error.js @@ -9,60 +9,47 @@ 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 ( - + - - errorNav(error)} > + + errorNav(error)} className={'errorFile'}> {ACT.typeSwitchCase(error || {})} - + {ACT.overalltypeSwitchCase(error).name || 'Unknown Error'}: - + {ACT.truncateMessage(ACT.overalltypeSwitchCase(error).shortMessage || 'Unknown Error')} {specErrorVisible - && + && {ACT.overalltypeSwitchCase(error).message || 'Unknown Error'} } @@ -72,22 +59,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; diff --git a/src/ErrorLogger/customStyles.js b/src/ErrorLogger/customStyles.js new file mode 100644 index 00000000..02fe38ff --- /dev/null +++ b/src/ErrorLogger/customStyles.js @@ -0,0 +1,22 @@ +import styled from 'styled-components'; + +export const CustomStylesWrapper = styled.div` +.errorHeader{ +}; +.errorDisplay{ +}; +.errorBarArrow{ +}; +.errorComponent{ +}; +.errorFile{ +}; +.errorArrowDiv{ +}; +.errorType{ +}; +.errorShortMessage{ +}; +.errorFullMessage{ +}; +` \ No newline at end of file diff --git a/src/ErrorLogger/index.js b/src/ErrorLogger/index.js index b3f5e76a..86012c8f 100644 --- a/src/ErrorLogger/index.js +++ b/src/ErrorLogger/index.js @@ -11,10 +11,12 @@ import * as SC from './styles'; /* Component */ import ErrorComponent from './Error'; +/** classNames exposed for user-defined styling */ +import {CustomStylesWrapper} from './customStyles'; + 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); @@ -26,24 +28,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 = { @@ -53,48 +46,30 @@ const ErrorLogger = (props) => { const errorComponentGenerator = errors => Object.values(errors) .map(errorValue => ); return ( -
+ {errorsVisible - && + && {errorComponentGenerator(errors)} } - + {ACT.gtZero(errorLength) && } {ACT.errorArrayLength(errors)} {ACT.isMultipleErrors(errors)} - + -
+ ); }; 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; diff --git a/src/ErrorLogger/styles.js b/src/ErrorLogger/styles.js index 6ef26149..a8c03eeb 100644 --- a/src/ErrorLogger/styles.js +++ b/src/ErrorLogger/styles.js @@ -9,15 +9,15 @@ 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); + z-index: auto; `; ErrorDisplay.displayName = 'ErrorDisplay'; export const ErrorsHeader = styled.div` - z-index: ${props => props.zIndexInput || 'auto'}; + z-index: auto; width: 100%; position: fixed; transition: 1s; @@ -25,9 +25,9 @@ export const ErrorsHeader = styled.div` 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"; @@ -37,7 +37,7 @@ export const ErrorsHeader = styled.div` line-height: 20px; &:hover { - background-color: ${props => props.headerBackgroundHover || '#364C77'}; + background-color: #364C77; cursor: pointer; } `; @@ -55,14 +55,14 @@ 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'; @@ -70,7 +70,7 @@ ErrorBarArrow.displayName = 'ErrorBarArrow'; 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; @@ -86,7 +86,7 @@ ErrorComponent.displayName = 'ErrorComponent'; 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; @@ -95,7 +95,7 @@ export const ErrorFile = styled.a` align-self: center; &:hover { cursor: pointer; - color: ${props => props.errorFileHover || '#0066CC'}; + color: #0066CC; } `; @@ -103,7 +103,7 @@ 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; @@ -115,7 +115,7 @@ 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; @@ -127,7 +127,7 @@ ErrorShortMessage.displayName = 'ErrorShortMessage'; 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; @@ -143,14 +143,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; From 001b31a74013e5552baac3fcee2da93477a8c466 Mon Sep 17 00:00:00 2001 From: Lenvin Gonsalves Date: Sat, 18 Apr 2020 19:47:25 +0530 Subject: [PATCH 2/8] refactor(Navigation): remove style props and replace with classNames - i320 Signed-off-by: Lenvin Gonsalves --- src/Navigation/ComponentSwitch.js | 12 +----- src/Navigation/Files/index.js | 10 ----- src/Navigation/customStyles.js | 18 +++++++++ src/Navigation/generators.js | 8 ++-- src/Navigation/index.js | 63 ++++--------------------------- src/Navigation/styles.js | 24 ++++++------ 6 files changed, 44 insertions(+), 91 deletions(-) create mode 100644 src/Navigation/customStyles.js diff --git a/src/Navigation/ComponentSwitch.js b/src/Navigation/ComponentSwitch.js index 9f053feb..31fc3cc2 100644 --- a/src/Navigation/ComponentSwitch.js +++ b/src/Navigation/ComponentSwitch.js @@ -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, }; @@ -37,10 +33,10 @@ const NavigationComponent = (props) => { return ( - + NAVIGATION - + FILES @@ -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; diff --git a/src/Navigation/Files/index.js b/src/Navigation/Files/index.js index 49d9f649..8296f5e3 100644 --- a/src/Navigation/Files/index.js +++ b/src/Navigation/Files/index.js @@ -5,16 +5,6 @@ import PropTypes from 'prop-types'; const ClauseNavigation = () =>

Feature in progress

; 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; diff --git a/src/Navigation/customStyles.js b/src/Navigation/customStyles.js new file mode 100644 index 00000000..bc9eb08f --- /dev/null +++ b/src/Navigation/customStyles.js @@ -0,0 +1,18 @@ +import styled from 'styled-components'; + +export const CustomStylesWrapper = styled.div` +.navigation{ +}; +.navTitleActive{ +} +.navTitleInactive{ +} +.navHeaderClause{ +} +.navHeaderH1{ +} +.navHeaderH2{ +} +.navHeaderH3{ +} +` \ No newline at end of file diff --git a/src/Navigation/generators.js b/src/Navigation/generators.js index 9ddd9f08..11807df1 100644 --- a/src/Navigation/generators.js +++ b/src/Navigation/generators.js @@ -23,7 +23,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - {...props.styleProps} + className={'navHeaderClause'} > {text} @@ -33,7 +33,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - {...props.styleProps} + className={'navHeaderH1'} > {text} @@ -43,7 +43,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - {...props.styleProps} + className={'navHeaderH2'} > {text} @@ -53,7 +53,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - {...props.styleProps} + className={'navHeaderH3'} > {text} diff --git a/src/Navigation/index.js b/src/Navigation/index.js index 4dfab6ae..28874cc1 100644 --- a/src/Navigation/index.js +++ b/src/Navigation/index.js @@ -13,6 +13,9 @@ import ContractNavigation from './Contract'; import FilesNavigation from './Files'; import ComponentSwitch from './ComponentSwitch'; +/** classNames exposed for user-defined styling */ +import {CustomStylesWrapper} from './customStyles'; + /** * Represents the overall navigation wrapper, consisting of * two separate components, navigating between headers of the @@ -20,95 +23,45 @@ import ComponentSwitch from './ComponentSwitch'; * @param {*} props */ const NavigationComponent = (props) => { - const navigationProps = props.navigationProps || Object.create(null); const [navState, setNavState] = useState(NAVIGATION); const navigationState = () => navState === NAVIGATION; const filesState = () => navState === FILES; const navigationWrapperProps = { - id: 'NavigationWrapperComponent', - positionValue: navigationProps.NAVIGATION_POSITION, - topValue: navigationProps.NAVIGATION_TOP_VALUE, - navMaxHeight: navigationProps.NAVIGATION_MAX_HEIGHT, - navWidth: navigationProps.NAVIGATION_WIDTH, - backgroundColor: navigationProps.NAVIGATION_BACKGROUND_COLOR, + id: 'NavigationWrapperComponent' }; const switchProps = { navState, setNavState, - filesVisible: navigationProps.NAVIGATE_SWITCH_FILES_VISIBLE, - headerFont: navigationProps.NAVIGATE_SWITCH_TITLE_FONT_FAMILY, - titleActive: navigationProps.NAVIGATE_SWITCH_TITLE_ACTIVE_COLOR, - titleInactive: navigationProps.NAVIGATE_SWITCH_TITLE_INACTIVE_COLOR, - }; - - const contractProps = { - headerColor: navigationProps.CONTRACT_NAVIGATION_HEADER_COLOR, - clauseColor: navigationProps.CONTRACT_NAVIGATION_CLAUSE_COLOR, - clauseHeaderColor: navigationProps.CONTRACT_NAVIGATION_CLAUSE_HEADER_COLOR, - }; - - const filesProps = { - titleColor: navigationProps.CLAUSE_NAVIGATION_TITLE_COLOR, - titleHover: navigationProps.CLAUSE_NAVIGATION_TITLE_HOVER_COLOR, - arrowColor: navigationProps.CLAUSE_NAVIGATION_EXPANSION_ARROW_COLOR, - arrowHover: navigationProps.CLAUSE_NAVIGATION_EXPANSION_ARROW_HOVER_COLOR, - deleteColor: navigationProps.CLAUSE_NAVIGATION_FILE_DELETE_COLOR, - deleteHover: navigationProps.CLAUSE_NAVIGATION_FILE_DELETE_HOVER_COLOR, - addColor: navigationProps.CLAUSE_NAVIGATION_FILE_ADD_COLOR, - addHover: navigationProps.CLAUSE_NAVIGATION_FILE_ADD_HOVER_COLOR, }; const navigationGenerator = (props) => { if (navigationState()) { return ; + id="ContractNavigationComponent" {...props} />; } if (filesState()) { return ; + id="FilesNavigationComponent" {...props} />; } return 'Select Navigation or Files'; }; return ( + {navigationGenerator(props)} + ); }; NavigationComponent.propTypes = { headers: PropTypes.array, navigateHeader: PropTypes.func, - navigationProps: PropTypes.shape({ - NAVIGATE_SWITCH_TITLE_ACTIVE_COLOR: PropTypes.string, - NAVIGATE_SWITCH_TITLE_INACTIVE_COLOR: PropTypes.string, - NAVIGATE_SWITCH_TITLE_FONT_FAMILY: PropTypes.string, - NAVIGATE_SWITCH_FILES_VISIBLE: PropTypes.bool.isRequired, - - NAVIGATION_POSITION: PropTypes.string, - NAVIGATION_TOP_VALUE: PropTypes.string, - NAVIGATION_MAX_HEIGHT: PropTypes.string, - NAVIGATION_WIDTH: PropTypes.string, - NAVIGATION_BACKGROUND_COLOR: PropTypes.string, - - CONTRACT_NAVIGATION_HEADER_COLOR: PropTypes.string, - CONTRACT_NAVIGATION_CLAUSE_COLOR: PropTypes.string, - CONTRACT_NAVIGATION_CLAUSE_HEADER_COLOR: PropTypes.string, - - CLAUSE_NAVIGATION_TITLE_COLOR: PropTypes.string, - CLAUSE_NAVIGATION_TITLE_HOVER_COLOR: PropTypes.string, - CLAUSE_NAVIGATION_EXPANSION_ARROW_COLOR: PropTypes.string, - CLAUSE_NAVIGATION_EXPANSION_ARROW_HOVER_COLOR: PropTypes.string, - CLAUSE_NAVIGATION_FILE_DELETE_COLOR: PropTypes.string, - CLAUSE_NAVIGATION_FILE_DELETE_HOVER_COLOR: PropTypes.string, - CLAUSE_NAVIGATION_FILE_ADD_COLOR: PropTypes.string, - CLAUSE_NAVIGATION_FILE_ADD_HOVER_COLOR: PropTypes.string, - }), }; export default NavigationComponent; diff --git a/src/Navigation/styles.js b/src/Navigation/styles.js index 79844e42..4b6dd806 100644 --- a/src/Navigation/styles.js +++ b/src/Navigation/styles.js @@ -4,11 +4,11 @@ import styled from 'styled-components'; /* Overall Navigation Component */ export const NavigationWrapper = styled.div` - position: ${props => props.positionValue || 'static'}; - top: ${props => props.topValue || 'auto'}; - max-height: ${props => props.navMaxHeight || '80vh'}; - width: ${props => props.navWidth || 'inherit'}; - background-color: ${props => props.backgroundColor || 'inherit'}; + position: static; + top: auto; + max-height: 80vh; + width: inherit; + background-color: inherit; overflow-y: inherit; display: grid; @@ -34,16 +34,16 @@ export const Navigation = styled(Title)` display: grid; grid-area: navigation; color: ${props => (props.navState === 'NAVIGATION' - ? (props.titleActive || '#19C6C7') - : (props.titleInactive || '#86888D'))}; + ? ('#19C6C7') + : ('#86888D'))}; `; export const Files = styled(Title)` - display: ${props => (props.filesVisible ? 'grid' : 'none')}; + display: grid; grid-area: files; color: ${props => (props.navState === 'FILES' - ? (props.titleActive || '#19C6C7') - : (props.titleInactive || '#86888D'))}; + ? ('#19C6C7') + : ('#86888D'))}; `; /* Contract Navigation */ @@ -66,7 +66,7 @@ export const HeaderOne = styled.div` margin-top: 2px; margin-bottom: 2px; height: 24px; - color: ${props => props.headerColor || '#B9BCC4'}; + color: #B9BCC4; font-family: "IBM Plex Sans"; font-size: 1em; letter-spacing: -0.5px; @@ -86,6 +86,6 @@ export const HeaderThree = styled(HeaderOne)` `; export const HeaderClause = styled(HeaderOne)` - color: ${props => props.clauseColor || '#FFFFFF'} !important; + color: #FFFFFF !important; font-weight: bold; `; From d1dde3666eb850fbb96edde79ba9df195a7cb31d Mon Sep 17 00:00:00 2001 From: Lenvin Gonsalves Date: Sat, 18 Apr 2020 20:08:13 +0530 Subject: [PATCH 3/8] refactor(TemplateLibrary): remove style props and replace with classNames - i320 Signed-off-by: Lenvin Gonsalves --- src/TemplateLibrary/Buttons/index.js | 4 +-- .../Components/TemplateActions.js | 18 ++++------- .../Components/TemplateCard.js | 24 ++++----------- src/TemplateLibrary/customStyles.js | 28 +++++++++++++++++ src/TemplateLibrary/index.js | 30 +++++++------------ 5 files changed, 51 insertions(+), 53 deletions(-) create mode 100644 src/TemplateLibrary/customStyles.js diff --git a/src/TemplateLibrary/Buttons/index.js b/src/TemplateLibrary/Buttons/index.js index f2b81700..24e28e69 100644 --- a/src/TemplateLibrary/Buttons/index.js +++ b/src/TemplateLibrary/Buttons/index.js @@ -55,12 +55,12 @@ const AddClauseBtn = styled(Button).attrs({ `; export const ImportComponent = props => ( - + Import from VS Code ); export const UploadComponent = props => ( - + Upload CTA file ); diff --git a/src/TemplateLibrary/Components/TemplateActions.js b/src/TemplateLibrary/Components/TemplateActions.js index a21bd642..9a78460a 100644 --- a/src/TemplateLibrary/Components/TemplateActions.js +++ b/src/TemplateLibrary/Components/TemplateActions.js @@ -5,14 +5,14 @@ import { Icon } from 'semantic-ui-react'; const ActionsContainer = styled.div` padding: 0 !important; - background-color: ${props => props.color || '#F9F9F9'} !important; + background-color: #F9F9F9 !important; max-height: 30px; `; const TemplateBtn = styled.a` padding: 5px 10px; display: inline-block; - color: ${props => props.color || '#484848'}; + color: #484848; font-family: "IBM Plex Sans"; font-size: 0.75em; font-weight: bold; @@ -20,7 +20,7 @@ const TemplateBtn = styled.a` const AddToContractBtn = styled(TemplateBtn)` width: 60%; - border-right: 1px solid ${props => props.color || '#E1E5EB'}; + border-right: 1px solid #E1E5EB; cursor: pointer; &:hover { color: #3087CB; @@ -40,18 +40,17 @@ const DetailsBtn = styled(TemplateBtn)` * with functionality. */ const TemplateActions = props => ( - +
props.addToCont(props.uriKey)} > Add to contract props.handleViewDetails(props.uriKey)}> Details @@ -63,11 +62,6 @@ TemplateActions.propTypes = { addToCont: PropTypes.func, handleViewDetails: PropTypes.func, uriKey: PropTypes.string, - libraryProps: PropTypes.shape({ - ACTION_BUTTON: PropTypes.string, - ACTION_BUTTON_BG: PropTypes.string, - ACTION_BUTTON_BORDER: PropTypes.string, - }), }; export default TemplateActions; diff --git a/src/TemplateLibrary/Components/TemplateCard.js b/src/TemplateLibrary/Components/TemplateCard.js index 171915e2..3b2c3e00 100644 --- a/src/TemplateLibrary/Components/TemplateCard.js +++ b/src/TemplateLibrary/Components/TemplateCard.js @@ -7,16 +7,15 @@ import TemplateActions from './TemplateActions'; const CardContainer = styled(Card)` margin: 10px 0 !important; - border: ${props => props.tempborder || 'none'}; + border: none; border-radius: 6px !important; - background-color: ${props => props.color || '#fff'} !important; + background-color: #fff !important; text-align: left; box-shadow: 0 1px 9px 0 rgba(0,0,0,0.1) !important; `; const Title = styled.div` display: inline; - color: ${props => props.color || null}; font-size: medium; font-weight: 600; line-height: 16px; @@ -39,7 +38,6 @@ const DescriptionContainer = styled(Card.Description)` max-width: 400px; margin: auto; font-size: 0.79em; - color: ${props => props.color || null} !important; `; /** @@ -49,12 +47,11 @@ const DescriptionContainer = styled(Card.Description)` const TemplateCard = props => ( - + <Title className={'templateCardTitle'}> { props.template.displayName ? props.template.displayName @@ -62,12 +59,11 @@ const TemplateCard = props => ( } <Version>v {props.template.version}</Version> - + {props.template.description} props.color || null}; `; const HeaderImports = styled.div` @@ -73,8 +75,8 @@ const SearchInput = styled(Input)` &&& input, &&& input::placeholder, &&& input:focus { - color: ${props => props.searchColor || '#FFFFFF'} !important; - caret-color: ${props => props.searchColor || '#FFFFFF'} !important; + color: #FFFFFF !important; + caret-color: #FFFFFF !important; background-color: transparent; opacity: 1 !important; }, @@ -86,7 +88,7 @@ const SearchInput = styled(Input)` const TemplateCards = styled.div` margin: 0 !important; width: 100%; - height: ${props => props.tempsHeight || 'calc(100% - 54px)'}; + height: calc(100% - 54px); display: inherit; overflow-y: scroll !important; `; @@ -120,12 +122,12 @@ const TemplateLibraryComponent = (props) => { * @return {*} the react component */ const filtered = filterTemplates(props.templates); - const libraryProps = props.libraryProps || Object.create(null); return ( +
- Clause Templates + Clause Templates {props.import && } @@ -134,7 +136,7 @@ const TemplateLibraryComponent = (props) => {
- + {props.addTemp && } @@ -146,27 +148,15 @@ const TemplateLibraryComponent = (props) => { template={t} handleViewTemplate={props.handleViewTemplate} className="templateCard" - libraryProps={libraryProps} /> ))} :

No results found

} + ); }; TemplateLibraryComponent.propTypes = { - libraryProps: PropTypes.shape({ - ACTION_BUTTON: PropTypes.string, - ACTION_BUTTON_BG: PropTypes.string, - ACTION_BUTTON_BORDER: PropTypes.string, - HEADER_TITLE: PropTypes.string, - SEARCH_COLOR: PropTypes.string, - TEMPLATE_BACKGROUND: PropTypes.string, - TEMPLATE_BORDER: PropTypes.string, - TEMPLATE_DESCRIPTION: PropTypes.string, - TEMPLATE_TITLE: PropTypes.string, - TEMPLATES_HEIGHT: PropTypes.string, - }), upload: PropTypes.func, import: PropTypes.func, addTemp: PropTypes.func, From 3c125e1a7e693b9405638656804a4ca98b62d6e5 Mon Sep 17 00:00:00 2001 From: Lenvin Gonsalves Date: Sat, 18 Apr 2020 20:16:09 +0530 Subject: [PATCH 4/8] fix(ErrorLogger): Add classNames for for both states of ArrowDiv - i320 Signed-off-by: Lenvin Gonsalves --- src/ErrorLogger/Error.js | 2 +- src/ErrorLogger/customStyles.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/ErrorLogger/Error.js b/src/ErrorLogger/Error.js index ee0769dc..107fdb97 100644 --- a/src/ErrorLogger/Error.js +++ b/src/ErrorLogger/Error.js @@ -35,7 +35,7 @@ const ErrorComponent = (props) => { return ( - + errorNav(error)} className={'errorFile'}> {ACT.typeSwitchCase(error || {})} diff --git a/src/ErrorLogger/customStyles.js b/src/ErrorLogger/customStyles.js index 02fe38ff..0323a3c9 100644 --- a/src/ErrorLogger/customStyles.js +++ b/src/ErrorLogger/customStyles.js @@ -11,7 +11,9 @@ export const CustomStylesWrapper = styled.div` }; .errorFile{ }; -.errorArrowDiv{ +.errorArrowDivExpanded{ +}; +.errorArrowDivCollapsed{ }; .errorType{ }; From 184a711d48abda92a87cc63e9860761455e2c8b8 Mon Sep 17 00:00:00 2001 From: Lenvin Gonsalves Date: Fri, 24 Apr 2020 23:53:22 +0530 Subject: [PATCH 5/8] refactor(*): code cleanup,remove unecessary CSS - i320 Signed-off-by: Lenvin Gonsalves --- src/ErrorLogger/Error.js | 13 +++++-------- src/ErrorLogger/index.js | 6 +++--- src/ErrorLogger/styles.js | 2 -- src/Navigation/generators.js | 8 ++++---- src/Navigation/styles.js | 1 - src/TemplateLibrary/Components/TemplateCard.js | 6 +++--- src/TemplateLibrary/index.js | 4 ++-- 7 files changed, 17 insertions(+), 23 deletions(-) diff --git a/src/ErrorLogger/Error.js b/src/ErrorLogger/Error.js index 107fdb97..64b8380b 100644 --- a/src/ErrorLogger/Error.js +++ b/src/ErrorLogger/Error.js @@ -24,32 +24,29 @@ const ErrorComponent = (props) => { onClick: handleClickSpecError, }; - const fullMessageProps = { - }; - const errorArrowProps = { expanded: specErrorVisible, onClick: handleClickSpecError, }; return ( - + - errorNav(error)} className={'errorFile'}> + errorNav(error)} className='errorFile'> {ACT.typeSwitchCase(error || {})} - + {ACT.overalltypeSwitchCase(error).name || 'Unknown Error'}: - + {ACT.truncateMessage(ACT.overalltypeSwitchCase(error).shortMessage || 'Unknown Error')} {specErrorVisible - && + && {ACT.overalltypeSwitchCase(error).message || 'Unknown Error'} } diff --git a/src/ErrorLogger/index.js b/src/ErrorLogger/index.js index 86012c8f..389a419f 100644 --- a/src/ErrorLogger/index.js +++ b/src/ErrorLogger/index.js @@ -53,15 +53,15 @@ const ErrorLogger = (props) => { return ( {errorsVisible - && + && {errorComponentGenerator(errors)} } - + {ACT.gtZero(errorLength) && } {ACT.errorArrayLength(errors)} {ACT.isMultipleErrors(errors)} - + ); diff --git a/src/ErrorLogger/styles.js b/src/ErrorLogger/styles.js index a8c03eeb..eb9034b1 100644 --- a/src/ErrorLogger/styles.js +++ b/src/ErrorLogger/styles.js @@ -11,13 +11,11 @@ export const ErrorDisplay = styled.div` overflow-y: scroll; background-color: #1E2D53; box-shadow: 0 -2px 20px 0 rgba(20,31,60,0.65); - z-index: auto; `; ErrorDisplay.displayName = 'ErrorDisplay'; export const ErrorsHeader = styled.div` - z-index: auto; width: 100%; position: fixed; transition: 1s; diff --git a/src/Navigation/generators.js b/src/Navigation/generators.js index 11807df1..121fab9e 100644 --- a/src/Navigation/generators.js +++ b/src/Navigation/generators.js @@ -23,7 +23,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - className={'navHeaderClause'} + className='navHeaderClause' > {text} @@ -33,7 +33,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - className={'navHeaderH1'} + className='navHeaderH1' > {text} @@ -43,7 +43,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - className={'navHeaderH2'} + className='navHeaderH2' > {text} @@ -53,7 +53,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - className={'navHeaderH3'} + className='navHeaderH3' > {text} diff --git a/src/Navigation/styles.js b/src/Navigation/styles.js index 4b6dd806..94b5f786 100644 --- a/src/Navigation/styles.js +++ b/src/Navigation/styles.js @@ -5,7 +5,6 @@ import styled from 'styled-components'; export const NavigationWrapper = styled.div` position: static; - top: auto; max-height: 80vh; width: inherit; background-color: inherit; diff --git a/src/TemplateLibrary/Components/TemplateCard.js b/src/TemplateLibrary/Components/TemplateCard.js index 3b2c3e00..52e9af36 100644 --- a/src/TemplateLibrary/Components/TemplateCard.js +++ b/src/TemplateLibrary/Components/TemplateCard.js @@ -47,11 +47,11 @@ const DescriptionContainer = styled(Card.Description)` const TemplateCard = props => ( - + <Title className='templateCardTitle'> { props.template.displayName ? props.template.displayName @@ -59,7 +59,7 @@ const TemplateCard = props => ( } <Version>v {props.template.version}</Version> - + {props.template.description} diff --git a/src/TemplateLibrary/index.js b/src/TemplateLibrary/index.js index dff8a532..00e41ab4 100644 --- a/src/TemplateLibrary/index.js +++ b/src/TemplateLibrary/index.js @@ -127,7 +127,7 @@ const TemplateLibraryComponent = (props) => {
- Clause Templates + Clause Templates {props.import && } @@ -136,7 +136,7 @@ const TemplateLibraryComponent = (props) => {
- + {props.addTemp && } From 06bf8ce8c354657e0258a85b27b529962533ef92 Mon Sep 17 00:00:00 2001 From: Lenvin Gonsalves Date: Fri, 24 Apr 2020 23:55:35 +0530 Subject: [PATCH 6/8] refactor(*): remove CustomStylesWrapper - i320 Signed-off-by: Lenvin Gonsalves --- src/ErrorLogger/customStyles.js | 24 ------------------------ src/ErrorLogger/index.js | 7 ++----- src/Navigation/customStyles.js | 18 ------------------ src/Navigation/index.js | 5 ----- src/TemplateLibrary/customStyles.js | 28 ---------------------------- src/TemplateLibrary/index.js | 5 ----- 6 files changed, 2 insertions(+), 85 deletions(-) delete mode 100644 src/ErrorLogger/customStyles.js delete mode 100644 src/Navigation/customStyles.js delete mode 100644 src/TemplateLibrary/customStyles.js diff --git a/src/ErrorLogger/customStyles.js b/src/ErrorLogger/customStyles.js deleted file mode 100644 index 0323a3c9..00000000 --- a/src/ErrorLogger/customStyles.js +++ /dev/null @@ -1,24 +0,0 @@ -import styled from 'styled-components'; - -export const CustomStylesWrapper = styled.div` -.errorHeader{ -}; -.errorDisplay{ -}; -.errorBarArrow{ -}; -.errorComponent{ -}; -.errorFile{ -}; -.errorArrowDivExpanded{ -}; -.errorArrowDivCollapsed{ -}; -.errorType{ -}; -.errorShortMessage{ -}; -.errorFullMessage{ -}; -` \ No newline at end of file diff --git a/src/ErrorLogger/index.js b/src/ErrorLogger/index.js index 389a419f..751c6760 100644 --- a/src/ErrorLogger/index.js +++ b/src/ErrorLogger/index.js @@ -11,9 +11,6 @@ import * as SC from './styles'; /* Component */ import ErrorComponent from './Error'; -/** classNames exposed for user-defined styling */ -import {CustomStylesWrapper} from './customStyles'; - const ErrorLogger = (props) => { const { errors, errorNav } = props; const errorLength = Object.keys(errors).length ? Object.keys(errors).length : 0; @@ -51,7 +48,7 @@ const ErrorLogger = (props) => { key={ACT.keySwitchCase(errorValue)} />); return ( - +
{errorsVisible && {errorComponentGenerator(errors)} @@ -63,7 +60,7 @@ const ErrorLogger = (props) => { {ACT.errorArrayLength(errors)} {ACT.isMultipleErrors(errors)} - +
); }; diff --git a/src/Navigation/customStyles.js b/src/Navigation/customStyles.js deleted file mode 100644 index bc9eb08f..00000000 --- a/src/Navigation/customStyles.js +++ /dev/null @@ -1,18 +0,0 @@ -import styled from 'styled-components'; - -export const CustomStylesWrapper = styled.div` -.navigation{ -}; -.navTitleActive{ -} -.navTitleInactive{ -} -.navHeaderClause{ -} -.navHeaderH1{ -} -.navHeaderH2{ -} -.navHeaderH3{ -} -` \ No newline at end of file diff --git a/src/Navigation/index.js b/src/Navigation/index.js index 28874cc1..5602b400 100644 --- a/src/Navigation/index.js +++ b/src/Navigation/index.js @@ -13,9 +13,6 @@ import ContractNavigation from './Contract'; import FilesNavigation from './Files'; import ComponentSwitch from './ComponentSwitch'; -/** classNames exposed for user-defined styling */ -import {CustomStylesWrapper} from './customStyles'; - /** * Represents the overall navigation wrapper, consisting of * two separate components, navigating between headers of the @@ -50,12 +47,10 @@ const NavigationComponent = (props) => { }; return ( - {navigationGenerator(props)} - ); }; diff --git a/src/TemplateLibrary/customStyles.js b/src/TemplateLibrary/customStyles.js deleted file mode 100644 index 6975d9ec..00000000 --- a/src/TemplateLibrary/customStyles.js +++ /dev/null @@ -1,28 +0,0 @@ -import styled from 'styled-components'; - -export const CustomStylesWrapper = styled.div` -.templateListTitle{ -}; -.templateSearchInput{ -}; -.templateCardsDiv{ -}; -.templateCard{ -}; -.templateCardTitle{ -}; -.templateCardDesc{ -}; -.templateActions{ -}; -.templateAddToContractButton{ -}; -.templateDetailsButton{ -}; -.templateImportButton{ -}; -.templateUploadButton{ -}; -.addTemplateButton{ -}; -` \ No newline at end of file diff --git a/src/TemplateLibrary/index.js b/src/TemplateLibrary/index.js index 00e41ab4..94ba399d 100644 --- a/src/TemplateLibrary/index.js +++ b/src/TemplateLibrary/index.js @@ -13,9 +13,6 @@ import isQueryMatch from '../utilities/isQueryMatch'; import TemplateCard from './Components/TemplateCard'; import { ImportComponent, UploadComponent, NewClauseComponent } from './Buttons'; -/** classNames exposed for user-defined styling */ -import {CustomStylesWrapper} from './customStyles'; - const TemplatesWrapper = styled.div` font-family: 'IBM Plex Sans', sans-serif; position: relative; @@ -124,7 +121,6 @@ const TemplateLibraryComponent = (props) => { const filtered = filterTemplates(props.templates); return ( -
Clause Templates @@ -152,7 +148,6 @@ const TemplateLibraryComponent = (props) => { ))} :

No results found

} - ); }; From b6eabe52eb675608936db5e8a8ff25d50044e014 Mon Sep 17 00:00:00 2001 From: Lenvin Gonsalves Date: Sat, 25 Apr 2020 00:11:08 +0530 Subject: [PATCH 7/8] refactor(*): add CiceroUI as common className - i320 Signed-off-by: Lenvin Gonsalves --- src/ErrorLogger/index.js | 2 +- src/Navigation/index.js | 3 ++- src/TemplateLibrary/index.js | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/ErrorLogger/index.js b/src/ErrorLogger/index.js index 751c6760..a279883f 100644 --- a/src/ErrorLogger/index.js +++ b/src/ErrorLogger/index.js @@ -48,7 +48,7 @@ const ErrorLogger = (props) => { key={ACT.keySwitchCase(errorValue)} />); return ( -
+
{errorsVisible && {errorComponentGenerator(errors)} diff --git a/src/Navigation/index.js b/src/Navigation/index.js index 5602b400..43361a32 100644 --- a/src/Navigation/index.js +++ b/src/Navigation/index.js @@ -26,7 +26,8 @@ const NavigationComponent = (props) => { const filesState = () => navState === FILES; const navigationWrapperProps = { - id: 'NavigationWrapperComponent' + id: 'NavigationWrapperComponent', + className : 'ciceroUI' }; const switchProps = { diff --git a/src/TemplateLibrary/index.js b/src/TemplateLibrary/index.js index 94ba399d..f662d947 100644 --- a/src/TemplateLibrary/index.js +++ b/src/TemplateLibrary/index.js @@ -121,7 +121,7 @@ const TemplateLibraryComponent = (props) => { const filtered = filterTemplates(props.templates); return ( - +
Clause Templates From 3b7c7eaef5f3d60da214dbbbcb0b3591feb4d0f7 Mon Sep 17 00:00:00 2001 From: Lenvin Gonsalves Date: Tue, 5 May 2020 16:03:14 +0530 Subject: [PATCH 8/8] refactor(*): rename classNames - i320 Signed-off-by: Lenvin Gonsalves --- src/ErrorLogger/Error.js | 12 ++++++------ src/ErrorLogger/index.js | 6 +++--- src/ErrorLogger/styles.js | 8 ++++---- src/Navigation/ComponentSwitch.js | 4 ++-- src/Navigation/generators.js | 8 ++++---- src/TemplateLibrary/Components/TemplateCard.js | 6 +++--- src/TemplateLibrary/index.js | 4 ++-- 7 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/ErrorLogger/Error.js b/src/ErrorLogger/Error.js index 64b8380b..d89d5d1d 100644 --- a/src/ErrorLogger/Error.js +++ b/src/ErrorLogger/Error.js @@ -30,23 +30,23 @@ const ErrorComponent = (props) => { }; return ( - + - - errorNav(error)} className='errorFile'> + + errorNav(error)} className='errorLoggerError'> {ACT.typeSwitchCase(error || {})} - + {ACT.overalltypeSwitchCase(error).name || 'Unknown Error'}: - + {ACT.truncateMessage(ACT.overalltypeSwitchCase(error).shortMessage || 'Unknown Error')} {specErrorVisible - && + && {ACT.overalltypeSwitchCase(error).message || 'Unknown Error'} } diff --git a/src/ErrorLogger/index.js b/src/ErrorLogger/index.js index a279883f..2b41d605 100644 --- a/src/ErrorLogger/index.js +++ b/src/ErrorLogger/index.js @@ -50,15 +50,15 @@ const ErrorLogger = (props) => { return (
{errorsVisible - && + && {errorComponentGenerator(errors)} } - + {ACT.gtZero(errorLength) && } {ACT.errorArrayLength(errors)} {ACT.isMultipleErrors(errors)} - +
); diff --git a/src/ErrorLogger/styles.js b/src/ErrorLogger/styles.js index eb9034b1..6b070924 100644 --- a/src/ErrorLogger/styles.js +++ b/src/ErrorLogger/styles.js @@ -13,7 +13,7 @@ export const ErrorDisplay = styled.div` box-shadow: 0 -2px 20px 0 rgba(20,31,60,0.65); `; -ErrorDisplay.displayName = 'ErrorDisplay'; +ErrorDisplay.displayName = 'errorLoggerDisplay'; export const ErrorsHeader = styled.div` width: 100%; @@ -63,7 +63,7 @@ export const ErrorBarArrow = styled.div` ? '0' : (`7px solid #7B9AD1`))}; `; -ErrorBarArrow.displayName = 'ErrorBarArrow'; +ErrorBarArrow.displayName = 'errorLoggerBarArrow'; export const ErrorComponent = styled.div` width: 100%; @@ -79,7 +79,7 @@ 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; @@ -121,7 +121,7 @@ export const ErrorShortMessage = styled.div` padding: 5px; `; -ErrorShortMessage.displayName = 'ErrorShortMessage'; +ErrorShortMessage.displayName = 'errorLoggerErrorShortMessage'; export const ErrorFullMessage = styled.div` grid-area: errorFull; diff --git a/src/Navigation/ComponentSwitch.js b/src/Navigation/ComponentSwitch.js index 31fc3cc2..e27360b0 100644 --- a/src/Navigation/ComponentSwitch.js +++ b/src/Navigation/ComponentSwitch.js @@ -33,10 +33,10 @@ const NavigationComponent = (props) => { return ( - + NAVIGATION - + FILES diff --git a/src/Navigation/generators.js b/src/Navigation/generators.js index 121fab9e..05acf533 100644 --- a/src/Navigation/generators.js +++ b/src/Navigation/generators.js @@ -23,7 +23,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - className='navHeaderClause' + className='navigationHeaderClause' > {text} @@ -33,7 +33,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - className='navHeaderH1' + className='navigationHeaderH1' > {text} @@ -43,7 +43,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - className='navHeaderH2' + className='navigationHeaderH2' > {text} @@ -53,7 +53,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - className='navHeaderH3' + className='navigationHeaderH3' > {text} diff --git a/src/TemplateLibrary/Components/TemplateCard.js b/src/TemplateLibrary/Components/TemplateCard.js index 52e9af36..c750b82d 100644 --- a/src/TemplateLibrary/Components/TemplateCard.js +++ b/src/TemplateLibrary/Components/TemplateCard.js @@ -47,11 +47,11 @@ const DescriptionContainer = styled(Card.Description)` const TemplateCard = props => ( - + <Title className='templateLibraryCardTitle'> { props.template.displayName ? props.template.displayName @@ -59,7 +59,7 @@ const TemplateCard = props => ( } <Version>v {props.template.version}</Version> - + {props.template.description} diff --git a/src/TemplateLibrary/index.js b/src/TemplateLibrary/index.js index f662d947..be50bcd9 100644 --- a/src/TemplateLibrary/index.js +++ b/src/TemplateLibrary/index.js @@ -132,11 +132,11 @@ const TemplateLibraryComponent = (props) => {
- + {props.addTemp && } - {filtered && filtered.length ? + {filtered && filtered.length ? {_.sortBy(filtered, ['name']).map(t => (