feat: add IndentSection component

.eslintrc.json

@@ -36,7 +36,7 @@
     "@typescript-eslint/adjacent-overload-signatures": "error",
     "@typescript-eslint/array-type": "error",
     "@typescript-eslint/consistent-type-assertions": "error",
-    "@typescript-eslint/consistent-type-definitions": "error",
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
     "@typescript-eslint/no-misused-new": "error",
     "@typescript-eslint/no-namespace": "error",
     "@typescript-eslint/no-require-imports": "off",

packages/module/patternfly-docs/content/examples/IndentSection/IndentSection.md

@@ -0,0 +1,23 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: AI-infra-ui-components
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: IndentSection
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['IndentSection']
+---
+
+import { IndentSection } from "@patternfly/ai-infra-ui-components";
+
+Note: this component documents the API and enhances the [existing IndentSection](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/pages/projects/components/IndentSection.tsx) component from odh-dashboard. It can be imported from [@patternfly/ai-infra-ui-components](https://www.npmjs.com/package/@patternfly/AI-infra-ui-components). Alternatively, it can be used within the odh-dashboard via the import: `~/pages/projects/components/IndentSection`
+
+### Example
+
+```js file="./IndentSectionBasic.tsx"
+
+```

packages/module/patternfly-docs/content/examples/IndentSection/IndentSectionBasic.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
+import { IndentSection } from '@patternfly/ai-infra-ui-components';
+
+export const IndentSectionBasic: React.FunctionComponent = () => (
+  <Stack hasGutter>
+    <StackItem>This text is not indented</StackItem>
+    <StackItem>
+      <IndentSection>This text is wrapped in an IndentSection and thus it is indented</IndentSection>
+    </StackItem>
+  </Stack>
+);

packages/module/src/IndentSection/IndentSection.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export type IndentSectionProps = {
+  /** Content rendered inside the IndentSection. */
+  children: React.ReactNode;
+};
+
+export const IndentSection: React.FunctionComponent<IndentSectionProps> = ({ children }: IndentSectionProps) => (
+  <Flex>
+    <FlexItem spacer={{ default: 'spacerLg' }} />
+    <FlexItem flex={{ default: 'flex_1' }}>{children}</FlexItem>
+  </Flex>
+);

packages/module/src/IndentSection/index.ts

@@ -0,0 +1 @@
+export * from './IndentSection';

packages/module/src/index.ts

@@ -1,2 +1,3 @@
 export * from './DeleteModal';
+export * from './IndentSection';
 export * from './TruncatedText';