@axa-fr/react-toolkit-layout-footer-client
TypeScript icon, indicating that this package has built-in type declarations

3.0.2 • Public • Published

@axa-fr/react-toolkit-layout-footer-client

  1. Installation
  2. Simple
  3. Complex
  4. Without Bottom

Installation

npm i @axa-fr/react-toolkit-layout-footer-client

Simple

Import

import {
  FooterClientList,
  FooterClientItem,
  FooterClient,
} from '@axa-fr/react-toolkit-layout-footer-client';
import '@axa-fr/react-toolkit-layout-footer-client/dist/af-footer-client.css';

Use

export const columns = [
  {
    title: 'Languages',
    links: [
      {
        text: 'Lorem',
        path: '/9',
      },
      {
        text: 'Young driver insurance',
        path: '/8',
      },
      {
        text: 'Home insurance',
        path: '/7',
      },
    ],
  },
  {
    title: 'Axa & You',
    links: [
      {
        text: 'Call us',
        path: '/6',
      },
      {
        text: 'Policy documents',
        path: '/5',
      },
      {
        text: 'Xtra by AXA',
        path: '/4',
      },
    ],
  },
  {
    title: 'Useful links',
    links: [
      {
        text: 'About us',
        path: '/3',
      },
      {
        text: 'Careers',
        path: '/2',
      },
      {
        text: 'Blog',
        path: '/1',
      },
    ],
  },
];

const simpleLayout = () => (
  <FooterClient copyright="Policy Privacy © 2021 AXA All Rights Reserved">
    {columns &&
      columns.map((column) => (
        <FooterClientList title={column.title} key={column.title}>
          {column.links.map((link) => (
            <FooterClientItem
              onClick={(e: string) => {
                console.log(e);
              }}
              path={link.path}
              key={link.path}>
              {link.text}
            </FooterClientItem>
          ))}
        </FooterClientList>
      ))}
  </FooterClient>
);
export default simpleLayout;

Complex

Import

import {
  FooterClientList,
  FooterClientItem,
  SocialNetwork,
  FooterClient,
  LanguageSelection,
} from '@axa-fr/react-toolkit-layout-footer-client';
import '@axa-fr/react-toolkit-layout-footer-client/dist/af-footer-client.css';

Use

export const columns = [
  {
    title: 'Languages',
    links: [
      {
        text: 'Lorem',
        path: '/9',
      },
      {
        text: 'Young driver insurance',
        path: '/8',
      },
      {
        text: 'Home insurance',
        path: '/7',
      },
    ],
  },
  {
    title: 'Axa & You',
    links: [
      {
        text: 'Call us',
        path: '/6',
      },
      {
        text: 'Policy documents',
        path: '/5',
      },
      {
        text: 'Xtra by AXA',
        path: '/4',
      },
    ],
  },
  {
    title: 'Useful links',
    links: [
      {
        text: 'About us',
        path: '/3',
      },
      {
        text: 'Careers',
        path: '/2',
      },
      {
        text: 'Blog',
        path: '/1',
      },
    ],
  },
];

export const languages = [
  {
    name: 'English',
    value: 'en',
  },
  {
    name: 'Chinese',
    value: 'cn',
  },
];

export const socialNetworkList = {
  facebook: '#',
  linkedin: '#',
  youtube: '#',
  instagram: '#',
  twitter: '#',
};

export const currentLanguage = 'en';

export const bottomComponent = (
  <LanguageSelection
    onClick={(e: string) => {
      console.log(e);
    }}
    languages={languages}
    currentLanguage={currentLanguage}
  />
);

const complexLayout = () => (
  <FooterClient
    copyright="Policy Privacy © 2021 AXA All Rights Reserved"
    bottomComponent={bottomComponent}>
    {columns &&
      columns.map((column) => (
        <FooterClientList title={column.title} key={column.title}>
          {column.links.map((link) => (
            <FooterClientItem
              onClick={(e: string) => {
                console.log(e);
              }}
              path={link.path}
              key={link.path}>
              {link.text}
            </FooterClientItem>
          ))}
        </FooterClientList>
      ))}
    <FooterClientList title="Follow AXA">
      <SocialNetwork
        onClick={(e: string) => {
          console.log(e);
        }}
        list={socialNetworkList}
      />
    </FooterClientList>
  </FooterClient>
);
export default complexLayout;

Without Bottom

Import

