Skip to content

dataesr/bso-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Feb 27, 2024
0911314 · Feb 27, 2024
Feb 19, 2024
May 28, 2021
Aug 3, 2021
Jun 6, 2023
Feb 20, 2024
Feb 27, 2024
Jun 16, 2021
Feb 27, 2024
Jan 4, 2024
Feb 27, 2024
Dec 6, 2022
Jun 16, 2021
Jun 9, 2021
Jun 23, 2021
Feb 19, 2024
Feb 19, 2024
Jun 3, 2022
Sep 14, 2023
Sep 14, 2023
Feb 27, 2024
Feb 27, 2024

Repository files navigation

bso-ui

Discord Follow license GitHub release (latest SemVer) Build

Application web du Baromètre de la Science Ouverte accessible ici :

Requirements

  • node >= 18
  • npm > 7

Boilerplate

This project was bootstrapped with Create React App.

The version number follows semver.

To create a new release, use npm version patch|minor|major.

Scripts disponibles

  • npm build
  • npm eject
  • npm prepare
  • npm run deploy --level=[patch|minor|major]
  • npm start
  • npm test
  • npm version [patch|minor|major]

Ajouter une nouvelle icône BSSO

  • Ajouter le fichier icon-bsso-[x].svg dans src/components/Icon/svg en respectant ce format de nommage
  • Ajouter à la balise <svg> du fichier la class icon-bsso-[x]
  • Ajouter une balise <title> pour l'accessibilité
  • Ajouter aux balises <path> les classes correspondantes class="color-1" class="color-2"
  • Mettre à jour la variable $icon-bsso-max dans src/style/variables.scss

Utilisation

 <Icon
    name='icon-bsso-[x]'
    color1='blue-soft-125'
    color2='gold'
  />

Utiliser le glossaire

1. Ajouter les clefs nécessaires dans les fichiers de langues src/translations/fr.json et src/translations/en.json

La balise <glossary0>app.word</glossary0> correspond au mot cliquable du texte dans la page

{
  "app.entry": "Entry in glossary",
  "app.definition": "My definition <cta>my-link</cta>",
  "app.word": "word to click",
  "app.text": "Lorem <glossary0>app.word-1</glossary0> ip <cta>my-link</cta> sum <glossary1>app.word-2</glossary1>."
}

2. Ajouter l'entrée voulue dans glossary.json avec les clefs de langues correspondantes

La clef intlEntry correspond au titre dans le volet Glossaire

La clef cta est optionnelle

{
    "entry": {
      "intlEntry": "app.entry",
      "intlDefinition": "app.definition",
      "cta": "https://www.this-is-my-link.com"
    }
}

3. Ajouter le composant Glossary dans la page

import GlossaryEntries from 'glossary.json';

<Glossary entries={GlossaryEntries} />

4. Ajouter dans la page le composant GlossaryFormattedMessage à l'emplacement souhaité

La props intlKey correspond au texte dans lequel se trouve le mot clickable

La props glossaryKeys correspond aux clefs dans glossary.json (dans l'ordre dans lequel elles apparaissent dans le texte)

La props link est optionnelle

<GlossaryFormattedMessage
  intlKey='app.text'
  ctas={['https://www.link.fr']}
  glossaryKeys={['entry1', 'entry2']}
/>

Deployment

To deploy in production, simply run this command from your staging branch :

npm run deploy --level=[patch|minor|major]

⚠️ Obviously, only members of the dataesr organization have rights to push on the repo.