From 9612f6cad2b006bec6d4139dd9b079a9e7299b26 Mon Sep 17 00:00:00 2001 From: irmerk Date: Tue, 2 Jun 2020 14:13:02 -0400 Subject: [PATCH 1/6] style(Navigation): adjust wordwrap Signed-off-by: irmerk --- packages/cicero-ui/src/lib/Navigation/styles.js | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/cicero-ui/src/lib/Navigation/styles.js b/packages/cicero-ui/src/lib/Navigation/styles.js index 79844e42..7d4f7567 100644 --- a/packages/cicero-ui/src/lib/Navigation/styles.js +++ b/packages/cicero-ui/src/lib/Navigation/styles.js @@ -7,7 +7,6 @@ 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'}; overflow-y: inherit; @@ -49,8 +48,6 @@ export const Files = styled(Title)` /* Contract Navigation */ export const ContractHeaders = styled.div` - overflow: hidden; - white-space: nowrap; padding-top: 10px; grid-area: body; @@ -61,16 +58,13 @@ export const ContractHeaders = styled.div` `; export const HeaderOne = styled.div` - overflow: hidden; - text-overflow: ellipsis; - margin-top: 2px; - margin-bottom: 2px; - height: 24px; + margin-top: 0.5em; + margin-bottom: 0.5em; color: ${props => props.headerColor || '#B9BCC4'}; font-family: "IBM Plex Sans"; font-size: 1em; letter-spacing: -0.5px; - line-height: 24px; + line-height: 18px; &:hover { cursor: pointer; text-decoration: underline; From a9bba4087ef40e07a6982d22719aea3e59fc329a Mon Sep 17 00:00:00 2001 From: irmerk Date: Tue, 2 Jun 2020 14:50:23 -0400 Subject: [PATCH 2/6] refactor(Navigation): remove prop dependency - I70 Signed-off-by: irmerk --- package-lock.json | 2 +- packages/cicero-ui/src/lib/Library/README.md | 55 +++++++------- .../src/lib/Navigation/ComponentSwitch.js | 24 ++---- .../src/lib/Navigation/Files/index.js | 14 ---- .../cicero-ui/src/lib/Navigation/README.md | 75 +++++-------------- .../src/lib/Navigation/generators.js | 8 +- .../cicero-ui/src/lib/Navigation/index.js | 65 +--------------- .../cicero-ui/src/lib/Navigation/styles.js | 27 ++++--- 8 files changed, 74 insertions(+), 196 deletions(-) diff --git a/package-lock.json b/package-lock.json index f3b54209..4a9fd9c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@accordproject/web-components", - "version": "0.92.1", + "version": "0.92.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/cicero-ui/src/lib/Library/README.md b/packages/cicero-ui/src/lib/Library/README.md index b7087e92..954be4c2 100644 --- a/packages/cicero-ui/src/lib/Library/README.md +++ b/packages/cicero-ui/src/lib/Library/README.md @@ -24,35 +24,36 @@ const LibraryComponent = props => ( ### Props -- `items` [REQUIRED] : An `array` which contains library item objects. Required keys are: `uri`, `name`, `version` and `description`. -Optional keys are: `displayName`, `logoUrl` and `itemType` (for heterogeneous libraries) -- `onPrimaryButtonClick` [REQUIRED] : A `function` callback which is called when a primary button in a library item card is clicked. A single argument is passed - the item object. -- `onSecondaryButtonClick` [REQUIRED] : A `function` callback which is called when a secondary button in a library item card is clicked. A single argument is passed - the item object. -- `onUploadItem` [OPTIONAL] : A `function` callback which is called when a link to upload a new library item is clicked. -- `onImportItem` [OPTIONAL] : A `function` callback which is called when a link to import a new library item is clicked. -- `onAddItem` [OPTIONAL] : A `function` callback which is called when a link to add a new library item is clicked. -- `itemTypes` [OPTIONAL] : An `array` of item types, default: `[{ name: 'CLAUSE TEMPLATE', type: 'template', filterName: 'Templates' }]`. -`name` field is shown on the second line of the library card. -`type` field corresponds to `item.itemType` attribute and is used to match a given `item` to its itemType in the `itemTypes` array. -`filterName` field is shown as a label for the type filter checkbox. This filter is ommited if the library is homogeneous. +- `items` [REQUIRED]: An `array` which contains library item objects. Required keys are: `uri`, `name`, `version` and `description` + - Optional keys are: `displayName`, `logoUrl` and `itemType` (for heterogeneous libraries) +- `onPrimaryButtonClick` [REQUIRED]: A `function` callback which is called when a primary button in a library item card is clicked. A single argument is passed - the item object +- `onSecondaryButtonClick` [REQUIRED]: A `function` callback which is called when a secondary button in a library item card is clicked. A single argument is passed - the item object +- `onUploadItem` [OPTIONAL]: A `function` callback which is called when a link to upload a new library item is clicked +- `onImportItem` [OPTIONAL]: A `function` callback which is called when a link to import a new library item is clicked +- `onAddItem` [OPTIONAL]: A `function` callback which is called when a link to add a new library item is clicked +- `itemTypes` [OPTIONAL]: An `array` of item types, default + - `[{ name: 'CLAUSE TEMPLATE', type: 'template', filterName: 'Templates' }]` + - `name` field is shown on the second line of the library card + - `type` field corresponds to `item.itemType` attribute and is used to match a given `item` to its itemType in the `itemTypes` array + - `filterName` field is shown as a label for the type filter checkbox. This filter is ommited if the library is homogeneous ### Custom styling The component provides classes which can be used to apply custom styles to its individual parts. -- `cicero-ui__library-search-input` : search input. -- `cicero-ui__library-cards-wrapper` : library cards wrapper element. -- `cicero-ui__library-card` : library card. An additional class of `item.itemType` will be added to the card, -so different CSS selectors can be used based on the item's `itemType` value. -- `cicero-ui__library-card-content` : content element inside a library item card. -- `cicero-ui__library-card-logo` : logo element inside a library item card. -- `cicero-ui__library-card-header` : header element inside a library item card. -- `cicero-ui__library-card-meta` : meta element inside a library item card. -- `cicero-ui__library-card-type` : item type name element inside a library item card. -- `cicero-ui__library-card-item-version` : version element inside a library item card. -- `cicero-ui__library-card-actions` : actions element inside a library item card. -- `cicero-ui__library-card-primary-btn` : primary button inside a library item card. -- `cicero-ui__library-card-secondary-btn` : secondary button inside a library item card. -- `cicero-ui__library-add-item-button` : add new library item button. -- `cicero-ui__library-upload-button` : upload new library item button. -- `cicero-ui__library-import-button` : import new library item button. +- `cicero-ui__library-search-input`: Search input +- `cicero-ui__library-cards-wrapper`: Library cards wrapper element +- `cicero-ui__library-card`: Library card. An additional class of `item.itemType` will be added to the card, +so different CSS selectors can be used based on the item's `itemType` value +- `cicero-ui__library-card-content`: Content element inside a library item card +- `cicero-ui__library-card-logo`: Logo element inside a library item card +- `cicero-ui__library-card-header`: Header element inside a library item card +- `cicero-ui__library-card-meta`: Meta element inside a library item card +- `cicero-ui__library-card-type`: Item type name element inside a library item card +- `cicero-ui__library-card-item-version`: Version element inside a library item card +- `cicero-ui__library-card-actions`: Actions element inside a library item card +- `cicero-ui__library-card-primary-btn`: Primary button inside a library item card +- `cicero-ui__library-card-secondary-btn`: Secondary button inside a library item card +- `cicero-ui__library-add-item-button`: Add new library item button +- `cicero-ui__library-upload-button`: Upload new library item button +- `cicero-ui__library-import-button`: Import new library item button diff --git a/packages/cicero-ui/src/lib/Navigation/ComponentSwitch.js b/packages/cicero-ui/src/lib/Navigation/ComponentSwitch.js index 9f053feb..00b33c05 100644 --- a/packages/cicero-ui/src/lib/Navigation/ComponentSwitch.js +++ b/packages/cicero-ui/src/lib/Navigation/ComponentSwitch.js @@ -15,23 +15,19 @@ import { NAVIGATION, FILES } from './constants'; * @param {*} props */ const NavigationComponent = (props) => { - const navigationSwitchProps = { - headerFont: props.headerFont, - titleActive: props.titleActive, - titleInactive: props.titleInactive, - filesVisible: props.filesVisible, - navState: props.navState, - }; - const navigationProps = { - id: 'ContractNavigationSwitchComponent', - ...navigationSwitchProps, + className: props.navState === 'NAVIGATION' + ? 'cicero-ui__navigation-switch-title-active' + : 'cicero-ui__navigation-switch-title-inactive', + navState: props.navState, onClick: () => props.setNavState(NAVIGATION), }; const fileProps = { - id: 'ContractFilesSwitchComponent', - ...navigationSwitchProps, + className: props.navState === 'FILES' + ? 'cicero-ui__navigation-switch-title-active' + : 'cicero-ui__navigation-switch-title-inactive', + navState: props.navState, onClick: () => props.setNavState(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/packages/cicero-ui/src/lib/Navigation/Files/index.js b/packages/cicero-ui/src/lib/Navigation/Files/index.js index 49d9f649..47e66f0a 100644 --- a/packages/cicero-ui/src/lib/Navigation/Files/index.js +++ b/packages/cicero-ui/src/lib/Navigation/Files/index.js @@ -1,20 +1,6 @@ /* React */ import React from 'react'; -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/packages/cicero-ui/src/lib/Navigation/README.md b/packages/cicero-ui/src/lib/Navigation/README.md index f470f9c4..bd5ea2da 100644 --- a/packages/cicero-ui/src/lib/Navigation/README.md +++ b/packages/cicero-ui/src/lib/Navigation/README.md @@ -10,44 +10,20 @@ npm install @accordproject/cicero-ui import { Navigation } from '@accordproject/cicero-ui'; const navigateToHeader = // Insert your navigation function here -const navigationPropsInput = { - NAVIGATE_SWITCH_TITLE_ACTIVE_COLOR (string), - NAVIGATE_SWITCH_TITLE_INACTIVE_COLOR (string), - NAVIGATE_SWITCH_TITLE_FONT_FAMILY (string), - NAVIGATE_SWITCH_FILES_VISIBLE (boolean) (REQUIRED), - - NAVIGATION_POSITION (string), - NAVIGATION_TOP_VALUE (string), - NAVIGATION_MAX_HEIGHT (string), - NAVIGATION_WIDTH (string), - NAVIGATION_BACKGROUND_COLOR (string), - - CONTRACT_NAVIGATION_HEADER_COLOR (string), - CONTRACT_NAVIGATION_CLAUSE_COLOR (string), - CONTRACT_NAVIGATION_CLAUSE_HEADER_COLOR (string), - - CLAUSE_NAVIGATION_TITLE_COLOR (string), - CLAUSE_NAVIGATION_TITLE_HOVER_COLOR (string), - CLAUSE_NAVIGATION_EXPANSION_ARROW_COLOR (string), - CLAUSE_NAVIGATION_EXPANSION_ARROW_HOVER_COLOR (string), - CLAUSE_NAVIGATION_FILE_DELETE_COLOR (string), - CLAUSE_NAVIGATION_FILE_DELETE_HOVER_COLOR (string), - CLAUSE_NAVIGATION_FILE_ADD_COLOR (string), - CLAUSE_NAVIGATION_FILE_ADD_HOVER_COLOR (string), -} const NavigationContainer = props => ( ); ``` -### Props +## Props + +### Expected Properties -#### Expected to be Provided +#### Values - `headers` : An `array` which contains header objects, each appearing as such: @@ -59,37 +35,20 @@ const NavigationContainer = props => ( }; ``` -#### Require Provision - -- `navigationProps` : An optional `object`, see below. -- `navigateHeader` : An optional `function` which will navigate to the corresponding header. - -### Specifications - -The `FILES` section of the navigation requires a `boolean` to render or not: -- `NAVIGATE_SWITCH_FILES_VISIBLE` +#### Functionality -You can style the navigation component, as well as the individual headers. An object may be passed down this component with the following possible CSS inputs as strings: -- `NAVIGATE_SWITCH_TITLE_ACTIVE_COLOR` -- `NAVIGATE_SWITCH_TITLE_INACTIVE_COLOR` -- `NAVIGATE_SWITCH_TITLE_FONT_FAMILY` -- `NAVIGATE_SWITCH_FILES_VISIBLE` +- `navigateHeader` : An optional `function` which will navigate to the corresponding header -- `NAVIGATION_POSITION` -- `NAVIGATION_TOP_VALUE` -- `NAVIGATION_MAX_HEIGHT` -- `NAVIGATION_WIDTH` -- `NAVIGATION_BACKGROUND_COLOR` +### Custom Styling -- `CONTRACT_NAVIGATION_HEADER_COLOR` -- `CONTRACT_NAVIGATION_CLAUSE_COLOR` -- `CONTRACT_NAVIGATION_CLAUSE_HEADER_COLOR` +The component provides classes which can be used to apply custom styles to its individual parts. -- `CLAUSE_NAVIGATION_TITLE_COLOR` -- `CLAUSE_NAVIGATION_TITLE_HOVER_COLOR` -- `CLAUSE_NAVIGATION_EXPANSION_ARROW_COLOR` -- `CLAUSE_NAVIGATION_EXPANSION_ARROW_HOVER_COLOR` -- `CLAUSE_NAVIGATION_FILE_DELETE_COLOR` -- `CLAUSE_NAVIGATION_FILE_DELETE_HOVER_COLOR` -- `CLAUSE_NAVIGATION_FILE_ADD_COLOR` -- `CLAUSE_NAVIGATION_FILE_ADD_HOVER_COLOR` \ No newline at end of file +- `cicero-ui__navigation-wrapper`: Component wrapper +- `cicero-ui__navigation-contract`: Contract navigation component +- `cicero-ui__navigation-file`: File navigation component +- `cicero-ui__navigation-switch-title-active`: Title for active component +- `cicero-ui__navigation-switch-title-inactive`: Title for inactive component +- `cicero-ui__navigation-header-clause`: Clause template heading +- `cicero-ui__navigation-header-one`: Header one heading +- `cicero-ui__navigation-header-two`: Header two heading +- `cicero-ui__navigation-header-three`: Header three heading \ No newline at end of file diff --git a/packages/cicero-ui/src/lib/Navigation/generators.js b/packages/cicero-ui/src/lib/Navigation/generators.js index 9ddd9f08..799a2736 100644 --- a/packages/cicero-ui/src/lib/Navigation/generators.js +++ b/packages/cicero-ui/src/lib/Navigation/generators.js @@ -23,7 +23,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - {...props.styleProps} + className='cicero-ui__navigation-header-clause' > {text} @@ -33,7 +33,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - {...props.styleProps} + className='cicero-ui__navigation-header-one' > {text} @@ -43,7 +43,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - {...props.styleProps} + className='cicero-ui__navigation-header-two' > {text} @@ -53,7 +53,7 @@ export const headerGenerator = (props) => { navigateHeader(key, type)} - {...props.styleProps} + className='cicero-ui__navigation-header-three' > {text} diff --git a/packages/cicero-ui/src/lib/Navigation/index.js b/packages/cicero-ui/src/lib/Navigation/index.js index 4dfab6ae..04e67e02 100644 --- a/packages/cicero-ui/src/lib/Navigation/index.js +++ b/packages/cicero-ui/src/lib/Navigation/index.js @@ -20,61 +20,27 @@ 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, - }; - 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 ; + return ; } if (filesState()) { - return ; + return ; } return 'Select Navigation or Files'; }; return ( - + {navigationGenerator(props)} @@ -84,31 +50,6 @@ const NavigationComponent = (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/packages/cicero-ui/src/lib/Navigation/styles.js b/packages/cicero-ui/src/lib/Navigation/styles.js index 7d4f7567..34776263 100644 --- a/packages/cicero-ui/src/lib/Navigation/styles.js +++ b/packages/cicero-ui/src/lib/Navigation/styles.js @@ -4,10 +4,9 @@ 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'}; - background-color: ${props => props.backgroundColor || 'inherit'}; + position: static; + max-height: 80vh; + background-color: inherit; overflow-y: inherit; display: grid; @@ -22,10 +21,10 @@ export const Title = styled.a` color: #FFFFFF; font-size: 1em; font-weight: bold; - font-family: ${props => props.headerFont || 'serif'}; + font-family: serif; &:hover { - cursor: ${props => (props.filesVisible ? 'pointer' : 'auto')}; - color: ${props => props.titleActive || '#19C6C7'}; + cursor: pointer; + color: #19C6C7; } `; @@ -33,16 +32,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 */ @@ -60,7 +59,7 @@ export const ContractHeaders = styled.div` export const HeaderOne = styled.div` margin-top: 0.5em; margin-bottom: 0.5em; - color: ${props => props.headerColor || '#B9BCC4'}; + color: #B9BCC4; font-family: "IBM Plex Sans"; font-size: 1em; letter-spacing: -0.5px; @@ -80,6 +79,6 @@ export const HeaderThree = styled(HeaderOne)` `; export const HeaderClause = styled(HeaderOne)` - color: ${props => props.clauseColor || '#FFFFFF'} !important; + color: #FFFFFF !important; font-weight: bold; `; From 7d790127bf50b393503890b48e766fb7f68c8552 Mon Sep 17 00:00:00 2001 From: irmerk Date: Tue, 2 Jun 2020 15:15:01 -0400 Subject: [PATCH 3/6] refactor(ErrorLogger): remove prop dependency - I70 Signed-off-by: irmerk --- .../cicero-ui/src/lib/ErrorLogger/Error.js | 46 +++---------- .../cicero-ui/src/lib/ErrorLogger/README.md | 68 ++++++------------- .../cicero-ui/src/lib/ErrorLogger/index.js | 35 ++-------- .../cicero-ui/src/lib/ErrorLogger/styles.js | 54 +++++++-------- packages/cicero-ui/src/lib/Library/README.md | 2 +- 5 files changed, 61 insertions(+), 144 deletions(-) diff --git a/packages/cicero-ui/src/lib/ErrorLogger/Error.js b/packages/cicero-ui/src/lib/ErrorLogger/Error.js index fc925461..ed48811c 100644 --- a/packages/cicero-ui/src/lib/ErrorLogger/Error.js +++ b/packages/cicero-ui/src/lib/ErrorLogger/Error.js @@ -9,47 +9,35 @@ 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, + className: 'cicero-ui__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, + className: specErrorVisible + ? 'cicero-ui__error-arrow-expanded' + : 'cicero-ui__error-arrow-collapsed' }; return ( - + - errorNav(error)} > + errorNav(error)} className="cicero-ui__error-file"> {ACT.typeSwitchCase(error || {})} @@ -57,12 +45,12 @@ const ErrorComponent = (props) => { {ACT.overalltypeSwitchCase(error).name || 'Unknown Error'}: - + {ACT.truncateMessage(ACT.overalltypeSwitchCase(error).shortMessage || 'Unknown Error')} {specErrorVisible - && + && {ACT.overalltypeSwitchCase(error).message || 'Unknown Error'} } @@ -72,22 +60,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/packages/cicero-ui/src/lib/ErrorLogger/README.md b/packages/cicero-ui/src/lib/ErrorLogger/README.md index ce33f68e..ce5aed90 100644 --- a/packages/cicero-ui/src/lib/ErrorLogger/README.md +++ b/packages/cicero-ui/src/lib/ErrorLogger/README.md @@ -11,61 +11,35 @@ import { ErrorLogger } from '@accordproject/cicero-ui'; const navigateToClauseError = // Insert your navigation function here. -const errorsPropsObject = { - ERRORS_HEADER_BACKGROUND (string), - ERRORS_HEADER_BACKGROUND_HOVER (string), - ERRORS_HEADER_EXPAND_ARROW (string), - ERRORS_HEADER_BORDER_TOP (string), - ERRORS_HEADER_SHADOW (string), - ERRORS_DISPLAY_BACKGROUND (string), - ERRORS_DISPLAY_SHADOW (string), - ERRORS_DISPLAY_Z_INDEX (string), - ERROR_BORDER_BOTTOM (string), - ERROR_EXPAND_ARROW (string), - ERROR_FILE (string), - ERROR_FILE_HOVER (string), - ERROR_TYPE (string), - ERROR_FULL_MESSAGE (string), - ERROR_SHORT_MESSAGE (string), -}; - const ErrorContainer = props => ( - + ); ``` -### Props +## Props + +### Expected Properties -#### Expected to be Provided +#### Values - `errors` : An `object` with unique key and error's data. -#### Require Provision +#### Functionality -- `errorsProps` : An optional `object`, see below. - `errorNav` : An optional `function` which will navigate to the corresponding error. -### Specifications - -This component is built to have the following dimensions: - -```js -width: '100%'; -``` - -You can style the error component, as well as the individual errors. An object may be passed down this component with the following possible CSS inputs as strings: -- `ERRORS_HEADER_BACKGROUND` -- `ERRORS_HEADER_BACKGROUND_HOVER` -- `ERRORS_HEADER_EXPAND_ARROW` -- `ERRORS_HEADER_BORDER_TOP` -- `ERRORS_HEADER_SHADOW` -- `ERRORS_DISPLAY_BACKGROUND` -- `ERRORS_DISPLAY_SHADOW` -- `ERRORS_DISPLAY_Z_INDEX` -- `ERROR_BORDER_BOTTOM` -- `ERROR_EXPAND_ARROW` -- `ERROR_FILE` -- `ERROR_FILE_HOVER` -- `ERROR_TYPE` -- `ERROR_FULL_MESSAGE` -- `ERROR_SHORT_MESSAGE` +### Custom Styling + +The component provides classes which can be used to apply custom styles to its individual parts. + +- `cicero-ui__error-wrapper`: Component wrapper +- `cicero-ui__error-component`: Individual error component +- `cicero-ui__error-header`: Summary of number of errors +- `cicero-ui__error-display`: Component displaying when expanded +- `cicero-ui__error-bar-arrow`: Arrow on the right to indicate expand / collapse display +- `cicero-ui__error-arrow-div`: Arrow to indicate expand / collapse individual error +- `cicero-ui__error-symbol`: Symbol indicating errors exist +- `cicero-ui__error-file`: File in which error stems from +- `cicero-ui__error-type`: Type of error generated +- `cicero-ui__error-short-message`: Short summary +- `cicero-ui__error-full-message`: Detailed summary \ No newline at end of file diff --git a/packages/cicero-ui/src/lib/ErrorLogger/index.js b/packages/cicero-ui/src/lib/ErrorLogger/index.js index b3f5e76a..4bcdba5e 100644 --- a/packages/cicero-ui/src/lib/ErrorLogger/index.js +++ b/packages/cicero-ui/src/lib/ErrorLogger/index.js @@ -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); @@ -23,27 +22,19 @@ const ErrorLogger = (props) => { }; const headerProps = { - id: 'ErrorComponentHeader', + className: 'cicero-ui__error-header', 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', + className: 'cicero-ui__error-display', 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, + className: 'cicero-ui__error-bar-arrow', }; const symbolProps = { @@ -53,13 +44,12 @@ const ErrorLogger = (props) => { const errorComponentGenerator = errors => Object.values(errors) .map(errorValue => ); return ( -
+
{errorsVisible && {errorComponentGenerator(errors)} @@ -78,23 +68,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; diff --git a/packages/cicero-ui/src/lib/ErrorLogger/styles.js b/packages/cicero-ui/src/lib/ErrorLogger/styles.js index 6ef26149..cb00b09e 100644 --- a/packages/cicero-ui/src/lib/ErrorLogger/styles.js +++ b/packages/cicero-ui/src/lib/ErrorLogger/styles.js @@ -9,15 +9,13 @@ 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 = 'cicero-ui__error-display'; export const ErrorsHeader = styled.div` - z-index: ${props => props.zIndexInput || 'auto'}; width: 100%; position: fixed; transition: 1s; @@ -25,9 +23,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,40 +35,40 @@ export const ErrorsHeader = styled.div` line-height: 20px; &:hover { - background-color: ${props => props.headerBackgroundHover || '#364C77'}; + background-color: #364C77; cursor: pointer; } `; -ErrorsHeader.displayName = 'ErrorsHeader'; +ErrorsHeader.displayName = 'cicero-ui__error-header'; export const ErrorSymbol = styled(Icon)` vertical-align: middle; `; -ErrorSymbol.displayName = 'ErrorSymbol'; +ErrorSymbol.displayName = 'cicero-ui__error-symbol'; export const ErrorBarArrow = styled.div` float: right; 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 = 'cicero-ui__error-bar-arrow'; 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; @@ -81,12 +79,12 @@ export const ErrorComponent = styled.div` grid-template-rows: min-content auto; `; -ErrorComponent.displayName = 'ErrorComponent'; +ErrorComponent.displayName = 'cicero-ui__error-component'; 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,15 +93,15 @@ export const ErrorFile = styled.a` align-self: center; &:hover { cursor: pointer; - color: ${props => props.errorFileHover || '#0066CC'}; + color: #0066CC; } `; -ErrorFile.displayName = 'ErrorFile'; +ErrorFile.displayName = 'cicero-ui__error-file'; 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; @@ -111,11 +109,11 @@ export const ErrorType = styled.div` padding: 5px; `; -ErrorType.displayName = 'ErrorType'; +ErrorType.displayName = 'cicero-ui__error-type'; 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; @@ -123,17 +121,17 @@ export const ErrorShortMessage = styled.div` padding: 5px; `; -ErrorShortMessage.displayName = 'ErrorShortMessage'; +ErrorShortMessage.displayName = 'cicero-ui__error-short-message'; 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; `; -ErrorFullMessage.displayName = 'ErrorFullMessage'; +ErrorFullMessage.displayName = 'cicero-ui__error-full-message'; export const ArrowDiv = styled.div` grid-area: errorArrow; @@ -143,18 +141,18 @@ 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; } `; -ArrowDiv.displayName = 'ArrowDiv'; +ArrowDiv.displayName = 'cicero-ui__error-arrow-div'; diff --git a/packages/cicero-ui/src/lib/Library/README.md b/packages/cicero-ui/src/lib/Library/README.md index 954be4c2..8e290921 100644 --- a/packages/cicero-ui/src/lib/Library/README.md +++ b/packages/cicero-ui/src/lib/Library/README.md @@ -37,7 +37,7 @@ const LibraryComponent = props => ( - `type` field corresponds to `item.itemType` attribute and is used to match a given `item` to its itemType in the `itemTypes` array - `filterName` field is shown as a label for the type filter checkbox. This filter is ommited if the library is homogeneous -### Custom styling +### Custom Styling The component provides classes which can be used to apply custom styles to its individual parts. From 790b84a77f619fcaa6d9fb62dbe1494164d05e99 Mon Sep 17 00:00:00 2001 From: irmerk Date: Tue, 2 Jun 2020 15:31:44 -0400 Subject: [PATCH 4/6] refactor(Storybook): remove prop dependency - I70 Signed-off-by: irmerk --- .../cicero-ui/src/lib/Navigation/styles.js | 8 ++- .../src/stories/5-ErrorLogger.stories.js | 20 +----- .../src/stories/6-Navigation.stories.js | 70 ++++++------------- 3 files changed, 29 insertions(+), 69 deletions(-) diff --git a/packages/cicero-ui/src/lib/Navigation/styles.js b/packages/cicero-ui/src/lib/Navigation/styles.js index 34776263..608466bc 100644 --- a/packages/cicero-ui/src/lib/Navigation/styles.js +++ b/packages/cicero-ui/src/lib/Navigation/styles.js @@ -29,7 +29,9 @@ export const Title = styled.a` `; export const Navigation = styled(Title)` - display: grid; + display: ${props => (props.navState === 'NAVIGATION' + ? 'grid' + : 'none')}; grid-area: navigation; color: ${props => (props.navState === 'NAVIGATION' ? '#19C6C7' @@ -37,7 +39,9 @@ export const Navigation = styled(Title)` `; export const Files = styled(Title)` - display: grid; + display: ${props => (props.navState === 'FILES' + ? 'grid' + : 'none')}; grid-area: files; color: ${props => (props.navState === 'FILES' ? '#19C6C7' diff --git a/packages/storybook/src/stories/5-ErrorLogger.stories.js b/packages/storybook/src/stories/5-ErrorLogger.stories.js index 00632b47..3b37ee33 100644 --- a/packages/storybook/src/stories/5-ErrorLogger.stories.js +++ b/packages/storybook/src/stories/5-ErrorLogger.stories.js @@ -1,7 +1,7 @@ import React from "react"; import { withA11y } from "@storybook/addon-a11y"; import { ErrorLogger } from '@accordproject/cicero-ui'; -import { withKnobs, text } from "@storybook/addon-knobs"; +import { withKnobs } from "@storybook/addon-knobs"; export default { title: 'Error Logger' }; @@ -11,29 +11,11 @@ export const errorLogger = () => { modelError: "Some Error" } }; - const errorsPropsObject = { - ERRORS_HEADER_BACKGROUND: text("ERRORS_HEADER_BACKGROUND", ""), - ERRORS_HEADER_BACKGROUND_HOVER: text("ERRORS_HEADER_BACKGROUND_HOVER", ""), - ERRORS_HEADER_EXPAND_ARROW: text("ERRORS_HEADER_EXPAND_ARROW", ""), - ERRORS_HEADER_BORDER_TOP: text("ERRORS_HEADER_BORDER_TOP", ""), - ERRORS_HEADER_SHADOW: text("ERRORS_HEADER_SHADOW", ""), - ERRORS_DISPLAY_BACKGROUND: text("ERRORS_DISPLAY_BACKGROUND", ""), - ERRORS_DISPLAY_SHADOW: text("ERRORS_DISPLAY_SHADOW", ""), - ERRORS_DISPLAY_Z_INDEX: text("ERRORS_DISPLAY_Z_INDEX", ""), - ERROR_BORDER_BOTTOM: text("ERROR_BORDER_BOTTOM", ""), - ERROR_EXPAND_ARROW: text("ERROR_EXPAND_ARROW", ""), - ERROR_FILE: text("ERROR_FILE", ""), - ERROR_FILE_HOVER: text("ERROR_FILE_HOVER", ""), - ERROR_TYPE: text("ERROR_TYPE", ""), - ERROR_FULL_MESSAGE: text("ERROR_FULL_MESSAGE", ""), - ERROR_SHORT_MESSAGE: text("ERROR_SHORT_MESSAGE", "") - }; const mockNavigateToClauseError = () => alert('Insert your navigation function here.') return ( ); }; diff --git a/packages/storybook/src/stories/6-Navigation.stories.js b/packages/storybook/src/stories/6-Navigation.stories.js index 1ad8743d..908423cf 100644 --- a/packages/storybook/src/stories/6-Navigation.stories.js +++ b/packages/storybook/src/stories/6-Navigation.stories.js @@ -1,6 +1,6 @@ import React from "react"; import { withA11y } from "@storybook/addon-a11y"; -import { withKnobs, text, boolean } from "@storybook/addon-knobs"; +import { withKnobs, text } from "@storybook/addon-knobs"; import { Navigation } from '@accordproject/cicero-ui'; export default { title: 'Navigation' }; @@ -9,57 +9,31 @@ export const navigation = () => { const mockNavigateToHeader = () =>{ alert('Insert your navigation function here') } - const navigationPropsInput = { - NAVIGATE_SWITCH_TITLE_ACTIVE_COLOR : text('NAVIGATE_SWITCH_TITLE_ACTIVE_COLOR',''), - NAVIGATE_SWITCH_TITLE_INACTIVE_COLOR : text('NAVIGATE_SWITCH_TITLE_INACTIVE_COLOR',''), - NAVIGATE_SWITCH_TITLE_FONT_FAMILY : text('NAVIGATE_SWITCH_TITLE_FONT_FAMILY',''), - NAVIGATE_SWITCH_FILES_VISIBLE : boolean('NAVIGATE_SWITCH_FILES_VISIBLE',false), - - NAVIGATION_POSITION : text('NAVIGATION_POSITION',''), - NAVIGATION_TOP_VALUE : text('NAVIGATION_TOP_VALUE',''), - NAVIGATION_MAX_HEIGHT : text('NAVIGATION_MAX_HEIGHT',''), - NAVIGATION_WIDTH : text('NAVIGATION_WIDTH',''), - NAVIGATION_BACKGROUND_COLOR : text('NAVIGATION_BACKGROUND_COLOR',''), - - CONTRACT_NAVIGATION_HEADER_COLOR : text('CONTRACT_NAVIGATION_HEADER_COLOR',''), - CONTRACT_NAVIGATION_CLAUSE_COLOR : text('CONTRACT_NAVIGATION_CLAUSE_COLOR',''), - CONTRACT_NAVIGATION_CLAUSE_HEADER_COLOR : text('CONTRACT_NAVIGATION_CLAUSE_HEADER_COLOR',''), - - CLAUSE_NAVIGATION_TITLE_COLOR : text('CLAUSE_NAVIGATION_TITLE_COLOR',''), - CLAUSE_NAVIGATION_TITLE_HOVER_COLOR : text('CLAUSE_NAVIGATION_TITLE_HOVER_COLOR',''), - CLAUSE_NAVIGATION_EXPANSION_ARROW_COLOR : text('CLAUSE_NAVIGATION_EXPANSION_ARROW_COLOR',''), - CLAUSE_NAVIGATION_EXPANSION_ARROW_HOVER_COLOR : text('CLAUSE_NAVIGATION_EXPANSION_ARROW_HOVER_COLOR',''), - CLAUSE_NAVIGATION_FILE_DELETE_COLOR : text('CLAUSE_NAVIGATION_FILE_DELETE_COLOR',''), - CLAUSE_NAVIGATION_FILE_DELETE_HOVER_COLOR : text('CLAUSE_NAVIGATION_FILE_DELETE_HOVER_COLOR',''), - CLAUSE_NAVIGATION_FILE_ADD_COLOR : text('CLAUSE_NAVIGATION_FILE_ADD_COLOR',''), - CLAUSE_NAVIGATION_FILE_ADD_HOVER_COLOR : text('CLAUSE_NAVIGATION_FILE_ADD_HOVER_COLOR',''), -} -const headers=[{ - key: '1', - text: text('clause text','clause'), - type: 'clause' -}, -{ - key: '2', - text: text('heading_one text','heading_one'), - type: 'heading_one' -}, -{ - key: '3', - text: text('heading_two text','heading_two'), - type: 'heading_two' -}, -{ - key: '4', - text: text('heading_three text','heading_three'), - type: 'heading_three' -}, -] + const headers=[{ + key: '1', + text: text('clause text','This is a clause heading'), + type: 'clause' + }, + { + key: '2', + text: text('heading_one text','This is a H1 heading'), + type: 'heading_one' + }, + { + key: '3', + text: text('heading_two text','This is a H2 heading'), + type: 'heading_two' + }, + { + key: '4', + text: text('heading_three text','This is a H3 heading'), + type: 'heading_three' + }, + ] return ( ); }; From e68ad089aa6c741ead8371b1e3ad7c47074da4a1 Mon Sep 17 00:00:00 2001 From: irmerk Date: Tue, 2 Jun 2020 17:09:58 -0400 Subject: [PATCH 5/6] chore(cicero-ui): remove unused tests Signed-off-by: irmerk --- .../test/__snapshots__/index.test.js.snap | 165 ------------------ .../src/lib/ContractEditor/test/index.test.js | 49 ------ .../src/lib/ErrorLogger/Error.test.js | 59 ------- .../__snapshots__/Error.test.js.snap | 26 --- .../__snapshots__/index.test.js.snap | 39 ----- .../src/lib/ErrorLogger/actions.test.js | 143 --------------- .../src/lib/ErrorLogger/index.test.js | 65 ------- .../Test/__snapshots__/index.test.js.snap | 124 ------------- .../src/lib/Library/Test/index.test.js | 103 ----------- .../__snapshots__/index.test.js.snap | 101 ----------- .../src/lib/Navigation/index.test.js | 74 -------- .../src/lib/utilities/test/jestEnzyme.js | 4 - 12 files changed, 952 deletions(-) delete mode 100644 packages/cicero-ui/src/lib/ContractEditor/test/__snapshots__/index.test.js.snap delete mode 100644 packages/cicero-ui/src/lib/ContractEditor/test/index.test.js delete mode 100644 packages/cicero-ui/src/lib/ErrorLogger/Error.test.js delete mode 100644 packages/cicero-ui/src/lib/ErrorLogger/__snapshots__/Error.test.js.snap delete mode 100644 packages/cicero-ui/src/lib/ErrorLogger/__snapshots__/index.test.js.snap delete mode 100644 packages/cicero-ui/src/lib/ErrorLogger/actions.test.js delete mode 100644 packages/cicero-ui/src/lib/ErrorLogger/index.test.js delete mode 100644 packages/cicero-ui/src/lib/Library/Test/__snapshots__/index.test.js.snap delete mode 100644 packages/cicero-ui/src/lib/Library/Test/index.test.js delete mode 100644 packages/cicero-ui/src/lib/Navigation/__snapshots__/index.test.js.snap delete mode 100644 packages/cicero-ui/src/lib/Navigation/index.test.js delete mode 100644 packages/cicero-ui/src/lib/utilities/test/jestEnzyme.js diff --git a/packages/cicero-ui/src/lib/ContractEditor/test/__snapshots__/index.test.js.snap b/packages/cicero-ui/src/lib/ContractEditor/test/__snapshots__/index.test.js.snap deleted file mode 100644 index c58c7f78..00000000 --- a/packages/cicero-ui/src/lib/ContractEditor/test/__snapshots__/index.test.js.snap +++ /dev/null @@ -1,165 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` on initialization renders page correctly 1`] = ` - -
-
-

- - - - Heading One - - - -

-

- - - - This is text. This is - - - - - - - - italic - - - - - - - - text. This is - - - - - - - - bold - - - - - - - - text. This is a - - - - - - - - link - - - - - - - - . This is - - - - - - - - inline code - - - - - - - - . Fin. - - - -

-
-
- -`; diff --git a/packages/cicero-ui/src/lib/ContractEditor/test/index.test.js b/packages/cicero-ui/src/lib/ContractEditor/test/index.test.js deleted file mode 100644 index d96e658d..00000000 --- a/packages/cicero-ui/src/lib/ContractEditor/test/index.test.js +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { SlateTransformer } from '@accordproject/markdown-slate'; -import ContractEditor from '../index'; - -const slateTransformer = new SlateTransformer(); - -const defaultContractMarkdown = `# Heading One - This is text. This is *italic* text. This is **bold** text. This is a [link](https://clause.io). This is \`inline code\`. Fin.`; -const slate = slateTransformer.fromMarkdown(defaultContractMarkdown); -const slateFinal = slate.document.children; - - -const props = { - value: slateFinal, - onChange: () => 1, - onClauseUpdated: () => 1, - lockText: true, - readOnly: true, -}; - -const setup = () => { - const ref = React.createRef(); - return render(); -}; - -beforeAll(() => { - window.getSelection = () => ({ - removeAllRanges: () => {} - }); - - global.document.createRange = () => ({ - setStart: () => {}, - setEnd: () => {}, - commonAncestorContainer: { - nodeName: 'BODY', - ownerDocument: document, - }, - }); -}); - -describe('', () => { - describe('on initialization', () => { - it('renders page correctly', () => { - const { baseElement } = setup(); - expect(baseElement).toMatchSnapshot(); - }); - }); -}); diff --git a/packages/cicero-ui/src/lib/ErrorLogger/Error.test.js b/packages/cicero-ui/src/lib/ErrorLogger/Error.test.js deleted file mode 100644 index f0480664..00000000 --- a/packages/cicero-ui/src/lib/ErrorLogger/Error.test.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import toJson from 'enzyme-to-json'; - -import ErrorComponent from './Error'; - -const emptyFunction = jest.fn(() => {}); - -const mockedError = { - clauseId: 'mockedId', - parseError: { - fileLocation: { - end: { - endColumn: 2, - line: 1 - }, - start: { - column: 1 - } - }, - component: 'mockedComponent', - fileName: 'mockedFileName', - name: 'mockedName', - shortMessage: - 'mockedShortMessage', - message: - 'mockedLoginMessage' - } -}; - -const mockedProps = { error: mockedError, errorNav: emptyFunction, errorProps: {} }; - -describe('', () => { - it('should render correct component', () => { - const component = shallow(); - const tree = toJson(component); - expect(tree).toMatchSnapshot(); - }); - it('should show full message after clicking on arrow', () => { - const component = shallow(); - component.find('ArrowDiv').simulate('click'); - expect(component.find('ErrorFullMessage').exists()).toBeTruthy(); - }); - it('should show full message after clicking on error type', () => { - const component = shallow(); - component.find('ErrorType').simulate('click'); - expect(component.find('ErrorFullMessage').exists()).toBeTruthy(); - }); - it('should show full message after clicking on short message', () => { - const component = shallow(); - component.find('ErrorShortMessage').simulate('click'); - expect(component.find('ErrorFullMessage').exists()).toBeTruthy(); - }); - it('should call errorNav function on click', () => { - const component = shallow(); - component.find('ErrorFile').simulate('click'); - expect(emptyFunction).toHaveBeenCalledTimes(1); - }); -}); diff --git a/packages/cicero-ui/src/lib/ErrorLogger/__snapshots__/Error.test.js.snap b/packages/cicero-ui/src/lib/ErrorLogger/__snapshots__/Error.test.js.snap deleted file mode 100644 index 8e8eda51..00000000 --- a/packages/cicero-ui/src/lib/ErrorLogger/__snapshots__/Error.test.js.snap +++ /dev/null @@ -1,26 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should render correct component 1`] = ` - - - - Grammar - - - mockedName - : - - - mockedShortMessage - - -`; diff --git a/packages/cicero-ui/src/lib/ErrorLogger/__snapshots__/index.test.js.snap b/packages/cicero-ui/src/lib/ErrorLogger/__snapshots__/index.test.js.snap deleted file mode 100644 index 2cb23254..00000000 --- a/packages/cicero-ui/src/lib/ErrorLogger/__snapshots__/index.test.js.snap +++ /dev/null @@ -1,39 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` on initialization renders page correctly with errors 1`] = ` -
- - - 1 - - Error - - -
-`; - -exports[` on initialization renders page correctly without errors 1`] = ` -
- - No - - Error - - -
-`; diff --git a/packages/cicero-ui/src/lib/ErrorLogger/actions.test.js b/packages/cicero-ui/src/lib/ErrorLogger/actions.test.js deleted file mode 100644 index e97313e1..00000000 --- a/packages/cicero-ui/src/lib/ErrorLogger/actions.test.js +++ /dev/null @@ -1,143 +0,0 @@ -import * as ACT from './actions'; - -describe('Actions', () => { - describe('gtZero', () => { - it('should return true, if value is bigger than zero', () => { - const result = ACT.gtZero(1); - expect(result).toEqual(true); - }); - it('should return false, when value is lower than zero', () => { - const result = ACT.gtZero(-1); - expect(result).toEqual(false); - }); - it('should return false, when value is equal to zero', () => { - const result = ACT.gtZero(0); - expect(result).toEqual(false); - }); - }); - - describe('typeSwitchCase', () => { - it('should return "Model" string, when input contains "modelError" property', () => { - const input = { - modelError: 'mockedModelError' - }; - const result = ACT.typeSwitchCase(input); - expect(result).toEqual('Model'); - }); - it('should return "Grammar" string, when input contains "parseError" property', () => { - const input = { - parseError: 'mockedParseError' - }; - const result = ACT.typeSwitchCase(input); - expect(result).toEqual('Grammar'); - }); - it('should return "Unknown" string, when unknown error', () => { - const input = {}; - const result = ACT.typeSwitchCase(input); - expect(result).toEqual('Unknown'); - }); - }); - - describe('keySwitchCase', () => { - it('should return "clauseTemplateId" value, when input contains "modelError" property', () => { - const input = { - modelError: 'mockedModelError', - clauseTemplateId: '12345' - }; - const result = ACT.keySwitchCase(input); - expect(result).toEqual('12345'); - }); - it('should return "clauseId" value, when input contains "parseError" property', () => { - const input = { - parseError: 'mockedParseError', - clauseId: '12345' - }; - const result = ACT.keySwitchCase(input); - expect(result).toEqual('12345'); - }); - it('should return null, when unknown error', () => { - const input = {}; - const result = ACT.keySwitchCase(input); - expect(result).toEqual(null); - }); - }); - - describe('overalltypeSwitchCase', () => { - it('should return "modelError" value, when input contains "modelError" property', () => { - const input = { - modelError: 'mockedModelError' - }; - const result = ACT.overalltypeSwitchCase(input); - expect(result).toEqual('mockedModelError'); - }); - it('should return "parseError" value, when input contains "parseError" property', () => { - const input = { - parseError: 'mockedParseError' - }; - const result = ACT.overalltypeSwitchCase(input); - expect(result).toEqual('mockedParseError'); - }); - it('should return null, when unknown error', () => { - const input = {}; - const result = ACT.overalltypeSwitchCase(input); - expect(result).toEqual(null); - }); - }); - - describe('truncateMessage', () => { - it("should return full message, when it's shorter than 200 characters", () => { - const mockedMessage = 'mockedMessage'; - const result = ACT.truncateMessage(mockedMessage); - expect(result).toEqual('mockedMessage'); - }); - it("should return truncate message when it's longer than 200 characters", () => { - const mockedLongMessage = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa'; - const result = ACT.truncateMessage(mockedLongMessage); - expect(result).toEqual('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut a...'); - }); - }); - - describe('helpers for error functions', () => { - const mockedError = { - id1: {} - }; - const mockedErrors = { - id1: {}, - id2: {} - }; - const emptyError = {}; - - describe('errorExists', () => { - it('should return true, when error object is not empty', () => { - const result = ACT.errorsExist(mockedError); - expect(result).toEqual(true); - }); - it('should return false, when error object is empty', () => { - const result = ACT.errorsExist(emptyError); - expect(result).toEqual(false); - }); - }); - - describe('errorArrayLength', () => { - it('should return number of errors in object', () => { - const result = ACT.errorArrayLength(mockedErrors); - expect(result).toEqual(2); - }); - it('should return "No", when object is empty', () => { - const result = ACT.errorArrayLength(emptyError); - expect(result).toEqual('No'); - }); - }); - - describe('isMultipleErrors', () => { - it('should return "Error", when only one error in object', () => { - const result = ACT.isMultipleErrors(mockedError); - expect(result).toEqual('Error'); - }); - it('should return "Errors", when more than one error in object', () => { - const result = ACT.isMultipleErrors(mockedErrors); - expect(result).toEqual('Errors'); - }); - }); - }); -}); diff --git a/packages/cicero-ui/src/lib/ErrorLogger/index.test.js b/packages/cicero-ui/src/lib/ErrorLogger/index.test.js deleted file mode 100644 index 1fb18341..00000000 --- a/packages/cicero-ui/src/lib/ErrorLogger/index.test.js +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import toJson from 'enzyme-to-json'; -import ErrorLogger from './index'; - -const parseError1 = { - 'b28f32b2-57d9-41e1-b871-03c9faa75b6e': { - clauseId: 'b28f32b2-57d9-41e1-b871-03c9faa75b6e', - parseError: { - fileLocation: { - end: { - endColumn: 2, - line: 1 - }, - start: { - column: 1 - } - }, - component: 'cicero-core', - fileName: undefined, - name: 'ParseException', - shortMessage: - '"invalid syntax at line 1 col 1:↵↵ a Acceptance of Delivery. "Party A" will be deemed to have completed its delivery obligations if in "Party B"\'s opinion, the "Widgets" satisfies the Acceptance Criteria, and "Party B" notifies "Party A" in writing that it is accepting the "Widgets".↵ ^↵Unexpected "a"↵"', - message: - '"invalid syntax at line 1 col 1:↵↵ a Acceptance of Delivery. "Party A" will be deemed to have completed its delivery obligations if in "Party B"\'s opinion, the "Widgets" satisfies the Acceptance Criteria, and "Party B" notifies "Party A" in writing that it is accepting the "Widgets".↵ ^↵Unexpected "a"↵"' - } - } -}; - -describe('', () => { - describe('on initialization', () => { - it('renders page correctly with errors', () => { - const component = shallow(); - const tree = toJson(component); - expect(tree).toMatchSnapshot(); - }); - - it('renders page correctly without errors', () => { - const component = shallow(); - const tree = toJson(component); - expect(tree).toMatchSnapshot(); - }); - }); - - describe('renders conditional to errors', () => { - it('with errors existing', () => { - const component = shallow(); - expect(component.find('#ErrorComponentHeader').exists()).toBeTruthy(); - - component.find('#ErrorComponentHeader').simulate('click'); - - expect(component.find('#ErrorComponentDisplay').exists()).toBeTruthy(); - }); - - it('without errors existing', () => { - const component = shallow(); - expect(component.find('#ErrorComponentHeader').exists()).toBeTruthy(); - expect(component.find('#ErrorComponentDisplay').exists()).toBe(false); - - component.find('#ErrorComponentHeader').simulate('click'); - - expect(component.find('#ErrorComponentDisplay').exists()).toBe(false); - }); - }); -}); diff --git a/packages/cicero-ui/src/lib/Library/Test/__snapshots__/index.test.js.snap b/packages/cicero-ui/src/lib/Library/Test/__snapshots__/index.test.js.snap deleted file mode 100644 index 14601ded..00000000 --- a/packages/cicero-ui/src/lib/Library/Test/__snapshots__/index.test.js.snap +++ /dev/null @@ -1,124 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` on initialization renders page correctly 1`] = ` - - - - - - - - - - - - - - - - - - - - -`; diff --git a/packages/cicero-ui/src/lib/Library/Test/index.test.js b/packages/cicero-ui/src/lib/Library/Test/index.test.js deleted file mode 100644 index 2a7d1e71..00000000 --- a/packages/cicero-ui/src/lib/Library/Test/index.test.js +++ /dev/null @@ -1,103 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import toJson from 'enzyme-to-json'; - -import LibraryItemCard from '../Components/LibraryItemCard'; -import Library from '../index'; - -const libraryItemsArray = [ - { - description: 'This clause allows the receiver of goods to inspect them for a given time period after delivery.', - name: 'acceptance-of-delivery', - uri: 'ap://acceptance-of-delivery@0.11.0#311de48109cce10e6b2e33ef183ccce121886d0b76754d649d5054d1084f93cd', - version: '0.11.0' - }, - { - description: 'a Simple Car Rental Contract in Turkish Language', - name: 'car-rental-tr', - uri: 'ap://car-rental-tr@0.8.0#1d6de2328745fe4bae726e0fb887fee6d3fbd00b3d717e30e38dc7bffd7222fa', - version: '0.8.0' - }, - { - description: 'This clause is a copyright license agreement.', - name: 'copyright-license', - uri: 'ap://copyright-license@0.12.0#55d73ab5dacc642d8a7cd0bc95c7da5580bd031e00b955616837abd50be08b6b', - version: '0.12.0' - }, - { - description: 'A sample demandforecast clause.', - name: 'demandforecast', - uri: 'ap://demandforecast@0.11.0#ac252106feb1f685f5ecceb12b967bb8210ca5283660b5bf72aeb5b397342f87', - version: '0.11.0' - }, - { - description: 'Counts events from DocuSign connect with a given envelope status.', - name: 'docusign-connect', - uri: 'ap://docusign-connect@0.5.0#4b44811f4f3e4899c026c35f4180d6c555f9101e8fcca35a13ad09aa2e28b7f7', - version: '0.5.0' - }, - { - description: 'This is a clause enforcing healthy eating habits in employees.', - name: 'eat-apples', - uri: 'ap://eat-apples@0.8.0#5d04f0bb8698e1e7565e496aa97beb055b1f3e7fb353d0b0447aeaac59729ed2', - version: '0.8.0' - }, -]; - -const mockUpload = jest.fn(); -const mockImport = jest.fn(); -const addNewTemplate = jest.fn(); -const mockPrimaryButtonClick = jest.fn(); -const mockSecondaryButtonClick = jest.fn(); - -const propInput = { - items: libraryItemsArray, - onUploadItem: mockUpload, - onImportItem: mockImport, - onAddItem: addNewTemplate, - onPrimaryButtonClick: mockPrimaryButtonClick, - onSecondaryButtonClick: mockSecondaryButtonClick, -}; - -describe('', () => { - describe('on initialization', () => { - it('renders page correctly', () => { - const component = shallow(); - const tree = toJson(component); - expect(tree).toMatchSnapshot(); - }); - }); - - describe('renders conditional buttons', () => { - it('with functions passed in', () => { - const component = shallow(); - expect(component.find('UploadComponent')).toHaveLength(1); - expect(component.find('ImportComponent')).toHaveLength(1); - expect(component.find('NewItemComponent')).toHaveLength(1); - }); - - it('without functions passed in', () => { - const component = shallow(); - expect(component.find('UploadComponent')).toHaveLength(0); - expect(component.find('ImportComponent')).toHaveLength(0); - expect(component.find('NewItemComponent')).toHaveLength(1); - }); - }); - - describe('runs functions passed into it', () => { - it('add To Contract function runs', () => { - const component = shallow( - - ); - expect(component.find('CardActions').prop('onPrimaryButtonClick')).toEqual(mockPrimaryButtonClick); - }); - }); -}); diff --git a/packages/cicero-ui/src/lib/Navigation/__snapshots__/index.test.js.snap b/packages/cicero-ui/src/lib/Navigation/__snapshots__/index.test.js.snap deleted file mode 100644 index cadd84ce..00000000 --- a/packages/cicero-ui/src/lib/Navigation/__snapshots__/index.test.js.snap +++ /dev/null @@ -1,101 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` on initialization renders component correctly showing Files 1`] = ` - - - NAVIGATION - - - FILES - - -`; - -exports[` on initialization renders component correctly showing Navigation 1`] = ` - - - NAVIGATION - - - FILES - - -`; - -exports[` on initialization renders component correctly hiding Files 1`] = ` - - - - -`; - -exports[` on initialization renders component correctly showing Files 1`] = ` - - - - -`; diff --git a/packages/cicero-ui/src/lib/Navigation/index.test.js b/packages/cicero-ui/src/lib/Navigation/index.test.js deleted file mode 100644 index c9bde7f3..00000000 --- a/packages/cicero-ui/src/lib/Navigation/index.test.js +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import toJson from 'enzyme-to-json'; - -import NavigationComponent from './index'; -import ComponentSwitch from './ComponentSwitch'; - - -describe('', () => { - const propsFilesTrue = { - navigationProps: { - NAVIGATE_SWITCH_FILES_VISIBLE: true - }, - navigateHeader: jest.fn(), - headers: [] - }; - - const propsFilesFalse = { - navigationProps: { - NAVIGATE_SWITCH_FILES_VISIBLE: false - }, - navigateHeader: jest.fn(), - headers: [] - }; - - describe('on initialization', () => { - it('renders component correctly showing Files', () => { - const component = shallow(); - const tree = toJson(component); - expect(tree).toMatchSnapshot(); - }); - - it('renders component correctly hiding Files', () => { - const component = shallow(); - const tree = toJson(component); - expect(tree).toMatchSnapshot(); - }); - - it('renders without files initially', () => { - const component = shallow(); - expect(component.find('#NavigationWrapperComponent').exists()).toBeTruthy(); - expect(component.find('#ContractNavigationComponent').exists()).toBeTruthy(); - expect(component.find('#FilesNavigationComponent').exists()).toBe(false); - }); - }); -}); - -describe('', () => { - const propsFilesTrue = { - filesVisible: true, - navState: 'FILES', - setNavState: jest.fn(), - }; - - const propsFilesFalse = { - filesVisible: false, - navState: 'NAVIGATION', - setNavState: jest.fn(), - }; - - describe('on initialization', () => { - it('renders component correctly showing Files', () => { - const component = shallow(); - const tree = toJson(component); - expect(tree).toMatchSnapshot(); - }); - - it('renders component correctly showing Navigation', () => { - const component = shallow(); - const tree = toJson(component); - expect(tree).toMatchSnapshot(); - }); - }); -}); diff --git a/packages/cicero-ui/src/lib/utilities/test/jestEnzyme.js b/packages/cicero-ui/src/lib/utilities/test/jestEnzyme.js deleted file mode 100644 index 7d1129af..00000000 --- a/packages/cicero-ui/src/lib/utilities/test/jestEnzyme.js +++ /dev/null @@ -1,4 +0,0 @@ -import Enzyme from 'enzyme'; // eslint-disable-line import/no-extraneous-dependencies -import Adapter from 'enzyme-adapter-react-16'; // eslint-disable-line import/no-extraneous-dependencies - -Enzyme.configure({ adapter: new Adapter() }); From bb75b05679b6464a7ec469bc2f33ccc1c8e24356 Mon Sep 17 00:00:00 2001 From: irmerk Date: Tue, 2 Jun 2020 17:18:20 -0400 Subject: [PATCH 6/6] docs(cicero-ui): align READMEs - I70 Signed-off-by: irmerk --- .../src/lib/ContractEditor/README.md | 18 ++++++++---------- .../cicero-ui/src/lib/ErrorLogger/README.md | 4 ++-- packages/cicero-ui/src/lib/Library/README.md | 19 +++++++++++++------ .../cicero-ui/src/lib/Navigation/README.md | 4 ++-- .../cicero-ui/src/lib/Navigation/index.js | 2 +- 5 files changed, 26 insertions(+), 21 deletions(-) diff --git a/packages/cicero-ui/src/lib/ContractEditor/README.md b/packages/cicero-ui/src/lib/ContractEditor/README.md index 55548a7f..7950d2d0 100644 --- a/packages/cicero-ui/src/lib/ContractEditor/README.md +++ b/packages/cicero-ui/src/lib/ContractEditor/README.md @@ -61,25 +61,23 @@ render(, document.getElementById('root')); #### Values -- `value`: An `object` which is the initial contents of the editor. -- `lockText`: A `boolean` to lock all non variable text. -- `readOnly`: A `boolean` to lock all text and remove the formatting toolbar. -- `activeButton`: Optional `object` to change formatting button active state color +- `value` [OPTIONAL]: An `object` which is the initial contents of the editor. +- `lockText` [OPTIONAL]: A `boolean` to lock all non variable text. +- `readOnly` [OPTIONAL]: A `boolean` to lock all text and remove the formatting toolbar. +- `activeButton` [OPTIONAL]: Optional `object` to change formatting button active state color - `{ background: '#FFF', symbol: '#000' }` #### Functionality -- `onChange`: A callback `function` called when the contents of the editor change. -- `loadTemplateObject`: A callback `function` to load a template. -- `onClauseUpdated`: A callback `function` called when text inside of a clause is changed. -- `pasteToContract`: A callback `function` to load a clause template via copy/paste. +- `onChange` [OPTIONAL]: A callback `function` called when the contents of the editor change. +- `loadTemplateObject` [OPTIONAL]: A callback `function` to load a template. +- `onClauseUpdated` [OPTIONAL]: A callback `function` called when text inside of a clause is changed. +- `pasteToContract` [OPTIONAL]: A callback `function` to load a clause template via copy/paste. ### Available Functionality - `clauseProps`: An `object` for the clauses in the editor which contains a deletion, edit, and test function, as well as a header title string and color for clause icons on hover see below. -#### Specifications - `clauseProps`: You can support deletion, editing, and testing of the Clause Components within the `ContractEditor`. An object may be passed down this component with the following possible functions: ```js diff --git a/packages/cicero-ui/src/lib/ErrorLogger/README.md b/packages/cicero-ui/src/lib/ErrorLogger/README.md index ce5aed90..9e5d24ab 100644 --- a/packages/cicero-ui/src/lib/ErrorLogger/README.md +++ b/packages/cicero-ui/src/lib/ErrorLogger/README.md @@ -22,11 +22,11 @@ const ErrorContainer = props => ( #### Values -- `errors` : An `object` with unique key and error's data. +- `errors` [REQUIRED]: An `object` with unique key and error's data #### Functionality -- `errorNav` : An optional `function` which will navigate to the corresponding error. +- `errorNav` [OPTIONAL]: An optional `function` which will navigate to the corresponding error ### Custom Styling diff --git a/packages/cicero-ui/src/lib/Library/README.md b/packages/cicero-ui/src/lib/Library/README.md index 8e290921..3146f41b 100644 --- a/packages/cicero-ui/src/lib/Library/README.md +++ b/packages/cicero-ui/src/lib/Library/README.md @@ -22,21 +22,28 @@ const LibraryComponent = props => ( ); ``` -### Props +## Props + +### Expected Properties + +#### Values - `items` [REQUIRED]: An `array` which contains library item objects. Required keys are: `uri`, `name`, `version` and `description` - Optional keys are: `displayName`, `logoUrl` and `itemType` (for heterogeneous libraries) -- `onPrimaryButtonClick` [REQUIRED]: A `function` callback which is called when a primary button in a library item card is clicked. A single argument is passed - the item object -- `onSecondaryButtonClick` [REQUIRED]: A `function` callback which is called when a secondary button in a library item card is clicked. A single argument is passed - the item object -- `onUploadItem` [OPTIONAL]: A `function` callback which is called when a link to upload a new library item is clicked -- `onImportItem` [OPTIONAL]: A `function` callback which is called when a link to import a new library item is clicked -- `onAddItem` [OPTIONAL]: A `function` callback which is called when a link to add a new library item is clicked - `itemTypes` [OPTIONAL]: An `array` of item types, default - `[{ name: 'CLAUSE TEMPLATE', type: 'template', filterName: 'Templates' }]` - `name` field is shown on the second line of the library card - `type` field corresponds to `item.itemType` attribute and is used to match a given `item` to its itemType in the `itemTypes` array - `filterName` field is shown as a label for the type filter checkbox. This filter is ommited if the library is homogeneous +#### Functionality + +- `onPrimaryButtonClick` [REQUIRED]: A `function` callback which is called when a primary button in a library item card is clicked. A single argument is passed - the item object +- `onSecondaryButtonClick` [REQUIRED]: A `function` callback which is called when a secondary button in a library item card is clicked. A single argument is passed - the item object +- `onUploadItem` [OPTIONAL]: A `function` callback which is called when a link to upload a new library item is clicked +- `onImportItem` [OPTIONAL]: A `function` callback which is called when a link to import a new library item is clicked +- `onAddItem` [OPTIONAL]: A `function` callback which is called when a link to add a new library item is clicked + ### Custom Styling The component provides classes which can be used to apply custom styles to its individual parts. diff --git a/packages/cicero-ui/src/lib/Navigation/README.md b/packages/cicero-ui/src/lib/Navigation/README.md index bd5ea2da..f916ef7e 100644 --- a/packages/cicero-ui/src/lib/Navigation/README.md +++ b/packages/cicero-ui/src/lib/Navigation/README.md @@ -25,7 +25,7 @@ const NavigationContainer = props => ( #### Values -- `headers` : An `array` which contains header objects, each appearing as such: +- `headers` [REQUIRED]: An `array` which contains header objects, each appearing as such: ```js { @@ -37,7 +37,7 @@ const NavigationContainer = props => ( #### Functionality -- `navigateHeader` : An optional `function` which will navigate to the corresponding header +- `navigateHeader` [OPTIONAL]: An optional `function` which will navigate to the corresponding header ### Custom Styling diff --git a/packages/cicero-ui/src/lib/Navigation/index.js b/packages/cicero-ui/src/lib/Navigation/index.js index 04e67e02..87a7c74a 100644 --- a/packages/cicero-ui/src/lib/Navigation/index.js +++ b/packages/cicero-ui/src/lib/Navigation/index.js @@ -48,7 +48,7 @@ const NavigationComponent = (props) => { }; NavigationComponent.propTypes = { - headers: PropTypes.array, + headers: PropTypes.array.isRequired, navigateHeader: PropTypes.func, };