import {
  FooterClientList,
  FooterClientItem,
  SocialNetwork,
  FooterClient,
} from '@axa-fr/react-toolkit-layout-footer-client';
import '@axa-fr/react-toolkit-layout-footer-client/dist/af-footer-client.css';

Use

export const columns = [
  {
    title: 'Languages',
    links: [
      {
        text: 'Lorem',
        path: '/9',
      },
      {
        text: 'Young driver insurance',
        path: '/8',
      },
      {
        text: 'Home insurance',
        path: '/7',
      },
    ],
  },
  {
    title: 'Axa & You',
    links: [
      {
        text: 'Call us',
        path: '/6',
      },
      {
        text: 'Policy documents',
        path: '/5',
      },
      {
        text: 'Xtra by AXA',
        path: '/4',
      },
    ],
  },
  {
    title: 'Useful links',
    links: [
      {
        text: 'About us',
        path: '/3',
      },
      {
        text: 'Careers',
        path: '/2',
      },
      {
        text: 'Blog',
        path: '/1',
      },
    ],
  },
];

export const socialNetworkList = {
  facebook: '#',
  linkedin: '#',
  youtube: '#',
  instagram: '#',
  twitter: '#',
};

const WithoutBottom = () => (
  <FooterClient copyright="Policy Privacy © 2021 AXA All Rights Reserved">
    {columns &&
      columns.map((column) => (
        <FooterClientList title={column.title} key={column.title}>
          {column.links.map((link) => (
            <FooterClientItem
              onClick={(e: string) => {
                console.log(e);
              }}
              path={link.path}
              key={link.path}>
              {link.text}
            </FooterClientItem>
          ))}
        </FooterClientList>
      ))}

    <FooterClientList title="Follow AXA">
      <SocialNetwork
        onClick={(e: string) => {
          console.log(e);
        }}
        list={socialNetworkList}
      />
    </FooterClientList>
  </FooterClient>
);

export default WithoutBottom;

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
3.0.23latest
3.0.2-alpha.00next

Version History

VersionDownloads (Last 7 Days)Published
3.0.23
3.0.2-alpha.00
3.0.10
3.0.00
3.0.0-alpha.20
3.0.0-alpha.11
3.0.0-alpha.01
2.3.14
2.3.1-alpha.01
2.3.01
2.3.0-alpha.20
2.3.0-alpha.00
2.2.055
2.2.0-alpha.10
2.2.0-alpha.00
2.1.10
2.1.1-alpha.00
2.1.01
2.1.0-alpha.60
2.1.0-alpha.50
2.1.0-alpha.40
2.1.0-alpha.30
2.1.0-alpha.20
2.1.0-alpha.10
2.0.1-alpha.10
2.0.1-alpha.00
2.0.03
2.0.0-alpha.110
2.0.0-alpha.100
2.0.0-alpha.90
2.0.0-alpha.80
2.0.0-alpha.50
2.0.0-alpha.40
2.0.0-alpha.30
1.4.10
1.4.00
2.0.0-alpha.10
2.0.0-alpha.00
1.4.0-alpha.10
1.4.0-alpha.00
1.3.230
1.3.210
1.3.160
1.3.150
1.3.140
1.3.130
1.3.120
1.3.110
1.3.100
1.3.90
1.3.9-alpha.00
1.3.8-alpha.00
1.3.7-alpha.00
1.3.60
1.3.6-alpha.00
1.3.5-alpha.00
1.3.40
1.3.30
1.3.20
1.3.2-alpha.00
1.2.160
1.2.150
1.2.140
1.2.130
1.2.120
1.2.110
1.2.100
1.2.80
1.2.70
1.2.60
1.2.6-alpha.00
1.2.50
1.2.5-alpha.00
1.2.40
1.2.30
1.2.20
1.2.10
1.2.00
1.1.20
1.1.10
1.1.00
1.0.50
1.0.40
1.0.30
1.0.20
1.0.10
1.0.00
0.0.2-alpha.00

Package Sidebar

Install

npm i @axa-fr/react-toolkit-layout-footer-client

Weekly Downloads

55

Version

3.0.2

License

MIT

Unpacked Size

57.5 kB

Total Files

54

Last publish

Collaborators

  • johnathan.meunier
  • martinweb
  • fcornaire
  • guillaume.chervet.axa
  • samuel-gomez
  • antoine.blancke
  • arnaudforaison