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/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/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.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/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/README.md b/packages/cicero-ui/src/lib/ErrorLogger/README.md index ce33f68e..9e5d24ab 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 to be Provided +### Expected Properties -- `errors` : An `object` with unique key and error's data. +#### Values -#### Require Provision +- `errors` [REQUIRED]: An `object` with unique key and error's data -- `errorsProps` : An optional `object`, see below. -- `errorNav` : An optional `function` which will navigate to the corresponding error. +#### Functionality -### Specifications +- `errorNav` [OPTIONAL]: An optional `function` which will navigate to the corresponding error -This component is built to have the following dimensions: +### Custom Styling -```js -width: '100%'; -``` +The component provides classes which can be used to apply custom styles to its individual parts. -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` +- `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/__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.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/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/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 b7087e92..3146f41b 100644 --- a/packages/cicero-ui/src/lib/Library/README.md +++ b/packages/cicero-ui/src/lib/Library/README.md @@ -22,37 +22,45 @@ 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. - -### Custom styling +## 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) +- `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. -- `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/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/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..f916ef7e 100644 --- a/packages/cicero-ui/src/lib/Navigation/README.md +++ b/packages/cicero-ui/src/lib/Navigation/README.md @@ -10,46 +10,22 @@ 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: +- `headers` [REQUIRED]: An `array` which contains header objects, each appearing as such: ```js { @@ -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` [OPTIONAL]: 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/__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/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..87a7c74a 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)} @@ -82,33 +48,8 @@ const NavigationComponent = (props) => { }; NavigationComponent.propTypes = { - headers: PropTypes.array, + headers: PropTypes.array.isRequired, 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/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/Navigation/styles.js b/packages/cicero-ui/src/lib/Navigation/styles.js index 79844e42..608466bc 100644 --- a/packages/cicero-ui/src/lib/Navigation/styles.js +++ b/packages/cicero-ui/src/lib/Navigation/styles.js @@ -4,11 +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'}; - width: ${props => props.navWidth || 'inherit'}; - background-color: ${props => props.backgroundColor || 'inherit'}; + position: static; + max-height: 80vh; + background-color: inherit; overflow-y: inherit; display: grid; @@ -23,34 +21,36 @@ 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; } `; export const Navigation = styled(Title)` - display: grid; + display: ${props => (props.navState === 'NAVIGATION' + ? 'grid' + : 'none')}; 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: ${props => (props.navState === 'FILES' + ? 'grid' + : 'none')}; grid-area: files; color: ${props => (props.navState === 'FILES' - ? (props.titleActive || '#19C6C7') - : (props.titleInactive || '#86888D'))}; + ? '#19C6C7' + : '#86888D')}; `; /* Contract Navigation */ export const ContractHeaders = styled.div` - overflow: hidden; - white-space: nowrap; padding-top: 10px; grid-area: body; @@ -61,16 +61,13 @@ export const ContractHeaders = styled.div` `; export const HeaderOne = styled.div` - overflow: hidden; - text-overflow: ellipsis; - margin-top: 2px; - margin-bottom: 2px; - height: 24px; - color: ${props => props.headerColor || '#B9BCC4'}; + margin-top: 0.5em; + margin-bottom: 0.5em; + color: #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; @@ -86,6 +83,6 @@ export const HeaderThree = styled(HeaderOne)` `; export const HeaderClause = styled(HeaderOne)` - color: ${props => props.clauseColor || '#FFFFFF'} !important; + color: #FFFFFF !important; font-weight: bold; `; 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() }); 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 ( ); };