How to use the bpk-component-icon.withRtlSupport 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.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Skyscanner / backpack / packages / bpk-docs / src / pages / MapPage / MapPage.js View on Github external
import { withRtlSupport } from 'bpk-component-icon';
import mapReadme from 'bpk-component-map/README.md';

import iosScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/ios/default.png';
import androidScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/android/default.png';
import nativeMapReadme from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/README.md';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import IntroBlurb from '../../components/IntroBlurb';

import STYLES from './MapPage.scss';

const AlignedLandmarkIconLg = withRtlSupport(LandmarkIconLg);
const AlignedBusIconSm = withRtlSupport(BusIconSm);
const AlignedFoodIconSm = withRtlSupport(FoodIconSm);
const AlignedLeisureIconLg = withRtlSupport(LeisureIconSm);

const BpkMapWithScript = withGoogleMapsScript(BpkMap);
const API_KEY = process.env.GOOGLE_MAPS_API_KEY || '';
const MAP_URL = `https://maps.googleapis.com/maps/api/js?v=3.exp&key=${API_KEY}&libraries=geometry,drawing,places`;

const getClassName = cssModules(STYLES);

// Shibuya crossing, Tokyo.
const COORDINATES: BpkMapLatLong = {
  latitude: 35.661777,
  longitude: 139.704051,
};

