mirror of
https://github.com/vercel/commerce.git
synced 2025-05-09 11:17:50 +00:00
86 lines
5.5 KiB
Markdown
86 lines
5.5 KiB
Markdown
# Component Hierarchy and Data-Test Attributes
|
|
|
|
Voici un schéma Mermaid qui représente les composants et les hiérarchies des attributs data-test pour le composant `ThreeItemGrid`.
|
|
|
|
```mermaid
|
|
%%{init: {'theme': 'dark'}}%%
|
|
|
|
graph TD
|
|
|
|
%% Utilisation d'un vert plus foncé (#339966) avec du texte blanc (#fff) pour améliorer le contraste
|
|
classDef grid-item-class fill:#339966,stroke:#aaa,stroke-width:2px,color:#fff;
|
|
|
|
%% Bleu foncé (#336699) avec texte blanc (#fff) pour les conteneurs
|
|
classDef container-class fill:#336699,stroke:#aaa,stroke-width:2px,color:#fff;
|
|
|
|
%% Rouge foncé (#cc3333) avec texte blanc (#fff) pour les composants React
|
|
classDef react-component-class fill:#cc3333,stroke:#aaa,stroke-width:2px,color:#fff;
|
|
|
|
%% Subgraph représentant la structure globale de la grille
|
|
subgraph ThreeItemGrid
|
|
style ThreeItemGrid fill:#333,stroke:#aaa,stroke-width:2px;
|
|
|
|
%% Grid Item avec taille configurable
|
|
ThreeItemGridItem[⚛️ Three Item Grids]
|
|
class ThreeItemGridItem react-component-class
|
|
|
|
GridItem[🗂️ data-test: three-item-grid]
|
|
ThreeItemGridItem --> GridItem
|
|
class GridItem container-class
|
|
|
|
GridItemSize[🔍 data-test: grid-item <br>⬛ full / ⬜ half]
|
|
GridItem --> GridItemSize
|
|
class GridItemSize grid-item-class
|
|
|
|
%% Grid Product Link pour GridItemSize
|
|
GridItemSize --> GridProductLink[🔍 data-test: grid-product-link]
|
|
class GridProductLink grid-item-class
|
|
|
|
GridProductLink --> GridTileImage[⚛️ GridTileImage]
|
|
class GridTileImage react-component-class
|
|
|
|
GridTileImage --> GridTileContainer[🗂️ data-test: grid-tile-container]
|
|
class GridTileContainer container-class
|
|
|
|
GridTileContainer --> GridTileImageItem[🔍 data-test: grid-tile-image]
|
|
class GridTileImageItem grid-item-class
|
|
|
|
GridTileContainer --> Label[⚛️ Label]
|
|
class Label react-component-class
|
|
|
|
Label --> LabelContainer[🗂️ data-test: label-container]
|
|
class LabelContainer container-class
|
|
|
|
LabelContainer --> LabelContentWrapper[🗂️ data-test: label-content-wrapper]
|
|
class LabelContentWrapper container-class
|
|
|
|
LabelContentWrapper --> LabelTitleText[🔍 data-test: label-title-text]
|
|
class LabelTitleText grid-item-class
|
|
|
|
LabelContentWrapper --> Price[⚛️ Price]
|
|
class Price react-component-class
|
|
|
|
Price --> PriceAmount[🔍 data-test: price-amount]
|
|
class PriceAmount grid-item-class
|
|
|
|
Price --> PriceCurrencyCode[🔍 data-test: price-currency-code]
|
|
class PriceCurrencyCode grid-item-class
|
|
end
|
|
|
|
%% Subgraph pour la légende
|
|
subgraph Légende
|
|
direction LR
|
|
ReactComp[⚛️ Composants React]
|
|
class ReactComp react-component-class
|
|
|
|
DataTestCont[🗂️ Conteneur data-test]
|
|
class DataTestCont container-class
|
|
|
|
TestableElem[🔍 Éléments testables]
|
|
class TestableElem grid-item-class
|
|
end
|
|
|
|
```
|
|
|
|
[](https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNqVVs1u20YQfpUFA0ENIKaWlcoWWwRo5aII4ACBraJAKx9W5FBaeLlLLJeJHUGX3nooeilQoCnQs4E8QO96E79A-wid3RUp_oh2woNE7sx837czQ-6svVBG4AVer7dmgumArPt6BQn0A9KPqLrubza93lzMxVLRdEVmZ-a-1yPfa8ZZRjWTgkT9XJA3oDRJeZ6RWIpwe0c-ezIaTSbj8VNC30BIopxouNFAFpyKEK1xHD8lqcwVocn2jjOpQBEOJJRCK5ppmIuQ0yw7g5gsFYt8piHx7RKJGefBDn-QaSWvIXhCKd3d-29ZpFfBcXozCCWXKjBkX-6Uf8Mhr2ocjyeTncYugRwyKwsE5Cqr6DKLlAlQDV0G81N1Xch8CXthYTjC66OEJanMqNAZuQAa6oo8ZZ596yBA6JpIh_-pIi_zhWsEBana3mWIisyEU4LBeahzBWTJ5YJiISMw61g6zrGWWRE5WymAl1jL77Coc0HwyvQt-tcMZSoflmh1GQjUZsNM_C5n1BCbEsVsmSu6MCqMa43H_P90_-f7f__5zRkcgjFlV87fZa0VdTi7LsT9lvj__f3Hz4Ygopr6GjJ8zbSBcy1tmvuqQxrx_RclTlVO6dBowUP8l-wdoIbff60KKF8p8tVCvbj_8J7EOefkc3L_4S-yojy-qoPUlBjEQ2rMevNlbVbotZIRdgo5Z-LadXEbtYZXEO8CTdzh3aTOwefocdWUV4nuUth0K4hnjMPLhC6haJTaYouptHxch-zdq3zToqyHmsfqxw8w-GX1D6ooQdpdUuffO7b2vGvgA-m2AtjDKbCd80C62-TndAG8SLR9qKHblccT69xKvAezyY1HRybr0V1pbHjVaFHeD_jdSx_jNtt46xwPK9gDPSqj4lpqmTHNYYbnSKuYToM2dt8cNG36MrarlF3MrxULy7fGPtTA7crjxXRuJd7XicxFexupsfnUGtssLqhLf4NhmisFIryd4mzUwRPuXHwzP7XpqghtUhBR8zx1xzklfHu3RHP1wDwvlwxJxBSEduw6v3Ar9tSfYvqKRE8bE0FNXundlXfnfIYbnuF-TVHLxp0WM9A-HzXsalBXkxq7OYu_5cV3ZfsLbjoBI1fvjI2jtxLSkUxv4CWgEsoinGXXJnju2Tl27gV4i5pxpuRzby426EpzLS9vRegFOLTAwFM4eq28IKY8w6c8xd3BGaOY_qRcTan4UcqkCIGIaaleueHZztDWxQvW3o0XHB-Nnx0_H05Ono-GJ6fDk4F36wVHm4H3zkIMnx25a3h8OpycfjEab_4HDOwk4w)
|