From 9e28751044a965f51c41c80a7e9ecf53c8a12324 Mon Sep 17 00:00:00 2001 From: Sam Vitello Date: Mon, 2 Jul 2018 13:05:15 -0600 Subject: [PATCH 1/3] feat(dispute): add description as text box in dispute details --- src/components/truncated-text-box/index.js | 65 +++++++++++ .../truncated-text-box.scss | 11 ++ .../dispute/components/details/index.js | 12 +- .../dispute/components/ruling/index.js | 108 +++++++++--------- src/containers/dispute/index.js | 5 +- .../components/case-name-cell/index.js | 6 +- src/containers/home/index.js | 9 +- src/sagas/dispute.js | 1 + 8 files changed, 152 insertions(+), 65 deletions(-) create mode 100644 src/components/truncated-text-box/index.js create mode 100644 src/components/truncated-text-box/truncated-text-box.scss diff --git a/src/components/truncated-text-box/index.js b/src/components/truncated-text-box/index.js new file mode 100644 index 0000000..7dc301a --- /dev/null +++ b/src/components/truncated-text-box/index.js @@ -0,0 +1,65 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +import './truncated-text-box.css' + +class TruncatedTextBox extends Component { + static propTypes = { + text: PropTypes.string.isRequired, + numberOfWords: PropTypes.number.isRequired + } + + state = { + truncated: true + } + + toggleMore = () => { + const { truncated } = this.state + + this.setState({ + truncated: !truncated + }) + } + + render() { + const { text, numberOfWords } = this.props + const { truncated } = this.state + + if (!text) return false + + const words = text.split(' ') + let displayText = text + let actionDiv + // if there is no need to truncate return as is + if (words.length > numberOfWords) { + if (truncated) { + displayText = '' + for (let i = 0; i < numberOfWords; i++) { + displayText += words[i] + ' ' + } + displayText += '...' + actionDiv = ( +
+ Show More ∨ +
+ ) + } else { + displayText = text + actionDiv = ( +
+ Show Less ∧ +
+ ) + } + } + + return ( +
+

{displayText}

+ {actionDiv} +
+ ) + } +} + +export default TruncatedTextBox diff --git a/src/components/truncated-text-box/truncated-text-box.scss b/src/components/truncated-text-box/truncated-text-box.scss new file mode 100644 index 0000000..7eaba7f --- /dev/null +++ b/src/components/truncated-text-box/truncated-text-box.scss @@ -0,0 +1,11 @@ +.TruncatedTextBox { + background-color: #fff; + + &-actionDiv { + color: #4a90e2; + cursor: pointer; + font-size: 15px; + font-weight: 600; + line-height: 18px; + } +} diff --git a/src/containers/dispute/components/details/index.js b/src/containers/dispute/components/details/index.js index 8d7237d..9f590d4 100644 --- a/src/containers/dispute/components/details/index.js +++ b/src/containers/dispute/components/details/index.js @@ -5,6 +5,7 @@ import { ChainData } from '../../../../chainstrap' import { ARBITRATOR_ADDRESS } from '../../../../bootstrap/dapp-api' import { dateToString } from '../../../../utils/date' import LabelValueGroup from '../../../../components/label-value-group' +import TruncatedTextBox from '../../../../components/truncated-text-box' import * as chainViewConstants from '../../../../constants/chain-view' import './details.css' @@ -16,7 +17,8 @@ const Details = ({ arbitrationFee, arbitrableContractAddress, disputeID, - appealNumber + appealNumber, + description }) => (
@@ -73,6 +75,11 @@ const Details = ({ ]} />
+
+

Contract Description

+ +
+
) @@ -84,7 +91,8 @@ Details.propTypes = { arbitrationFee: PropTypes.number.isRequired, arbitrableContractAddress: PropTypes.string.isRequired, disputeID: PropTypes.number.isRequired, - appealNumber: PropTypes.number.isRequired + appealNumber: PropTypes.number.isRequired, + description: PropTypes.string.isRequired } export default Details diff --git a/src/containers/dispute/components/ruling/index.js b/src/containers/dispute/components/ruling/index.js index ffeeb36..1badee2 100644 --- a/src/containers/dispute/components/ruling/index.js +++ b/src/containers/dispute/components/ruling/index.js @@ -52,59 +52,63 @@ const Ruling = ({ )} + {votesForPartyA} + + ) + }, + { + label: 'Votes for Party B', + value: ( + + {votesForPartyB} + + ) + }, + { + label: 'PNK Redistribution', + value: ( + + {won ? '+' : '-'} + {netPNK} + + ) } - parameters={chainViewConstants.KLEROS_POC_GET_VOTE_COUNT_PARAMS( - disputeID, - appeals, - 1 - )} - > - {votesForPartyA} - - ) - }, - { - label: 'Votes for Party B', - value: ( - - {votesForPartyB} - - ) - }, - { - label: 'PNK Redistribution', - value: ( - - {won ? '+' : '-'} - {netPNK} - - ) - } - ]} + ] + } />
diff --git a/src/containers/dispute/index.js b/src/containers/dispute/index.js index 7a0808f..435ab5d 100644 --- a/src/containers/dispute/index.js +++ b/src/containers/dispute/index.js @@ -94,9 +94,7 @@ class Dispute extends PureComponent { size={12} className="Dispute-header-title-identicon" /> -

- Decision Summary for "{dispute.data.description}" -

+

Decision Summary for "{dispute.data.title}"

@@ -115,6 +113,7 @@ class Dispute extends PureComponent { dispute.data.arbitrableContractAddress } disputeID={dispute.data.disputeId} + description={dispute.data.description} /> ) }, diff --git a/src/containers/disputes/components/case-name-cell/index.js b/src/containers/disputes/components/case-name-cell/index.js index ae60e6b..59ae53b 100644 --- a/src/containers/disputes/components/case-name-cell/index.js +++ b/src/containers/disputes/components/case-name-cell/index.js @@ -10,13 +10,13 @@ import * as chainViewConstants from '../../../../constants/chain-view' import './case-name-cell.css' const CaseNameCell = ({ - original: { disputeId, arbitrableContractAddress, description } + original: { disputeId, arbitrableContractAddress, title } }) => (
-
{description}
+
{title}
} + loading={'...'} done={ PNKBalance.data && (
@@ -150,7 +149,7 @@ class Home extends PureComponent { /> } + loading={} done={
} + loading={} done={ PNKBalance.data && (
@@ -238,7 +237,7 @@ class Home extends PureComponent {
} + loading={} done={ PNKBalance.data && (
diff --git a/src/sagas/dispute.js b/src/sagas/dispute.js index b835052..05fc383 100644 --- a/src/sagas/dispute.js +++ b/src/sagas/dispute.js @@ -110,6 +110,7 @@ function* fetchDisputes() { disputes.push({ ...d, + title: arbitrableData ? arbitrableData.title : null, description: arbitrableData ? arbitrableData.description : null, deadline: disputeDeadline ? new Date(disputeDeadline) : null }) From c9f032c52406c44752c750025f875a3bdf687b5e Mon Sep 17 00:00:00 2001 From: epiqueras Date: Mon, 2 Jul 2018 22:18:35 -0500 Subject: [PATCH 2/3] feat: clean up --- src/components/truncated-text-box/index.js | 63 ++++++------------- .../truncated-text-box.scss | 13 ++-- .../dispute/components/details/index.js | 6 +- src/reducers/dispute.js | 1 + stories/index.js | 1 + stories/truncated-text-box.js | 22 +++++++ 6 files changed, 50 insertions(+), 56 deletions(-) create mode 100644 stories/truncated-text-box.js diff --git a/src/components/truncated-text-box/index.js b/src/components/truncated-text-box/index.js index 7dc301a..e11bcef 100644 --- a/src/components/truncated-text-box/index.js +++ b/src/components/truncated-text-box/index.js @@ -1,65 +1,38 @@ -import React, { Component } from 'react' +import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import './truncated-text-box.css' -class TruncatedTextBox extends Component { +export default class TruncatedTextBox extends PureComponent { static propTypes = { + // State text: PropTypes.string.isRequired, - numberOfWords: PropTypes.number.isRequired + maxWords: PropTypes.number.isRequired } - state = { - truncated: true - } - - toggleMore = () => { - const { truncated } = this.state + state = { truncated: true } - this.setState({ - truncated: !truncated - }) - } + toggleMore = () => + this.setState(prevState => ({ truncated: !prevState.truncated })) render() { - const { text, numberOfWords } = this.props + const { text, maxWords } = this.props const { truncated } = this.state - if (!text) return false - const words = text.split(' ') - let displayText = text - let actionDiv - // if there is no need to truncate return as is - if (words.length > numberOfWords) { - if (truncated) { - displayText = '' - for (let i = 0; i < numberOfWords; i++) { - displayText += words[i] + ' ' - } - displayText += '...' - actionDiv = ( -
- Show More ∨ -
- ) - } else { - displayText = text - actionDiv = ( -
- Show Less ∧ -
- ) - } - } - return (
-

{displayText}

- {actionDiv} +

+ {truncated && words.length > maxWords + ? words.slice(0, maxWords).join(' ') + : text} +

+ {words.length > maxWords && ( +
+ Show {truncated ? 'More ∧' : 'Less ∨'} +
+ )}
) } } - -export default TruncatedTextBox diff --git a/src/components/truncated-text-box/truncated-text-box.scss b/src/components/truncated-text-box/truncated-text-box.scss index 7eaba7f..447abbd 100644 --- a/src/components/truncated-text-box/truncated-text-box.scss +++ b/src/components/truncated-text-box/truncated-text-box.scss @@ -1,11 +1,10 @@ -.TruncatedTextBox { - background-color: #fff; +@import '../../styles/_colors.scss'; +/* @define TruncatedTextBox */ +.TruncatedTextBox { &-actionDiv { - color: #4a90e2; - cursor: pointer; - font-size: 15px; - font-weight: 600; - line-height: 18px; + color: $info; + font-size: 14px; + user-select: none; } } diff --git a/src/containers/dispute/components/details/index.js b/src/containers/dispute/components/details/index.js index 9f590d4..b0820d8 100644 --- a/src/containers/dispute/components/details/index.js +++ b/src/containers/dispute/components/details/index.js @@ -75,10 +75,8 @@ const Details = ({ ]} />
-
-

Contract Description

- -
+

Contract Description

+
) diff --git a/src/reducers/dispute.js b/src/reducers/dispute.js index ceca28c..82e4db7 100644 --- a/src/reducers/dispute.js +++ b/src/reducers/dispute.js @@ -63,6 +63,7 @@ const { ).isRequired, // Store Data + title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, email: PropTypes.string.isRequired, evidence: PropTypes.arrayOf( diff --git a/stories/index.js b/stories/index.js index c1fb10d..7896350 100644 --- a/stories/index.js +++ b/stories/index.js @@ -15,4 +15,5 @@ import './status-hint' import './table' import './text-input' import './toast' +import './truncated-text-box' import './typography' diff --git a/stories/truncated-text-box.js b/stories/truncated-text-box.js new file mode 100644 index 0000000..968a847 --- /dev/null +++ b/stories/truncated-text-box.js @@ -0,0 +1,22 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' + +import TruncatedTextBox from '../src/components/truncated-text-box' + +storiesOf('Truncated Text Box', module) + .add('default', () => ( + + )) + .add('not exceeding max words', () => ( + + )) From a4c2d3e3a9fed64569ec4e84792c4b814b1dc8d6 Mon Sep 17 00:00:00 2001 From: epiqueras Date: Mon, 2 Jul 2018 22:19:43 -0500 Subject: [PATCH 3/3] feat: add storyshots --- .../__snapshots__/storyshots.test.js.snap | 607 ++++++++++++++++++ 1 file changed, 607 insertions(+) diff --git a/src/components/__snapshots__/storyshots.test.js.snap b/src/components/__snapshots__/storyshots.test.js.snap index 0f69c11..4592b32 100644 --- a/src/components/__snapshots__/storyshots.test.js.snap +++ b/src/components/__snapshots__/storyshots.test.js.snap @@ -12167,6 +12167,613 @@ exports[`Storyshots Toast warning 1`] = `
`; +exports[`Storyshots Truncated Text Box default 1`] = ` +
+
+
+

+ Kleros UI-Kit +

+
+
+
+
+
+

+ Duis et mauris vestibulum, auctor lacus porttitor, pellentesque arcu. Sed +

+
+ Show + More ∧ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+`; + +exports[`Storyshots Truncated Text Box not exceeding max words 1`] = ` +
+
+
+

+ Kleros UI-Kit +

+
+
+
+
+
+

+ Duis et mauris vestibulum, auctor lacus porttitor, pellentesque arcu. Sed scelerisque dolor in orci luctus semper. Mauris turpis magna, congue vitae sollicitudin vel, pretium nec arcu. +

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+`; + exports[`Storyshots Typography headings 1`] = `