[OUDS] [TRACKING] Backlog to be functionally equivalent to Boosted

[julien-deramond]

Description

This tracking issue can be seen as a backlog of things to develop so that OUDS Web is functionally equivalent to Boosted in terms of features, documentation, packaging, and many other things.
Most of these elements have been removed temporarily when creating the branch for OUDS Web; they existed before in Boosted or Bootstrap, and will probably need to be reintegrated at some point. At least, if they don't, we must decide explicitly that they shouldn't be integrated.

Ready to dev

• Make Algolia and search work
  • Might be an issue caused by site/assets/js/search.js with the liveUrl targeting web.unified-design-system.orange.com?
• Determine what we do with Meteor define in package.js. Do we keep it? Do we need this package.js file?
• Take into account this comment: [OUDS] Fix(docs): broken links to /blob/vx.y.z-ouds-web files #2647 (review)

Storybook

Warning

Blocked by web.unified-design-system.orange.com not being properly set-up

• Error while rendering https://orange-opensource.github.io/Orange-Boosted-Bootstrap/ouds-web/storybook. Due to .storybook/preview-head.html configured to use https://web.unified-design-system.orange.com/docs/0.0/assets/css/docs.css. Should be fixed automatically.
• Reintegrate ods.web parameter in hugo.yml with the new value

Documentation

Note

As soon as boosted-sprite.svg must be reintegrated, mention it in the NOTICE.txt

• Redirection of pages to double-check. (:warning: Blocked by web.unified-design-system.orange.com not being properly set-up)
• Add a page that explains how we are compatible with Bootstrap (maybe the README too). What version is compatible with what Bootstrap version. That the framework is compatible with Bootstrap. etc.
• Homepage
  • (On hold: Question asked to the project, waiting for an answer) Introduce a new OUDS logo replacing Boosted homemade logo?

    Orange-Boosted-Bootstrap/site/assets/scss/_boosted.scss

    Lines 20 to 42 in 980869e

    	#boosted {
    	width: 25em;
    	height: 25em;
    	font-size: 36%; // 1
    	box-shadow: -2em 2em $gray-600, -4em 4em $gray-300;
    	transform: rotateX(50deg) rotateY(0deg) rotateZ(-45deg) scale(.7);
    	@include media-breakpoint-up(sm) {
    	font-size: xx-small;
    	}
    	@include media-breakpoint-up(md) {
    	font-size: x-small;
    	}
    	@include media-breakpoint-up(lg) {
    	font-size: small;
    	}
    	@include media-breakpoint-up(xl) {
    	font-size: medium;
    	}
    	}

  • Jumbotron (compare Boosted / Bootstrap)
  • Get started any way you want (compare Boosted / Bootstrap)
  • Read our getting started guides (compare Boosted / Bootstrap)
  • Customize everything with Sass (compare Boosted / Bootstrap)
  • Build and extend in real-time with CSS variables (compare Boosted / Bootstrap)
  • Components, meet the Utility API (compare Boosted / Bootstrap)
  • Powerful JavaScript plugins without jQuery (compare Boosted / Bootstrap)
  • Orange Design System for web section
    • Reintegrate site/layouts/partials/icons/download.svg and site/static/docs/**/assets/img/boosted-guideline* images and mention them in the NOTICE.txt file.
