import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";

import AccessRightSelect from "./";
import * as stories from "./access-right-select.stories.js";

<Meta
  title="Components/AccessRightSelect"
  component={AccessRightSelect}
  argTypes={{
    onSelect: {
      action: "onSelect",
    },
    options: { required: true },
  }}
/>

# AccessRightSelect

Custom access-right-select

<Canvas>
  <Story story={stories.Default} name="Default" />
</Canvas>

### Properties

<ArgsTable story="Default" />

### Import

```js
import AccessRightSelect from "@appserver/components/access-right-secelt";
```

#### Options is an array of objects that contains the following fields:

- key
- title
- description
- icon
- quota
- color

##### Example:

```js
  {
    key: "key1",
    title: "Room administrator",
    description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`,
    icon: CrownIcon,
    quota: "free",
    color: "#20D21F",
  }
```