Add Truncated Definition List (#10292)

app/_locales/en/messages.json

@@ -2086,6 +2086,9 @@
   "viewAccount": {
     "message": "View Account"
   },
+  "viewAllDetails": {
+    "message": "View all details"
+  },
   "viewContact": {
     "message": "View Contact"
   },

ui/app/components/ui/truncated-definition-list/index.js

@@ -0,0 +1 @@
+export { default } from './truncated-definition-list'

ui/app/components/ui/truncated-definition-list/truncated-definition-list.js

@@ -0,0 +1,78 @@
+import { pick } from 'lodash'
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { COLORS, SIZES } from '../../../helpers/constants/design-system'
+import Box from '../box'
+import Button from '../button'
+import DefinitionList from '../definition-list/definition-list'
+import Popover from '../popover'
+import { useI18nContext } from '../../../hooks/useI18nContext'
+
+export default function TruncatedDefinitionList({
+  dictionary,
+  tooltips,
+  prefaceKeys,
+  title,
+}) {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+  const t = useI18nContext()
+
+  return (
+    <>
+      <Box
+        margin={6}
+        padding={4}
+        paddingBottom={3}
+        borderRadius={SIZES.LG}
+        borderColor={COLORS.UI2}
+      >
+        <DefinitionList
+          dictionary={pick(dictionary, prefaceKeys)}
+          tooltips={tooltips}
+        />
+        <Button
+          className="truncated-definition-list__view-more"
+          type="link"
+          onClick={() => setIsPopoverOpen(true)}
+        >
+          {t('viewAllDetails')}
+        </Button>
+      </Box>
+      {isPopoverOpen && (
+        <Popover
+          title={title}
+          open={isPopoverOpen}
+          onClose={() => setIsPopoverOpen(false)}
+          footer={
+            <>
+              <div />
+              <Button
+                type="primary"
+                style={{ width: '50%' }}
+                rounded
+                onClick={() => setIsPopoverOpen(false)}
+              >
+                Close
+              </Button>
+            </>
+          }
+        >
+          <Box padding={6} paddingTop={0}>
+            <DefinitionList
+              gap={SIZES.MD}
+              tooltips={tooltips}
+              dictionary={dictionary}
+            />
+          </Box>
+        </Popover>
+      )}
+    </>
+  )
+}
+
+TruncatedDefinitionList.propTypes = {
+  dictionary: DefinitionList.propTypes.dictionary,
+  tooltips: DefinitionList.propTypes.dictionary,
+  title: PropTypes.string,
+  prefaceKeys: PropTypes.arrayOf(PropTypes.string),
+}

ui/app/components/ui/truncated-definition-list/truncated-definition-list.scss

@@ -0,0 +1,9 @@
+.truncated-definition-list {
+  &__view-more {
+    @include H6;
+
+    display: inline-block;
+    padding: 0;
+    width: auto;
+  }
+}

ui/app/components/ui/truncated-definition-list/truncated-definition-list.stories.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import { object, text } from '@storybook/addon-knobs'
+
+import TruncatedDefinitionList from './truncated-definition-list'
+
+export default {
+  title: 'Truncated Definition List',
+}
+
+const basic = {
+  term:
+    'a word or phrase used to describe a thing or to express a concept, especially in a particular kind of language or branch of study.',
+  definition:
+    'a statement of the exact meaning of a word, especially in a dictionary.',
+  dl: 'HTML tag denoting a definition list',
+  dt: 'HTML tag denoting a definition list term',
+  dd: 'HTML tag denoting a definition list definition',
+}
+
+const advanced = {
+  'Network Name': 'Ethereum Mainnet',
+  'Chain ID': '1',
+  Ticker: 'ETH',
+}
+
+const tooltips = {
+  'Network Name': 'The name that is associated with this network',
+  'Chain ID': 'The numeric value representing the ID of this network',
+  Ticker: 'The currency symbol of the primary currency for this network',
+}
+
+export const truncatedDefinitionList = () => (
+  <TruncatedDefinitionList
+    dictionary={object('dictionary', basic)}
+    title={text('title', 'Basic definitions')}
+    prefaceKeys={object('prefaceKeys', ['term', 'definition'])}
+  />
+)
+
+export const withTooltips = () => (
+  <TruncatedDefinitionList
+    dictionary={object('dictionary', advanced)}
+    title={text('title', 'Network Details')}
+    tooltips={object('tooltips', tooltips)}
+    prefaceKeys={object('prefaceKeys', ['Chain ID'])}
+  />
+)

ui/app/components/ui/ui-components.scss

@@ -42,6 +42,7 @@
 @import 'toggle-button/index';
 @import 'token-balance/index';
 @import 'tooltip/index';
+@import 'truncated-definition-list/truncated-definition-list';
 @import 'typography/typography';
 @import 'unit-input/index';
 @import 'url-icon/index';