Add Definition List component (#10291)

ui/app/components/ui/box/box.js

@@ -13,7 +13,7 @@ import {
 
 const ValidSize = PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])
 const ArrayOfValidSizes = PropTypes.arrayOf(ValidSize)
-const MultipleSizes = PropTypes.oneOf([ValidSize, ArrayOfValidSizes])
+const MultipleSizes = PropTypes.oneOfType([ValidSize, ArrayOfValidSizes])
 
 function generateSizeClasses(baseClass, type, main, top, right, bottom, left) {
   const arr = Array.isArray(main) ? main : []

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

@@ -0,0 +1,83 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { omit } from 'lodash'
+import Typography from '../typography'
+import {
+  COLORS,
+  SIZES,
+  TYPOGRAPHY,
+  FONT_WEIGHT,
+} from '../../../helpers/constants/design-system'
+import Tooltip from '../tooltip'
+
+const MARGIN_MAP = {
+  [SIZES.XS]: 0,
+  [SIZES.SM]: 2,
+  [SIZES.MD]: 4,
+  [SIZES.LG]: 6,
+  [SIZES.XL]: 8,
+}
+
+export default function DefinitionList({
+  dictionary,
+  termTypography = {},
+  definitionTypography = {},
+  tooltips = {},
+  gapSize = SIZES.SM,
+}) {
+  return (
+    <dl className="definition-list">
+      {Object.entries(dictionary).map(([term, definition]) => (
+        <React.Fragment key={`definition-for-${term}`}>
+          <Typography
+            variant={TYPOGRAPHY.H6}
+            fontWeight={FONT_WEIGHT.BOLD}
+            {...termTypography}
+            boxProps={{
+              marginTop: 0,
+              marginBottom: 1,
+            }}
+            className="definition-list__term"
+            tag="dt"
+          >
+            {term}
+            {tooltips[term] && (
+              <Tooltip
+                title={tooltips[term]}
+                position="top"
+                containerClassName="definition-list__tooltip-wrapper"
+              >
+                <i className="fas fa-info-circle" />
+              </Tooltip>
+            )}
+          </Typography>
+          <Typography
+            variant={TYPOGRAPHY.H6}
+            color={COLORS.UI4}
+            {...definitionTypography}
+            boxProps={{
+              marginTop: 0,
+              marginBottom: MARGIN_MAP[gapSize],
+            }}
+            className="definition-list__definition"
+            tag="dd"
+          >
+            {definition}
+          </Typography>
+        </React.Fragment>
+      ))}
+    </dl>
+  )
+}
+
+DefinitionList.propTypes = {
+  gapSize: PropTypes.oneOf(Object.values(SIZES)),
+  dictionary: PropTypes.objectOf(PropTypes.string),
+  tooltips: PropTypes.objectOf(PropTypes.string),
+  termTypography: PropTypes.shape({
+    ...omit(Typography.propTypes, ['tag', 'className', 'boxProps']),
+  }),
+  definitionTypography: PropTypes.shape({
+    ...omit(Typography.propTypes, ['tag', 'className', 'boxProps']),
+  }),
+}

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

@@ -0,0 +1,19 @@
+.definition-list {
+  $self: &;
+
+  &__term {
+    display: flex;
+    align-items: center;
+
+    & i {
+      color: $ui-3;
+      margin-left: 6px;
+      font-size: $font-size-h8;
+    }
+
+    & #{$self}__tooltip-wrapper {
+      display: flex !important;
+      align-items: center;
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+import React from 'react'
+import { object, select } from '@storybook/addon-knobs'
+import {
+  COLORS,
+  SIZES,
+  TYPOGRAPHY,
+} from '../../../helpers/constants/design-system'
+import DefinitionList from './definition-list'
+
+export default {
+  title: '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 definitionList = () => (
+  <DefinitionList
+    dictionary={object('dictionary', basic)}
+    gapSize={select('gapSize', SIZES, SIZES.SM)}
+  />
+)
+
+export const withTooltips = () => (
+  <DefinitionList
+    dictionary={object('dictionary', advanced)}
+    tooltips={object('tooltips', tooltips)}
+    gapSize={select('gapSize', SIZES, SIZES.SM)}
+  />
+)
+
+export const withTypographyControl = () => (
+  <DefinitionList
+    dictionary={object('dictionary', advanced)}
+    tooltips={object('tooltips', tooltips)}
+    gapSize={select('gapSize', SIZES, SIZES.SM)}
+    termTypography={{
+      variant: select('termTypography.variant', TYPOGRAPHY, TYPOGRAPHY.H6),
+      color: select('termTypography.color', COLORS, COLORS.BLACK),
+    }}
+    definitionTypography={{
+      variant: select(
+        'definitionTypography.variant',
+        TYPOGRAPHY,
+        TYPOGRAPHY.H6,
+      ),
+      color: select('definitionTypography.color', COLORS, COLORS.BLACK),
+    }}
+  />
+)

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

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

ui/app/components/ui/typography/typography.js

@@ -69,5 +69,7 @@ Typography.propTypes = {
     'h6',
     'span',
     'div',
+    'dt',
+    'dd',
   ]),
 }

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

@@ -13,6 +13,7 @@
 @import 'color-indicator/color-indicator';
 @import 'currency-display/index';
 @import 'currency-input/index';
+@import 'definition-list/definition-list';
 @import 'dialog/dialog';
 @import 'dropdown/dropdown';
 @import 'editable-label/index';