Bootstrap SNCF

Table of contents

• Quick start
• Status
• Documentation
• Cookbooks

Quick start

Several quick start options are available:

• Install with npm: npm install @sncf/bootstrap-sncf.metier or npm install @sncf/bootstrap-sncf.communication
• Install with yarn: yarn add @sncf/bootstrap-sncf.metier or yarn add @sncf/bootstrap-sncf.communication

Read the Getting started page for information on the framework contents, templates and examples, and more.

Status

This is the branch you'll see on documentations sites sn.cf/socledesign
This is developement branch, be careful, it could destroy your computer and burn your mouse.

Documentation

Bootstrap's documentation, included in this repo in the root directory, is built with Hugo and publicly hosted on GitHub Pages at https://design-bootstrap.sncf.fr/ and https://designmetier-bootstrap.sncf.fr/. The docs may also be run locally.

Running documentation locally

1. Run yarn install to install the Node.js dependencies, including Hugo (the site builder).
2. Decide which version you need (intern or extern, cf. SNCF Digital resources)
3. Run watch-docs-extern or watch-docs-intern to watch css & js.
4. Run yarn docs-serve-extern or yarn docs-serve-intern to build the templates.
5. Open http://localhost:9001/ in your browser, and voilà.

Learn more about using Hugo by reading its documentation.

Build icofonts

• yarn icofont-base : build only required icons
• yarn iconfont : build all icons

Cookbooks

How to use with Reactjs

If you want to create a new Reactjs project, you need to:

1. Create a new project:

   npx create-react-app reactjs-sncf

2. Add bootstrap-sncf package:

   yarn add @sncf/bootstrap-sncf.metier

3. Import

   import '@sncf/bootstrap-sncf.metier/dist/bootstrap-sncf.min.css';
   import '@sncf/bootstrap-sncf.metier';

4. Start

   yarn start

Use Bootstrap and SNCF components with Reactjs

See the Bootstrap JavaScript section, import what you need:

1. Import

   import 'bootstrap/js/dist/dropdown';
   import SelectExclusive from './dist/js/components/selectRadios'

2. Init

   useEffect(() => {
       const dataSelectRadios = 'select-radios';
       const components = document.querySelectorAll(dataComponent);
      
       components.forEach((component) => {
           if (component.dataset.component === dataSelectRadios) {
               new SelectRadios(component)
           }
       });
   }, []);

3. Use template

   return (
       <div className="form-group">
           <div className="input-group">
               <div className="input-group-prepend">
               <div className="btn-group dropdown" data-component="select-radios">
                   <button type="button" className="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="actionsgroup">
                   <span data-role="placeholder">Tous ces mots</span>
                   <i className="icons-arrow-down" aria-hidden="true"></i>
                   </button>
                   <div className="dropdown-menu dropdown-menu-right" id="actionsgroup">
                   <input data-role="value" type="radio" name="keywordSearch" value="keywordSearch1" id="action1" className="sr-only" />
                   <label className="dropdown-item" htmlFor="action1">Action</label>
                   <hr className="dropdown-divider"/>
                   <input data-role="value" type="radio" name="keywordSearch" value="keywordSearch2" id="action2" className="sr-only" />
                   <label className="dropdown-item" htmlFor="action2">Another action</label>
                   <input data-role="value" type="radio" name="keywordSearch" value="keywordSearch3" id="action3" className="sr-only" />
                   <label className="dropdown-item" htmlFor="action3">Something else here</label>
                   </div>
               </div>
               </div>
               <div className="form-control-container">
               <input id="entertext" type="text" className="form-control" title="Enter text" placeholder="Enter text" />
               <span className="form-control-state"></span>
               </div>
           </div>
       </div>
   );