FooterCtas Component

A React component to display a footer section with call-to-action buttons.

Installation

Use the package manager npm or yarn to install the component.

npm install @bolttech/frontend-foundations @bolttech/atoms-footer

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-footer

Props

The FooterCtas component accepts the following properties:

| Prop | Type | Description | |-----------------|------------|----------------------------------------------------------------------| | copyRightInfo | string | The copyright information for the footer. | | imgLogo | string or element | An image URL or an element to be displayed as the footer logo. | | labelLogo | string | The label text for the footer logo. | | labelLinks | array | An array of objects containing label and link properties. | | dataTestId | string | The data-testid attribute for testing. |

Usage

import React from 'react';
import {FooterCtas} from '@bolttech/atoms-footer';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

const ExampleComponent = () => {
  const labelLinks = [
    {label: 'Home', link: '/'},
    {label: 'About', link: '/about'},
    {label: 'Contact', link: '/contact'},
  ];

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <FooterCtas
        copyRightInfo="© 2023 Your Company. All Rights Reserved."
        imgLogo="https://example.com/logo.png"
        labelLogo="Your Company"
        labelLinks={labelLinks}
        dataTestId="custom-footer"
      />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;

FooterStack Component

A React component to display a stacked footer section with informational content.

Installation

Use the package manager npm or yarn to install the component.

npm install @bolttech/frontend-foundations @bolttech/atoms-footer

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-footer

Props

The FooterStack component accepts the following properties:

| Prop | Type | Description | |-----------------------|------------|------------------------------------------------------------------| | copyRightInfo | string | The copyright information for the footer. | | imgLogo | string or element | An image URL or an element to be displayed as the footer logo. | | labelLogo | string | The label text for the footer logo. | | oicInfo | object | An object containing label and value properties. | | dbdInfo | object | An object containing label and value properties. | | securityCompliances | object | An object containing label and imgLogo properties. | | dataTestId | string | The data-testid attribute for testing. |

Usage

import React from 'react';
import {FooterStack} from '@bolttech/atoms-footer';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

const ExampleComponent = () => {
  const oicInfo = {
    label: 'OIC Info',
    value: 'Some value related to OIC',
  };

  const dbdInfo = {
    label: 'DBD Info',
    value: 'Some value related to DBD',
  };

  const securityCompliances = {
    label: 'Security Compliances',
    imgLogo: 'https://example.com/security-logo.png',
    imgLogo2: 'https://example.com/security-logo2.png',
    imgLogo3: 'https://example.com/security-logo3.png',
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <FooterStack
        copyRightInfo="© 2023 Your Company. All Rights Reserved."
        imgLogo="https://example.com/logo.png"
        labelLogo="Your Company"
        oicInfo={oicInfo}
        dbdInfo={dbdInfo}
        securityCompliances={securityCompliances}
        dataTestId="custom-footer-stack"
      />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;