@comparaonline/ui-navigation-footer

Installation

yarn add @comparaonline/ui-navigation-footer

Usage

This footer component is isolate between desktop and mobile mode.

Using Desktop Mode

import { Footer } from '@comparaonline/ui-navigation-footer/dist/components/Footer';
import { Menu } from '@comparaonline/ui-navigation-footer/dist/components/Menu/desktop';
import { PaymentMethodsCL } from '@comparaonline/ui-navigation-footer/dist/components/PaymentMethods/cl';
import { Trademark } from '@comparaonline/ui-navigation-footer/dist/components/Trademark';
import { ScheduleContent } from '@comparaonline/ui-navigation-footer/dist/components/Schedule';

const DesktopFooter = () => (
  <Footer
    data={YourJsonFooterData}
    menuComponent={Menu}
    trademarkComponent={Trademark}
    paymentComponent={PaymentMethodsCL}
    scheduleComponent={props => (
      <ScheduleContent
        buttonProps={{
          color: 'primary',
          children: 'Centro de Ayuda'
        }}
        {...props}
      />
    )}
  />
);

Using Mobile Mode

import { Footer } from '@comparaonline/ui-navigation-footer/dist/components/Footer';
import { MenuMobile } from '@comparaonline/ui-navigation-footer/dist/components/Menu/mobile';
import { PaymentMethodsCL } from '@comparaonline/ui-navigation-footer/dist/components/PaymentMethods/cl';
import { Trademark } from '@comparaonline/ui-navigation-footer/dist/components/Trademark';
import { ScheduleContent } from '@comparaonline/ui-navigation-footer/dist/components/Schedule';

const MobileFooter = () => (
  <Footer
    data={YourJsonFooterData}
    menuComponent={MenuMobile}
    trademarkComponent={Trademark}
    paymentComponent={PaymentMethodsCL}
    scheduleComponent={props => (
      <ScheduleContent
        buttonProps={{
          color: 'primary',
          children: 'Centro de Ayuda'
        }}
        {...props}
      />
    )}
  />
);

The structure for the json footer data will be something like

import { FooterData } from '@comparaonline/ui-navigation-footer/dist/components/Footer';

// FooterData is the Typescript type for data footer