### Paragraph Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/all-components.mdx

Demonstrates the usage of the Paragraph component. No specific setup required beyond importing the component.

```javascript
import { Paragraph } from "grommet";

function ParagraphExample() {
  return (
    <Paragraph>This is a paragraph.</Paragraph>
  );
}

export default ParagraphExample;
```

--------------------------------

### Telemetry for Generate Examples and Do/Don'ts Agents

Source: https://github.com/grommet/hpe-design-system/blob/master/knowledge/capabilities/docs-refactor/docs-refactor-orchestrator.agent.md

Use these commands to log the start and completion of the generate-examples-agent and dos-donts-agent. Ensure to replace '[name]' with the component name and '[ms]' with the duration in milliseconds.

```bash
pnpm telemetry:write --component [name] --eventType agent-start --stage generated --agent generate-examples-agent
# ...invoke @generate-examples-agent [name] if needed...
pnpm telemetry:write --component [name] --eventType agent-complete --stage generated --agent generate-examples-agent --status success --durationMs [ms]

pnpm telemetry:write --component [name] --eventType agent-start --stage generated --agent dos-donts-agent
# ...invoke @dos-donts-agent [name] if needed...
pnpm telemetry:write --component [name] --eventType agent-complete --stage generated --agent dos-donts-agent --status success --durationMs [ms]
```

```bash
pnpm telemetry:write --component [name] --eventType stage-transition --stage examples-pending --status success --metadata '{"fromStage":"generated","toStage":"examples-pending"}'
```

--------------------------------

### Data Summary Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/datasummary.mdx

This example demonstrates the usage of the Data Summary component. It requires importing the DataSummaryExample component and the Example layout component.

```javascript
import { Example, AccessibilitySection } from '../../layouts';
import { DataSummaryExample } from '../../examples/components/';

<Example
  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/components/data/DataSummaryExample.js"
  docs="https://v2.grommet.io/datasummary"
  height="auto"
>
  <DataSummaryExample />
</Example>

## Accessibility
### WCAG compliance
  <AccessibilitySection title='datasummary' />
```

--------------------------------

### Build and Start Docs Server in Production

Source: https://github.com/grommet/hpe-design-system/blob/master/README.md

Builds the documentation site for production and then starts a server to serve it.

```bash
pnpm build
pnpm --filter docs start-server
```

--------------------------------

### Responsive Content Layout Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/content-layouts.mdx

This example demonstrates a responsive content layout that adjusts based on screen size. It utilizes the 'Example' component and includes links to the source code and related components.

```javascript
<Example
  showResponsiveControls={['fullScreen']}
  code={[
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/content-layouts/ResponsiveContentLayoutExample.js',
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/PageHeader/PageHeader.js',
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/page-layouts/components/AppContainer.js',
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/page-layouts/anatomy/components/ContentArea.js',
  ]}
  github="https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/examples/templates/content-layouts/ResponsiveContentLayoutExample.js"
  height="650px"
  width="100%"
  screenContainer
>
  <ResponsiveContentLayoutExample />
</Example>
```

--------------------------------

### Displaying Component States Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/design-tokens/component-states.mdx

This example demonstrates how to render component states using the Example and ComponentStates components. Ensure necessary imports are included.

```jsx
import { Checkmark } from '@hpe-design/icons-grommet';
import { Notification } from 'grommet';
import { Example } from '../../layouts';
import { ComponentStates } from '../../examples';

<Example>
  <ComponentStates />
</Example>
```

--------------------------------

### Simple Tag Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/tag.mdx

A basic example of the Tag component. No specific setup is required beyond importing the component.

```javascript
import {
  TagSimple,
} from '../../examples';
import { Tag } from 'grommet';

<Example
  componentName="Tag"
  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/components/tag/TagSimple.js"
  docs="https://v2.grommet.io/tag?theme=hpe"
  figma=""
  grommetSource="https://github.com/grommet/grommet/blob/master/src/js/components/Tag/Tag.js"
>
  <TagSimple />
</Example>
```

--------------------------------

### MDX Example Integration

Source: https://github.com/grommet/hpe-design-system/blob/master/knowledge/capabilities/docs-refactor/agents/generate-examples.agent.md

Update the MDX file to include the new named import and replace TODO comments with an <Example> block. The <Example> wrapper automatically injects containerRef, so do not pass it explicitly from MDX.

