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

Commit

Permalink
Merge pull request #73 from irmerk/jl-issue17-error-component
Browse files Browse the repository at this point in the history
feat(*): ap design sync - I72
  • Loading branch information
jolanglinais authored Jul 3, 2019
2 parents ddad24e + 85d6866 commit f682d8e
Show file tree
Hide file tree
Showing 19 changed files with 359 additions and 308 deletions.
33 changes: 33 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,39 @@ It correctly bundles React in production mode and optimizes the build for the be
The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!

## Styling

You can style most of the components in this library:

#### Contract Editor: `editorProps`

You can style the toolbar of this components, as well as the width of the editor:

An object may be passed down this component which will then be picked up by our `markdown-editor`, with the following possible css inputs as strings:
- `BUTTON_BACKGROUND_INACTIVE`
- `BUTTON_BACKGROUND_ACTIVE`
- `BUTTON_SYMBOL_INACTIVE`
- `BUTTON_SYMBOL_ACTIVE`
- `DROPDOWN_COLOR`
- `TOOLBAR_BACKGROUND`
- `TOOLTIP_BACKGROUND`
- `TOOLTIP`
- `TOOLBAR_SHADOW`
- `WIDTH`

#### Template Library: `libraryProps`

You can style the template card components, as well as the header:

An object may be passed down this component with the following possible css inputs as strings:
- `ACTION_BUTTON`
- `ACTION_BUTTON_BG`
- `ACTION_BUTTON_BORDER`
- `HEADER_TITLE`
- `TEMPLATE_BACKGROUND`
- `TEMPLATE_DESCRIPTION`
- `TEMPLATE_TITLE`

---

## Structure of the Code Repository
Expand Down
Binary file added assets/fonts/Graphik-400.woff
Binary file not shown.
Binary file added assets/fonts/Graphik-400.woff2
Binary file not shown.
Binary file added assets/fonts/Graphik-500.woff
Binary file not shown.
Binary file added assets/fonts/Graphik-500.woff2
Binary file not shown.
Binary file added assets/fonts/Graphik-600.woff
Binary file not shown.
Binary file added assets/fonts/Graphik-600.woff2
Binary file not shown.
80 changes: 45 additions & 35 deletions demo/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -79,50 +79,60 @@ function Demo() {
setActiveItem(name);
}, []);

const editorProps = {
BUTTON_BACKGROUND_INACTIVE: null,
BUTTON_BACKGROUND_ACTIVE: null,
BUTTON_SYMBOL_INACTIVE: null,
BUTTON_SYMBOL_ACTIVE: null,
DROPDOWN_COLOR: null,
TOOLBAR_BACKGROUND: null,
TOOLTIP_BACKGROUND: null,
TOOLTIP: null,
TOOLBAR_SHADOW: null,
WIDTH: '600px',
};

const demo = activeItem === 'clauseEditor'
? <ClauseEditor
lockText={false}
value={clauseValue}
onChange={onClauseChange}
onParse={onParse}
/>
lockText={false}
value={clauseValue}
onChange={onClauseChange}
onParse={onParse}
/>
: <ContractEditor
lockText={false}
value={contractValue}
onChange={onContractChange}
/>;
lockText={false}
value={contractValue}
onChange={onContractChange}
editorProps={editorProps}
/>;

