Refine header and learn

grommet · Mar 6, 2024 · 903ee7b · 903ee7b
1 parent 5beb31a
commit 903ee7b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 15 deletions.
diff --git a/sandbox/grommet-app/src/App.jsx b/sandbox/grommet-app/src/App.jsx
@@ -51,7 +51,7 @@ const App = () => {
                 fit="contain"
               />
             </Box>
-            <Box direction="row" gap="small">
+            <Box align="center" direction="row" gap="small">
               <FormField>
                 <CheckBox
                   label="background-back"

diff --git a/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx b/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx
@@ -10,10 +10,11 @@ import {
   //   ThemeContext,
   Text,
 } from 'grommet';
-import { LinkNext } from 'grommet-icons';
+import { LinkNext, ShareRounded } from 'grommet-icons';
 
 export const DashboardCard = ({
   icon,
+  external,
   level,
   title,
   subtitle,
@@ -53,7 +54,11 @@ export const DashboardCard = ({
           </Box>
         </Box>
         <Box flex={false}>
-          <LinkNext a11yTitle={`Go to ${title}`} color="brand" />
+          {external ? (
+            <ShareRounded a11yTitle={`Go to ${title}`} color="brand" />
+          ) : (
+            <LinkNext a11yTitle={`Go to ${title}`} color="brand" />
+          )}
         </Box>
       </CardHeader>
       {children && (
@@ -71,6 +76,7 @@ export const DashboardCard = ({
 
 DashboardCard.propTypes = {
   icon: PropTypes.element,
+  external: PropTypes.bool,
   level: PropTypes.number,
   title: PropTypes.string,
   inline: PropTypes.bool,

diff --git a/sandbox/grommet-app/src/pages/next/Learn.jsx b/sandbox/grommet-app/src/pages/next/Learn.jsx
@@ -2,24 +2,36 @@ import PropTypes from 'prop-types';
 import { Box, Heading } from 'grommet';
 import { DashboardCard } from '../../components';
 
+const data = [
+  {
+    title: 'Explore GreenLake',
+    subtitle: 'Learn more about what the GreenLake platform has to offer.',
+  },
+  {
+    title: 'HPE GreenLake Developer Portal',
+    subtitle: 'Integrate apps and services.',
+    external: true,
+  },
+  {
+    title: "What's New on HPE GreenLake",
+    subtitle: 'See the latest release information and announcements.',
+  },
+  {
+    title: 'Test Drive HPE GreenLake',
+    subtitle: 'Experience the edge-to-cloud. Try before you buy.',
+    external: true,
+  },
+];
+
 export const Learn = ({ inline }) => {
   return (
     <Box gap="medium">
       <Heading level={2} margin="none">
         Learn
       </Heading>
-      <DashboardCard
-        title="Explore GreenLake"
-        level={3}
-        subtitle="Learn more about what the GreenLake platform has to offer."
-        inline={inline}
-      />
-      <DashboardCard
-        title="HPE GreenLake Developer Portal"
-        level={3}
-        subtitle="Integrate apps and services."
-        inline={inline}
-      />
+      {data.map(datum => (
+        <DashboardCard key={datum.title} {...datum} level={3} inline={inline} />
+      ))}
     </Box>
   );
 };