How to use the bpk-component-icon.withAlignment 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-docs / src / layouts / SideNavLayout / SectionsList.js View on Github external
icon: ComponentsIcon,
  },
  GITHUB: {
    title: 'GitHub',
    link: 'https://github.com/Skyscanner/backpack',
    external: true,
  },
};

const BpkAlignedArrowDown = withAlignment(
  BpkLargeArrowDown,
  lineHeightLg,
  iconSizeLg,
);

const BpkAlignedArrowUp = withAlignment(
  BpkLargeArrowUp,
  lineHeightLg,
  iconSizeLg,
);

const omitActiveSection = activeSection => omit(sections, activeSection);

type SectionListItemProps = {
  link: string,
  external: boolean,
  navigateOnClick: boolean,
  title: string,
  onClick: () => mixed,
};

const SectionListItem = (props: SectionListItemProps) => {
github Skyscanner / backpack / packages / bpk-docs / src / layouts / SideNavLayout / SectionsList.js View on Github external
link: ROUTES.STYLE_GUIDE,
    icon: StyleGuideIcon,
  },
  COMPONENTS: {
    title: 'Components',
    link: ROUTES.COMPONENTS,
    icon: ComponentsIcon,
  },
  GITHUB: {
    title: 'GitHub',
    link: 'https://github.com/Skyscanner/backpack',
    external: true,
  },
};

const BpkAlignedArrowDown = withAlignment(
  BpkLargeArrowDown,
  lineHeightLg,
  iconSizeLg,
);

const BpkAlignedArrowUp = withAlignment(
  BpkLargeArrowUp,
  lineHeightLg,
  iconSizeLg,
);

const omitActiveSection = activeSection => omit(sections, activeSection);

type SectionListItemProps = {
  link: string,
  external: boolean,
github Skyscanner / backpack / packages / bpk-component-form-validation / src / BpkFormValidation.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 AnimateHeight from 'bpk-animate-height';
import { cssModules } from 'bpk-react-utils';
import BpkSmallExclamationIcon from 'bpk-component-icon/sm/exclamation-circle';
import { withAlignment } from 'bpk-component-icon';
import { lineHeightBase, iconSizeSm } from 'bpk-tokens/tokens/base.es6';

import STYLES from './BpkFormValidation.scss';

const getClassName = cssModules(STYLES);
const AlignedExclamationIcon = withAlignment(
  BpkSmallExclamationIcon,
  lineHeightBase,
  iconSizeSm,
);

const BpkFormValidation = props => {
  const {
    children,
    expanded,
    isCheckbox,
    className,
    containerProps,
    ...rest
  } = props;

  const classNames = getClassName(
github Skyscanner / backpack / packages / bpk-docs / src / pages / AlignmentPage / AlignmentPage.js View on Github external
import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import Heading from '../../components/Heading';
import Paragraph from '../../components/Paragraph';
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
github Skyscanner / backpack / packages / bpk-docs / src / pages / AlignmentPage / AlignmentPage.js View on Github external
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>
        {`import LongArrowRightIconSm from 'bpk-component-icon/sm/long-arrow-right';
import { withAlignment } from 'bpk-component-icon';
github Skyscanner / backpack / packages / bpk-docs / src / components / Footer / Footer.js View on Github external
import React from 'react';
import { cssModules } from 'bpk-react-utils';
import BpkRtlToggle from 'bpk-component-rtl-toggle';
import BpkGridToggle from 'bpk-component-grid-toggle';
import BpkThemeToggle from 'bpk-component-theme-toggle';
import BpkHeartIcon from 'bpk-component-icon/sm/heart';
import { withAlignment, withDescription } from 'bpk-component-icon';
import { lineHeightSm, iconSizeSm } from 'bpk-tokens/tokens/base.es6';
import BpkLink from 'bpk-component-link';

import STYLES from './Footer.scss';

const getClassName = cssModules(STYLES);

const AlignedHeart = withDescription(
  withAlignment(BpkHeartIcon, lineHeightSm, iconSizeSm),
  'love',
);

const Footer = () => (
  <div className={getClassName('bpkdocs-footer__wrapper')}>
    <div className={getClassName('bpkdocs-footer__inner')}>
      <span className={getClassName('bpkdocs-footer__copyright')}>
        Made with{' '}
        <AlignedHeart className={getClassName('bpkdocs-footer__heart')} /> by{' '}
        <BpkLink href="https://www.skyscanner.net" blank>
          Skyscanner
        </BpkLink>{' '}
        &copy; {new Date().getFullYear()}
      </span>
      <div className={getClassName('bpkdocs-footer__controls')}>
        <div>
github Skyscanner / backpack / packages / bpk-docs / src / pages / AlignmentPage / AlignmentPage.js View on Github external
import BpkButton from 'bpk-component-button';
import BpkText from 'bpk-component-text';
import LongArrowRightIcon from 'bpk-component-icon/lg/long-arrow-right';
import LongArrowRightIconSm from 'bpk-component-icon/sm/long-arrow-right';
import AwardIcon from 'bpk-component-icon/lg/award';

import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import Heading from '../../components/Heading';
import Paragraph from '../../components/Paragraph';
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 = [
  {
github Skyscanner / backpack / packages / bpk-docs / src / pages / AlignmentPage / AlignmentPage.js View on Github external
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>
        {`import LongArrowRightIconSm from 'bpk-component-icon/sm/long-arrow-right';