• Solaris icons link in the header
• Accessibility statement (see docs: add accessibility statement #2665)
• How to render "Bootstrap compatibility" areas? See https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2687/files#r1760593662

About

• About > Brand (Boosted / Bootstrap)
  • Do we reintegrate the OBS logos? If so, reintegrate site/static/docs/**/assets/brand/OBS-* and mention them in the NOTICE.txt file.
  • site/static/docs/**/assets/brand/orange-logo-formatted.svg must be reintegrated and mentioned in the NOTICE.txt file
• About > Overview: (Boosted / Bootstrap)

Content

• Content > Figures: (Boosted / Bootstrap)
• Content > Images: (Boosted / Bootstrap)
• Content > Reboot: (Boosted / Bootstrap)
  • Replace opacity-* by sementic name in horizontal rules
• Content > Tables: (Boosted / Bootstrap)
• Content > Typography: (Boosted / Bootstrap)

Customize

• Customize > Color modes: (Boosted / Bootstrap)
• Customize > Color palette: (Boosted)
• Customize > Color theme: (Boosted)
• Customize > Color ???: (Bootstrap)
• Customize > Components: (Boosted / Bootstrap)
• Customize > CSS variables: (Boosted / Bootstrap)
• Customize > Optimize: (Boosted / Bootstrap)
• Customize > Options: (Boosted / Bootstrap)
• Customize > Overview: (Boosted / Bootstrap)
• Customize > Sass: (Boosted / Bootstrap)

Dark mode

• Dark mode: (Boosted)

Extend

• Extend > Approach: (Boosted / Bootstrap)
  • [OUDS] docs: add 'Extend > Approach' page #2650
  • Handle comment whenever .d-none and .d.md-none classes, and responsive concepts are there
  • Handle comment whenever buttons are developed
  • Handle comment whenever z-index is developed
  • Handle comment whenever /getting-started/javascript#data-attributes is there
  • Handle comment whenever utilities such as .d-block are there
• Extend > Icons: (Boosted / Bootstrap)
  • If site/static/docs/**/assets/img/boosted-warning.svg needs to be reintegrated, mention it in the NOTICE.txt file
  • icons* properties from hugo.yml were used in this page. If not anymore, drop them from hugo.yml.

Getting Started

• Getting Started > Accessibility: (Boosted / Bootstrap)
  • [OUDS] Docs: Add 'Getting started > Accessibility' page #2675
  • Uncomment whenever modal, dialog, dropdown, tooltips are available in "Interactive components"
  • Uncomment "Color contrast" section whenever colors are defined and implemented
  • Uncomment code in "Visually hidden content" whenever .text-* are implemented
  • Uncomment in "Reduced motion" when modal, carousels, and spinners are implemented
  • Uncomment in "Focus visibility" when carousel is implemented
  • Uncomment "Under a fixed header" when sticky or fixed headers are implemented
  • Uncomment in "Maximul line length" when /utilities/text is implemented
• Getting Started > Best practices: (Boosted / Bootstrap).
  • [OUDS] docs: remove 'Getting started > Best practices' page #2657
• Getting Started > Browsers devices: (Boosted / Bootstrap)
  • [OUDS] Docs: Add 'Getting started > Browsers & devices' page #2684
  • Uncomment elements whenever modals are developed
  • Uncomment elements whenever dropdowns are developed
• Getting Started > Contents: (Boosted / Bootstrap)
  • Docs: Add 'Getting started > Contents' page #2685
  • Uncomment elements whenever layout grid page is developed (/layout/grid)
  • Uncomment elements whenever content reboot is developed (/content/reboot)
• Getting Started > Contribute: (Boosted / Bootstrap)
  • [OUDS] Add 'Getting Started > Contribute' page and fix some /blob/vx.y.z-ouds-web broken links #2646
• Getting Started > Download: (Boosted / Bootstrap)
• Getting Started > Introduction: (Boosted / Bootstrap)
  • [OUDS] docs: add 'Getting started > Introduction' page #2658
  • Uncomment and update the "About Orange Brand" section
  • Uncomment when /getting-started/contents is available
  • Uncomment when the first components are available
  • Uncomment when /getting-started/download#package-managers is available
  • Uncomment when /getting-started/javascript#using-boosted-as-a-module is available
  • Uncomment when /content/reboot is available
• Getting Started > JavaScript: (Boosted / Bootstrap)
  • [OUDS] Docs: add 'Getting Started > JavaScript' page #2648
• Getting Started > Parcel: (Boosted / Bootstrap)
• Getting Started > RFS: (Boosted / Bootstrap)
• Getting Started > RTL: (Boosted / Bootstrap)
• Getting Started > Vite: (Boosted / Bootstrap)
• Getting Started > Webpack: (Boosted / Bootstrap)
  • [OUDS] docs: add 'Getting Started > Webpack' page #2652

Orange Design System for web

• Orange Design System for web
  • Add the link to the header
  • Reintegrate or remove site/data/design-guidelines.yml
  • Possibly reintegrate site/static/docs/**/assets/img/platforms/* images, and mention them in the NOTICE.txt

Helpers

• Helpers > Clearfix: (Boosted / Bootstrap)
  • [OUDS] Docs: add 'Helpers > Clearfix' page #2673
  • Uncomment example when button component is available
• Helpers > Color background: (Boosted / Bootstrap)
• Helpers > Colored links: (Boosted / Bootstrap)
• Helpers > Focus ring: (Boosted / Bootstrap)
• Helpers > Icon link: (Boosted / Bootstrap)
• Helpers > Position: (Boosted / Bootstrap)
• Helpers > Ratio: (Boosted / Bootstrap)
  • [OUDS] Docs: add 'Helpers > Ratio' page #2717
  • Uncomment elements whenever /content/reboot is added
• Helpers > Stacks: (Boosted / Bootstrap)
  • [OUDS] Docs(helpers): add 'Stacks' page #2681
  • Uncomment elements whenever /helpers/vertical-rule is added
  • Uncomment elements whenever buttons are developed
  • Uncomment elements whenever inputs are developed
• Helpers > Stretched link: (Boosted / Bootstrap)
  • [OUDS] Docs: add 'Helpers > Stretched link' page #2719
  • Uncomment elements whenever /components/card is added
  • Uncomment elements whenever /components/buttons is added
  • Uncomment elements whenever /layout/grid is added
  • Uncomment elements whenever /utilities/spacings is added
• Helpers > Text truncation: (Boosted / Bootstrap)
  • [OUDS] Docs: add 'Helpers > Text truncation' page #2670
• Helpers > Vertical rule: (Boosted / Bootstrap)
• Helpers > Visually hidden: (Boosted / Bootstrap)
  • [OUDS] Docs: add 'Helpers > Visually Hidden' page #2674

Layout

• Layout > Breakpoints: (Boosted / Bootstrap)
• Layout > Columns: (Boosted / Bootstrap)
• Layout > Containers: (Boosted / Bootstrap)
• Layout > CSS Grid: (Boosted / Bootstrap)
  • [OUDS] Docs: add 'Layout > Css grid' page #2679
  • Uncomment responsive part when responsive documentation is ready
  • Uncomment --bs-gap fallback value when value is set accordingly to token value
• Layout > Grid: (Boosted / Bootstrap)
• Layout > Gutters: (Boosted / Bootstrap)
• Layout > Utilities: (Boosted / Bootstrap)
  • Uncomment "Margin and padding" when Dimension will be developed
• Layout > Z-index: (Boosted / Bootstrap)
  • [OUDS] feat: Add "Elevation" tokens, utilities and documentation - new version #2741
  • Uncomment when we'll have some more components (navigation, tooltips, popovers, etc.). The sentence mention a lot of them

Utilities

• Utilities > API: (Boosted / Bootstrap)
  • [OUDS] docs: add 'Utilities > API' page #2656
  • "Responsive" section (+ responsive link in the table) when .opacity- utilities will be implemented
  • rfs link in the table when /getting-started/rfs page will be up
  • Link to update when /utilities/text#text-decoration will be up
  • Link to update when /utilities/opacity will be up
  • Link to update when /utilities/position will be up
  • "CSS variable utilities" to uncomment when .text-opacity will be explained
  • "Local CSS variables" to uncomment when .bg-* utilities will be explained
  • "Add utilities" to uncomment
  • "Modify utilities" to uncomment when width utilities will be explained
  • "Enable responsive" to uncomment when border utilities will be explained and breakpoints reintroduced
  • "Add utilities" to uncomment when pointer utilities will be explained and the file architecture is defined
  • "Rename utilities" to uncomment when margin utilities will be explained and the file architecture is defined
  • "Remove utilities" to uncomment when width utilities will be explained and the file architecture is defined
  • "Add, remove, modify" to uncomment when width utilities will be explained and the file architecture is defined
• Utilities > Background: (Boosted / Bootstrap)
• Utilities > Borders: (Boosted / Bootstrap)
  • [OUDS] feat: Add 'Borders' token, utilities and documentation #2687
    • Remaining element to tackle: [OUDS] feat: Add 'Borders' token, utilities and documentation #2687 (comment). Do we keep an @if $enable-bootstrap-compatibility { around the border-radius CSS variables?
  • Border colors
  • Border opacity
  • Dividers
• Utilities > Colors: (Boosted / Bootstrap)
• Utilities > Display: (Boosted / Bootstrap)
  • [OUDS] Docs: add 'Utilities > Display' page #2659
  • Uncomment things when responsive and breakpoints are defined
  • Uncomment things when .text-bg-* utilities will be present
• Utilities > Flex: (Boosted / Bootstrap)
  • [OUDS] Docs(utilities): add 'Flex' page #2660
  • Uncomment elements when responsive will be explained in the documentation
  • Asked to the designers, and waiting for an answer: change the colored containers?
• Utilities > Float: (Boosted / Bootstrap)
• Utilities > Interactions: (Boosted / Bootstrap)
  • [OUDS] Docs: add 'Utilities > Interactions' page #2662
• Utilities > Link: (Boosted / Bootstrap)
• Utilities > Object fit: (Boosted / Bootstrap)
  • [OUDS] Docs: add 'Utilities > Object fit' page #2663
  • Uncomment elements whenever responsive mode (breakpoints and grids) is defined
  • If rounded class has actually a rounded rendering, add them like in Bootstrap
• Utilities > Opacity: (Boosted / Bootstrap)
• Utilities > Overflow: (Boosted / Bootstrap)
  • [OUDS] Docs: add 'Utilities > Overflow' page #2664
• Utilities > Position: (Boosted / Bootstrap)
  • [OUDS] Docs: add 'Utilities > Position' page #2666
  • Uncomment when button component will be developed
  • Uncomment when progress component will be developed
  • Uncomment when border + bg colors utilities will be developed
• Utilities > Shadows: (Boosted / Bootstrap)
  • [OUDS] feat: Add "Elevation" tokens, utilities and documentation - new version #2741
  • Uncomment when we'll have components and/or $enable-shadows
• Utilities > Sizing: (Boosted / Bootstrap)
• Utilities > Spacing: (Boosted / Bootstrap)
  • Change the migration guide content related to Spacing to avoir listing all classes. Maybe thanks to a table listing the equivalent ?
• Utilities > Text: (Boosted / Bootstrap)
• Utilities > Vertical align: (Boosted / Bootstrap)
  • [OUDS] Docs: add 'Utilities > Vertical align' page #2668
• Utilities > Visibility: (Boosted / Bootstrap)
  • [OUDS] docs(utilities): add 'Visibility' page #2651
• Utilities > Z-index: (Boosted / Bootstrap)
  • [OUDS] Docs: add 'Utilities > Z-index' page #2669
  • Uncomment things when the first components will be developed
  • Add .rounded-3 like in Bootstrap if .rounded classes are authorized in OUDS Web

Components

• Components > Accordion: (Boosted / Bootstrap)
• Components > Alerts: (Boosted / Bootstrap)
• Components > Back to top: (Boosted)
• Components > Badge: (Boosted / Bootstrap)
• Components > Breadcrumb: (Boosted / Bootstrap)
• Components > Button group: (Boosted / Bootstrap)
• Components > Buttons: (Boosted / Bootstrap)
• Components > Card: (Boosted / Bootstrap)
  • Reintegrate the corresponding examples
• Components > Carousel: (Boosted / Bootstrap)
• Components > Close button: (Boosted / Bootstrap)
• Components > Collapse: (Boosted / Bootstrap)
• Components > Dropdowns: (Boosted / Bootstrap)
• Components > Footer: (Boosted)
  • Reintegrate the corresponding examples
• Components > List group: (Boosted / Bootstrap)
• Components > Local navigation: (Boosted)
• Components > Modal: (Boosted / Bootstrap)
• Components > Navbar: (Boosted / Bootstrap)
• Components > Nav & tabs: (Boosted / Bootstrap)
• Components > Offcanvas: (Boosted / Bootstrap)
• Components > Orange navbar: (Boosted)
  • Do we reintegrate the OBS logos? If so, reintegrate site/static/docs/**/assets/brand/OBS-* and mention them in the NOTICE.txt file.
  • Possibly reintegrate navbar-contact.png and mention it in the NOTICE.txt file
  • Reintegrate the corresponding examples
• Components > Pagination: (Boosted / Bootstrap)
• Components > Placeholders: (Boosted / Bootstrap)
• Components > Popovers: (Boosted / Bootstrap)
• Components > Progress: (Boosted / Bootstrap)
• Components > Scrollspy: (Boosted / Bootstrap)
• Components > Spinners: (Boosted / Bootstrap)
• Components > Stepped process: (Boosted)
• Components > Sticker: (Boosted)
  • Reintegrate the corresponding examples
• Components > Tags: (Boosted)
  • Reintegrate the corresponding examples
• Components > Title bars: (Boosted)
  • Reintegrate the corresponding examples
  • Possibility reintegrate site/static/docs/**/assets/img/title-bars-illustrations/* images and reintegrate them in the NOTICE.txt file
• Components > Toasts: (Boosted / Bootstrap)
• Components > Tooltips: (Boosted / Bootstrap)

Forms

• Forms > Check Radios: (Boosted / Bootstrap)
• Forms > Floating Labels: ???? (Bootstrap)
• Forms > Form control: (Boosted / Bootstrap)
• Forms > Input group: (Boosted / Bootstrap)
• Forms > Layout: (Boosted / Bootstrap)
• Forms > Overview: (Boosted / Bootstrap)
• Forms > Quantity selector: (Boosted)
• Forms > Range: (Boosted / Bootstrap)
• Forms > Select: (Boosted / Bootstrap)
• Forms > Validation: (Boosted / Bootstrap)

Examples

Note

For all examples, some data are handled in site/data/examples.yml

Caution

As soon as the first example is reintegrated, please remove the "Fake" example from the source code

• Cards (RTL)
• Download app
  • Reintegrate all site/content/docs/**/examples/download-app/img/ images and mention them in the NOTICE.txt file
• Footer
• Form
• Grid (Bootstrap)
• Masonry (Bootstrap)
• Navbar mode selector
• Navbar sticky
• Navbars
  • Do we reintegrate the OBS logos? If so, reintegrate site/static/docs/**/assets/brand/OBS-* and mention them in the NOTICE.txt file.
• Stickers
• Tags
• Title bars

First 0.1 version

• Prepare the versions select to handle minor and major versions
  • See site/data/docs-versions.yml

First version releases ready to be shared

• In gh-pages, double-check the robots.txt file to maybe remove this rule: Disallow: /ouds-web/*
• "Deprecated in" and "Added in" messages (see [OUDS] Docs: Drop all 'deprecated in' and 'added in' messages #2588) to use
• Verify that all shortcodes are used, otherwise, delete them
• Verify that all partials are used, otherwise, delete them
  • WARN Template _default/_markup/render-image.html is unused, source file /site/layouts/_default/_markup/render-image.html
  • WARN Template partials/callouts/danger-async-methods.md is unused, source file /site/layouts/partials/callouts/danger-async-methods.md
  • WARN Template partials/callouts/info-mediaqueries-breakpoints.md is unused, source file /site/layouts/partials/callouts/info-mediaqueries-breakpoints.md
  • WARN Template partials/callouts/info-npm-starter.md is unused, source file /site/layouts/partials/callouts/info-npm-starter.md
  • WARN Template partials/callouts/info-prefersreducedmotion.md is unused, source file /site/layouts/partials/callouts/info-prefersreducedmotion.md
  • WARN Template partials/callouts/info-sanitizer.md is unused, source file /site/layouts/partials/callouts/info-sanitizer.md
  • WARN Template partials/callouts/warning-color-assistive-technologies.md is unused, source file /site/layouts/partials/callouts/warning-color-assistive-technologies.md
  • WARN Template partials/callouts/warning-data-bs-title-vs-title.md is unused, source file /site/layouts/partials/callouts/warning-data-bs-title-vs-title.md
  • WARN Template partials/callouts/warning-input-support.md is unused, source file /site/layouts/partials/callouts/warning-input-support.md
  • WARN Template partials/guide-footer.md is unused, source file /site/layouts/partials/guide-footer.md
  • WARN Template partials/js-data-attributes.md is unused, source file /site/layouts/partials/js-data-attributes.md
  • WARN Template partials/responsive-img.html is unused, source file /site/layouts/partials/responsive-img.html
  • WARN Template partials/table-content.html is unused, source file /site/layouts/partials/table-content.html
  • WARN Template shortcodes/added-in.html is unused, source file /site/layouts/shortcodes/added-in.html
  • WARN Template shortcodes/bs-table.html is unused, source file /site/layouts/shortcodes/bs-table.html
  • WARN Template shortcodes/callout-deprecated-dark-variants.html is unused, source file /site/layouts/shortcodes/callout-deprecated-dark-variants.html
  • WARN Template shortcodes/deprecated-in.html is unused, source file /site/layouts/shortcodes/deprecated-in.html
  • WARN Template shortcodes/design-callout-alert.html is unused, source file /site/layouts/shortcodes/design-callout-alert.html
  • WARN Template shortcodes/docsref.html is unused, source file /site/layouts/shortcodes/docsref.html
  • WARN Template shortcodes/enable-btn-close-tooltip.html is unused, source file /site/layouts/shortcodes/enable-btn-close-tooltip.html
  • WARN Template shortcodes/js-dismiss.html is unused, source file /site/layouts/shortcodes/js-dismiss.html
  • WARN Template shortcodes/markdown.html is unused, source file /site/layouts/shortcodes/markdown.html
  • WARN Template shortcodes/partial.html is unused, source file /site/layouts/shortcodes/partial.html
  • WARN Template shortcodes/placeholder.html is unused, source file /site/layouts/shortcodes/placeholder.html
  • WARN Template shortcodes/svg-docs.html is unused, source file /site/layouts/shortcodes/svg-docs.html
  • WARN Template shortcodes/table.html is unused, source file /site/layouts/shortcodes/table.html
• Double check the migration guide:
  • All new breakpoints should be mentioned in the new utilities (e.g. in spacing, add the mention of new breakpoints maybe like .m-{xs|sm|md|lg|xl|2xl|3xl}-smash ?)
  • Do we add an Info tag to attract user's attention on $enable-bootstrap-compatibility possibilities like done with object fit utilities?
  • Decide whether we have a breakline between <li>s because the generated code is not totally the same (adding a <p> or not)

After the renaming of the repository

• Composer and Packagist
  • The name property is already correct
  • composer.json will probably need to use the replace property
  • In the README, composer require orange-opensource/orange-boosted-bootstrap:dev-ouds/main could be changed to point to a real tagged version
  • In the README, the "packagist" badge should be reintegrated
• web.unified-design-system.orange.com must target gh-pages root level and boosted.orange.com must target gh-pages/boosted directory