How to use the bpk-react-utils.withDefaultProps function in bpk-react-utils

import BpkButton from 'bpk-component-button';
import { storiesOf } from '@storybook/react';
import BpkText from 'bpk-component-text';
import BpkContentContainer from 'bpk-component-content-container';

import STYLES from './stories.scss';

import BpkPopover, {
  bpkPopoverPortalPropTypes,
  bpkPopoverPortalDefaultProps,
  type BpkPopoverProps as PopoverProps,
} from './index';

const getClassName = cssModules(STYLES);

const Paragraph = withDefaultProps(BpkText, {
  textStyle: 'base',
  tagName: 'p',
  className: getClassName('bpk-popover-paragraph'),
});

type IgnoredPopoverProps = {
  children: Node,
  closeButtonText: string,
  isOpen: boolean,
  label: string,
  onClose: (event: SyntheticEvent<>, props: { source: string }) => mixed,
  target: (() => ?HTMLElement) | Node,
};

type Props = {
  ...$Diff,

* Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { withDefaultProps } from 'bpk-react-utils';
import { BpkCode } from 'bpk-component-code';

export default withDefaultProps(BpkCode, {
  alternate: true,
});

BpkBannerAlertExpandable,
  withBannerAlertState,
} from 'bpk-component-banner-alert';
import BpkCheckBox from 'bpk-component-checkbox';
import BpkButton from 'bpk-component-button';
import bannerAlertReadme from 'bpk-component-banner-alert/README.md';

import DocsPageBuilder from '../../components/DocsPageBuilder';
import Paragraph from '../../components/Paragraph';

import STYLES from './bpk-banner-alerts-page.scss';

const getClassName = cssModules(STYLES);
const componentClassName = getClassName('bpk-banner-alerts-page__component');

const BannerAlert = withDefaultProps(BpkBannerAlert, {
  className: componentClassName,
  toggleButtonLabel: 'See more',
});

const BannerAlertExpandable = withDefaultProps(
  withBannerAlertState(BpkBannerAlertExpandable),
  {
    className: componentClassName,
    toggleButtonLabel: 'See more',
  },
);

