orbit-html-react v0.3.1

Proof of Concept orbit MultiBrand

setting up orbit as a multibrand/multitheme using react as a js-template engine in combination with separate js and scss/css files. two components have been re-created this way in this demo:

• button
• accordion

storybook

this project uses storybook as a presentational layer, there is no internal app. run:

npm run storybook

where does the css come from?

in the orbit-repository hosted at randstad I've created a branch with a setup that generates a monster, randstad and tempoteam stylesheet. all have their own variables and mixin files; all the others scss files are shared.

parent selector class?

to switch between the brands in storybook, I needed a parent class selector. Therefore I added an option in the gulp build script (in the randstad orbit-repo) to add a parentclass to the css, using post-css. This process adds a monster-style, randstad-style and tempoteam-style parent class.

loading an external js file

to load the js in the component I used a 'useEffect' hook, but I'm not sure if this approach is the best:

     useEffect(() => {
     const script = document.createElement("script");
     script.src = scriptSrc;
     script.async = true;
     document.body.appendChild(script);
 }, []);

a better approach could be to just add the script tag to the main index.js of the end-users application. What's best could best be figured out during implementation by the user.

demo: how-to-use the npm package

in your react project, run:

npm i -D orbit-html-react

this will install the two components Accordion and Button in your project. You will have to add the css and js manually. if you use creat-react-app:

• in index.js: import orbit-html-react/dist/css/human-forward-randstad.css OR orbit-html-react/dist/css/human-forward-monster.css
• copy orbit-html-react/dist/css/human-forward.js into /public
• change app.js into:

    import React from 'react';
    import Button from 'orbit-html-react/dist/Button';
    import Accordion from 'orbit-html-react/dist/Accordion'

    function App() {
 
     function handleClick(e) {
         e.preventDefault();
         console.log('clicked');
     }
 
     return (
         <>
             <div className="block">
                 <div className="block__wrapper wrapper">
                     <Button className={'button'} text={'hello button'} onClick={handleClick}/>
                 </div>
             </div>
             <div className="block">
                 <div className="block__wrapper wrapper">
                     <div className="block__header">
                         <h2 className="block__title">
                             about us
                         </h2>
                     </div>
                     <div className="block__content">
                         <ul className="link-list link-list--single accordion">
                             <Accordion
                                 title="I wish to change my profile"
                                 bodyContent="<p>You can change your details easily. To change your profile:</p>
                                                 <ul>
                                                     <li>Log in on your my randstad profile</li>
                                                     <li>Click on the icon to the right of either 'my details' or 'my profile';</li>
                                                     <li>Change your profile (use the menu on the left to navigate between the different types of information)</li>
                                                 </ul>
                                                 <p> If you cannot change certain details, please <a href='#'>contact</a> your Randstad branch.</p>"
                             />
                             <Accordion
                                 title="I need to do stuff"
                                 bodyContent="<p>You can change your details easily.</p>"
                             />
                             <Accordion
                                 title="I wish to know more"
                                 bodyContent="<p>follow the white rabbit</p>"
                                 scriptSrc="/human-forward.js"
                             />
                         </ul>
                     </div>
                 </div>
             </div>
         </>
     );
    }
    export default App;

This project was bootstrapped with Create React App.