Proposer un nouveau composant fonctionnel qui permette d'inclure le menu « Tout SNCF » en générant le markup HTML depuis le JSON issu de l'API (fichier d'exemple joint).
L'idée est d'utiliser au maximum les atomes/molécules existants dans Bootstrap pour le markup.
L'url de l'API n'est pas encore connu, il y aura juste un token public à renseigner.
Le menu ainsi produit doit ressembler à celui ici côté fonctionnel : https://www.sncf.com/fr#menu (l'API est la même).
Idéalement, il faudrait pouvoir l'appeler avec un simple <div class="menu-toutsncf"></div> ou équivalent et prévoir un paramètre qui permette de rendre son instanciation automatique ou non (par ex data-autoload="on") ; par défaut, c'est à dire sans renseigner le paramètre, le composant ne doit pas être instancié (et donc équivalent à "off").
Une foit instancié, le menu est rempli par son markup HTML découlant du contenu de l'API JSON.
Il devrait être possible de « forcer » le menu ouvert au chargement de la page et instanciation, à l'instar du lien plus haut sur sncf.com
Il faudra aussi prévoir la possibilité de l'instancier en JS (et le rendre « importable ») avec les méthodes ad-hoc.
Enfin, l'ensemble des liens <a> devront envoyer vers un nouvel onglet par défaut (inclure un paramètre pour désactiver ce comportement serait bien, voire possible de désactiver seulement si le lien est interne au site d'origine ? avec un paramètre qui définisse le site d'origine).
Attention à bien permettre la mise à jour et la navigation retour avec le breadcrumb (par ex TOUT SNCF > Le groupe > Chiffres Clés).
Le fichier joint en JSON présente l'arborescence du menu (les enfants sont dans l'objet below), avec une structure simple qui contient le titre, la description et l'icône en SVG ou son lien — merci de prévoir que par défaut il utilise le contenu SVG et pas le lien vers le picto.
Prévoir le cas de figure où le SVG serait absent ou non conforme sans que ça casse l'affichage.
En cas de doute sur l'UI, utiliser le site sncf.com comme référence.
Proposer un nouveau composant fonctionnel qui permette d'inclure le menu « Tout SNCF » en générant le markup HTML depuis le JSON issu de l'API (fichier d'exemple joint). L'idée est d'utiliser au maximum les atomes/molécules existants dans Bootstrap pour le markup.
L'url de l'API n'est pas encore connu, il y aura juste un token public à renseigner. Le menu ainsi produit doit ressembler à celui ici côté fonctionnel : https://www.sncf.com/fr#menu (l'API est la même).
Il a déjà été fabriqué côté UI et est visible en statique ici : https://design-bootstrap.sncf.fr/docs/4.3/examples/navigation/
Idéalement, il faudrait pouvoir l'appeler avec un simple
<div class="menu-toutsncf"></div>ou équivalent et prévoir un paramètre qui permette de rendre son instanciation automatique ou non (par exdata-autoload="on") ; par défaut, c'est à dire sans renseigner le paramètre, le composant ne doit pas être instancié (et donc équivalent à "off"). Une foit instancié, le menu est rempli par son markup HTML découlant du contenu de l'API JSON.Il devrait être possible de « forcer » le menu ouvert au chargement de la page et instanciation, à l'instar du lien plus haut sur sncf.com
Il faudra aussi prévoir la possibilité de l'instancier en JS (et le rendre « importable ») avec les méthodes ad-hoc.
Enfin, l'ensemble des liens
<a>devront envoyer vers un nouvel onglet par défaut (inclure un paramètre pour désactiver ce comportement serait bien, voire possible de désactiver seulement si le lien est interne au site d'origine ? avec un paramètre qui définisse le site d'origine).Attention à bien permettre la mise à jour et la navigation retour avec le breadcrumb (par ex
TOUT SNCF > Le groupe > Chiffres Clés).example-api.json.zip
Le fichier joint en JSON présente l'arborescence du menu (les enfants sont dans l'objet
below), avec une structure simple qui contient le titre, la description et l'icône en SVG ou son lien — merci de prévoir que par défaut il utilise le contenu SVG et pas le lien vers le picto.Prévoir le cas de figure où le SVG serait absent ou non conforme sans que ça casse l'affichage.
En cas de doute sur l'UI, utiliser le site sncf.com comme référence.
Merci ;)