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

* See the License for the specific language governing permissions and
 * limitations under the License.
 */
/* @flow strict */

import PropTypes from 'prop-types';
import React from 'react';
import ClearIcon from 'bpk-component-icon/sm/close-circle';
import { withButtonAlignment } from 'bpk-component-icon';
import { cssModules } from 'bpk-react-utils';

import STYLES from './BpkClearButton.scss';

const getClassName = cssModules(STYLES);

const ClearButtonIcon = withButtonAlignment(ClearIcon);

type Props = {
  label: string,
  onClick: (SyntheticInputEvent) => mixed,
  className: ?string,
};

const BpkClearButton = (props: Props) => {
  const classNames = [getClassName('bpk-clear-button')];
  const { label, onClick, className, ...rest } = props;

  if (className) {
    classNames.push(className);
  }

  return (

* limitations under the License.
 */

import React from 'react';
import BpkButton from 'bpk-component-button';
import BpkSmallDownloadIcon from 'bpk-component-icon/sm/download';
import { withButtonAlignment } from 'bpk-component-icon';

import InfoPageBuilder from '../../components/InfoPageBuilder';
import Paragraph from '../../components/Paragraph';
import CopywritingHeroImage from '../../static/copywriting_hero.jpg';

// eslint-disable-next-line import/no-webpack-loader-syntax
const toneOfVoiceGuidelines = require('!!file-loader?name=[name].[hash].pdf!./../../static/tone-of-voice-guidelines-october-2018.pdf');

const AlignedBpkSmallDownloadIcon = withButtonAlignment(BpkSmallDownloadIcon);

const sections = [
  {
    id: 'download',
    title: 'Download the guidelines',
    expanded: true,
    content: (
      
        
          Download 
        
      
    ),
  },
];

const getEnabledIcon = (large) => {
  const AlignedIcon = large ?
    withLargeButtonAlignment(withRtlSupport(ArrowIconLg)) :
    withButtonAlignment(withRtlSupport(ArrowIconSm));
  return ;
};

* 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 PropTypes from 'prop-types';
import { cssModules } from 'bpk-react-utils';
import { withRtlSupport, withButtonAlignment } from 'bpk-component-icon';
import ArrowRightIcon from 'bpk-component-icon/sm/arrow-right';

import STYLES from './BpkTile.scss';

const getClassName = cssModules(STYLES);
const RtlArrowRightIcon = withRtlSupport(withButtonAlignment(ArrowRightIcon));

const BpkTile = props => {
  const {
    dark,
    backgroundColor,
    imageSource,
    className,
    cta,
    heading,
    ...rest
  } = props;

  const classNames = [getClassName('bpk-tile')];
  const scrimClassNames = [getClassName('bpk-tile__scrim')];
  const headingClassNames = [getClassName('bpk-tile__heading')];
  const ctaIconClassNames = [getClassName('bpk-tile__cta-icon')];

const getEnabledIcon = large => {
  const AlignedIcon = large
    ? withLargeButtonAlignment(withRtlSupport(ArrowIconLg))
    : withButtonAlignment(withRtlSupport(ArrowIconSm));
  return ;
};

* See the License for the specific language governing permissions and
 * limitations under the License.
 */

import PropTypes from 'prop-types';
import React from 'react';
import { cssModules } from 'bpk-react-utils';
import { withButtonAlignment, withRtlSupport } from 'bpk-component-icon';
import ArrowLeftIcon from 'bpk-component-icon/lg/arrow-left';
import ArrowRightIcon from 'bpk-component-icon/lg/arrow-right';

import STYLES from './BpkPaginationNudger.scss';

const getClassName = cssModules(STYLES);
const AlignedArrowLeftIcon = withButtonAlignment(withRtlSupport(ArrowLeftIcon));
const AlignedArrowRightIcon = withButtonAlignment(
  withRtlSupport(ArrowRightIcon),
);

const nudgerIcon = forward =>
  forward ? (
    
  ) : (
    
  );

const BpkPaginationNudger = props => {
  const { label, onNudge, forward, disabled } = props;

* limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import MenuIcon from 'bpk-component-icon/sm/menu';
import CloseIcon from 'bpk-component-icon/sm/close';
import { withButtonAlignment } from 'bpk-component-icon';
import { cssModules } from 'bpk-react-utils';

import STYLES from './HamburgerButton.scss';

const getClassName = cssModules(STYLES);

const CloseButtonIcon = withButtonAlignment(CloseIcon);
const MenuButtonIcon = withButtonAlignment(MenuIcon);

const HamburgerButton = props => {
  const classNames = [getClassName('bpkdocs-hamburger-button')];
  const { expanded, onClick, className, ...rest } = props;

  if (className) {
    classNames.push(className);
  }

  return (

import { withButtonAlignment } from 'bpk-component-icon';
import MinusIcon from 'bpk-component-icon/sm/minus';
import PlusIcon from 'bpk-component-icon/sm/plus';
import { cssModules } from 'bpk-react-utils';

import {
  type CommonProps,
  COMMON_PROP_TYPES,
  COMMON_DEFAULT_PROPS,
} from './common-types';
import STYLES from './BpkNudger.scss';

const getClassName = cssModules(STYLES);

const AlignedMinusIcon = withButtonAlignment(MinusIcon);
const AlignedPlusIcon = withButtonAlignment(PlusIcon);

type Props = {
  ...$Exact>,
  inputClassName: ?string,
  formatValue: T => string,
  incrementValue: T => T,
  decrementValue: T => T,
  compareValues: (T, T) => number,
};

const BpkConfigurableNudger = (props: Props) => {
  const {
    id,
    min,
    max,
    value,

import IntroBlurb from '../../components/IntroBlurb';
import Code from '../../components/Code';
import CodeBlock from '../../components/CodeBlock';
import * as ROUTES from '../../constants/routes';

const AlignedBaseArrow = withAlignment(
  LongArrowRightIconSm,
  lineHeightBase,
  iconSizeSm,
);
const AlignedLargeArrow = withAlignment(
  LongArrowRightIcon,
  lineHeightLg,
  iconSizeLg,
);
const AlignedButtonArrow = withButtonAlignment(LongArrowRightIconSm);
const AlignedLargeButtonArrow = withLargeButtonAlignment(LongArrowRightIcon);
const AlignedSpan = withAlignment('span', iconSizeLg, lineHeightBase);
const AlignedSpanSmall = withAlignment('span', iconSizeLg, lineHeightSm);

const components = [
  {
    id: 'withinBase',
    title: 'Icon alignment within text with textStyle "base"',
    blurb: [
      
        Aligning an icon within text with textStyle "base" can be done
        using
        <code>withAlignment</code>, providing suitable spacings (see the{' '}
        Typesetting section).
      ,
      Using the HOC is done as follows:,

) => {
  const classMap: { [AlertTypeValue]: string } = {
    [ALERT_TYPES.SUCCESS]: getClassName('bpk-banner-alert__success-icon'),
    [ALERT_TYPES.WARN]: getClassName('bpk-banner-alert__warn-icon'),
    [ALERT_TYPES.ERROR]: getClassName('bpk-banner-alert__error-icon'),
    [ALERT_TYPES.NEUTRAL]: getClassName('bpk-banner-alert__neutral-icon'),
  };
  const className = classMap[type];
  const componentMap: { [AlertTypeValue]: Node } = {
    [ALERT_TYPES.SUCCESS]: TickCircleIcon,
    [ALERT_TYPES.WARN]: InfoCircleIcon,
    [ALERT_TYPES.ERROR]: InfoCircleIcon,
    [ALERT_TYPES.NEUTRAL]: InfoCircleIcon,
  };
  const Icon = CustomIcon || componentMap[type];
  const AlignedIcon = withButtonAlignment(Icon);

  return ;
};