```mdx
<Example height={{ min: '[appropriate-size]' }}>
  <[ComponentName][UseCasePascalCase]Example />
</Example>
```

--------------------------------

### Sign Up Form Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/forms/index.mdx

Example of a sign-up form, including form validation utilities. This template is suitable for user account creation.

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/forms/SignUpExample.js
```

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/forms/utils/FormValidation.js
```

--------------------------------

### PageHeader Introduction Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/pageheader.mdx

This example demonstrates the basic introduction of the PageHeader component, showcasing its title, subtitle, and actions.

```javascript
import React from 'react';
import { Box, PageHeader } from 'grommet';

export const PageHeaderIntroExample = () => (
  <Box>
    <PageHeader
      title="Page Title"
      subtitle="Page subtitle"
      actions={[
        {
          label: 'Action 1',
          onClick: () => {},
        },
        {
          label: 'Action 2',
          onClick: () => {},
        },
      ]}
    />
  </Box>
);
```

--------------------------------

### Sign In Form Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/forms/index.mdx

Example of a sign-in form, incorporating form validation utilities. Use this for user authentication.

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/forms/SignInExample.js
```

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/forms/utils/FormValidation.js
```

--------------------------------

### Install react-syntax-highlighter with NPM

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/code-blocks.mdx

Install the react-syntax-highlighter package using npm. This is a prerequisite for using code blocks.

```bash
npm install react-syntax-highlighter --save
```

--------------------------------

### Card Kitchen Sink Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/card/index.mdx

Demonstrates a comprehensive example of the Card component with various features and content.

```javascript
import React from 'react';
import { Card, CardBody, CardFooter, CardHeader, CardTitle } from 'grommet';

export const CardKitchenSink = (props) => (
  <Card {...props}>
    <CardHeader pad="medium" background="dark-2" tag="header">
      <CardTitle>
        <div />
        {/* Card Title */}
        Card Title
      </CardTitle>
    </CardHeader>
    <CardBody pad="medium">
      {/* Card Body */}
      Card Body
    </CardBody>
    <CardFooter pad={{ vertical: 'medium', horizontal: 'medium' }}>
      {/* Card Footer */}
      Card Footer
    </CardFooter>
  </Card>
);
```

--------------------------------

### Exporting a Component Example

Source: https://github.com/grommet/hpe-design-system/blob/master/knowledge/capabilities/docs-refactor/agents/generate-examples.agent.md

Register each new example file by appending an export line to the component's index.js file.

```javascript
export * from './[ComponentName][UseCasePascalCase]Example';
```

--------------------------------

### RangeInput Example Component

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/rangeinput.mdx

This example demonstrates the usage of the RangeInput component. Ensure the component is imported before use.

```javascript
import { Example, AccessibilitySection } from '../../layouts';
import { RangeInputExample } from '../../examples';

<Example
  componentCode="RangeInput"
  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/components/rangeinput/RangeInputExample.js"
  docs="https://v2.grommet.io/rangeinput?theme=hpe#props"
  details={[
    `The RangeInput component is a slider control that 
    provides a handle the user can move to make changes 
    to values. It is important that the slider provides 
    a value displayed to communicate with the user. This
    help ensure confidence in the use of the control.`,
  ]}
  figma="https://www.figma.com/design/HDckqS2MWhINfC8EIQPMV1/HPE-Design-System-Components-V2?m=auto&node-id=4242-6389&t=ZqPsisuevR3KPp96-1"
  grommetSource="https://github.com/grommet/grommet/blob/master/src/js/components/RangeInput/RangeInput.js"
>
  <RangeInputExample />
</Example>

## Accessibility

### WCAG compliance
  <AccessibilitySection title='rangeInput' />
```

--------------------------------

### Install react-syntax-highlighter with Yarn

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/code-blocks.mdx

Install the react-syntax-highlighter package using Yarn. This is a prerequisite for using code blocks.

```bash
yarn add react-syntax-highlighter
```

--------------------------------

### Basic Menu Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/menu.mdx

A standard example of the Menu component. This snippet demonstrates the basic structure and usage of the Menu.

