From 419897cba6f76bb63e5a140763efa59e7b418df1 Mon Sep 17 00:00:00 2001 From: Brad Decker Date: Thu, 28 Jan 2021 09:54:02 -0600 Subject: [PATCH] Add Definition List component (#10291) --- ui/app/components/ui/box/box.js | 2 +- .../ui/definition-list/definition-list.js | 83 +++++++++++++++++++ .../ui/definition-list/definition-list.scss | 19 +++++ .../definition-list.stories.js | 69 +++++++++++++++ ui/app/components/ui/definition-list/index.js | 1 + ui/app/components/ui/typography/typography.js | 2 + ui/app/components/ui/ui-components.scss | 1 + 7 files changed, 176 insertions(+), 1 deletion(-) create mode 100644 ui/app/components/ui/definition-list/definition-list.js create mode 100644 ui/app/components/ui/definition-list/definition-list.scss create mode 100644 ui/app/components/ui/definition-list/definition-list.stories.js create mode 100644 ui/app/components/ui/definition-list/index.js diff --git a/ui/app/components/ui/box/box.js b/ui/app/components/ui/box/box.js index d8a630bad..85567e6c6 100644 --- a/ui/app/components/ui/box/box.js +++ b/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 : [] diff --git a/ui/app/components/ui/definition-list/definition-list.js b/ui/app/components/ui/definition-list/definition-list.js new file mode 100644 index 000000000..4be40cb1b --- /dev/null +++ b/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 ( +
+ {Object.entries(dictionary).map(([term, definition]) => ( + + + {term} + {tooltips[term] && ( + + + + )} + + + {definition} + + + ))} +
+ ) +} + +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']), + }), +} diff --git a/ui/app/components/ui/definition-list/definition-list.scss b/ui/app/components/ui/definition-list/definition-list.scss new file mode 100644 index 000000000..bf154d194 --- /dev/null +++ b/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; + } + } +} diff --git a/ui/app/components/ui/definition-list/definition-list.stories.js b/ui/app/components/ui/definition-list/definition-list.stories.js new file mode 100644 index 000000000..b833e71d3 --- /dev/null +++ b/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 = () => ( + +) + +export const withTooltips = () => ( + +) + +export const withTypographyControl = () => ( + +) diff --git a/ui/app/components/ui/definition-list/index.js b/ui/app/components/ui/definition-list/index.js new file mode 100644 index 000000000..a321da7a8 --- /dev/null +++ b/ui/app/components/ui/definition-list/index.js @@ -0,0 +1 @@ +export { default } from './definition-list' diff --git a/ui/app/components/ui/typography/typography.js b/ui/app/components/ui/typography/typography.js index f3ea8fac7..c6ca4afe8 100644 --- a/ui/app/components/ui/typography/typography.js +++ b/ui/app/components/ui/typography/typography.js @@ -69,5 +69,7 @@ Typography.propTypes = { 'h6', 'span', 'div', + 'dt', + 'dd', ]), } diff --git a/ui/app/components/ui/ui-components.scss b/ui/app/components/ui/ui-components.scss index 09382d2a3..3f01126d2 100644 --- a/ui/app/components/ui/ui-components.scss +++ b/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';