Migrate to @oacore/design

[viktor-yakubiv]

This is a big task. I create a single issue to discuss the roadmap.

My idea is to start from the top level in this, i.e. migrate the typography then go component by component or page by page. I still prefer to go page by page because it will be easier to review and debug if there are any problems despite it is overhead from the bundle size view.

Currently, I see the only subtask for the start:

1. Replace Bootstrap reboot with sanitize.css and @oacore/design's foundation

We have 9 types of pages if I do not miss anything, sorted from the easiest to the hardest in updating:

• Markdown – pure text page
• Data (this may be redesigned in the future)
• Service (individual)
• Services (list)
• FAQs
• Data providers
• About
• Endorsements
• Homepage

These pages use 3 sections from components/sections and all the components from the components:

• accordion
• blockquote
• blog
• bootstrap
• button-toolbar
• citation-tabs
• citations-modal
• collapsed (dependency of accordion)
• contact-form
• content
• cookies
• error
• features
• footer
• header
• hero
• highlight-section
• icons
• images
• key-feature
• layout
• link
• logo
• logos-carousel
• maps
• markdown
• nav-dropdown
• outreach-materials
• page
• pagination
• reference
• repositories-browser
• repositories-map
• repositories-search
• search
• search-navbar
• sections
• service-group-card
• service-groups
• skip-to-content
• switcher
• team-member
• testimonial
• testimonials-carousel
• video

Some of them are simple, some are complex but all of them highly depend on Reactstrap.

I see removing Bootstrap and Bootstrap utils, such as mx-auto used everywhere the most complex tasks going in the end:

• Bootstrap utils
• Bootstrap

Also, our design library is not properly designed for the landing pages, we are missing generic layout components for this. I propose to develop it here and then move when it's stable. Anyway, it's a big challenge we should take.

@Joozty what do you think about?

[Joozty]

Sounds like a plan. I took a different approach in the reader. I found it easier to replace all reactstrap components first and then removing bootstrap. You know this project better so if you think it's better to go page by page I am up for it. :)