Cleanup usage of dl/dt/dd (#4415)

Signed-off-by: Mike Kingdom <[email protected]>
grommet · Nov 18, 2024 · 18cba88 · 18cba88
1 parent c65d37f
commit 18cba88
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 126 deletions.
diff --git a/aries-site/src/examples/templates/dashboards/components/Measure.js b/aries-site/src/examples/templates/dashboards/components/Measure.js
@@ -3,45 +3,7 @@ import PropTypes from 'prop-types';
 import { Box, Button, NameValuePair, Text } from 'grommet';
 import { TextEmphasis } from 'aries-core';
 
-export const Measure = ({ name, value: valueProp, onClick, ...rest }) => {
-  const { icon: iconProp, label } = name;
-  const icon = iconProp ? cloneElement(iconProp, { size: 'small' }) : null;
-
-  const value = valueProp?.value || valueProp;
-  const valueSize = valueProp?.size || 'xxlarge';
-
-  let contents = (
-    <NameValuePair
-      name={
-        <Box
-          direction="row"
-          align="center"
-          gap="small"
-          // margin is needed to keep consistent with the spacing
-          // delivered by the theme when name is typeof 'string'
-          // https://github.com/grommet/grommet/blob/db5be926eb7c2f791534f02dd55b0f9997e959db/src/js/themes/base.js#L1072
-          margin={{ bottom: 'xxsmall' }}
-        >
-          {icon}
-          <Text size={name.label?.size || 'small'}>
-            {label?.label || label}
-          </Text>
-        </Box>
-      }
-    >
-      <TextEmphasis size={valueSize}>{value}</TextEmphasis>
-    </NameValuePair>
-  );
-
-  if (onClick) {
-    contents = <Button onClick={onClick}>{contents}</Button>;
-  }
-
-  return <Box {...rest}>{contents}</Box>;
-};
-
-Measure.propTypes = {
-  name: PropTypes.shape({
+const NameType = PropTypes.shape({
     label: PropTypes.oneOfType([
       PropTypes.string.isRequired,
       PropTypes.shape({
@@ -50,14 +12,75 @@ Measure.propTypes = {
       }),
     ]).isRequired,
     icon: PropTypes.node,
-  }),
-  value: PropTypes.oneOfType([
+  });
+const ValueType = PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
     PropTypes.shape({
       value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
       size: PropTypes.string,
     }),
-  ]),
+  ]);
+
+const Name = ({ name }) => {
+  const { icon: iconProp, label } = name;
+  const icon = iconProp ? cloneElement(iconProp, { size: 'small' }) : null;
+
+  return (
+    <Box
+      direction="row"
+      align="center"
+      gap="small"
+      // margin is needed to keep consistent with the spacing
+      // delivered by the theme when name is typeof 'string'
+      // https://github.com/grommet/grommet/blob/db5be926eb7c2f791534f02dd55b0f9997e959db/src/js/themes/base.js#L1072
+      margin={{ bottom: 'xxsmall' }}
+    >
+      {icon}
+      <Text size={label?.size || 'small'}>
+        {label?.label || label}
+      </Text>
+    </Box>
+  );
+};
+
+Name.propTypes = {
+  name: NameType,
+};
+
+const Value = ({ value: valueProp }) => {
+  const value = valueProp?.value || valueProp;
+  const valueSize = valueProp?.size || 'xxlarge';
+
+  return <TextEmphasis size={valueSize}>{value}</TextEmphasis>;
+};
+
+Value.propTypes = {
+  value: ValueType,
+};
+
+export const Measure = ({ name, value, onClick }) => {
+  // If this measure is clickable, render a Button with the Name and Value
+  // rather a NameValuePair since <button> or even another <div> to attach
+  // the onClick which contains a <dt><dd> isn't correct markup.
+  return onClick ? (
+      <Button onClick={onClick}>
+        <>
+          <Name name={name} />
+          <Value value={value} />
+        </>
+      </Button>
+    ) : (
+      <NameValuePair
+        name={<Name name={name} />}
+      >
+        <Value value={value}/>
+      </NameValuePair>
+    );
+};
+
+Measure.propTypes = {
+  name: NameType,
+  value: ValueType,
   onClick: PropTypes.func,
 };
diff --git a/aries-site/src/examples/templates/dashboards/components/StatusBar.js b/aries-site/src/examples/templates/dashboards/components/StatusBar.js
@@ -4,7 +4,7 @@ import {
   Card,
   CardBody,
   CardHeader,
-  NameValueList,
+  Grid,
   ThemeContext,
 } from 'grommet';
 import { DashboardCardHeader } from '.';
@@ -21,13 +21,14 @@ export const StatusBar = ({ children, title, menuItems, ...rest }) => {
         <DashboardCardHeader title={title} level={3} menuItems={menuItems} />
       </CardHeader>
       <CardBody>
-        <NameValueList
-          valueProps={{ width: ['xsmall', 'auto'] }}
-          pairProps={{ direction: 'column' }}
-          layout="grid"
+        <Grid
+          align={undefined}
+          columns={{ count: 'fit', size: ['xsmall', 'auto'] }}
+          gap={{ column: 'large', row: 'medium' }}
+          margin="none"
         >
           {children}
-        </NameValueList>
+        </Grid>
       </CardBody>
     </Card>
   );

diff --git a/aries-site/src/examples/templates/dashboards/content/chartCards/CostByMonth.js b/aries-site/src/examples/templates/dashboards/content/chartCards/CostByMonth.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Grid, DataChart, Text } from 'grommet';
+import { DataChart, Text, Box, NameValueList } from 'grommet';
 import { ChartCard, Measure } from '../../components';
 import {
   convertDatesToFeatures,
@@ -115,49 +115,40 @@ export const CostByMonth = ({ period }) => {
     }
   }, [values]);
 
