From b9ebb3e1754cb319d04476a77dee6903d456e4bd Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Mon, 23 Mar 2020 13:12:19 +0100
Subject: [PATCH] Convert <details> to <Expander> (#2441)

---
 packages/page-accounts/src/modals/Create.tsx  | 10 ++---
 packages/page-contracts/src/Codes/Code.tsx    | 10 ++---
 .../page-contracts/src/Contracts/Contract.tsx |  7 ++--
 packages/page-contracts/src/Messages.tsx      | 37 +++++++++----------
 .../src/Overview/ProposalCell.tsx             |  7 ++--
 .../src/BlockInfo/Extrinsics.tsx              |  7 ++--
 packages/page-explorer/src/BlockInfo/Logs.tsx |  7 ++--
 packages/page-explorer/src/Events.tsx         | 19 +++++-----
 .../page-society/src/Overview/VoteDisplay.tsx | 27 +++++---------
 packages/react-components/src/AddressInfo.tsx | 19 ++++------
 packages/react-components/src/Expander.tsx    | 22 ++++++++---
 .../react-components/src/ProposedAction.tsx   |  9 +++--
 packages/react-signer/src/Checks/index.tsx    | 11 ++++--
 packages/react-signer/src/Transaction.tsx     | 22 ++++++-----
 14 files changed, 107 insertions(+), 107 deletions(-)

diff --git a/packages/page-accounts/src/modals/Create.tsx b/packages/page-accounts/src/modals/Create.tsx
index 1e9224ef38..51d735bc40 100644
--- a/packages/page-accounts/src/modals/Create.tsx
+++ b/packages/page-accounts/src/modals/Create.tsx
@@ -11,7 +11,7 @@ import FileSaver from 'file-saver';
 import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { DEV_PHRASE } from '@polkadot/keyring/defaults';
-import { AddressRow, Button, Dropdown, Input, InputAddress, Modal, Password } from '@polkadot/react-components';
+import { AddressRow, Button, Dropdown, Expander, Input, InputAddress, Modal, Password } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
@@ -277,11 +277,11 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
             onEnter={_onCommit}
             value={password2}
           />
-          <details
+          <Expander
             className='accounts--Creator-advanced'
-            open
+            isOpen
+            summary={t('Advanced creation options')}
           >
-            <summary>{t('Advanced creation options')}</summary>
             <Dropdown
               defaultValue={pairType}
               help={t('Determines what cryptography will be used to create this account. Note that to validate on Polkadot, the session account must use "ed25519".')}
@@ -302,7 +302,7 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
             {deriveError && (
               <article className='error'>{deriveError}</article>
             )}
-          </details>
+          </Expander>
         </AddressRow>
       </Modal.Content>
       <Modal.Actions onCancel={onClose}>
diff --git a/packages/page-contracts/src/Codes/Code.tsx b/packages/page-contracts/src/Codes/Code.tsx
index 6e7653959a..c3875d3f66 100644
--- a/packages/page-contracts/src/Codes/Code.tsx
+++ b/packages/page-contracts/src/Codes/Code.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { RouteComponentProps } from 'react-router';
 import { withRouter } from 'react-router-dom';
-import { Button, Card, Forget } from '@polkadot/react-components';
+import { Button, Card, Expander, Forget } from '@polkadot/react-components';
 
 import ABI from '../ABI';
 import CodeRow from '../CodeRow';
@@ -66,13 +66,13 @@ class Code extends React.PureComponent<Props, State> {
         >
           {contractAbi
             ? (
-              <details
+              <Expander
                 onClick={this.toggleAbi}
-                open={isAbiOpen}
+                isOpen={isAbiOpen}
+                summary={t('ABI')}
               >
-                <summary>{t('ABI')}</summary>
                 {abi}
-              </details>
+              </Expander>
             )
             : abi
           }
diff --git a/packages/page-contracts/src/Contracts/Contract.tsx b/packages/page-contracts/src/Contracts/Contract.tsx
index 363ac9f47c..765443344c 100644
--- a/packages/page-contracts/src/Contracts/Contract.tsx
+++ b/packages/page-contracts/src/Contracts/Contract.tsx
@@ -10,7 +10,7 @@ import { RouteComponentProps } from 'react-router';
 import { withRouter } from 'react-router-dom';
 import keyring from '@polkadot/ui-keyring';
 import { PromiseContract as ApiContract } from '@polkadot/api-contract';
-import { AddressRow, Button, Card, Forget } from '@polkadot/react-components';
+import { AddressRow, Button, Card, Expander, Forget } from '@polkadot/react-components';
 
 import Messages from '../Messages';
 import { useTranslation } from '../translate';
@@ -99,15 +99,14 @@ function Contract (props: Props): React.ReactElement<Props> | null {
         withNonce={false}
         withTags
       >
-        <details>
-          <summary>{t('Messages')}</summary>
+        <Expander summary={t('Messages')}>
           <Messages
             address={address.toString()}
             contractAbi={abi}
             isRemovable={false}
             onSelect={onCall}
           />
-        </details>
+        </Expander>
       </AddressRow>
     </ContractCard>
   );
diff --git a/packages/page-contracts/src/Messages.tsx b/packages/page-contracts/src/Messages.tsx
index f06f631565..6bc63206be 100644
--- a/packages/page-contracts/src/Messages.tsx
+++ b/packages/page-contracts/src/Messages.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Abi } from '@polkadot/api-contract';
 import { classes } from '@polkadot/react-components/util';
-import { Button, IconLink } from '@polkadot/react-components';
+import { Button, Expander, IconLink } from '@polkadot/react-components';
 
 import MessageSignature from './MessageSignature';
 import { useTranslation } from './translate';
@@ -66,24 +66,23 @@ function renderItem (props: Props, message: ContractABIMessage, index: number, a
           message={message}
           withTooltip
         />
-        <details className='docs'>
-          <summary>
-            {
-              docs && docs.length > 0
-                ? docs
-                  .filter((line) => line !== '')
-                  .map((line, index) => ((
-                    <React.Fragment key={`${name}-docs-${index}`}>
-                      <span>{line}</span>
-                      <br />
-                    </React.Fragment>
-                  )))
-                : (
-                  <i>{t('No documentation provided')}</i>
-                )
-            }
-          </summary>
-        </details>
+        <Expander
+          className='docs'
+          summary={
+            docs && docs.length > 0
+              ? docs
+                .filter((line) => line !== '')
+                .map((line, index) => ((
+                  <React.Fragment key={`${name}-docs-${index}`}>
+                    <span>{line}</span>
+                    <br />
+                  </React.Fragment>
+                )))
+              : (
+                <i>{t('No documentation provided')}</i>
+              )
+          }
+        />
       </div>
       {!asConstructor && props.onSelect && (
         <div className='accessory'>
diff --git a/packages/page-democracy/src/Overview/ProposalCell.tsx b/packages/page-democracy/src/Overview/ProposalCell.tsx
index 0e66cdf5ba..6663d292e0 100644
--- a/packages/page-democracy/src/Overview/ProposalCell.tsx
+++ b/packages/page-democracy/src/Overview/ProposalCell.tsx
@@ -6,7 +6,7 @@ import { FunctionMetadataLatest, Hash, Proposal } from '@polkadot/types/interfac
 
 import React from 'react';
 import { registry } from '@polkadot/react-api';
-import { Call } from '@polkadot/react-components';
+import { Call, Expander } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 
@@ -48,14 +48,13 @@ function ProposalCell ({ className, proposal, proposalHash }: Props): React.Reac
   return (
     <td className={`${className} all top`}>
       <div>{section}.{method}</div>
-      <details>
-        <summary>{formatDocs(meta) || t('Details')}</summary>
+      <Expander summary={formatDocs(meta) || t('Details')}>
         <Call
           labelHash={t('proposal hash')}
           value={proposal}
           withHash
         />
-      </details>
+      </Expander>
     </td>
   );
 }
diff --git a/packages/page-explorer/src/BlockInfo/Extrinsics.tsx b/packages/page-explorer/src/BlockInfo/Extrinsics.tsx
index e233b16d01..d8863640e1 100644
--- a/packages/page-explorer/src/BlockInfo/Extrinsics.tsx
+++ b/packages/page-explorer/src/BlockInfo/Extrinsics.tsx
@@ -7,7 +7,7 @@ import { BlockNumber, Extrinsic } from '@polkadot/types/interfaces';
 import React from 'react';
 import styled from 'styled-components';
 import { registry } from '@polkadot/react-api';
-import { AddressMini, Call, Column, LinkExternal } from '@polkadot/react-components';
+import { AddressMini, Call, Column, Expander, LinkExternal } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
@@ -50,8 +50,7 @@ function renderExtrinsic (props: Props, extrinsic: Extrinsic, index: number, t:
           </div>
         )}
       </div>
-      <details>
-        <summary>{meta?.documentation.join(' ') || t('Details')}</summary>
+      <Expander summary={meta?.documentation.join(' ') || t('Details')}>
         <Call
           className='details'
           mortality={
@@ -70,7 +69,7 @@ function renderExtrinsic (props: Props, extrinsic: Extrinsic, index: number, t:
           value={extrinsic}
           withHash
         />
-      </details>
+      </Expander>
       {
         extrinsic.isSigned
           ? <LinkExternal data={extrinsic.hash.toHex()} type='extrinsic' />
diff --git a/packages/page-explorer/src/BlockInfo/Logs.tsx b/packages/page-explorer/src/BlockInfo/Logs.tsx
index 498f4cb1ae..da17c1b45f 100644
--- a/packages/page-explorer/src/BlockInfo/Logs.tsx
+++ b/packages/page-explorer/src/BlockInfo/Logs.tsx
@@ -7,7 +7,7 @@ import { Codec, TypeDef } from '@polkadot/types/types';
 
 import React from 'react';
 import { Struct, Tuple, Raw, Vec, getTypeDef } from '@polkadot/types';
-import { Column } from '@polkadot/react-components';
+import { Column, Expander } from '@polkadot/react-components';
 import Params from '@polkadot/react-params';
 
 import { useTranslation } from '../translate';
@@ -110,10 +110,9 @@ function renderItem (t: (s: string, opt?: any) => string): (item: DigestItem, in
           <div className='header'>
             <h3>{item.type.toString()}</h3>
           </div>
-          <details>
-            <summary>{t('Details')}</summary>
+          <Expander summary={t('Details')}>
             {content}
-          </details>
+          </Expander>
         </article>
       </div>
     );
diff --git a/packages/page-explorer/src/Events.tsx b/packages/page-explorer/src/Events.tsx
index 0e883b23ba..9d63b1e79a 100644
--- a/packages/page-explorer/src/Events.tsx
+++ b/packages/page-explorer/src/Events.tsx
@@ -5,7 +5,7 @@
 import { KeyedEvent } from './types';
 
 import React from 'react';
-import { Event as EventDisplay } from '@polkadot/react-components';
+import { Event as EventDisplay, Expander } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from './translate';
@@ -53,19 +53,18 @@ function Events ({ emptyLabel, eventClassName, events, withoutIndex }: Props): R
                 }
               </h3>
             </div>
-            <details>
-              <summary>
-                {
-                  event.meta && event.meta.documentation
-                    ? event.meta.documentation.join(' ')
-                    : 'Details'
-                }
-              </summary>
+            <Expander
+              summary={
+                event.meta && event.meta.documentation
+                  ? event.meta.documentation.join(' ')
+                  : 'Details'
+              }
+            >
               <EventDisplay
                 className='details'
                 value={event}
               />
-            </details>
+            </Expander>
           </article>
         );
       })}
