How to use the bpk-component-icon.withLargeButtonAlignment 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-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-docs / src / pages / AlignmentPage / AlignmentPage.js View on Github external
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>,
      <CodeBlock>
github Skyscanner / backpack / packages / bpk-component-loading-button / stories.js View on Github external
.add('Custom Icon', () => {
    const AlignedIconSm = withButtonAlignment(withRtlSupport(BaggageIconSm));
    const iconSm = <AlignedIconSm />;

    const AlignedIconLg = withLargeButtonAlignment(
      withRtlSupport(BaggageIconLg),
    );
    const iconLg = <AlignedIconLg />;

    return (
      <div>
        <BpkLoadingButton icon={iconSm} onClick={action('primary clicked')}>
          Button
        </BpkLoadingButton>
        <BpkLoadingButton
          disabled
          iconDisabled={iconSm}
          onClick={action('THIS SHOULD NOT HAPPEN')}
        >
          Disabled
        </BpkLoadingButton>
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 />;
};