Skip to content

Commit cd01a3f

Browse files
tayseataysea
committed
Add latest content
1 parent bf1827a commit cd01a3f

File tree

11 files changed

+470
-354
lines changed

11 files changed

+470
-354
lines changed

‎design-tokens/tokens/primitives.base.json

+152-234
Large diffs are not rendered by default.

‎sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,14 @@ export const DashboardCard = ({
7070
{children}
7171
</CardBody>
7272
)}
73-
{footer && <CardFooter {...inlineProps}>{footer}</CardFooter>}
73+
{footer && (
74+
<CardFooter
75+
pad={{ horizontal: 'medium', bottom: 'medium' }}
76+
{...inlineProps}
77+
>
78+
{footer}
79+
</CardFooter>
80+
)}
7481
</Card>
7582
);
7683
};

‎sandbox/grommet-app/src/components/NotificationMetric/NotificationMetric.jsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Box, Text } from 'grommet';
2+
import PropTypes from 'prop-types';
23
import {
34
StatusCritical,
45
StatusWarning,
@@ -36,8 +37,8 @@ export const NotificationMetric = ({ status, value }) => {
3637
<Box
3738
background={background}
3839
direction="row"
39-
gap="small"
40-
align="center"
40+
gap={{ column: 'small', row: 'xsmall' }}
41+
align="start"
4142
pad={{ vertical: 'small', horizontal: 'medium' }}
4243
round="small"
4344
>
@@ -51,3 +52,8 @@ export const NotificationMetric = ({ status, value }) => {
5152
</Box>
5253
);
5354
};
55+
56+
NotificationMetric.propTypes = {
57+
status: PropTypes.string,
58+
value: PropTypes.number,
59+
};

‎sandbox/grommet-app/src/mockData/expenses.json

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
{
2+
"expenses": [
3+
{
4+
"date": "2023-01-31",
5+
"storage": 80000,
6+
"compute": 20000,
7+
"networking": 35000
8+
},
9+
{
10+
"date": "2023-02-28",
11+
"storage": 60000,
12+
"compute": 30000,
13+
"networking": 5000
14+
},
15+
{
16+
"date": "2023-03-31",
17+
"storage": 80000,
18+
"compute": 10000,
19+
"networking": 20000
20+
},
21+
{
22+
"date": "2023-04-30",
23+
"storage": 60000,
24+
"compute": 10000,
25+
"networking": 22000
26+
},
27+
{
28+
"date": "2023-05-31",
29+
"storage": 60000,
30+
"compute": 10000,
31+
"networking": 5000
32+
},
33+
{
34+
"date": "2023-06-30",
35+
"storage": 70000,
36+
"compute": 20000,
37+
"networking": 30000
38+
},
39+
{
40+
"date": "2023-07-31",
41+
"storage": 65000,
42+
"compute": 22000,
43+
"networking": 30000
44+
},
45+
{
46+
"date": "2023-08-31",
47+
"storage": 70000,
48+
"compute": 20000,
49+
"networking": 35000
50+
},
51+
{
52+
"date": "2023-09-30",
53+
"storage": 70000,
54+
"compute": 20000,
55+
"networking": 35000
56+
}
57+
]
58+
}

‎sandbox/grommet-app/src/mockData/services.json

+17-10
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,45 @@
33
{
44
"name": "HPE GreenLake Flex Solutions",
55
"category": "Workloads",
6-
"description": "Manage your cloud services and view usage, cost, and more.",
7-
"subscription": true
6+
"description": "Manage your cloud services and view usage, cost, and more."
87
},
98
{
109
"name": "Sustainability Insight Center",
1110
"category": "Common",
1211
"description": "Monitor your estate carbon footprint and energy consumption.",
13-
"href": "/sustainability",
14-
"subscription": true
12+
"href": "/sustainability"
1513
},
1614
{
17-
"name": "Aruba Networking",
15+
"name": "Aruba NetInsight",
1816
"category": "Networking",
1917
"description": "Manage campus, branch, SD-WAN & data center networks with AI, automation & security.",
20-
"subscription": true
18+
"subscription": {
19+
"name": "Aruba NetInsight 90 Day Eval Subscription",
20+
"expiration": "2024-01-31T10:00:00.0000Z"
21+
}
2122
},
2223
{
2324
"name": "Compute Ops Management",
2425
"category": "Compute",
25-
"description": "Modern compute management that simplifies provisioning and automates key lifecycle tasks.",
26-
"subscription": true
26+
"description": "Modern compute management that simplifies provisioning and automates key lifecycle tasks."
2727
},
2828
{
2929
"name": "Backup and Recovery",
3030
"category": "Storage",
3131
"description": "Data protection as a service that’s effortless, efficient, and secure.",
32-
"subscription": true
32+
"subscription": {
33+
"name": "Backup and Recovery 90 Day Eval Subscription",
34+
"expiration": "2024-04-31T10:00:00.0000Z"
35+
}
3336
},
3437
{
3538
"name": "Block Storage",
3639
"category": "Storage",
37-
"description": "Simple self-service storage for any workload with AI-driven cloud management."
40+
"description": "Simple self-service storage for any workload with AI-driven cloud management.",
41+
"subscription": {
42+
"name": "Block Storage 90 Day Eval Subscription",
43+
"expiration": "2024-05-15T10:00:00.0000Z"
44+
}
3845
},
3946
{
4047
"name": "ML Ops",

‎sandbox/grommet-app/src/pages/next/ExpiringSubscriptions.jsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Box, List, Text, Notification } from 'grommet';
2+
import { StatusCriticalSmall, StatusWarningSmall } from 'grommet-icons';
3+
import { DashboardCard } from '../../components';
4+
import services from '../../mockData/services.json';
5+
6+
export const ExpiringSubscriptions = () => (
7+
<DashboardCard
8+
title="Expiring subscriptions"
9+
level={2}
10+
footer={
11+
<Notification
12+
message="12 of your subscriptions will this month."
13+
status="warning"
14+
fill="horizontal"
15+
margin={{ top: 'medium' }}
16+
/>
17+
}
18+
>
19+
<List
20+
data={services.services.filter(service => service.subscription)}
21+
defaultItemProps={{
22+
border: { side: 'bottom', color: 'border-weak' },
23+
pad: { vertical: 'xsmall' },
24+
}}
25+
>
26+
{datum => {
27+
const expired =
28+
new Date(datum.subscription.expiration).getTime() < Date.now();
29+
return (
30+
<Box>
31+
<Box direction="row" gap="xsmall">
32+
{expired ? (
33+
<StatusCriticalSmall color="status-critical" height="medium" />
34+
) : (
35+
<StatusWarningSmall color="status-warning" height="medium" />
36+
)}
37+
<Box flex={false}>
38+
<Text weight={500} color="text-strong">
39+
{datum.subscription.name}
40+
</Text>
41+
<Text size="small">{`${
42+
expired ? 'Expired' : 'Expires'
43+
} ${Intl.DateTimeFormat(undefined, {
44+
dateStyle: 'medium',
45+
}).format(new Date(datum.subscription.expiration))}`}</Text>
46+
</Box>
47+
</Box>
48+
</Box>
49+
);
50+
}}
51+
</List>
52+
</DashboardCard>
53+
);

‎sandbox/grommet-app/src/pages/next/MonthlyCharges.jsx

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Box, DataChart, Text, Notification } from 'grommet';
2+
import { DashboardCard, Legend } from '../../components';
3+
import expenses from '../../mockData/expenses.json';
4+
5+
export const MonthlyCharges = () => (
6+
<DashboardCard
7+
title="Monthly charges"
8+
level={2}
9+
footer={
10+
<Notification
11+
message="Your networking expenses have increased by 23% this month. Set up a"
12+
actions={[{ label: 'budget alert.' }]}
13+
status="warning"
14+
fill="horizontal"
15+
margin={{ top: 'medium' }}
16+
/>
17+
}
18+
>
19+
<DataChart
20+
data={expenses.expenses}
21+
pad={{ horizontal: 'large' }}
22+
series={[
23+
{
24+
property: 'date',
25+
render: date => (
26+
<Text>
27+
{Intl.DateTimeFormat(undefined, {
28+
month: 'short',
29+
}).format(new Date(date))}
30+
</Text>
31+
),
32+
},
33+
'storage',
34+
'compute',
35+
'networking',
36+
]}
37+
chart={[
38+
{
39+
property: [
40+
{ property: 'storage', thickness: 'small', color: 'graph-2' },
41+
{ property: 'compute', thickness: 'small', color: 'graph-4' },
42+
{ property: 'networking', thickness: 'small', color: 'graph-0' },
43+
],
44+
type: 'bars',
45+
},
46+
]}
47+
axis={{ x: { property: 'date' }, y: true }}
48+
guide={{ y: { granularity: 'fine' } }}
49+
/>
50+
<Box direction="row" alignSelf="center" gap="medium">
51+
<Legend label="Storage" color="graph-2" />
52+
<Legend label="Compute" color="graph-4" />
53+
<Legend label="Networking" color="graph-0" />
54+
</Box>
55+
</DashboardCard>
56+
);

