diff --git a/.eslintrc.json b/.eslintrc.json index 7181b4e..a6dcec8 100644 --- a/.eslintrc.json +++ b/.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", diff --git a/packages/module/patternfly-docs/content/examples/IndentSection/IndentSection.md b/packages/module/patternfly-docs/content/examples/IndentSection/IndentSection.md new file mode 100644 index 0000000..0b70d21 --- /dev/null +++ b/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" + +``` diff --git a/packages/module/patternfly-docs/content/examples/IndentSection/IndentSectionBasic.tsx b/packages/module/patternfly-docs/content/examples/IndentSection/IndentSectionBasic.tsx new file mode 100644 index 0000000..e825752 --- /dev/null +++ b/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 = () => ( + + This text is not indented + + This text is wrapped in an IndentSection and thus it is indented + + +); diff --git a/packages/module/src/IndentSection/IndentSection.tsx b/packages/module/src/IndentSection/IndentSection.tsx new file mode 100644 index 0000000..57d63c5 --- /dev/null +++ b/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 = ({ children }: IndentSectionProps) => ( + + + {children} + +); diff --git a/packages/module/src/IndentSection/index.ts b/packages/module/src/IndentSection/index.ts new file mode 100644 index 0000000..5add8d9 --- /dev/null +++ b/packages/module/src/IndentSection/index.ts @@ -0,0 +1 @@ +export * from './IndentSection'; diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index c1a5b4e..c6e7886 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -1,2 +1,3 @@ export * from './DeleteModal'; +export * from './IndentSection'; export * from './TruncatedText';