Hyperlink Design Component with Enhanced Features

[jjeroch]

Description: Implement the design element hyperlink component. The new hyperlink component should support the following states and features:

1. Default Stage: The hyperlink should display in its basic form as per our style guidelines (font, color, etc.) when it's in the default state.

2. Leading Visual: The hyperlink should be able to include an optional leading visual (e.g., icon or image) that sits to the left of the text. This should be properly aligned and should scale appropriately with the text.

3. Trailing Visual: Similarly, the hyperlink should support an optional trailing visual (e.g., icon or image) to the right of the text.

4. Underline: There should be an option to display the hyperlink with or without an underline. This should be controlled via a prop that determines whether the underline is visible in the default state and on hover.

5. Small Size: The component should also support a small size variant, which is smaller than the default size but still maintains all visual alignments and legibility.

Acceptance Criteria:

• The hyperlink must have a prop to include a leading visual, which should not disrupt text alignment.
• The hyperlink must have a prop to include a trailing visual, aligned with the text.
• The underline feature should be toggled by a prop and should change on hover state if enabled.
• The component must support a small size variant through a prop without compromising on accessibility or legibility.
• Ensure that the component is keyboard navigable and supports proper ARIA attributes.
• The component should be responsive and work across different screen sizes and resolutions.
• Conduct cross-browser testing to ensure compatibility.
• The new element is available in storybook and well described.

Technical Notes:

• Use the existing color and typography variables defined in the design system for consistency.
• For leading and trailing visuals, ensure they are SVGs or font icons that can be scaled without quality loss.

---

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

## Functional Design Description: Enhanced Hyperlink Component

### Overview
The Enhanced Hyperlink Component is a versatile UI element designed for web applications to navigate users to different resources or pages both internally and externally. This component is an extension of the traditional hyperlink with added visual and functional features such as leading and trailing visuals, optional underlining, and a small size variant.

### Usage

#### Basic Hyperlink
- The basic version of the hyperlink appears with the default styling as defined in the design system, which includes the font, color, and size.
- It can be used to link to internal or external pages, documents, or trigger actions like opening modals.

#### Leading and Trailing Visuals
- Optional visuals/icons can be added to the left (leading) or right (trailing) of the hyperlink text.
- These visuals should provide additional context to the hyperlink or represent the type of action or destination.

#### Underline
- The component can be rendered with or without an underline to denote it as a clickable link.
- Underline behavior can be toggled and is typically shown on hover to highlight interactivity.

#### Small Size Variant
- A smaller version of the hyperlink is available for use in contexts where space is limited or when the design calls for a more subtle hyperlink presence.
- Despite its smaller size, the component must remain legible and accessible.

### Do's
- Use the hyperlink component to navigate to other pages or resources or to trigger actions within the application.
- Utilize leading or trailing visuals when they add context or value to the hyperlink.
- Ensure that the hyperlink text is descriptive and provides a clear understanding of the linked content or action.
- Maintain consistent usage of underlining across the application for clarity and design cohesion.

### Don'ts
- Avoid using non-descriptive text like "click here" or "link" as these do not provide context or meaning.
- Do not clutter the hyperlink with multiple visuals; choose either a leading or trailing visual.
- Refrain from using the small size variant when the hyperlink is a primary call to action or needs to stand out.
- Do not compromise accessibility by disabling focus states or not providing adequate contrast between the hyperlink and its background.

### Implementation Notes
- When using visuals, make sure they are of high quality and do not pixelate on scaling.

[shahmargi12]

Hi @jjeroch

I am interested in contributing to this task. Could you please assign it to me at your earliest convenience so I can begin working on it?

Additionally, could you provide the design specifications for the following:

1. Font sizes for small and medium text
2. Icon design (whether it should be rectangular or round)

It would be helpful if you could provide designs for both variants.

Thank you for considering my request.

[MaximilianHauer]

@shahmargi12 thank you for your support. @oyo will get back to you to provide feedback :)

[shahmargi12]

@shahmargi12 thank you for your support. @oyo will get back to you to provide feedback :)

Ok, thanks for the update.

[oyo]

@shahmargi12 currently we have no designers any more and we have to implement the appearance by ourselves. Styling components in a way they integrate well into the existing UI.

1. for fonts check the storybook: https://eclipse-tractusx.github.io/portal-shared-components/?path=/story/typography--base

Rule of thumb: for normal text use variant body2, larger body1 or smaller body3 if appropriate. headlines use headline 3 for larger and headline 5 for smaller titles (headline 1 or 2 are quite large which we are using in special components like https://github.com/eclipse-tractusx/portal-frontend/blob/main/src/components/shared/frame/SectionHeader/index.tsx). Those are just hints - if as a developer you feel it looks odd, choose the best variant from your PoV.

2. use round corner images

[shahmargi12]

@oyo Thanks for the response! I'll start working on it.