From f2554e5fde007ec831d3e4a4ac84d718135733b4 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 30 Jul 2020 12:20:42 -0500
Subject: [PATCH 1/9] FP-557: New `<dl>` Component

---
 .../src/components/UIPatterns/UIPatterns.js   |  9 +++++
 .../UIPatternsDescriptionList.js              | 30 +++++++++++++++
 .../UIPatternsDescriptionList/index.js        |  1 +
 .../DescriptionList/DescriptionList.js        | 38 +++++++++++++++++++
 .../DescriptionList.module.css                | 36 ++++++++++++++++++
 .../DescriptionList/DescriptionList.test.js   | 17 +++++++++
 .../_common/DescriptionList/index.js          |  3 ++
 client/src/components/_common/index.js        |  1 +
 8 files changed, 135 insertions(+)
 create mode 100644 client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js
 create mode 100644 client/src/components/UIPatterns/UIPatternsDescriptionList/index.js
 create mode 100644 client/src/components/_common/DescriptionList/DescriptionList.js
 create mode 100644 client/src/components/_common/DescriptionList/DescriptionList.module.css
 create mode 100644 client/src/components/_common/DescriptionList/DescriptionList.test.js
 create mode 100644 client/src/components/_common/DescriptionList/index.js

diff --git a/client/src/components/UIPatterns/UIPatterns.js b/client/src/components/UIPatterns/UIPatterns.js
index d12fc0cb21..fa051d7c4d 100644
--- a/client/src/components/UIPatterns/UIPatterns.js
+++ b/client/src/components/UIPatterns/UIPatterns.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import UIPatternsMessages from './UIPatternsMessages';
+import UIPatternsDescriptionList from './UIPatternsDescriptionList';
 import './UIPatterns.module.scss';
 
 function UIPatterns() {
@@ -16,6 +17,14 @@ function UIPatterns() {
           <UIPatternsMessages />
         </div>
       </div>
+      <div styleName="items">
+        <div styleName="grid-item">
+          <div styleName="item-header">
+            <h6>DescriptionList</h6>
+          </div>
+          <UIPatternsDescriptionList />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js b/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js
new file mode 100644
index 0000000000..bffef19189
--- /dev/null
+++ b/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { DescriptionList } from '_common';
+
+const DATA = {
+  Username: 'bobward500',
+  Prefix: 'Mr.',
+  Name: 'Bob Ward',
+  Suffix: 'The 5th'
+};
+
+function UIPatternsDropdownSelector() {
+  return (
+    <dl>
+      <dt>
+        Default Layout (<code>block</code>)
+      </dt>
+      <dd>
+        <DescriptionList data={DATA} />
+      </dd>
+      <dt>
+        Inline Layout (<code>inline</code>)
+      </dt>
+      <dd>
+        <DescriptionList data={DATA} layout="inline" />
+      </dd>
+    </dl>
+  );
+}
+
+export default UIPatternsDropdownSelector;
diff --git a/client/src/components/UIPatterns/UIPatternsDescriptionList/index.js b/client/src/components/UIPatterns/UIPatternsDescriptionList/index.js
new file mode 100644
index 0000000000..6522921857
--- /dev/null
+++ b/client/src/components/UIPatterns/UIPatternsDescriptionList/index.js
@@ -0,0 +1 @@
+export { default } from './UIPatternsDescriptionList';
diff --git a/client/src/components/_common/DescriptionList/DescriptionList.js b/client/src/components/_common/DescriptionList/DescriptionList.js
new file mode 100644
index 0000000000..234196a323
--- /dev/null
+++ b/client/src/components/_common/DescriptionList/DescriptionList.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './DescriptionList.module.css';
+
+export const LAYOUTS = ['', 'block', 'inline'];
+export const DEFAULT_LAYOUT = 'block';
+
+const DescriptionList = ({ className, data, layout }) => {
+  const isInline = layout === 'inline';
+  const modifierClass = isInline ? 'is-inline' : 'is-block';
+
+  return (
+    <dl styleName={`container ${modifierClass}`} className={className}>
+      {Object.keys(data).map(key => (
+        <React.Fragment key={key}>
+          <dt styleName="key">{key}</dt>
+          <dd styleName="value">{data[key]}</dd>
+        </React.Fragment>
+      ))}
+    </dl>
+  );
+};
+DescriptionList.propTypes = {
+  /** Additional className for the root element */
+  className: PropTypes.string,
+  /** Selector type */
+  /* FAQ: ESLint prevents `PropTypes.object`, so convert values to strings */
+  data: PropTypes.objectOf(PropTypes.string).isRequired,
+  /** Selector type */
+  layout: PropTypes.oneOf(LAYOUTS)
+};
+DescriptionList.defaultProps = {
+  className: '',
+  layout: DEFAULT_LAYOUT
+};
+
+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..27f1b813c6
--- /dev/null
+++ b/client/src/components/_common/DescriptionList/DescriptionList.module.css
@@ -0,0 +1,36 @@
+.container {
+  /* … */
+}
+
+/* Children */
+
+.key,
+.value {
+  composes: u-ellipsis from '../../../styles/trumps/_u-ellipsis.scss';
+}
+.key {
+  font-weight: 500;
+}
+.key::after {
+  content: ':';
+  display: inline;
+  margin-right: 0.25em;
+}
+
+/* Types */
+
+.is-inline {
+  display: flex;
+  flex-direction: row;
+}
+.is-inline .key ~ .key::before {
+  content: '|';
+  display: inline-block;
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+}
+
+.is-block dd.value {
+  margin-left: 2.5rem; /* overwrite Bootstrap `_reboot.scss` */
+                       /* 40px Firefox browser 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..781fc31849
--- /dev/null
+++ b/client/src/components/_common/DescriptionList/DescriptionList.test.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DescriptionList, { LAYOUTS } from './DescriptionList';
+
+describe('Description List', () => {
+  it.each(LAYOUTS)('has accurate tag and attributes when layout is "%s"', layout => {
+    const { getByTestId } = render(<DescriptionList layout={layout} />);
+    const root = getByTestId('selector');
+    expect(root).toBeDefined();
+    expect(root.tagName).toEqual('DL');
+    if (layout === 'inline') {
+      expect(root.getAttribute('multiple')).toBe(''); // i.e. true
+    } else {
+      expect(root.getAttribute('multiple')).toBe(null); // i.e. false
+    }
+  });
+});
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 610d2ec319..d2b9c49a60 100644
--- a/client/src/components/_common/index.js
+++ b/client/src/components/_common/index.js
@@ -7,3 +7,4 @@ 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';

From ae17f22a96244e107617603529c0da2079117e2a Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 30 Jul 2020 13:00:16 -0500
Subject: [PATCH 2/9] FP-557: Finish Unit Tests

---
 .../DescriptionList/DescriptionList.js        | 14 +++++++---
 .../DescriptionList/DescriptionList.test.js   | 26 +++++++++++++------
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/client/src/components/_common/DescriptionList/DescriptionList.js b/client/src/components/_common/DescriptionList/DescriptionList.js
index 234196a323..f6adbb7db4 100644
--- a/client/src/components/_common/DescriptionList/DescriptionList.js
+++ b/client/src/components/_common/DescriptionList/DescriptionList.js
@@ -11,11 +11,19 @@ const DescriptionList = ({ className, data, layout }) => {
   const modifierClass = isInline ? 'is-inline' : 'is-block';
 
   return (
-    <dl styleName={`container ${modifierClass}`} className={className}>
+    <dl
+      styleName={`container ${modifierClass}`}
+      className={className}
+      data-testid="list"
+    >
       {Object.keys(data).map(key => (
         <React.Fragment key={key}>
-          <dt styleName="key">{key}</dt>
-          <dd styleName="value">{data[key]}</dd>
+          <dt styleName="key" data-testid="key">
+            {key}
+          </dt>
+          <dd styleName="value" data-testid="value">
+            {data[key]}
+          </dd>
         </React.Fragment>
       ))}
     </dl>
diff --git a/client/src/components/_common/DescriptionList/DescriptionList.test.js b/client/src/components/_common/DescriptionList/DescriptionList.test.js
index 781fc31849..5eeacbd06e 100644
--- a/client/src/components/_common/DescriptionList/DescriptionList.test.js
+++ b/client/src/components/_common/DescriptionList/DescriptionList.test.js
@@ -2,16 +2,26 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import DescriptionList, { LAYOUTS } from './DescriptionList';
 
+const DATA = {
+  Username: 'bobward500',
+  Prefix: 'Mr.',
+  Name: 'Bob Ward',
+  Suffix: 'The 5th'
+};
+
 describe('Description List', () => {
-  it.each(LAYOUTS)('has accurate tag and attributes when layout is "%s"', layout => {
-    const { getByTestId } = render(<DescriptionList layout={layout} />);
-    const root = getByTestId('selector');
+  it.each(LAYOUTS)('has accurate tags when layout is "%s"', async layout => {
+    const { getByTestId, findAllByTestId } = render(<DescriptionList data={DATA} layout={layout} />);
+    const root = getByTestId('list');
+    const keys = await findAllByTestId('key');
+    const values = await findAllByTestId('value');
     expect(root).toBeDefined();
     expect(root.tagName).toEqual('DL');
-    if (layout === 'inline') {
-      expect(root.getAttribute('multiple')).toBe(''); // i.e. true
-    } else {
-      expect(root.getAttribute('multiple')).toBe(null); // i.e. false
-    }
+    keys.forEach( key => {
+      expect(key.tagName).toEqual('DT');
+    });
+    values.forEach( value => {
+      expect(value.tagName).toEqual('DD');
+    });
   });
 });

From fd2a88b415fa8719415da4acb11a297520ce05c9 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 30 Jul 2020 13:04:55 -0500
Subject: [PATCH 3/9] Quick: Allow `composes` to Pass CSS LInter

---
 client/.stylelintrc.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/.stylelintrc.js b/client/.stylelintrc.js
index 0f1cdef1b9..0efe360d3e 100644
--- a/client/.stylelintrc.js
+++ b/client/.stylelintrc.js
@@ -42,7 +42,9 @@ module.exports = {
 
     // PROPERTY
     // Disallow unknown properties.
-    // 'property-no-unknown': null,
+    'property-no-unknown': [ true, {
+      ignoreProperties: ['composes']
+    }],
 
     // KEYFRAME DECLARATION
     // Disallow !important within keyframe declarations.

From bbc86c0209ba1e96c295e54aa1db6222e48095b3 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 30 Jul 2020 16:46:32 -0500
Subject: [PATCH 4/9] FP-557: Support all values (even components)

---
 .../UIPatternsDescriptionList/UIPatternsDescriptionList.js  | 6 ++++--
 .../components/_common/DescriptionList/DescriptionList.js   | 5 +++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js b/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js
index bffef19189..4a23c83478 100644
--- a/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js
+++ b/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js
@@ -1,11 +1,13 @@
 import React from 'react';
-import { DescriptionList } from '_common';
+import { DescriptionList, Icon } from '_common';
 
 const DATA = {
   Username: 'bobward500',
   Prefix: 'Mr.',
   Name: 'Bob Ward',
-  Suffix: 'The 5th'
+  Suffix: 'The 5th',
+  'Favorite Numeric Value': 5,
+  Icon: <Icon name="dashboard" />
 };
 
 function UIPatternsDropdownSelector() {
diff --git a/client/src/components/_common/DescriptionList/DescriptionList.js b/client/src/components/_common/DescriptionList/DescriptionList.js
index f6adbb7db4..7fad06212c 100644
--- a/client/src/components/_common/DescriptionList/DescriptionList.js
+++ b/client/src/components/_common/DescriptionList/DescriptionList.js
@@ -33,8 +33,9 @@ DescriptionList.propTypes = {
   /** Additional className for the root element */
   className: PropTypes.string,
   /** Selector type */
-  /* FAQ: ESLint prevents `PropTypes.object`, so convert values to strings */
-  data: PropTypes.objectOf(PropTypes.string).isRequired,
+  /* FAQ: ESLint prevents `PropTypes.object`, but we want to support anything */
+  // eslint-disable-next-line react/forbid-prop-types
+  data: PropTypes.object.isRequired,
   /** Selector type */
   layout: PropTypes.oneOf(LAYOUTS)
 };

From 566537b939bd6e6966c016bc4522d4f2905e2186 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 30 Jul 2020 18:57:06 -0500
Subject: [PATCH 5/9] FP-557: Replace layout with direction. Add density

---
 .../UIPatternsDescriptionList.js              | 53 ++++++++++++++-----
 .../UIPatternsDescriptionList.module.css      | 10 ++++
 .../DescriptionList/DescriptionList.js        | 25 +++++----
 .../DescriptionList.module.css                | 31 +++++++----
 4 files changed, 87 insertions(+), 32 deletions(-)
 create mode 100644 client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.module.css

diff --git a/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js b/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js
index 4a23c83478..684b0ca6b1 100644
--- a/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js
+++ b/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { DescriptionList, Icon } from '_common';
 
+import './UIPatternsDescriptionList.module.css';
+
 const DATA = {
   Username: 'bobward500',
   Prefix: 'Mr.',
@@ -12,20 +14,43 @@ const DATA = {
 
 function UIPatternsDropdownSelector() {
   return (
-    <dl>
-      <dt>
-        Default Layout (<code>block</code>)
-      </dt>
-      <dd>
-        <DescriptionList data={DATA} />
-      </dd>
-      <dt>
-        Inline Layout (<code>inline</code>)
-      </dt>
-      <dd>
-        <DescriptionList data={DATA} layout="inline" />
-      </dd>
-    </dl>
+    <>
+      <div styleName="list-cols">
+        <dl>
+          <dt>Vertical Layout & Default Density</dt>
+          <dd>
+            <DescriptionList data={DATA} />
+          </dd>
+        </dl>
+        <dl>
+          <dt>Vertical Layout & Compact Density</dt>
+          <dd>
+            <DescriptionList
+              data={DATA}
+              density="compact"
+              styleName="item-x-narrow"
+            />
+          </dd>
+        </dl>
+      </div>
+      <div styleName="list-rows">
+        <dl>
+          <dt>Horizontal Layout & Default Density</dt>
+          <dd>
+            <DescriptionList data={DATA} direction="horizontal" />
+          </dd>
+          <dt>Horizontal Layout & Compact Density</dt>
+          <dd>
+            <DescriptionList
+              data={DATA}
+              density="compact"
+              direction="horizontal"
+              styleName="item-narrow"
+            />
+          </dd>
+        </dl>
+      </div>
+    </>
   );
 }
 
diff --git a/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.module.css b/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.module.css
new file mode 100644
index 0000000000..0bfe51c59c
--- /dev/null
+++ b/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.module.css
@@ -0,0 +1,10 @@
+/* Force narrow widths to trigger density features */
+.item-narrow { width: 500px; }
+.item-x-narrow { width: 7ch; }
+
+/* Align vertical lists left-to-right, or top-to-bottom */
+.list-cols,
+.list-rows { display: flex; }
+.list-cols > * { flex-grow: 1; }
+.list-cols { flex-direction: row; }
+.list-rows { flex-direction: column; }
diff --git a/client/src/components/_common/DescriptionList/DescriptionList.js b/client/src/components/_common/DescriptionList/DescriptionList.js
index 7fad06212c..11eb85b545 100644
--- a/client/src/components/_common/DescriptionList/DescriptionList.js
+++ b/client/src/components/_common/DescriptionList/DescriptionList.js
@@ -3,16 +3,20 @@ import PropTypes from 'prop-types';
 
 import './DescriptionList.module.css';
 
-export const LAYOUTS = ['', 'block', 'inline'];
-export const DEFAULT_LAYOUT = 'block';
+export const DIRECTIONS = ['', 'vertical', 'horizontal'];
+export const DEFAULT_DIRECTION = 'vertical';
+export const DENSITIES = ['', 'compact', 'default'];
+export const DEFAULT_DENSITY = 'default';
 
-const DescriptionList = ({ className, data, layout }) => {
-  const isInline = layout === 'inline';
-  const modifierClass = isInline ? 'is-inline' : 'is-block';
+const DescriptionList = ({ className, data, density, direction }) => {
+  const modifierClasses = [];
+  modifierClasses.push(direction === 'horizontal' ? 'is-horz' : 'is-vert');
+  modifierClasses.push(density === 'compact' ? 'is-narrow' : 'is-wide');
+  const containerStyleNames = ['container', ...modifierClasses].join(' ');
 
   return (
     <dl
-      styleName={`container ${modifierClass}`}
+      styleName={containerStyleNames}
       className={className}
       data-testid="list"
     >
@@ -36,12 +40,15 @@ DescriptionList.propTypes = {
   /* FAQ: ESLint prevents `PropTypes.object`, but we want to support anything */
   // eslint-disable-next-line react/forbid-prop-types
   data: PropTypes.object.isRequired,
-  /** Selector type */
-  layout: PropTypes.oneOf(LAYOUTS)
+  /** Layout density */
+  density: PropTypes.oneOf(DENSITIES),
+  /** Layout direction */
+  direction: PropTypes.oneOf(DIRECTIONS)
 };
 DescriptionList.defaultProps = {
   className: '',
-  layout: DEFAULT_LAYOUT
+  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
index 27f1b813c6..f26471a76a 100644
--- a/client/src/components/_common/DescriptionList/DescriptionList.module.css
+++ b/client/src/components/_common/DescriptionList/DescriptionList.module.css
@@ -4,33 +4,46 @@
 
 /* Children */
 
-.key,
-.value {
-  composes: u-ellipsis from '../../../styles/trumps/_u-ellipsis.scss';
-}
 .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-inline {
+.is-vert {
+  /* … */
+}
+.is-horz {
   display: flex;
   flex-direction: row;
 }
-.is-inline .key ~ .key::before {
+.is-horz .key ~ .key::before {
   content: '|';
   display: inline-block;
   margin-left: 0.5em;
   margin-right: 0.5em;
 }
 
-.is-block dd.value {
-  margin-left: 2.5rem; /* overwrite Bootstrap `_reboot.scss` */
-                       /* 40px Firefox browser default */
+.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 */

From 0bd130d5bd02d86bd45327ceceaf47eef26646d6 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 30 Jul 2020 19:09:54 -0500
Subject: [PATCH 6/9] Quick: Reduce complex UIPatterns CSS (fix Safari)

---
 .../UIPatterns/UIPatterns.module.scss         | 30 ++++---------------
 1 file changed, 6 insertions(+), 24 deletions(-)

diff --git a/client/src/components/UIPatterns/UIPatterns.module.scss b/client/src/components/UIPatterns/UIPatterns.module.scss
index 8cebe99e59..977aded623 100644
--- a/client/src/components/UIPatterns/UIPatterns.module.scss
+++ b/client/src/components/UIPatterns/UIPatterns.module.scss
@@ -1,30 +1,12 @@
-/* This is a CSS Modules, and minimal, version of the Dashboard stylesheet */
+/* This is a version of the Dashboard stylesheet with these changes:
+    - CSS Modules
+    - minimal
+    - no flexbox
+*/
 
 .container {
-  display: flex;
-  flex-direction: column;
-
   padding: 20px 40px 0 25px;
 }
-.items {
-  /* As a flex item */
-  flex-grow: 1;
-
-  /* As a flex container */
-  display: flex;
-  flex-direction: column;
-}
-/* Make bottom-most item fill up remaining vertical space */
-.items > :last-child {
-  flex-grow: 1;
-}
-
-.header,
-.item-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-}
 
 .header {
   border-bottom: 1px solid #707070;
@@ -34,7 +16,7 @@
   font-weight: 400;
 }
 
-/* FAQ: Indirect child element of `.dashboard-items` */
+/* FAQ: Ancestor of `.dashboard-items` */
 /* RFC: Class name `.dashboard-item` (to coincide with `.dashboard-items`) */
 .grid-item {
   margin-top: 20px;

From e6648ba03fc235f0f2189dd51d2cbaf65d6f2519 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 30 Jul 2020 19:40:23 -0500
Subject: [PATCH 7/9] FP-557: Dry script. Update tests.

---
 .../DescriptionList/DescriptionList.js        | 19 ++++++++++----
 .../DescriptionList/DescriptionList.test.js   | 26 ++++++++++++++-----
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/client/src/components/_common/DescriptionList/DescriptionList.js b/client/src/components/_common/DescriptionList/DescriptionList.js
index 11eb85b545..f5ddd057dd 100644
--- a/client/src/components/_common/DescriptionList/DescriptionList.js
+++ b/client/src/components/_common/DescriptionList/DescriptionList.js
@@ -3,15 +3,24 @@ import PropTypes from 'prop-types';
 
 import './DescriptionList.module.css';
 
-export const DIRECTIONS = ['', 'vertical', 'horizontal'];
+export const DIRECTION_CLASS_MAP = {
+  vertical: 'is-vert',
+  horizontal: 'is-horz'
+};
 export const DEFAULT_DIRECTION = 'vertical';
-export const DENSITIES = ['', 'compact', 'default'];
+export const DIRECTIONS = ['', ...Object.keys(DIRECTION_CLASS_MAP)];
+
+export const DENSITY_CLASS_MAP = {
+  compact: 'is-narrow',
+  default: 'is-wide'
+};
 export const DEFAULT_DENSITY = 'default';
+export const DENSITIES = ['', ...Object.keys(DENSITY_CLASS_MAP)];
 
 const DescriptionList = ({ className, data, density, direction }) => {
   const modifierClasses = [];
-  modifierClasses.push(direction === 'horizontal' ? 'is-horz' : 'is-vert');
-  modifierClasses.push(density === 'compact' ? 'is-narrow' : 'is-wide');
+  modifierClasses.push(DENSITY_CLASS_MAP[density || DEFAULT_DENSITY]);
+  modifierClasses.push(DIRECTION_CLASS_MAP[direction || DEFAULT_DIRECTION]);
   const containerStyleNames = ['container', ...modifierClasses].join(' ');
 
   return (
@@ -37,7 +46,7 @@ DescriptionList.propTypes = {
   /** Additional className for the root element */
   className: PropTypes.string,
   /** Selector type */
-  /* FAQ: ESLint prevents `PropTypes.object`, but we want to support anything */
+  /* FAQ: We can support any values, even a component */
   // eslint-disable-next-line react/forbid-prop-types
   data: PropTypes.object.isRequired,
   /** Layout density */
diff --git a/client/src/components/_common/DescriptionList/DescriptionList.test.js b/client/src/components/_common/DescriptionList/DescriptionList.test.js
index 5eeacbd06e..4c05cb713b 100644
--- a/client/src/components/_common/DescriptionList/DescriptionList.test.js
+++ b/client/src/components/_common/DescriptionList/DescriptionList.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DescriptionList, { LAYOUTS } from './DescriptionList';
+import DescriptionList, * as DL from './DescriptionList';
 
 const DATA = {
   Username: 'bobward500',
@@ -10,13 +10,13 @@ const DATA = {
 };
 
 describe('Description List', () => {
-  it.each(LAYOUTS)('has accurate tags when layout is "%s"', async layout => {
-    const { getByTestId, findAllByTestId } = render(<DescriptionList data={DATA} layout={layout} />);
-    const root = getByTestId('list');
+  it('has accurate tags', async () => {
+    const { getByTestId, findAllByTestId } = render(<DescriptionList data={DATA} />);
+    const list = getByTestId('list');
     const keys = await findAllByTestId('key');
     const values = await findAllByTestId('value');
-    expect(root).toBeDefined();
-    expect(root.tagName).toEqual('DL');
+    expect(list).toBeDefined();
+    expect(list.tagName).toEqual('DL');
     keys.forEach( key => {
       expect(key.tagName).toEqual('DT');
     });
@@ -24,4 +24,18 @@ describe('Description List', () => {
       expect(value.tagName).toEqual('DD');
     });
   });
+  it.each(DL.DIRECTIONS)('has accurate className when direction is "%s"', direction => {
+    const { getByTestId, findAllByTestId } = render(<DescriptionList data={DATA} direction={direction} />);
+    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(<DescriptionList data={DATA} density={density} />);
+    const list = getByTestId('list');
+    const className = DL.DENSITY_CLASS_MAP[density || DL.DEFAULT_DENSITY];
+    expect(list).toBeDefined();
+    expect(list.className).toMatch(className);
+  });
 });

From 252de276d189455f62d544e28db97929bdd95d38 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 30 Jul 2020 19:53:02 -0500
Subject: [PATCH 8/9] FP-557: Distinguish Narrow vs Not Narrow Container

---
 .../UIPatternsDescriptionList.js                   | 14 ++++++++++++++
 .../DescriptionList/DescriptionList.module.css     |  6 ++++++
 2 files changed, 20 insertions(+)

diff --git a/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js b/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js
index 684b0ca6b1..70550fb1be 100644
--- a/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js
+++ b/client/src/components/UIPatterns/UIPatternsDescriptionList/UIPatternsDescriptionList.js
@@ -24,6 +24,12 @@ function UIPatternsDropdownSelector() {
         </dl>
         <dl>
           <dt>Vertical Layout & Compact Density</dt>
+          <dd>
+            <DescriptionList data={DATA} density="compact" />
+          </dd>
+        </dl>
+        <dl>
+          <dt>Vertical Layout & Compact Density - Narrow Container</dt>
           <dd>
             <DescriptionList
               data={DATA}
@@ -40,6 +46,14 @@ function UIPatternsDropdownSelector() {
             <DescriptionList data={DATA} direction="horizontal" />
           </dd>
           <dt>Horizontal Layout & Compact Density</dt>
+          <dd>
+            <DescriptionList
+              data={DATA}
+              density="compact"
+              direction="horizontal"
+            />
+          </dd>
+          <dt>Horizontal Layout & Compact Density - Narrow Container</dt>
           <dd>
             <DescriptionList
               data={DATA}
diff --git a/client/src/components/_common/DescriptionList/DescriptionList.module.css b/client/src/components/_common/DescriptionList/DescriptionList.module.css
index f26471a76a..628c79a5ee 100644
--- a/client/src/components/_common/DescriptionList/DescriptionList.module.css
+++ b/client/src/components/_common/DescriptionList/DescriptionList.module.css
@@ -31,9 +31,15 @@
 .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/` */

From a0dea0ba36bddc0bc4c62db55476845bb09cec27 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 30 Jul 2020 20:10:05 -0500
Subject: [PATCH 9/9] Quick: Remove unused UIPatterns class

---
 client/src/components/UIPatterns/UIPatterns.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/client/src/components/UIPatterns/UIPatterns.js b/client/src/components/UIPatterns/UIPatterns.js
index fa051d7c4d..82c844f534 100644
--- a/client/src/components/UIPatterns/UIPatterns.js
+++ b/client/src/components/UIPatterns/UIPatterns.js
@@ -11,17 +11,13 @@ function UIPatterns() {
       </div>
       <div styleName="items">
         <div styleName="grid-item">
-          <div styleName="item-header">
-            <h6>Messages</h6>
-          </div>
+          <h6>Messages</h6>
           <UIPatternsMessages />
         </div>
       </div>
       <div styleName="items">
         <div styleName="grid-item">
-          <div styleName="item-header">
-            <h6>DescriptionList</h6>
-          </div>
+          <h6>DescriptionList</h6>
           <UIPatternsDescriptionList />
         </div>
       </div>