@amsom-habitat/slider-com-ciblee NPM

Slider Communication Ciblee

Ce package propose un slider qui s'alimente a l'aide des communications ciblée d'AMSOM Habitat, la demo est visible ici

Installation

npm i @amsom-habitat/slider-com-ciblee

Importer les css dans le main.js tel que :

import '@amsom-habitat/slider-com-ciblee/dist/style.css'

Utilisation

Le composant dispose des props suivantes :

slides : un tableau d'objet contenant les informations des slides exemple complet :

const slides = [
  {
    "title": "Exemple",
    "content": "All configured and shadowed",
    "imageUrl": "https:\/\/fastly.picsum.photos\/id\/8\/1920\/1080.jpg?hmac=ZWQsrAG-h-Ip98by6rfqjHRyvoEe1IKeeT2rbHCcoH4",
    "action": "lien",
    "valeurAction": "https://www.google.com",
    "params": {
      "blurred": true,
      "titleColor": "#430000",
      "contentColor": "#000043",
      "titleBgColor": "#D3D3D3",
      "contentBgColor": "#430043",
      "btnTextColor": "#004300",
      "btnBgColor": "#000000",
      "titleShadow": true,
      "contentShadow": true,
    },
  }
  ...
]

defaultImage : une image par défaut si l'url de l'image n'est pas valide

Le composant a également des emitters pour les actions :

showMore : émit lorsqu'un utilisateur clique sur le bouton "en savoir plus" (en paramètre la slide slide)
slideLoaded : émit lorsqu'un slide est chargé (en paramètre la slide slide)

Développment

Après avoir fait vos dev, veillez à bien tenir à jour le changelog.md ainsi que la version du package.json puis faites :

git add .
git commit -m '<commentaire'
git push origin <branch>

Tests

Les tests sont réalisé de manière automatique sur les branches main et dev mais peuvent être fait localement, notemment pour voir l'evolution du développement via la commande :

npm run storybook

Le valideur devra, si des changements sont observés, aller sur la pipeline pour valider les différences à l'aide de chromatic, sans cela aucun merge-request ne sera possible. Si un merge est effectué, une double verification sera necessaire.