Merge branch 'master' into changsets

grommet · Nov 21, 2024 · 11b6e5a · 11b6e5a
2 parents a9f3063 + 1f7a16c
commit 11b6e5a
Show file tree

Hide file tree

Showing 55 changed files with 6,943 additions and 7,858 deletions.
diff --git a/aries-site/src/examples/foundation/icons/IconPlainExample.js b/aries-site/src/examples/foundation/icons/IconPlainExample.js
@@ -1,11 +1,10 @@
 import React from 'react';
 import { Box } from 'grommet';
-import { Hpe, Aruba, Hpi } from 'grommet-icons';
+import { Hpe, Hpi } from 'grommet-icons';
 
 export const IconPlainExample = () => (
-    <Box direction="row-responsive" gap="medium">
-      <Hpe color="plain" size="large" />
-      <Hpi color="plain" size="large" />
-      <Aruba color="plain" size="large" />
-    </Box>
-  );
+  <Box direction="row-responsive" gap="medium">
+    <Hpe color="plain" size="large" />
+    <Hpi color="plain" size="large" />
+  </Box>
+);
diff --git a/aries-site/src/examples/templates/dashboards/DashboardExample.js b/aries-site/src/examples/templates/dashboards/DashboardExample.js
@@ -1,5 +1,5 @@
 import React, { useContext, useMemo, useState } from 'react';
-import { Box, Button, ResponsiveContext, Text } from 'grommet';
+import { Box, Main, Button, ResponsiveContext, Text } from 'grommet';
 import { defaultUser, GlobalHeader, UserContext } from '../global-header';
 import { DashboardGrid, DashboardFooter, Greeting } from '.';
 
@@ -19,29 +19,31 @@ export const DashboardExample = () => {
     <UserContext.Provider value={contextValue}>
       <Box width={{ max: 'xxlarge' }} margin="auto" fill>
         <GlobalHeader />
-        <Box overflow="auto">
-          <Box
-            background="background"
-            justify="center"
-            pad={{
-              horizontal: !['xsmall', 'small'].includes(size)
-                ? 'xlarge'
-                : 'medium',
-              vertical: 'large',
-            }}
-            flex={false}
-          >
-            {user ? (
-              <Box gap="large">
-                <Greeting />
-                <DashboardGrid />
-              </Box>
-            ) : (
-              <DemoPageContent />
-            )}
+        <Main>
+          <Box overflow="auto">
+            <Box
+              background="background"
+              justify="center"
+              pad={{
+                horizontal: !['xsmall', 'small'].includes(size)
+                  ? 'xlarge'
+                  : 'medium',
+                vertical: 'large',
+              }}
+              flex={false}
+            >
+              {user ? (
+                <Box gap="large">
+                  <Greeting />
+                  <DashboardGrid />
+                </Box>
+              ) : (
+                <DemoPageContent />
+              )}
+            </Box>
+            {user && <DashboardFooter />}
           </Box>
-          {user && <DashboardFooter />}
-        </Box>
+        </Main>
       </Box>
     </UserContext.Provider>
   );

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>
         )}