```javascript
import { Box, Paragraph, Anchor } from 'grommet';
import { Checkmark } from '@hpe-design/icons-grommet';
import {
  AccessibilitySection,
  BestPracticeGroup,
  Example,
} from '../../layouts';
import {
  MenuAnatomy,
  MenuExample,
  MenuBatchActionsExample,
  MenuDangerousExample,
  MenuDefaultExample,
  MenuDisabledExample,
  MenuGroupingExample,
  MenuHeaderExample,
  MenuIconExample,
  MenuItemCountExample,
  MenuRecordActionsExample,
  MenuSelectValueExample,
  MenuToolbarExample,
} from '../../examples';

<Example
  componentName="Menu"
  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/components/menu/MenuExample.js"
  designer="https://designer.grommet.io/menu?id=HPE-design-system-hpedesignsystem-hpe-com&mode=edit"
  docs="https://v2.grommet.io/menu?theme=hpe#props"
  figma="https://www.figma.com/design/HDckqS2MWhINfC8EIQPMV1/HPE-Design-System-Components-V2?m=auto&node-id=2475-2000&t=ZqPsisuevR3KPp96-1"
  grommetSource="https://github.com/grommet/grommet/blob/master/src/js/components/Menu/Menu.js"
>
  <MenuExample />
</Example>
```

--------------------------------

### Simple Selector Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/selector.mdx

Demonstrates the basic usage of the Selector component. This example shows how to implement a simple selection interface.

```javascript
import { Notification } from 'grommet';
import { Example } from '../../layouts';
import { 
  SimpleSelector,
  QuickFilter,
  SupportSelector,
  SelectorAnatomy,
} from '../../examples';

<Example
  figma="https://www.figma.com/design/HDckqS2MWhINfC8EIQPMV1/HPE-Design-System-Components-V2?m=auto&node-id=2916-5&t=odY81eDKItjB8SI2-1"
  code={[
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/selector/SelectorSimple.js',
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/shared/aries-core/src/js/components/core/Selector/Selector.js',
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/shared/aries-core/src/js/components/core/Selector/SelectorGroup.js',
  ]}
  github="https://github.com/grommet/hpe-design-system/tree/master/shared/aries-core/src/js/components/core/Selector"
  width="100%"
>
  <SimpleSelector />
</Example>
```

--------------------------------

### Basic Header Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/header.mdx

Demonstrates a basic Header component. This is a foundational example for understanding Header's structure and integration.

```jsx
import { Header } from 'grommet';

<Header>
  {/* Header content goes here */}
</Header>
```

--------------------------------

### Basic Search Input Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/search.mdx

Demonstrates a standard search input field. This is a foundational example for integrating search functionality.

```javascript
import React from 'react';
import { TextInput } from 'grommet';

export const SearchExample = () => (
  <TextInput placeholder="Search..." />
);
```

--------------------------------

### Simple Sign Up Form Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/forms/index.mdx

Demonstrates a basic sign-up form. It includes a JavaScript file for the form logic and a utility file for form validation.

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/forms/SimpleSignUpExample.js
```

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/forms/utils/FormValidation.js
```

--------------------------------

### Start Docs App Locally

Source: https://github.com/grommet/hpe-design-system/blob/master/knowledge/capabilities/docs-refactor/docs/execution.skill.md

Command to build and serve the documentation application locally for spot-checking.

```bash
cd apps/docs
pnpm start
```

--------------------------------

### Simple FileInput Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/fileinput.mdx

Basic usage of the FileInput component for single file uploads. No special setup is required beyond importing the component.

```javascript
import React from 'react';
import { FileInput } from 'grommet';

export const FileInputSimpleExample = () => (
  <FileInput name="simple" />
);

```

--------------------------------

### Button Alignment Examples

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/button.mdx

Demonstrates different button alignment strategies based on context, such as drawers and modals. Follow this guide for general button placement.

```JavaScript
<ButtonAlignmentTable />
```

--------------------------------

### Run Docs in Development Mode

Source: https://github.com/grommet/hpe-design-system/blob/master/README.md

Starts the documentation site in development mode.

```bash
pnpm start:docs
```

--------------------------------

### Tip Simple Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/all-components.mdx

Shows a basic Tip component. Import Tip and Button.

```javascript
import { Tip, Button } from "grommet";

function TipSimpleExample() {
  return (
    <Tip content="This is a tooltip!">
      <Button label="Hover over me" />
    </Tip>
  );
}

export default TipSimpleExample;
```

--------------------------------

### Dashboard Example Template

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/dashboards.mdx

A comprehensive dashboard template including various components for displaying critical information. Use this as a starting point for building detailed operational or analytical dashboards.

