How to use the bpk-component-icon.withDescription function in bpk-component-icon

To help you get started, we’ve selected a few bpk-component-icon examples, based on popular ways it is used in public projects.

github Skyscanner / backpack / packages / bpk-docs / src / components / Footer / Footer.js View on Github external
import React from 'react';
import { cssModules } from 'bpk-react-utils';
import BpkRtlToggle from 'bpk-component-rtl-toggle';
import BpkGridToggle from 'bpk-component-grid-toggle';
import BpkThemeToggle from 'bpk-component-theme-toggle';
import BpkHeartIcon from 'bpk-component-icon/sm/heart';
import { withAlignment, withDescription } from 'bpk-component-icon';
import { lineHeightSm, iconSizeSm } from 'bpk-tokens/tokens/base.es6';
import BpkLink from 'bpk-component-link';

import STYLES from './Footer.scss';

const getClassName = cssModules(STYLES);

const AlignedHeart = withDescription(
  withAlignment(BpkHeartIcon, lineHeightSm, iconSizeSm),
  'love',
);

const Footer = () => (
  <div className={getClassName('bpkdocs-footer__wrapper')}>
    <div className={getClassName('bpkdocs-footer__inner')}>
      <span className={getClassName('bpkdocs-footer__copyright')}>
        Made with{' '}
        <AlignedHeart className={getClassName('bpkdocs-footer__heart')} /> by{' '}
        <BpkLink href="https://www.skyscanner.net" blank>
          Skyscanner
        </BpkLink>{' '}
        &copy; {new Date().getFullYear()}
      </span>
      <div className={getClassName('bpkdocs-footer__controls')}>