class StatefulBpkMapMarkers extends Component<{}, { selected: number }> {
  constructor() {
    super();
github Skyscanner / backpack / packages / bpk-docs / src / pages / MapPage / MapPage.js View on Github external
import BusIconSm from 'bpk-component-icon/sm/bus';
import FoodIconSm from 'bpk-component-icon/sm/food';
import LeisureIconSm from 'bpk-component-icon/sm/leisure';
import { withRtlSupport } from 'bpk-component-icon';
import mapReadme from 'bpk-component-map/README.md';

import iosScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/ios/default.png';
import androidScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/android/default.png';
import nativeMapReadme from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/README.md';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import IntroBlurb from '../../components/IntroBlurb';

import STYLES from './MapPage.scss';

const AlignedLandmarkIconLg = withRtlSupport(LandmarkIconLg);
const AlignedBusIconSm = withRtlSupport(BusIconSm);
const AlignedFoodIconSm = withRtlSupport(FoodIconSm);
const AlignedLeisureIconLg = withRtlSupport(LeisureIconSm);

const BpkMapWithScript = withGoogleMapsScript(BpkMap);
const API_KEY = process.env.GOOGLE_MAPS_API_KEY || '';
const MAP_URL = `https://maps.googleapis.com/maps/api/js?v=3.exp&key=${API_KEY}&libraries=geometry,drawing,places`;

const getClassName = cssModules(STYLES);

// Shibuya crossing, Tokyo.
const COORDINATES: BpkMapLatLong = {
  latitude: 35.661777,
  longitude: 139.704051,
};
github Skyscanner / backpack / packages / bpk-docs / src / pages / MapPage / MapPage.js View on Github external
import LeisureIconSm from 'bpk-component-icon/sm/leisure';
import { withRtlSupport } from 'bpk-component-icon';
import mapReadme from 'bpk-component-map/README.md';

import iosScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/ios/default.png';
import androidScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/android/default.png';
import nativeMapReadme from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/README.md';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import IntroBlurb from '../../components/IntroBlurb';

import STYLES from './MapPage.scss';

const AlignedLandmarkIconLg = withRtlSupport(LandmarkIconLg);
const AlignedBusIconSm = withRtlSupport(BusIconSm);
const AlignedFoodIconSm = withRtlSupport(FoodIconSm);
const AlignedLeisureIconLg = withRtlSupport(LeisureIconSm);

const BpkMapWithScript = withGoogleMapsScript(BpkMap);
const API_KEY = process.env.GOOGLE_MAPS_API_KEY || '';
const MAP_URL = `https://maps.googleapis.com/maps/api/js?v=3.exp&key=${API_KEY}&libraries=geometry,drawing,places`;

const getClassName = cssModules(STYLES);

// Shibuya crossing, Tokyo.
const COORDINATES: BpkMapLatLong = {
  latitude: 35.661777,
  longitude: 139.704051,
};

class StatefulBpkMapMarkers extends Component<{}, { selected: number }> {
  constructor() {
github Skyscanner / backpack / packages / bpk-component-map / stories.js View on Github external
import { withRtlSupport } from 'bpk-component-icon';
import LandmarkIconLg from 'bpk-component-icon/lg/landmark';
import BusIconLg from 'bpk-component-icon/lg/bus';
import FoodIconSm from 'bpk-component-icon/sm/food';

import BpkMap, {
  BpkOverlayView,
  BpkMapMarker,
  MARKER_TYPES,
  withGoogleMapsScript,
} from './index';

const BpkMapWithLoading = withGoogleMapsScript(BpkMap);

const AlignedLandmarkIconLg = withRtlSupport(LandmarkIconLg);
const AlignedBusIconLg = withRtlSupport(BusIconLg);
const AlignedFoodIconSm = withRtlSupport(FoodIconSm);

const StoryMap = props => {
  const { children, language, ...rest } = props;
  return (
    <div style={{ height: '400px' }}>
      <BpkMapWithLoading
        googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&language=en&libraries=geometry,drawing,places"
        {...rest}
      >
        {children}
      </BpkMapWithLoading>
    </div>
  );
};
github Skyscanner / backpack / packages / bpk-docs / src / layouts / SideNavLayout / NavList.js View on Github external
import { withRtlSupport } from 'bpk-component-icon';

import { setPlatformInLocalStorage } from '../../helpers/storage-helper';

import NavListFilter, { type Option as FilterOption } from './NavListFilter';
import STYLES from './NavList.scss';
import sortLinks from './links-sorter';
import {
  type LinkPropType,
  type CategoryPropType,
  type Category,
} from './common-types';

const getClassName = cssModules(STYLES);

const ArrowIconWithRtl = withRtlSupport(ArrowIcon);

const NavLink = (props: LinkPropType) => {
  const { children, route, tags, ...rest } = props;

  if (route) {
    return (
      <RouterNavLink
        className={getClassName('bpkdocs-side-nav-list__link')}
        activeClassName={getClassName('bpkdocs-side-nav-list__link--active')}
        to={route}
        {...rest}
      >
        <ArrowIconWithRtl
          className={getClassName('bpkdocs-side-nav-list__link-active-icon')}
        />
        {children}
github Skyscanner / backpack / packages / bpk-docs / src / pages / NavigationStackPage / page-components.js View on Github external
import { withRtlSupport } from 'bpk-component-icon';
import { updateOnDirectionChange } from 'bpk-component-rtl-toggle';
import BpkNavigationBar, {
  BpkNavigationBarIconButton,
} from 'bpk-component-navigation-bar';
import BpkNavigationStack, {
  withNavigationStackState,
} from 'bpk-component-navigation-stack';
import BpkButton from 'bpk-component-button';
import { cssModules } from 'bpk-react-utils';

import STYLES from './NavigationStackPage.scss';

const getClassName = cssModules(STYLES);
const ArrowIconWithRtl = withRtlSupport(ArrowIcon);
const ArrowRightIconWithRtl = withRtlSupport(ArrowRightIcon);

const RtlAwareNavigationStack = updateOnDirectionChange(BpkNavigationStack);
export const StatefulNavigationStack = withNavigationStackState(
  RtlAwareNavigationStack,
);

const BarAndStack = ({
  views,
  pushView,
  popView,
  className,
}: {
  views: Array<Element<any>>,
  pushView: ?(Element<any>) => mixed,
  popView: ?() => mixed,
  className: ?string,