```javascript
import { Example } from '../../layouts';
import {
  DashboardExample,
  ThreeColumnDashboard,
  TwoColumnDashboard,
} from '../../examples';

<Example
  code={[
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/DashboardExample.js',
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/components/DashboardGrid.js',
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/components/DashboardFooter.js',
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/components/Greeting.js',
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/components/DashboardCard.js',
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/components/data.js',
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/global-header/components/GlobalHeader.js',
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/global-header/components/AppIdentity.js',
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/global-header/components/HeaderNav.js',
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/global-header/components/UserContext.js',
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/global-header/components/MenuLayer.js',
  ]}
  github="https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/examples/templates/dashboards/DashboardExample.js"
  showResponsiveControls={['laptop', 'mobile']}
  template
  screenContainer
  width="100%"
>
  <DashboardExample />
</Example>
```

--------------------------------

### Basic TextArea Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/textarea.mdx

Use TextArea for multi-line input. Placeholder text can guide the user. For use within a FormField, apply resize="vertical". Otherwise, allow both vertical and horizontal resizing.

```javascript
import { TextArea } from 'grommet';

<TextArea placeholder="Enter text here..." />
```

--------------------------------

### Nav Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/all-components.mdx

Shows a basic navigation structure using the Nav component. Import Nav and NavItem.

```javascript
import { Nav, NavItem, Button } from "grommet";

function NavExample() {
  return (
    <Nav>
      <NavItem>
        <Button label="Home" onClick={() => {}} />
      </NavItem>
      <NavItem>
        <Button label="About" onClick={() => {}} />
      </NavItem>
    </Nav>
  );
}

export default NavExample;
```

--------------------------------

### Example Code Block Component

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/code-blocks.mdx

An example of how to use the CodeBlockExample component within an Example layout. This demonstrates the integration of code blocks in the application.

```javascript
import { Example } from '../../layouts';
import { CodeBlockExample } from '../../examples';

<Example
  code={[
    'https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/code-blocks/CodeBlocks.js',
  ]}
  showResponsiveControls={['laptop', 'mobile']}
  template
>
  <CodeBlockExample />
</Example>
```

--------------------------------

### Simple Sign Up Form Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/all-components.mdx

Provides a basic form structure for user sign-up. Imports Form, FormField, TextInput, Button, and CheckBox.

```javascript
import React from 'react';
import {
  Button,
  CheckBox,
  Form,
  FormField,
  TextInput,
} from 'grommet';

function SimpleSignUpExample() {
  const [value, setValue] = React.useState({
    email: '',
    password: '',
    remember: false,
  });

  return (
    <Form
      value={value}
      onChange={({ nextValue }) => setValue(nextValue)}
      onReset={() => setValue({ email: '', password: '', remember: false })}
      onSubmit={({ value }) => {
        // Handle form submission
        console.log('Submit', value);
      }}
    >
      <FormField label="Email" name="email" required>
        <TextInput name="email" type="email" />
      </FormField>
      <FormField label="Password" name="password" required>
        <TextInput name="password" type="password" />
      </FormField>
      <FormField name="remember" pad>
        <CheckBox name="remember" label="Remember Me" />
      </FormField>
      <Button type="submit" primary label="Sign Up" />
    </Form>
  );
}

export default SimpleSignUpExample;
```

--------------------------------

### Install @hpe-design/icons-svg

Source: https://github.com/grommet/hpe-design-system/blob/master/packages/icons-svg/README.md

Install the package using npm.

```bash
npm install @hpe-design/icons-svg
```

--------------------------------

### Start Local Sandbox for Native Web

Source: https://github.com/grommet/hpe-design-system/wiki/Release:-hpe‐design‐tokens

After building design tokens, run this command to start the local development server for the native web sandbox. This allows testing CSS output.

```bash
yarn dev
```

--------------------------------

### Example Dos and Don'ts Directory Structure

Source: https://github.com/grommet/hpe-design-system/blob/master/knowledge/capabilities/docs-refactor/agents/dos-donts.agent.md

Provides a concrete example of the file structure for a 'menu' component's 'dos and don'ts' previews.

```bash
MenuGoodActionPreview.js
MenuBadActionPreview.js
index.js
```

--------------------------------

### Basic Layout with Supporting Content Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/foundation/background-colors-guidance.mdx