return (
<div>
<Grid centered columns={2}>
<Grid.Column>
<Segment>
{demo}
<Rail position='left'>
<Grid.Column>
<Segment>
<Menu vertical>
<Menu.Item
name='clauseEditor'
active={activeItem === 'clauseEditor'}
onClick={handleItemClick}
>
<Header as='h4'>Clause Editor</Header>
<p>Edit a single clause.</p>
</Menu.Item>

<Menu.Item name='contractEditor' active={activeItem === 'contractEditor'} onClick={handleItemClick}>
<Header as='h4'>Contract Editor</Header>
<p>Adds multiple clauses to a rich-text contract.</p>
</Menu.Item>

</Menu>
{demo}
<Rail position='left'>
<Segment>
<Menu vertical>
<Menu.Item
name='clauseEditor'
active={activeItem === 'clauseEditor'}
onClick={handleItemClick}
>
<Header as='h4'>Clause Editor</Header>
<p>Edit a single clause.</p>
</Menu.Item>
<Menu.Item name='contractEditor' active={activeItem === 'contractEditor'} onClick={handleItemClick}>
<Header as='h4'>Contract Editor</Header>
<p>Adds multiple clauses to a rich-text contract.</p>
</Menu.Item>
</Menu>
</Segment>
</Rail>
</Segment>
</Rail>

</Segment>
</Grid.Column>
</Grid>

</Grid.Column>
</Grid>
</div>
);
}
Expand Down
6 changes: 3 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
},
"dependencies": {
"@accordproject/cicero-core": "^0.13.0",
"@accordproject/markdown-editor": "^0.5.0",
"@accordproject/markdown-editor": "^0.5.1",
"acorn": "5.1.2",
"doctrine": "3.0.0",
"lodash": "^4.17.11",
Expand Down
6 changes: 6 additions & 0 deletions src/ContractEditor/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ const ContractEditor = (props) => {
onChange={props.onChange || contractProps.onChange}
plugins={plugins}
lockText={props.lockText}
editorProps={props.editorProps}
/> : null
);
};
Expand All @@ -91,6 +92,11 @@ ContractEditor.propTypes = {
*/
onChange: PropTypes.func,

/**
* Styling props passed down through an object to Markdown Editor
*/
editorProps: PropTypes.object,

/**
* Whether to lock all non variable text
*/
Expand Down
184 changes: 10 additions & 174 deletions src/ErrorLogger/__snapshots__/index.test.js.snap
Original file line number Diff line number Diff line change
@@ -1,178 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<ErrorLogger /> on initialization renders page correctly 1`] = `
<ReactTable
AggregatedComponent={[Function]}
ExpanderComponent={[Function]}
FilterComponent={[Function]}
LoadingComponent={[Function]}
NoDataComponent={[Function]}
PadRowComponent={[Function]}
PaginationComponent={[Function]}
PivotValueComponent={[Function]}
ResizerComponent={[Function]}
TableComponent={[Function]}
TbodyComponent={[Function]}
TdComponent={[Function]}
TfootComponent={[Function]}
ThComponent={[Function]}
TheadComponent={[Function]}
TrComponent={[Function]}
TrGroupComponent={[Function]}
aggregatedKey="_aggregated"
className=""
collapseOnDataChange={true}
collapseOnPageChange={true}
collapseOnSortingChange={true}
column={
Object {
"Aggregated": undefined,
"Cell": undefined,
"Expander": undefined,
"Filter": undefined,
"Footer": undefined,
"Header": undefined,
"Pivot": undefined,
"PivotValue": undefined,
"Placeholder": undefined,
"aggregate": undefined,
"className": "",
"filterAll": false,
"filterMethod": undefined,
"filterable": undefined,
"footerClassName": "",
"footerStyle": Object {},
"getFooterProps": [Function],
"getHeaderProps": [Function],
"getProps": [Function],
"headerClassName": "",
"headerStyle": Object {},
"minResizeWidth": 11,
"minWidth": 100,
"resizable": undefined,
"show": true,
"sortMethod": undefined,
"sortable": undefined,
"style": Object {},
}
}
columns={
Array [
Object {
"Header": "Type",
"accessor": "type",
"width": 100,
},
Object {
"Header": "Name",
"accessor": "name",
"width": 200,
},
Object {
"Header": "File",
"accessor": "fileName",
"width": 100,
},
Object {
"Header": "Start Location",
"accessor": [Function],
"id": "startLocation",
"width": 100,
},
Object {
"Header": "End Location",
"accessor": [Function],
"id": "endLocation",
"width": 100,
},
Object {
"Header": "Message",
"accessor": "shortMessage",
"width": 600,
},
]
}
data={Array []}
defaultExpanded={Object {}}
defaultFilterMethod={[Function]}
defaultFiltered={Array []}
defaultPage={0}
defaultPageSize={20}
defaultResized={Array []}
defaultSortDesc={false}
defaultSortMethod={[Function]}
defaultSorted={Array []}
expanderDefaults={
Object {
"filterable": false,
"resizable": false,
"sortable": false,
"width": 35,
}
}
filterable={false}
freezeWhenExpanded={false}
getLoadingProps={[Function]}
getNoDataProps={[Function]}
getPaginationProps={[Function]}
getProps={[Function]}
getResizerProps={[Function]}
getTableProps={[Function]}
getTbodyProps={[Function]}
getTdProps={[Function]}
getTfootProps={[Function]}
getTfootTdProps={[Function]}
getTfootTrProps={[Function]}
getTheadFilterProps={[Function]}
getTheadFilterThProps={[Function]}
getTheadFilterTrProps={[Function]}
getTheadGroupProps={[Function]}
getTheadGroupThProps={[Function]}
getTheadGroupTrProps={[Function]}
getTheadProps={[Function]}
getTheadThProps={[Function]}
getTheadTrProps={[Function]}
getTrGroupProps={[Function]}
getTrProps={[Function]}
groupedByPivotKey="_groupedByPivot"
indexKey="_index"
loading={false}
loadingText="Loading..."
multiSort={true}
nestingLevelKey="_nestingLevel"
nextText="Next"
noDataText="No rows found"
ofText="of"
onFetchData={[Function]}
originalKey="_original"
pageJumpText="jump to page"
pageSize={5}
pageSizeOptions={
Array [
5,
10,
20,
25,
50,
100,
]
}
pageText="Page"
pivotDefaults={Object {}}
pivotIDKey="_pivotID"
pivotValKey="_pivotVal"
previousText="Previous"
resizable={true}
resolveData={[Function]}
rowsSelectorText="rows per page"
rowsText="rows"
showPageJump={true}
showPageSizeOptions={true}
showPagination={true}
showPaginationBottom={true}
showPaginationTop={false}
sortable={true}
style={Object {}}
subRowsKey="_subRows"
/>
<div>
<styled.div>
<styled.div
errors={false}
>
No
Errors
</styled.div>
</styled.div>
</div>
`;
Loading

0 comments on commit f682d8e

Please sign in to comment.