diff --git a/packages/page-society/src/Overview/VoteDisplay.tsx b/packages/page-society/src/Overview/VoteDisplay.tsx
index 6e54a54f04..bdc4899cf3 100644
--- a/packages/page-society/src/Overview/VoteDisplay.tsx
+++ b/packages/page-society/src/Overview/VoteDisplay.tsx
@@ -5,7 +5,7 @@
 import { VoteSplit, VoteType } from '../types';
 
 import React, { useEffect, useState } from 'react';
-import { AddressMini } from '@polkadot/react-components';
+import { AddressMini, Expander } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 
@@ -13,7 +13,7 @@ interface Props {
   votes?: VoteType[];
 }
 
-export default function VoteDisplay ({ votes }: Props): React.ReactElement<Props> {
+function VoteDisplay ({ votes }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [{ allAye, allNay, allSkeptic }, setVoteSplit] = useState<VoteSplit>({ allAye: [], allNay: [], allSkeptic: [] });
 
@@ -29,49 +29,42 @@ export default function VoteDisplay ({ votes }: Props): React.ReactElement<Props
     <>
       <td className='top padtop'>
         {allSkeptic.length !== 0 && (
-          <details>
-            <summary>
-              {t('Skeptics ({{count}})', { replace: { count: allSkeptic.length } })}
-            </summary>
+          <Expander summary={t('Skeptics ({{count}})', { replace: { count: allSkeptic.length } })}>
             {allSkeptic.map(([who]): React.ReactNode =>
               <AddressMini
                 key={who.toString()}
                 value={who}
               />
             )}
-          </details>
+          </Expander>
         )}
       </td>
       <td className='top padtop'>
         {allAye.length !== 0 && (
-          <details>
-            <summary>
-              {t('Approvals ({{count}})', { replace: { count: allAye.length } })}
-            </summary>
+          <Expander summary={t('Approvals ({{count}})', { replace: { count: allAye.length } })}>
             {allAye.map(([who]): React.ReactNode =>
               <AddressMini
                 key={who.toString()}
                 value={who}
               />
             )}
-          </details>
+          </Expander>
         )}
       </td>
       <td className='top padtop'>
         {allNay.length !== 0 && (
-          <details>
-            <summary>
-              {t('Rejections ({{count}})', { replace: { count: allNay.length } })}
-            </summary>
+          <Expander summary={t('Rejections ({{count}})', { replace: { count: allNay.length } })}>
             {allNay.map(([who]): React.ReactNode =>
               <AddressMini
                 key={who.toString()}
                 value={who}
               />
             )}
-          </details>
+          </Expander>
         )}
       </td>
     </>
   );
 }
