Skip to content

docs: added doc support for file-addition-trigger #1240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
71 changes: 71 additions & 0 deletions apps/portal/src/content/docs/components/file-additions-trigger.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
---
title: FileAdditionsTrigger
description: FileAdditionsTrigger component
---

The `FileAdditionsTrigger` component provides a UI element for creating new files or uploading files. It uses a dropdown menu to offer these options.

import { DocsPage } from "@/components/docs-page";

<DocsPage.ComponentExample
client:only
code={`<FileAdditionsTrigger
useTranslationStore={() => ({ t: (key, fallback) => fallback })}
pathNewFile="/new-file"
pathUploadFiles="/upload-files"
/>`}
/>

## Usage

```typescript jsx
import { FileAdditionsTrigger } from '@harnessio/ui/components'

// ...

return (
<FileAdditionsTrigger
useTranslationStore={useTranslationStoreHook}
pathNewFile="/new-file"
pathUploadFiles="/upload-files"
/>
)
```

## API Reference

The `FileAdditionsTrigger` component helps in navigation to create new files or upload files.

```typescript jsx
<FileAdditionsTrigger
useTranslationStore={useTranslationStoreHook}
pathNewFile="/new-file"
pathUploadFiles="/upload-files"
Comment on lines +41 to +43
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a quick comment for each of the props to briefly explain them?

Suggested change
useTranslationStore={useTranslationStoreHook}
pathNewFile="/new-file"
pathUploadFiles="/upload-files"
useTranslationStore={useTranslationStoreHook} // something interesting
pathNewFile="/new-file" // something else
pathUploadFiles="/upload-files" // and some more

/>
```

<DocsPage.PropsTable
props={[
{
name: "useTranslationStore",
description:
"Function that returns a translation store object with a 't' function for internationalization support. The 't' function takes a key and fallback text.",
required: true,
value: "() => { t: (key: string, fallback: string) => string }",
},
{
name: "pathNewFile",
description:
"URL path to navigate to when the user selects the 'Create New File' option from the dropdown",
required: true,
value: "string",
},
{
name: "pathUploadFiles",
description:
"URL path to navigate to when the user selects the 'Upload Files' option from the dropdown",
required: true,
value: "string",
},
]}
/>