-  const grid = {
-    columns: ['auto', 'auto'],
-    rows: ['auto', 'auto'],
-    areas: [
-      ['measure', 'projection'],
-      ['chart', 'chart'],
-    ],
-    gap: 'medium',
-  };
-
   return (
     <ChartCard title="Cost by month" subtitle={period}>
-      {values && (
-        <Grid
-          columns={grid.columns}
-          rows={grid.rows}
-          areas={grid.areas}
-          gap={grid.gap}
-        >
+      {values && (     
+        <Box gap="medium">
+          <NameValueList
+            valueProps={{ width: ['xsmall', 'auto'] }}
+            pairProps={{ direction: 'column' }}
+            layout="grid"
+          >
+            <Measure
+              gridArea="measure"
+              name={{ label: { label: 'Monthly Average', size: 'medium' } }}
+              value={{
+                value: formatCurrency(meanCost, Navigator.language),
+                size: 'xlarge',
+              }}
+            />
+            <Measure
+              gridArea="projection"
+              name={{
+                label: { label: 'Projected, Next Month', size: 'medium' },
+              }}
+              value={{
+                value: formatCurrency(projectedCost, Navigator.language),
+                size: 'xlarge',
+              }}
+            />
+          </NameValueList>
           <MonthlySpend
             gridArea="chart"
             reportWindow={reportWindow}
             data={values}
           />
-          <Measure
-            gridArea="measure"
-            name={{ label: { label: 'Monthly Average', size: 'medium' } }}
-            value={{
-              value: formatCurrency(meanCost, Navigator.language),
-              size: 'xlarge',
-            }}
-          />
-          <Measure
-            gridArea="projection"
-            name={{
-              label: { label: 'Projected, Next Month', size: 'medium' },
-            }}
-            value={{
-              value: formatCurrency(projectedCost, Navigator.language),
-              size: 'xlarge',
-            }}
-          />
-        </Grid>
+        </Box>
       )}
     </ChartCard>
   );

diff --git a/aries-site/src/examples/templates/dashboards/content/chartCards/CostByService.js b/aries-site/src/examples/templates/dashboards/content/chartCards/CostByService.js
@@ -1,6 +1,13 @@
 import { useContext, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box, Grid, Meter, ResponsiveContext, ThemeContext } from 'grommet';
+import {
+  Box,
+  Grid,
+  Meter,
+  NameValueList,
+  ResponsiveContext,
+  ThemeContext,
+} from 'grommet';
 import { parseMetricToNum } from 'grommet/utils';
 import { ChartCard, Legend, Measure } from '../../components';
 import {
@@ -155,15 +162,20 @@ export const CostByService = ({ period, notification }) => {
                 size="full"
               />
             </Box>
-            <Measure
+            <NameValueList
+              valueProps={{ width: ['xsmall', 'auto'] }}
+              pairProps={{ direction: 'column' }}
+              layout="grid"
               gridArea="measure"
-              alignSelf="center"
-              name={{ label: { label: 'Total Cost', size: 'medium' } }}
-              value={{
-                value: formatCurrency(totalCost),
-                size: 'xlarge',
-              }}
-            />
+            >
+              <Measure
+                name={{ label: { label: 'Total Cost', size: 'medium' } }}
+                value={{
+                  value: formatCurrency(totalCost),
+                  size: 'xlarge',
+                }}
+              />
+            </NameValueList>
             <Legend gridArea="legend" values={values} />
           </Grid>
         )}

diff --git a/aries-site/src/examples/templates/dashboards/content/chartCards/RulesAudit.js b/aries-site/src/examples/templates/dashboards/content/chartCards/RulesAudit.js
@@ -1,6 +1,6 @@
 import { Fragment, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box, Grid, Meter, Text } from 'grommet';
+import { Box, Meter, NameValueList, Text } from 'grommet';
 import { Calendar } from 'grommet-icons';
 import { TextEmphasis } from 'aries-core';
 import { ChartCard, Measure, MeterGroup } from '../../components';
@@ -88,15 +88,6 @@ export const RulesAudit = ({ period }) => {
     setAuditResults(nextAuditResults);
   }, [rules]);
 
-  const grid = {
-    columns: ['auto', 'auto', 'auto'],
-    rows: ['auto', 'auto'],
-    areas: [
-      ['rules', 'frameworks', 'audits'],
-      ['chart', 'chart', 'chart'],
-    ],
-  };
-
   const nextScheduledAudit = nextAudit && (
     <Box direction="row" gap="xsmall">
       {/* Placing the icon within a Text component ensures the icon is 
@@ -118,29 +109,30 @@ export const RulesAudit = ({ period }) => {
 
   return (
     <ChartCard title="Compliance" subtitle={period} footer={nextScheduledAudit}>
-      <Grid
-        columns={grid.columns}
-        rows={grid.rows}
-        areas={grid.areas}
-        gap="medium"
-      >
-        <Measure
-          gridArea="rules"
-          name={{ label: { label: 'Rules', size: 'medium' } }}
-          value={rules?.length}
-        />
-        <Measure
-          gridArea="frameworks"
-          name={{ label: { label: 'Frameworks', size: 'medium' } }}
-          value={frameworks?.length}
-        />
-        <Measure
-          gridArea="audits"
-          name={{ label: { label: 'Audits', size: 'medium' } }}
-          value={completedAudits?.length}
-        />
+      <Box gap="medium">
+        <NameValueList
+         valueProps={{ width: ['xsmall', 'auto'] }}
+         pairProps={{ direction: 'column' }}
+         layout="grid"
+        >
+          <Measure
+            gridArea="rules"
+            name={{ label: { label: 'Rules', size: 'medium' } }}
+            value={rules?.length}
+          />
+          <Measure
+            gridArea="frameworks"
+            name={{ label: { label: 'Frameworks', size: 'medium' } }}
+            value={frameworks?.length}
+          />
+          <Measure
+            gridArea="audits"
+            name={{ label: { label: 'Audits', size: 'medium' } }}
+            value={completedAudits?.length}
+          />
+        </NameValueList>
         <AuditResultsChart gridArea="chart" data={auditResults} />
-      </Grid>
+      </Box>
     </ChartCard>
   );
 };