‎sandbox/grommet-app/src/pages/next/Notifications.jsx

+11-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ import {
33
StatusCritical,
44
StatusWarning,
55
StatusGood,
6+
StatusCriticalSmall,
7+
StatusWarningSmall,
8+
StatusGoodSmall,
69
CircleInformation,
710
} from 'grommet-icons';
811
import { DashboardCard, NotificationMetric } from '../../components';
@@ -12,21 +15,27 @@ const statuses = {
1215
critical: {
1316
background: 'background-status-critical',
1417
icon: <StatusCritical color="status-critical" height="medium" />,
18+
iconCompact: (
19+
<StatusCriticalSmall color="status-critical" height="medium" />
20+
),
1521
label: 'Critical',
1622
},
1723
warning: {
1824
background: 'background-status-warning',
1925
icon: <StatusWarning color="status-warning" height="medium" />,
26+
iconCompact: <StatusWarningSmall color="status-warning" height="medium" />,
2027
label: 'Warning',
2128
},
2229
ok: {
2330
background: 'background-status-ok',
2431
icon: <StatusGood color="status-ok" height="medium" />,
32+
iconCompact: <StatusGoodSmall color="status-ok" height="medium" />,
2533
label: 'Ok',
2634
},
2735
info: {
2836
background: 'background-status-info',
2937
icon: <CircleInformation color="blue" height="medium" />,
38+
iconCompact: <StatusGoodSmall color="blue" height="medium" />,
3039
label: 'Information',
3140
},
3241
};
@@ -48,12 +57,13 @@ export const Notifications = () => {
4857
data={notifications.notifications}
4958
defaultItemProps={{
5059
border: { side: 'top', color: 'border-weak' },
60+
pad: 'small',
5161
}}
5262
>
5363
{datum => (
5464
<Box direction="row" justify="between" gap="medium">
5565
<Box direction="row" gap="small">
56-
{statuses[datum.status].icon}
66+
{statuses[datum.status].iconCompact}
5767
<Box flex={false}>
5868
<Text weight={500} color="text-strong">
5969
{datum.service}

‎sandbox/grommet-app/src/pages/next/index.jsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
ResponsiveContext,
1010
} from 'grommet';
1111
import { Configure } from 'grommet-icons';
12-
import { DashboardCard } from '../../components';
1312
import { Recommended } from './Recommended';
1413
import { Learn } from './Learn';
1514
import { QuickActions } from './QuickActions';
@@ -21,6 +20,8 @@ import ContentPane from '../../components/ContentPane';
2120
import { GetStarted } from '../GetStarted';
2221
import { DeviceSummary } from './DeviceSummary';
2322
import { UserOverview } from './UserOverview';
23+
import { ExpiringSubscriptions } from './ExpiringSubscriptions';
24+
import { MonthlyCharges } from './MonthlyCharges';
2425

2526
const Divider = () => <Box border={{ side: 'bottom', color: 'brand' }} />;
2627

@@ -75,8 +76,8 @@ function Index() {
7576
columns={size === 'xlarge' ? ['flex', 'flex'] : ['auto']}
7677
gap="medium"
7778
>
78-
<DashboardCard title="Monthly charges" level={2} />
79-
<DashboardCard title="Expiring subscriptions" level={2} />
79+
<MonthlyCharges />
80+
<ExpiringSubscriptions />
8081
</Grid>
8182
</Box>
8283
</Box>

‎sandbox/grommet-app/src/theme.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ export const tokensTheme = deepMerge(hpe, {
287287
card: {
288288
container: {
289289
extend: '',
290-
// elevation: 'small',
290+
elevation: 'small',
291291
},
292292
},
293293
notification: {

0 commit comments

Comments
 (0)