@bolttech/atoms-footer

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;