Top Tag Login Component

The TopTagLogin component is a React component designed to display a top tag with login-related information. It can be used to create a visual element that invites users to perform a login action.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

To use the TopTagLogin component in your React application, follow these steps:

npm install @bolttech/frontend-foundations @bolttech/atoms-top-taglogin

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-top-taglogin

Once you have the required dependencies installed, you can start using the TopTagLogin component in your React application.

Usage

The TopTagLogin component provides a visually appealing way to display login-related information with a call-to-action button. This can be used to encourage users to perform a login action.

To use the component, import it and include it in your JSX:

import React from 'react';
import {TopTagLogin} from '@bolttech/atoms-top-taglogin';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations"; // You can import your TopTagLogin component here

function App() {
  const handleLogin = () => {
    // Handle login action here
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <TopTagLogin
        title="Log in to your account"
        ctaLabel="Log in"
        onClick={handleLogin}
        icon="login"
        dataTestId="login-section"
      />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The TopTagLogin component accepts the following props:

| Prop | Type | Description | |---------------|------------------|--------------------------------------------------------| | dataTestId | string | The data-testid attribute for testing purposes. | | title | string | The title or label displayed in the top tag. | | ctaLabel | string | The label of the call-to-action button. | | onClick | () => void | The callback function to handle the button click event.| | icon | string | The icon to be displayed in the top tag. |

Example

Here's an example of using the TopTagLogin component:

<TopTagLogin
  title="Log in to your account"
  ctaLabel="Log in"
  onClick={handleLogin}
  icon="login"
  dataTestId="login-section"
/>

This will render a top tag with the title "Log in to your account", a "Log in" call-to-action button, and a login icon.

Contributing

Contributions to the TopTagLogin component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.