const BannerAlertDismissable = withDefaultProps(
  withBannerAlertState(BpkBannerAlertDismissable),
  {
    className: componentClassName,

const componentClassName = getClassName('bpk-banner-alerts-page__component');

const BannerAlert = withDefaultProps(BpkBannerAlert, {
  className: componentClassName,
  toggleButtonLabel: 'See more',
});

const BannerAlertExpandable = withDefaultProps(
  withBannerAlertState(BpkBannerAlertExpandable),
  {
    className: componentClassName,
    toggleButtonLabel: 'See more',
  },
);

const BannerAlertDismissable = withDefaultProps(
  withBannerAlertState(BpkBannerAlertDismissable),
  {
    className: componentClassName,
    dismissButtonLabel: 'Dismiss',
  },
);

const longMessage = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis sagittis purus, id
blandit ipsum. Pellentesque nec diam nec erat condimentum dapibus. Nunc diam augue, egestas id egestas ut, facilisis
nec mi. Donec et congue odio, nec laoreet est. Integer rhoncus varius arcu, a fringilla libero laoreet at. Mauris
porta varius ullamcorper. Sed laoreet libero mauris, non pretium lectus accumsan et. Suspendisse vehicula ullamcorper
sapien, et dapibus mi aliquet non. Pellentesque auctor sagittis lectus vitae rhoncus. Fusce id enim porttitor, mattis
ante in, vestibulum nulla.`;
const richMessage = (
  <span style="{{">
    Successful alert with custom rendered message</span>

import React, { Component, type Node } from 'react';
import { cssModules, withDefaultProps } from 'bpk-react-utils';

import { ParagraphNoMargin } from '../../components/Paragraph';

import STYLES from './DialogExamples.scss';

const getClassName = cssModules(STYLES);

const MarginDiv = withDefaultProps(BpkText, {
  textStyle: 'base',
  tagName: 'p',
  className: getClassName('bpk-docs-dialog-examples-margin-div'),
});

const AlignRight = withDefaultProps('div', {
  className: getClassName('bpk-docs-dialog-examples-align-right'),
});

export class DialogContainer extends Component<
  {
    children: Node,
  },
  {
    isOpen: boolean,
  },
> {
  static propTypes = {
    children: PropTypes.node.isRequired,
  };

  constructor() {

import { withDefaultProps } from 'bpk-react-utils';
import BpkText from 'bpk-component-text';
import { spacingSm, colorMonteverde } from 'bpk-tokens/tokens/base.es6';

import BpkTooltip from './index';

const st = {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '500px',
  margin: '30px',
  textAlign: 'center',
};

const Heading = withDefaultProps(BpkText, { textStyle: 'xxl', tagName: 'h1' });

storiesOf('bpk-component-tooltip', module)
  .add('Default', () => (
    <div style="{st}">
      £295}&gt;
        This is the cheapest price!
        <span aria-label="Thumbs up" role="img">
          👍
        </span>
      
    </div>
  ))
  .add('On the side', () =&gt; (
    <div style="{st}">
      </div>

import BpkText from 'bpk-component-text';
import { cssModules, withDefaultProps } from 'bpk-react-utils';

import STYLES from './Paragraph.scss';

const getClassName = cssModules(STYLES);

export const ParagraphNoMargin = withDefaultProps(BpkText, {
  textStyle: 'base',
  tagName: 'p',
  className: ['bpk-docs-paragraph', 'bpk-docs-paragraph--no-margin']
    .map(getClassName)
    .join(' '),
});

export default withDefaultProps(BpkText, {
  textStyle: 'base',
  tagName: 'p',
  className: getClassName('bpk-docs-paragraph'),
});

* Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withDefaultProps } from 'bpk-react-utils';

import STYLE from './stories.scss';

import BpkText from './index';

const Paragraph = withDefaultProps(BpkText, {
  textStyle: 'lg',
  tagName: 'p',
  className: STYLE['bpk-my-paragraph'],
});

storiesOf('bpk-component-text', module)
  .add('Default', () => (
    
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
      imperdiet lobortis tellus, non rhoncus erat tincidunt id. Pellentesque
      consectetur, dolor nec vulputate vehicula, ex metus mattis ante, non
      dictum mi ante eu arcu.
    
  ))
  .add('Headings', () => (
    <div></div>

*/

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { storiesOf } from '@storybook/react';
import { cssModules, withDefaultProps } from 'bpk-react-utils';
import BpkButton from 'bpk-component-button';
import BpkText from 'bpk-component-text';

import STYLES from './stories.scss';

import BpkDrawer from './index';

const getClassName = cssModules(STYLES);

const Paragraph = withDefaultProps(BpkText, {
  textStyle: 'base',
  tagName: 'p',
  className: getClassName('bpk-drawer-paragraph'),
});

class DrawerContainer extends Component {
  constructor() {
    super();

    this.state = {
      isOpen: false,
    };
  }

  onOpen = () => {
    this.setState({

import { cssModules, withDefaultProps } from 'bpk-react-utils';
import BpkButton from 'bpk-component-button';
import { BpkNavigationBarButtonLink } from 'bpk-component-navigation-bar';
import { withButtonAlignment, withRtlSupport } from 'bpk-component-icon';
import ArrowIcon from 'bpk-component-icon/sm/long-arrow-left';
import BpkText from 'bpk-component-text';

import STYLES from './stories.scss';

import BpkModal from './index';

const ArrowIconWithRtl = withButtonAlignment(withRtlSupport(ArrowIcon));

const getClassName = cssModules(STYLES);

const Paragraph = withDefaultProps(BpkText, {
  textStyle: 'base',
  tagName: 'p',
  className: getClassName('bpk-modal-paragraph'),
});

const content = [
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas sit amet
    nisi nec ultrices. In efficitur justo ac tristique ultricies. Mauris luctus
    felis arcu, a porttitor turpis aliquet faucibus. Aenean nibh nulla, dictum
    sit amet efficitur cursus, molestie vitae enim. Aenean vel nunc purus.
    Vestibulum consectetur luctus eros ac bibendum. Donec pretium nunc mi, sed
    iaculis nibh aliquet in. Integer ut accumsan orci, non hendrerit nunc.
    Quisque ante enim, convallis lacinia arcu eu, tincidunt dignissim nunc.
    Nulla facilisi. Curabitur mattis sapien imperdiet, dignissim ligula id,
    maximus erat. Morbi sed eros vitae augue accumsan dictum sit amet eu lectus.