import { Meta } from "@storybook/addon-docs";
import { GlCheckList } from "GlCheckList";
import { getMetaProps } from "../getMetaProps";
import { sectionName } from "./sectionName";
import { css } from "@emotion/css";
import { DocsComponentWrapper } from "../DocsComponentWrapper";


<Meta
    title={`${sectionName}/GlCheckList`}
    component={GlCheckList}
    parameters={
        getMetaProps().parameters
    }
    decorators= {
        getMetaProps().decorators
    }
/>


# GlCheckList

This component displays a list of elements 
composed of a title and description with a green validation tick.
(You can set any **Mui** icon or **svg** component to replace the validation tick).


## Props

<br />

-   **className** : Give a class name to the root element.
-   **classes** : Target any of the elements inside with a class name.
-   **hasAnimation** : Activates a fade in animation.
-   **heading**
-   **subHeading**
-   **elements** : Sets the elements of the list with a title and description. 
    You can also set replace the check icon with an **Mui** icon or **svg** component,
    or hide it completely. <br />

```typescript
elements?: {
    title?: string;
    description?: string;
    CheckIcon?: MuiIconLike | SvgComponentLike;
    isIconHidden?: boolean;
}[];
```

## Examples

-   [Default](#default)


### Default <a id="default"></a>


<DocsComponentWrapper
    component={
        <GlCheckList
            heading="Check List Heading"
            hasAnimation={true}
            elements={[
                {
                    "title": "List element title",
                    "description": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus`,
                },
                {
                    "title": "List element title",
                    "description": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus`,
                },
                {
                    "title": "List element title",
                    "description": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus`,
                },
                {
                    "title": "List element title",
                    "description": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus`,
                },
                {
                    "description": `(Only description) Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus`,
                },
                {
                    "title": "(Only title) List element title",
                },
            ]}
        />
    }
/>

```tsx
import { GlCheckList } from "gitlanding/GlCheckList";

<GlCheckList
    heading="Check List Heading"
    hasAnimation={true}
    elements={[
        {
            "title": "List element title",
            "description": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus`,
        },
        {
            "title": "List element title",
            "description": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus`,
        },
        {
            "title": "List element title",
            "description": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus`,
        },
        {
            "title": "List element title",
            "description": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus`,
        },
        {
            "description": `(Only description) Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus`,
        },
        {
            "title": "(Only title) List element title",
        },
    ]}
/>
```