[Docs] Templates - Ascending navigation update

apps/docs/src/data/structures/templates/templates.js

@@ -15,9 +15,9 @@ export const templates = [
     name: 'Ascending navigation',
     available: true,
     cardOrder: 101,
-    description: `The Ascending Button for Navigation allows
-    the user to navigate to a parent page from a child page
-    by moving upward in the application or website hierarchy.`,
+    description: `Ascending navigation enables users 
+    to move up one level in an application’s hierarchy, 
+    from a child page back to its parent.`,
     preview: {
       image: {
         src: {

apps/docs/src/examples/templates/ascending-navigation/AscendingNavigationCodeExample.js

@@ -0,0 +1,23 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { Anchor, Button, PageHeader } from 'grommet';
+import { Left } from '@hpe-design/icons-grommet';
+
+export const AscendingNavigationCodeExample = () => {
+  return (
+    <PageHeader
+      title="Child page title"
+      subtitle="Page subtitle goes here. It can be a little bit longer to 
+      provide more context about the page."
+      size="large"
+      parent={
+        <Anchor
+          label="Home"
+          icon={<Left />}
+          a11yTitle="Link to the home page"
+        />
+      }
+      actions={<Button label="Action" primary />}
+    />
+  );
+};

apps/docs/src/examples/templates/ascending-navigation/AscendingNavigationExample.js

@@ -0,0 +1,45 @@
+/* eslint-disable react/prop-types */
+import React, { useState } from 'react';
+import { Anchor, Box, Button, PageContent, PageHeader } from 'grommet';
+import { Left } from '@hpe-design/icons-grommet';
+import { HomeContent } from './components/HomeContent';
+import { PageOneContent } from './components/PageOneContent';
+import { PageTwoContent } from './components/PageTwoContent';
+import { sectionConfig } from './data/sections';
+
+export const AscendingNavigationExample = () => {
+  const [activePage, setActivePage] = useState('pageOne');
+
+  const page = sectionConfig[activePage];
+
+  const sectionContent = {
+    home: <HomeContent onNavigate={setActivePage} />,
+    pageOne: <PageOneContent onNavigate={setActivePage} />,
+    pageTwo: <PageTwoContent onNavigate={setActivePage} />,
+  };
+
+  return (
+    <PageContent gap="xsmall" kind="full">
+      <Box width="xlarge" pad={{ bottom: 'xxlarge' }}>
+        <PageHeader
+          title={page.label}
+          subtitle={page.subtitle}
+          size="large"
+          parent={
+            activePage !== 'home' ? (
+              <Anchor
+                label={sectionConfig.home.label}
+                icon={<Left />}
+                onClick={() => setActivePage('home')}
+              />
+            ) : undefined
+          }
+          actions={
+            activePage !== 'home' && <Button label={page.action} primary />
+          }
+        />
+        <Box gap="small">{sectionContent[activePage]}</Box>
+      </Box>
+    </PageContent>
+  );
+};

apps/docs/src/examples/templates/ascending-navigation/components/HomeContent.js

@@ -0,0 +1,18 @@
+/* eslint-disable react/prop-types */
+import { Grid } from 'grommet';
+import { SectionCard } from './SectionCard';
+import { sectionConfig } from '../data/sections';
+
+export const HomeContent = ({ onNavigate }) => (
+  <Grid columns="small" gap="small">
+    {Object.entries(sectionConfig)
+      .filter(([key]) => key !== 'home')
+      .map(([key, config]) => (
+        <SectionCard
+          key={key}
+          section={{ id: key, ...config }}
+          onClick={onNavigate}
+        />
+      ))}
+  </Grid>
+);

apps/docs/src/examples/templates/ascending-navigation/components/PageOneContent.js

@@ -0,0 +1,92 @@
+/* eslint-disable react/prop-types */
+import { useState } from 'react';
+import { Box, DataTable, Avatar, Text } from 'grommet';
+
+const data = [
+  {
+    id: 1,
+    initials: 'AL',
+    name: 'Alex Lee',
+    email: 'alex.lee@example.com',
+    status: 'Active',
+  },
+  {
+    id: 2,
+    initials: 'SM',
+    name: 'Sofia Martinez',
+    email: 'sofia.martinez@example.com',
+    status: 'Active',
+  },
+  {
+    id: 3,
+    initials: 'JR',
+    name: 'Jordan Roberts',
+    email: 'jordan.roberts@example.com',
+    status: 'Pending',
+  },
+  {
+    id: 4,
+    initials: 'AK',
+    name: 'Aisha Khan',
+    email: 'aisha.khan@example.com',
+    status: 'Inactive',
+  },
+  {
+    id: 5,
+    initials: 'DL',
+    name: 'Daniel Lopez',
+    email: 'daniel.lopez@example.com',
+    status: 'Active',
+  },
+  {
+    id: 6,
+    initials: 'NP',
+    name: 'Nina Patel',
+    email: 'nina.patel@example.com',
+    status: 'Active',
+  },
+  {
+    id: 7,
+    initials: 'MT',
+    name: 'Marco Tan',
+    email: 'marco.tan@example.com',
+    status: 'Pending',
+  },
+];
+
+export const PageOneContent = () => {
+  const [selected, setSelected] = useState([]);
+
+  return (
+    <DataTable
+      data={data}
+      aria-describedby="User management table"
+      select={selected}
+      onSelect={setSelected}
+      columns={[
+        {
+          property: 'name',
+          header: 'User name',
+          primary: true,
+          render: datum => (
+            <Box direction="row" gap="small" align="center">
+              <Avatar background="decorative-green">
+                <Text color="text-strong">{datum.initials}</Text>
+              </Avatar>
+              <Text>{datum.name}</Text>
+            </Box>
+          ),
+        },
+        {
+          property: 'email',
+          header: 'Email',
+        },
+        {
+          property: 'status',
+          header: 'Status',
+          render: datum => <Text>{datum.status}</Text>,
+        },
+      ]}
+    />
+  );
+};

apps/docs/src/examples/templates/ascending-navigation/components/PageTwoContent.js

@@ -0,0 +1,108 @@
+/* eslint-disable react/prop-types */
+import { useState } from 'react';
+import { DataTable, Text } from 'grommet';
+
+const data = [
+  {
+    id: 'id-1',
+    displayName: 'Server 1',
+    serialNumber: '8899569448808967',
+    model: 'Proliant SY 480 Gen10',
+    powerState: 'On',
+    health: { summary: 'OK' },
+    state: { connected: false },
+  },
+  {
+    id: 'id-2',
+    displayName: 'Server 2',
+    serialNumber: '482148808968',
+    model: 'Proliant SY 990 Gen9',
+    powerState: 'Off',
+    health: { summary: 'Warning' },
+    state: { connected: true },
+  },
+  {
+    id: 'id-3',
+    displayName: 'Server 3',
+    serialNumber: '3890108963',
+    model: 'Proliant SY 990 Gen9',
+    powerState: 'Off',
+    health: { summary: 'Warning' },
+    state: { connected: false },
+  },
+  {
+    id: 'id-4',
+    displayName: 'Server 4',
+    serialNumber: '8508964',
+    model: 'Proliant SY 660 Gen10',
+    powerState: 'On',
+    health: { summary: 'OK' },
+    state: { connected: true },
+  },
+  {
+    id: 'id-5',
+    displayName: 'Server 5',
+    serialNumber: '3123i4264',
+    model: 'Proliant SY 660 Gen10',
+    powerState: 'On',
+    health: { summary: 'OK' },
+    state: { connected: true },
+  },
+  {
+    id: 'id-6',
+    displayName: '3M442501WV',
+    serialNumber: '4208964',
+    model: 'ProLiant DL380 Gen10',
+    powerState: 'Off',
+    health: { summary: 'Critical' },
+    state: { connected: true },
+  },
+  {
+    id: 'id-7',
+    displayName: 'ZFD3712GP',
+    serialNumber: 'CCD21712GP',
+    model: null,
+    powerState: 'On',
+    health: { summary: 'OK' },
+    state: { connected: false },
+  },
+];
+
+export const PageTwoContent = () => {
+  const [selected, setSelected] = useState([]);
+
+  return (
+    <DataTable
+      data={data}
+      aria-describedby="Server data table"
+      select={selected}
+      onSelect={setSelected}
+      columns={[
+        {
+          property: 'displayName',
+          header: 'Name',
+          primary: true,
+          render: datum => <Text>{datum.displayName}</Text>,
+        },
+        {
+          property: 'serialNumber',
+          header: 'Serial Number',
+        },
+        {
+          property: 'model',
+          header: 'Model',
+          render: datum => <Text>{datum.model || '—'}</Text>,
+        },
+        {
+          property: 'powerState',
+          header: 'Power',
+        },
+        {
+          property: 'health',
+          header: 'Health',
+          render: datum => <Text>{datum.health?.summary}</Text>,
+        },
+      ]}
+    />
+  );
+};