From 471140fdea72dcf52c2fce4c9b30540cffc166f9 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Thu, 28 Jan 2021 11:22:37 -0600
Subject: [PATCH] Add Truncated Definition List (#10292)

---
 app/_locales/en/messages.json                 |  3 +
 .../ui/truncated-definition-list/index.js     |  1 +
 .../truncated-definition-list.js              | 78 +++++++++++++++++++
 .../truncated-definition-list.scss            |  9 +++
 .../truncated-definition-list.stories.js      | 47 +++++++++++
 ui/app/components/ui/ui-components.scss       |  1 +
 6 files changed, 139 insertions(+)
 create mode 100644 ui/app/components/ui/truncated-definition-list/index.js
 create mode 100644 ui/app/components/ui/truncated-definition-list/truncated-definition-list.js
 create mode 100644 ui/app/components/ui/truncated-definition-list/truncated-definition-list.scss
 create mode 100644 ui/app/components/ui/truncated-definition-list/truncated-definition-list.stories.js

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index e6ff6ed73..9cd0c2161 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -2086,6 +2086,9 @@
   "viewAccount": {
     "message": "View Account"
   },
+  "viewAllDetails": {
+    "message": "View all details"
+  },
   "viewContact": {
     "message": "View Contact"
   },
diff --git a/ui/app/components/ui/truncated-definition-list/index.js b/ui/app/components/ui/truncated-definition-list/index.js
new file mode 100644
index 000000000..427109d63
--- /dev/null
+++ b/ui/app/components/ui/truncated-definition-list/index.js
@@ -0,0 +1 @@
+export { default } from './truncated-definition-list'
diff --git a/ui/app/components/ui/truncated-definition-list/truncated-definition-list.js b/ui/app/components/ui/truncated-definition-list/truncated-definition-list.js
new file mode 100644
index 000000000..356f1aed1
--- /dev/null
+++ b/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),
+}
diff --git a/ui/app/components/ui/truncated-definition-list/truncated-definition-list.scss b/ui/app/components/ui/truncated-definition-list/truncated-definition-list.scss
new file mode 100644
index 000000000..599d91e23
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/ui/app/components/ui/truncated-definition-list/truncated-definition-list.stories.js b/ui/app/components/ui/truncated-definition-list/truncated-definition-list.stories.js
new file mode 100644
index 000000000..68101ef0d
--- /dev/null
+++ b/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'])}
+  />
+)
diff --git a/ui/app/components/ui/ui-components.scss b/ui/app/components/ui/ui-components.scss
index 3f01126d2..f2fd4c5b0 100644
--- a/ui/app/components/ui/ui-components.scss
+++ b/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';