Add Badge component

[tomivirkki]

Description

Using badge is currently awkward since you need to add the theme attribute to arbitrary components with the following hack:

<span {...{ theme: 'badge success' }}>Confirmed</span>

The hack, in this case, is required because "theme" is not a recognized property of a <span>.

Provide a <Badge> wrapper in the component set, which applies the required "theme" attribute internally.

Usage example

<Badge>
  <span>Pending</span>
</Badge>

<Badge theme="success">
  <Icon
    aria-label="Confirmed"
    icon="vaadin:check"
    style={{ padding: 'var(--lumo-space-xs)' }}
    title="Confirmed"
  />
</Badge>

Prototype of the <Badge> wrapper:

function Badge({ children, theme }: { children: React.ReactNode; theme?: string }) {
  return React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { ...{ theme: `badge${theme ? ` ${theme}` : ''}` } });
    }
    return child;
  });
}