Illustrates using 'background' for the main content and 'background-contrast' for supplemental regions like help text. Usage of 'background-contrast' should be minimal.

```javascript
import { BasicLayoutExample } from '../../examples';
import { Example } from '../../layouts';

<Example
  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/foundation/background-colors/BasicLayoutExample.js"
  width="100%"
  showResponsiveControls={['laptop', 'mobile']}
  screenContainer
>
  <BasicLayoutExample />
</Example>
```

--------------------------------

### Change Password Form Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/forms/index.mdx

Example of a form for changing a user's password.

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/forms/ChangePasswordExample.js
```

--------------------------------

### Pagination Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/all-components.mdx

Demonstrates the Pagination component for navigating through pages. Import Pagination.

```javascript
import { Pagination } from "grommet";

function PaginationExample() {
  return (
    <Pagination numberItems={200} />
  );
}

export default PaginationExample;
```

--------------------------------

### Pay Form Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/forms/index.mdx

Example of a payment form. Use this template for processing financial transactions.

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/forms/PayExample.js
```

--------------------------------

### Calendar Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/all-components.mdx

Example of a Calendar component for date selection. Supports navigation through months and years.

```javascript
import React from 'react';
import { Calendar } from 'grommet';

export const CalendarExample = () => (
  <Calendar date="2023-04-20" />
);
```

--------------------------------

### Menu Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/all-components.mdx

Illustrates the Menu component for displaying a list of actions. Import Menu and MenuItem.

```javascript
import { Menu, Button, Box, Text } from "grommet";

function MenuExample(props) {
  return (
    <Menu
      {...props}
      dropAlign={{ top: 'top', left: 'left' }}
      items={[
        { label: 'Item 1', onClick: () => {} },
        { label: 'Item 2', onClick: () => {} },
      ]}
    >
      <Button label="Menu Button" />
    </Menu>
  );
}

export default MenuExample;
```

--------------------------------

### Install @hpe-design/icons-grommet

Source: https://github.com/grommet/hpe-design-system/wiki/Migrating-from-grommet‐icons-to-@hpe‐design\icons‐grommet

Use NPM, Yarn, or Pnpm to install the @hpe-design/icons-grommet package and uninstall grommet-icons.

```bash
# NPM
npm uninstall grommet-icons
npm install @hpe-design/icons-grommet

# Yarn
yarn remove grommet-icons
yarn add @hpe-design/icons-grommet

# Pnpm
pnpm uninstall grommet icons
pnpm install @hpe-design/icons-grommet
```

--------------------------------

### Settings Form Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/forms/index.mdx

Example of a settings form. This template can be used for user profile or application preferences.

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/forms/SettingsExample.js
```

--------------------------------

### Clock Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/all-components.mdx

Example of a Clock component displaying the current time. Can be configured for analog or digital display.

```javascript
import React from 'react';
import { Clock } from 'grommet';

export const ClockExample = () => (
  <Clock type="digital" time="medium" />
);
```

--------------------------------

### Initialize Grommet App with Box

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/learn/the-box-model-part-one.mdx

Basic setup for a Grommet application, including the Box component to wrap content. Use 'full="min"' to ensure the Grommet app fills the viewport.

```javascript
import { Box, Grommet } from 'grommet';
import { hpe } from 'grommet-theme-hpe';
...
return (
    // full="min" causes Grommet to fill the entire viewport
    <Grommet theme={hpe} full="min">
	    <Box>Hello world</Box>
    </Grommet>
)
```

--------------------------------

### Header Component Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/all-components.mdx

Example of the Header component. Refer to the HPE Design System guidance for its integration.

```javascript
import { HeaderExample } from '../../examples';

<Example
  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/components/header/HeaderExample.js"
  height="none"
  width="100%"
  guidance="/components/header"
>
  <HeaderExample />
</Example>
```

--------------------------------

### Tip Simple Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/tip.mdx

Demonstrates the basic usage of the Tip component. This is useful for providing additional context on elements without cluttering the main interface.

```javascript
import React from "react";
import { Box, Tip } from "grommet";

export const TipSimpleExample = () => (
  <Box direction="row" justify="center" pad="large">
    <Tip content="This is a simple tip!">
      <Box
        pad="medium"
        background="accent-1"
        align="center"
        justify="center"
      >
        Hover me
      </Box>
    </Tip>
  </Box>
);

