Description: The Banner component provides a prominent notification or message to users, typically at the top or bottom of a page. It is used to communicate important information, such as alerts, warnings, or promotions.

Requirements:

1. Component Implementation:

• Implement the Banner component in TypeScript.
• Utilize SCSS with BEM methodology for styling.
• Integrate design tokens from @geneui/tokens for consistent colors, font sizes, spacing, and icons.
• Support different types (e.g., informational, warning, error) and actions (e.g., dismissible, clickable).

2. Unit Tests:

• Write unit tests using Jest and React Testing Library.
• Ensure test coverage for all props, including rendering of different banner types and actions.
• Test for edge cases such as missing content or unsupported type values.

3. Storybook Stories:

• Create a Storybook story for the Banner component.
• Showcase different banner types (e.g., informational, warning, error) and states (e.g., dismissible, clickable).
• Create controls for the props so users can interact with the Banner component in Storybook.
• Document all props of the public interfaces.

4. Figma Design:

Follow the design outlined in the provided Figma link.

Checklist:

• Component is implemented in TypeScript.
• Styling follows SCSS using BEM methodology.
• Design tokens from @geneui/tokens are used for colors, font sizes, spacing, and icons.
• Unit tests written and cover different states and edge cases.
• Storybook stories created with examples of all props and banner types.
• Figma design matches the component implementation.