How to use the bpk-component-icon.alignToButton 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 / pages / WebButtonsPage / ButtonsPage.js View on Github external
import TestBpkSmallSearchIcon from 'bpk-component-icon/sm/search';
import TestBpkLargeSearchIcon from 'bpk-component-icon/lg/search';
import BpkLoadingButton from 'bpk-component-loading-button';
import BpkRouterLink from 'bpk-component-router-link';
import buttonReadme from 'bpk-component-button/README.md';
import loadingButtonReadme from 'bpk-component-loading-button/README.md';
import { cssModules } from 'bpk-react-utils';

import * as ROUTES from '../../constants/routes';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import Paragraph from '../../components/Paragraph';
import Code from '../../components/Code';

import STYLES from './buttons-page.scss';

const AlignedBpkSmallArrowIcon = alignToButton(TestBpkSmallArrowIcon);
const AlignedBpkLargeArrowIcon = alignToLargeButton(TestBpkLargeArrowIcon);
const AlignedBpkSmallTrashIcon = alignToButton(TestBpkSmallTrashIcon);
const AlignedBpkLargeTrashIcon = alignToLargeButton(TestBpkLargeTrashIcon);
const AlignedBpkSmallHelpIcon = alignToButton(TestBpkSmallHelpIcon);
const AlignedBpkLargeHelpIcon = alignToLargeButton(TestBpkLargeHelpIcon);
const AlignedBpkSmallSearchIcon = alignToButton(TestBpkSmallSearchIcon);
const AlignedBpkLargeSearchIcon = alignToLargeButton(TestBpkLargeSearchIcon);

const getClassName = cssModules(STYLES);
const buttonContainerClassName = getClassName(
  'bpkdocs-buttons-page__button-container',
);
const buttonClassName = getClassName('bpkdocs-buttons-page__button');

class LoadingButtonContainer extends Component<{}, { loading: boolean }> {
  constructor() {
github Skyscanner / backpack / packages / bpk-docs / src / pages / WebButtonsPage / ButtonsPage.js View on Github external
import { cssModules } from 'bpk-react-utils';

import * as ROUTES from '../../constants/routes';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import Paragraph from '../../components/Paragraph';
import Code from '../../components/Code';

import STYLES from './buttons-page.scss';

const AlignedBpkSmallArrowIcon = alignToButton(TestBpkSmallArrowIcon);
const AlignedBpkLargeArrowIcon = alignToLargeButton(TestBpkLargeArrowIcon);
const AlignedBpkSmallTrashIcon = alignToButton(TestBpkSmallTrashIcon);
const AlignedBpkLargeTrashIcon = alignToLargeButton(TestBpkLargeTrashIcon);
const AlignedBpkSmallHelpIcon = alignToButton(TestBpkSmallHelpIcon);
const AlignedBpkLargeHelpIcon = alignToLargeButton(TestBpkLargeHelpIcon);
const AlignedBpkSmallSearchIcon = alignToButton(TestBpkSmallSearchIcon);
const AlignedBpkLargeSearchIcon = alignToLargeButton(TestBpkLargeSearchIcon);

const getClassName = cssModules(STYLES);
const buttonContainerClassName = getClassName(
  'bpkdocs-buttons-page__button-container',
);
const buttonClassName = getClassName('bpkdocs-buttons-page__button');

class LoadingButtonContainer extends Component<{}, { loading: boolean }> {
  constructor() {
    super();

    this.state = {
      loading: false,
    };
  }
github Skyscanner / backpack / packages / bpk-docs / src / pages / WebButtonsPage / ButtonsPage.js View on Github external
import BpkLoadingButton from 'bpk-component-loading-button';
import BpkRouterLink from 'bpk-component-router-link';
import buttonReadme from 'bpk-component-button/README.md';
import loadingButtonReadme from 'bpk-component-loading-button/README.md';
import { cssModules } from 'bpk-react-utils';

import * as ROUTES from '../../constants/routes';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import Paragraph from '../../components/Paragraph';
import Code from '../../components/Code';

import STYLES from './buttons-page.scss';

const AlignedBpkSmallArrowIcon = alignToButton(TestBpkSmallArrowIcon);
const AlignedBpkLargeArrowIcon = alignToLargeButton(TestBpkLargeArrowIcon);
const AlignedBpkSmallTrashIcon = alignToButton(TestBpkSmallTrashIcon);
const AlignedBpkLargeTrashIcon = alignToLargeButton(TestBpkLargeTrashIcon);
const AlignedBpkSmallHelpIcon = alignToButton(TestBpkSmallHelpIcon);
const AlignedBpkLargeHelpIcon = alignToLargeButton(TestBpkLargeHelpIcon);
const AlignedBpkSmallSearchIcon = alignToButton(TestBpkSmallSearchIcon);
const AlignedBpkLargeSearchIcon = alignToLargeButton(TestBpkLargeSearchIcon);

const getClassName = cssModules(STYLES);
const buttonContainerClassName = getClassName(
  'bpkdocs-buttons-page__button-container',
);
const buttonClassName = getClassName('bpkdocs-buttons-page__button');

class LoadingButtonContainer extends Component<{}, { loading: boolean }> {
  constructor() {
    super();
github Skyscanner / backpack / packages / bpk-docs / src / pages / WebButtonsPage / ButtonsPage.js View on Github external
import buttonReadme from 'bpk-component-button/README.md';
import loadingButtonReadme from 'bpk-component-loading-button/README.md';
import { cssModules } from 'bpk-react-utils';

import * as ROUTES from '../../constants/routes';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import Paragraph from '../../components/Paragraph';
import Code from '../../components/Code';

import STYLES from './buttons-page.scss';

const AlignedBpkSmallArrowIcon = alignToButton(TestBpkSmallArrowIcon);
const AlignedBpkLargeArrowIcon = alignToLargeButton(TestBpkLargeArrowIcon);
const AlignedBpkSmallTrashIcon = alignToButton(TestBpkSmallTrashIcon);
const AlignedBpkLargeTrashIcon = alignToLargeButton(TestBpkLargeTrashIcon);
const AlignedBpkSmallHelpIcon = alignToButton(TestBpkSmallHelpIcon);
const AlignedBpkLargeHelpIcon = alignToLargeButton(TestBpkLargeHelpIcon);
const AlignedBpkSmallSearchIcon = alignToButton(TestBpkSmallSearchIcon);
const AlignedBpkLargeSearchIcon = alignToLargeButton(TestBpkLargeSearchIcon);

const getClassName = cssModules(STYLES);
const buttonContainerClassName = getClassName(
  'bpkdocs-buttons-page__button-container',
);
const buttonClassName = getClassName('bpkdocs-buttons-page__button');

class LoadingButtonContainer extends Component<{}, { loading: boolean }> {
  constructor() {
    super();

    this.state = {
      loading: false,