```

--------------------------------

### Build the Library

Source: https://github.com/grommet/hpe-design-system/blob/master/packages/icons-grommet/README.md

Build the HPE Icons Grommet library for production using Vite.

```bash
pnpm build
```

--------------------------------

### Accordion Example Component

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/accordion.mdx

This is an example component for the Accordion. It is used to demonstrate the functionality and usage of the Accordion component.

```javascript
import { AccessibilitySection, Example } from '../../layouts';
import { AccordionExample } from '../../examples';

<Example
  componentName="Accordion"
  docs="https://v2.grommet.io/accordion#props"
  designer="https://designer.grommet.io/accordion?id=HPE-design-system-hpedesignsystem-hpe-com&mode=edit"
  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/components/accordion/AccordionExample.js"
  figma="https://www.figma.com/design/HDckqS2MWhINfC8EIQPMV1/HPE-Design-System-Components-V2?m=auto&node-id=2209-1760&t=xxvcTYIZfxpoGLlK-1"
  grommetSource="https://github.com/grommet/grommet/blob/master/src/js/components/Accordion/Accordion.js"
>
  <AccordionExample />
</Example>
```

--------------------------------

### Install New Icon Package

Source: https://github.com/grommet/hpe-design-system/blob/master/packages/codemods/migration_guides/GROMMET_ICONS_TO_HPE.md

Uninstall the old grommet-icons package and install the new @hpe-design/icons-grommet package.

```bash
npm uninstall grommet-icons
npm install @hpe-design/icons-grommet
```

--------------------------------

### After Migration Example

Source: https://github.com/grommet/hpe-design-system/blob/master/packages/codemods/migration_guides/GROMMET_ICONS_TO_HPE.md

Shows the equivalent code after migration to '@hpe-design/icons-grommet', demonstrating updated imports and icon names like StatusCritical, StatusGood, Right, Left, and ChartBar.

```jsx
import React from 'react';
import { Box, Button } from 'grommet';
import { 
  StatusCritical, 
  StatusGood, 
  Right, 
  Left,
  ChartBar
} from '@hpe-design/icons-grommet';

export const StatusCard = ({ status }) => {
  const Icon = status === 'error' ? StatusCritical : StatusGood;
  
  return (
    <Box direction="row" gap="small">
      <Icon />
      <ChartBar />
      <Button icon={<Left />} />
      <Button icon={<Right />} />
    </Box>
  );
};

```

--------------------------------

### Install react-syntax-highlighter with PNPM

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/code-blocks.mdx

Install the react-syntax-highlighter package using pnpm. This is a prerequisite for using code blocks.

```bash
pnpm install react-syntax-highlighter
```

--------------------------------

### Run Storybook for Icon Exploration

Source: https://github.com/grommet/hpe-design-system/blob/master/packages/icons-grommet/README.md

Start Storybook to explore all available HPE icons and their usage within the Grommet ecosystem.

```bash
pnpm storybook
```

--------------------------------

### Anchor Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/all-components.mdx

Demonstrates the Anchor component for creating links. Import the Anchor component.

```javascript
import { Anchor } from "grommet";

function AnchorExample() {
  return (
    <Anchor href="#" label="Clickable Anchor" />
  );
}

export default AnchorExample;
```

--------------------------------

### Keyboard Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/all-components.mdx

Provides a way to handle keyboard events. Use this to create keyboard shortcuts or custom navigation.

```javascript
import React from 'react';
import { Keyboard, Box, Text } from 'grommet';

export const KeyboardExample = () => (
  <Keyboard
    target="document"
    onEsc={() => alert('Escape key pressed!')}
    onUp={() => alert('Up arrow key pressed!')}
  >
    <Box pad="medium" background="status-ok">
      Press Esc or Up arrow.
    </Box>
  </Keyboard>
);
```

--------------------------------

### Icon Size Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/foundation/icons.mdx

Demonstrates how to scale icons using predefined size options to match the typography scale for consistent alignment with text.

```jsx
import { Example } from '../../layouts';
import { IconSizeExample } from '../../examples';

<Example code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/foundation/icons/IconSizeExample.js">
  <IconSizeExample />
