Shared:Components:Tags Added test and README.md
This commit is contained in:
parent
2e6ab2d06a
commit
9d2dba3e9c
@ -1,24 +1,82 @@
|
||||
# Room logo
|
||||
# Tags Component
|
||||
|
||||
Tags allow you display virtual room tags
|
||||
The `Tags` component is used to display tags.
|
||||
|
||||
### Usage
|
||||
## Properties
|
||||
|
||||
```js
|
||||
import Tags from "@docspace/components/tags";
|
||||
```
|
||||
| Property | Type | Required | Default | Description |
|
||||
| ------------- | -------------------------- | -------- | ------- | --------------------------------------------------- |
|
||||
| `id` | `string` | No | - | Accepts an id. |
|
||||
| `tags` | `Array<TagType \| string>` | Yes | - | Accepts the tags. |
|
||||
| `className` | `string` | No | - | Accepts a class. |
|
||||
| `columnCount` | `number` | Yes | - | Accepts the tag column count. |
|
||||
| `style` | `React.CSSProperties` | No | - | Accepts CSS styles. |
|
||||
| `onSelectTag` | `(tag?: string) => void` | Yes | - | Accepts the function called when a tag is selected. |
|
||||
|
||||
### Property `id`
|
||||
|
||||
- Type: `string`
|
||||
- Required: No
|
||||
- Default: -
|
||||
- Description: Accepts an id.
|
||||
|
||||
### Property `tags`
|
||||
|
||||
- Type: `Array<TagType | string>`
|
||||
- Required: Yes
|
||||
- Default: -
|
||||
- Description: Accepts the tags.
|
||||
|
||||
### Property `className`
|
||||
|
||||
- Type: `string`
|
||||
- Required: No
|
||||
- Default: -
|
||||
- Description: Accepts a class.
|
||||
|
||||
### Property `columnCount`
|
||||
|
||||
- Type: `number`
|
||||
- Required: Yes
|
||||
- Default: -
|
||||
- Description: Accepts the tag column count.
|
||||
|
||||
### Property `style`
|
||||
|
||||
- Type: `React.CSSProperties`
|
||||
- Required: No
|
||||
- Default: -
|
||||
- Description: Accepts CSS styles.
|
||||
|
||||
### Property `onSelectTag`
|
||||
|
||||
- Type: `(tag?: string) => void`
|
||||
- Required: Yes
|
||||
- Default: -
|
||||
- Description: Accepts the function called when a tag is selected.
|
||||
|
||||
## Usage Example
|
||||
|
||||
```jsx
|
||||
<Tags
|
||||
tag=["tag1","tag2"]
|
||||
onSelectTag={}
|
||||
/>
|
||||
```
|
||||
import React from "react";
|
||||
import Tags from "@docspace/shared/components";
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------- | :------------: | :------: | :----: | :-----: | -------------------------------------------------- |
|
||||
| `id` | `string` | - | - | - | Accepts id |
|
||||
| `className` | `string` | - | - | - | Accepts class |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
| `tags` | `array` | - | - | - | Accepts tags |
|
||||
| `onSelectTag` | `function` | - | - | - | Accepts the function that called when tag selected |
|
||||
const MyComponent = () => {
|
||||
const handleTagSelection = (selectedTag) => {
|
||||
console.log("Selected tag:", selectedTag);
|
||||
};
|
||||
|
||||
return (
|
||||
<Tags
|
||||
id="myTags"
|
||||
tags={["tag1", "tag2", "tag3"]}
|
||||
className="custom-tags"
|
||||
columnCount={2}
|
||||
style={{ color: "blue" }}
|
||||
onSelectTag={handleTagSelection}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default MyComponent;
|
||||
```
|
||||
|
20
packages/shared/components/tags/Tags.test.tsx
Normal file
20
packages/shared/components/tags/Tags.test.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import React from "react";
|
||||
import "@testing-library/jest-dom";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
|
||||
import { Tags } from "./Tags";
|
||||
import type { TagsProps } from "./Tags.types";
|
||||
|
||||
const baseProps: TagsProps = {
|
||||
tags: ["tag1", "tag2"],
|
||||
columnCount: 2,
|
||||
onSelectTag: () => {},
|
||||
};
|
||||
|
||||
describe("<Tags />", () => {
|
||||
it("renders without error", () => {
|
||||
render(<Tags {...baseProps} />);
|
||||
|
||||
expect(screen.getByTestId("tags"));
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue
Block a user