New examples

[ffoodd]

An issue to list examples requested by projects or directly by Orange brand.

To-do list

Kind of table of contents, details below the list.

• Maps - see New examples: Standard VS Variable font // Leaflet #640
• Footers - see feat(footerExample): Adding a footer example #922
• Title Bar - see Title bars #956
• Global Headers
• Collapsible table rows
• Table row selection
• Sticky table row / header
• Condensed UI
• Mail
• a11y guidelines
• v4 custom examples?
• Jumbotron
• Features
• Sidebars / sidenav
• Dropdowns
• List group
• Modals
• Starter template
• Navbars (Go with headers ?)
• RTL section

Collapsible table rows

It requires a few tricks to handle this—however I already have a CodePen example, but please notice that the table structure might change depending on the relationship between collapsible rows and their trigger.

For example if the trigger lives as a global colgroup header, it should be implemented this way.

a11y guidelines (#243)

Orange recommendations website uses static templates based on Boosted to ease contributions and reuse. I think it should be included in Boosted examples too, and maintained from here.

Condensed UI (#431)

In complex applications, handling large tables and datasets, a more condensed UI would be appreciated (and has been requested).

I think we should at least try to implement a new example using small variants for components, and reducing spacings as much as possible.

Table row selection

Since this feature is not reeally a feature right now (nothing happens beside changing the row's background) this should be implemented as an example—and not documented in the Content / Tables page.

Sticky row / column

Pretty easy to do with CSS, I already made a CodePen
Could be made as a Bootstrap table variant, see Bootstrap #31458.

Footers

Should not be a component, but definetly needs to be documented as examples (and in the Disgn Guidelines, obviously).

Title Bar (#889)

As designed in the Web UI Kit, Title bar should be documented and shown in some examples.

Global Headers (#525)

Following v4 Essentials page for Global Headers, they should be documented in the Design Guidelines and shown in some examples.

Maps

Using Leaflet:

• as done in ocom-leaflet-static (currently in OAB's Gitlab)
• with some IOT-Map-Component examples;
• thinking about maps accessibility (read Benjy Stanton's post "A plan for accessible maps")

Mail (?)

Email templates aren't that easy, and probably quite used at Orange. Could be valuable to make some, but that's a whole new trade.

Blog content with & without Helvetica Now

To try variable font in the wild.

v4 examples to bring back?

Are they needed? Could they be improved?

Jumbotron

Equivalent of Jumbotron example in Boosted v4. Using utilities like in Bootstrap v5 ?

Sidebars

Actual sidebars example looks nearly branded, but it needs some deletions and some work to follow design guidelines.

Dropdowns

Maybe keep the actual template with few more examples, but dropdowns need to be reworked to follow the brand or this ?

List group

See with design if we keep them or not.

Modals

Need to be reworked to be branded.

Starter template

Do we keep it as is or maybe as bootstrap with a starter project, or do we keep the same example as Boosted v4 ?

Navbars

Need a rework on some examples presented in the actual example. Should go with Headers ?

RTL

Need to fulfill some of the examples below in rtl direction, see the Bootstrap RTL examples.