</Example>
```

--------------------------------

### Three Column Dashboard Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/dashboards.mdx

This example demonstrates a three-column dashboard layout. It includes various components for displaying data, such as chart cards and a page header. Ensure all listed JavaScript files are available for the example to function correctly.

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/ThreeColumnDashboard.js
```

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/page-layouts/components/AppContainer.js
```

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/page-layouts/anatomy/components/ContentArea.js
```

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/components/PageHeader.js
```

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/content/chartCards/CostByMonth.js
```

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/content/chartCards/CostByService.js
```

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/content/chartCards/CostByYear.js
```

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/content/chartCards/RulesAudit.js
```

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/components/ChartCard.js
```

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/components/Legend.js
```

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/components/Measure.js
```

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/dashboards/components/MeterGroup.js
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/grommet/hpe-design-system/blob/master/CONTRIBUTING.md

After cloning the repository, install all necessary project dependencies using pnpm. This command ensures your local environment is set up correctly for development.

```bash
pnpm install
```

--------------------------------

### Customize Form Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/forms/index.mdx

Example of a customizable form. This template can be adapted for various specific user input needs.

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/forms/CustomizeExample.js
```

--------------------------------

### Image Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/all-components.mdx

Illustrates the use of the Image component. Check the documentation for advanced features and styling.

```javascript
import React from 'react';
import { Image } from 'grommet';

export const ImageExample = () => (
  <Image
    src="/img/card_image.jpg"
    fit="contain"
    alignSelf="center"
  />
);
```

--------------------------------

### Sort Form Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/forms/index.mdx

Example demonstrating a form for sorting options. Refer to the filtering documentation for related functionality.

```javascript
https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/forms/SortExample.js
```

--------------------------------

### Before Migration Example

Source: https://github.com/grommet/hpe-design-system/blob/master/packages/codemods/migration_guides/GROMMET_ICONS_TO_HPE.md

Illustrates the usage of icons from the 'grommet-icons' library before migration, including StatusCriticalSmall, StatusGoodSmall, Next, Previous, and BarChart.

```jsx
import React from 'react';
import { Box, Button } from 'grommet';
import { 
  StatusCriticalSmall, 
  StatusGoodSmall, 
  Next, 
  Previous,
  BarChart
} from 'grommet-icons';

export const StatusCard = ({ status }) => {
  const Icon = status === 'error' ? StatusCriticalSmall : StatusGoodSmall;
  
  return (
    <Box direction="row" gap="small">
      <Icon />
      <BarChart />
      <Button icon={<Previous />} />
      <Button icon={<Next />} />
    </Box>
  );
};

```

--------------------------------

### DateInput Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/components/all-components.mdx

Demonstrates the DateInput component for selecting dates. Import DateInput.

```javascript
import { DateInput } from "grommet";

function DateInputExample() {
  return (
    <DateInput
      value={new Date().toISOString().slice(0, 10)}
      onChange={({ value }) => {}}
    />
  );
}

export default DateInputExample;
```

--------------------------------

### Toast Notification Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/toast-notifications.mdx

A basic example of a toast notification. This snippet demonstrates the default appearance and behavior of a toast.

```javascript
import React from 'react';
import { Box, Text } from 'grommet';
import { StatusGood } from '@hpe-design/icons-grommet';

const ToastNotificationExample = () => (
  <Box
    background="status-ok"
    pad="medium"
    round="small"
    direction="row"
    align="center"
    gap="small"
    elevation="medium"
  >
    <StatusGood color="white" />
    <Text color="white" weight="bold">
      Your changes have been saved.
    </Text>
  </Box>
);

export default ToastNotificationExample;
```

--------------------------------

### Start Local Development Server

Source: https://github.com/grommet/hpe-design-system/wiki/Release:-hpe‐design‐tokens

Run this command to start the local development server for the HPE Design System documentation site. Ensure design token changes are reflected.

```bash
cd aries-site && yarn start
```

--------------------------------

### Simple Popover Example

Source: https://github.com/grommet/hpe-design-system/blob/master/apps/docs/src/pages/templates/popover.mdx

A basic example of a Popover component. This snippet demonstrates the fundamental structure and usage of the Popover.

```javascript
import { Example } from '../../layouts';
import { PopoverSimpleExample } from '../../examples';

<Example
  figma="https://www.figma.com/design/HDckqS2MWhINfC8EIQPMV1/HPE-Design-System-Components-V2?m=auto&node-id=2683-410&t=9Kvc9d8gzK405Y1J-1"
  width="100%"
  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/apps/docs/src/examples/templates/popover/PopoverSimpleExample.js"
>
  <PopoverSimpleExample />
</Example>
```