+
+export default React.memo(VoteDisplay);
diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx
index cc58e6d547..22da01053b 100644
--- a/packages/react-components/src/AddressInfo.tsx
+++ b/packages/react-components/src/AddressInfo.tsx
@@ -10,7 +10,7 @@ import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
 import { formatBalance, formatNumber, isObject } from '@polkadot/util';
-import { Icon, Tooltip, TxButton } from '@polkadot/react-components';
+import { Expander, Icon, Tooltip, TxButton } from '@polkadot/react-components';
 import { withCalls, withMulti } from '@polkadot/react-api/hoc';
 import { useAccounts } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
@@ -366,16 +366,11 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
     return (
       <>
         <label>{t('balances')}</label>
-        <details>
-          <summary>
-            <div className='body'>
-              <FormatBalance value={balancesAll?.votingBalance} />
-            </div>
-          </summary>
+        <Expander summary={<FormatBalance className='summary' value={balancesAll?.votingBalance} />}>
           <div className='body column'>
             {allItems}
           </div>
-        </details>
+        </Expander>
       </>
     );
   }
@@ -457,16 +452,16 @@ export default withMulti(
         text-align: left;
         width: 15rem;
 
-        details[open] summary {
-          .body {
+        .ui--Expander.isExpanded {
+          .summary {
             opacity: 0;
           }
         }
 
-        details summary {
+        .ui--Expander {
           width: 100%;
 
-          .body {
+          .summary {
             display: inline-block;
             text-align: right;
             min-width: 12rem;
diff --git a/packages/react-components/src/Expander.tsx b/packages/react-components/src/Expander.tsx
index 476a0755ee..71600c6bd9 100644
--- a/packages/react-components/src/Expander.tsx
+++ b/packages/react-components/src/Expander.tsx
@@ -14,10 +14,11 @@ export interface Props extends BareProps {
   children?: React.ReactNode;
   isOpen?: boolean;
   summary: React.ReactNode;
+  withDot?: boolean;
   withHidden?: boolean;
 }
 
-function Expander ({ children, className, isOpen, summary, withHidden }: Props): React.ReactElement<Props> {
+function Expander ({ children, className, isOpen, summary, withDot, withHidden }: Props): React.ReactElement<Props> {
   const [isExpanded, toggleExpanded] = useToggle(isOpen);
   const hasContent = useMemo(
     (): boolean => !!children && (!Array.isArray(children) || children.length !== 0),
@@ -26,13 +27,16 @@ function Expander ({ children, className, isOpen, summary, withHidden }: Props):
 
   return (
     <div
-      className={`ui--Expander ${isExpanded && 'isExpanded'} ${className}`}
+      className={`ui--Expander ${isExpanded && 'isExpanded'} ${hasContent && 'hasContent'} ${className}`}
       onClick={toggleExpanded}
     >
       <div className='ui--Expander-summary'>
-        {hasContent && (
-          <Icon name={isExpanded ? 'angle double down' : 'angle double right'} />
-        )}{summary}
+        {hasContent
+          ? <Icon name={isExpanded ? 'angle double down' : 'angle double right'} />
+          : withDot
+            ? <Icon name='circle outline' />
+            : undefined
+        }{summary}
       </div>
       {hasContent && (isExpanded || withHidden) && (
         <div className='ui--Expander-contents'>{children}</div>
@@ -46,9 +50,15 @@ export default React.memo(styled(Expander)`
     display: none;
   }
 
-  .ui--Expander-summary {
+  &.hasContent .ui--Expander-summary {
     cursor: pointer;
+  }
+
+  .ui--Expander-summary {
     display: block;
+    margin: 0 0 0.5rem 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
 
     i.icon {
diff --git a/packages/react-components/src/ProposedAction.tsx b/packages/react-components/src/ProposedAction.tsx
index 531c20906e..d9b1b42b2d 100644
--- a/packages/react-components/src/ProposedAction.tsx
+++ b/packages/react-components/src/ProposedAction.tsx
@@ -11,6 +11,7 @@ import { registry } from '@polkadot/react-api';
 import { formatNumber, isString } from '@polkadot/util';
 
 import Call from './Call';
+import Expander from './Expander';
 import Inset, { InsetProps } from './Inset';
 import TreasuryProposal from './TreasuryProposal';
 import { isTreasuryProposalVote } from './util';
@@ -93,16 +94,16 @@ function ProposedAction ({ className, asInset, idNumber, insetProps, isCollapsib
       <h3>{header}</h3>
       {isCollapsible
         ? (
-          <details>
+          <Expander>
             {documentation}
             {params}
-          </details>
+          </Expander>
         )
         : (
           <>
-            <details>
+            <Expander>
               {documentation}
-            </details>
+            </Expander>
             {params}
           </>
         )}
diff --git a/packages/react-signer/src/Checks/index.tsx b/packages/react-signer/src/Checks/index.tsx
index fa484bc9f0..ad472bd867 100644
--- a/packages/react-signer/src/Checks/index.tsx
+++ b/packages/react-signer/src/Checks/index.tsx
@@ -9,6 +9,7 @@ import { RuntimeDispatchInfo } from '@polkadot/types/interfaces';
 import BN from 'bn.js';
 import React, { useState, useEffect } from 'react';
 import { Trans } from 'react-i18next';
+import { Expander } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { formatBalance } from '@polkadot/util';
 
@@ -37,12 +38,14 @@ export default function Checks ({ accountId, className, extrinsic }: Props): Rea
   }
 
   return (
-    <details className={className}>
-      <summary>
+    <Expander
+      className={className}
+      summary={
         <Trans i18nKey='feesForSubmission'>
           Fees of <span className='highlight'>{formatBalance(dispatchInfo.partialFee, { withSiFull: true })}</span> will be applied to the submission
         </Trans>
-      </summary>
-    </details>
+      }
+      withDot
+    />
   );
 }
diff --git a/packages/react-signer/src/Transaction.tsx b/packages/react-signer/src/Transaction.tsx
index 99bd5852aa..f53bc1e8a3 100644
--- a/packages/react-signer/src/Transaction.tsx
+++ b/packages/react-signer/src/Transaction.tsx
@@ -9,7 +9,7 @@ import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
 import { registry } from '@polkadot/react-api';
-import { Call, InputAddress, Modal } from '@polkadot/react-components';
+import { Call, InputAddress, Expander, Modal } from '@polkadot/react-components';
 
 import Checks from './Checks';
 import { useTranslation } from './translate';
@@ -66,19 +66,23 @@ function Transaction ({ children, className, hideDetails, isSendable, onError, v
               withLabel
             />
           )}
-          <details className='tx-details'>
-            <summary>
-              {t('Sending transaction')} <span className='highlight'>{section}.{method}({
-                meta?.args.map(({ name }) => name).join(', ') || ''
-              })</span>
-            </summary>
+          <Expander
+            className='tx-details'
+            summary={
+              <>
+                {t('Sending transaction')} <span className='highlight'>{section}.{method}({
+                  meta?.args.map(({ name }) => name).join(', ') || ''
+                })</span>
+              </>
+            }
+          >
             {formatMeta(meta)}
             <Call
               onError={onError}
               value={extrinsic}
               withBorder={false}
             />
-          </details>
+          </Expander>
         </>
       )}
       {!hideDetails && !isUnsigned && (
@@ -99,7 +103,7 @@ export default React.memo(styled(Transaction)`
   .tx-details {
     margin-left: 2rem;
 
-    summary {
+    .ui--Expander-summary {
       font-size: 1.1rem;
       margin: 0.5rem 0;
     }