import { Canvas, Meta } from "@storybook/addon-docs";
import { GlArticle } from "GlArticle";
import { GlCodeBlock } from "GlCodeBlock";
import heroImgSrc from "../../assets/img/contribution.png";
import sspcloudMp4 from "../../assets/videos/sspcloud.mp4";
import { getGlArticleStoryStyle } from "../../getGlArticleStyle";
import { sectionName } from "./sectionName";
import { metaProps } from "../metaProps";
import { DocsComponentWrapper } from "../DocsComponentWrapper";


<Meta
    title={`${sectionName}/GlArticle`}
    component={GlArticle}
    parameters={
        metaProps.parameters
    }
    decorators= {
        metaProps.decorators
    }
/>

# GlArticle

This component displays an article composed of a title, paragraph
and button, and an illustration alongside it. The illustration
can be an image, video or a custom component.

## Props

<br />

### GlArticle has the following Props:

-   **className** : Give a class name to the root element.
-   **classes** : Target any of the elements inside with a class name.
-   **id** : Set an id on the root element.
-   **title** : string or react node.
-   **body** : string or react node.
-   **buttonLabel** : string or react node.
-   **buttonLink** : Set the link and function to be triggered when
    you click on the article button. <br />

```typescript
buttonLink?: {
    href: string;
    onClick?: () => void;
}
```

-   **illustration** : Display an illustration that can be of type image,
    video or custom component. The properties that will be inferred by
    typescript will change depending on which type you choose.
-   **illustrationPosition** : Set which side the illustration
    is to appear on.
-   **illustrationZoomFactor** : The initial size of the illustration
    will be multiplied by the value that you set.
-   **hasAnimation** : Decide if you want an animation to be triggered
    when the component enters the view port. Value is true by default.

## Examples

-   [With image](#with-image)
-   [With video](#with-video)
-   [With custom component](#with-custom-component)

### With image <a id="with-image"></a>

<DocsComponentWrapper 
    component={
        <GlArticle
            title='Title'
            body='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate leo ac imperdiet hendrerit. Morbi semper ut erat et dignissim. Nullam tempus sapien quis ligula blandit euismod. In imperdiet a neque quis fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla id quam eget libero tincidunt tincidunt.'
            buttonLabel='Button Label'
            buttonLink={{
                "href": "https://example.com/",
            }}
            classes={getGlArticleStoryStyle({
                "illustrationPosition": "right",
            })}
            illustration={{
                "type": "image",
                "src": heroImgSrc,
                "hasShadow": false,
                "alt": "article image",
                "hasBorderRadius": false,
            }}
        />
    }
/>

```tsx
<GlArticle
    title="Title"
    body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate leo ac imperdiet hendrerit. Morbi semper ut erat et dignissim. Nullam tempus sapien quis ligula blandit euismod. In imperdiet a neque quis fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla id quam eget libero tincidunt tincidunt."
    buttonLabel="Button Label"
    buttonLink={{
        "href": "https://example.com/"
    }}
    illustration={{
        "type": "image",
        "src": heroImgSrc,
        //You can also set the sources property to load
        //optimised images when the browser supports it
        "sources": [
            {
                "srcSet": heroImgWebp,
                "type": "image/webp"
            }
        ]
        "hasShadow": false,
        "alt": "article image",
        "hasBorderRadius": false
    }}
/>
```
### With video <a id="with-video"></a>

<DocsComponentWrapper 
    component={
        <GlArticle
            title='Title'
            body='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate leo ac imperdiet hendrerit. Morbi semper ut erat et dignissim. Nullam tempus sapien quis ligula blandit euismod. In imperdiet a neque quis fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla id quam eget libero tincidunt tincidunt.'
            buttonLabel='Button Label'
            buttonLink={{
                "href": "https://example.com/",
            }}
            classes={getGlArticleStoryStyle({
                "illustrationPosition": "left",
            })}
            illustration={{
                "type": "video",
                "sources": [
                    {
                        "src": sspcloudMp4,
                        "type": "video/mp4",
                    },
                ],
            }}
            illustrationPosition='left'
        />
    }
/>

```tsx
<GlArticle
    title='Title'
    body='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate leo ac imperdiet hendrerit. Morbi semper ut erat et dignissim. Nullam tempus sapien quis ligula blandit euismod. In imperdiet a neque quis fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla id quam eget libero tincidunt tincidunt.'
    buttonLabel='Button Label'
    buttonLink={{
        "href": "https://example.com/",
    }}
    illustration={{
        "type": "video",
        "sources": [
            {
                "src": sspcloudMp4,
                "type": "video/mp4",
            },
        ],
    }}
    //Position illustration on the left
    illustrationPosition='left'

/>

````

### With custom component <a id="with-custom-component"></a>

<DocsComponentWrapper 
    component={
        <GlArticle
            title='Title'
            body='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate leo ac imperdiet hendrerit. Morbi semper ut erat et dignissim. Nullam tempus sapien quis ligula blandit euismod. In imperdiet a neque quis fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla id quam eget libero tincidunt tincidunt.'
            buttonLabel='Button Label'
            buttonLink={{
                "href": "https://example.com/",
            }}
            classes={getGlArticleStoryStyle({
                "illustrationPosition": "right",
            })}
            illustration={{
                "type": "custom component",
                "Component": () => {
                    return (
                        <GlCodeBlock
                            programingLanguage='typescript'
                            text={`function getRandomInt(max) {
	return Math.floor(Math.random() * max);
}
console.log(getRandomInt(3));
console.log(getRandomInt(1));
console.log(Math.random());
		`}
                        />
                    );
                },
            }}
        />
    }
/>

```tsx
<GlArticle
    title='Title'
    body='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate leo ac imperdiet hendrerit. Morbi semper ut erat et dignissim. Nullam tempus sapien quis ligula blandit euismod. In imperdiet a neque quis fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla id quam eget libero tincidunt tincidunt.'
    buttonLabel='Button Label'
    buttonLink={{
        "href": "https://example.com/",
    }}
    illustration={{
        "type": "custom component",
        "Component": () => {
            return (
                <GlCodeBlock
                    language='typescript'
                    text={`console.log("hello world!")`}
                />
            );
        },
    }}
/>
````
