How to use the bpk-component-icon.withButtonAlignment 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-component-input / src / BpkClearButton.js View on Github external
* 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<HTMLButtonElement>) => 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 (
github Skyscanner / backpack / packages / bpk-docs / src / pages / ToneOfVoicePage / ToneOfVoicePage.js View on Github external
* 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: (
      <Paragraph>
        <BpkButton href={`/${toneOfVoiceGuidelines}`}>
          Download <AlignedBpkSmallDownloadIcon />
        </BpkButton>
      </Paragraph>
    ),
  },
];
github Skyscanner / backpack / packages / bpk-component-loading-button / src / BpkLoadingButton.js View on Github external
const getEnabledIcon = (large) => {
  const AlignedIcon = large ?
    withLargeButtonAlignment(withRtlSupport(ArrowIconLg)) :
    withButtonAlignment(withRtlSupport(ArrowIconSm));
  return <AlignedIcon />;
};
github Skyscanner / backpack / packages / bpk-component-tile / src / BpkTile.js View on Github external
* 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')];
github Skyscanner / backpack / packages / bpk-component-loading-button / src / BpkLoadingButton.js View on Github external
const getEnabledIcon = large => {
  const AlignedIcon = large
    ? withLargeButtonAlignment(withRtlSupport(ArrowIconLg))
    : withButtonAlignment(withRtlSupport(ArrowIconSm));
  return <AlignedIcon />;
};
github Skyscanner / backpack / packages / bpk-component-pagination / src / BpkPaginationNudger.js View on Github external
* 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 ? (
    <AlignedArrowRightIcon
      className={getClassName('bpk-pagination-nudger__icon')}
    />
  ) : (
    <AlignedArrowLeftIcon
      className={getClassName('bpk-pagination-nudger__icon')}
    />
  );

const BpkPaginationNudger = props => {
  const { label, onNudge, forward, disabled } = props;
github Skyscanner / backpack / packages / bpk-docs / src / components / Header / HamburgerButton.js View on Github external
* 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 (
    <button
      type="button"
      onClick={onClick}
      className={classNames.join(' ')}
      aria-expanded={expanded}
      aria-label={expanded ? 'Close menu' : 'Open menu'}
github Skyscanner / backpack / packages / bpk-component-nudger / src / BpkConfigurableNudger.js View on Github external
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<T> = {
  ...$Exact<CommonProps<T>>,
  inputClassName: ?string,
  formatValue: T => string,
  incrementValue: T => T,
  decrementValue: T => T,
  compareValues: (T, T) => number,
};

const BpkConfigurableNudger = <T>(props: Props<T>) => {
  const {
    id,
    min,
    max,
    value,
github Skyscanner / backpack / packages / bpk-docs / src / pages / AlignmentPage / AlignmentPage.js View on Github external
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: [
      <Paragraph>
        Aligning an icon within text with textStyle &quot;base&quot; can be done
        using
        <Code>withAlignment</Code>, providing suitable spacings (see the{' '}
        <BpkLink href={ROUTES.TYPESETTING}>Typesetting section</BpkLink>).
      </Paragraph>,
      <Paragraph>Using the HOC is done as follows:</Paragraph>,
github Skyscanner / backpack / packages / bpk-component-banner-alert / src / BpkBannerAlertInner.js View on Github external
) => {
  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 <AlignedIcon className={className} />;
};