Improve BEM handling

[magicznyleszek]

Description

We should update our makeBem function (from js/bem.ts`) to something like this:

makeBem('KoboRange', 'div');
makeBem('KoboRange__number', 'span');

Additional flexibility

We could also allow for passing an array to makeBem:

makeBem([
  ['KoboRange', 'div'],
  ['KoboRange__number', 'span'],
]);

Reasoning

This ensures that all places use the same string (easier to search):

// bem component definition
makeBem('KoboRange', 'div');
makeBem('KoboRange__number', 'span');

// bem component TSX usage
<bem.KoboRange>
  <bem.KoboRange__number>
    …
  </bem.KoboRange__number>
</bem.KoboRange>

// bem component styles
.KoboRange {}
.KoboRange__number {}

Legacy code

For existing code, where we don't want to update the class names, we could introduce third parameter (legacy class name):

makeBem('KoboRange', 'div', 'kobo-range');
makeBem('KoboRange__number', 'span', 'kobo-range__number');

[magicznyleszek]

NOTE: we might decide that we would prefer to follow styled components idea, if so then we don't need this :)