Implement New Toggle Switch Design Component

[jjeroch]

Description: We need to implement a new toggle switch component that adheres to our design system. The component should have three main states:

1. Active State - Represents the "on" state of the toggle.
2. Inactive State - Represents the "off" state of the toggle.
3. Hover State - Visual feedback when a user hovers over the toggle.

The hover state should be configurable to be either active or inactive depending on the needs of the application. Additionally, when the hover state is active and a user hovers over the toggle, a tooltip should appear. The content of the tooltip will be dynamically fetched from the locales (translation) files to support internationalization.

Acceptance Criteria:

• The toggle switch must have distinct visual representations for both active and inactive states.
• Hover effects must be implemented and should be able to be enabled or disabled via a prop.
• When hover is enabled and active, a tooltip should appear with content sourced from the appropriate locales file.
• The component should be keyboard accessible, allowing toggling via the spacebar or enter key.
• The component should be tested across all supported browsers.
• The component's state should be controllable via props for use in controlled component scenarios.
• Ensure that the component is accessible and meets WCAG 2.1 AA standards.
• The implementation should be responsive and work well on both desktop and mobile devices.
• The new element is available in storybook and well described

Functional Design Component Description (to be loaded into storybook):

## Functional Design Description: Toggle Switch Component

### Overview
The toggle switch component is a user interface element that allows users to switch between two states: on (active) and off (inactive). This component is commonly used for settings that can be enabled or disabled. The design is intuitive, requiring a simple click or tap to toggle the state.

### Usage
The toggle switch should be used when a user needs to perform an action that will turn a feature or setting on or off. It is not intended for actions that require submission or more complicated inputs.

#### Do's:
- Use the toggle switch for binary actions where a clear on/off or yes/no decision is needed.
- Ensure that the toggle's state is saved immediately or upon a form submission, as appropriate for the context.
- Provide visual feedback for all states: active, inactive, and hover (if enabled).
- Use the tooltip to provide additional information or clarification as necessary.
- Fetch tooltip content from locales files to ensure proper internationalization.

#### Don'ts:
- Do not use the toggle switch for actions that require more than a binary choice.
- Avoid using the toggle for critical features that require a confirmation step before activation.
- Do not clutter the interface with tooltips if they do not add value or necessary information.
- Do not use the toggle switch where a checkbox would be more appropriate, such as in a list of multiple options.

### States
1. **Active State (On):** The switch shows a visual indication that the feature is enabled. The active state should be distinct and easily identifiable.
2. **Inactive State (Off):** The switch shows that the feature is disabled. This state should be clearly different from the active state.
3. **Hover State:** When enabled, hovering over the toggle switch with a mouse or focusing with a keyboard will display a tooltip. This state is optional and can be enabled or disabled based on application needs.

### Tooltip
When hover is enabled, the tooltip appears providing additional context or information. The content of the tooltip is fetched dynamically from the locales files, supporting multiple languages and ensuring the component is ready for internationalization.

### Implementation Notes
- The component's state can be managed either through internal state or passed as props from a parent component.

Design Specs:

• Refer to the design mockups attached to this ticket.
• Use the color palette and typography defined in the design system.

[MaximilianHauer]

size should be 60x30 for the first draft

[Cofinity-UX]

@jjeroch great idea to add this component to the library! Could we use the MUI toggle switch component as a reference? It covers all the best practice sizes, states and behaviours. The ON/OFF text would not be needed because it's a common interaction with the switch logic.

For the tooltip on hover: this should be included as an optional variation for the component, since it will be used in very special cases where detailed info is needed. It should not replace the base hover inteaction, that highlights the accessible component. A tooltip delay of 300-500 milliseconds would ensure that it's not conflicting in the interaction.

Gladly check out the MUI component, it would be great to add hover and focused state, size options and tooltip as optional component setting to the AC. Cofinity-UX is happy to provide support along the development process!

[MaximilianHauer]

@kunalgaurav-bmw

• please remove the text