Feature: Add Support for position, avatar, and opacity Props in VLibras Widget

[lucasferreiralimax]

Currently, the VLibras widget integration within the component supports basic initialization, but there is no support for customizing the widget's position, avatar, and opacity settings. These features are necessary to allow better control over the widget’s appearance and behavior.

Proposal:

Add the following props to the component:

• position: Specifies the location of the widget on the screen. It should support the following values:
  • 'left', 'right', 'bottom', 'top', 'bottom-left', 'top-left', 'bottom-right', 'top-right'
  • Default: 'right'
• avatar: Determines which avatar will be displayed in the widget. Supported values:
  • 'icaro', 'hosana', 'guga', 'random'
  • Default: 'random'
• opacity: Sets the opacity of the widget, allowing values from 0 to 1.
  • Default: 1.0

These props would be mapped to the VLibras widget's internal API as follows:

new window.VLibras.Widget({
  url: props.urlWidget,
  position: mapPosition[props.position],
  avatar: props.avatar,
  opacity: props.opacity,
});

Benefits:

• Flexibility: Users will have more control over where the widget is displayed and its appearance.
• Customization: By allowing the selection of avatar and opacity, users can tailor the widget to fit their specific UI needs.

Tasks:

1. Add position, avatar, and opacity props with default values and validators.
2. Map the props to the correct internal VLibras widget options.
3. Update the widget initialization to reflect the new customizations.
4. Document the new props in the component’s README.