diff --git a/client/src/components/UIPatterns/UIPatterns.js b/client/src/components/UIPatterns/UIPatterns.js
index 9d49aa1b2f..e7415b17a5 100644
--- a/client/src/components/UIPatterns/UIPatterns.js
+++ b/client/src/components/UIPatterns/UIPatterns.js
@@ -1,5 +1,6 @@
import React from 'react';
import UIPatternsMessage from './UIPatternsMessage';
+import UIPatternsDescriptionList from './UIPatternsDescriptionList';
import UIPatternsDropdownSelector from './UIPatternsDropdownSelector';
import './UIPatterns.module.scss';
@@ -11,18 +12,20 @@ function UIPatterns() {
-
-
DropdownSelector
-
+
DropdownSelector
+
+
+
DescriptionList
+
+
+
+
+ - Vertical Layout & Default Density
+ -
+
+
+
+
+ - Vertical Layout & Compact Density
+ -
+
+
+
+
+ - Vertical Layout & Compact Density - Narrow Container
+ -
+
+
+
+
+
+ - Horizontal Layout & Default Density
+ -
+
+
+ - Horizontal Layout & Compact Density
+ -
+
+
+ - Horizontal Layout & Compact Density - Narrow Container
+ -
+
+
+
+
+ {Object.keys(data).map(key => (
+
+ -
+ {key}
+
+ -
+ {data[key]}
+
+
+ ))}
+
+ );
+};
+DescriptionList.propTypes = {
+ /** Additional className for the root element */
+ className: PropTypes.string,
+ /** Selector type */
+ /* FAQ: We can support any values, even a component */
+ // eslint-disable-next-line react/forbid-prop-types
+ data: PropTypes.object.isRequired,
+ /** Layout density */
+ density: PropTypes.oneOf(DENSITIES),
+ /** Layout direction */
+ direction: PropTypes.oneOf(DIRECTIONS)
+};
+DescriptionList.defaultProps = {
+ className: '',
+ density: DEFAULT_DENSITY,
+ direction: DEFAULT_DIRECTION
+};
+
+export default DescriptionList;
diff --git a/client/src/components/_common/DescriptionList/DescriptionList.module.css b/client/src/components/_common/DescriptionList/DescriptionList.module.css
new file mode 100644
index 0000000000..628c79a5ee
--- /dev/null
+++ b/client/src/components/_common/DescriptionList/DescriptionList.module.css
@@ -0,0 +1,55 @@
+.container {
+ /* … */
+}
+
+/* Children */
+
+.key {
+ composes: u-ellipsis from '../../../styles/trumps/_u-ellipsis.scss';
+
+ font-weight: 500;
+ text-overflow: ':';
+}
+.key::after {
+ content: ':';
+ display: inline;
+ margin-right: 0.25em;
+}
+.is-horz .value {
+ white-space: nowrap;
+}
+
+/* Types */
+
+.is-vert {
+ /* … */
+}
+.is-horz {
+ display: flex;
+ flex-direction: row;
+}
+.is-horz .key ~ .key::before {
+ content: '|';
+ display: inline-block;
+}
+.is-horz.is-narrow .key ~ .key::before {
+ margin-left: 0.5em;
+ margin-right: 0.5em;
+}
+.is-horz.is-wide .key ~ .key::before {
+ margin-left: 1em;
+ margin-right: 1em;
+}
+
+.is-vert.is-narrow .value {
+ /* TODO: Support mixins, but prevent SCSS pollution in `src/styles/` */
+ /* HACK: CSS Modules will NOT compose with nested classes */
+ /* composes: u-ellipsis from '../../../styles/trumps/_u-ellipsis.scss'; */
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+/* Overwrite Bootstrap `_reboot.scss` */
+.is-vert.is-narrow .value { margin-left: 0; }
+.is-vert.is-wide .value { margin-left: 2.5rem; } /* 40px Firefox default */
diff --git a/client/src/components/_common/DescriptionList/DescriptionList.test.js b/client/src/components/_common/DescriptionList/DescriptionList.test.js
new file mode 100644
index 0000000000..4c05cb713b
--- /dev/null
+++ b/client/src/components/_common/DescriptionList/DescriptionList.test.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DescriptionList, * as DL from './DescriptionList';
+
+const DATA = {
+ Username: 'bobward500',
+ Prefix: 'Mr.',
+ Name: 'Bob Ward',
+ Suffix: 'The 5th'
+};
+
+describe('Description List', () => {
+ it('has accurate tags', async () => {
+ const { getByTestId, findAllByTestId } = render();
+ const list = getByTestId('list');
+ const keys = await findAllByTestId('key');
+ const values = await findAllByTestId('value');
+ expect(list).toBeDefined();
+ expect(list.tagName).toEqual('DL');
+ keys.forEach( key => {
+ expect(key.tagName).toEqual('DT');
+ });
+ values.forEach( value => {
+ expect(value.tagName).toEqual('DD');
+ });
+ });
+ it.each(DL.DIRECTIONS)('has accurate className when direction is "%s"', direction => {
+ const { getByTestId, findAllByTestId } = render();
+ const list = getByTestId('list');
+ const className = DL.DIRECTION_CLASS_MAP[direction || DL.DEFAULT_DIRECTION];
+ expect(list).toBeDefined();
+ expect(list.className).toMatch(className);
+ });
+ it.each(DL.DENSITIES)('has accurate className when density is "%s"', density => {
+ const { getByTestId, findAllByTestId } = render();
+ const list = getByTestId('list');
+ const className = DL.DENSITY_CLASS_MAP[density || DL.DEFAULT_DENSITY];
+ expect(list).toBeDefined();
+ expect(list.className).toMatch(className);
+ });
+});
diff --git a/client/src/components/_common/DescriptionList/index.js b/client/src/components/_common/DescriptionList/index.js
new file mode 100644
index 0000000000..24ce8f7a0e
--- /dev/null
+++ b/client/src/components/_common/DescriptionList/index.js
@@ -0,0 +1,3 @@
+import DescriptionList from './DescriptionList';
+
+export default DescriptionList;
diff --git a/client/src/components/_common/index.js b/client/src/components/_common/index.js
index 55e9a3cb0c..e97c19dd19 100644
--- a/client/src/components/_common/index.js
+++ b/client/src/components/_common/index.js
@@ -7,4 +7,5 @@ export { default as InfiniteScrollTable } from './InfiniteScrollTable';
export { default as AppIcon } from './AppIcon';
export { default as Icon } from './Icon';
export { default as Message } from './Message';
+export { default as DescriptionList } from './DescriptionList';
export { default as DropdownSelector } from './DropdownSelector';