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`] = `
+ this.setState(prevState => ({ truncated: !prevState.truncated })) + + render() { + const { text, maxWords } = this.props + const { truncated } = this.state + + const words = text.split(' ') + return ( +
+

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

+ {words.length > maxWords && ( +
+ Show {truncated ? 'More ∧' : 'Less ∨'} +
+ )} +
+ ) + } +} 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..447abbd --- /dev/null +++ b/src/components/truncated-text-box/truncated-text-box.scss @@ -0,0 +1,10 @@ +@import '../../styles/_colors.scss'; + +/* @define TruncatedTextBox */ +.TruncatedTextBox { + &-actionDiv { + 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 8d7237d..b0820d8 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,9 @@ const Details = ({ ]} />
+

Contract Description

+ +
) @@ -84,7 +89,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/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/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 }) 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', () => ( + + ))