import { Meta, Canvas } from "@storybook/blocks";
import * as Stories from "./success-stories.stories";

<Meta of={Stories} name="Docs" />

# Success Stories

### How it works

The `ux-iws-data-controller-success-stories` component will make a POST request to the url specified with the
`src` attribute. It expects the following response:

```json
{
    "data": {
        "elements": [
            { "html": "\n<ux-iws-teaser-image image-ratio=\"17:8\" class=\"ux-u-margin-bottom-30\" data-ux-success-story-filter=\"7,15,26,40\">\n  [AND SO ON]" },
            { "html": "\n<ux-iws-teaser-image image-ratio=\"17:8\" class=\"ux-u-margin-bottom-30\" data-ux-success-story-filter=\"9,10,11,43\">\n  [AND SO ON]" },
            [AND SO ON],
        ],
    },
    "message": "Success",
    "status": "success",
    "arguments": {"L":"0","id":"21","locale":"de_INT","pageUid":"6512/","type":42}
}
```

The `elements` key contains all the boxes (teasers) that should be rendered in the frontend. <br />
The elements `message` and `arguments` of the response are not used by the frontend component. <br />

### Elements of the post request

As mentioned, the `ux-iws-data-controller-success-stories` will make a post request to the url
that was passed as the `src` attribute to the component itself. <br />
The post request has a request body that should be taken into consideration, and is composed
of the follwing elements:

-   TYPO3 specific tag: this defaults to `tx_trumpfspecials_resultlistcustomersuccessstories[uidList]`
    but can be changed via the `formDataAttribute` attribute of the component.
-   ResultsList global variable: the component expects a JS Variable to be set in the global scope
    with the name "ResultLists". This is an example of the existing implementation:
    `var ResultLists = <f:format.raw>{records-ajax}</f:format.raw>;` that can be found in the follwing template:
    `trumpf_specials/Resources/Private/Templates/ResultListCustomerSuccessstories/Show.html`


### HTML structures

Click on `show code` in the story to see the full HTML structure.

For the HTML structure of the boxes expected in the response, see the following story: <br />
As can be seen above, the HTML structure of the boxes need to be formatted as a JSON string. <br />

<LinkTo
    className="ux-text-link"
    kind="TRUMPF.COM/Teaser/Image"
    story="Teaser Image"
>
    View teaser success story teaser box
</LinkTo>

### Filtering elements

In order for the filter to work, the boxes will have to have the attribute `data-ux-success-story-filter`.
The attribute name can be modified using the attribute `filter-attribute-identifier` on the
`ux-iws-data-controller-success-stories`. <br />
For example, setting `filter-attribute-identifier="application"` means that the attribute
on the boxes need to be set as `data-ux-application-filter`. <br />
The value for the `filter-attribute-identifier` defaults to `success-story`. <br />
The vaule on this attribute should correspond to the value of the filters to which it
needs to react to. For example, `data-ux-application-filter="3, 4, 6"` will display the
box when the filter 3, 4, and 6 are activated. <br />
In addition, in order to make the filtering possible by clicking on the (blue) tags of the boxes,
the attributes `data-ux-iws-link-wrapper-ignore` and `data-ux-{identifier}-tag` need to be set
on the `ux-tag` elements of the boxes. The identifier of the attribute can also be set using the
`filter-attribute-identifier`.

### Component tag name update

In the next major version of the library, it will be considered to change the name of the
`ux-iws-data-controller-success-stories` to a more generic name, since the component
can be used for a broader range of use cases. <br />
For now please use the component even if the tag name does not conform to the use case.

# Asynchronous loading

It is possible to load all the success stories asynchronously

<Canvas of={Stories.Default} />

# With preview stories

Another option is to prerender a certain number of preview stories while the others are loading

<Canvas of={Stories.WithPreview} />