How to use @govuk-react/hoc - 8 common examples

import styled from 'styled-components';
import { link } from '@govuk-react/lib';
import { deprecate } from '@govuk-react/hoc';

const Link = styled('a')(link.common(), link.styleText);

Link.name = 'Breadcrumb.Link';

export default deprecate(Link, 'please use the Breadcrumbs.Link component instead');

) : null))
      ) : (
        {children}
      )}
    
  
);

BreadcrumbComponent.propTypes = {
  /**
   * Breadcrumb contents
   */
  children: PropTypes.node.isRequired,
};

const Breadcrumb = deprecate(BreadcrumbComponent, 'please use the Breadcumbs component instead');

Breadcrumb.Link = Link;

export { BreadcrumbComponent };

export default Breadcrumb;

};

Header.propTypes = {
  /**
   * Semantic heading level value between 1 and 6
   */
  level: PropTypes.number,
  /**
   * Visual size level, accepts:
   *    `XLARGE`, `LARGE`, `MEDIUM`, `SMALL`, `XL`, `L`, `M`, `S`
   *    or a numeric size that fits in the GDS font scale list
   */
  size: PropTypes.oneOf([...Object.keys(HEADING_SIZES), ...Object.keys(TYPOGRAPHY_SCALE)]),
};

export default deprecate(Header, 'please use the Heading component instead');

export { Header as DocumentedHeader };
export { H1, H2, H3, H4, H5, H6 } from './presets';

* ### Usage
 *
 * This component is DEPRECATED.
 *
 * Please use the `Caption` component instead.
 */
const SupportingHeader = props => ;

SupportingHeader.propTypes = {
  /** Text to be rendered as a supporting header */
  children: PropTypes.string.isRequired,
};

export { SupportingHeader as DocumentedSupportingHeader };

export default deprecate(SupportingHeader, 'please use the Caption component instead');

import React from 'react';
import { storiesOf } from '@storybook/react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import { asPaginationItem } from '@govuk-react/hoc';
import { withDocsCustom } from '@govuk-react/storybook-components';

import Pagination from '.';
import ReadMe from '../README.md';

const PaginationTag = asPaginationItem('a');
const PaginationLink = asPaginationItem(Link);

const stories = storiesOf('Navigation/Pagination', module);
const examples = storiesOf('Navigation/Pagination/Examples', module);

stories.addDecorator(withDocsCustom(ReadMe));

stories.add('Component default', () => (
  
    
      Previous page
    
    
      Next page
    
  
));

import React from 'react';
import { storiesOf } from '@storybook/react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import { asPaginationItem } from '@govuk-react/hoc';
import { withDocsCustom } from '@govuk-react/storybook-components';

import Pagination from '.';
import ReadMe from '../README.md';

const PaginationTag = asPaginationItem('a');
const PaginationLink = asPaginationItem(Link);

const stories = storiesOf('Navigation/Pagination', module);
const examples = storiesOf('Navigation/Pagination/Examples', module);

stories.addDecorator(withDocsCustom(ReadMe));

stories.add('Component default', () => (
  
    
      Previous page
    
    
      Next page

import React from 'react';
import { asPaginationItem } from '@govuk-react/hoc';
import Pagination from '.';

const PaginationTag = asPaginationItem('a');

export default () => (
  
    
      Previous page
    
    
      Next page
    
  );

import React from 'react';
import { asAnchor } from '@govuk-react/hoc';
import ListNavigation from './index';

const AnchorTag = asAnchor('a');

export default () => (
  
    Example
  
);